@inditextech/weave-sdk 0.19.0 → 0.20.0

package/dist/sdk.js

@@ -1,6 +1,7 @@
+import "./node-extensions.d-Q3CaoYb8.d.ts";
 import Konva from "konva";
 import "konva/lib/types";
-import { WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
+import { WEAVE_AWARENESS_LAYER_ID, WEAVE_DEFAULT_TRANSFORM_PROPERTIES, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
 import { Doc, UndoManager } from "yjs";
 import React from "react";
@@ -15802,43 +15803,70 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = { transformer: {
-			rotationSnaps: [
-				0,
-				45,
-				90,
-				135,
-				180,
-				225,
-				270,
-				315,
-				360
-			],
-			rotationSnapTolerance: 3,
-			ignoreStroke: true,
-			flipEnabled: false,
-			keepRatio: false,
-			useSingleNodeRotation: true,
-			shouldOverdrawWholeArea: true,
-			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);
-				}
+		this.config = {
+			transformer: {
+				rotationSnaps: [
+					0,
+					45,
+					90,
+					135,
+					180,
+					225,
+					270,
+					315,
+					360
+				],
+				rotationSnapTolerance: 3,
+				ignoreStroke: true,
+				flipEnabled: false,
+				keepRatio: false,
+				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: "#0074ffcc",
+				...config?.transformer
 			},
-			borderStroke: "#1e40afff",
-			...config?.transformer
-		} };
+			transformations: {
+				singleSelection: { enabled: true },
+				multipleSelection: { enabled: false },
+				...config?.transformations
+			}
+		};
+		this.defaultEnabledAnchors = this.config.transformer?.enabledAnchors ?? [
+			"top-left",
+			"top-center",
+			"top-right",
+			"middle-right",
+			"middle-left",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		];
 		this.active = false;
 		this.cameFromSelectingMultiple = false;
 		this.selecting = false;
@@ -15901,21 +15929,47 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				e.cancelBubble = true;
 			}
 		});
+		tr.on("transformstart", () => {
+			this.triggerSelectedNodesEvent();
+		});
+		tr.on("transform", () => {
+			this.triggerSelectedNodesEvent();
+		});
+		tr.on("transformend", () => {
+			this.triggerSelectedNodesEvent();
+		});
+		tr.on("dragstart", (e) => {
+			for (const node of tr.nodes()) node.updatePosition(e.target.getAbsolutePosition());
+			tr.forceUpdate();
+			e.cancelBubble = true;
+		});
 		tr.on("dragmove", (e) => {
+			for (const node of tr.nodes()) node.updatePosition(e.target.getAbsolutePosition());
+			e.cancelBubble = true;
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				clearContainerTargets(this.instance);
 				const layerToMove = checkIfOverContainer(this.instance, e.target);
 				if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+				for (const node of tr.nodes()) {
+					const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+					this.instance.updateNode(nodeHandler.serialize(node));
+				}
 			}
+			tr.forceUpdate();
 		});
