From e6dc9cc8c53c252e2e9e93a0c49ade96d0fbab19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Tue, 10 Dec 2024 14:58:54 -0800 Subject: [PATCH] base connection styles --- demo/[tests] rope.html | 7 ---- demo/chains-of-thought/index.html | 6 ---- demo/cross-iframe-sticky-html-arrow.html | 7 ---- demo/responsive-canvas-shapes.html | 6 ---- demo/semantic-zoom-in-a-canvas.html | 6 ---- demo/spreadsheet-graph-projection.html | 3 -- demo/sticky-html-arrow.html | 7 ---- demo/sticky-html-rope.html | 11 ++---- src/folk-arrow.ts | 2 +- src/folk-base-connection.ts | 10 +++++- src/folk-event-propagator.ts | 45 +++++++++++------------- src/folk-hull.ts | 2 +- src/folk-rope.ts | 31 ++++++++-------- src/folk-xanadu.ts | 2 +- 14 files changed, 51 insertions(+), 94 deletions(-) diff --git a/demo/[tests] rope.html b/demo/[tests] rope.html index d7a94db..7a5a085 100644 --- a/demo/[tests] rope.html +++ b/demo/[tests] rope.html @@ -20,13 +20,6 @@ border-radius: 10%; } - folk-rope { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - button { margin: 1rem; background-color: black; diff --git a/demo/chains-of-thought/index.html b/demo/chains-of-thought/index.html index 2831060..4fcba64 100644 --- a/demo/chains-of-thought/index.html +++ b/demo/chains-of-thought/index.html @@ -36,12 +36,6 @@ } } - folk-arrow { - display: block; - position: absolute; - inset: 0 0 0 0; - } - folk-shape { border-radius: 7px; diff --git a/demo/cross-iframe-sticky-html-arrow.html b/demo/cross-iframe-sticky-html-arrow.html index 0720cd8..158d1eb 100644 --- a/demo/cross-iframe-sticky-html-arrow.html +++ b/demo/cross-iframe-sticky-html-arrow.html @@ -20,13 +20,6 @@ border-radius: 3px; } - folk-rope { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - iframe { width: 100%; height: 100%; diff --git a/demo/responsive-canvas-shapes.html b/demo/responsive-canvas-shapes.html index 7ab7bbf..650e7ce 100644 --- a/demo/responsive-canvas-shapes.html +++ b/demo/responsive-canvas-shapes.html @@ -22,12 +22,6 @@ margin: 1rem; } - folk-arrow { - display: block; - position: absolute; - inset: 0 0 0 0; - } - folk-shape { background: black; border-radius: 5px; diff --git a/demo/semantic-zoom-in-a-canvas.html b/demo/semantic-zoom-in-a-canvas.html index 67b14c7..b6111dd 100644 --- a/demo/semantic-zoom-in-a-canvas.html +++ b/demo/semantic-zoom-in-a-canvas.html @@ -75,12 +75,6 @@ margin: 1rem; } - folk-arrow { - display: block; - position: absolute; - inset: 0 0 0 0; - } - folk-shape { background: black; color: white; diff --git a/demo/spreadsheet-graph-projection.html b/demo/spreadsheet-graph-projection.html index e7f0d73..3d9b55a 100644 --- a/demo/spreadsheet-graph-projection.html +++ b/demo/spreadsheet-graph-projection.html @@ -16,9 +16,6 @@ } folk-arrow { - display: block; - position: absolute; - inset: 0 0 0 0; z-index: calc(infinity); } diff --git a/demo/sticky-html-arrow.html b/demo/sticky-html-arrow.html index 2cd3ef0..7360912 100644 --- a/demo/sticky-html-arrow.html +++ b/demo/sticky-html-arrow.html @@ -19,13 +19,6 @@ border: 1px solid black; border-radius: 3px; } - - folk-arrow { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } diff --git a/demo/sticky-html-rope.html b/demo/sticky-html-rope.html index aa3993b..9768d7b 100644 --- a/demo/sticky-html-rope.html +++ b/demo/sticky-html-rope.html @@ -20,15 +20,8 @@ border-radius: 10%; } - folk-rope { - display: block; - position: absolute; - inset: 0; - pointer-events: none; - - &[target='#box2'] { - --folk-rope-color: rebeccapurple; - } + folk-rope[target='#box2'] { + --folk-rope-color: rebeccapurple; } button { diff --git a/src/folk-arrow.ts b/src/folk-arrow.ts index c22408a..0b469d8 100644 --- a/src/folk-arrow.ts +++ b/src/folk-arrow.ts @@ -65,7 +65,7 @@ export class FolkArrow extends FolkBaseConnection { return; } - this.style.display = 'block'; + this.style.display = ''; const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow( sourceRect.x, diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts index ae7edb2..f360c52 100644 --- a/src/folk-base-connection.ts +++ b/src/folk-base-connection.ts @@ -3,11 +3,19 @@ import { ClientRectObserverEntry } from './common/client-rect-observer.ts'; import { FolkObserver } from './common/folk-observer.ts'; import { FolkElement } from './common/folk-element.ts'; import { property, state } from '@lit/reactive-element/decorators.js'; -import { PropertyValues } from '@lit/reactive-element'; +import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element'; const folkObserver = new FolkObserver(); export class FolkBaseConnection extends FolkElement { + static styles: CSSResultGroup = css` + :host { + display: block; + position: absolute; + inset: 0; + pointer-events: none; + } + `; @property({ type: String, reflect: true }) source = ''; @state() sourceElement: Element | null = null; diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts index 3b61a90..cf95ee3 100644 --- a/src/folk-event-propagator.ts +++ b/src/folk-event-propagator.ts @@ -6,31 +6,26 @@ import { property } from '@lit/reactive-element/decorators.js'; export class FolkEventPropagator extends FolkRope { static override tagName = 'folk-event-propagator'; - static styles = css` - ${FolkRope.styles} - :host { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - - textarea { - position: absolute; - width: auto; - min-width: 3ch; - height: auto; - resize: none; - background: rgba(256, 256, 256, 0.8); - border: 1px solid #ccc; - padding: 4px; - pointer-events: auto; - overflow: hidden; - field-sizing: content; - translate: -50% -50%; - border-radius: 5px; - } - `; + static styles = [ + ...FolkRope.styles, + css` + textarea { + position: absolute; + width: auto; + min-width: 3ch; + height: auto; + resize: none; + background: rgba(256, 256, 256, 0.8); + border: 1px solid #ccc; + padding: 4px; + pointer-events: auto; + overflow: hidden; + field-sizing: content; + translate: -50% -50%; + border-radius: 5px; + } + `, + ]; @property({ type: String, reflect: true }) trigger = ''; diff --git a/src/folk-hull.ts b/src/folk-hull.ts index 540d88d..e9fbb52 100644 --- a/src/folk-hull.ts +++ b/src/folk-hull.ts @@ -53,7 +53,7 @@ export class FolkHull extends FolkBaseSet { return; } - this.style.display = 'block'; + this.style.display = ''; this.#hull = makeHull(this.sourceRects); this.#hullEl.style.clipPath = verticesToPolygon(this.#hull); diff --git a/src/folk-rope.ts b/src/folk-rope.ts index 9fc8048..9ba9930 100644 --- a/src/folk-rope.ts +++ b/src/folk-rope.ts @@ -32,21 +32,24 @@ declare global { export class FolkRope extends FolkBaseConnection implements AnimationFrameControllerHost { static override tagName = 'folk-rope'; - static styles = css` - svg { - height: 100%; - pointer-events: none; - width: 100%; - } + static styles = [ + FolkBaseConnection.styles, + css` + svg { + height: 100%; + pointer-events: none; + width: 100%; + } - path { - fill: none; - pointer-events: auto; - stroke: var(--folk-rope-color, black); - stroke-width: var(--folk-rope-width, 3); - stroke-linecap: var(--folk-rope-linecap, round); - } - `; + path { + fill: none; + pointer-events: auto; + stroke: var(--folk-rope-color, black); + stroke-width: var(--folk-rope-width, 3); + stroke-linecap: var(--folk-rope-linecap, round); + } + `, + ]; #rAF = new AnimationFrameController(this); diff --git a/src/folk-xanadu.ts b/src/folk-xanadu.ts index 9ed4af6..5ac35a6 100644 --- a/src/folk-xanadu.ts +++ b/src/folk-xanadu.ts @@ -16,7 +16,7 @@ export class FolkXanadu extends FolkBaseConnection { return; } - this.style.display = 'block'; + this.style.display = ''; // If the right side of the target is to the left of the right side of the source then swap them if (sourceRect.x + sourceRect.width > targetRect.x + targetRect.width) {