jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

semantic zoom with event propagators

This commit is contained in:
“chrisshank” 2024-12-26 16:17:02 -08:00
parent 9bd2c4e4b1
commit 2db5e83cd5
4 changed files with 102 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
labs/folk-event-propagator.ts
View File

@ -1,7 +1,7 @@
import { css, PropertyValues } from '@lit/reactive-element'; import { css, PropertyValues } from '@lit/reactive-element';
import { FolkRope } from './folk-rope.ts';
import { property } from '@lit/reactive-element/decorators.js'; import { property } from '@lit/reactive-element/decorators.js';
import { Propagator } from '@propagators'; import { Propagator } from '@propagators';
import { FolkRope } from './folk-rope.ts';
export class FolkEventPropagator extends FolkRope { export class FolkEventPropagator extends FolkRope {
static override tagName = 'folk-event-propagator'; static override tagName = 'folk-event-propagator';
@ -30,13 +30,13 @@ export class FolkEventPropagator extends FolkRope {
box-sizing: content-box; box-sizing: content-box;
} }
.trigger { [part='trigger'] {
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
border-bottom: none; border-bottom: none;
width: fit-content; width: fit-content;
} }
.expression { [part='expression'] {
border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px;
} }
`, `,
@ -55,8 +55,8 @@ export class FolkEventPropagator extends FolkRope {
const root = super.createRenderRoot(); const root = super.createRenderRoot();
this.#container.className = 'input-container'; this.#container.className = 'input-container';
this.#triggerTextarea.className = 'trigger'; this.#triggerTextarea.part.add('trigger');
this.#expressionTextarea.className = 'expression'; this.#expressionTextarea.part.add('expression');
this.#triggerTextarea.addEventListener('change', () => { this.#triggerTextarea.addEventListener('change', () => {
this.trigger = this.#triggerTextarea.value; this.trigger = this.#triggerTextarea.value;

1
labs/folk-shape.ts
View File

@ -332,6 +332,7 @@ export class FolkShape extends FolkElement {
// Handle pointer capture setup/cleanup // Handle pointer capture setup/cleanup
if (event instanceof PointerEvent) { if (event instanceof PointerEvent) {
event.stopPropagation();
if (event.type === 'pointerdown') { if (event.type === 'pointerdown') {
if (target !== this && !handle) return; if (target !== this && !handle) return;

31
website/canvas/fluid-semantic-zoom-in-a-canvas.html
View File

@ -21,12 +21,6 @@
inset: 0; inset: 0;
} }
label {
display: flex;
align-items: center;
margin: 1rem;
}
folk-shape { folk-shape {
background: black; background: black;
border-radius: 5px; border-radius: 5px;
@ -46,6 +40,31 @@
max-width: 35ch; 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> </style>
</head> </head>
<body> <body>

71
website/canvas/propagators/event-propagators-with-semantic-zoom.html Normal file
View File

@ -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>