-		tr.on("dragend", () => {
+		tr.on("dragend", (e) => {
+			for (const node of tr.nodes()) node.updatePosition(e.target.getAbsolutePosition());
+			e.cancelBubble = true;
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				clearContainerTargets(this.instance);
 				for (const node of tr.nodes()) {
 					const layerToMove = moveNodeToContainer(this.instance, node);
 					if (layerToMove) continue;
+					const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+					this.instance.updateNode(nodeHandler.serialize(node));
 				}
 			}
+			tr.forceUpdate();
 		});
 		this.tr = tr;
 		this.selectionRectangle = selectionRectangle;
@@ -16040,7 +16094,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			});
 			const box = this.selectionRectangle.getClientRect();
 			const selected = shapes.filter((shape) => {
-				const parent = this.instance.getInstanceRecursive(shape.getParent());
+				let parent = this.instance.getInstanceRecursive(shape.getParent());
+				if (parent.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
 				if (shape.getAttrs().nodeType && shape.getAttrs().nodeType === "frame") {
 					const frameBox = shape.getClientRect();
 					const isContained = frameBox.x >= box.x && frameBox.y >= box.y && frameBox.x + frameBox.width <= box.x + box.width && frameBox.y + frameBox.height <= box.y + box.height;
@@ -16089,36 +16144,45 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) this.instance.emitEvent("onStageSelection");
 				return;
 			}
-			const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-			const isSelected = this.tr.nodes().indexOf(e.target) >= 0;
 			let areNodesSelected = false;
-			let nodeToAdd = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
-			if (nodeToAdd.getParent() instanceof Konva.Transformer) {
+			let nodeTargeted = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
+			if (nodeTargeted.getParent() instanceof Konva.Transformer) {
 				const intersections = stage.getAllIntersections(mousePos);
 				const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
 				let targetNode = null;
 				if (nodesIntersected.length > 0) targetNode = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
-				if (targetNode && targetNode.getAttrs().nodeType) {
-					this.tr.nodes([]);
-					this.triggerSelectedNodesEvent();
-					nodeToAdd = targetNode;
-				}
+				if (targetNode && targetNode.getAttrs().nodeType) nodeTargeted = targetNode;
 			}
-			if (!nodeToAdd.getAttrs().nodeType) return;
-			if (!metaPressed && !isSelected) {
-				this.tr.nodes([nodeToAdd]);
+			if (!nodeTargeted.getAttrs().nodeType) return;
+			let nodesSelected = 0;
+			const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+			const nodeSelectedIndex = this.tr.nodes().findIndex((node) => {
+				return node.getAttrs().id === nodeTargeted.getAttrs().id;
+			});
+			const isSelected = nodeSelectedIndex !== -1;
+			if (!metaPressed) {
+				this.tr.nodes([nodeTargeted]);
+				nodesSelected = this.tr.nodes().length;
 				this.tr.show();
 				areNodesSelected = true;
 			} else if (metaPressed && isSelected) {
 				const nodes = this.tr.nodes().slice();
-				nodes.splice(nodes.indexOf(nodeToAdd), 1);
+				nodes.splice(nodes.indexOf(nodeTargeted), 1);
 				this.tr.nodes(nodes);
+				nodesSelected = this.tr.nodes().length;
 				areNodesSelected = true;
 			} else if (metaPressed && !isSelected) {
-				const nodes = this.tr.nodes().concat([nodeToAdd]);
+				const nodes = this.tr.nodes().concat([nodeTargeted]);
 				this.tr.nodes(nodes);
+				nodesSelected = this.tr.nodes().length;
 				areNodesSelected = true;
 			}
+			if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
+			if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+			if (nodesSelected === 1) {
+				this.tr.setAttrs({ ...nodeTargeted.getTransformerProperties() });
+				this.tr.forceUpdate();
+			}
 			if (areNodesSelected) {
 				stage.container().tabIndex = 1;
 				stage.container().focus();
@@ -16132,6 +16196,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	}
 	setSelectedNodes(nodes) {
 		this.tr.setNodes(nodes);
+		const nodesSelected = nodes.length;
+		if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
+		if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+		if (nodesSelected === 1) {
+			this.tr.setAttrs({ ...nodes[0].getTransformerProperties() });
+			this.tr.forceUpdate();
+		}
 		this.triggerSelectedNodesEvent();
 	}
 	getSelectedNodes() {
@@ -16383,6 +16454,16 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 
 //#endregion
 //#region src/nodes/node.ts
+const setNodesDefaultConfiguration = (config) => {
+	const { transform } = config ?? {};
+	Konva.Node.prototype.getTransformerProperties = function() {
+		return {
+			WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...transform
+		};
+	};
+	Konva.Node.prototype.updatePosition = function() {};
+};
 var WeaveNode = class {
 	register(instance) {
 		this.instance = instance;
@@ -17002,11 +17083,11 @@ var WeaveGroupsManager = class {
 		}, 0);
 	}
 	unGroup(group) {
-		this.logger.warn({ group }, "Un-grouping group");
+		this.logger.debug({ group }, "Un-grouping group");
 		const stage = this.instance.getStage();
 		const konvaGroup = stage.findOne(`#${group.props.id}`);
 		if (!konvaGroup) {
-			this.logger.warn({ group }, "Group instance doesn't exists, cannot un-group");
+			this.logger.debug({ group }, "Group instance doesn't exists, cannot un-group");
 			return;
 		}
 		let nodeId = void 0;
@@ -17018,7 +17099,7 @@ var WeaveGroupsManager = class {
 		if (konvaGroup.getParent() && konvaGroup.getParent() instanceof Konva.Group && !konvaGroup.getParent()?.getAttrs().nodeId) newLayer = konvaGroup.getParent();
 		if (konvaGroup.getParent() && konvaGroup.getParent() instanceof Konva.Layer) newLayer = konvaGroup.getParent();
 		if (!newLayer) {
-			this.logger.warn({ group }, "Group target container doesn't exists, cannot un-group");
+			this.logger.debug({ group }, "Group target container doesn't exists, cannot un-group");
 			return;
 		}
 		const newLayerChildrenAmount = newLayer?.getChildren().length ?? 0;
@@ -17304,9 +17385,10 @@ var WeaveCloningManager = class {
 		const serializedNodes = [];
 		newGroup.getChildren().forEach((node) => {
 			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-			if (node.x() < minPoint.x || node.y() < minPoint.y) {
-				minPoint.x = node.x();
-				minPoint.y = node.y();
+			const nodePos = node.getClientRect();
+			if (nodePos.x < minPoint.x || nodePos.y < minPoint.y) {
+				minPoint.x = nodePos.x;
+				minPoint.y = nodePos.y;
 			}
 			const serialized = nodeHandler.serialize(node);
 			serializedNodes.push(serialized);
@@ -17943,7 +18025,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.19.0";
+var version = "0.20.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18354,6 +18436,7 @@ var Weave = class extends Emittery {
 		this.status = WEAVE_INSTANCE_STATUS.STARTING;
 		this.emitEvent("onInstanceStatus", this.status);
 		this.registerManager.registerNodesHandlers();
+		this.setNodesDefaultConfiguration();
 		this.registerManager.registerPlugins();
 		this.registerManager.registerActionsHandlers();
 		this.storeManager.registerStore(this.config.store);
@@ -18383,6 +18466,9 @@ var Weave = class extends Emittery {
 	getConfiguration() {
 		return this.config;
 	}
+	setNodesDefaultConfiguration(config) {
+		setNodesDefaultConfiguration(config);
+	}
 	emitEvent(event, payload) {
 		this.moduleLogger.debug({ payload }, `Emitted event [${event}]`);
 		this.emit(event, payload);
@@ -18654,11 +18740,22 @@ const WEAVE_GROUP_NODE_TYPE = "group";
 //#region src/nodes/group/group.ts
 var WeaveGroupNode = class extends WeaveNode {
 	nodeType = WEAVE_GROUP_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
 	onRender(props) {
 		const group = new Konva.Group({
 			...props,
 			name: "node"
 		});
+		group.getTransformerProperties = () => {
+			return this.config.transform;
+		};
 		this.setupDefaultNodeEvents(group);
 		return group;
 	}
@@ -18694,11 +18791,22 @@ const WEAVE_RECTANGLE_NODE_TYPE = "rectangle";
 //#region src/nodes/rectangle/rectangle.ts
 var WeaveRectangleNode = class extends WeaveNode {
 	nodeType = WEAVE_RECTANGLE_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
 	onRender(props) {
 		const rectangle = new Konva.Rect({
 			...props,
 			name: "node"
 		});
+		rectangle.getTransformerProperties = () => {
+			return this.config.transform;
+		};
 		this.setupDefaultNodeEvents(rectangle);
 		return rectangle;
 	}
@@ -18715,11 +18823,22 @@ const WEAVE_LINE_NODE_TYPE = "line";
 //#region src/nodes/line/line.ts
 var WeaveLineNode = class extends WeaveNode {
 	nodeType = WEAVE_LINE_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
 	onRender(props) {
 		const line = new Konva.Line({
 			...props,
 			name: "node"
 		});
+		line.getTransformerProperties = () => {
+			return this.config.transform;
+		};
 		this.setupDefaultNodeEvents(line);
 		return line;
 	}
@@ -18759,8 +18878,13 @@ const TEXT_LAYOUT = {
 var WeaveTextNode = class extends WeaveNode {
 	nodeType = WEAVE_TEXT_NODE_TYPE;
 	editing = false;
-	constructor() {
+	constructor(params) {
 		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
 		this.editing = false;
 	}
 	updateNode(nodeInstance) {
@@ -18774,6 +18898,9 @@ var WeaveTextNode = class extends WeaveNode {
 			...props,
 			name: "node"
 		});
+		text.getTransformerProperties = () => {
+			return this.config.transform;
+		};
 		text.setAttrs({ measureMultilineText: this.measureMultilineText(text) });
 		this.setupDefaultNodeEvents(text);
 		text.on("transform", (e) => {
@@ -18855,6 +18982,7 @@ var WeaveTextNode = class extends WeaveNode {
 		const cleanedAttrs = { ...attrs };
 		delete cleanedAttrs.draggable;
 		delete cleanedAttrs.triggerEditMode;
+		delete cleanedAttrs.measureMultilineText;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -19559,8 +19687,13 @@ const WEAVE_IMAGE_NODE_TYPE = "image";
 //#region src/nodes/image/image.ts
 var WeaveImageNode = class extends WeaveNode {
 	nodeType = WEAVE_IMAGE_NODE_TYPE;
-	constructor() {
+	constructor(params) {
 		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
 		this.imageLoaded = false;
 		this.cropping = false;
 	}
@@ -19581,6 +19714,9 @@ var WeaveImageNode = class extends WeaveNode {
 			id,
 			name: "node"
 		});
+		image.getTransformerProperties = () => {
+			return this.config.transform;
+		};
 		const imagePlaceholder = new Konva.Rect({
 			...groupImageProps,
 			id: `${id}-placeholder`,
@@ -19823,10 +19959,10 @@ const WEAVE_FRAME_NODE_SIZES = {
 };
 const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	fontFamily: "Arial",
-	fontStyle: "normal",
+	fontStyle: "bold",
 	titleHeight: 30,
 	borderColor: "#000000ff",
-	borderWidth: 2,
+	borderWidth: 1,
 	onTargetLeave: {
 		borderColor: "#000000ff",
 		fill: "#ffffffff"
@@ -19834,6 +19970,13 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	onTargetEnter: {
 		borderColor: "#ff6863ff",
 		fill: "#ffffffff"
+	},
+	transform: {
+		rotateEnabled: false,
+		resizeEnabled: false,
+		enabledAnchors: [],
+		borderStrokeWidth: 3,
+		padding: 0
 	}
 };
 const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
@@ -19886,34 +20029,42 @@ var WeaveFrameNode = class extends WeaveNode {
 			containerOffsetX: 0,
 			containerOffsetY: titleHeight,
 			width: props.frameWidth,
-			height: props.frameHeight + titleHeight,
-			fill: "#ffffffff",
-			clipX: 0,
-			clipY: 0,
-			clipWidth: props.frameWidth,
-			clipHeight: props.frameHeight + titleHeight,
-			name: "node"
+			height: props.frameHeight,
+			fill: "transparent",
+			draggable: false
+		});
+		const frameInternalGroup = new Konva.Group({
+			id: `${id}-selector`,
+			x: 0,
+			y: 0,
+			width: props.frameWidth,
+			height: props.frameHeight,
+			strokeScaleEnabled: false,
+			draggable: false
 		});
+		frame.add(frameInternalGroup);
 		const background = new Konva.Rect({
 			id: `${id}-bg`,
 			nodeId: id,
 			x: 0,
-			y: titleHeight,
+			y: 0,
 			width: props.frameWidth,
 			stroke: borderColor,
 			strokeWidth: borderWidth,
 			strokeScaleEnabled: false,
+			shadowForStrokeEnabled: false,
 			height: props.frameHeight,
 			fill: "#ffffffff",
+			listening: false,
 			draggable: false
 		});
-		frame.add(background);
+		frameInternalGroup.add(background);
 		const text = new Konva.Text({
 			id: `${id}-title`,
 			x: 0,
-			y: 0,
+			y: -titleHeight,
 			width: props.frameWidth,
-			height: titleHeight - 10,
+			height: titleHeight,
 			fontSize: 20,
 			fontFamily,
 			fontStyle,
@@ -19925,7 +20076,89 @@ var WeaveFrameNode = class extends WeaveNode {
 			listening: false,
 			draggable: false
 		});
-		frame.add(text);
+		frameInternalGroup.add(text);
+		const selectorArea = new Konva.Rect({
+			...frameParams,
+			id: `${id}-selector-area`,
+			name: "node",
+			nodeId: id,
+			containerId: `${id}-group-internal`,
+			x: 0,
+			y: 0,
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
+			width: props.frameWidth,
+			height: props.frameHeight,
+			fill: "transparent",
+			draggable: false
+		});
+		selectorArea.getTransformerProperties = () => {
+			return this.config.transform;
+		};
+		selectorArea.updatePosition = (position) => {
+			frame.setAbsolutePosition(position);
+			selectorArea.setAttrs({
+				x: 0,
+				y: 0
+			});
+			this.instance.updateNode(this.serialize(selectorArea));
+		};
+		const updateFrame = (e) => {
+			const selectorArea$1 = e.target;
+			const stage = selectorArea$1.getStage();
+			if (!stage) return;
+			const absPos = selectorArea$1.getAbsolutePosition();
+			const absRot = selectorArea$1.getAbsoluteRotation();
+			const scaleX = selectorArea$1.scaleX();
+			const scaleY = selectorArea$1.scaleY();
+			selectorArea$1.x(0);
+			selectorArea$1.y(0);
+			frame.setAbsolutePosition(absPos);
+			frame.rotation(absRot);
+			frame.width(selectorArea$1.width());
+			frame.height(selectorArea$1.height());
+			frameInternalGroup.width(Math.max(5, selectorArea$1.width() * scaleX));
+			frameInternalGroup.height(Math.max(5, selectorArea$1.height() * scaleY));
+			background.width(Math.max(5, selectorArea$1.width() * scaleX));
+			background.height(Math.max(5, selectorArea$1.height() * scaleY));
+			text.width(Math.max(5, selectorArea$1.width() * scaleX));
+			text.height(titleHeight * scaleY);
+			frameInternal.width(Math.max(5, selectorArea$1.width() * scaleX));
+			frameInternal.height(Math.max(5, selectorArea$1.height() * scaleY));
+		};
+		selectorArea.on("transform", (e) => {
+			updateFrame(e);
+			const node = e.target;
+			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.evaluateGuidelines(e);
+			const clonedSA = selectorArea.clone();
+			const scaleX = clonedSA.scaleX();
+			const scaleY = clonedSA.scaleY();
+			clonedSA.x(0);
+			clonedSA.y(0);
+			clonedSA.width(Math.max(5, clonedSA.width() * scaleX));
+			clonedSA.height(Math.max(5, clonedSA.height() * scaleY));
+			clonedSA.scaleX(1);
+			clonedSA.scaleY(1);
+			this.instance.updateNode(this.serialize(clonedSA));
+			e.cancelBubble = true;
+		});
+		selectorArea.on("transformend", (e) => {
+			const node = e.target;
+			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+			const scaleX = selectorArea.scaleX();
+			const scaleY = selectorArea.scaleY();
+			selectorArea.x(0);
+			selectorArea.y(0);
+			selectorArea.width(Math.max(5, selectorArea.width() * scaleX));
+			selectorArea.height(Math.max(5, selectorArea.height() * scaleY));
+			selectorArea.scaleX(1);
+			selectorArea.scaleY(1);
+			updateFrame(e);
+			this.instance.updateNode(this.serialize(selectorArea));
+		});
+		frameInternalGroup.add(selectorArea);
 		const frameInternal = new Konva.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
@@ -19933,17 +20166,18 @@ var WeaveFrameNode = class extends WeaveNode {
 			y: titleHeight,
 			width: props.frameWidth,
 			height: props.frameHeight,
-			draggable: false,
-			stroke: "transparent",
 			strokeScaleEnabled: false,
-			borderWidth: 0,
-			clipX: 0,
-			clipY: 0,
-			clipWidth: props.frameWidth,
-			clipHeight: props.frameHeight
+			draggable: false
 		});
-		frame.add(frameInternal);
+		frameInternal.clipFunc((ctx) => {
+			const width = frameInternal.width() * frameInternal.scaleX();
+			const height = frameInternal.height() * frameInternal.scaleY();
+			ctx.rect(0, -titleHeight, width, height);
+		});
+		frameInternalGroup.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
+		frame.on("dragmove", () => {});
+		frame.on("dragend", () => {});
 		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
 				stroke: onTargetLeaveBorderColor,
@@ -19964,13 +20198,51 @@ var WeaveFrameNode = class extends WeaveNode {
 		const { id } = nextProps;
 		const frameNode = nodeInstance;
 		const newProps = { ...nextProps };
+		const { titleHeight } = this.config;
 		nodeInstance.setAttrs({ ...newProps });
-		const frameTitle = frameNode.findOne(`#${id}-title`);
-		if (frameTitle) frameTitle.setAttrs({ text: nextProps.title });
+		const selectorArea = frameNode.findOne(`#${id}-selector-area`);
+		if (selectorArea) {
+			selectorArea.setAttrs({
+				x: 0,
+				y: 0,
+				width: nextProps.width,
+				height: nextProps.height
+			});
+			const frameInternalGroup = frameNode.findOne(`#${id}-selector`);
+			if (frameInternalGroup) frameInternalGroup.setAttrs({
+				x: 0,
+				y: 0,
+				width: nextProps.width * selectorArea.scaleX(),
+				height: nextProps.height * selectorArea.scaleY()
+			});
+			const background = frameNode.findOne(`#${id}-bg`);
+			if (background) background.setAttrs({
+				x: 0,
+				y: 0,
+				width: nextProps.width * selectorArea.scaleX(),
+				height: nextProps.height * selectorArea.scaleY()
+			});
+			const text = frameNode.findOne(`#${id}-title`);
+			if (text) text.setAttrs({
+				x: 0,
+				y: -titleHeight,
+				text: nextProps.title,
+				width: nextProps.width * selectorArea.scaleX()
+			});
+			const frameInternal = frameNode.findOne(`#${id}-group-internal`);
+			if (frameInternal) frameInternal.setAttrs({
+				x: 0,
+				y: titleHeight,
+				width: nextProps.width * selectorArea.scaleX(),
+				height: nextProps.height * selectorArea.scaleY()
+			});
+		}
 	}
 	serialize(instance) {
+		const stage = this.instance.getStage();
 		const attrs = instance.getAttrs();
-		const frameInternal = instance.findOne(`#${attrs.containerId}`);
+		const mainNode = stage?.findOne(`#${attrs.nodeId}`);
+		const frameInternal = mainNode?.findOne(`#${attrs.containerId}`);
 		const childrenMapped = [];
 		if (frameInternal) {
 			const children = [...frameInternal.getChildren()];
@@ -19979,15 +20251,16 @@ var WeaveFrameNode = class extends WeaveNode {
 				childrenMapped.push(handler.serialize(node));
 			}
 		}
-		const cleanedAttrs = { ...attrs };
+		const realAttrs = mainNode?.getAttrs();
+		const cleanedAttrs = { ...realAttrs };
 		delete cleanedAttrs.draggable;
 		return {
-			key: attrs.id ?? "",
-			type: attrs.nodeType,
+			key: realAttrs?.id ?? "",
+			type: realAttrs?.nodeType,
 			props: {
 				...cleanedAttrs,
-				id: attrs.id ?? "",
-				nodeType: attrs.nodeType,
+				id: realAttrs?.id ?? "",
+				nodeType: realAttrs?.nodeType,
 				children: childrenMapped
 			}
 		};
@@ -19997,28 +20270,44 @@ var WeaveFrameNode = class extends WeaveNode {
 //#endregion
 //#region src/plugins/stage-zoom/constants.ts
 const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
+const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG = {
+	zoomSteps: [
+		.1,
+		.2,
+		.3,
+		.4,
+		.5,
+		.6,
+		.7,
+		.8,
+		.9,
+		1,
+		1.25,
+		1.5,
+		1.75,
+		2,
+		3,
+		4,
+		6,
+		8,
+		10
+	],
+	defaultZoom: 1,
+	fitToScreen: { padding: 40 },
+	fitToSelection: { padding: 40 }
+};
 
 //#endregion
 //#region src/plugins/stage-zoom/stage-zoom.ts
 var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
-	padding = 175;
 	defaultStep = 3;
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
 		this.config = {
-			zoomSteps: [
-				.1,
-				.25,
-				.5,
-				1,
-				2,
-				4,
-				8
-			],
-			defaultZoom: 1,
+			...WEAVE_STAGE_ZOOM_DEFAULT_CONFIG,
 			...config
 		};
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
@@ -20078,13 +20367,13 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	canZoomOut() {
 		if (!this.enabled) return false;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
-		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
+		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomOut");
 		return this.actualStep - 1 > 0;
 	}
 	canZoomIn() {
 		if (!this.enabled) return false;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
-		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
+		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomIn");
 		return this.actualStep + 1 < this.config.zoomSteps.length;
 	}
 	zoomToStep(step) {
@@ -20093,20 +20382,15 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		this.actualStep = step;
 		this.setZoom(this.config.zoomSteps[step]);
 	}
-	findClosestStepIndex() {
-		let closestStepIndex = 0;
-		let actualDiff = Infinity;
-		for (let i = 0; i < this.config.zoomSteps.length; i++) if (Math.abs(this.config.zoomSteps[i] - this.actualScale) < actualDiff) {
-			closestStepIndex = i;
-			actualDiff = Math.abs(this.config.zoomSteps[i] - this.actualScale);
-		}
-		return closestStepIndex;
+	findClosestStepIndex(direction) {
+		const nextValue = this.config.zoomSteps.filter((scale) => direction === "zoomIn" ? scale >= this.actualScale : scale <= this.actualScale).sort((a, b) => direction === "zoomIn" ? a - b : b - a)[0];
+		return this.config.zoomSteps.findIndex((scale) => scale === nextValue);
 	}
 	zoomIn() {
 		if (!this.enabled) return;
 		if (!this.canZoomIn()) return;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
-		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
+		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomIn");
 		else this.actualStep += 1;
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
@@ -20114,7 +20398,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		if (!this.enabled) return;
 		if (!this.canZoomOut()) return;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
-		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
+		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomOut");
 		else this.actualStep -= 1;
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
@@ -20127,11 +20411,32 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		}
 		const stage = this.instance.getStage();
 		if (mainLayer) {
-			const box = mainLayer.getClientRect({ relativeTo: stage });
-			const scale = Math.min(stage.width() / (box.width + this.padding * 2), stage.height() / (box.height + this.padding * 2));
-			stage.setAttrs({
-				x: -box.x * scale + (stage.width() - box.width * scale) / 2,
-				y: -box.y * scale + (stage.height() - box.height * scale) / 2
+			const box = mainLayer.getClientRect({
+				relativeTo: stage,
+				skipStroke: true
+			});
+			const stageBox = {
+				width: stage.width(),
+				height: stage.height()
+			};
+			const availableScreenWidth = stageBox.width - 2 * this.config.fitToScreen.padding;
+			const availableScreenHeight = stageBox.height - 2 * this.config.fitToScreen.padding;
+			const scaleX = availableScreenWidth / box.width;
+			const scaleY = availableScreenHeight / box.height;
+			const scale = Math.min(scaleX, scaleY);
+			stage.scale({
+				x: scale,
+				y: scale
+			});
+			const selectionCenterX = box.x + box.width / 2;
+			const selectionCenterY = box.y + box.height / 2;
+			const canvasCenterX = stage.width() / (2 * scale);
+			const canvasCenterY = stage.height() / (2 * scale);
+			const stageX = (canvasCenterX - selectionCenterX) * scale;
+			const stageY = (canvasCenterY - selectionCenterY) * scale;
+			stage.position({
+				x: stageX,
+				y: stageY
 			});
 			this.setZoom(scale, false);
 		}
@@ -20166,10 +20471,28 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		zoomTransformer.setNodes(selectionPlugin.getTransformer().getNodes());
 		zoomTransformer.forceUpdate();
 		const box = zoomTransformer.__getNodeRect();
-		const scale = Math.min(stage.width() / (zoomTransformer.width() + this.padding * 2), stage.height() / (zoomTransformer.height() + this.padding * 2));
-		stage.setAttrs({
-			x: -box.x * scale + (stage.width() - zoomTransformer.width() * scale) / 2,
-			y: -box.y * scale + (stage.height() - zoomTransformer.height() * scale) / 2
+		const stageBox = {
+			width: stage.width(),
+			height: stage.height()
+		};
+		const availableScreenWidth = stageBox.width - 2 * this.config.fitToSelection.padding;
+		const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding;
+		const scaleX = availableScreenWidth / box.width;
+		const scaleY = availableScreenHeight / box.height;
+		const scale = Math.min(scaleX, scaleY);
+		stage.scale({
+			x: scale,
+			y: scale
+		});
+		const selectionCenterX = box.x + box.width / 2;
+		const selectionCenterY = box.y + box.height / 2;
+		const canvasCenterX = stage.width() / (2 * scale);
+		const canvasCenterY = stage.height() / (2 * scale);
+		const stageX = (canvasCenterX - selectionCenterX) * scale;
+		const stageY = (canvasCenterY - selectionCenterY) * scale;
+		stage.position({
+			x: stageX,
+			y: stageY
 		});
 		this.setZoom(scale, false);
 		zoomTransformer.destroy();
@@ -21288,7 +21611,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		stage.container().style.cursor = "default";
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
-			const node = stage.findOne(`#${this.frameId}`);
+			const node = stage.findOne(`#${this.frameId}-selector-area`);
 			if (node) selectionPlugin.setSelectedNodes([node]);
 			this.instance.triggerAction("selectionTool");
 		}
@@ -22330,6 +22653,10 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			nodes
 		};
 	}
+	deleteGuides() {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+	}
 	evaluateGuidelines(e) {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
@@ -22337,14 +22664,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 		let skipNodes = [];
 		let node = void 0;
-		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length === 1) {
-			const actualTarget = e.target;
-			node = actualTarget.getNodes()[0];
+		if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) {
+			node = nodesSelectionPlugin.getTransformer().nodes()[0];
 			skipNodes.push(node.getAttrs().id ?? "");
 		}
-		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length > 1) {
-			const { nodes } = this.getSelectedNodesMetadata(e.target);
-			node = e.target;
+		if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length > 1) {
+			const { nodes } = this.getSelectedNodesMetadata(nodesSelectionPlugin.getTransformer());
+			node = nodesSelectionPlugin.getTransformer();
 			skipNodes = [...nodes];
 		}
 		if (e.type === "transform") node = e.target;