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);
}
folk-distance-field {
position: absolute;
inset: 0;
}
h1,
p {
width: fit-content;

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

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

6
demo/propagator-toolbar.html
View File

@ -18,16 +18,10 @@
folk-shape {
background: transparent;
position: absolute;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 2px;
border: 2px solid rgba(0, 0, 0, 0.5);
}
folk-distance-field {
position: absolute;
inset: 0;
}
</style>
</head>
<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 {
margin: 0;
width: fit-content;
@ -39,9 +33,9 @@
<body>
<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="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-hull sources="h1">

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

@ -16,6 +16,7 @@ export class FolkBaseConnection extends FolkElement {
pointer-events: none;
}
`;
@property({ type: String, reflect: true }) source = '';
@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 { FolkElement } from './common/folk-element.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();
// TODO: use mutation observer to track the addition an removal of elements
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 = '';
#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 { WebGLUtils } from './common/webgl.ts';
import { FolkBaseSet } from './folk-base-set.ts';
import { FolkShape } from './folk-shape.ts';
import { PropertyValues } from '@lit/reactive-element';
/**
@ -14,13 +13,6 @@ import { PropertyValues } from '@lit/reactive-element';
export class FolkDistanceField extends FolkBaseSet {
static tagName = 'folk-distance-field';
static override define() {
FolkShape.define();
super.define();
}
#shadow = this.attachShadow({ mode: 'open' });
private textures: WebGLTexture[] = [];
private canvas!: HTMLCanvasElement;
@ -39,26 +31,27 @@ export class FolkDistanceField extends FolkBaseSet {
private isPingTexture: boolean = true;
constructor() {
super();
firstUpdated(changedProperties: PropertyValues<this>): void {
super.firstUpdated(changedProperties);
this.#shadow.appendChild(document.createElement('slot'));
this.renderRoot.appendChild(document.createElement('slot'));
}
connectedCallback() {
super.connectedCallback();
this.initWebGL();
this.initShaders();
this.initPingPongTextures();
window.addEventListener('resize', this.handleResize);
super.connectedCallback();
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('resize', this.handleResize);
this.cleanupWebGLResources();
}
@ -70,7 +63,7 @@ export class FolkDistanceField extends FolkBaseSet {
}
this.canvas = canvas;
this.#shadow.prepend(canvas);
this.renderRoot.prepend(canvas);
this.glContext = gl;
}

25
src/folk-hull.ts
View File

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