@inditextech/weave-sdk 0.73.0 → 0.74.0

package/dist/sdk.cjs

@@ -18951,6 +18951,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 {
@@ -19124,6 +19132,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const node = selectedNodes[i];
 				node.updatePosition(node.getAbsolutePosition());
 			}
+			if (e.evt?.altKey) {
+				tr.stopDrag(e.evt);
+				e.cancelBubble = true;
+			}
 			tr.forceUpdate();
 		});
 		const handleDragMove = (e) => {
@@ -19131,6 +19143,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 +19155,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,12 +19173,15 @@ 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++) {
 				const node = selectedNodes[i];
 				selectionContainsFrames = selectionContainsFrames || hasFrames(node);
 				node.updatePosition(node.getAbsolutePosition());
+				node.setAttrs({ isCloned: void 0 });
 			}
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				const actualCursor = stage.container().style.cursor;
@@ -19407,7 +19422,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;
 			}
 		});
@@ -19475,11 +19492,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const contextMenuPlugin = this.getContextMenuPlugin();
 			if (moved) contextMenuPlugin?.cancelLongPressTimer();
 			else this.hideSelectorArea();
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
-				this.selecting = false;
-				this.stopPanLoop();
-				return;
-			}
+			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 			if (this.isSpaceKeyPressed) return;
 			if (!this.selecting) return;
 			this.updateSelectionRect();
@@ -19533,11 +19546,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.hideSelectorArea();
 				return;
 			}
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
-				this.selecting = false;
-				this.stopPanLoop();
-				return;
-			}
+			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 			if (!this.selectionRectangle.visible()) {
 				this.hideSelectorArea();
 				return;
@@ -19628,11 +19637,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (!this.enabled) return;
 		if (this.instance.getActiveAction() !== SELECTION_TOOL_ACTION_NAME) return;
 		const contextMenuPlugin = this.getContextMenuPlugin();
-		if (contextMenuPlugin?.isContextMenuVisible()) {
-			this.selecting = false;
-			this.stopPanLoop();
-			return;
-		}
+		if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 		this.hideHoverState();
 		const selectedGroup = getTargetedNode(this.instance);
 		if (!this.initialized) return;
@@ -19775,6 +19780,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;
 	}
@@ -20348,69 +20357,98 @@ var WeaveNode = class {
 				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
 				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
 			});
+			let clone = void 0;
 			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.stopDrag(e.evt);
+					e.cancelBubble = true;
+					clone = this.instance.getCloningManager().cloneNode(realNodeTarget);
+					if (clone && !this.instance.getCloningManager().isClone(clone)) {
+						clone.setAttrs({ isCloned: true });
+						this.instance.getCloningManager().addClone(clone);
+					}
+					stage.setPointersPositions(e.evt);
+					const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+					nodesSelectionPlugin?.setSelectedNodes([]);
+					setTimeout(() => {
+						nodesSelectionPlugin?.setSelectedNodes(this.instance.getCloningManager().getClones());
+						clone?.startDrag(e.evt);
+					}, 0);
 				}
 			});
 			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 isErasing = this.instance.getActiveAction() === "eraseTool";
 				if (isErasing) {
-					e.target.stopDrag();
+					nodeTarget.stopDrag();
 					return;
 				}
 				if (stage.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 (clone) clone = void 0;
 				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) && !realNodeTarget.getAttrs().isCloned) moved = moveNodeToContainer(this.instance, realNodeTarget, containerToMove);
+					if (realNodeTarget.getAttrs().isCloned) this.instance.getCloningManager().removeClone(realNodeTarget);
+					realNodeTarget?.setAttrs({ isCloned: void 0 });
 					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));
 				}
 			});
 			node.handleMouseover = () => {
@@ -20568,6 +20606,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;
@@ -20582,6 +20624,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
@@ -21402,6 +21455,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");
@@ -21560,6 +21614,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
@@ -21963,7 +22053,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.73.0";
+var version = "0.74.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22781,7 +22871,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 ?? "";
 		}
@@ -22789,8 +22879,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;
 		}
@@ -22845,6 +22935,9 @@ var Weave = class {
 			selectionPlugin.setSelectedNodes(instanceNodes);
 		}
 	}
+	getCloningManager() {
+		return this.cloningManager;
+	}
 	nodesToGroupSerialized(instancesToClone) {
 		return this.cloningManager.nodesToGroupSerialized(instancesToClone);
 	}
@@ -24844,17 +24937,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,
@@ -24864,10 +24953,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
@@ -24892,13 +24983,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,
@@ -24932,13 +25024,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
 		});
@@ -24948,7 +25041,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			id: `${id}-title`,
 			x: 0,
 			width: props.frameWidth,
-			fontSize: fontSize / stage.scaleX(),
+			fontSize,
 			fontFamily,
 			fontStyle,
 			verticalAlign: "middle",
@@ -25001,7 +25094,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,
@@ -25018,6 +25113,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`,
@@ -25050,29 +25146,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
@@ -25094,11 +25185,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) {
@@ -25127,6 +25218,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,
@@ -26245,7 +26337,8 @@ 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
 		});
 		videoGroup.add(bg);
 		if (!isServer()) {
@@ -26257,7 +26350,8 @@ var WeaveVideoNode = class extends WeaveNode {
 				y: 0,
 				draggable: false,
 				image: void 0,
-				name: void 0
+				name: void 0,
+				nodeId: id
 			});
 			video.hide();
 			videoGroup.add(video);
@@ -26270,7 +26364,8 @@ 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
 			});
 			this.instance.addEventListener("onZoomChange", () => {
 				videoProgress.height(this.config.style.track.height / this.instance.getStage().scaleY());
@@ -26286,7 +26381,8 @@ var WeaveVideoNode = class extends WeaveNode {
 			y: 0,
 			draggable: false,
 			image: void 0,
-			name: void 0
+			name: void 0,
+			nodeId: id
 		});
 		videoPlaceholder.show();
 		videoGroup.add(videoPlaceholder);
@@ -26304,7 +26400,8 @@ 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
 		});
 		videoIconGroup.add(videoIconBg);
 		const videoIcon = new konva.default.Image({
@@ -26315,7 +26412,8 @@ 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
 		});
 		videoIconGroup.add(videoIcon);
 		videoGroup.add(videoIconGroup);
@@ -30571,18 +30669,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;
@@ -30664,6 +30762,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,
@@ -30673,7 +30773,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;
@@ -30709,6 +30808,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");
@@ -30753,6 +30911,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;
 	}
@@ -31763,6 +31937,7 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 		this.enabled = true;
 	}
 	disable() {
+		this.cleanupGuidelines();
 		this.enabled = false;
 	}
 };
@@ -32347,6 +32522,7 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 		this.enabled = true;
 	}
 	disable() {
+		this.cleanupGuidelines();
 		this.enabled = false;
 	}
 };
@@ -32564,6 +32740,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
@@ -32597,6 +32774,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