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

base connection styles

This commit is contained in:
“chrisshank” 2024-12-10 14:58:54 -08:00
parent 4327b2a4b2
commit e6dc9cc8c5
14 changed files with 51 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo/[tests] rope.html
View File

@ -20,13 +20,6 @@
border-radius: 10%; border-radius: 10%;
} }
folk-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
button { button {
margin: 1rem; margin: 1rem;
background-color: black; background-color: black;

6
demo/chains-of-thought/index.html
View File

@ -36,12 +36,6 @@
} }
} }
folk-arrow {
display: block;
position: absolute;
inset: 0 0 0 0;
}
folk-shape { folk-shape {
border-radius: 7px; border-radius: 7px;

7
demo/cross-iframe-sticky-html-arrow.html
View File

@ -20,13 +20,6 @@
border-radius: 3px; border-radius: 3px;
} }
folk-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;

6
demo/responsive-canvas-shapes.html
View File

@ -22,12 +22,6 @@
margin: 1rem; margin: 1rem;
} }
folk-arrow {
display: block;
position: absolute;
inset: 0 0 0 0;
}
folk-shape { folk-shape {
background: black; background: black;
border-radius: 5px; border-radius: 5px;

6
demo/semantic-zoom-in-a-canvas.html
View File

@ -75,12 +75,6 @@
margin: 1rem; margin: 1rem;
} }
folk-arrow {
display: block;
position: absolute;
inset: 0 0 0 0;
}
folk-shape { folk-shape {
background: black; background: black;
color: white; color: white;

3
demo/spreadsheet-graph-projection.html
View File

@ -16,9 +16,6 @@
} }
folk-arrow { folk-arrow {
display: block;
position: absolute;
inset: 0 0 0 0;
z-index: calc(infinity); z-index: calc(infinity);
} }

7
demo/sticky-html-arrow.html
View File

@ -19,13 +19,6 @@
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
} }
folk-arrow {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
</style> </style>
</head> </head>
<body> <body>

11
demo/sticky-html-rope.html
View File

@ -20,15 +20,8 @@
border-radius: 10%; border-radius: 10%;
} }
folk-rope { folk-rope[target='#box2'] {
display: block; --folk-rope-color: rebeccapurple;
position: absolute;
inset: 0;
pointer-events: none;
&[target='#box2'] {
--folk-rope-color: rebeccapurple;
}
} }
button { button {

2
src/folk-arrow.ts
View File

@ -65,7 +65,7 @@ export class FolkArrow extends FolkBaseConnection {
return; return;
} }
this.style.display = 'block'; this.style.display = '';
const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow( const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow(
sourceRect.x, sourceRect.x,

10
src/folk-base-connection.ts
View File

@ -3,11 +3,19 @@ import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
import { FolkObserver } from './common/folk-observer.ts'; import { FolkObserver } from './common/folk-observer.ts';
import { FolkElement } from './common/folk-element.ts'; import { FolkElement } from './common/folk-element.ts';
import { property, state } from '@lit/reactive-element/decorators.js'; 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(); const folkObserver = new FolkObserver();
export class FolkBaseConnection extends FolkElement { 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 = ''; @property({ type: String, reflect: true }) source = '';
@state() sourceElement: Element | null = null; @state() sourceElement: Element | null = null;

45
src/folk-event-propagator.ts
View File

@ -6,31 +6,26 @@ import { property } from '@lit/reactive-element/decorators.js';
export class FolkEventPropagator extends FolkRope { export class FolkEventPropagator extends FolkRope {
static override tagName = 'folk-event-propagator'; static override tagName = 'folk-event-propagator';
static styles = css` static styles = [
${FolkRope.styles} ...FolkRope.styles,
:host { css`
display: block; textarea {
position: absolute; position: absolute;
inset: 0 0 0 0; width: auto;
pointer-events: none; min-width: 3ch;
} height: auto;
resize: none;
textarea { background: rgba(256, 256, 256, 0.8);
position: absolute; border: 1px solid #ccc;
width: auto; padding: 4px;
min-width: 3ch; pointer-events: auto;
height: auto; overflow: hidden;
resize: none; field-sizing: content;
background: rgba(256, 256, 256, 0.8); translate: -50% -50%;
border: 1px solid #ccc; border-radius: 5px;
padding: 4px; }
pointer-events: auto; `,
overflow: hidden; ];
field-sizing: content;
translate: -50% -50%;
border-radius: 5px;
}
`;
@property({ type: String, reflect: true }) trigger = ''; @property({ type: String, reflect: true }) trigger = '';

2
src/folk-hull.ts
View File

@ -53,7 +53,7 @@ export class FolkHull extends FolkBaseSet {
return; return;
} }
this.style.display = 'block'; this.style.display = '';
this.#hull = makeHull(this.sourceRects); this.#hull = makeHull(this.sourceRects);
this.#hullEl.style.clipPath = verticesToPolygon(this.#hull); this.#hullEl.style.clipPath = verticesToPolygon(this.#hull);

31
src/folk-rope.ts
View File

@ -32,21 +32,24 @@ declare global {
export class FolkRope extends FolkBaseConnection implements AnimationFrameControllerHost { export class FolkRope extends FolkBaseConnection implements AnimationFrameControllerHost {
static override tagName = 'folk-rope'; static override tagName = 'folk-rope';
static styles = css` static styles = [
svg { FolkBaseConnection.styles,
height: 100%; css`
pointer-events: none; svg {
width: 100%; height: 100%;
} pointer-events: none;
width: 100%;
}
path { path {
fill: none; fill: none;
pointer-events: auto; pointer-events: auto;
stroke: var(--folk-rope-color, black); stroke: var(--folk-rope-color, black);
stroke-width: var(--folk-rope-width, 3); stroke-width: var(--folk-rope-width, 3);
stroke-linecap: var(--folk-rope-linecap, round); stroke-linecap: var(--folk-rope-linecap, round);
} }
`; `,
];
#rAF = new AnimationFrameController(this); #rAF = new AnimationFrameController(this);

2
src/folk-xanadu.ts
View File

@ -16,7 +16,7 @@ export class FolkXanadu extends FolkBaseConnection {
return; 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 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) { if (sourceRect.x + sourceRect.width > targetRect.x + targetRect.width) {