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> </style>
</head> </head>
<body> <body>
<cell-renderer resolution="800" image-smoothing="true"></cell-renderer> <cell-renderer resolution="800" image-smoothing="true">
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry> <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="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" 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="300" y="150" width="80" height="40"></fc-geometry>
<fc-geometry x="400" y="250" width="60" height="90"></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="200" y="400" width="100" height="100"></fc-geometry>
<fc-geometry x="500" y="100" width="30" height="70"></fc-geometry> <fc-geometry x="500" y="100" width="30" height="70"></fc-geometry>
</cell-renderer>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
@ -46,16 +47,6 @@
FolkGeometry.define(); FolkGeometry.define();
CellRenderer.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> </script>
</body> </body>
</html> </html>

33
src/distanceField/cellRenderer.ts
View File

@ -3,16 +3,27 @@ import type { Vector2 } from '../utils/Vector2.ts';
import { Fields } from './fields.ts'; import { Fields } from './fields.ts';
export class CellRenderer extends HTMLElement { 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 canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
private offscreenCtx: CanvasRenderingContext2D; private offscreenCtx: CanvasRenderingContext2D;
private fields: Fields; private fields: Fields;
private resolution: number; private resolution: number;
private imageSmoothing: boolean; 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() { constructor() {
super(); super();
this.resolution = 2000; // default resolution this.resolution = 2000; // default resolution
this.imageSmoothing = true; this.imageSmoothing = true;
this.fields = new Fields(this.resolution); this.fields = new Fields(this.resolution);
@ -30,12 +41,20 @@ export class CellRenderer extends HTMLElement {
this.renderDistanceField(); this.renderDistanceField();
} }
static define() { connectedCallback() {
customElements.define(this.tagName, this); // 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() { disconnectedCallback() {
return ['resolution', 'image-smoothing']; // 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) { attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@ -145,7 +164,7 @@ export class CellRenderer extends HTMLElement {
return { ctx, offscreenCtx }; return { ctx, offscreenCtx };
} }
handleGeometryUpdate(event: Event) { handleGeometryUpdate = (event: Event) => {
const geometry = event.target as HTMLElement; const geometry = event.target as HTMLElement;
const index = Array.from(document.querySelectorAll('fc-geometry')).indexOf(geometry as FolkGeometry); const index = Array.from(document.querySelectorAll('fc-geometry')).indexOf(geometry as FolkGeometry);
if (index === -1) return; if (index === -1) return;
@ -163,7 +182,7 @@ export class CellRenderer extends HTMLElement {
} else { } else {
this.addShape(points, true); this.addShape(points, true);
} }
} };
updateShape(index: number, points: Vector2[], isClosed = true) { updateShape(index: number, points: Vector2[], isClosed = true) {
// Transform each point from screen coordinates to field coordinates // Transform each point from screen coordinates to field coordinates