@inditextech/weave-sdk 0.73.1 → 0.74.1

package/dist/sdk.cjs

@@ -18321,6 +18321,14 @@ function isIOS() {
 	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.userAgent.includes("Mac") && "ontouchend" in document;
 }
 const isServer = () => typeof window === "undefined";
+const getPositionRelativeToContainerOnPosition = (instance) => {
+	let position = instance.getStage().getRelativePointerPosition();
+	if (!position) return position;
+	const container = containerOverCursor(instance, [], position);
+	position = container?.getRelativePointerPosition();
+	if (!position) return position;
+	return position;
+};
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -18951,6 +18959,14 @@ const WEAVE_GRID_DEFAULT_MAJOR_EVERY = 10;
 const WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS = 250;
 const WEAVE_GRID_LAYER_ID = "gridLayer";
 
+//#endregion
+//#region src/plugins/stage-panning/constants.ts
+const WEAVE_STAGE_PANNING_KEY = "stagePanning";
+const WEAVE_STAGE_PANNING_DEFAULT_CONFIG = {
+	edgePanOffset: 50,
+	edgePanSpeed: 10
+};
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -19119,11 +19135,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return;
 			}
 			e.cancelBubble = true;
-			const selectedNodes = tr.nodes();
-			for (let i = 0; i < selectedNodes.length; i++) {
-				const node = selectedNodes[i];
-				node.updatePosition(node.getAbsolutePosition());
-			}
 			tr.forceUpdate();
 		});
 		const handleDragMove = (e) => {
@@ -19131,6 +19142,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				x: e.target.x(),
 				y: e.target.y()
 			};
+			e.cancelBubble = true;
 			if (initialPos) {
 				const moved = this.checkMovedDrag(initialPos, actualPos);
 				if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
@@ -19142,7 +19154,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return;
 			}
 			this.didMove = true;
-			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
 			let selectionContainsFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
@@ -19161,6 +19172,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("dragend", (e) => {
 			if (!this.didMove) return;
 			e.cancelBubble = true;
+			this.instance.getCloningManager().cleanupClones();
+			this.getStagePanningPlugin()?.cleanupEdgeMoveIntervals();
 			const selectedNodes = tr.nodes();
 			let selectionContainsFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
@@ -19196,6 +19209,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const promises = [];
 				for (let i = 0; i < selectedNodes.length; i++) {
 					const nodeHandler = this.instance.getNodeHandler(selectedNodes[i].getAttrs().nodeType);
+					selectedNodes[i].setAttrs({ isCloned: void 0 });
 					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(selectedNodes[i]));
 					promises.push(nodeUpdatePromise(selectedNodes[i]));
 				}
@@ -19407,7 +19421,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		stage.container().addEventListener("keydown", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
 			if ((e.code === "Backspace" || e.code === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
-				this.removeSelectedNodes();
+				Promise.resolve().then(() => {
+					this.removeSelectedNodes();
+				});
 				return;
 			}
 		});
@@ -19763,6 +19779,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
 	}
+	getStagePanningPlugin() {
+		const stagePanning = this.instance.getPlugin(WEAVE_STAGE_PANNING_KEY);
+		return stagePanning;
+	}
 	getSelectorConfig() {
 		return this.config.selection;
 	}
@@ -20336,73 +20356,127 @@ var WeaveNode = class {
 				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
 				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
 			});
