@vectojs/core 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -3,14 +3,16 @@ import {
3
3
  LayoutResultBuffer,
4
4
  computeLineSegments,
5
5
  createCanvasMeasurer
6
- } from "./chunk-T456DL4P.mjs";
6
+ } from "./chunk-MCULB5VC.mjs";
7
7
  import {
8
8
  CanvasRenderer,
9
9
  SVGRenderer,
10
10
  WebGPUParticleSystemManager,
11
11
  createWebGLPointRenderer,
12
- parseColorToRGBA
13
- } from "./chunk-2Y45S4JK.mjs";
12
+ isSafeUrl,
13
+ parseColorToRGBA,
14
+ sanitizeUrl
15
+ } from "./chunk-WEQRBXT2.mjs";
14
16
  import {
15
17
  Easing,
16
18
  Entity,
@@ -22,12 +24,12 @@ import {
22
24
  TweenDriver,
23
25
  VectoJSEvent,
24
26
  isTweenConfig
25
- } from "./chunk-H3QIE77O.mjs";
27
+ } from "./chunk-P6MDWIEX.mjs";
26
28
  import {
27
29
  ArabicShaper,
28
30
  BidiResolver,
29
31
  LayoutWorkerManager
30
- } from "./chunk-YA2J5ZH7.mjs";
32
+ } from "./chunk-B3Z3JEJH.mjs";
31
33
 
32
34
  // src/tree/ComputeParticleEntity.ts
33
35
  var PARTICLE_STRIDE_FLOATS = 8;
