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

base set styles

This commit is contained in:
“chrisshank” 2024-12-10 15:05:05 -08:00
parent e6dc9cc8c5
commit 50c07fcf81
8 changed files with 34 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/[shaders]distance-field.html
View File

@ -24,11 +24,6 @@
border: 2px solid rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.5);
} }
folk-distance-field {
position: absolute;
inset: 0;
}
h1, h1,
p { p {
width: fit-content; width: fit-content;

6
demo/[tests] distance-field.html
View File

@ -18,15 +18,11 @@
folk-shape { folk-shape {
border: 2px solid black; border: 2px solid black;
} }
folk-distance-field {
position: absolute;
inset: 0;
}
</style> </style>
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-distance-field.ts'; import '../src/standalone/folk-distance-field.ts';
const d = document.createElement('folk-distance-field'); const d = document.createElement('folk-distance-field');

6
demo/propagator-toolbar.html
View File

@ -18,16 +18,10 @@
folk-shape { folk-shape {
background: transparent; background: transparent;
position: absolute;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
border-radius: 2px; border-radius: 2px;
border: 2px solid rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.5);
} }
folk-distance-field {
position: absolute;
inset: 0;
}
</style> </style>
</head> </head>
<body> <body>

8
demo/visualizing-set-relations.html
View File

@ -24,12 +24,6 @@
} }
} }
folk-hull {
display: block;
position: absolute;
inset: 0 0 0 0;
}
h1 { h1 {
margin: 0; margin: 0;
width: fit-content; width: fit-content;
@ -39,9 +33,9 @@
<body> <body>
<h1>This is a Convex Hull</h1> <h1>This is a Convex Hull</h1>
<folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-shape x="50" y="100" width="50" height="50"></folk-shape> <folk-shape x="50" y="100" width="50" height="50"></folk-shape>
<folk-shape x="200" y="200" width="50" height="50"></folk-shape> <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-shape x="100" y="300" width="50" height="50"></folk-shape> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<folk-hull sources="h1"> <folk-hull sources="h1">

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

@ -16,6 +16,7 @@ export class FolkBaseConnection extends FolkElement {
pointer-events: none; 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;

15
src/folk-base-set.ts
View File

@ -2,12 +2,25 @@ import { property, state } from '@lit/reactive-element/decorators.js';
import { ClientRectObserverEntry } from './common/client-rect-observer.ts'; import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
import { FolkElement } from './common/folk-element.ts'; import { FolkElement } from './common/folk-element.ts';
import { FolkObserver } from './common/folk-observer.ts'; import { FolkObserver } from './common/folk-observer.ts';
import { PropertyValues } from '@lit/reactive-element'; import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element';
const folkObserver = new FolkObserver(); const folkObserver = new FolkObserver();
// TODO: use mutation observer to track the addition an removal of elements // TODO: use mutation observer to track the addition an removal of elements
export class FolkBaseSet extends FolkElement { export class FolkBaseSet extends FolkElement {
static styles: CSSResultGroup = css`
:host {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
}
::slotted(*) {
pointer-events: auto;
}
`;
@property({ type: String, reflect: true }) sources = ''; @property({ type: String, reflect: true }) sources = '';
#sourcesMap = new Map<Element, DOMRectReadOnly>(); #sourcesMap = new Map<Element, DOMRectReadOnly>();

21
src/folk-distance-field.ts
View File

@ -3,7 +3,6 @@ import { Point } from './common/types.ts';
import { glsl } from './common/tags.ts'; import { glsl } from './common/tags.ts';
import { WebGLUtils } from './common/webgl.ts'; import { WebGLUtils } from './common/webgl.ts';
import { FolkBaseSet } from './folk-base-set.ts'; import { FolkBaseSet } from './folk-base-set.ts';
import { FolkShape } from './folk-shape.ts';
import { PropertyValues } from '@lit/reactive-element'; import { PropertyValues } from '@lit/reactive-element';
/** /**
@ -14,13 +13,6 @@ import { PropertyValues } from '@lit/reactive-element';
export class FolkDistanceField extends FolkBaseSet { export class FolkDistanceField extends FolkBaseSet {
static tagName = 'folk-distance-field'; static tagName = 'folk-distance-field';
static override define() {
FolkShape.define();
super.define();
}
#shadow = this.attachShadow({ mode: 'open' });
private textures: WebGLTexture[] = []; private textures: WebGLTexture[] = [];
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement;
@ -39,26 +31,27 @@ export class FolkDistanceField extends FolkBaseSet {
private isPingTexture: boolean = true; private isPingTexture: boolean = true;
constructor() { firstUpdated(changedProperties: PropertyValues<this>): void {
super(); super.firstUpdated(changedProperties);
this.#shadow.appendChild(document.createElement('slot')); this.renderRoot.appendChild(document.createElement('slot'));
} }
connectedCallback() { connectedCallback() {
super.connectedCallback();
this.initWebGL(); this.initWebGL();
this.initShaders(); this.initShaders();
this.initPingPongTextures(); this.initPingPongTextures();
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
super.connectedCallback();
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
this.cleanupWebGLResources(); this.cleanupWebGLResources();
} }
@ -70,7 +63,7 @@ export class FolkDistanceField extends FolkBaseSet {
} }
this.canvas = canvas; this.canvas = canvas;
this.#shadow.prepend(canvas); this.renderRoot.prepend(canvas);
this.glContext = gl; this.glContext = gl;
} }

25
src/folk-hull.ts
View File

@ -12,21 +12,16 @@ declare global {
export class FolkHull extends FolkBaseSet { export class FolkHull extends FolkBaseSet {
static tagName = 'folk-hull'; static tagName = 'folk-hull';
static styles = css` static styles = [
:host { FolkBaseSet.styles,
pointer-events: none; css`
} #hull {
background-color: var(--folk-hull-bg, #b4d8f644);
#hull { height: 100%;
background-color: var(--folk-hull-bg, #b4d8f644); width: 100%;
height: 100%; }
width: 100%; `,
} ];
::slotted(*) {
pointer-events: auto;
}
`;
#hull: Point[] = []; #hull: Point[] = [];