@inditextech/weave-sdk 0.56.2 → 0.57.0

package/dist/sdk.cjs

@@ -21930,7 +21930,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.56.2";
+var version = "0.57.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25094,9 +25094,9 @@ var WeaveFrameNode = class extends WeaveNode {
 //#region src/nodes/stroke/constants.ts
 const WEAVE_STROKE_NODE_TYPE = "stroke";
 const WEAVE_STROKE_NODE_DEFAULT_CONFIG = {
-	smoothingFactor: .1,
+	splineResolution: 8,
 	resamplingSpacing: 2,
-	pressureScale: 1
+	cachePixelRatio: 4
 };
 
 //#endregion
@@ -25108,143 +25108,147 @@ var WeaveStrokeNode = class extends WeaveNode {
 		const { config } = params ?? {};
 		this.config = (0, import_merge.default)(WEAVE_STROKE_NODE_DEFAULT_CONFIG, config);
 	}
-	resamplePoints(pts, spacing) {
+	resamplePoints(pts, minDist = 2) {
 		if (pts.length < 2) return pts;
-		const resampled = [pts[0]];
+		const result = [pts[0]];
+		let last = pts[0];
 		for (let i = 1; i < pts.length; i++) {
-			let last = resampled[resampled.length - 1];
-			const current = pts[i];
-			const segDist = this.dist(last, current);
-			if (segDist === 0) continue;
-			let remaining = segDist;
-			while (remaining >= spacing) {
-				const t = spacing / segDist;
-				const newPt = this.lerpPoint(last, current, t);
-				resampled.push(newPt);
-				last = newPt;
-				remaining = this.dist(last, current);
-			}
-		}
-		return resampled;
-	}
-	dist(a, b) {
-		const dx = b.x - a.x, dy = b.y - a.y;
-		return Math.hypot(dx, dy);
-	}
-	lerpPoint(a, b, t) {
-		return {
-			x: a.x + (b.x - a.x) * t,
-			y: a.y + (b.y - a.y) * t,
-			pressure: a.pressure + (b.pressure - a.pressure) * t
-		};
-	}
-	buildPolygonFromPressure(pts, baseWidth) {
-		if (pts.length < 2) return [];
-		const left = [];
-		const right = [];
-		for (let i = 0; i < pts.length; i++) {
-			const p = pts[i];
-			const w = (baseWidth + p.pressure * this.config.pressureScale) / 2;
-			let dx, dy;
-			if (i === 0) {
-				dx = pts[1].x - p.x;
-				dy = pts[1].y - p.y;
-			} else if (i === pts.length - 1) {
-				dx = p.x - pts[i - 1].x;
-				dy = p.y - pts[i - 1].y;
-			} else {
-				dx = pts[i + 1].x - pts[i - 1].x;
-				dy = pts[i + 1].y - pts[i - 1].y;
-			}
-			const len = Math.hypot(dx, dy) || 1;
-			const nx = -dy / len;
-			const ny = dx / len;
-			left.push({
-				x: p.x + nx * w,
-				y: p.y + ny * w
-			});
-			right.push({
-				x: p.x - nx * w,
-				y: p.y - ny * w
-			});
+			const dx = pts[i].x - last.x;
+			const dy = pts[i].y - last.y;
+			if (dx * dx + dy * dy >= minDist * minDist) {
+				result.push(pts[i]);
+				last = pts[i];
+			}
 		}
-		const reversed = right.toReversed();
-		return left.concat(reversed);
+		return result;
 	}
-	dashSegments(pts, pattern) {
-		const segments = [];
-		let patIndex = 0;
-		let patDist = pattern[patIndex];
-		let draw = true;
-		let segPts = [pts[0]];
-		for (let i = 1; i < pts.length; i++) {
-			let d = this.dist(pts[i - 1], pts[i]);
-			while (d >= patDist) {
-				const t = patDist / d;
-				const mid = this.lerpPoint(pts[i - 1], pts[i], t);
-				segPts.push(mid);
-				if (draw) segments.push(segPts);
-				draw = !draw;
-				patIndex = (patIndex + 1) % pattern.length;
-				patDist = pattern[patIndex];
-				segPts = [mid];
-				d -= patDist;
-				pts[i - 1] = mid;
-			}
-			segPts.push(pts[i]);
-			patDist -= d;
-		}
-		if (draw && segPts.length > 1) segments.push(segPts);
-		return segments;
-	}
-	catmullRomSpline(pts, spacing) {
-		const curvePoints = [];
-		for (let i = 0; i < pts.length - 1; i++) {
-			const p0 = pts[i - 1] || pts[i];
-			const p1 = pts[i];
-			const p2 = pts[i + 1];
-			const p3 = pts[i + 2] || p2;
-			for (let t = 0; t < 1; t += spacing) {
-				const t2 = t * t;
-				const t3 = t2 * t;
-				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);
-				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);
-				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);
-				curvePoints.push({
+	getSplinePoints(pts, resolution = 8) {
+		const result = [];
+		for (let i = -1; i < pts.length - 2; i++) {
+			const p0 = pts[Math.max(i, 0)];
+			const p1 = pts[i + 1];
+			const p2 = pts[i + 2];
+			const p3 = pts[Math.min(i + 3, pts.length - 1)];
+			for (let t = 0; t < 1; t += 1 / resolution) {
+				const tt = t * t;
+				const ttt = tt * t;
+				const q1 = -ttt + 2 * tt - t;
+				const q2 = 3 * ttt - 5 * tt + 2;
+				const q3 = -3 * ttt + 4 * tt + t;
+				const q4 = ttt - tt;
+				const x = (q1 * p0.x + q2 * p1.x + q3 * p2.x + q4 * p3.x) / 2;
+				const y = (q1 * p0.y + q2 * p1.y + q3 * p2.y + q4 * p3.y) / 2;
+				const pressure = (q1 * p0.pressure + q2 * p1.pressure + q3 * p2.pressure + q4 * p3.pressure) / 2;
+				result.push({
 					x,
 					y,
 					pressure
 				});
 			}
 		}
-		return curvePoints;
+		result.push(pts[pts.length - 1]);
+		return result;
+	}
+	drawRibbonWithDash(ctx, pts, baseW, color, dash) {
+		if (pts.length < 2) return;
+		const filtered = this.resamplePoints(pts, 2);
+		const centerline = this.getSplinePoints(filtered, 8);
+		let dashIndex = 0;
+		let dashOn = true;
+		let dashRemaining = dash.length ? dash[0] : Infinity;
+		let leftSide = [];
+		let rightSide = [];
+		for (let i = 0; i < centerline.length - 1; i++) {
+			const p0 = centerline[i];
+			const p1 = centerline[i + 1];
+			const dx = p1.x - p0.x;
+			const dy = p1.y - p0.y;
+			const segLen = Math.sqrt(dx * dx + dy * dy) || 1;
+			const nx = -dy / segLen;
+			const ny = dx / segLen;
+			const w0 = baseW * p0.pressure / 2;
+			const w1 = baseW * p1.pressure / 2;
+			let traveled = 0;
+			while (traveled < segLen) {
+				const step = Math.min(dashRemaining, segLen - traveled);
+				const t0 = traveled / segLen;
+				const t1 = (traveled + step) / segLen;
+				const x0 = p0.x + dx * t0;
+				const y0 = p0.y + dy * t0;
+				const x1 = p0.x + dx * t1;
+				const y1 = p0.y + dy * t1;
+				const pw0 = w0 + (w1 - w0) * t0;
+				const pw1 = w0 + (w1 - w0) * t1;
+				if (dashOn) {
+					leftSide.push({
+						x: x0 + nx * pw0,
+						y: y0 + ny * pw0,
+						pressure: 1
+					});
+					rightSide.push({
+						x: x0 - nx * pw0,
+						y: y0 - ny * pw0,
+						pressure: 1
+					});
+					leftSide.push({
+						x: x1 + nx * pw1,
+						y: y1 + ny * pw1,
+						pressure: 1
+					});
+					rightSide.push({
+						x: x1 - nx * pw1,
+						y: y1 - ny * pw1,
+						pressure: 1
+					});
+				}
+				dashRemaining -= step;
+				if (dashRemaining <= 0) {
+					if (dashOn && leftSide.length && rightSide.length) {
+						const smoothLeft = this.getSplinePoints(leftSide, 4);
+						const smoothRight = this.getSplinePoints(rightSide.reverse(), 4);
+						ctx.beginPath();
+						ctx.fillStyle = color;
+						ctx.moveTo(smoothLeft[0].x, smoothLeft[0].y);
+						for (const p of smoothLeft) ctx.lineTo(p.x, p.y);
+						for (const p of smoothRight) ctx.lineTo(p.x, p.y);
+						ctx.closePath();
+						ctx.fill();
+					}
+					leftSide = [];
+					rightSide = [];
+					dashOn = !dashOn;
+					dashIndex = (dashIndex + 1) % dash.length;
+					dashRemaining = dash[dashIndex];
+				}
+				traveled += step;
+			}
+		}
+		if (dashOn && leftSide.length && rightSide.length) {
+			const smoothLeft = this.getSplinePoints(leftSide, 4);
+			const smoothRight = this.getSplinePoints(rightSide.reverse(), 4);
+			ctx.beginPath();
+			ctx.fillStyle = color;
+			ctx.moveTo(smoothLeft[0].x, smoothLeft[0].y);
+			for (const p of smoothLeft) ctx.lineTo(p.x, p.y);
+			for (const p of smoothRight) ctx.lineTo(p.x, p.y);
+			ctx.closePath();
+			ctx.fill();
+		}
+	}
+	drawShape(ctx, shape) {
+		const strokeElements = shape.getAttrs().strokeElements;
+		if (strokeElements.length === 0) return;
+		const color = shape.getAttrs().stroke ?? "black";
+		const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
+		const dash = shape.getAttrs().dash ?? [];
+		this.drawRibbonWithDash(ctx, strokeElements, strokeWidth, color, dash);
 	}
 	onRender(props) {
 		const stroke = new konva.default.Shape({
 			...props,
 			name: "node",
 			sceneFunc: (ctx, shape) => {
-				const strokeElements = shape.getAttrs().strokeElements;
-				if (strokeElements.length === 0) return;
-				if (strokeElements.length < 2) return;
-				const color = shape.getAttrs().stroke ?? "black";
-				const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
-				const smoothPoints = this.catmullRomSpline(strokeElements, this.config.smoothingFactor);
-				const evenlySpaced = this.resamplePoints(smoothPoints, this.config.resamplingSpacing);
-				const dashes = this.dashSegments(evenlySpaced, shape.getAttrs().dash || []);
-				dashes.forEach((segment) => {
-					const poly = this.buildPolygonFromPressure(segment, strokeWidth);
-					if (!poly.length) return;
-					ctx.beginPath();
-					ctx.moveTo(poly[0].x, poly[0].y);
-					for (let i = 1; i < poly.length; i++) ctx.lineTo(poly[i].x, poly[i].y);
-					ctx.strokeStyle = color;
-					ctx.lineCap = shape.getAttrs().lineCap ?? "butt";
-					ctx.lineJoin = shape.getAttrs().lineJoin ?? "miter";
-					ctx.closePath();
-					ctx.fillStyle = color;
-					ctx.fill();
-				});
+				this.drawShape(ctx, shape);
 			},
 			dashEnabled: false,
 			hitFunc: (context, shape) => {
@@ -25254,6 +25258,7 @@ var WeaveStrokeNode = class extends WeaveNode {
 				context.fillStrokeShape(shape);
 			}
 		});
+		if (props.cacheStroke) stroke.cache({ pixelRatio: this.config.cachePixelRatio });
 		this.setupDefaultNodeAugmentation(stroke);
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
 		stroke.getTransformerProperties = function() {
@@ -25263,7 +25268,15 @@ var WeaveStrokeNode = class extends WeaveNode {
 		return stroke;
 	}
 	onUpdate(nodeInstance, nextProps) {
+		const actAttrs = nodeInstance.getAttrs();
+		if (actAttrs.stroke !== nextProps.stroke || actAttrs.strokeWidth !== nextProps.strokeWidth || actAttrs.dash !== nextProps.dash) nodeInstance.clearCache();
 		nodeInstance.setAttrs({ ...nextProps });
+		if (nextProps.cacheStroke) {
+			nodeInstance.sceneFunc((ctx, shape) => {
+				this.drawShape(ctx, shape);
+			});
+			nodeInstance.cache({ pixelRatio: this.config.cachePixelRatio });
+		}
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
@@ -26781,7 +26794,6 @@ const BRUSH_TOOL_DEFAULT_CONFIG = { interpolationSteps: 10 };
 //#region src/actions/brush-tool/brush-tool.ts
 var WeaveBrushToolAction = class extends WeaveAction {
 	initialized = false;
-	rawPoints = [];
 	onPropsChange = void 0;
 	onInit = void 0;
 	constructor(params) {
@@ -26805,10 +26817,9 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			opacity: 1
 		};
 	}
-	getPointPressure(e) {
-		let pressure = 1;
-		if (e.evt instanceof PointerEvent && e.evt.pointerType === "pen") pressure = e.evt.pressure;
-		return pressure;
+	getEventPressure(e) {
+		if (e.evt.pointerType && e.evt.pointerType === "pen") return e.evt.pressure || .5;
+		return .5;
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
@@ -26827,30 +26838,27 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const handlePointerDown = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
-			const pointPressure = this.getPointPressure(e);
+			const pointPressure = this.getEventPressure(e);
 			this.handleStartStroke(pointPressure);
 			e.evt.stopPropagation();
 		};
-		if (isIOS()) stage.on("touchstart", handlePointerDown);
-		else stage.on("pointerdown", handlePointerDown);
+		stage.on("pointerdown", handlePointerDown);
 		const handlePointerMove = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
 			stage.container().style.cursor = "crosshair";
-			const pointPressure = this.getPointPressure(e);
+			const pointPressure = this.getEventPressure(e);
 			this.handleMovement(pointPressure);
 			e.evt.stopPropagation();
 		};
-		if (isIOS()) stage.on("touchmove", handlePointerMove);
-		else stage.on("pointermove", handlePointerMove);
+		stage.on("pointermove", handlePointerMove);
 		const handlePointerUp = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
 			this.handleEndStroke();
 			e.evt.stopPropagation();
 		};
-		if (isIOS()) stage.on("touchend", handlePointerUp);
-		else stage.on("pointerup", handlePointerUp);
+		stage.on("pointerup", handlePointerUp);
 		this.initialized = true;
 	}
 	setState(state) {
@@ -26901,31 +26909,14 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				y: 0,
 				width: 0,
 				height: 0,
-				strokeElements: newStrokeElements
+				strokeElements: newStrokeElements,
+				cacheStroke: false
 			});
 			const nodeInstance = nodeHandler.onRender(node.props);
 			this.measureContainer?.add(nodeInstance);
 		}
 		this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
 	}
-	catmullRom1D(p0, p1, p2, p3, t) {
-		const t2 = t * t;
-		const t3 = t2 * t;
-		return .5 * (2 * p1 + (-p0 + p2) * t + (2 * p0 - 5 * p1 + 4 * p2 - p3) * t2 + (-p0 + 3 * p1 - 3 * p2 + p3) * t3);
-	}
-	smoothInterpolation(last4Points, steps) {
-		const [p0, p1, p2, p3] = last4Points;
-		const pts = [];
-		for (let i = 0; i <= steps; i++) {
-			const t = i / steps;
-			pts.push({
-				x: this.catmullRom1D(p0.x, p1.x, p2.x, p3.x, t),
-				y: this.catmullRom1D(p0.y, p1.y, p2.y, p3.y, t),
-				pressure: this.catmullRom1D(p0.pressure, p1.pressure, p2.pressure, p3.pressure, t)
-			});
-		}
-		return pts;
-	}
 	handleMovement(pressure) {
 		if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
@@ -26936,16 +26927,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				y: mousePoint.y - tempStroke.y(),
 				pressure
 			};
-			this.rawPoints.push(currentPoint);
-			let newStrokeElements = [...tempStroke.getAttrs().strokeElements];
-			const smoothPoints = [];
-			if (isIOS()) if (this.rawPoints.length >= 4) {
-				const last4 = this.rawPoints.slice(-4);
-				const interpolatedPts = this.smoothInterpolation(last4, this.config.interpolationSteps);
-				smoothPoints.push(...interpolatedPts);
-			} else smoothPoints.push(currentPoint);
-			else smoothPoints.push(currentPoint);
-			newStrokeElements = [...newStrokeElements, ...smoothPoints];
+			const newStrokeElements = [...tempStroke.getAttrs().strokeElements, currentPoint];
 			const box = this.getBoundingBox(newStrokeElements);
 			tempStroke.setAttrs({
 				width: box.width,
@@ -26976,13 +26958,13 @@ var WeaveBrushToolAction = class extends WeaveAction {
 					height: box.height,
 					x: box.x,
 					y: box.y,
-					strokeElements: newStrokeElements
+					strokeElements: newStrokeElements,
+					cacheStroke: true
 				});
 				const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
 				if (realNode) realNode.destroy();
 				if (tempStroke.getAttrs().strokeElements.length >= 3) this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
 			}
-			this.rawPoints = [];
 			this.clickPoint = null;
 			stage.container().style.cursor = "crosshair";
 			stage.container().tabIndex = 1;
@@ -27018,7 +27000,6 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			if (node) selectionPlugin.setSelectedNodes([node]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
-		this.rawPoints = [];
 		this.clickPoint = null;
 		this.setState(BRUSH_TOOL_STATE.INACTIVE);
 	}

package/dist/sdk.d.cts

@@ -1327,9 +1327,9 @@ declare const WEAVE_FRAME_NODE_DEFAULT_PROPS: {
 //#region src/nodes/stroke/types.d.ts
 //# sourceMappingURL=constants.d.ts.map
 type WeaveStrokeProperties = {
-  smoothingFactor: number;
+  splineResolution: number;
   resamplingSpacing: number;
-  pressureScale: number;
+  cachePixelRatio: number;
   transform?: WeaveNodeTransformerProperties;
 };
 type WeaveStrokeNodeParams = {
@@ -1349,11 +1349,9 @@ declare class WeaveStrokeNode extends WeaveNode {
   protected nodeType: string;
   constructor(params?: WeaveStrokeNodeParams);
   private resamplePoints;
-  private dist;
-  private lerpPoint;
-  private buildPolygonFromPressure;
-  private dashSegments;
-  private catmullRomSpline;
+  private getSplinePoints;
+  private drawRibbonWithDash;
+  private drawShape;
   onRender(props: WeaveElementAttributes): WeaveElementInstance;
   onUpdate(nodeInstance: WeaveElementInstance, nextProps: WeaveElementAttributes): void;
   scaleReset(node: Konva.Node): void;
@@ -1365,9 +1363,9 @@ declare class WeaveStrokeNode extends WeaveNode {
 //# sourceMappingURL=stroke.d.ts.map
 declare const WEAVE_STROKE_NODE_TYPE = "stroke";
 declare const WEAVE_STROKE_NODE_DEFAULT_CONFIG: {
-  smoothingFactor: number;
+  splineResolution: number;
   resamplingSpacing: number;
-  pressureScale: number;
+  cachePixelRatio: number;
 };
 
 //#endregion
@@ -1920,7 +1918,6 @@ declare class WeaveBrushToolAction extends WeaveAction {
   protected container: Konva.Layer | Konva.Node | undefined;
   protected measureContainer: Konva.Layer | Konva.Group | undefined;
   protected cancelAction: () => void;
-  protected rawPoints: WeaveStrokePoint[];
   onPropsChange: undefined;
   onInit: undefined;
   constructor(params?: WeaveBrushToolActionParams);
@@ -1930,13 +1927,11 @@ declare class WeaveBrushToolAction extends WeaveAction {
     strokeWidth: number;
     opacity: number;
   };
-  private getPointPressure;
+  private getEventPressure;
   private setupEvents;
   private setState;
   private getBoundingBox;
   private handleStartStroke;
-  private catmullRom1D;
-  private smoothInterpolation;
   private handleMovement;
   private handleEndStroke;
   trigger(cancel: () => void): void;