@inditextech/weave-sdk 0.3.3 → 0.5.0

package/dist/sdk.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 import "konva/lib/types";
-import { WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION } from "@inditextech/weave-types";
+import { 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";
@@ -15627,18 +15627,25 @@ const WEAVE_NODES_SELECTION_LAYER_ID = "selectionLayer";
 //#endregion
 //#region src/plugins/context-menu/constants.ts
 const WEAVE_CONTEXT_MENU_KEY = "contextMenu";
+const WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT = 4;
+const WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT = 4;
 
 //#endregion
 //#region src/plugins/context-menu/context-menu.ts
 var WeaveContextMenuPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
-	constructor(options, callbacks) {
+	constructor(params) {
 		super();
 		this.touchTimer = void 0;
 		this.tapHold = false;
-		this.config = options;
-		this.callbacks = callbacks;
+		const { callbacks, config } = params ?? {};
+		this.config = {
+			xOffset: WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT,
+			yOffset: WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT,
+			...config
+		};
+		this.callbacks = { ...callbacks };
 	}
 	getName() {
 		return WEAVE_CONTEXT_MENU_KEY;
@@ -15648,7 +15655,7 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 	triggerContextMenu(target) {
 		const stage = this.instance.getStage();
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		const selectionPlugin = this.instance.getPlugin(WEAVE_NODES_SELECTION_KEY);
 		let clickOnTransformer = false;
 		if (selectionPlugin) {
 			const transformer = selectionPlugin.getTransformer();
@@ -15729,9 +15736,46 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
-	constructor(callbacks) {
+	constructor(params) {
 		super();
-		this.callbacks = callbacks;
+		const { config, callbacks } = params ?? {};
+		this.config = { transformer: {
+			rotationSnaps: [
+				0,
+				45,
+				90,
+				135,
+				180,
+				225,
+				270,
+				315,
+				360
+			],
+			rotationSnapTolerance: 3,
+			ignoreStroke: true,
+			flipEnabled: 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);
+				}
+			},
+			borderStroke: "#1e40afff",
+			...config?.transformer
+		} };
+		this.callbacks = callbacks ?? {};
 		this.active = false;
 		this.cameFromSelectingMultiple = false;
 		this.selecting = false;
@@ -15765,39 +15809,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		selectionLayer?.add(selectionRectangle);
 		const tr = new Konva.Transformer({
 			id: "selectionTransformer",
-			rotationSnaps: [
-				0,
-				45,
-				90,
-				135,
-				180,
-				225,
-				270,
-				315,
-				360
-			],
-			rotationSnapTolerance: 3,
-			ignoreStroke: true,
-			flipEnabled: 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);
-				}
-			},
-			borderStroke: "#1e40afff"
+			...this.config.transformer
 		});
 		selectionLayer?.add(tr);
 		tr.on("mouseenter", (e) => {
@@ -16065,8 +16077,9 @@ const COPY_PASTE_NODES_PLUGIN_STATE = {
 //#endregion
 //#region src/plugins/copy-paste-nodes/copy-paste-nodes.ts
 var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
-	constructor(callbacks) {
+	constructor(params) {
 		super();
+		const { callbacks } = params ?? {};
 		this.callbacks = callbacks;
 		this.state = COPY_PASTE_NODES_PLUGIN_STATE.IDLE;
 	}
@@ -16286,6 +16299,40 @@ var WeaveNode = class {
 		if (selectionPlugin.getSelectedNodes().length === 1 && selectionPlugin.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
 		return selected;
 	}
+	clearContainerTargets() {
+		const getContainers = this.instance.getContainerNodes();
+		for (const container of getContainers) container.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+	}
+	checkIfOverContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		return layerToMove;
+	}
+	moveNodeToContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== WEAVE_NODE_LAYER_ID) layerToMove = this.instance.getMainLayer();
+		if (layerToMove) {
+			const nodePos = node.getAbsolutePosition();
+			const nodeRotation = node.getAbsoluteRotation();
+			node.moveTo(layerToMove);
+			node.setAbsolutePosition(nodePos);
+			node.rotation(nodeRotation);
+			node.x(node.x() - (layerToMove.getAttrs().containerOffsetX ?? 0));
+			node.y(node.y() - (layerToMove.getAttrs().containerOffsetY ?? 0));
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			const actualNode = nodeHandler.serialize(node);
+			this.instance.removeNode(actualNode);
+			this.instance.addNode(actualNode, layerToMove?.getAttrs().id);
+		}
+		return layerToMove;
+	}
 	setupDefaultNodeEvents(node) {
 		this.previousPointer = null;
 		this.instance.addEventListener("onNodesChange", () => {
@@ -16303,14 +16350,18 @@ var WeaveNode = class {
 		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.checkIfOverContainer(e.target);
+				if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.moveNodeToContainer(e.target);
+				if (layerToMove) return;
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		this.previousPointer = null;
@@ -16960,6 +17011,27 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
+	pointIntersectsContainerElement(point) {
+		const stage = this.instance.getStage();
+		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+			x: 0,
+			y: 0
+		};
+		const intersections = this.instance.getMainLayer()?.getAllIntersections(relativeMousePointer);
+		let intersectedNode = void 0;
+		if (intersections) for (const node of intersections) {
+			if (node.getAttrs().nodeId) {
+				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
+				intersectedNode = parent;
+				break;
+			}
+			if (node.getAttrs().containerId) {
+				intersectedNode = node;
+				break;
+			}
+		}
+		return intersectedNode;
+	}
 	getMousePointer(point) {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
@@ -17431,6 +17503,17 @@ var WeaveStateManager = class {
 		});
 		return found;
 	}
+	getContainerNodes(tree) {
+		const found = [];
+		if (tree.props.containerId) {
+			found.push(tree);
+			return found;
+		}
+		if (tree.props?.children && tree.props.children.length > 0) tree.props.children.some((child) => {
+			found.push(...this.getContainerNodes(child));
+		});
+		return found;
+	}
 	getNode(nodeKey) {
 		const state = this.instance.getStore().getState().weave;
 		if ((0, import_lodash.isEmpty)(state)) return {
@@ -17609,6 +17692,13 @@ var WeaveStateManager = class {
 			}
 		}, userName);
 	}
+	getElementsTree() {
+		const state = this.instance.getStore().getState().weave;
+		const jsonState = JSON.parse(JSON.stringify(state, null, 2));
+		const mainLayer = jsonState.props.children.find((node) => node.key === "mainLayer");
+		if (!mainLayer) return [];
+		return mainLayer.props.children;
+	}
 };
 
 //#endregion
@@ -17699,7 +17789,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.3.3";
+var version = "0.5.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -17771,6 +17861,10 @@ var WeaveStageManager = class {
 		const stage = this.getStage();
 		return stage.findOne(`#${WEAVE_NODE_LAYER_ID}`);
 	}
+	getUtilityLayer() {
+		const stage = this.getStage();
+		return stage.findOne(`#${WEAVE_UTILITY_LAYER_ID}`);
+	}
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		const attributes = instance.getAttrs();
 		if (instance.getParent() && instance.getParent()?.getAttrs().nodeType && ![
@@ -17794,6 +17888,11 @@ var WeaveStageManager = class {
 		stage.draw();
 		this.setStage(stage);
 	}
+	getContainerNodes() {
+		return this.instance.getMainLayer()?.find((node) => {
+			return node.getAttrs().containerId;
+		});
+	}
 };
 
 //#endregion
@@ -18153,6 +18252,9 @@ var Weave = class extends Emittery {
 	getMainLayer() {
 		return this.stageManager.getMainLayer();
 	}
+	getUtilityLayer() {
+		return this.stageManager.getUtilityLayer();
+	}
 	setStage(stage) {
 		this.stageManager.setStage(stage);
 	}
@@ -18162,6 +18264,9 @@ var Weave = class extends Emittery {
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		return this.stageManager.getInstanceRecursive(instance, filterInstanceType);
 	}
+	getContainerNodes() {
+		return this.stageManager.getContainerNodes();
+	}
 	getRegisterManager() {
 		return this.registerManager;
 	}
@@ -18264,6 +18369,9 @@ var Weave = class extends Emittery {
 	moveNode(node, position, doRender = true) {
 		this.stateManager.moveNode(node, position, doRender);
 	}
+	getElementsTree() {
+		return this.stateManager.getElementsTree();
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -18282,12 +18390,26 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
+	pointIntersectsContainerElement(point) {
+		return this.targetingManager.pointIntersectsContainerElement(point);
+	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
 	}
 	getMousePointerRelativeToContainer(container) {
 		return this.targetingManager.getMousePointerRelativeToContainer(container);
 	}
+	selectNodesByKey(nodesIds) {
+		const selectionPlugin = this.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const stage = this.getStage();
+			const instanceNodes = nodesIds.map((nodeId) => {
+				const nodeInstance = stage.findOne(`#${nodeId}`);
+				return nodeInstance;
+			});
+			selectionPlugin.setSelectedNodes(instanceNodes);
+		}
+	}
 	nodesToGroupSerialized(instancesToClone) {
 		return this.cloningManager.nodesToGroupSerialized(instancesToClone);
 	}
@@ -19310,41 +19432,129 @@ var WeaveImageNode = class extends WeaveNode {
 //#endregion
 //#region src/nodes/frame/constants.ts
 const WEAVE_FRAME_NODE_TYPE = "frame";
+const WEAVE_FRAME_NODE_SIZES_MULTIPLIER = 5;
+const WEAVE_FRAME_NODE_SIZES_ORIENTATION = {
+	landscape: "landscape",
+	portrait: "portrait"
+};
+const WEAVE_FRAME_NODE_SIZES_TYPES = {
+	A1: "A1",
+	A2: "A2",
+	A3: "A3",
+	A4: "A4",
+	CUSTOM: "custom"
+};
+const WEAVE_FRAME_NODE_SIZES = {
+	landscape: {
+		A1: {
+			width: 841,
+			height: 594
+		},
+		A2: {
+			width: 592,
+			height: 420
+		},
+		A3: {
+			width: 420,
+			height: 297
+		},
+		A4: {
+			width: 297,
+			height: 210
+		},
+		custom: {
+			width: 0,
+			height: 0
+		}
+	},
+	portrait: {
+		A1: {
+			width: 594,
+			height: 841
+		},
+		A2: {
+			width: 420,
+			height: 594
+		},
+		A3: {
+			width: 297,
+			height: 420
+		},
+		A4: {
+			width: 210,
+			height: 297
+		},
+		custom: {
+			width: 0,
+			height: 0
+		}
+	}
+};
+const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
+	title: "Frame XXX",
+	fontFamily: "Arial",
+	titleHeight: 30,
+	borderColor: "#000000ff",
+	borderWidth: 2,
+	frameWidth: WEAVE_FRAME_NODE_SIZES.landscape.A4.width * WEAVE_FRAME_NODE_SIZES_MULTIPLIER,
+	frameHeight: WEAVE_FRAME_NODE_SIZES.landscape.A4.height * WEAVE_FRAME_NODE_SIZES_MULTIPLIER,
+	frameType: WEAVE_FRAME_NODE_SIZES_TYPES.A4,
+	frameOrientation: WEAVE_FRAME_NODE_SIZES_ORIENTATION.landscape
+};
 
 //#endregion
 //#region src/nodes/frame/frame.ts
 var WeaveFrameNode = class extends WeaveNode {
 	nodeType = WEAVE_FRAME_NODE_TYPE;
+	create(key, props) {
+		return {
+			key,
+			type: this.nodeType,
+			props: {
+				...props,
+				id: key,
+				nodeType: this.nodeType,
+				...WEAVE_FRAME_NODE_DEFAULT_PROPS,
+				...props.fontFamily && { title: props.fontFamily },
+				...props.title && { title: props.title },
+				...props.titleHeight && { titleHeight: props.titleHeight },
+				...props.borderColor && { borderColor: props.borderColor },
+				...props.borderWidth && { borderWidth: props.borderWidth },
+				...props.frameWidth && { frameWidth: props.frameWidth },
+				...props.frameHeight && { frameHeight: props.frameHeight },
+				...props.frameType && { frameType: props.frameType },
+				...props.frameOrientation && { frameOrientation: props.frameOrientation },
+				children: []
+			}
+		};
+	}
 	onRender(props) {
-		const { id } = props;
-		const frameParams = { ...props };
-		delete frameParams.fontFamily;
-		delete frameParams.zIndex;
-		const frameWidth = 1403;
-		const frameHeight = 992;
-		const titleHeight = 30;
-		const strokeWidth = 2;
+		const { id, zIndex,...restProps } = props;
+		const frameParams = { ...restProps };
 		const frame = new Konva.Group({
 			...frameParams,
+			id,
 			containerId: `${id}-group-internal`,
-			width: frameWidth + strokeWidth * 2,
-			height: frameHeight + titleHeight + strokeWidth * 2,
+			containerOffsetX: 0,
+			containerOffsetY: props.titleHeight + props.borderWidth,
+			width: props.frameWidth + props.borderWidth * 2,
+			height: props.frameHeight + props.titleHeight + props.borderWidth * 2,
 			fill: "#ffffffff",
 			clipX: 0,
 			clipY: 0,
-			clipWidth: frameWidth + strokeWidth * 2,
-			clipHeight: frameHeight + titleHeight + strokeWidth * 2,
+			clipWidth: props.frameWidth + props.borderWidth * 2,
+			clipHeight: props.frameHeight + props.titleHeight + props.borderWidth * 2,
 			name: "node"
 		});
 		const background = new Konva.Rect({
 			id: `${id}-bg`,
 			nodeId: id,
-			x: strokeWidth,
-			y: titleHeight + strokeWidth,
-			width: frameWidth,
-			stroke: "#000000ff",
-			strokeWidth: 2,
-			height: frameHeight,
+			x: props.borderWidth,
+			y: props.titleHeight + props.borderWidth,
+			width: props.frameWidth,
+			stroke: props.borderColor,
+			strokeWidth: props.borderWidth,
+			height: props.frameHeight,
 			fill: "#ffffffff",
 			draggable: false
 		});
@@ -19353,12 +19563,12 @@ var WeaveFrameNode = class extends WeaveNode {
 			id: `${id}-title`,
 			x: 0,
 			y: 0,
-			width: frameWidth,
-			height: titleHeight - 10,
+			width: props.frameWidth,
+			height: props.titleHeight - 10,
 			fontSize: 20,
 			fontFamily: props.fontFamily,
 			align: "left",
-			text: frameParams.title,
+			text: props.title,
 			stroke: "#000000ff",
 			strokeWidth: 1,
 			listening: false,
@@ -19368,20 +19578,34 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new Konva.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: strokeWidth,
-			y: titleHeight + strokeWidth,
-			width: frameWidth,
-			height: frameHeight,
+			x: props.borderWidth,
+			y: props.titleHeight + props.borderWidth,
+			width: props.frameWidth,
+			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
-			strokeWidth,
+			borderWidth: props.borderWidth,
 			clipX: 0,
 			clipY: 0,
-			clipWidth: frameWidth,
-			clipHeight: frameHeight
+			clipWidth: props.frameWidth,
+			clipHeight: props.frameHeight
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
+		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
+			background.setAttrs({
+				stroke: "#000000ff",
+				strokeWidth: props.borderWidth,
+				fill: "#ffffffff"
+			});
+		});
+		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
+			background.setAttrs({
+				stroke: "#ff6863ff",
+				strokeWidth: props.borderWidth,
+				fill: "#ecececff"
+			});
+		});
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {
@@ -19429,29 +19653,35 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
 	padding = 100;
+	defaultStep = 3;
 	constructor(params) {
 		super();
-		const { zoomSteps = [
-			.1,
-			.25,
-			.5,
-			1,
-			2,
-			4,
-			8
-		], defaultZoom = 1, onZoomChange } = params;
-		this.zoomSteps = zoomSteps;
-		if (!this.zoomSteps.includes(defaultZoom)) throw new Error(`Default zoom ${defaultZoom} is not in zoom steps`);
-		this.actualStep = zoomSteps.findIndex((step) => step === defaultZoom);
-		this.actualScale = this.zoomSteps[this.actualStep];
+		const { config, callbacks } = params;
+		this.config = {
+			zoomSteps: [
+				.1,
+				.25,
+				.5,
+				1,
+				2,
+				4,
+				8
+			],
+			defaultZoom: 1,
+			...config
+		};
+		this.callbacks = callbacks ?? {};
+		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
+		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
+		this.actualScale = this.config.zoomSteps[this.actualStep];
 		this.defaultStep = this.actualStep;
-		this.onZoomChangeCb = onZoomChange;
+		this.onZoomChangeCb = this.callbacks?.onZoomChange;
 	}
 	getName() {
 		return WEAVE_STAGE_ZOOM_KEY;
 	}
 	onInit() {
-		this.setZoom(this.zoomSteps[this.actualStep]);
+		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true) {
 		const stage = this.instance.getStage();
@@ -19485,7 +19715,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			}
 			const callbackParams = {
 				scale,
-				zoomSteps: this.zoomSteps,
+				zoomSteps: this.config.zoomSteps,
 				actualStep: this.actualStep,
 				onDefaultStep: this.actualStep === this.defaultStep,
 				canZoomIn: this.canZoomIn(),
@@ -19497,52 +19727,52 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	}
 	canZoomOut() {
 		if (!this.enabled) return false;
-		const actualZoomIsStep = this.zoomSteps.findIndex((scale) => scale === this.actualScale);
+		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
 		return this.actualStep - 1 > 0;
 	}
 	canZoomIn() {
 		if (!this.enabled) return false;
-		const actualZoomIsStep = this.zoomSteps.findIndex((scale) => scale === this.actualScale);
+		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
-		return this.actualStep + 1 < this.zoomSteps.length;
+		return this.actualStep + 1 < this.config.zoomSteps.length;
 	}
 	zoomToStep(step) {
 		if (!this.enabled) return;
-		if (step < 0 || step >= this.zoomSteps.length) throw new Error(`Defined step ${step} is out of bounds`);
+		if (step < 0 || step >= this.config.zoomSteps.length) throw new Error(`Defined step ${step} is out of bounds`);
 		this.actualStep = step;
-		this.setZoom(this.zoomSteps[step]);
+		this.setZoom(this.config.zoomSteps[step]);
 	}
 	findClosestStepIndex() {
 		let closestStepIndex = 0;
 		let actualDiff = Infinity;
-		for (let i = 0; i < this.zoomSteps.length; i++) if (Math.abs(this.zoomSteps[i] - this.actualScale) < actualDiff) {
+		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.zoomSteps[i] - this.actualScale);
+			actualDiff = Math.abs(this.config.zoomSteps[i] - this.actualScale);
 		}
 		return closestStepIndex;
 	}
 	zoomIn() {
 		if (!this.enabled) return;
 		if (!this.canZoomIn()) return;
-		const actualZoomIsStep = this.zoomSteps.findIndex((scale) => scale === this.actualScale);
+		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
 		else this.actualStep += 1;
-		this.setZoom(this.zoomSteps[this.actualStep]);
+		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	zoomOut() {
 		if (!this.enabled) return;
 		if (!this.canZoomOut()) return;
-		const actualZoomIsStep = this.zoomSteps.findIndex((scale) => scale === this.actualScale);
+		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex();
 		else this.actualStep -= 1;
-		this.setZoom(this.zoomSteps[this.actualStep]);
+		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	fitToScreen() {
 		if (!this.enabled) return;
 		const mainLayer = this.instance.getMainLayer();
 		if (mainLayer?.getChildren().length === 0) {
-			this.setZoom(this.zoomSteps[this.defaultStep]);
+			this.setZoom(this.config.zoomSteps[this.defaultStep]);
 			return;
 		}
 		const stage = this.instance.getStage();
@@ -20514,8 +20744,8 @@ var WeaveFrameToolAction = class extends WeaveAction {
 	}
 	initProps(params) {
 		return {
-			title: "Frame XXX",
-			fontFamily: params?.fontFamily ?? "Arial",
+			title: params?.title ?? WEAVE_FRAME_NODE_DEFAULT_PROPS.title,
+			fontFamily: params?.fontFamily ?? WEAVE_FRAME_NODE_DEFAULT_PROPS.fontFamily,
 			editing: false,
 			opacity: 1
 		};
@@ -20684,26 +20914,32 @@ var WeaveExportNodeToolAction = class extends WeaveAction {
 //#endregion
 //#region src/plugins/stage-grid/constants.ts
 const WEAVE_STAGE_GRID_KEY = "stageGrid";
-const WEAVE_GRID_DEFAULT_SIZE = 50;
-const WEAVE_GRID_LAYER_ID = "gridLayer";
 const WEAVE_GRID_TYPES = {
 	["LINES"]: "lines",
 	["DOTS"]: "dots"
 };
+const WEAVE_GRID_DEFAULT_SIZE = 50;
+const WEAVE_GRID_DEFAULT_TYPE = WEAVE_GRID_TYPES.LINES;
+const WEAVE_GRID_DEFAULT_COLOR = "rgba(0,0,0,0.2)";
+const WEAVE_GRID_DEFAULT_ORIGIN_COLOR = "rgba(255,0,0,0.2)";
+const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
 //#region src/plugins/stage-grid/stage-grid.ts
 var WeaveStageGridPlugin = class extends WeavePlugin {
-	type = "lines";
-	gridColor = "rgba(0,0,0,0.2)";
-	originColor = "rgba(255,0,0,0.2)";
 	constructor(params) {
 		super();
-		const { gridSize = WEAVE_GRID_DEFAULT_SIZE } = params;
+		const { config } = params ?? {};
 		this.moveToolActive = false;
 		this.isMouseMiddleButtonPressed = false;
 		this.isSpaceKeyPressed = false;
-		this.gridSize = gridSize;
+		this.config = {
+			type: WEAVE_GRID_DEFAULT_TYPE,
+			gridColor: WEAVE_GRID_DEFAULT_COLOR,
+			gridOriginColor: WEAVE_GRID_DEFAULT_ORIGIN_COLOR,
+			gridSize: WEAVE_GRID_DEFAULT_SIZE,
+			...config
+		};
 	}
 	getName() {
 		return WEAVE_STAGE_GRID_KEY;
@@ -20779,7 +21015,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		if (!layer) return;
 		layer.destroyChildren();
 		if (!this.enabled) return;
-		switch (this.type) {
+		switch (this.config.type) {
 			case WEAVE_GRID_TYPES.LINES:
 				this.renderGridLines();
 				break;
@@ -20798,41 +21034,41 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const layer = this.getLayer();
 		if (!layer) return;
 		const stage = this.instance.getStage();
-		const stageXRound = this.round(stage.x(), this.gridSize) * -1;
+		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.gridSize) pointsX.push(i / stage.scaleX());
-		const stageYRound = this.round(stage.y(), this.gridSize) * -1;
+		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let index = 0; index < pointsX.length; index++) {
 			const point = pointsX[index];
-			let color = this.gridColor;
-			if (point === 0) color = this.originColor;
+			let color = this.config.gridColor;
+			if (point === 0) color = this.config.gridOriginColor;
 			layer.add(new Line({
 				points: [
 					point,
-					(-stage.y() - 2 * this.gridSize) / stage.scaleY(),
+					(-stage.y() - 2 * this.config.gridSize) / stage.scaleY(),
 					point,
-					(stage.height() - stage.y() + 2 * this.gridSize) / stage.scaleY()
+					(stage.height() - stage.y() + 2 * this.config.gridSize) / stage.scaleY()
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.gridSize / stage.scaleX())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleX())) === 0 ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
 		for (let index = 0; index < pointsY.length; index++) {
 			const point = pointsY[index];
-			let color = this.gridColor;
-			if (point === 0) color = this.originColor;
+			let color = this.config.gridColor;
+			if (point === 0) color = this.config.gridOriginColor;
 			layer.add(new Line({
 				points: [
-					(-stage.x() - 2 * this.gridSize) / stage.scaleX(),
+					(-stage.x() - 2 * this.config.gridSize) / stage.scaleX(),
 					point,
-					(stage.width() - stage.x() + 2 * this.gridSize) / stage.scaleX(),
+					(stage.width() - stage.x() + 2 * this.config.gridSize) / stage.scaleX(),
 					point
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.gridSize / stage.scaleY())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleY())) === 0 ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -20841,18 +21077,18 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const layer = this.getLayer();
 		if (!layer) return;
 		const stage = this.instance.getStage();
-		const stageXRound = this.round(stage.x(), this.gridSize) * -1;
+		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.gridSize) pointsX.push(i / stage.scaleX());
-		const stageYRound = this.round(stage.y(), this.gridSize) * -1;
+		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let indexX = 0; indexX < pointsX.length; indexX++) {
 			const pointX = pointsX[indexX];
 			for (let indexY = 0; indexY < pointsY.length; indexY++) {
 				const pointY = pointsY[indexY];
-				let color = this.gridColor;
-				if (pointX === 0 || pointY === 0) color = this.originColor;
+				let color = this.config.gridColor;
+				if (pointX === 0 || pointY === 0) color = this.config.gridOriginColor;
 				layer.add(new Circle({
 					x: pointX,
 					y: pointY,
@@ -20879,10 +21115,10 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		this.onRender();
 	}
 	getType() {
-		return this.type;
+		return this.config.type;
 	}
 	setType(type) {
-		this.type = type;
+		this.config.type = type;
 		this.onRender();
 	}
 };
@@ -21062,6 +21298,7 @@ var WeaveStageResizePlugin = class extends WeavePlugin {
 
 //#endregion
 //#region src/plugins/connected-users/constants.ts
+const WEAVE_CONNECTED_USERS_KEY = "connectedUsers";
 const WEAVE_CONNECTED_USER_INFO_KEY = "userInfo";
 
 //#endregion
@@ -21071,26 +21308,23 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	constructor(params) {
 		super();
-		const { getUser, onConnectedUsersChanged } = params;
+		const { config, callbacks } = params ?? {};
+		this.config = config;
+		this.callbacks = callbacks ?? {};
 		this.connectedUsers = {};
-		this.onConnectedUsersChanged = onConnectedUsersChanged;
-		this.getUser = getUser ?? (() => ({
-			name: "Unknown",
-			email: "unknown@domain.com"
-		}));
 	}
 	getName() {
-		return "connectedUsers";
+		return WEAVE_CONNECTED_USERS_KEY;
 	}
 	onInit() {
 		const store = this.instance.getStore();
-		const userInfo = this.getUser();
+		const userInfo = this.config.getUser();
 		store.setAwarenessInfo(WEAVE_CONNECTED_USER_INFO_KEY, userInfo);
-		this.onConnectedUsersChanged?.({ [userInfo.name]: userInfo });
+		this.callbacks?.onConnectedUsersChanged?.({ [userInfo.name]: userInfo });
 		store.onAwarenessChange((changes) => {
 			if (!this.enabled) {
 				this.connectedUsers = {};
-				this.onConnectedUsersChanged?.({});
+				this.callbacks?.onConnectedUsersChanged?.({});
 				return;
 			}
 			const newConnectedUsers = {};
@@ -21101,7 +21335,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.name] = userInformation;
 				}
 			}
-			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.onConnectedUsersChanged?.(newConnectedUsers);
+			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.callbacks?.onConnectedUsersChanged?.(newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}
@@ -21131,14 +21365,11 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	userPointerBackgroundPaddingY = 8;
 	constructor(params) {
 		super();
-		const { getUser } = params;
+		const { config } = params;
 		this.renderCursors = true;
 		this.usersPointers = {};
 		this.usersPointersTimers = {};
-		this.getUser = getUser ?? (() => ({
-			name: "Unknown",
-			email: "unknown@domain.com"
-		}));
+		this.config = config;
 	}
 	getName() {
 		return WEAVE_USERS_POINTERS_KEY;
@@ -21159,7 +21390,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		const store = this.instance.getStore();
 		const stage = this.instance.getStage();
 		store.onAwarenessChange((changes) => {
-			const selfUser = this.getUser();
+			const selfUser = this.config.getUser();
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
 				if (change[WEAVE_USER_POINTER_KEY] && selfUser.name !== change[WEAVE_USER_POINTER_KEY].user) {
@@ -21178,7 +21409,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		});
 		stage.on("dragmove", (e) => {
 			e.evt.preventDefault();
-			const userInfo = this.getUser();
+			const userInfo = this.config.getUser();
 			const mousePos = stage.getRelativePointerPosition();
 			if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
 				user: userInfo.name,
@@ -21188,7 +21419,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		});
 		stage.on("pointermove", (e) => {
 			e.evt.preventDefault();
-			const userInfo = this.getUser();
+			const userInfo = this.config.getUser();
 			const mousePos = stage.getRelativePointerPosition();
 			if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
 				user: userInfo.name,
@@ -21348,8 +21579,9 @@ const WEAVE_STAGE_DROP_AREA_KEY = "stageDropArea";
 var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
-	constructor(callbacks) {
+	constructor(params) {
 		super();
+		const { callbacks } = params ?? {};
 		this.callbacks = callbacks;
 		this.enabled = true;
 	}
@@ -21615,4 +21847,4 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
-export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_NAME, GUIDE_ORIENTATION, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, resetScale };
+export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_NAME, GUIDE_ORIENTATION, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, TEXT_TOOL_STATE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_STAGE_GRID_KEY, Weave, WeaveAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, resetScale };