+			const stage = this.instance.getStage();
+			let originalPosition = null;
+			this.instance.addEventListener("onSelectionState", (state) => {
+				const nodesSelectionPlugin = this.getSelectionPlugin();
+				const selectedNodes = nodesSelectionPlugin?.getSelectedNodes() ?? [];
+				if (!state && selectedNodes?.some((n) => n.getAttrs().id === node.getAttrs().id)) originalPosition = node.getAbsolutePosition();
+			});
+			node.on("mousedown", (e) => {
+				const nodeTarget = e.target;
+				originalPosition = nodeTarget.getAbsolutePosition();
+			});
 			node.on("dragstart", (e) => {
+				const nodeTarget = e.target;
 				this.didMove = false;
 				if (e.evt?.buttons === 0) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
-				const stage = this.instance.getStage();
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
 				if (isErasing) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
-				this.instance.emitEvent("onDrag", e.target);
+				this.instance.emitEvent("onDrag", nodeTarget);
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
+				}
+				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
+				if (realNodeTarget.getAttrs().isCloned) return;
+				if (e.evt?.altKey) {
+					nodeTarget.setAttrs({ isCloneOrigin: true });
+					nodeTarget.setAttrs({ isCloned: false });
+					nodeTarget.stopDrag(e.evt);
+					e.cancelBubble = true;
+					const clone = this.instance.getCloningManager().cloneNode(realNodeTarget);
+					if (clone && !this.instance.getCloningManager().isClone(clone)) {
+						clone.setAttrs({ isCloneOrigin: false });
+						clone.setAttrs({ isCloned: true });
+						this.instance.getCloningManager().addClone(clone);
+					}
+					stage.setPointersPositions(e.evt);
+					const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+					nodesSelectionPlugin?.setSelectedNodes([]);
+					requestAnimationFrame(() => {
+						nodesSelectionPlugin?.setSelectedNodes(this.instance.getCloningManager().getClones());
+						clone?.startDrag(e.evt);
+					});
 				}
 			});
 			const handleDragMove = (e) => {
+				const nodeTarget = e.target;
+				e.cancelBubble = true;
 				if (e.evt?.buttons === 0) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
 				this.didMove = true;
-				const stage = this.instance.getStage();
+				const stage$1 = this.instance.getStage();
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
 				if (isErasing) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
-				if (stage.isMouseWheelPressed()) {
+				if (stage$1.isMouseWheelPressed()) {
 					e.cancelBubble = true;
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
-				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
+				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
+				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
-					const layerToMove = containerOverCursor(this.instance, [node]);
-					if (layerToMove && !hasFrames(node) && node.isDragging()) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+					const layerToMove = containerOverCursor(this.instance, [realNodeTarget]);
+					if (layerToMove && !hasFrames(realNodeTarget) && realNodeTarget.isDragging()) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
+				const nodeTarget = e.target;
+				e.cancelBubble = true;
+				if (nodeTarget.getAttrs().isCloneOrigin && originalPosition) {
+					nodeTarget.setAbsolutePosition(originalPosition);
+					nodeTarget.setAttrs({ isCloneOrigin: void 0 });
+					nodeTarget.setAttrs({ isCloned: void 0 });
+					originalPosition = null;
+					return;
+				}
 				if (!this.didMove) return;
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
 				if (isErasing) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
 				this.instance.emitEvent("onDrag", null);
-				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
+				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
+				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
 					const nodesDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
 					if (nodesEdgeSnappingPlugin) nodesEdgeSnappingPlugin.cleanupGuidelines();
 					if (nodesDistanceSnappingPlugin) nodesDistanceSnappingPlugin.cleanupGuidelines();
-					const layerToMove = containerOverCursor(this.instance, [node]);
+					const layerToMove = containerOverCursor(this.instance, [realNodeTarget]);
 					let containerToMove = this.instance.getMainLayer();
 					if (layerToMove) containerToMove = layerToMove;
 					let moved = false;
-					if (containerToMove && !hasFrames(node)) moved = moveNodeToContainer(this.instance, e.target, containerToMove);
+					if (containerToMove && !hasFrames(node)) moved = moveNodeToContainer(this.instance, realNodeTarget, containerToMove);
+					if (realNodeTarget.getAttrs().isCloned) {
+						this.instance.getCloningManager().removeClone(realNodeTarget);
+						originalPosition = realNodeTarget.getAbsolutePosition();
+					}
 					if (containerToMove) containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-					if (!moved) this.instance.updateNode(this.serialize(node));
+					if (!moved) this.instance.updateNode(this.serialize(realNodeTarget));
 				}
+				nodeTarget.setAttrs({ isCloned: void 0 });
+				nodeTarget.setAttrs({ isCloneOrigin: void 0 });
+				realNodeTarget.setAttrs({ isCloned: void 0 });
+				realNodeTarget.setAttrs({ isCloneOrigin: void 0 });
+				originalPosition = realNodeTarget.getAbsolutePosition();
 			});
 			node.handleMouseover = () => {
-				const stage = this.instance.getStage();
+				const stage$1 = this.instance.getStage();
 				const activeAction = this.instance.getActiveAction();
 				const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
 				const realNode = this.instance.getInstanceRecursive(node);
@@ -20410,24 +20484,24 @@ var WeaveNode = class {
 				const isLocked$1 = realNode.getAttrs().locked ?? false;
 				if ([MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) return;
 				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "default";
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "default";
 				}
-				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "pointer";
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage$1.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "pointer";
 				}
-				if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "grab";
+				if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage$1.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "grab";
 				}
 				if (this.isPasting()) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "crosshair";
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "crosshair";
 				}
 			};
 			node.on("pointerover", (e) => {
-				const stage = this.instance.getStage();
+				const stage$1 = this.instance.getStage();
 				const activeAction = this.instance.getActiveAction();
 				const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
 				const realNode = this.instance.getInstanceRecursive(node);
@@ -20435,13 +20509,13 @@ var WeaveNode = class {
 				const isLocked$1 = realNode.getAttrs().locked ?? false;
 				if ([MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) return;
 				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "default";
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "default";
 					e.cancelBubble = true;
 				}
-				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "pointer";
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage$1.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "pointer";
 					this.setHoverState(realNode);
 					e.cancelBubble = true;
 				}
@@ -20450,8 +20524,8 @@ var WeaveNode = class {
 					e.cancelBubble = true;
 				}
 				if (this.isPasting()) {
-					const stage$1 = this.instance.getStage();
-					stage$1.container().style.cursor = "crosshair";
+					const stage$2 = this.instance.getStage();
+					stage$2.container().style.cursor = "crosshair";
 					e.cancelBubble = true;
 				}
 			});
