@inditextech/weave-sdk 0.56.1 → 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 +164 -175
- 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 +164 -175
- package/dist/sdk.js.map +1 -1
- package/package.json +2 -2
package/dist/sdk.cjs
CHANGED
|
@@ -20602,14 +20602,18 @@ var WeaveReconciler = class {
|
|
|
20602
20602
|
beforeChild
|
|
20603
20603
|
}, "insertBefore ");
|
|
20604
20604
|
if (parentInstance instanceof konva.default.Layer || parentInstance instanceof konva.default.Group) {
|
|
20605
|
-
const
|
|
20606
|
-
const fromIndex =
|
|
20607
|
-
const toIndex =
|
|
20605
|
+
const actualChildren = parentInstance.getChildren();
|
|
20606
|
+
const fromIndex = actualChildren.indexOf(child);
|
|
20607
|
+
const toIndex = actualChildren.indexOf(beforeChild);
|
|
20608
20608
|
if (fromIndex === -1 || toIndex === -1) return;
|
|
20609
|
-
children.splice(fromIndex, 1);
|
|
20610
20609
|
const adjustedIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
|
|
20611
|
-
|
|
20612
|
-
|
|
20610
|
+
child.setZIndex(adjustedIndex);
|
|
20611
|
+
const children = parentInstance.getChildren();
|
|
20612
|
+
for (let i = 0; i < children.length; i++) {
|
|
20613
|
+
const child$1 = children[i];
|
|
20614
|
+
child$1.setAttrs({ zIndex: i });
|
|
20615
|
+
}
|
|
20616
|
+
weaveInstance.getMainLayer()?.batchDraw();
|
|
20613
20617
|
}
|
|
20614
20618
|
},
|
|
20615
20619
|
appendChild(parentInstance, child) {
|
|
@@ -21569,6 +21573,7 @@ var WeaveZIndexManager = class {
|
|
|
21569
21573
|
this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], up one step of z-index`);
|
|
21570
21574
|
const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
|
|
21571
21575
|
if (handler) {
|
|
21576
|
+
instance.moveUp();
|
|
21572
21577
|
const nodeState = handler.serialize(instance);
|
|
21573
21578
|
this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.UP);
|
|
21574
21579
|
}
|
|
@@ -21577,6 +21582,7 @@ var WeaveZIndexManager = class {
|
|
|
21577
21582
|
this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], down one step of z-index`);
|
|
21578
21583
|
const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
|
|
21579
21584
|
if (handler) {
|
|
21585
|
+
instance.moveDown();
|
|
21580
21586
|
const nodeState = handler.serialize(instance);
|
|
21581
21587
|
this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.DOWN);
|
|
21582
21588
|
}
|
|
@@ -21587,6 +21593,7 @@ var WeaveZIndexManager = class {
|
|
|
21587
21593
|
for (const node of nodesDescending) {
|
|
21588
21594
|
const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
|
|
21589
21595
|
if (handler) {
|
|
21596
|
+
node.moveToBottom();
|
|
21590
21597
|
const nodeState = handler.serialize(node);
|
|
21591
21598
|
this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.BACK);
|
|
21592
21599
|
}
|
|
@@ -21598,6 +21605,7 @@ var WeaveZIndexManager = class {
|
|
|
21598
21605
|
for (const node of nodesAscending) {
|
|
21599
21606
|
const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
|
|
21600
21607
|
if (handler) {
|
|
21608
|
+
node.moveToTop();
|
|
21601
21609
|
const nodeState = handler.serialize(node);
|
|
21602
21610
|
this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT);
|
|
21603
21611
|
}
|
|
@@ -21922,7 +21930,7 @@ var WeaveRegisterManager = class {
|
|
|
21922
21930
|
|
|
21923
21931
|
//#endregion
|
|
21924
21932
|
//#region package.json
|
|
21925
|
-
var version = "0.
|
|
21933
|
+
var version = "0.57.0";
|
|
21926
21934
|
|
|
21927
21935
|
//#endregion
|
|
21928
21936
|
//#region src/managers/setup.ts
|
|
@@ -25086,9 +25094,9 @@ var WeaveFrameNode = class extends WeaveNode {
|
|
|
25086
25094
|
//#region src/nodes/stroke/constants.ts
|
|
25087
25095
|
const WEAVE_STROKE_NODE_TYPE = "stroke";
|
|
25088
25096
|
const WEAVE_STROKE_NODE_DEFAULT_CONFIG = {
|
|
25089
|
-
|
|
25097
|
+
splineResolution: 8,
|
|
25090
25098
|
resamplingSpacing: 2,
|
|
25091
|
-
|
|
25099
|
+
cachePixelRatio: 4
|
|
25092
25100
|
};
|
|
25093
25101
|
|
|
25094
25102
|
//#endregion
|
|
@@ -25100,143 +25108,147 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25100
25108
|
const { config } = params ?? {};
|
|
25101
25109
|
this.config = (0, import_merge.default)(WEAVE_STROKE_NODE_DEFAULT_CONFIG, config);
|
|
25102
25110
|
}
|
|
25103
|
-
resamplePoints(pts,
|
|
25111
|
+
resamplePoints(pts, minDist = 2) {
|
|
25104
25112
|
if (pts.length < 2) return pts;
|
|
25105
|
-
const
|
|
25113
|
+
const result = [pts[0]];
|
|
25114
|
+
let last = pts[0];
|
|
25106
25115
|
for (let i = 1; i < pts.length; i++) {
|
|
25107
|
-
|
|
25108
|
-
const
|
|
25109
|
-
|
|
25110
|
-
|
|
25111
|
-
|
|
25112
|
-
|
|
25113
|
-
const t = spacing / segDist;
|
|
25114
|
-
const newPt = this.lerpPoint(last, current, t);
|
|
25115
|
-
resampled.push(newPt);
|
|
25116
|
-
last = newPt;
|
|
25117
|
-
remaining = this.dist(last, current);
|
|
25118
|
-
}
|
|
25119
|
-
}
|
|
25120
|
-
return resampled;
|
|
25121
|
-
}
|
|
25122
|
-
dist(a, b) {
|
|
25123
|
-
const dx = b.x - a.x, dy = b.y - a.y;
|
|
25124
|
-
return Math.hypot(dx, dy);
|
|
25125
|
-
}
|
|
25126
|
-
lerpPoint(a, b, t) {
|
|
25127
|
-
return {
|
|
25128
|
-
x: a.x + (b.x - a.x) * t,
|
|
25129
|
-
y: a.y + (b.y - a.y) * t,
|
|
25130
|
-
pressure: a.pressure + (b.pressure - a.pressure) * t
|
|
25131
|
-
};
|
|
25132
|
-
}
|
|
25133
|
-
buildPolygonFromPressure(pts, baseWidth) {
|
|
25134
|
-
if (pts.length < 2) return [];
|
|
25135
|
-
const left = [];
|
|
25136
|
-
const right = [];
|
|
25137
|
-
for (let i = 0; i < pts.length; i++) {
|
|
25138
|
-
const p = pts[i];
|
|
25139
|
-
const w = (baseWidth + p.pressure * this.config.pressureScale) / 2;
|
|
25140
|
-
let dx, dy;
|
|
25141
|
-
if (i === 0) {
|
|
25142
|
-
dx = pts[1].x - p.x;
|
|
25143
|
-
dy = pts[1].y - p.y;
|
|
25144
|
-
} else if (i === pts.length - 1) {
|
|
25145
|
-
dx = p.x - pts[i - 1].x;
|
|
25146
|
-
dy = p.y - pts[i - 1].y;
|
|
25147
|
-
} else {
|
|
25148
|
-
dx = pts[i + 1].x - pts[i - 1].x;
|
|
25149
|
-
dy = pts[i + 1].y - pts[i - 1].y;
|
|
25150
|
-
}
|
|
25151
|
-
const len = Math.hypot(dx, dy) || 1;
|
|
25152
|
-
const nx = -dy / len;
|
|
25153
|
-
const ny = dx / len;
|
|
25154
|
-
left.push({
|
|
25155
|
-
x: p.x + nx * w,
|
|
25156
|
-
y: p.y + ny * w
|
|
25157
|
-
});
|
|
25158
|
-
right.push({
|
|
25159
|
-
x: p.x - nx * w,
|
|
25160
|
-
y: p.y - ny * w
|
|
25161
|
-
});
|
|
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
|
+
}
|
|
25162
25122
|
}
|
|
25163
|
-
|
|
25164
|
-
return left.concat(reversed);
|
|
25123
|
+
return result;
|
|
25165
25124
|
}
|
|
25166
|
-
|
|
25167
|
-
const
|
|
25168
|
-
let
|
|
25169
|
-
|
|
25170
|
-
|
|
25171
|
-
|
|
25172
|
-
|
|
25173
|
-
let
|
|
25174
|
-
|
|
25175
|
-
const
|
|
25176
|
-
const
|
|
25177
|
-
|
|
25178
|
-
|
|
25179
|
-
|
|
25180
|
-
|
|
25181
|
-
|
|
25182
|
-
|
|
25183
|
-
|
|
25184
|
-
pts[i - 1] = mid;
|
|
25185
|
-
}
|
|
25186
|
-
segPts.push(pts[i]);
|
|
25187
|
-
patDist -= d;
|
|
25188
|
-
}
|
|
25189
|
-
if (draw && segPts.length > 1) segments.push(segPts);
|
|
25190
|
-
return segments;
|
|
25191
|
-
}
|
|
25192
|
-
catmullRomSpline(pts, spacing) {
|
|
25193
|
-
const curvePoints = [];
|
|
25194
|
-
for (let i = 0; i < pts.length - 1; i++) {
|
|
25195
|
-
const p0 = pts[i - 1] || pts[i];
|
|
25196
|
-
const p1 = pts[i];
|
|
25197
|
-
const p2 = pts[i + 1];
|
|
25198
|
-
const p3 = pts[i + 2] || p2;
|
|
25199
|
-
for (let t = 0; t < 1; t += spacing) {
|
|
25200
|
-
const t2 = t * t;
|
|
25201
|
-
const t3 = t2 * t;
|
|
25202
|
-
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);
|
|
25203
|
-
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);
|
|
25204
|
-
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);
|
|
25205
|
-
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({
|
|
25206
25143
|
x,
|
|
25207
25144
|
y,
|
|
25208
25145
|
pressure
|
|
25209
25146
|
});
|
|
25210
25147
|
}
|
|
25211
25148
|
}
|
|
25212
|
-
|
|
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);
|
|
25213
25245
|
}
|
|
25214
25246
|
onRender(props) {
|
|
25215
25247
|
const stroke = new konva.default.Shape({
|
|
25216
25248
|
...props,
|
|
25217
25249
|
name: "node",
|
|
25218
25250
|
sceneFunc: (ctx, shape) => {
|
|
25219
|
-
|
|
25220
|
-
if (strokeElements.length === 0) return;
|
|
25221
|
-
if (strokeElements.length < 2) return;
|
|
25222
|
-
const color = shape.getAttrs().stroke ?? "black";
|
|
25223
|
-
const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
|
|
25224
|
-
const smoothPoints = this.catmullRomSpline(strokeElements, this.config.smoothingFactor);
|
|
25225
|
-
const evenlySpaced = this.resamplePoints(smoothPoints, this.config.resamplingSpacing);
|
|
25226
|
-
const dashes = this.dashSegments(evenlySpaced, shape.getAttrs().dash || []);
|
|
25227
|
-
dashes.forEach((segment) => {
|
|
25228
|
-
const poly = this.buildPolygonFromPressure(segment, strokeWidth);
|
|
25229
|
-
if (!poly.length) return;
|
|
25230
|
-
ctx.beginPath();
|
|
25231
|
-
ctx.moveTo(poly[0].x, poly[0].y);
|
|
25232
|
-
for (let i = 1; i < poly.length; i++) ctx.lineTo(poly[i].x, poly[i].y);
|
|
25233
|
-
ctx.strokeStyle = color;
|
|
25234
|
-
ctx.lineCap = shape.getAttrs().lineCap ?? "butt";
|
|
25235
|
-
ctx.lineJoin = shape.getAttrs().lineJoin ?? "miter";
|
|
25236
|
-
ctx.closePath();
|
|
25237
|
-
ctx.fillStyle = color;
|
|
25238
|
-
ctx.fill();
|
|
25239
|
-
});
|
|
25251
|
+
this.drawShape(ctx, shape);
|
|
25240
25252
|
},
|
|
25241
25253
|
dashEnabled: false,
|
|
25242
25254
|
hitFunc: (context, shape) => {
|
|
@@ -25246,6 +25258,7 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25246
25258
|
context.fillStrokeShape(shape);
|
|
25247
25259
|
}
|
|
25248
25260
|
});
|
|
25261
|
+
if (props.cacheStroke) stroke.cache({ pixelRatio: this.config.cachePixelRatio });
|
|
25249
25262
|
this.setupDefaultNodeAugmentation(stroke);
|
|
25250
25263
|
const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
|
|
25251
25264
|
stroke.getTransformerProperties = function() {
|
|
@@ -25255,7 +25268,15 @@ var WeaveStrokeNode = class extends WeaveNode {
|
|
|
25255
25268
|
return stroke;
|
|
25256
25269
|
}
|
|
25257
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();
|
|
25258
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
|
+
}
|
|
25259
25280
|
const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
|
|
25260
25281
|
if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
|
|
25261
25282
|
}
|
|
@@ -26773,7 +26794,6 @@ const BRUSH_TOOL_DEFAULT_CONFIG = { interpolationSteps: 10 };
|
|
|
26773
26794
|
//#region src/actions/brush-tool/brush-tool.ts
|
|
26774
26795
|
var WeaveBrushToolAction = class extends WeaveAction {
|
|
26775
26796
|
initialized = false;
|
|
26776
|
-
rawPoints = [];
|
|
26777
26797
|
onPropsChange = void 0;
|
|
26778
26798
|
onInit = void 0;
|
|
26779
26799
|
constructor(params) {
|
|
@@ -26797,10 +26817,9 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26797
26817
|
opacity: 1
|
|
26798
26818
|
};
|
|
26799
26819
|
}
|
|
26800
|
-
|
|
26801
|
-
|
|
26802
|
-
|
|
26803
|
-
return pressure;
|
|
26820
|
+
getEventPressure(e) {
|
|
26821
|
+
if (e.evt.pointerType && e.evt.pointerType === "pen") return e.evt.pressure || .5;
|
|
26822
|
+
return .5;
|
|
26804
26823
|
}
|
|
26805
26824
|
setupEvents() {
|
|
26806
26825
|
const stage = this.instance.getStage();
|
|
@@ -26819,30 +26838,27 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26819
26838
|
const handlePointerDown = (e) => {
|
|
26820
26839
|
if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
|
|
26821
26840
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26822
|
-
const pointPressure = this.
|
|
26841
|
+
const pointPressure = this.getEventPressure(e);
|
|
26823
26842
|
this.handleStartStroke(pointPressure);
|
|
26824
26843
|
e.evt.stopPropagation();
|
|
26825
26844
|
};
|
|
26826
|
-
|
|
26827
|
-
else stage.on("pointerdown", handlePointerDown);
|
|
26845
|
+
stage.on("pointerdown", handlePointerDown);
|
|
26828
26846
|
const handlePointerMove = (e) => {
|
|
26829
26847
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26830
26848
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26831
26849
|
stage.container().style.cursor = "crosshair";
|
|
26832
|
-
const pointPressure = this.
|
|
26850
|
+
const pointPressure = this.getEventPressure(e);
|
|
26833
26851
|
this.handleMovement(pointPressure);
|
|
26834
26852
|
e.evt.stopPropagation();
|
|
26835
26853
|
};
|
|
26836
|
-
|
|
26837
|
-
else stage.on("pointermove", handlePointerMove);
|
|
26854
|
+
stage.on("pointermove", handlePointerMove);
|
|
26838
26855
|
const handlePointerUp = (e) => {
|
|
26839
26856
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26840
26857
|
if (this.getZoomPlugin()?.isPinching()) return;
|
|
26841
26858
|
this.handleEndStroke();
|
|
26842
26859
|
e.evt.stopPropagation();
|
|
26843
26860
|
};
|
|
26844
|
-
|
|
26845
|
-
else stage.on("pointerup", handlePointerUp);
|
|
26861
|
+
stage.on("pointerup", handlePointerUp);
|
|
26846
26862
|
this.initialized = true;
|
|
26847
26863
|
}
|
|
26848
26864
|
setState(state) {
|
|
@@ -26893,31 +26909,14 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26893
26909
|
y: 0,
|
|
26894
26910
|
width: 0,
|
|
26895
26911
|
height: 0,
|
|
26896
|
-
strokeElements: newStrokeElements
|
|
26912
|
+
strokeElements: newStrokeElements,
|
|
26913
|
+
cacheStroke: false
|
|
26897
26914
|
});
|
|
26898
26915
|
const nodeInstance = nodeHandler.onRender(node.props);
|
|
26899
26916
|
this.measureContainer?.add(nodeInstance);
|
|
26900
26917
|
}
|
|
26901
26918
|
this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
|
|
26902
26919
|
}
|
|
26903
|
-
catmullRom1D(p0, p1, p2, p3, t) {
|
|
26904
|
-
const t2 = t * t;
|
|
26905
|
-
const t3 = t2 * t;
|
|
26906
|
-
return .5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (-p0 + 3 * p1 - 3 * p2 + p3) * t3);
|
|
26907
|
-
}
|
|
26908
|
-
smoothInterpolation(last4Points, steps) {
|
|
26909
|
-
const [p0, p1, p2, p3] = last4Points;
|
|
26910
|
-
const pts = [];
|
|
26911
|
-
for (let i = 0; i <= steps; i++) {
|
|
26912
|
-
const t = i / steps;
|
|
26913
|
-
pts.push({
|
|
26914
|
-
x: this.catmullRom1D(p0.x, p1.x, p2.x, p3.x, t),
|
|
26915
|
-
y: this.catmullRom1D(p0.y, p1.y, p2.y, p3.y, t),
|
|
26916
|
-
pressure: this.catmullRom1D(p0.pressure, p1.pressure, p2.pressure, p3.pressure, t)
|
|
26917
|
-
});
|
|
26918
|
-
}
|
|
26919
|
-
return pts;
|
|
26920
|
-
}
|
|
26921
26920
|
handleMovement(pressure) {
|
|
26922
26921
|
if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
|
|
26923
26922
|
const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
|
|
@@ -26928,16 +26927,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26928
26927
|
y: mousePoint.y - tempStroke.y(),
|
|
26929
26928
|
pressure
|
|
26930
26929
|
};
|
|
26931
|
-
|
|
26932
|
-
let newStrokeElements = [...tempStroke.getAttrs().strokeElements];
|
|
26933
|
-
const smoothPoints = [];
|
|
26934
|
-
if (isIOS()) if (this.rawPoints.length >= 4) {
|
|
26935
|
-
const last4 = this.rawPoints.slice(-4);
|
|
26936
|
-
const interpolatedPts = this.smoothInterpolation(last4, this.config.interpolationSteps);
|
|
26937
|
-
smoothPoints.push(...interpolatedPts);
|
|
26938
|
-
} else smoothPoints.push(currentPoint);
|
|
26939
|
-
else smoothPoints.push(currentPoint);
|
|
26940
|
-
newStrokeElements = [...newStrokeElements, ...smoothPoints];
|
|
26930
|
+
const newStrokeElements = [...tempStroke.getAttrs().strokeElements, currentPoint];
|
|
26941
26931
|
const box = this.getBoundingBox(newStrokeElements);
|
|
26942
26932
|
tempStroke.setAttrs({
|
|
26943
26933
|
width: box.width,
|
|
@@ -26968,13 +26958,13 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
26968
26958
|
height: box.height,
|
|
26969
26959
|
x: box.x,
|
|
26970
26960
|
y: box.y,
|
|
26971
|
-
strokeElements: newStrokeElements
|
|
26961
|
+
strokeElements: newStrokeElements,
|
|
26962
|
+
cacheStroke: true
|
|
26972
26963
|
});
|
|
26973
26964
|
const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
|
|
26974
26965
|
if (realNode) realNode.destroy();
|
|
26975
26966
|
if (tempStroke.getAttrs().strokeElements.length >= 3) this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
|
|
26976
26967
|
}
|
|
26977
|
-
this.rawPoints = [];
|
|
26978
26968
|
this.clickPoint = null;
|
|
26979
26969
|
stage.container().style.cursor = "crosshair";
|
|
26980
26970
|
stage.container().tabIndex = 1;
|
|
@@ -27010,7 +27000,6 @@ var WeaveBrushToolAction = class extends WeaveAction {
|
|
|
27010
27000
|
if (node) selectionPlugin.setSelectedNodes([node]);
|
|
27011
27001
|
this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
|
|
27012
27002
|
}
|
|
27013
|
-
this.rawPoints = [];
|
|
27014
27003
|
this.clickPoint = null;
|
|
27015
27004
|
this.setState(BRUSH_TOOL_STATE.INACTIVE);
|
|
27016
27005
|
}
|
package/dist/sdk.d.cts
CHANGED
|
@@ -1327,9 +1327,9 @@ declare const WEAVE_FRAME_NODE_DEFAULT_PROPS: {
|
|
|
1327
1327
|
//#region src/nodes/stroke/types.d.ts
|
|
1328
1328
|
//# sourceMappingURL=constants.d.ts.map
|
|
1329
1329
|
type WeaveStrokeProperties = {
|
|
1330
|
-
|
|
1330
|
+
splineResolution: number;
|
|
1331
1331
|
resamplingSpacing: number;
|
|
1332
|
-
|
|
1332
|
+
cachePixelRatio: number;
|
|
1333
1333
|
transform?: WeaveNodeTransformerProperties;
|
|
1334
1334
|
};
|
|
1335
1335
|
type WeaveStrokeNodeParams = {
|
|
@@ -1349,11 +1349,9 @@ declare class WeaveStrokeNode extends WeaveNode {
|
|
|
1349
1349
|
protected nodeType: string;
|
|
1350
1350
|
constructor(params?: WeaveStrokeNodeParams);
|
|
1351
1351
|
private resamplePoints;
|
|
1352
|
-
private
|
|
1353
|
-
private
|
|
1354
|
-
private
|
|
1355
|
-
private dashSegments;
|
|
1356
|
-
private catmullRomSpline;
|
|
1352
|
+
private getSplinePoints;
|
|
1353
|
+
private drawRibbonWithDash;
|
|
1354
|
+
private drawShape;
|
|
1357
1355
|
onRender(props: WeaveElementAttributes): WeaveElementInstance;
|
|
1358
1356
|
onUpdate(nodeInstance: WeaveElementInstance, nextProps: WeaveElementAttributes): void;
|
|
1359
1357
|
scaleReset(node: Konva.Node): void;
|
|
@@ -1365,9 +1363,9 @@ declare class WeaveStrokeNode extends WeaveNode {
|
|
|
1365
1363
|
//# sourceMappingURL=stroke.d.ts.map
|
|
1366
1364
|
declare const WEAVE_STROKE_NODE_TYPE = "stroke";
|
|
1367
1365
|
declare const WEAVE_STROKE_NODE_DEFAULT_CONFIG: {
|
|
1368
|
-
|
|
1366
|
+
splineResolution: number;
|
|
1369
1367
|
resamplingSpacing: number;
|
|
1370
|
-
|
|
1368
|
+
cachePixelRatio: number;
|
|
1371
1369
|
};
|
|
1372
1370
|
|
|
1373
1371
|
//#endregion
|
|
@@ -1920,7 +1918,6 @@ declare class WeaveBrushToolAction extends WeaveAction {
|
|
|
1920
1918
|
protected container: Konva.Layer | Konva.Node | undefined;
|
|
1921
1919
|
protected measureContainer: Konva.Layer | Konva.Group | undefined;
|
|
1922
1920
|
protected cancelAction: () => void;
|
|
1923
|
-
protected rawPoints: WeaveStrokePoint[];
|
|
1924
1921
|
onPropsChange: undefined;
|
|
1925
1922
|
onInit: undefined;
|
|
1926
1923
|
constructor(params?: WeaveBrushToolActionParams);
|
|
@@ -1930,13 +1927,11 @@ declare class WeaveBrushToolAction extends WeaveAction {
|
|
|
1930
1927
|
strokeWidth: number;
|
|
1931
1928
|
opacity: number;
|
|
1932
1929
|
};
|
|
1933
|
-
private
|
|
1930
|
+
private getEventPressure;
|
|
1934
1931
|
private setupEvents;
|
|
1935
1932
|
private setState;
|
|
1936
1933
|
private getBoundingBox;
|
|
1937
1934
|
private handleStartStroke;
|
|
1938
|
-
private catmullRom1D;
|
|
1939
|
-
private smoothInterpolation;
|
|
1940
1935
|
private handleMovement;
|
|
1941
1936
|
private handleEndStroke;
|
|
1942
1937
|
trigger(cancel: () => void): void;
|