semantic zoom with event propagators
This commit is contained in:
“chrisshank”
parent
9bd2c4e4b1
commit
2db5e83cd5
|
|
@ -1,7 +1,7 @@
|
|||
import { css, PropertyValues } from '@lit/reactive-element';
|
||||
import { FolkRope } from './folk-rope.ts';
|
||||
import { property } from '@lit/reactive-element/decorators.js';
|
||||
import { Propagator } from '@propagators';
|
||||
import { FolkRope } from './folk-rope.ts';
|
||||
|
||||
export class FolkEventPropagator extends FolkRope {
|
||||
static override tagName = 'folk-event-propagator';
|
||||
|
|
@ -30,13 +30,13 @@ export class FolkEventPropagator extends FolkRope {
|
|||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
[part='trigger'] {
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-bottom: none;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.expression {
|
||||
[part='expression'] {
|
||||
border-radius: 0 5px 5px 5px;
|
||||
}
|
||||
`,
|
||||
|
|
@ -55,8 +55,8 @@ export class FolkEventPropagator extends FolkRope {
|
|||
const root = super.createRenderRoot();
|
||||
|
||||
this.#container.className = 'input-container';
|
||||
this.#triggerTextarea.className = 'trigger';
|
||||
this.#expressionTextarea.className = 'expression';
|
||||
this.#triggerTextarea.part.add('trigger');
|
||||
this.#expressionTextarea.part.add('expression');
|
||||
|
||||
this.#triggerTextarea.addEventListener('change', () => {
|
||||
this.trigger = this.#triggerTextarea.value;
|
||||
|
|
|
|||
|
|
@ -332,6 +332,7 @@ export class FolkShape extends FolkElement {
|
|||
|
||||
// Handle pointer capture setup/cleanup
|
||||
if (event instanceof PointerEvent) {
|
||||
event.stopPropagation();
|
||||
if (event.type === 'pointerdown') {
|
||||
if (target !== this && !handle) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,12 +21,6 @@
|
|||
inset: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
folk-shape {
|
||||
background: black;
|
||||
border-radius: 5px;
|
||||
|
|
@ -46,6 +40,31 @@
|
|||
max-width: 35ch;
|
||||
}
|
||||
}
|
||||
|
||||
/* @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) or style(--folk-discrete-zoom: 0.5) {
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(3em * (var(--folk-zoom)));
|
||||
opacity: clamp(0, calc(var(--folk-zoom) + 0.5), 1);
|
||||
}
|
||||
}
|
||||
@container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) {
|
||||
folk-shape {
|
||||
border-radius: clamp(5px, calc((0.25 - var(--folk-zoom)) * 200%), 50%);
|
||||
}
|
||||
}
|
||||
@container style(--folk-discrete-zoom: 0) {
|
||||
folk-shape {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Event Propagator</title>
|
||||
<style>
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pinch-zoom {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
folk-shape {
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0px 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
folk-event-propagator {
|
||||
&::part(trigger) {
|
||||
align-self: center;
|
||||
font-size: clamp(1rem, calc(3rem * (1.05 - var(--scale))), 3rem);
|
||||
}
|
||||
|
||||
&::part(expression) {
|
||||
opacity: clamp(0, calc(var(--scale) - 0.3), 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pinch-zoom>
|
||||
<!-- Pinch zoom applies transforms on child elements instead of itself which breaks folk shape -->
|
||||
<div>
|
||||
<folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
|
||||
<folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
|
||||
<folk-event-propagator
|
||||
source="#box3"
|
||||
target="#box4"
|
||||
trigger="transform"
|
||||
expression="y: from.x,
|
||||
rotation: from.x/10"
|
||||
></folk-event-propagator>
|
||||
</div>
|
||||
</pinch-zoom>
|
||||
|
||||
<script type="module">
|
||||
import 'https://esm.sh/pinch-zoom-element@1.1.1';
|
||||
import '@labs/standalone/folk-shape.ts';
|
||||
import '@labs/standalone/folk-event-propagator.ts';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue