@inditextech/weave-sdk 0.57.0 → 0.58.0

package/dist/sdk.cjs

@@ -17945,6 +17945,73 @@ var WeavePlugin = class {
 //#region src/plugins/nodes-selection/constants.ts
 const WEAVE_NODES_SELECTION_KEY = "nodesSelection";
 const WEAVE_NODES_SELECTION_LAYER_ID = "selectionLayer";
+const WEAVE_NODES_SELECTION_DEFAULT_CONFIG = {
+	selection: {
+		rotationSnaps: [
+			0,
+			45,
+			90,
+			135,
+			180,
+			225,
+			270,
+			315,
+			360
+		],
+		rotationSnapTolerance: 3,
+		ignoreStroke: true,
+		rotateEnabled: true,
+		resizeEnabled: true,
+		flipEnabled: false,
+		keepRatio: true,
+		useSingleNodeRotation: true,
+		shouldOverdrawWholeArea: true,
+		enabledAnchors: [
+			"top-left",
+			"top-center",
+			"top-right",
+			"middle-right",
+			"middle-left",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		],
+		anchorStyleFunc: (anchor) => {
+			anchor.stroke("#27272aff");
+			anchor.cornerRadius(12);
+			if (anchor.hasName("top-center") || anchor.hasName("bottom-center")) {
+				anchor.height(8);
+				anchor.offsetY(4);
+				anchor.width(32);
+				anchor.offsetX(16);
+			}
+			if (anchor.hasName("middle-left") || anchor.hasName("middle-right")) {
+				anchor.height(32);
+				anchor.offsetY(16);
+				anchor.width(8);
+				anchor.offsetX(4);
+			}
+		},
+		borderStroke: "#1a1aff",
+		borderStrokeWidth: 2
+	},
+	hover: { borderStrokeWidth: 2 },
+	selectionArea: {
+		fill: "#1a1aff11",
+		stroke: "#1a1aff",
+		strokeWidth: 1,
+		dash: [12, 4]
+	},
+	panningWhenSelection: {
+		edgeThreshold: 50,
+		minScrollSpeed: 1,
+		maxScrollSpeed: 15
+	},
+	behaviors: {
+		singleSelection: { enabled: true },
+		multipleSelection: { enabled: false }
+	}
+};
 
 //#endregion
 //#region src/plugins/context-menu/constants.ts
@@ -18220,10 +18287,6 @@ function getVisibleNodes(instance, stage, nodeParent, skipNodes, referenceLayer)
 		if (skipNodes.includes(node.getParent()?.getAttrs().nodeId)) return;
 		if (skipNodes.includes(node.getAttrs().id ?? "")) return;
 		if (node.getParent() !== referenceLayer && !node.getParent()?.getAttrs().nodeId) return;
-		if (node.getParent() !== referenceLayer && node.getParent()?.getAttrs().nodeId) {
-			const realNode = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
-			if (realNode && realNode !== referenceLayer) return;
-		}
 		finalVisibleNodes.push(node);
 	});
 	if (nodesSelection) nodesSelection.getTransformer().show();