@@ -20556,6 +20630,10 @@ var WeaveNode = class {
 		};
 		return (0, import_merge.default)(transformProperties, nodeTransformConfig ?? {});
 	}
+	getNodesSelectionPlugin() {
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		return nodesSelectionPlugin;
+	}
 	getNodesEdgeSnappingPlugin() {
 		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
@@ -20570,6 +20648,17 @@ var WeaveNode = class {
 			y: 0
 		};
 	}
+	getRealSelectedNode(nodeTarget) {
+		const stage = this.instance.getStage();
+		let realNodeTarget = nodeTarget;
+		if (nodeTarget.getParent() instanceof konva.default.Transformer) {
+			const mousePos = stage.getPointerPosition();
+			const intersections = stage.getAllIntersections(mousePos);
+			const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
+			if (nodesIntersected.length > 0) realNodeTarget = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
+		}
+		return realNodeTarget;
+	}
 };
 
 //#endregion
@@ -21390,6 +21479,7 @@ var WeaveTargetingManager = class {
 //#endregion
 //#region src/managers/cloning.ts
 var WeaveCloningManager = class {
+	clones = [];
 	constructor(instance) {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger("cloning-manager");
@@ -21548,6 +21638,42 @@ var WeaveCloningManager = class {
 		}
 		newGroup.destroy();
 	}
+	recursivelyUpdateKeys(nodes) {
+		for (const child of nodes) {
+			const newNodeId = v4_default();
+			child.key = newNodeId;
+			child.props.id = newNodeId;
+			if (child.props.children) this.recursivelyUpdateKeys(child.props.children);
+		}
+	}
+	cloneNode(targetNode) {
+		const nodeHandler = this.instance.getNodeHandler(targetNode.getAttrs().nodeType);
+		if (!nodeHandler) return void 0;
+		const parent = targetNode.getParent();
+		const serializedNode = nodeHandler.serialize(targetNode);
+		this.recursivelyUpdateKeys(serializedNode.props.children ?? []);
+		const newNodeId = v4_default();
+		serializedNode.key = newNodeId;
+		serializedNode.props.id = newNodeId;
+		const realParent = this.instance.getInstanceRecursive(parent);
+		this.instance.addNode(serializedNode, realParent?.getAttrs().id);
+		return this.instance.getStage().findOne(`#${newNodeId}`);
+	}
+	addClone(node) {
+		this.clones.push(node);
+	}
+	removeClone(node) {
+		this.clones = this.clones.filter((c) => c !== node);
+	}
+	getClones() {
+		return this.clones;
+	}
+	isClone(node) {
+		return this.clones.find((c) => c === node);
+	}
+	cleanupClones() {
+		this.clones = [];
+	}
 };
 
 //#endregion
@@ -21951,7 +22077,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.73.1";
+var version = "0.74.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22769,7 +22895,7 @@ var Weave = class {
 	getNodeContainerId(node) {
 		const stage = this.getStage();
 		let nodeContainer = node.getParent()?.getAttrs().id ?? "";
-		if (typeof node.getParent()?.getAttrs().nodeId !== "undefined") {
+		if (typeof node?.getParent()?.getAttrs().nodeId !== "undefined") {
 			const realContainer = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
 			if (realContainer) nodeContainer = realContainer.getAttrs().id ?? "";
 		}
@@ -22777,8 +22903,8 @@ var Weave = class {
 	}
 	getNodeContainer(node) {
 		const stage = this.getStage();
-		let nodeContainer = node.getParent();
-		if (typeof node.getParent()?.getAttrs().nodeId !== "undefined") {
+		let nodeContainer = node?.getParent();
+		if (typeof node?.getParent()?.getAttrs().nodeId !== "undefined") {
 			const realContainer = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
 			if (realContainer) nodeContainer = realContainer;
 		}
@@ -22833,6 +22959,9 @@ var Weave = class {
 			selectionPlugin.setSelectedNodes(instanceNodes);
 		}
 	}
+	getCloningManager() {
+		return this.cloningManager;
+	}
 	nodesToGroupSerialized(instancesToClone) {
 		return this.cloningManager.nodesToGroupSerialized(instancesToClone);
 	}
@@ -24832,17 +24961,13 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	fontFamily: "Arial",
 	fontStyle: "bold",
 	fontSize: 20,
-	fontColor: "#000000ff",
+	fontColor: "#000000",
 	titleMargin: 20,
-	borderColor: "#000000ff",
+	borderColor: "#000000",
 	borderWidth: 1,
-	onTargetLeave: {
-		borderColor: "#000000ff",
-		fill: "#ffffffff"
-	},
 	onTargetEnter: {
-		borderColor: "#ff6863ff",
-		fill: "#ffffffff"
+		borderColor: "#FF6863FF",
+		fill: "#FFFFFFFF"
 	},
 	transform: {
 		rotateEnabled: false,
@@ -24852,10 +24977,12 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 		padding: 0
 	}
 };
+const WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR = "#FFFFFFFF";
 const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
 	title: "Frame XXX",
 	frameWidth: 1920,
-	frameHeight: 1080
+	frameHeight: 1080,
+	frameBackground: WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR
 };
 
 //#endregion
@@ -24880,13 +25007,14 @@ var WeaveFrameNode = class extends WeaveNode {
 				...props.title && { title: props.title },
 				...props.frameWidth && { frameWidth: props.frameWidth },
 				...props.frameHeight && { frameHeight: props.frameHeight },
+				...props.frameBackground && { frameBackground: props.frameBackground },
 				children: []
 			}
 		};
 	}
 	onRender(props) {
 		const { id, zIndex,...restProps } = props;
-		const { fontFamily, fontStyle, fontSize, fontColor, titleMargin, borderColor, borderWidth, onTargetEnter: { borderColor: onTargetEnterBorderColor, fill: onTargetEnterFill }, onTargetLeave: { borderColor: onTargetLeaveBorderColor, fill: onTargetLeaveFill } } = this.config;
+		const { fontFamily, fontStyle, fontSize, fontColor, titleMargin, borderColor, borderWidth, onTargetEnter: { borderColor: onTargetEnterBorderColor, fill: onTargetEnterFill } } = this.config;
 		const frameParams = { ...restProps };
 		const frame = new konva.default.Group({
 			...frameParams,
@@ -24920,13 +25048,14 @@ var WeaveFrameNode = class extends WeaveNode {
 			nodeId: id,
 			x: 0,
 			y: 0,
+			onTargetEnter: false,
 			width: props.frameWidth,
 			stroke: borderColor,
 			strokeWidth: borderWidth,
 			strokeScaleEnabled: true,
 			shadowForStrokeEnabled: false,
 			height: props.frameHeight,
-			fill: frameParams.frameBackground ?? "#ffffffff",
+			fill: frameParams.frameBackground ?? WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR,
 			listening: false,
 			draggable: false
 		});
@@ -24936,7 +25065,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			id: `${id}-title`,
 			x: 0,
 			width: props.frameWidth,
-			fontSize: fontSize / stage.scaleX(),
+			fontSize,
 			fontFamily,
 			fontStyle,
 			verticalAlign: "middle",
@@ -24989,7 +25118,9 @@ var WeaveFrameNode = class extends WeaveNode {
 				ctx.rect(0, -textHeight, props.frameWidth, textHeight);
 				ctx.fillStrokeShape(shape);
 			},
+			strokeWidth: 0,
 			fill: "transparent",
+			nodeId: id,
 			id: `${id}-selection-area`,
 			listening: true,
 			draggable: true,
@@ -25006,6 +25137,7 @@ var WeaveFrameNode = class extends WeaveNode {
 				ctx.rect(0, 0, props.frameWidth, props.frameHeight);
 				ctx.fillStrokeShape(shape);
 			},
+			strokeWidth: 0,
 			fill: "transparent",
 			nodeId: id,
 			id: `${id}-container-area`,
@@ -25038,29 +25170,24 @@ var WeaveFrameNode = class extends WeaveNode {
 		selectionArea.off("dragend");
 		this.setupDefaultNodeEvents(frame);
 		this.instance.addEventListener("onZoomChange", () => {
-			const stage$1 = this.instance.getStage();
-			text.fontSize(fontSize / stage$1.scaleX());
-			text.width(props.frameWidth);
-			const textMeasures$1 = text.measureSize(text.getAttrs().text ?? "");
-			const textHeight$1 = textMeasures$1.height + 2 * titleMargin / stage$1.scaleX();
-			text.y(-textHeight$1);
-			text.height(textHeight$1);
 			selectionArea.hitFunc(function(ctx, shape) {
 				ctx.beginPath();
-				ctx.rect(0, -textHeight$1, props.frameWidth, textHeight$1);
+				ctx.rect(0, -textHeight, props.frameWidth, textHeight);
 				ctx.fillStrokeShape(shape);
 			});
 		});
 		frame.off("pointerover");
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
-				stroke: onTargetLeaveBorderColor,
+				onTargetEnter: false,
+				stroke: borderColor,
 				strokeWidth: borderWidth,
-				fill: onTargetLeaveFill
+				fill: frameParams.frameBackground ?? WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR
 			});
 		});
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
 			background.setAttrs({
+				onTargetEnter: true,
 				stroke: onTargetEnterBorderColor,
 				strokeWidth: borderWidth,
 				fill: onTargetEnterFill
@@ -25082,11 +25209,11 @@ var WeaveFrameNode = class extends WeaveNode {
 		const title = stage.findOne(`#${newProps.id}-title`);
 		const background = stage.findOne(`#${newProps.id}-bg`);
 		const selectionArea = stage.findOne(`#${newProps.id}-selection-area`);
-		if (background) background.setAttrs({ fill: newProps.frameBackground ?? "#ffffffff" });
+		if (background && !newProps.onTargetEnter) background.setAttrs({ fill: newProps.frameBackground ?? WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR });
 		if (title && selectionArea) {
 			title.text(newProps.title);
 			const textMeasures = title.measureSize(title.getAttrs().text ?? "");
-			const textHeight = textMeasures.height + 2 * titleMargin / stage.scaleX();
+			const textHeight = textMeasures.height + 2 * titleMargin;
 			title.y(-textHeight);
 			title.height(textHeight);
 			selectionArea.hitFunc(function(ctx, shape) {
@@ -25115,6 +25242,7 @@ var WeaveFrameNode = class extends WeaveNode {
 		const realAttrs = mainNode?.getAttrs();
 		const cleanedAttrs = { ...realAttrs };
 		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.onTargetEnter;
 		return {
 			key: realAttrs?.id ?? "",
 			type: realAttrs?.nodeType,
@@ -26233,7 +26361,9 @@ var WeaveVideoNode = class extends WeaveNode {
 			id: `${id}-bg`,
 			fill: this.config.style.background.color,
 			stroke: this.config.style.background.strokeColor,
-			strokeWidth: this.config.style.background.strokeWidth
+			strokeWidth: this.config.style.background.strokeWidth,
+			nodeId: id,
+			rotation: 0
 		});
 		videoGroup.add(bg);
 		if (!isServer()) {
@@ -26245,7 +26375,9 @@ var WeaveVideoNode = class extends WeaveNode {
 				y: 0,
 				draggable: false,
 				image: void 0,
-				name: void 0
+				name: void 0,
+				nodeId: id,
+				rotation: 0
 			});
 			video.hide();
 			videoGroup.add(video);
@@ -26258,7 +26390,9 @@ var WeaveVideoNode = class extends WeaveNode {
 				height: this.config.style.track.height / this.instance.getStage().scaleY(),
 				strokeWidth: 0,
 				fill: this.config.style.track.color,
-				name: void 0
+				name: void 0,
+				nodeId: id,
+				rotation: 0
 			});
 			this.instance.addEventListener("onZoomChange", () => {
 				videoProgress.height(this.config.style.track.height / this.instance.getStage().scaleY());
@@ -26274,7 +26408,9 @@ var WeaveVideoNode = class extends WeaveNode {
 			y: 0,
 			draggable: false,
 			image: void 0,
-			name: void 0
+			name: void 0,
+			nodeId: id,
+			rotation: 0
 		});
 		videoPlaceholder.show();
 		videoGroup.add(videoPlaceholder);
@@ -26292,7 +26428,9 @@ var WeaveVideoNode = class extends WeaveNode {
 			height: this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height,
 			strokeWidth: this.config.style.iconBackground.strokeWidth,
 			stroke: this.config.style.iconBackground.strokeColor,
-			fill: this.config.style.iconBackground.color
+			fill: this.config.style.iconBackground.color,
+			nodeId: id,
+			rotation: 0
 		});
 		videoIconGroup.add(videoIconBg);
 		const videoIcon = new konva.default.Image({
@@ -26303,7 +26441,9 @@ var WeaveVideoNode = class extends WeaveNode {
 			width: this.config.style.icon.width,
 			height: this.config.style.icon.height,
 			fill: "transparent",
-			image: this.videoIconImage
+			image: this.videoIconImage,
+			nodeId: id,
+			rotation: 0
 		});
 		videoIconGroup.add(videoIcon);
 		videoGroup.add(videoIconGroup);
@@ -26505,6 +26645,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		const videoHeight = node.getAttrs().height ?? 0;
 		bg.setAttrs({
 			...internalVideoProps,
+			rotation: 0,
 			id: `${id}-bg`,
 			x: 0,
 			y: 0
@@ -26512,6 +26653,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		const video = node.findOne(`#${id}-video`);
 		if (!isServer() && video) video.setAttrs({
 			...internalVideoProps,
+			rotation: 0,
 			id: `${id}-video`,
 			x: 0,
 			y: 0
@@ -26519,6 +26661,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		videoPlaceholder.setAttrs({
 			...internalVideoProps,
 			id: `${id}-video-placeholder`,
+			rotation: 0,
 			x: 0,
 			y: 0
 		});
@@ -28482,7 +28625,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.instance.addEventListener("onStageDrop", (e) => {
 			if (window.weaveDragImageURL) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
+				const position = getPositionRelativeToContainerOnPosition(this.instance);
 				this.instance.triggerAction(IMAGE_TOOL_ACTION_NAME, {
 					imageURL: window.weaveDragImageURL,
 					imageId: window.weaveDragImageId,
@@ -28537,7 +28680,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 	setState(state) {
 		this.state = state;
 	}
-	loadImage(imageURL, options, position) {
+	loadImage(imageURL, position) {
 		this.setCursor();
 		this.setFocusStage();
 		this.imageId = v4_default();
@@ -28671,7 +28814,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.forceMainContainer = params?.forceMainContainer ?? false;
 		if (params?.imageId) this.updateProps({ imageId: params.imageId });
 		if (params?.imageURL) {
-			this.loadImage(params.imageURL, params?.options ?? void 0, params?.position ?? void 0);
+			this.loadImage(params.imageURL, params?.position ?? void 0);
 			return;
 		}
 		this.props = this.initProps();
@@ -30173,7 +30316,7 @@ var WeaveVideoToolAction = class extends WeaveAction {
 		this.instance.addEventListener("onStageDrop", (e) => {
 			if (window.weaveDragVideoId && window.weaveDragVideoParams) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
+				const position = getPositionRelativeToContainerOnPosition(this.instance);
 				this.instance.triggerAction(VIDEO_TOOL_ACTION_NAME, {
 					videoId: window.weaveDragVideoId,
 					videoParams: window.weaveDragVideoParams,
@@ -30559,18 +30702,18 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 	}
 };
 
-//#endregion
-//#region src/plugins/stage-panning/constants.ts
-const WEAVE_STAGE_PANNING_KEY = "stagePanning";
-
 //#endregion
 //#region src/plugins/stage-panning/stage-panning.ts
 var WeaveStagePanningPlugin = class extends WeavePlugin {
 	panning = false;
+	currentPointer = null;
+	stageScrollInterval = void 0;
+	targetScrollIntervals = {};
 	getLayerName = void 0;
 	initLayer = void 0;
-	constructor() {
+	constructor(params) {
 		super();
+		this.config = (0, import_merge.default)(WEAVE_STAGE_PANNING_DEFAULT_CONFIG, params?.config ?? {});
 		this.pointers = new Map();
 		this.panning = false;
 		this.isDragging = false;
@@ -30652,6 +30795,8 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			lastPos = null;
 		});
 		const handleMouseMove = (e) => {
+			const pos = stage.getPointerPosition();
+			if (pos) this.currentPointer = pos;
 			if (["touch", "pen"].includes(e.evt.pointerType) && e.evt.buttons !== 1) return;
 			this.pointers.set(e.evt.pointerId, {
 				x: e.evt.clientX,
@@ -30661,7 +30806,6 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			if (this.isSpaceKeyPressed) stage.container().style.cursor = "grabbing";
 			if (!this.isDragging) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
-			const pos = stage.getPointerPosition();
 			if (pos && lastPos) {
 				const dx = pos.x - lastPos.x;
 				const dy = pos.y - lastPos.y;
@@ -30697,6 +30841,65 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			this.instance.emitEvent("onStageMove");
 		};
 		window.addEventListener("wheel", handleWheel, { passive: true });
+		stage.on("dragstart", (e) => {
+			const duration = 1e3 / 60;
+			if (this.targetScrollIntervals[e.target.getAttrs().id ?? ""] !== void 0) return;
+			this.targetScrollIntervals[e.target.getAttrs().id ?? ""] = setInterval(() => {
+				const pos = stage.getPointerPosition();
+				const offset = this.config.edgePanOffset;
+				const speed = this.config.edgePanSpeed;
+				if (!pos) return;
+				const isNearLeft = pos.x < offset / stage.scaleX();
+				if (isNearLeft) e.target.x(e.target.x() - speed / stage.scaleX());
+				const isNearRight = pos.x > stage.width() - offset / stage.scaleX();
+				if (isNearRight) e.target.x(e.target.x() + speed / stage.scaleX());
+				const isNearTop = pos.y < offset / stage.scaleY();
+				if (isNearTop) e.target.y(e.target.y() - speed / stage.scaleX());
+				const isNearBottom = pos.y > stage.height() - offset / stage.scaleY();
+				if (isNearBottom) e.target.y(e.target.y() + speed / stage.scaleX());
+				this.getStageGridPlugin()?.renderGrid();
+			}, duration);
+			if (this.stageScrollInterval !== void 0) return;
+			this.stageScrollInterval = setInterval(() => {
+				const pos = stage.getPointerPosition();
+				const offset = this.config.edgePanOffset;
+				const speed = this.config.edgePanSpeed;
+				if (!pos) return;
+				let isOnBorder = false;
+				const isNearLeft = pos.x < offset;
+				if (isNearLeft) {
+					stage.x(stage.x() + speed);
+					isOnBorder = true;
+				}
+				const isNearRight = pos.x > stage.width() - offset;
+				if (isNearRight) {
+					stage.x(stage.x() - speed);
+					isOnBorder = true;
+				}
+				const isNearTop = pos.y < offset;
+				if (isNearTop) {
+					stage.y(stage.y() + speed);
+					isOnBorder = true;
+				}
+				const isNearBottom = pos.y > stage.height() - offset;
+				if (isNearBottom) {
+					stage.y(stage.y() - speed);
+					isOnBorder = true;
+				}
+				if (isOnBorder) {
+					this.getNodesEdgeSnappingPlugin()?.disable();
+					this.getNodesDistanceSnappingPlugin()?.disable();
+				}
+				if (!isOnBorder) {
+					this.getNodesEdgeSnappingPlugin()?.enable();
+					this.getNodesDistanceSnappingPlugin()?.enable();
+				}
+				this.getStageGridPlugin()?.renderGrid();
+			}, duration);
+		});
+		stage.on("dragend", () => {
+			this.cleanupEdgeMoveIntervals();
+		});
 		stage.container().style.touchAction = "none";
 		stage.container().style.userSelect = "none";
 		stage.container().style.setProperty("-webkit-user-drag", "none");
@@ -30741,6 +30944,22 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
 	}
+	getStageGridPlugin() {
+		const gridPlugin = this.instance.getPlugin("stageGrid");
+		return gridPlugin;
+	}
+	getCurrentPointer() {
+		return this.currentPointer;
+	}
+	cleanupEdgeMoveIntervals() {
+		const intervals = Object.keys(this.targetScrollIntervals);
+		for (const key of intervals) {
+			clearInterval(this.targetScrollIntervals[key]);
+			this.targetScrollIntervals[key] = void 0;
+		}
+		clearInterval(this.stageScrollInterval);
+		this.stageScrollInterval = void 0;
+	}
 	enable() {
 		this.enabled = true;
 	}
@@ -31751,6 +31970,7 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 		this.enabled = true;
 	}
 	disable() {
+		this.cleanupGuidelines();
 		this.enabled = false;
 	}
 };
@@ -32335,6 +32555,7 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 		this.enabled = true;
 	}
 	disable() {
+		this.cleanupGuidelines();
 		this.enabled = false;
 	}
 };
@@ -32552,6 +32773,7 @@ exports.WEAVE_COPY_PASTE_PASTE_CATCHER_ID = WEAVE_COPY_PASTE_PASTE_CATCHER_ID
 exports.WEAVE_COPY_PASTE_PASTE_MODES = WEAVE_COPY_PASTE_PASTE_MODES
 exports.WEAVE_DEFAULT_USER_INFO_FUNCTION = WEAVE_DEFAULT_USER_INFO_FUNCTION
 exports.WEAVE_ELLIPSE_NODE_TYPE = WEAVE_ELLIPSE_NODE_TYPE
+exports.WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR = WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR
 exports.WEAVE_FRAME_NODE_DEFAULT_CONFIG = WEAVE_FRAME_NODE_DEFAULT_CONFIG
 exports.WEAVE_FRAME_NODE_DEFAULT_PROPS = WEAVE_FRAME_NODE_DEFAULT_PROPS
 exports.WEAVE_FRAME_NODE_TYPE = WEAVE_FRAME_NODE_TYPE
@@ -32585,6 +32807,8 @@ exports.WEAVE_STAGE_GRID_PLUGIN_KEY = WEAVE_STAGE_GRID_PLUGIN_KEY
 exports.WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG = WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG
 exports.WEAVE_STAGE_KEYBOARD_MOVE_KEY = WEAVE_STAGE_KEYBOARD_MOVE_KEY
 exports.WEAVE_STAGE_NODE_TYPE = WEAVE_STAGE_NODE_TYPE
+exports.WEAVE_STAGE_PANNING_DEFAULT_CONFIG = WEAVE_STAGE_PANNING_DEFAULT_CONFIG
+exports.WEAVE_STAGE_PANNING_KEY = WEAVE_STAGE_PANNING_KEY
 exports.WEAVE_STAR_NODE_TYPE = WEAVE_STAR_NODE_TYPE
 exports.WEAVE_STROKE_NODE_DEFAULT_CONFIG = WEAVE_STROKE_NODE_DEFAULT_CONFIG
 exports.WEAVE_STROKE_NODE_TYPE = WEAVE_STROKE_NODE_TYPE
@@ -32659,6 +32883,7 @@ exports.containerOverCursor = containerOverCursor
 exports.containsNodeDeep = containsNodeDeep
 exports.getBoundingBox = getBoundingBox
 exports.getExportBoundingBox = getExportBoundingBox
+exports.getPositionRelativeToContainerOnPosition = getPositionRelativeToContainerOnPosition
 exports.getSelectedNodesMetadata = getSelectedNodesMetadata
 exports.getTargetAndSkipNodes = getTargetAndSkipNodes
 exports.getTargetedNode = getTargetedNode