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%;
}
folk-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
button {
margin: 1rem;
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 {
border-radius: 7px;

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

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

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

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

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

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

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

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

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

@ -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;
}
</style>
</head>
<body>

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

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

2
src/folk-arrow.ts
View File

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

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 { 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;

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 {
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 = '';

2
src/folk-hull.ts
View File

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

31
src/folk-rope.ts
View File

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

2
src/folk-xanadu.ts
View File

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