@@ -18856,77 +18919,19 @@ const NODE_SNAP_VERTICAL = {
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
+	selectionStart = null;
+	panSpeed = {
+		x: 0,
+		y: 0
+	};
+	panDirection = {
+		x: 0,
+		y: 0
+	};
+	panLoopId = null;
 	constructor(params) {
 		super();
-		const { config } = params ?? {};
-		this.config = {
-			selection: {
-				rotationSnaps: [
-					0,
-					45,
-					90,
-					135,
-					180,
-					225,
-					270,
-					315,
-					360
-				],
-				rotationSnapTolerance: 3,
-				ignoreStroke: true,
-				rotateEnabled: true,
-				resizeEnabled: true,
-				flipEnabled: false,
-				keepRatio: true,
-				useSingleNodeRotation: true,
-				shouldOverdrawWholeArea: true,
-				enabledAnchors: [
-					"top-left",
-					"top-center",
-					"top-right",
-					"middle-right",
-					"middle-left",
-					"bottom-left",
-					"bottom-center",
-					"bottom-right"
-				],
-				anchorStyleFunc: (anchor) => {
-					anchor.stroke("#27272aff");
-					anchor.cornerRadius(12);
-					if (anchor.hasName("top-center") || anchor.hasName("bottom-center")) {
-						anchor.height(8);
-						anchor.offsetY(4);
-						anchor.width(32);
-						anchor.offsetX(16);
-					}
-					if (anchor.hasName("middle-left") || anchor.hasName("middle-right")) {
-						anchor.height(32);
-						anchor.offsetY(16);
-						anchor.width(8);
-						anchor.offsetX(4);
-					}
-				},
-				borderStroke: "#1a1aff",
-				borderStrokeWidth: 2,
-				...config?.selection
-			},
-			hover: {
-				borderStrokeWidth: 2,
-				...config?.hover
-			},
-			selectionArea: {
-				fill: "#1a1aff11",
-				stroke: "#1a1aff",
-				strokeWidth: 1,
-				dash: [12, 4],
-				...config?.selectionArea
-			},
-			behaviors: {
-				singleSelection: { enabled: true },
-				multipleSelection: { enabled: false },
-				...config?.behaviors
-			}
-		};
+		this.config = (0, import_merge.default)(WEAVE_NODES_SELECTION_DEFAULT_CONFIG, params?.config ?? {});
 		this.defaultEnabledAnchors = this.config.selection?.enabledAnchors ?? [
 			"top-left",
 			"top-center",
@@ -18952,6 +18957,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.initialized = false;
 		this.enabled = false;
 		this.pointers = {};
+		this.panLoopId = null;
 	}
 	getName() {
 		return WEAVE_NODES_SELECTION_KEY;
@@ -19206,6 +19212,79 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.tr.nodes([]);
 		this.triggerSelectedNodesEvent();
 	}
+	updateSelectionRect() {
+		const stage = this.instance.getStage();
+		this.x2 = stage.getRelativePointerPosition()?.x ?? 0;
+		this.y2 = stage.getRelativePointerPosition()?.y ?? 0;
+		this.getTransformer().nodes([]);
+		this.selectionRectangle.setAttrs({
+			visible: true,
+			x: Math.min(this.x1, this.x2),
+			y: Math.min(this.y1, this.y2),
+			width: Math.abs(this.x2 - this.x1),
+			height: Math.abs(this.y2 - this.y1)
+		});
+	}
+	getSpeedFromEdge(distanceFromEdge) {
+		if (distanceFromEdge < this.config.panningWhenSelection.edgeThreshold) {
+			const factor = 1 - distanceFromEdge / this.config.panningWhenSelection.edgeThreshold;
+			return this.config.panningWhenSelection.minScrollSpeed + (this.config.panningWhenSelection.maxScrollSpeed - this.config.panningWhenSelection.minScrollSpeed) * factor;
+		}
+		return 0;
+	}
+	updatePanDirection() {
+		const stage = this.instance.getStage();
+		const pos = stage.getPointerPosition();
+		const viewWidth = stage.width();
+		const viewHeight = stage.height();
+		if (!pos) return;
+		const distLeft = pos.x;
+		const distRight = viewWidth - pos.x;
+		const distTop = pos.y;
+		const distBottom = viewHeight - pos.y;
+		this.panDirection.x = 0;
+		this.panDirection.y = 0;
+		this.panSpeed = {
+			x: 0,
+			y: 0
+		};
+		if (distLeft < this.config.panningWhenSelection.edgeThreshold) {
+			this.panDirection.x = 1;
+			this.panSpeed.x = this.getSpeedFromEdge(distLeft);
+		} else if (distRight < this.config.panningWhenSelection.edgeThreshold) {
+			this.panDirection.x = -1;
+			this.panSpeed.x = this.getSpeedFromEdge(distRight);
+		}
+		if (distTop < this.config.panningWhenSelection.edgeThreshold) {
+			this.panDirection.y = 1;
+			this.panSpeed.y = this.getSpeedFromEdge(distTop);
+		} else if (distBottom < this.config.panningWhenSelection.edgeThreshold) {
+			this.panDirection.y = -1;
+			this.panSpeed.y = this.getSpeedFromEdge(distBottom);
+		}
+	}
+	stopPanLoop() {
+		if (this.panLoopId) {
+			cancelAnimationFrame(this.panLoopId);
+			this.panLoopId = null;
+		}
+	}
+	panLoop() {
+		const stage = this.instance.getStage();
+		if (this.isAreaSelecting() && (this.panDirection.x !== 0 || this.panDirection.y !== 0)) {
+			const scale = stage.scaleX();
+			const stepX = (this.panSpeed.x || 0) / scale;
+			const stepY = (this.panSpeed.y || 0) / scale;
+			stage.x(stage.x() + this.panDirection.x * stepX);
+			stage.y(stage.y() + this.panDirection.y * stepY);
+			if (this.selectionStart) {
+				this.selectionStart.x += this.panDirection.x * stepX;
+				this.selectionStart.y += this.panDirection.y * stepY;
+			}
+			this.updateSelectionRect();
+		}
+		this.panLoopId = requestAnimationFrame(() => this.panLoop());
+	}
 	setTapStart(e) {
 		this.tapStart = {
 			x: e.evt.clientX,
@@ -19264,18 +19343,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 	}
 	initEvents() {
-		let x1, y1, x2, y2;
 		this.selecting = false;
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("keydown", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
-			if ((e.key === "Backspace" || e.key === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
+			if ((e.code === "Backspace" || e.code === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
 				this.removeSelectedNodes();
 				return;
 			}
 		});
 		stage.container().addEventListener("keyup", (e) => {
-			if (e.key === "Space") this.isSpaceKeyPressed = false;
+			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
@@ -19289,6 +19367,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const selectedGroup = getTargetedNode(this.instance);
 			if (selectedGroup?.getParent() instanceof konva.default.Transformer) {
 				this.selecting = false;
+				this.stopPanLoop();
 				this.hideSelectorArea();
 				return;
 			}
@@ -19299,15 +19378,26 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (isTransformer) return;
 			if (!isStage && !isContainerEmptyArea && isTargetable) {
 				this.selecting = false;
+				this.stopPanLoop();
 				this.hideSelectorArea();
 				this.handleClickOrTap(e);
 				return;
 			}
+			this.panDirection.x = 0;
+			this.panDirection.y = 0;
+			this.panSpeed = {
+				x: 0,
+				y: 0
+			};
 			const intStage = this.instance.getStage();
-			x1 = intStage.getRelativePointerPosition()?.x ?? 0;
-			y1 = intStage.getRelativePointerPosition()?.y ?? 0;
-			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
-			y2 = intStage.getRelativePointerPosition()?.y ?? 0;
+			this.x1 = intStage.getRelativePointerPosition()?.x ?? 0;
+			this.y1 = intStage.getRelativePointerPosition()?.y ?? 0;
+			this.x2 = intStage.getRelativePointerPosition()?.x ?? 0;
+			this.y2 = intStage.getRelativePointerPosition()?.y ?? 0;
+			this.selectionStart = {
+				x: this.x1,
+				y: this.y1
+			};
 			this.selectionRectangle.strokeWidth(this.config.selectionArea.strokeWidth / stage.scaleX());
 			this.selectionRectangle.dash(this.config.selectionArea.dash?.map((d) => d / stage.scaleX()) ?? []);
 			this.selectionRectangle.width(0);
@@ -19315,6 +19405,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selecting = true;
 			this.tr.nodes([]);
 			this.instance.emitEvent("onSelectionState", true);
+			if (!this.panLoopId) this.panLoopId = requestAnimationFrame(() => this.panLoop());
 		});
 		const handleMouseMove = (e) => {
 			const moved = this.checkMoved(e);
@@ -19327,25 +19418,20 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			else this.hideSelectorArea();
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
+				this.stopPanLoop();
 				return;
 			}
 			if (this.isSpaceKeyPressed) return;
 			if (!this.selecting) return;
-			const intStage = this.instance.getStage();
-			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
-			y2 = intStage.getRelativePointerPosition()?.y ?? 0;
-			this.getTransformer().nodes([]);
-			this.selectionRectangle.setAttrs({
-				visible: true,
-				x: Math.min(x1, x2),
-				y: Math.min(y1, y2),
-				width: Math.abs(x2 - x1),
-				height: Math.abs(y2 - y1)
-			});
+			this.updateSelectionRect();
+			this.updatePanDirection();
 		};
 		stage.on("pointermove", handleMouseMove);
+		this.panLoop();
 		stage.on("pointerup", (e) => {
 			this.tr.setAttrs({ listening: true });
+			this.selecting = false;
+			this.stopPanLoop();
 			const moved = this.checkMoved(e);
 			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
@@ -19362,7 +19448,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.hideSelectorArea();
 				return;
 			}
-			this.selecting = false;
 			this.instance.emitEvent("onSelectionState", false);
 			if (this.isDoubleTap) {
 				this.taps = 0;
@@ -19380,6 +19465,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
 			if ((isStage || isContainerEmptyArea) && !moved) {
 				this.selecting = false;
+				this.stopPanLoop();
 				this.hideSelectorArea();
 				this.getSelectionPlugin()?.setSelectedNodes([]);
 				return;
@@ -19390,6 +19476,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
+				this.stopPanLoop();
 				return;
 			}
 			if (!this.selectionRectangle.visible()) {
@@ -19433,6 +19520,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				if (!frameNode.getAttrs().locked) selectedNodes.add(node);
 			});
 			this.selecting = false;
+			this.stopPanLoop();
 			this.tr.nodes([...selectedNodes]);
 			this.handleBehaviors();
 			this.triggerSelectedNodesEvent();
@@ -19474,6 +19562,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const contextMenuPlugin = this.getContextMenuPlugin();
 		if (contextMenuPlugin?.isContextMenuVisible()) {
 			this.selecting = false;
+			this.stopPanLoop();
 			return;
 		}
 		this.hideHoverState();
@@ -19543,11 +19632,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (nodesSelected > 1 && !this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
 		if (nodesSelected > 1 && this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
 		let transformerAttrs = { ...this.config.selection };
-		const currentAttrs = this.tr.getAttrs();
-		Object.keys(currentAttrs).forEach((key) => {
-			if (["rotationSnaps", "enabledAnchors"].includes(key)) this.tr?.setAttr(key, []);
-			else this.tr?.setAttr(key, void 0);
-		});
+		if (this.tr && this.tr.nodes().length > 0) {
+			const currentAttrs = this.tr.getAttrs();
+			Object.keys(currentAttrs).forEach((key) => {
+				if (["rotationSnaps", "enabledAnchors"].includes(key)) this.tr.setAttr(key, []);
+				else this.tr.setAttr(key, void 0);
+			});
+		}
 		if (nodesSelected === 1) {
 			transformerAttrs = (0, import_merge.default)(transformerAttrs, nodes[0].getTransformerProperties());
 			transformerAttrs.enabledAnchors = nodes[0].allowedAnchors();
@@ -19557,8 +19648,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			for (const node of nodes) anchorsArrays.push(node.allowedAnchors());
 			transformerAttrs.enabledAnchors = intersectArrays(anchorsArrays);
 		}
-		this.tr?.setAttrs(transformerAttrs);
-		this.tr?.forceUpdate();
+		if (this.tr && this.tr.nodes().length > 0) {
+			this.tr.setAttrs(transformerAttrs);
+			this.tr.forceUpdate();
+		}
 	}
 	setSelectedNodes(nodes) {
 		this.tr.setNodes(nodes);
@@ -21930,7 +22023,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.57.0";
+var version = "0.58.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25095,8 +25188,7 @@ var WeaveFrameNode = class extends WeaveNode {
 const WEAVE_STROKE_NODE_TYPE = "stroke";
 const WEAVE_STROKE_NODE_DEFAULT_CONFIG = {
 	splineResolution: 8,
-	resamplingSpacing: 2,
-	cachePixelRatio: 4
+	resamplingSpacing: 2
 };
 
 //#endregion
@@ -25258,7 +25350,6 @@ 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() {
@@ -25268,18 +25359,14 @@ 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();
 	}
+	getZoomPlugin() {
+		const zoomPlugin = this.instance.getPlugin("stageZoom");
+		return zoomPlugin;
+	}
 	scaleReset(node) {
 		const strokeNode = node;
 		const oldPoints = [...strokeNode.getAttrs().strokeElements];
@@ -26909,8 +26996,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				y: 0,
 				width: 0,
 				height: 0,
-				strokeElements: newStrokeElements,
-				cacheStroke: false
+				strokeElements: newStrokeElements
 			});
 			const nodeInstance = nodeHandler.onRender(node.props);
 			this.measureContainer?.add(nodeInstance);
@@ -26958,8 +27044,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 					height: box.height,
 					x: box.x,
 					y: box.y,
-					strokeElements: newStrokeElements,
-					cacheStroke: true
+					strokeElements: newStrokeElements
 				});
 				const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
 				if (realNode) realNode.destroy();
@@ -28571,7 +28656,8 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			if (activeAction === MOVE_TOOL_ACTION_NAME) this.moveToolActive = true;
 			if (e.evt.pointerType === "mouse" && e.evt.buttons === 1) this.isMouseLeftButtonPressed = true;
 			if (e.evt.pointerType === "mouse" && e.evt.buttons === 4) this.isMouseMiddleButtonPressed = true;
-			if (this.enabled && (this.isSpaceKeyPressed || this.moveToolActive && this.isMouseLeftButtonPressed || this.isMouseMiddleButtonPressed)) this.enableMove = true;
+			const isTouchOrPen = ["touch", "pen"].includes(e.evt.pointerType);
+			if (this.enabled && (this.isSpaceKeyPressed || this.moveToolActive && (this.isMouseLeftButtonPressed || isTouchOrPen) || this.isMouseMiddleButtonPressed)) this.enableMove = true;
 			if (this.enableMove) {
 				this.isDragging = true;
 				lastPos = stage.getPointerPosition();
@@ -28583,6 +28669,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			lastPos = null;
 		});
 		const handleMouseMove = (e) => {
+			if (["touch", "pen"].includes(e.evt.pointerType) && e.evt.buttons !== 1) return;
 			this.pointers.set(e.evt.pointerId, {
 				x: e.evt.clientX,
 				y: e.evt.clientY
@@ -30071,6 +30158,7 @@ exports.WEAVE_LAYER_NODE_TYPE = WEAVE_LAYER_NODE_TYPE
 exports.WEAVE_LINE_NODE_TYPE = WEAVE_LINE_NODE_TYPE
 exports.WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY = WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY
 exports.WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY = WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY
+exports.WEAVE_NODES_SELECTION_DEFAULT_CONFIG = WEAVE_NODES_SELECTION_DEFAULT_CONFIG
 exports.WEAVE_NODES_SELECTION_KEY = WEAVE_NODES_SELECTION_KEY
 exports.WEAVE_NODES_SELECTION_LAYER_ID = WEAVE_NODES_SELECTION_LAYER_ID
 exports.WEAVE_RECTANGLE_NODE_TYPE = WEAVE_RECTANGLE_NODE_TYPE