@@ -489,6 +491,17 @@ var Scene = class _Scene {
489
491
  getRenderer() {
490
492
  return this.renderer;
491
493
  }
494
+ /** Convert browser viewport coordinates into this Scene's logical coordinates. */
495
+ clientToScene(clientX, clientY) {
496
+ const rect = this.canvas.getBoundingClientRect?.();
497
+ if (!rect) return { x: clientX, y: clientY };
498
+ const cssWidth = rect.width || this.canvas.clientWidth || this.width;
499
+ const cssHeight = rect.height || this.canvas.clientHeight || this.height;
500
+ return {
501
+ x: (clientX - rect.left) * (cssWidth > 0 ? this.width / cssWidth : 1),
502
+ y: (clientY - rect.top) * (cssHeight > 0 ? this.height / cssHeight : 1)
503
+ };
504
+ }
492
505
  /**
493
506
  * Add a top-level entity to the scene graph.
494
507
  *
@@ -563,12 +576,21 @@ var Scene = class _Scene {
563
576
  this.removeA11yRecursively(overlay);
564
577
  this.markDirty();
565
578
  }
579
+ destroyEntitySubtree(entity) {
580
+ while (entity.children.length > 0) this.destroyEntitySubtree(entity.children.at(-1));
581
+ entity.destroy();
582
+ }
566
583
  /**
567
584
  * Tear down the Scene, halt the loop, and clean up event listeners and DOM elements.
568
585
  */
569
586
  destroy() {
587
+ if (this.destroyed) return;
570
588
  this.destroyed = true;
571
589
  this.stop();
590
+ while (this.root.children.length > 0) this.destroyEntitySubtree(this.root.children.at(-1));
591
+ while (this.overlayRoot.children.length > 0) {
592
+ this.destroyEntitySubtree(this.overlayRoot.children.at(-1));
593
+ }
572
594
  if (typeof window !== "undefined" && !this.disableWindowResize) {
573
595
  window.removeEventListener("resize", this.resizeHandler);
574
596
  }
@@ -584,6 +606,7 @@ var Scene = class _Scene {
584
606
  this.portalRoot?.remove();
585
607
  this.a11yElements.clear();
586
608
  this.pointRenderer?.destroy();
609
+ this.renderer.dispose?.();
587
610
  this.glCanvas?.remove();
588
611
  this.gpuCanvas?.remove();
589
612
  this.gpuCanvas = null;
@@ -603,9 +626,9 @@ var Scene = class _Scene {
603
626
  }
604
627
  if (typeof window !== "undefined" && this.canvas && typeof this.canvas.addEventListener === "function") {
605
628
  this.pointerMoveListener = (e) => {
606
- const rect = this.canvas.getBoundingClientRect();
607
- this.mouseX = e.clientX - rect.left;
608
- this.mouseY = e.clientY - rect.top;
629
+ const point = this.clientToScene(e.clientX, e.clientY);
630
+ this.mouseX = point.x;
631
+ this.mouseY = point.y;
609
632
  };
610
633
  this.pointerLeaveListener = () => {
611
634
  this.mouseX = -9999;
@@ -721,6 +744,7 @@ var Scene = class _Scene {
721
744
  el.id = node.id;
722
745
  el.setAttribute("data-vecto-id", node.id);
723
746
  el.style.position = "absolute";
747
+ el.style.transformOrigin = "0 0";
724
748
  el.style.pointerEvents = "auto";
725
749
  el.style.touchAction = "pinch-zoom";
726
750
  el.style.margin = "0";
@@ -785,6 +809,7 @@ var Scene = class _Scene {
785
809
  selectionEnd: input.selectionEnd ?? input.value.length,
786
810
  composition
787
811
  });
812
+ this.markDirty();
788
813
  };
789
814
  el.addEventListener("input", forward);
790
815
  el.addEventListener("change", forward);
@@ -868,7 +893,8 @@ var Scene = class _Scene {
868
893
  if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
869
894
  }
870
895
  if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
871
- if (el.getAttribute("href") !== attrs.href) el.setAttribute("href", attrs.href);
896
+ const safeHref = sanitizeUrl(attrs.href);
897
+ if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
872
898
  }
873
899
  if (el instanceof HTMLImageElement) {
874
900
  if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
@@ -929,12 +955,12 @@ var Scene = class _Scene {
929
955
  el.style.height = `${this.height}px`;
930
956
  el.style.transform = "";
931
957
  } else {
932
- const pos = node.getGlobalPosition();
933
- el.style.left = `${pos.x + node.a11yOffsetX}px`;
934
- el.style.top = `${pos.y + node.a11yOffsetY}px`;
935
- el.style.width = `${node.width * node.scaleX}px`;
936
- el.style.height = `${node.height * node.scaleY}px`;
937
- el.style.transform = `rotate(${node.rotation}rad)`;
958
+ const { a, b, c, d, e, f } = node.getWorldTransform();
959
+ el.style.left = `${e + node.a11yOffsetX}px`;
960
+ el.style.top = `${f + node.a11yOffsetY}px`;
961
+ el.style.width = `${node.width}px`;
962
+ el.style.height = `${node.height}px`;
963
+ el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
938
964
  }
939
965
  }
940
966
  for (const child of node.children) this.syncA11y(child);
@@ -996,6 +1022,35 @@ var Scene = class _Scene {
996
1022
  }
997
1023
  this.a11yNeedsReorder = false;
998
1024
  }
1025
+ /** Keep DOM/WebGL overlay layers aligned with the canvas's CSS box. */
1026
+ syncOverlayGeometry() {
1027
+ const parent = this.canvas.parentElement;
1028
+ if (!parent) return;
1029
+ const canvasRect = this.canvas.getBoundingClientRect?.();
1030
+ const parentRect = parent.getBoundingClientRect?.();
1031
+ const cssWidth = canvasRect?.width || this.canvas.clientWidth || this.width;
1032
+ const cssHeight = canvasRect?.height || this.canvas.clientHeight || this.height;
1033
+ const left = (canvasRect?.left ?? 0) - (parentRect?.left ?? 0) - (parent.clientLeft || 0) + parent.scrollLeft;
1034
+ const top = (canvasRect?.top ?? 0) - (parentRect?.top ?? 0) - (parent.clientTop || 0) + parent.scrollTop;
1035
+ const scaleX = this.width > 0 ? cssWidth / this.width : 1;
1036
+ const scaleY = this.height > 0 ? cssHeight / this.height : 1;
1037
+ for (const root of [this.a11yRoot, this.portalRoot]) {
1038
+ if (!root) continue;
1039
+ root.style.left = `${left}px`;
1040
+ root.style.top = `${top}px`;
1041
+ root.style.width = `${this.width}px`;
1042
+ root.style.height = `${this.height}px`;
1043
+ root.style.transformOrigin = "0 0";
1044
+ root.style.transform = `scale(${scaleX}, ${scaleY})`;
1045
+ }
1046
+ for (const canvas of [this.glCanvas, this.gpuCanvas]) {
1047
+ if (!canvas) continue;
1048
+ canvas.style.left = `${left}px`;
1049
+ canvas.style.top = `${top}px`;
1050
+ canvas.style.width = `${cssWidth}px`;
1051
+ canvas.style.height = `${cssHeight}px`;
1052
+ }
1053
+ }
999
1054
  getA11yTree() {
1000
1055
  const map = /* @__PURE__ */ new Map();
1001
1056
  const roots = [];
@@ -1039,7 +1094,7 @@ var Scene = class _Scene {
1039
1094
  traverse(this.root, null);
1040
1095
  return roots;
1041
1096
  }
1042
- renderPortalDOM(portal, te, tf, a, b, c, d) {
1097
+ renderPortalDOM(portal, te, tf, a, b, c, d, opacity) {
1043
1098
  if (!this.portalRoot) return;
1044
1099
  this.activePortalsThisFrame.add(portal.id);
1045
1100
  this.portalEntities.set(portal.id, portal);
@@ -1073,6 +1128,11 @@ var Scene = class _Scene {
1073
1128
  portal.domElement.style.zIndex = zIndexStr;
1074
1129
  portal.lastZIndex = zIndexStr;
1075
1130
  }
1131
+ const opacityStr = String(opacity);
1132
+ if (portal.lastOpacity !== opacityStr) {
1133
+ portal.domElement.style.opacity = opacityStr;
1134
+ portal.lastOpacity = opacityStr;
1135
+ }
1076
1136
  }
1077
1137
  reconcilePortals() {
1078
1138
  if (!this.portalRoot) return;
@@ -1143,14 +1203,18 @@ var Scene = class _Scene {
1143
1203
  * @param time - Current absolute time in milliseconds (default 0).
1144
1204
  */
1145
1205
  render(renderer, dt = 0, time = 0) {
1146
- if (this.a11yRoot && this.canvas.parentElement) {
1206
+ const isMainRenderer = renderer === this.renderer;
1207
+ if (isMainRenderer && this.a11yRoot && this.canvas.parentElement) {
1147
1208
  const parentStyle = this.canvas.parentElement.style;
1148
1209
  if (!parentStyle.position || parentStyle.position === "static") {
1149
1210
  parentStyle.position = "relative";
1150
1211
  }
1212
+ this.syncOverlayGeometry();
1213
+ }
1214
+ if (isMainRenderer) {
1215
+ this.renderOrderCounter = 0;
1216
+ this.activePortalsThisFrame.clear();
1151
1217
  }
1152
- this.renderOrderCounter = 0;
1153
- this.activePortalsThisFrame.clear();
1154
1218
  const computeEntities = [];
1155
1219
  const collectComputeEntities = (node) => {
1156
1220
  if (node instanceof ComputeParticleEntity) {
@@ -1165,7 +1229,8 @@ var Scene = class _Scene {
1165
1229
  collectComputeEntities(overlay);
1166
1230
  }
1167
1231
  if (computeEntities.length > 0) {
1168
- if (!this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
1232
+ const isMainRenderPath = renderer === this.renderer;
1233
+ if (isMainRenderPath && !this.device && !this.webgpuDisabled && !this.initializingWebGPU && !this.deviceLost) {
1169
1234
  this.initializingWebGPU = true;
1170
1235
  this.initWebGPUContext(computeEntities).then((newDevice) => {
1171
1236
  this.device = newDevice;
@@ -1188,12 +1253,16 @@ var Scene = class _Scene {
1188
1253
  }
1189
1254
  }
1190
1255
  }).catch((err) => {
1191
- console.error("Failed to initialize WebGPU:", err);
1256
+ if (this.particleBackend === "webgpu") {
1257
+ console.error("Failed to initialize WebGPU:", err);
1258
+ } else {
1259
+ console.warn("WebGPU unavailable; using CPU particle fallback.", err);
1260
+ }
1192
1261
  this.webgpuDisabled = true;
1193
1262
  this.initializingWebGPU = false;
1194
1263
  });
1195
1264
  }
1196
- if (this.device && this.manager && !this.deviceLost && !this.webgpuDisabled) {
1265
+ if (isMainRenderPath && this.device && this.manager && !this.deviceLost && !this.webgpuDisabled) {
1197
1266
  try {
1198
1267
  const commandEncoder = this.device.createCommandEncoder();
1199
1268
  const computePass = commandEncoder.beginComputePass();
@@ -1241,21 +1310,20 @@ var Scene = class _Scene {
1241
1310
  this.device = null;
1242
1311
  this.recreateWebGPUDeviceWithRetry(computeEntities);
1243
1312
  }
1244
- } else {
1313
+ } else if (isMainRenderPath) {
1245
1314
  for (const entity of computeEntities) {
1246
1315
  entity.updateCPU(dt / 1e3, this.mouseX, this.mouseY, this.width, this.height);
1247
1316
  }
1248
1317
  }
1249
1318
  }
1250
1319
  renderer.clear();
1251
- const isMainRenderer = renderer === this.renderer;
1252
1320
  if (isMainRenderer) {
1253
1321
  this.pointRenderer?.begin();
1254
1322
  }
1255
1323
  const vw = this.width;
1256
1324
  const vh = this.height;
1257
- const renderNode = (node, pa, pb, pc, pd, pe, pf) => {
1258
- node.update(dt, time);
1325
+ const renderNode = (node, pa, pb, pc, pd, pe, pf, parentOpacity) => {
1326
+ if (isMainRenderer) node.update(dt, time);
1259
1327
  const cos = Math.cos(node.rotation);
1260
1328
  const sin = Math.sin(node.rotation);
1261
1329
  const te = pa * node.x + pc * node.y + pe;
@@ -1264,16 +1332,24 @@ var Scene = class _Scene {
1264
1332
  const sxSin = node.scaleX * sin;
1265
1333
  const syCos = node.scaleY * cos;
1266
1334
  const sySin = node.scaleY * sin;
1267
- const a = pa * sxCos + pc * sxSin;
1268
- const b = pb * sxCos + pd * sxSin;
1269
- const c = pa * -sySin + pc * syCos;
1270
- const d = pb * -sySin + pd * syCos;
1271
- const a11yEl = this.a11yElements.get(node.id);
1335
+ const a = pa * sxCos + pc * sySin;
1336
+ const b = pb * sxCos + pd * sySin;
1337
+ const c = pa * -sxSin + pc * syCos;
1338
+ const d = pb * -sxSin + pd * syCos;
1339
+ const worldScaleX = Math.hypot(a, b);
1340
+ const worldScaleY = Math.hypot(c, d);
1341
+ const worldOpacity = parentOpacity * node.opacity;
1342
+ const scaleTolerance = Math.max(1, worldScaleX, worldScaleY) * 1e-6;
1343
+ const orthogonalTolerance = Math.max(1, worldScaleX * worldScaleY) * 1e-6;
1344
+ const isSimilarityTransform = Number.isFinite(worldScaleX) && Number.isFinite(worldScaleY) && Math.abs(worldScaleX - worldScaleY) <= scaleTolerance && Math.abs(a * c + b * d) <= orthogonalTolerance;
1345
+ const a11yEl = isMainRenderer ? this.a11yElements.get(node.id) : void 0;
1272
1346
  if (a11yEl) {
1273
1347
  a11yEl.style.zIndex = String(this.renderOrderCounter++);
1274
1348
  }
1275
1349
  if (node.isDOMPortal) {
1276
- this.renderPortalDOM(node, te, tf, a, b, c, d);
1350
+ if (isMainRenderer) {
1351
+ this.renderPortalDOM(node, te, tf, a, b, c, d, worldOpacity);
1352
+ }
1277
1353
  return;
1278
1354
  }
1279
1355
  let visible = true;
@@ -1299,33 +1375,27 @@ var Scene = class _Scene {
1299
1375
  if (node.children.length === 0 && node.scaleX === node.scaleY) {
1300
1376
  const bc = node.getBatchCircle();
1301
1377
  if (bc) {
1302
- if (visible) {
1303
- if (isMainRenderer && this.pointRenderer) {
1304
- this.pointRenderer.addCircle(
1305
- te,
1306
- tf,
1307
- bc.radius * Math.hypot(a, b),
1308
- bc.color,
1309
- node.opacity
1310
- );
1311
- } else {
1312
- renderer.fillCircle(node.x, node.y, bc.radius * node.scaleX, bc.color, node.opacity);
1378
+ if (!visible) return;
1379
+ if (isMainRenderer && this.pointRenderer) {
1380
+ if (isSimilarityTransform) {
1381
+ this.pointRenderer.addCircle(te, tf, bc.radius * worldScaleX, bc.color, worldOpacity);
1382
+ return;
1313
1383
  }
1384
+ } else {
1385
+ renderer.fillCircle(node.x, node.y, bc.radius * node.scaleX, bc.color, worldOpacity);
1386
+ return;
1314
1387
  }
1315
- return;
1316
- }
1317
- if (isMainRenderer && this.pointRenderer) {
1388
+ } else if (isMainRenderer && this.pointRenderer) {
1318
1389
  const br = node.getBatchRect();
1319
- if (br) {
1390
+ if (br && isSimilarityTransform && a * d - b * c >= 0) {
1320
1391
  if (visible) {
1321
- const ws = Math.hypot(a, b);
1322
1392
  this.pointRenderer.addRect(
1323
1393
  te,
1324
1394
  tf,
1325
- br.width * ws,
1326
- br.height * ws,
1395
+ br.width * worldScaleX,
1396
+ br.height * worldScaleX,
1327
1397
  br.color,
1328
- node.opacity,
1398
+ worldOpacity,
1329
1399
  Math.atan2(b, a)
1330
1400
  );
1331
1401
  }
@@ -1338,11 +1408,11 @@ var Scene = class _Scene {
1338
1408
  renderer.translate(node.x, node.y);
1339
1409
  renderer.scale(node.scaleX, node.scaleY);
1340
1410
  renderer.rotate(node.rotation);
1341
- renderer.setGlobalAlpha(node.opacity);
1411
+ renderer.setGlobalAlpha(worldOpacity);
1342
1412
  if (visible) {
1343
1413
  if (node instanceof ComputeParticleEntity) {
1344
1414
  if (this.deviceLost || this.webgpuDisabled || !this.device || !this.manager) {
1345
- this.renderCPUParticles(renderer, node);
1415
+ this.renderCPUParticles(renderer, node, worldOpacity);
1346
1416
  }
1347
1417
  } else {
1348
1418
  node.render(renderer);
@@ -1352,16 +1422,16 @@ var Scene = class _Scene {
1352
1422
  renderer.clip(0, 0, node.width, node.height);
1353
1423
  }
1354
1424
  for (const child of node.children) {
1355
- renderNode(child, a, b, c, d, te, tf);
1425
+ renderNode(child, a, b, c, d, te, tf, worldOpacity);
1356
1426
  }
1357
1427
  renderer.flush();
1358
1428
  renderer.restore();
1359
1429
  };
1360
- renderNode(this.root, 1, 0, 0, 1, 0, 0);
1430
+ renderNode(this.root, 1, 0, 0, 1, 0, 0, 1);
1361
1431
  for (const overlay of this.overlayRoot.children) {
1362
- renderNode(overlay, 1, 0, 0, 1, 0, 0);
1432
+ renderNode(overlay, 1, 0, 0, 1, 0, 0, 1);
1363
1433
  }
1364
- this.reconcilePortals();
1434
+ if (isMainRenderer) this.reconcilePortals();
1365
1435
  renderer.flush();
1366
1436
  if (isMainRenderer) {
1367
1437
  this.pointRenderer?.flush();
@@ -1491,13 +1561,15 @@ var Scene = class _Scene {
1491
1561
  this.manager.initPipelines(format);
1492
1562
  for (const entity of entities) {
1493
1563
  this.manager.setupEntityResources(entity);
1494
- newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
1564
+ if (entity.gpuStorageBuffer) {
1565
+ newDevice.queue.writeBuffer(entity.gpuStorageBuffer, 0, entity.particleData);
1566
+ }
1495
1567
  }
1496
1568
  }
1497
1569
  }).catch(() => this.recreateWebGPUDeviceWithRetry(entities, attempt + 1));
1498
1570
  }, backoff);
1499
1571
  }
1500
- renderCPUParticles(renderer, entity) {
1572
+ renderCPUParticles(renderer, entity, worldOpacity) {
1501
1573
  const data = entity.particleData;
1502
1574
  const size = entity.maxParticles;
1503
1575
  const isMain = renderer === this.renderer;
@@ -1508,7 +1580,7 @@ var Scene = class _Scene {
1508
1580
  const pSize = data[idx + 6];
1509
1581
  const life = data[idx + 7];
1510
1582
  if (life === 0) continue;
1511
- const opacity = life < 0 ? entity.opacity : entity.opacity * Math.min(1, life);
1583
+ const opacity = life < 0 ? worldOpacity : worldOpacity * Math.min(1, life);
1512
1584
  const scale = life >= 0 ? Math.min(1, life) : 1;
1513
1585
  if (isMain && this.pointRenderer) {
1514
1586
  this.pointRenderer.addCircle(x, y, pSize * scale, entity.baseColor, opacity);
@@ -1592,10 +1664,9 @@ var TextEntity = class extends Entity {
1592
1664
  this.a11yOffsetY = 0;
1593
1665
  }
1594
1666
  isPointInside(globalX, globalY) {
1595
- const pos = this.getGlobalPosition();
1596
- const lx = globalX - pos.x;
1597
- const ly = globalY - pos.y;
1598
- return lx >= 0 && lx <= this.width && ly >= 0 && ly <= this.height;
1667
+ const local = this.worldToLocal(globalX, globalY);
1668
+ if (!local) return false;
1669
+ return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
1599
1670
  }
1600
1671
  render(renderer) {
1601
1672
  const currentFill = this.isHovered ? this.hoveredFillStyle : this.fillStyle;
@@ -1810,10 +1881,9 @@ var SplineEntity = class extends Entity {
1810
1881
  * this method already calls it as a refinement when it is overridden.
1811
1882
  */
1812
1883
  isPointInside(globalX, globalY) {
1813
- const pos = this.getGlobalPosition();
1814
- const scale = this.getWorldScale();
1815
- const lx = (globalX - pos.x) / (scale.x || 1);
1816
- const ly = (globalY - pos.y) / (scale.y || 1);
1884
+ const local = this.worldToLocal(globalX, globalY);
1885
+ if (!local) return false;
1886
+ const { x: lx, y: ly } = local;
1817
1887
  const inAabb = lx >= this.bounds.x && lx <= this.bounds.x + this.bounds.width && ly >= this.bounds.y && ly <= this.bounds.y + this.bounds.height;
1818
1888
  if (!inAabb) return false;
1819
1889
  const refined = this.hitTestCurve(lx, ly);
@@ -2097,6 +2167,7 @@ var DOMPortalEntity = class extends Entity {
2097
2167
  lastHeight = "";
2098
2168
  lastTransform = "";
2099
2169
  lastZIndex = "";
2170
+ lastOpacity = "";
2100
2171
  constructor(domElement, width, height, id) {
2101
2172
  super(id);
2102
2173
  this.domElement = domElement;
@@ -2147,22 +2218,15 @@ var DOMPortalEntity = class extends Entity {
2147
2218
  }
2148
2219
  }
2149
2220
  isPointInside(globalX, globalY) {
2150
- const pos = this.getGlobalPosition();
2151
- const scale = this.getWorldScale();
2152
- const rot = this.getWorldRotation();
2153
- const dx = globalX - pos.x;
2154
- const dy = globalY - pos.y;
2155
- const cos = Math.cos(-rot);
2156
- const sin = Math.sin(-rot);
2157
- const lx = (dx * cos - dy * sin) / scale.x;
2158
- const ly = (dx * sin + dy * cos) / scale.y;
2159
2221
  const w = this.width > 0 ? this.width : this.cachedWidth;
2160
2222
  const h = this.height > 0 ? this.height : this.cachedHeight;
2161
- return lx >= 0 && lx <= w && ly >= 0 && ly <= h;
2223
+ const local = this.worldToLocal(globalX, globalY);
2224
+ if (!local) return false;
2225
+ return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
2162
2226
  }
2163
- add(child) {
2227
+ add(_child) {
2164
2228
  console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
2165
- return super.add(child);
2229
+ return this;
2166
2230
  }
2167
2231
  render() {
2168
2232
  }
@@ -2225,8 +2289,10 @@ export {
2225
2289
  computeLineSegments,
2226
2290
  createCanvasMeasurer,
2227
2291
  createWebGLPointRenderer,
2292
+ isSafeUrl,
2228
2293
  isTweenConfig,
2229
2294
  loadSpline,
2230
2295
  parseColorToRGBA,
2231
- polySegmentToBezier
2296
+ polySegmentToBezier,
2297
+ sanitizeUrl
2232
2298
  };
@@ -7,6 +7,10 @@ export declare class LayoutWorkerManager {
7
7
  private seqIdCounter;
8
8
  private debounceTimers;
9
9
  private constructor();
10
+ private createWorker;
11
+ private ensureWorker;
12
+ private handleWorkerFailure;
13
+ destroy(): void;
10
14
  static getInstance(): LayoutWorkerManager;
11
15
  queueLayout(entityId: string, text: string, options: {
12
16
  fontId: string;
@@ -1 +1 @@
1
- export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var b=new Map;self.onmessage=x=>{let{id:S,seqId:k,text:A,fontId:i,fontData:c,maxWidth:d,maxHeight:H,fontSize:o,lineHeight:F,letterSpacing:C}=x.data;c&&b.set(i,c);let n=b.get(i);if(!n)return;let f=[],u=[],y=[],l=[],e=0,r=0,h=n.metrics?.ascender??.8,D=n.metrics?.descender??-.2,m=F??o*(h-D),p=Array.from(A);for(let s=0;s<p.length;s++){let a=p[s].codePointAt(0),g=(n.glyphs?.find(w=>w.unicode===a)?.advance??1)*o;e+g>d&&a===32&&(e=0,r++),f.push(a),u.push(e);let M=r*m+h*o;y.push(M),l.push(-256),e+=g+(C??0)}let t={id:S,seqId:k,width:Math.min(e,d),height:(r+1)*m,codePoints:new Uint32Array(f),xCoords:new Float32Array(u),yCoords:new Float32Array(y),packedStyles:new Uint32Array(l)};self.postMessage(t,[t.codePoints.buffer,t.xCoords.buffer,t.yCoords.buffer,t.packedStyles.buffer])};})();\n";
1
+ export declare const WORKER_SOURCE_STRING = "\"use strict\";(()=>{var k=new Map;function n(t){return typeof t==\"number\"&&Number.isFinite(t)}function H(t){return t.origin?t.origin===self.location.origin:!0}function M(t){if(!t||typeof t!=\"object\")return!1;let e=t;return typeof e.id==\"string\"&&n(e.seqId)&&typeof e.text==\"string\"&&typeof e.fontId==\"string\"&&(e.fontData===void 0||typeof e.fontData==\"object\")&&n(e.maxWidth)&&n(e.maxHeight)&&n(e.fontSize)&&(e.lineHeight===void 0||n(e.lineHeight))&&(e.letterSpacing===void 0||n(e.letterSpacing))}self.onmessage=t=>{if(!H(t)||!M(t.data))return;let{id:e,seqId:F,text:q,fontId:d,fontData:f,maxWidth:y,maxHeight:I,fontSize:i,lineHeight:A,letterSpacing:D}=t.data;f&&k.set(d,f);let s=k.get(d);if(!s)return;let g=[],l=[],p=[],m=[],o=0,a=0,h=s.metrics?.ascender??.8,W=s.metrics?.descender??-.2,b=A??i*(h-W),x=Array.from(q);for(let c=0;c<x.length;c++){let u=x[c].codePointAt(0),S=(s.glyphs?.find(C=>C.unicode===u)?.advance??1)*i;o+S>y&&u===32&&(o=0,a++),g.push(u),l.push(o);let w=a*b+h*i;p.push(w),m.push(-256),o+=S+(D??0)}let r={id:e,seqId:F,width:Math.min(o,y),height:(a+1)*b,codePoints:new Uint32Array(g),xCoords:new Float32Array(l),yCoords:new Float32Array(p),packedStyles:new Uint32Array(m)};self.postMessage(r,[r.codePoints.buffer,r.xCoords.buffer,r.yCoords.buffer,r.packedStyles.buffer])};})();\n";
package/dist/layout.js CHANGED
@@ -3,14 +3,14 @@
3
3
 
4
4
 
5
5
 
6
- var _chunk72WVPMSJjs = require('./chunk-72WVPMSJ.js');
6
+ var _chunkIKLYTHALjs = require('./chunk-IKLYTHAL.js');
7
7
 
8
8
 
9
- var _chunkRW6NC4RBjs = require('./chunk-RW6NC4RB.js');
9
+ var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
10
10
 
11
11
 
12
12
 
13
13
 
14
14
 
15
15
 
16
- exports.LayoutEngine = _chunk72WVPMSJjs.LayoutEngine; exports.LayoutResultBuffer = _chunk72WVPMSJjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunkRW6NC4RBjs.LayoutWorkerManager; exports.computeLineSegments = _chunk72WVPMSJjs.computeLineSegments; exports.createCanvasMeasurer = _chunk72WVPMSJjs.createCanvasMeasurer;
16
+ exports.LayoutEngine = _chunkIKLYTHALjs.LayoutEngine; exports.LayoutResultBuffer = _chunkIKLYTHALjs.LayoutResultBuffer; exports.LayoutWorkerManager = _chunk76NMTLYLjs.LayoutWorkerManager; exports.computeLineSegments = _chunkIKLYTHALjs.computeLineSegments; exports.createCanvasMeasurer = _chunkIKLYTHALjs.createCanvasMeasurer;
package/dist/layout.mjs CHANGED
@@ -3,10 +3,10 @@ import {
3
3
  LayoutResultBuffer,
4
4
  computeLineSegments,
5
5
  createCanvasMeasurer
6
- } from "./chunk-T456DL4P.mjs";
6
+ } from "./chunk-MCULB5VC.mjs";
7
7
  import {
8
8
  LayoutWorkerManager
9
- } from "./chunk-YA2J5ZH7.mjs";
9
+ } from "./chunk-B3Z3JEJH.mjs";
10
10
  export {
11
11
  LayoutEngine,
12
12
  LayoutResultBuffer,
@@ -78,4 +78,10 @@ export declare class CanvasRenderer implements IRenderer {
78
78
  stop: number;
79
79
  color: string;
80
80
  }[]): any;
81
+ /**
82
+ * Canvas2D drawing contexts are automatically released when their
83
+ * `<canvas>` element is GC'd, so there's no explicit GPU handle to free.
84
+ * This method clears our internal batch state and is idempotent.
85
+ */
86
+ dispose(): void;
81
87
  }
@@ -175,4 +175,13 @@ export interface IRenderer {
175
175
  stop: number;
176
176
  color: string;
177
177
  }[]): any;
178
+ /**
179
+ * Release any backend-owned GPU textures / GL contexts / caches.
180
+ *
181
+ * Called by {@link Scene.destroy()} so renderers that hold scarce resources
182
+ * (e.g. a WebGL2 context — browsers cap concurrent contexts to ~16) clean up
183
+ * before GC. Implementations MUST be idempotent: a second call after a
184
+ * successful teardown must be a silent no-op, not throw.
185
+ */
186
+ dispose?(): void;
178
187
  }
@@ -57,6 +57,14 @@ export declare class SVGRenderer implements IRenderer {
57
57
  fillText(text: string, x: number, y: number, font: string, color: string | SVGLinearGradient): void;
58
58
  fillCircle(cx: number, cy: number, radius: number, color: string, alpha?: number): void;
59
59
  drawImage(source: any, dx: number, dy: number, dw: number, dh: number): void;
60
+ /**
61
+ * Embed SVG markup as an isolated nested image.
62
+ *
63
+ * This explicit path is used by `SVGEntity` during vector export. General
64
+ * `drawImage()` input remains subject to the URL policy and therefore still
65
+ * rejects caller-provided SVG data URLs.
66
+ */
67
+ drawSVG(source: string, dx: number, dy: number, dw: number, dh: number): void;
60
68
  flush(): void;
61
69
  createLinearGradient(x0: number, y0: number, x1: number, y1: number, colorStops: {
62
70
  stop: number;
@@ -66,4 +74,10 @@ export declare class SVGRenderer implements IRenderer {
66
74
  toXMLString(): string;
67
75
  private resolveGradient;
68
76
  private escapeXML;
77
+ private isSafeRasterDataUrl;
78
+ /**
79
+ * SVGRenderer accumulates strings in memory; nothing external is allocated.
80
+ * Drop the buffers for GC and become idempotent.
81
+ */
82
+ dispose(): void;
69
83
  }
@@ -0,0 +1,31 @@
1
+ /**
2
+ * URL sanitization helpers used by accessibility sinks (shadow `<a>` elements,
3
+ * `window.open`, Markdown link renders, …) to prevent `javascript:` / `data:`
4
+ * URI-script injection.
5
+ *
6
+ * The goal is conservative: allow safe browsing/navigation schemes, rewrite
7
+ * everything else to a benign `#` placeholder so click handlers resolve without
8
+ * executing payload or compromising the host DOM.
9
+ */
10
+ /**
11
+ * Sanitize a potentially untrusted `href` / URL string for projection onto
12
+ * an `<a>` element or a `window.open` call.
13
+ *
14
+ * Behaviour:
15
+ * 1. Returns `''` for `null`/`undefined`/non-string input.
16
+ * 2. Trims leading whitespace (browsers do this before scheme resolution).
17
+ * 3. If the URL is relative (no scheme, or starts with `#`, `?`, `/`, `./`),
18
+ * returns it verbatim — relative navigation is never script-injectable.
19
+ * 4. If the URL parses with a scheme NOT in {@link SAFE_SCHEMES}, returns `'#'`
20
+ * to keep the link non-empty but inert.
21
+ * 5. Otherwise returns the canonical `URL.toString()` form.
22
+ *
23
+ * The function never throws; malformed input falls back to `'#'`.
24
+ */
25
+ export declare function sanitizeUrl(href: string | null | undefined): string;
26
+ /**
27
+ * Narrower guard used by link renderers that already know they hold an
28
+ * absolute URL: returns `true` if `urlStr` uses a scheme in
29
+ * {@link SAFE_SCHEMES}, `false` otherwise. Relative URLs are considered safe.
30
+ */
31
+ export declare function isSafeUrl(urlStr: string): boolean;
package/dist/renderer.js CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
 
6
6
 
7
- var _chunkLIX7DJTIjs = require('./chunk-LIX7DJTI.js');
7
+ var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
8
8
 
9
9
 
10
10
 
11
11
 
12
12
 
13
13
 
14
- exports.CanvasRenderer = _chunkLIX7DJTIjs.CanvasRenderer; exports.SVGRenderer = _chunkLIX7DJTIjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkLIX7DJTIjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkLIX7DJTIjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkLIX7DJTIjs.parseColorToRGBA;
14
+ exports.CanvasRenderer = _chunkTPNADFNNjs.CanvasRenderer; exports.SVGRenderer = _chunkTPNADFNNjs.SVGRenderer; exports.WebGPUParticleSystemManager = _chunkTPNADFNNjs.WebGPUParticleSystemManager; exports.createWebGLPointRenderer = _chunkTPNADFNNjs.createWebGLPointRenderer; exports.parseColorToRGBA = _chunkTPNADFNNjs.parseColorToRGBA;
package/dist/renderer.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  WebGPUParticleSystemManager,
5
5
  createWebGLPointRenderer,
6
6
  parseColorToRGBA
7
- } from "./chunk-2Y45S4JK.mjs";
7
+ } from "./chunk-WEQRBXT2.mjs";
8
8
  export {
9
9
  CanvasRenderer,
10
10
  SVGRenderer,
package/dist/text.js CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkLA3FJLP2js = require('./chunk-LA3FJLP2.js');
5
+ var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
6
6
 
7
7
 
8
8
 
9
- var _chunkRW6NC4RBjs = require('./chunk-RW6NC4RB.js');
9
+ var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
10
10
 
11
11
 
12
12
 
13
13
 
14
14
 
15
15
 
16
- exports.ArabicShaper = _chunkRW6NC4RBjs.ArabicShaper; exports.BidiResolver = _chunkRW6NC4RBjs.BidiResolver; exports.MSDFFont = _chunkLA3FJLP2js.MSDFFont; exports.MSDFTextEntity = _chunkLA3FJLP2js.MSDFTextEntity; exports.SVGEntity = _chunkLA3FJLP2js.SVGEntity;
16
+ exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.MSDFTextEntity; exports.SVGEntity = _chunkTQ4H357Qjs.SVGEntity;