@inditextech/weave-sdk 0.56.2 → 0.57.0
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/sdk.cjs +150 -169
- package/dist/sdk.d.cts +8 -13
- package/dist/sdk.d.cts.map +1 -1
- package/dist/sdk.d.ts +8 -13
- package/dist/sdk.d.ts.map +1 -1
- package/dist/sdk.js +162 -182
- package/dist/sdk.js.map +1 -1
- package/package.json +2 -2
package/dist/sdk.js
CHANGED
|
@@ -15494,7 +15494,6 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
|
|
|
15494
15494
|
} else root$8._ = _;
|
|
15495
15495
|
}).call(exports);
|
|
15496
15496
|
} });
|
|
15497
|
-
var import_lodash$1 = __toESM(require_lodash());
|
|
15498
15497
|
var import_lodash = __toESM(require_lodash(), 1);
|
|
15499
15498
|
|
|
15500
15499
|
//#endregion
|
|
@@ -15589,12 +15588,12 @@ var WeaveStore = class {
|
|
|
15589
15588
|
node: JSON.parse(JSON.stringify(nodeInfo.node))
|
|
15590
15589
|
});
|
|
15591
15590
|
}
|
|
15592
|
-
if (!this.isRoomLoaded && !(0, import_lodash
|
|
15591
|
+
if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
|
|
15593
15592
|
this.instance.setupRenderer();
|
|
15594
15593
|
this.isRoomLoaded = true;
|
|
15595
15594
|
this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
|
|
15596
15595
|
}
|
|
15597
|
-
if (this.isRoomLoaded && !(0, import_lodash
|
|
15596
|
+
if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
|
|
15598
15597
|
});
|
|
15599
15598
|
}
|
|
15600
15599
|
canUndoStateStep() {
|
|
@@ -17919,7 +17918,7 @@ var require_merge = __commonJS({ "../../node_modules/lodash/merge.js"(exports, m
|
|
|
17919
17918
|
});
|
|
17920
17919
|
module.exports = merge;
|
|
17921
17920
|
} });
|
|
17922
|
-
var import_merge = __toESM(require_merge());
|
|
17921
|
+
var import_merge = __toESM(require_merge(), 1);
|
|
17923
17922
|
|
|
17924
17923
|
//#endregion
|
|
17925
17924
|
//#region src/plugins/plugin.ts
|
|
@@ -18792,7 +18791,7 @@ var require_throttle = __commonJS({ "../../node_modules/lodash/throttle.js"(expo
|
|
|
18792
18791
|
}
|
|
18793
18792
|
module.exports = throttle;
|
|
18794
18793
|
} });
|
|
18795
|
-
var import_throttle = __toESM(require_throttle());
|
|
18794
|
+
var import_throttle = __toESM(require_throttle(), 1);
|
|
18796
18795
|
|
|
18797
18796
|
//#endregion
|
|
18798
18797
|
//#region src/nodes/stage/constants.ts
|
|
@@ -20163,7 +20162,7 @@ var WeaveNode = class {
|
|
|
20163
20162
|
if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
|
|
20164
20163
|
if (nodesEdgeSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesEdgeSnappingPlugin.evaluateGuidelines(e);
|
|
20165
20164
|
};
|
|
20166
|
-
node.on("transform", (0, import_lodash
|
|
20165
|
+
node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
|
|
20167
20166
|
node.on("transformend", (e) => {
|
|
20168
20167
|
const node$1 = e.target;
|
|
20169
20168
|
this.instance.emitEvent("onTransform", null);
|
|
@@ -20217,7 +20216,7 @@ var WeaveNode = class {
|
|
|
20217
20216
|
if (layerToMove && !hasFrames(node) && node.isDragging()) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
|
|
20218
20217
|
}
|
|
20219
20218
|
};
|
|
20220
|
-
node.on("dragmove", (0, import_lodash
|
|
20219
|
+
node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
|
|
20221
20220
|
node.on("dragend", (e) => {
|
|
20222
20221
|
if (!this.didMove) return;
|
|
20223
20222
|
const isErasing = this.instance.getActiveAction() === "eraseTool";
|
|
@@ -21931,7 +21930,7 @@ var WeaveRegisterManager = class {
|
|
|
21931
21930
|
|
|
21932
21931
|
//#endregion
|
|
21933
21932
|
//#region package.json
|
|
21934
|
-
var version = "0.
|
|
21933
|
+
var version = "0.57.0";
|
|
21935
21934
|
|
|
21936
21935
|
//#endregion
|
|
21937
21936
|
//#region src/managers/setup.ts
|
|
@@ -23191,7 +23190,7 @@ var WeaveTextNode = class extends WeaveNode {
|
|
|
23191
23190
|
text.on("transformstart", (e) => {
|
|
23192
23191
|
this.instance.emitEvent("onTransform", e.target);
|
|
23193
23192
|
});
|
|
23194
|
-
text.on("transform", (0, import_lodash
|
|
23193
|
+
text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
|
|
23195
23194
|
text.on("transformend", () => {
|
|
23196
23195
|
this.instance.emitEvent("onTransform", null);
|
|
23197
23196
|
});
|
|
@@ -24500,7 +24499,7 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
24500
24499
|
const stage = this.instance.getStage();
|
|
24501
24500
|
const image = stage.findOne(`#${imageAttrs.id}`);
|
|
24502
24501
|
const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
|
|
24503
|
-
if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash
|
|
24502
|
+
if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
|
|
24504
24503
|
const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
|
|
24505
24504
|
internalImage.width(imageAttrs.uncroppedImage.width);
|
|
24506
24505
|
internalImage.height(imageAttrs.uncroppedImage.height);
|
|
@@ -24517,7 +24516,7 @@ var WeaveImageNode = class extends WeaveNode {
|
|
|
24517
24516
|
internalImage.height(imageAttrs.cropSize.height);
|
|
24518
24517
|
this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
|
|
24519
24518
|
}
|
|
24520
|
-
if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash
|
|
24519
|
+
if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
|
|
24521
24520
|
internalImage.width(imageAttrs.uncroppedImage.width);
|
|
24522
24521
|
internalImage.height(imageAttrs.uncroppedImage.height);
|
|
24523
24522
|
internalImage.rotation(0);
|
|
@@ -25095,9 +25094,9 @@ var WeaveFrameNode = class extends WeaveNode {
|
|
|
25095
25094
|
//#region src/nodes/stroke/constants.ts
|
|
25096
25095
|
const WEAVE_STROKE_NODE_TYPE = "stroke";
|
|
25097
25096
|
const WEAVE_STROKE_NODE_DEFAULT_CONFIG = {
|
|
25098
|
-
|
|
25097
|
+
splineResolution: 8,
|
|
25099
25098
|
resamplingSpacing: 2,
|
|
25100
|
-
|
|
25099
|
+
cachePixelRatio: 4
|
|
25101
25100
|
};
|
|
25102
25101
|
|
|
25103
25102
|
//#endregion
|
|
@@ -25109,143 +25108,147 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25109
25108
|
const { config } = params ?? {};
|
|
25110
25109
|
this.config = (0, import_merge.default)(WEAVE_STROKE_NODE_DEFAULT_CONFIG, config);
|
|
25111
25110
|
}
|
|
25112
|
-
resamplePoints(pts,
|
|
25111
|
+
resamplePoints(pts, minDist = 2) {
|
|
25113
25112
|
if (pts.length < 2) return pts;
|
|
25114
|
-
const
|
|
25113
|
+
const result = [pts[0]];
|
|
25114
|
+
let last = pts[0];
|
|
25115
25115
|
for (let i = 1; i < pts.length; i++) {
|
|
25116
|
-
|
|
25117
|
-
const
|
|
25118
|
-
|
|
25119
|
-
|
|
25120
|
-
|
|
25121
|
-
|
|
25122
|
-
const t = spacing / segDist;
|
|
25123
|
-
const newPt = this.lerpPoint(last, current, t);
|
|
25124
|
-
resampled.push(newPt);
|
|
25125
|
-
last = newPt;
|
|
25126
|
-
remaining = this.dist(last, current);
|
|
25127
|
-
}
|
|
25128
|
-
}
|
|
25129
|
-
return resampled;
|
|
25130
|
-
}
|
|
25131
|
-
dist(a, b) {
|
|
25132
|
-
const dx = b.x - a.x, dy = b.y - a.y;
|
|
25133
|
-
return Math.hypot(dx, dy);
|
|
25134
|
-
}
|
|
25135
|
-
lerpPoint(a, b, t) {
|
|
25136
|
-
return {
|
|
25137
|
-
x: a.x + (b.x - a.x) * t,
|
|
25138
|
-
y: a.y + (b.y - a.y) * t,
|
|
25139
|
-
pressure: a.pressure + (b.pressure - a.pressure) * t
|
|
25140
|
-
};
|
|
25141
|
-
}
|
|
25142
|
-
buildPolygonFromPressure(pts, baseWidth) {
|
|
25143
|
-
if (pts.length < 2) return [];
|
|
25144
|
-
const left = [];
|
|
25145
|
-
const right = [];
|
|
25146
|
-
for (let i = 0; i < pts.length; i++) {
|
|
25147
|
-
const p = pts[i];
|
|
25148
|
-
const w = (baseWidth + p.pressure * this.config.pressureScale) / 2;
|
|
25149
|
-
let dx, dy;
|
|
25150
|
-
if (i === 0) {
|
|
25151
|
-
dx = pts[1].x - p.x;
|
|
25152
|
-
dy = pts[1].y - p.y;
|
|
25153
|
-
} else if (i === pts.length - 1) {
|
|
25154
|
-
dx = p.x - pts[i - 1].x;
|
|
25155
|
-
dy = p.y - pts[i - 1].y;
|
|
25156
|
-
} else {
|
|
25157
|
-
dx = pts[i + 1].x - pts[i - 1].x;
|
|
25158
|
-
dy = pts[i + 1].y - pts[i - 1].y;
|
|
25159
|
-
}
|
|
25160
|
-
const len = Math.hypot(dx, dy) || 1;
|
|
25161
|
-
const nx = -dy / len;
|
|
25162
|
-
const ny = dx / len;
|
|
25163
|
-
left.push({
|
|
25164
|
-
x: p.x + nx * w,
|
|
25165
|
-
y: p.y + ny * w
|
|
25166
|
-
});
|
|
25167
|
-
right.push({
|
|
25168
|
-
x: p.x - nx * w,
|
|
25169
|
-
y: p.y - ny * w
|
|
25170
|
-
});
|
|
25116
|
+
const dx = pts[i].x - last.x;
|
|
25117
|
+
const dy = pts[i].y - last.y;
|
|
25118
|
+
if (dx * dx + dy * dy >= minDist * minDist) {
|
|
25119
|
+
result.push(pts[i]);
|
|
25120
|
+
last = pts[i];
|
|
25121
|
+
}
|
|
25171
25122
|
}
|
|
25172
|
-
|
|
25173
|
-
return left.concat(reversed);
|
|
25123
|
+
return result;
|
|
25174
25124
|
}
|
|
25175
|
-
|
|
25176
|
-
const
|
|
25177
|
-
let
|
|
25178
|
-
|
|
25179
|
-
|
|
25180
|
-
|
|
25181
|
-
|
|
25182
|
-
let
|
|
25183
|
-
|
|
25184
|
-
const
|
|
25185
|
-
const
|
|
25186
|
-
|
|
25187
|
-
|
|
25188
|
-
|
|
25189
|
-
|
|
25190
|
-
|
|
25191
|
-
|
|
25192
|
-
|
|
25193
|
-
pts[i - 1] = mid;
|
|
25194
|
-
}
|
|
25195
|
-
segPts.push(pts[i]);
|
|
25196
|
-
patDist -= d;
|
|
25197
|
-
}
|
|
25198
|
-
if (draw && segPts.length > 1) segments.push(segPts);
|
|
25199
|
-
return segments;
|
|
25200
|
-
}
|
|
25201
|
-
catmullRomSpline(pts, spacing) {
|
|
25202
|
-
const curvePoints = [];
|
|
25203
|
-
for (let i = 0; i < pts.length - 1; i++) {
|
|
25204
|
-
const p0 = pts[i - 1] || pts[i];
|
|
25205
|
-
const p1 = pts[i];
|
|
25206
|
-
const p2 = pts[i + 1];
|
|
25207
|
-
const p3 = pts[i + 2] || p2;
|
|
25208
|
-
for (let t = 0; t < 1; t += spacing) {
|
|
25209
|
-
const t2 = t * t;
|
|
25210
|
-
const t3 = t2 * t;
|
|
25211
|
-
const x = .5 * (2 * p1.x + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);
|
|
25212
|
-
const y = .5 * (2 * p1.y + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
|
|
25213
|
-
const pressure = .5 * (2 * p1.pressure + (-p0.pressure + p2.pressure) * t + (2 * p0.pressure - 5 * p1.pressure + 4 * p2.pressure - p3.pressure) * t2 + (-p0.pressure + 3 * p1.pressure - 3 * p2.pressure + p3.pressure) * t3);
|
|
25214
|
-
curvePoints.push({
|
|
25125
|
+
getSplinePoints(pts, resolution = 8) {
|
|
25126
|
+
const result = [];
|
|
25127
|
+
for (let i = -1; i < pts.length - 2; i++) {
|
|
25128
|
+
const p0 = pts[Math.max(i, 0)];
|
|
25129
|
+
const p1 = pts[i + 1];
|
|
25130
|
+
const p2 = pts[i + 2];
|
|
25131
|
+
const p3 = pts[Math.min(i + 3, pts.length - 1)];
|
|
25132
|
+
for (let t = 0; t < 1; t += 1 / resolution) {
|
|
25133
|
+
const tt = t * t;
|
|
25134
|
+
const ttt = tt * t;
|
|
25135
|
+
const q1 = -ttt + 2 * tt - t;
|
|
25136
|
+
const q2 = 3 * ttt - 5 * tt + 2;
|
|
25137
|
+
const q3 = -3 * ttt + 4 * tt + t;
|
|
25138
|
+
const q4 = ttt - tt;
|
|
25139
|
+
const x = (q1 * p0.x + q2 * p1.x + q3 * p2.x + q4 * p3.x) / 2;
|
|
25140
|
+
const y = (q1 * p0.y + q2 * p1.y + q3 * p2.y + q4 * p3.y) / 2;
|
|
25141
|
+
const pressure = (q1 * p0.pressure + q2 * p1.pressure + q3 * p2.pressure + q4 * p3.pressure) / 2;
|
|
25142
|
+
result.push({
|
|
25215
25143
|
x,
|
|
25216
25144
|
y,
|
|
25217
25145
|
pressure
|
|
25218
25146
|
});
|
|
25219
25147
|
}
|
|
25220
25148
|
}
|
|
25221
|
-
|
|
25149
|
+
result.push(pts[pts.length - 1]);
|
|
25150
|
+
return result;
|
|
25151
|
+
}
|
|
25152
|
+
drawRibbonWithDash(ctx, pts, baseW, color, dash) {
|
|
25153
|
+
if (pts.length < 2) return;
|
|
25154
|
+
const filtered = this.resamplePoints(pts, 2);
|
|
25155
|
+
const centerline = this.getSplinePoints(filtered, 8);
|
|
25156
|
+
let dashIndex = 0;
|
|
25157
|
+
let dashOn = true;
|
|
25158
|
+
let dashRemaining = dash.length ? dash[0] : Infinity;
|
|
25159
|
+
let leftSide = [];
|
|
25160
|
+
let rightSide = [];
|
|
25161
|
+
for (let i = 0; i < centerline.length - 1; i++) {
|
|
25162
|
+
const p0 = centerline[i];
|
|
25163
|
+
const p1 = centerline[i + 1];
|
|
25164
|
+
const dx = p1.x - p0.x;
|
|
25165
|
+
const dy = p1.y - p0.y;
|
|
25166
|
+
const segLen = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
25167
|
+
const nx = -dy / segLen;
|
|
25168
|
+
const ny = dx / segLen;
|
|
25169
|
+
const w0 = baseW * p0.pressure / 2;
|
|
25170
|
+
const w1 = baseW * p1.pressure / 2;
|
|
25171
|
+
let traveled = 0;
|
|
25172
|
+
while (traveled < segLen) {
|
|
25173
|
+
const step = Math.min(dashRemaining, segLen - traveled);
|
|
25174
|
+
const t0 = traveled / segLen;
|
|
25175
|
+
const t1 = (traveled + step) / segLen;
|
|
25176
|
+
const x0 = p0.x + dx * t0;
|
|
25177
|
+
const y0 = p0.y + dy * t0;
|
|
25178
|
+
const x1 = p0.x + dx * t1;
|
|
25179
|
+
const y1 = p0.y + dy * t1;
|
|
25180
|
+
const pw0 = w0 + (w1 - w0) * t0;
|
|
25181
|
+
const pw1 = w0 + (w1 - w0) * t1;
|
|
25182
|
+
if (dashOn) {
|
|
25183
|
+
leftSide.push({
|
|
25184
|
+
x: x0 + nx * pw0,
|
|
25185
|
+
y: y0 + ny * pw0,
|
|
25186
|
+
pressure: 1
|
|
25187
|
+
});
|
|
25188
|
+
rightSide.push({
|
|
25189
|
+
x: x0 - nx * pw0,
|
|
25190
|
+
y: y0 - ny * pw0,
|
|
25191
|
+
pressure: 1
|
|
25192
|
+
});
|
|
25193
|
+
leftSide.push({
|
|
25194
|
+
x: x1 + nx * pw1,
|
|
25195
|
+
y: y1 + ny * pw1,
|
|
25196
|
+
pressure: 1
|
|
25197
|
+
});
|
|
25198
|
+
rightSide.push({
|
|
25199
|
+
x: x1 - nx * pw1,
|
|
25200
|
+
y: y1 - ny * pw1,
|
|
25201
|
+
pressure: 1
|
|
25202
|
+
});
|
|
25203
|
+
}
|
|
25204
|
+
dashRemaining -= step;
|
|
25205
|
+
if (dashRemaining <= 0) {
|
|
25206
|
+
if (dashOn && leftSide.length && rightSide.length) {
|
|
25207
|
+
const smoothLeft = this.getSplinePoints(leftSide, 4);
|
|
25208
|
+
const smoothRight = this.getSplinePoints(rightSide.reverse(), 4);
|
|
25209
|
+
ctx.beginPath();
|
|
25210
|
+
ctx.fillStyle = color;
|
|
25211
|
+
ctx.moveTo(smoothLeft[0].x, smoothLeft[0].y);
|
|
25212
|
+
for (const p of smoothLeft) ctx.lineTo(p.x, p.y);
|
|
25213
|
+
for (const p of smoothRight) ctx.lineTo(p.x, p.y);
|
|
25214
|
+
ctx.closePath();
|
|
25215
|
+
ctx.fill();
|
|
25216
|
+
}
|
|
25217
|
+
leftSide = [];
|
|
25218
|
+
rightSide = [];
|
|
25219
|
+
dashOn = !dashOn;
|
|
25220
|
+
dashIndex = (dashIndex + 1) % dash.length;
|
|
25221
|
+
dashRemaining = dash[dashIndex];
|
|
25222
|
+
}
|
|
25223
|
+
traveled += step;
|
|
25224
|
+
}
|
|
25225
|
+
}
|
|
25226
|
+
if (dashOn && leftSide.length && rightSide.length) {
|
|
25227
|
+
const smoothLeft = this.getSplinePoints(leftSide, 4);
|
|
25228
|
+
const smoothRight = this.getSplinePoints(rightSide.reverse(), 4);
|
|
25229
|
+
ctx.beginPath();
|
|
25230
|
+
ctx.fillStyle = color;
|
|
25231
|
+
ctx.moveTo(smoothLeft[0].x, smoothLeft[0].y);
|
|
25232
|
+
for (const p of smoothLeft) ctx.lineTo(p.x, p.y);
|
|
25233
|
+
for (const p of smoothRight) ctx.lineTo(p.x, p.y);
|
|
25234
|
+
ctx.closePath();
|
|
25235
|
+
ctx.fill();
|
|
25236
|
+
}
|
|
25237
|
+
}
|
|
25238
|
+
drawShape(ctx, shape) {
|
|
25239
|
+
const strokeElements = shape.getAttrs().strokeElements;
|
|
25240
|
+
if (strokeElements.length === 0) return;
|
|
25241
|
+
const color = shape.getAttrs().stroke ?? "black";
|
|
25242
|
+
const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
|
|
25243
|
+
const dash = shape.getAttrs().dash ?? [];
|
|
25244
|
+
this.drawRibbonWithDash(ctx, strokeElements, strokeWidth, color, dash);
|
|
25222
25245
|
}
|
|
25223
25246
|
onRender(props) {
|
|
25224
25247
|
const stroke = new Konva.Shape({
|
|
25225
25248
|
...props,
|
|
25226
25249
|
name: "node",
|
|
25227
25250
|
sceneFunc: (ctx, shape) => {
|
|
25228
|
-
|
|
25229
|
-
if (strokeElements.length === 0) return;
|
|
25230
|
-
if (strokeElements.length < 2) return;
|
|
25231
|
-
const color = shape.getAttrs().stroke ?? "black";
|
|
25232
|
-
const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
|
|
25233
|
-
const smoothPoints = this.catmullRomSpline(strokeElements, this.config.smoothingFactor);
|
|
25234
|
-
const evenlySpaced = this.resamplePoints(smoothPoints, this.config.resamplingSpacing);
|
|
25235
|
-
const dashes = this.dashSegments(evenlySpaced, shape.getAttrs().dash || []);
|
|
25236
|
-
dashes.forEach((segment) => {
|
|
25237
|
-
const poly = this.buildPolygonFromPressure(segment, strokeWidth);
|
|
25238
|
-
if (!poly.length) return;
|
|
25239
|
-
ctx.beginPath();
|
|
25240
|
-
ctx.moveTo(poly[0].x, poly[0].y);
|
|
25241
|
-
for (let i = 1; i < poly.length; i++) ctx.lineTo(poly[i].x, poly[i].y);
|
|
25242
|
-
ctx.strokeStyle = color;
|
|
25243
|
-
ctx.lineCap = shape.getAttrs().lineCap ?? "butt";
|
|
25244
|
-
ctx.lineJoin = shape.getAttrs().lineJoin ?? "miter";
|
|
25245
|
-
ctx.closePath();
|
|
25246
|
-
ctx.fillStyle = color;
|
|
25247
|
-
ctx.fill();
|
|
25248
|
-
});
|
|
25251
|
+
this.drawShape(ctx, shape);
|
|
25249
25252
|
},
|
|
25250
25253
|
dashEnabled: false,
|
|
25251
25254
|
hitFunc: (context, shape) => {
|
|
@@ -25255,6 +25258,7 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25255
25258
|
context.fillStrokeShape(shape);
|
|
25256
25259
|
}
|
|
25257
25260
|
});
|
|
25261
|
+
if (props.cacheStroke) stroke.cache({ pixelRatio: this.config.cachePixelRatio });
|
|
25258
25262
|
this.setupDefaultNodeAugmentation(stroke);
|
|
25259
25263
|
const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
|
|
25260
25264
|
stroke.getTransformerProperties = function() {
|
|
@@ -25264,7 +25268,15 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25264
25268
|
return stroke;
|
|
25265
25269
|
}
|
|
25266
25270
|
onUpdate(nodeInstance, nextProps) {
|
|
25271
|
+
const actAttrs = nodeInstance.getAttrs();
|
|
25272
|
+
if (actAttrs.stroke !== nextProps.stroke || actAttrs.strokeWidth !== nextProps.strokeWidth || actAttrs.dash !== nextProps.dash) nodeInstance.clearCache();
|
|
25267
25273
|
nodeInstance.setAttrs({ ...nextProps });
|
|
25274
|
+
if (nextProps.cacheStroke) {
|
|
25275
|
+
nodeInstance.sceneFunc((ctx, shape) => {
|
|
25276
|
+
this.drawShape(ctx, shape);
|
|
25277
|
+
});
|
|
25278
|
+
nodeInstance.cache({ pixelRatio: this.config.cachePixelRatio });
|
|
25279
|
+
}
|
|
25268
25280
|
const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
25269
25281
|
if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
|
|
25270
25282
|
}
|
|
@@ -25366,7 +25378,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
25366
25378
|
constructor(params) {
|
|
25367
25379
|
super();
|
|
25368
25380
|
const { config } = params ?? {};
|
|
25369
|
-
this.config = (0, import_lodash
|
|
25381
|
+
this.config = (0, import_lodash.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
|
|
25370
25382
|
if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
|
|
25371
25383
|
this.pinching = false;
|
|
25372
25384
|
this.isTrackpad = false;
|
|
@@ -25394,7 +25406,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
|
|
|
25394
25406
|
this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
|
|
25395
25407
|
}
|
|
25396
25408
|
};
|
|
25397
|
-
mainLayer?.on("draw", (0, import_lodash
|
|
25409
|
+
mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
|
|
25398
25410
|
this.setZoom(this.config.zoomSteps[this.actualStep]);
|
|
25399
25411
|
}
|
|
25400
25412
|
setZoom(scale, centered = true, pointer) {
|
|
@@ -26782,7 +26794,6 @@ const BRUSH_TOOL_DEFAULT_CONFIG = { interpolationSteps: 10 };
|
|
|
26782
26794
|
//#region src/actions/brush-tool/brush-tool.ts
|
|
26783
26795
|
var WeaveBrushToolAction = class extends WeaveAction {
|
|
26784
26796
|
initialized = false;
|
|
26785
|
-
rawPoints = [];
|
|
26786
26797
|
onPropsChange = void 0;
|
|
26787
26798
|
onInit = void 0;
|
|
26788
26799
|
constructor(params) {
|
|
@@ -26806,10 +26817,9 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26806
26817
|
opacity: 1
|
|
26807
26818
|
};
|
|
26808
26819
|
}
|
|
26809
|
-
|
|
26810
|
-
|
|
26811
|
-
|
|
26812
|
-
return pressure;
|
|
26820
|
+
getEventPressure(e) {
|
|
26821
|
+
if (e.evt.pointerType && e.evt.pointerType === "pen") return e.evt.pressure || .5;
|
|
26822
|
+
return .5;
|
|
26813
26823
|
}
|
|
26814
26824
|
setupEvents() {
|
|
26815
26825
|
const stage = this.instance.getStage();
|
|
@@ -26828,30 +26838,27 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26828
26838
|
const handlePointerDown = (e) => {
|
|
26829
26839
|
if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
|
|
26830
26840
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26831
|
-
const pointPressure = this.
|
|
26841
|
+
const pointPressure = this.getEventPressure(e);
|
|
26832
26842
|
this.handleStartStroke(pointPressure);
|
|
26833
26843
|
e.evt.stopPropagation();
|
|
26834
26844
|
};
|
|
26835
|
-
|
|
26836
|
-
else stage.on("pointerdown", handlePointerDown);
|
|
26845
|
+
stage.on("pointerdown", handlePointerDown);
|
|
26837
26846
|
const handlePointerMove = (e) => {
|
|
26838
26847
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26839
26848
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26840
26849
|
stage.container().style.cursor = "crosshair";
|
|
26841
|
-
const pointPressure = this.
|
|
26850
|
+
const pointPressure = this.getEventPressure(e);
|
|
26842
26851
|
this.handleMovement(pointPressure);
|
|
26843
26852
|
e.evt.stopPropagation();
|
|
26844
26853
|
};
|
|
26845
|
-
|
|
26846
|
-
else stage.on("pointermove", handlePointerMove);
|
|
26854
|
+
stage.on("pointermove", handlePointerMove);
|
|
26847
26855
|
const handlePointerUp = (e) => {
|
|
26848
26856
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26849
26857
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26850
26858
|
this.handleEndStroke();
|
|
26851
26859
|
e.evt.stopPropagation();
|
|
26852
26860
|
};
|
|
26853
|
-
|
|
26854
|
-
else stage.on("pointerup", handlePointerUp);
|
|
26861
|
+
stage.on("pointerup", handlePointerUp);
|
|
26855
26862
|
this.initialized = true;
|
|
26856
26863
|
}
|
|
26857
26864
|
setState(state) {
|
|
@@ -26902,31 +26909,14 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26902
26909
|
y: 0,
|
|
26903
26910
|
width: 0,
|
|
26904
26911
|
height: 0,
|
|
26905
|
-
strokeElements: newStrokeElements
|
|
26912
|
+
strokeElements: newStrokeElements,
|
|
26913
|
+
cacheStroke: false
|
|
26906
26914
|
});
|
|
26907
26915
|
const nodeInstance = nodeHandler.onRender(node.props);
|
|
26908
26916
|
this.measureContainer?.add(nodeInstance);
|
|
26909
26917
|
}
|
|
26910
26918
|
this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
|
|
26911
26919
|
}
|
|
26912
|
-
catmullRom1D(p0, p1, p2, p3, t) {
|
|
26913
|
-
const t2 = t * t;
|
|
26914
|
-
const t3 = t2 * t;
|
|
26915
|
-
return .5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (-p0 + 3 * p1 - 3 * p2 + p3) * t3);
|
|
26916
|
-
}
|
|
26917
|
-
smoothInterpolation(last4Points, steps) {
|
|
26918
|
-
const [p0, p1, p2, p3] = last4Points;
|
|
26919
|
-
const pts = [];
|
|
26920
|
-
for (let i = 0; i <= steps; i++) {
|
|
26921
|
-
const t = i / steps;
|
|
26922
|
-
pts.push({
|
|
26923
|
-
x: this.catmullRom1D(p0.x, p1.x, p2.x, p3.x, t),
|
|
26924
|
-
y: this.catmullRom1D(p0.y, p1.y, p2.y, p3.y, t),
|
|
26925
|
-
pressure: this.catmullRom1D(p0.pressure, p1.pressure, p2.pressure, p3.pressure, t)
|
|
26926
|
-
});
|
|
26927
|
-
}
|
|
26928
|
-
return pts;
|
|
26929
|
-
}
|
|
26930
26920
|
handleMovement(pressure) {
|
|
26931
26921
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26932
26922
|
const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
|
|
@@ -26937,16 +26927,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26937
26927
|
y: mousePoint.y - tempStroke.y(),
|
|
26938
26928
|
pressure
|
|
26939
26929
|
};
|
|
26940
|
-
|
|
26941
|
-
let newStrokeElements = [...tempStroke.getAttrs().strokeElements];
|
|
26942
|
-
const smoothPoints = [];
|
|
26943
|
-
if (isIOS()) if (this.rawPoints.length >= 4) {
|
|
26944
|
-
const last4 = this.rawPoints.slice(-4);
|
|
26945
|
-
const interpolatedPts = this.smoothInterpolation(last4, this.config.interpolationSteps);
|
|
26946
|
-
smoothPoints.push(...interpolatedPts);
|
|
26947
|
-
} else smoothPoints.push(currentPoint);
|
|
26948
|
-
else smoothPoints.push(currentPoint);
|
|
26949
|
-
newStrokeElements = [...newStrokeElements, ...smoothPoints];
|
|
26930
|
+
const newStrokeElements = [...tempStroke.getAttrs().strokeElements, currentPoint];
|
|
26950
26931
|
const box = this.getBoundingBox(newStrokeElements);
|
|
26951
26932
|
tempStroke.setAttrs({
|
|
26952
26933
|
width: box.width,
|
|
@@ -26977,13 +26958,13 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26977
26958
|
height: box.height,
|
|
26978
26959
|
x: box.x,
|
|
26979
26960
|
y: box.y,
|
|
26980
|
-
strokeElements: newStrokeElements
|
|
26961
|
+
strokeElements: newStrokeElements,
|
|
26962
|
+
cacheStroke: true
|
|
26981
26963
|
});
|
|
26982
26964
|
const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
|
|
26983
26965
|
if (realNode) realNode.destroy();
|
|
26984
26966
|
if (tempStroke.getAttrs().strokeElements.length >= 3) this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
|
|
26985
26967
|
}
|
|
26986
|
-
this.rawPoints = [];
|
|
26987
26968
|
this.clickPoint = null;
|
|
26988
26969
|
stage.container().style.cursor = "crosshair";
|
|
26989
26970
|
stage.container().tabIndex = 1;
|
|
@@ -27019,7 +27000,6 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
27019
27000
|
if (node) selectionPlugin.setSelectedNodes([node]);
|
|
27020
27001
|
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
27021
27002
|
}
|
|
27022
|
-
this.rawPoints = [];
|
|
27023
27003
|
this.clickPoint = null;
|
|
27024
27004
|
this.setState(BRUSH_TOOL_STATE.INACTIVE);
|
|
27025
27005
|
}
|
|
@@ -28311,7 +28291,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
|
|
|
28311
28291
|
if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
|
|
28312
28292
|
this.onRender();
|
|
28313
28293
|
};
|
|
28314
|
-
stage.on("pointermove", (0, import_lodash
|
|
28294
|
+
stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
|
|
28315
28295
|
stage.on("pointermove", () => {
|
|
28316
28296
|
if (this.enabled) this.onRender();
|
|
28317
28297
|
});
|