@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/README.md +110 -34
- package/dist/{chunk-RW6NC4RB.js → chunk-76NMTLYL.js} +56 -14
- package/dist/{chunk-YA2J5ZH7.mjs → chunk-B3Z3JEJH.mjs} +50 -8
- package/dist/{chunk-72WVPMSJ.js → chunk-IKLYTHAL.js} +8 -8
- package/dist/{chunk-T456DL4P.mjs → chunk-MCULB5VC.mjs} +1 -1
- package/dist/{chunk-H3QIE77O.mjs → chunk-P6MDWIEX.mjs} +216 -61
- package/dist/{chunk-LIX7DJTI.js → chunk-TPNADFNN.js} +143 -15
- package/dist/{chunk-LA3FJLP2.js → chunk-TQ4H357Q.js} +226 -71
- package/dist/{chunk-2Y45S4JK.mjs → chunk-WEQRBXT2.mjs} +142 -14
- package/dist/index.d.ts +1 -0
- package/dist/index.js +185 -119
- package/dist/index.mjs +147 -81
- package/dist/layout/LayoutWorkerManager.d.ts +4 -0
- package/dist/layout/LayoutWorkerSource.d.ts +1 -1
- package/dist/layout.js +3 -3
- package/dist/layout.mjs +2 -2
- package/dist/renderer/CanvasRenderer.d.ts +6 -0
- package/dist/renderer/IRenderer.d.ts +9 -0
- package/dist/renderer/SVGRenderer.d.ts +14 -0
- package/dist/renderer/url.d.ts +31 -0
- package/dist/renderer.js +2 -2
- package/dist/renderer.mjs +1 -1
- package/dist/text.js +3 -3
- package/dist/text.mjs +2 -2
- package/dist/tree/DOMPortalEntity.d.ts +2 -1
- package/dist/tree/Entity.d.ts +48 -7
- package/dist/tree/Scene.d.ts +9 -1
- package/package.json +2 -4
package/dist/index.mjs
CHANGED
|
@@ -3,14 +3,16 @@ import {
|
|
|
3
3
|
LayoutResultBuffer,
|
|
4
4
|
computeLineSegments,
|
|
5
5
|
createCanvasMeasurer
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-MCULB5VC.mjs";
|
|
7
7
|
import {
|
|
8
8
|
CanvasRenderer,
|
|
9
9
|
SVGRenderer,
|
|
10
10
|
WebGPUParticleSystemManager,
|
|
11
11
|
createWebGLPointRenderer,
|
|
12
|
-
|
|
13
|
-
|
|
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-
|
|
27
|
+
} from "./chunk-P6MDWIEX.mjs";
|
|
26
28
|
import {
|
|
27
29
|
ArabicShaper,
|
|
28
30
|
BidiResolver,
|
|
29
31
|
LayoutWorkerManager
|
|
30
|
-
} from "./chunk-
|
|
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
|
|
607
|
-
this.mouseX =
|
|
608
|
-
this.mouseY =
|
|
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
|
-
|
|
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
|
|
933
|
-
el.style.left = `${
|
|
934
|
-
el.style.top = `${
|
|
935
|
-
el.style.width = `${node.width
|
|
936
|
-
el.style.height = `${node.height
|
|
937
|
-
el.style.transform = `
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 *
|
|
1268
|
-
const b = pb * sxCos + pd *
|
|
1269
|
-
const c = pa * -
|
|
1270
|
-
const d = pb * -
|
|
1271
|
-
const
|
|
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
|
-
|
|
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
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
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
|
-
|
|
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 *
|
|
1326
|
-
br.height *
|
|
1395
|
+
br.width * worldScaleX,
|
|
1396
|
+
br.height * worldScaleX,
|
|
1327
1397
|
br.color,
|
|
1328
|
-
|
|
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(
|
|
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
|
-
|
|
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 ?
|
|
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
|
|
1596
|
-
|
|
1597
|
-
|
|
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
|
|
1814
|
-
|
|
1815
|
-
const
|
|
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
|
-
|
|
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(
|
|
2227
|
+
add(_child) {
|
|
2164
2228
|
console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
|
|
2165
|
-
return
|
|
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
|
|
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
|
|
6
|
+
var _chunkIKLYTHALjs = require('./chunk-IKLYTHAL.js');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
exports.LayoutEngine =
|
|
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-
|
|
6
|
+
} from "./chunk-MCULB5VC.mjs";
|
|
7
7
|
import {
|
|
8
8
|
LayoutWorkerManager
|
|
9
|
-
} from "./chunk-
|
|
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
|
|
7
|
+
var _chunkTPNADFNNjs = require('./chunk-TPNADFNN.js');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.CanvasRenderer =
|
|
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
package/dist/text.js
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkTQ4H357Qjs = require('./chunk-TQ4H357Q.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
exports.ArabicShaper =
|
|
16
|
+
exports.ArabicShaper = _chunk76NMTLYLjs.ArabicShaper; exports.BidiResolver = _chunk76NMTLYLjs.BidiResolver; exports.MSDFFont = _chunkTQ4H357Qjs.MSDFFont; exports.MSDFTextEntity = _chunkTQ4H357Qjs.MSDFTextEntity; exports.SVGEntity = _chunkTQ4H357Qjs.SVGEntity;
|