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

sdf refactor

This commit is contained in:
“chrisshank” 2024-12-01 00:35:55 -08:00
parent c639101942
commit c4a61f8dd8
2 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
demo/distance.html
View File

@ -31,14 +31,15 @@
</style>
</head>
<body>
<cell-renderer resolution="800" image-smoothing="true"></cell-renderer>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
<fc-geometry x="300" y="150" width="80" height="40"></fc-geometry>
<fc-geometry x="400" y="250" width="60" height="90"></fc-geometry>
<fc-geometry x="200" y="400" width="100" height="100"></fc-geometry>
<fc-geometry x="500" y="100" width="30" height="70"></fc-geometry>
<cell-renderer resolution="800" image-smoothing="true">
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
<fc-geometry x="300" y="150" width="80" height="40"></fc-geometry>
<fc-geometry x="400" y="250" width="60" height="90"></fc-geometry>
<fc-geometry x="200" y="400" width="100" height="100"></fc-geometry>
<fc-geometry x="500" y="100" width="30" height="70"></fc-geometry>
</cell-renderer>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
@ -46,16 +47,6 @@
FolkGeometry.define();
CellRenderer.define();
// Get all geometry elements and create points for the distance field
const geometries = document.querySelectorAll('fc-geometry');
const renderer = document.querySelector('cell-renderer');
// Update distance field when geometries move or resize
geometries.forEach((geometry) => {
geometry.addEventListener('move', (e) => renderer.handleGeometryUpdate(e));
geometry.addEventListener('resize', (e) => renderer.handleGeometryUpdate(e));
});
</script>
</body>
</html>

33
src/distanceField/cellRenderer.ts
View File

@ -3,16 +3,27 @@ import type { Vector2 } from '../utils/Vector2.ts';
import { Fields } from './fields.ts';
export class CellRenderer extends HTMLElement {
static tagName = 'cell-renderer';
static define() {
customElements.define(this.tagName, this);
}
static observedAttributes = ['resolution', 'image-smoothing'];
private canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D;
private offscreenCtx: CanvasRenderingContext2D;
private fields: Fields;
private resolution: number;
private imageSmoothing: boolean;
static tagName = 'cell-renderer';
// Get all geometry elements and create points for the distance field
private geometries = document.querySelectorAll('fc-geometry');
constructor() {
super();
this.resolution = 2000; // default resolution
this.imageSmoothing = true;
this.fields = new Fields(this.resolution);
@ -30,12 +41,20 @@ export class CellRenderer extends HTMLElement {
this.renderDistanceField();
}
static define() {
customElements.define(this.tagName, this);
connectedCallback() {
// Update distance field when geometries move or resize
this.geometries.forEach((geometry) => {
geometry.addEventListener('move', this.handleGeometryUpdate);
geometry.addEventListener('resize', this.handleGeometryUpdate);
});
}
static get observedAttributes() {
return ['resolution', 'image-smoothing'];
disconnectedCallback() {
// Update distance field when geometries move or resize
this.geometries.forEach((geometry) => {
geometry.removeEventListener('move', this.handleGeometryUpdate);
geometry.removeEventListener('resize', this.handleGeometryUpdate);
});
}
attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@ -145,7 +164,7 @@ export class CellRenderer extends HTMLElement {
return { ctx, offscreenCtx };
}
handleGeometryUpdate(event: Event) {
handleGeometryUpdate = (event: Event) => {
const geometry = event.target as HTMLElement;
const index = Array.from(document.querySelectorAll('fc-geometry')).indexOf(geometry as FolkGeometry);
if (index === -1) return;
@ -163,7 +182,7 @@ export class CellRenderer extends HTMLElement {
} else {
this.addShape(points, true);
}
}
};
updateShape(index: number, points: Vector2[], isClosed = true) {
// Transform each point from screen coordinates to field coordinates