@inditextech/weave-sdk 0.4.0 → 0.6.0

package/dist/sdk.cjs

@@ -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;
@@ -15749,6 +15793,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const layer = new konva.default.Layer({ id: this.getLayerName() });
 		stage.add(layer);
 	}
+	isSelecting() {
+		return this.instance.getActiveAction() === "selectionTool";
+	}
+	isNodeSelected(ele) {
+		let selected = false;
+		if (this.getSelectedNodes().length === 1 && this.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
+		return selected;
+	}
 	onInit() {
 		const stage = this.instance.getStage();
 		const selectionLayer = this.getLayer();
@@ -15765,41 +15817,24 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		selectionLayer?.add(selectionRectangle);
 		const tr = new konva.default.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("transform", (e) => {
+			const node = e.target;
+			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.evaluateGuidelines(e);
+			if (this.isSelecting() && this.isNodeSelected(node)) {
+				const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+				this.instance.updateNode(nodeHandler.serialize(node));
+				e.cancelBubble = true;
+			}
+		});
+		tr.on("transformend", (e) => {
+			const node = e.target;
+			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+		});
 		tr.on("mouseenter", (e) => {
 			const stage$1 = this.instance.getStage();
 			stage$1.container().style.cursor = "grab";
@@ -16065,8 +16100,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;
 	}
@@ -16329,12 +16365,6 @@ var WeaveNode = class {
 			}
 			node.draggable(false);
 		});
-		node.on("transform", (e) => {
-			if (this.isSelecting() && this.isNodeSelected(node)) {
-				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
-			}
-		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
 				this.clearContainerTargets();
@@ -17679,6 +17709,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
@@ -17769,7 +17806,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.4.0";
+var version = "0.6.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18349,6 +18386,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);
 	}
@@ -18376,6 +18416,17 @@ var Weave = class extends Emittery {
 	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);
 	}
@@ -19398,44 +19449,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.default.Group({
 			...frameParams,
+			id,
 			containerId: `${id}-group-internal`,
 			containerOffsetX: 0,
-			containerOffsetY: titleHeight + strokeWidth,
-			isTarget: false,
-			width: frameWidth + strokeWidth * 2,
-			height: frameHeight + titleHeight + strokeWidth * 2,
+			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.default.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
 		});
@@ -19444,12 +19580,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,
@@ -19459,31 +19595,31 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new konva.default.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(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
 				stroke: "#000000ff",
-				strokeWidth: 2,
+				strokeWidth: props.borderWidth,
 				fill: "#ffffffff"
 			});
 		});
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
 			background.setAttrs({
 				stroke: "#ff6863ff",
-				strokeWidth: 2,
+				strokeWidth: props.borderWidth,
 				fill: "#ecececff"
 			});
 		});
@@ -19534,29 +19670,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();
@@ -19590,7 +19732,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(),
@@ -19602,52 +19744,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();
@@ -20619,8 +20761,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
 		};
@@ -20789,26 +20931,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;
@@ -20884,7 +21032,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;
@@ -20903,41 +21051,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 konva_lib_shapes_Line.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 konva_lib_shapes_Line.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
 			}));
 		}
@@ -20946,18 +21094,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 konva_lib_shapes_Circle.Circle({
 					x: pointX,
 					y: pointY,
@@ -20984,10 +21132,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();
 	}
 };
@@ -21167,6 +21315,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
@@ -21176,26 +21325,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 = {};
@@ -21206,7 +21352,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;
 		});
 	}
@@ -21236,14 +21382,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;
@@ -21264,7 +21407,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) {
@@ -21283,7 +21426,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,
@@ -21293,7 +21436,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,
@@ -21453,8 +21596,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;
 	}
@@ -21489,6 +21633,13 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 //#region src/plugins/nodes-snapping/constants.ts
 const WEAVE_NODES_SNAPPING_KEY = "nodesSnapping";
 const GUIDE_LINE_NAME = "guide-line";
+const GUIDE_LINE_DEFAULT_CONFIG = {
+	stroke: "rgb(0, 161, 255)",
+	strokeWidth: 1,
+	dash: [4, 6]
+};
+const GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = 10;
+const GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = 10;
 const GUIDE_ORIENTATION = {
 	["HORIZONTAL"]: "H",
 	["VERTICAL"]: "V"
@@ -21502,9 +21653,12 @@ const NODE_SNAP = {
 //#endregion
 //#region src/plugins/nodes-snapping/nodes-snapping.ts
 var WeaveNodesSnappingPlugin = class extends WeavePlugin {
-	constructor() {
+	constructor(params) {
 		super();
-		this.guideLineOffset = 10;
+		const { config } = params ?? {};
+		this.guideLineConfig = config?.guideLine ?? GUIDE_LINE_DEFAULT_CONFIG;
+		this.dragSnappingThreshold = config?.dragSnappingThreshold ?? GUIDE_LINE_DRAG_SNAPPING_THRESHOLD;
+		this.transformSnappingThreshold = config?.transformSnappingThreshold ?? GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD;
 		this.enabled = true;
 	}
 	getName() {
@@ -21516,42 +21670,76 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	setEnabled(enabled) {
 		this.enabled = enabled;
 	}
-	initEvents() {
-		const stage = this.instance.getStage();
+	evaluateGuidelines(e) {
 		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) {
-			stage.on("dragmove", (e) => {
-				if (!this.enabled) return;
-				if (e.target instanceof konva.default.Transformer) {
-					const actualTarget = e.target;
-					const node = actualTarget.getNodes()[0];
-					if (typeof node === "undefined") return;
-					mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
-					const lineGuideStops = this.getLineGuideStops(node);
-					const itemBounds = this.getObjectSnappingEdges(node);
-					const guides = this.getGuides(lineGuideStops, itemBounds);
-					if (!guides.length) return;
-					this.drawGuides(guides);
-					const absPos = node.absolutePosition();
+		if (!this.enabled) return;
+		if (!mainLayer) return;
+		let node = void 0;
+		if (e.type === "dragmove" && e.target instanceof konva.default.Transformer) {
+			const actualTarget = e.target;
+			node = actualTarget.getNodes()[0];
+		}
+		if (e.type === "transform") node = e.target;
+		if (typeof node === "undefined") return;
+		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+		const lineGuideStops = this.getLineGuideStops(node);
+		const itemBounds = this.getObjectSnappingEdges(node);
+		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
+		if (!guides.length) return;
+		this.drawGuides(guides);
+		if (e.type === "dragmove") {
+			const absPos = node.absolutePosition();
+			guides.forEach((lg) => {
+				switch (lg.orientation) {
+					case GUIDE_ORIENTATION.VERTICAL: {
+						absPos.x = lg.lineGuide + lg.offset;
+						break;
+					}
+					case GUIDE_ORIENTATION.HORIZONTAL: {
+						absPos.y = lg.lineGuide + lg.offset;
+						break;
+					}
+				}
+			});
+			node.absolutePosition(absPos);
+		}
+		if (e.type === "transform") {
+			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (nodesSelectionPlugin) {
+				const transformer = nodesSelectionPlugin.getTransformer();
+				transformer.anchorDragBoundFunc((_, newAbsPos) => {
+					const finalPos = { ...newAbsPos };
 					guides.forEach((lg) => {
 						switch (lg.orientation) {
 							case GUIDE_ORIENTATION.VERTICAL: {
-								absPos.x = lg.lineGuide + lg.offset;
+								const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
+								if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
 								break;
 							}
 							case GUIDE_ORIENTATION.HORIZONTAL: {
-								absPos.y = lg.lineGuide + lg.offset;
+								const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
+								if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
 								break;
 							}
 						}
 					});
-					node.absolutePosition(absPos);
-				}
-			});
-			stage.on("dragend", () => {
-				if (!this.enabled) return;
-				mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
-			});
+					return finalPos;
+				});
+			}
+		}
+	}
+	cleanupEvaluateGuidelines() {
+		const mainLayer = this.instance.getMainLayer();
+		if (!this.enabled) return;
+		if (!mainLayer) return;
+		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+	}
+	initEvents() {
+		const stage = this.instance.getStage();
+		const mainLayer = this.instance.getMainLayer();
+		if (mainLayer) {
+			stage.on("dragmove", this.evaluateGuidelines.bind(this));
+			stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
 		}
 	}
 	getLineGuideStops(skipShape) {
@@ -21588,7 +21776,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	getObjectSnappingEdges(node) {
 		const box = node.getClientRect();
 		const absPos = node.absolutePosition();
-		return {
+		const snappingEdges = {
 			vertical: [
 				{
 					guide: Math.round(box.x),
@@ -21624,14 +21812,15 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				}
 			]
 		};
+		return snappingEdges;
 	}
-	getGuides(lineGuideStops, itemBounds) {
+	getGuides(lineGuideStops, itemBounds, type) {
 		const resultV = [];
 		const resultH = [];
 		lineGuideStops.vertical.forEach((lineGuide) => {
 			itemBounds.vertical.forEach((itemBound) => {
 				const diff = Math.abs(lineGuide - itemBound.guide);
-				if (diff < this.guideLineOffset) resultV.push({
+				if (diff < this.dragSnappingThreshold) resultV.push({
 					lineGuide,
 					diff,
 					snap: itemBound.snap,
@@ -21642,7 +21831,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		lineGuideStops.horizontal.forEach((lineGuide) => {
 			itemBounds.horizontal.forEach((itemBound) => {
 				const diff = Math.abs(lineGuide - itemBound.guide);
-				if (diff < this.guideLineOffset) resultH.push({
+				if (diff < this.dragSnappingThreshold) resultH.push({
 					lineGuide,
 					diff,
 					snap: itemBound.snap,
@@ -21651,20 +21840,40 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			});
 		});
 		const guides = [];
-		const minV = resultV.sort((a, b) => a.diff - b.diff)[0];
-		const minH = resultH.sort((a, b) => a.diff - b.diff)[0];
-		if (minV) guides.push({
-			lineGuide: minV.lineGuide,
-			offset: minV.offset,
-			orientation: GUIDE_ORIENTATION.VERTICAL,
-			snap: minV.snap
-		});
-		if (minH) guides.push({
-			lineGuide: minH.lineGuide,
-			offset: minH.offset,
-			orientation: GUIDE_ORIENTATION.HORIZONTAL,
-			snap: minH.snap
-		});
+		if (type === "dragmove") {
+			const minV = resultV.sort((a, b) => a.diff - b.diff)[0];
+			const minH = resultH.sort((a, b) => a.diff - b.diff)[0];
+			if (minV) guides.push({
+				lineGuide: minV.lineGuide,
+				offset: minV.offset,
+				orientation: GUIDE_ORIENTATION.VERTICAL,
+				snap: minV.snap
+			});
+			if (minH) guides.push({
+				lineGuide: minH.lineGuide,
+				offset: minH.offset,
+				orientation: GUIDE_ORIENTATION.HORIZONTAL,
+				snap: minH.snap
+			});
+		}
+		if (type === "transform") {
+			resultV.forEach((v) => {
+				guides.push({
+					lineGuide: v.lineGuide,
+					offset: v.offset,
+					orientation: GUIDE_ORIENTATION.VERTICAL,
+					snap: v.snap
+				});
+			});
+			resultH.forEach((h) => {
+				guides.push({
+					lineGuide: h.lineGuide,
+					offset: h.offset,
+					orientation: GUIDE_ORIENTATION.HORIZONTAL,
+					snap: h.snap
+				});
+			});
+		}
 		return guides;
 	}
 	drawGuides(guides) {
@@ -21673,16 +21882,16 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		if (mainLayer) guides.forEach((lg) => {
 			if (lg.orientation === GUIDE_ORIENTATION.HORIZONTAL) {
 				const line = new konva.default.Line({
+					...this.guideLineConfig,
+					strokeWidth: (this.guideLineConfig.strokeWidth ?? GUIDE_LINE_DEFAULT_CONFIG.strokeWidth) / stage.scaleX(),
+					dash: this.guideLineConfig.dash?.map((e) => e / stage.scaleX()),
 					points: [
 						-6e3,
 						0,
 						6e3,
 						0
 					],
-					stroke: "rgb(0, 161, 255)",
-					strokeWidth: 1 / stage.scaleX(),
-					name: GUIDE_LINE_NAME,
-					dash: [4 / stage.scaleX(), 6 / stage.scaleX()]
+					name: GUIDE_LINE_NAME
 				});
 				mainLayer.add(line);
 				line.absolutePosition({
@@ -21692,16 +21901,16 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			}
 			if (lg.orientation === GUIDE_ORIENTATION.VERTICAL) {
 				const line = new konva.default.Line({
+					...this.guideLineConfig,
+					strokeWidth: (this.guideLineConfig.strokeWidth ?? GUIDE_LINE_DEFAULT_CONFIG.strokeWidth) / stage.scaleX(),
+					dash: this.guideLineConfig.dash?.map((e) => e / stage.scaleX()),
 					points: [
 						0,
 						-6e3,
 						0,
 						6e3
 					],
-					stroke: "rgb(0, 161, 255)",
-					strokeWidth: 1 / stage.scaleX(),
-					name: GUIDE_LINE_NAME,
-					dash: [4 / stage.scaleX(), 6 / stage.scaleX()]
+					name: GUIDE_LINE_NAME
 				});
 				mainLayer.add(line);
 				line.absolutePosition({
@@ -21724,7 +21933,10 @@ exports.BRUSH_TOOL_STATE = BRUSH_TOOL_STATE
 exports.COPY_PASTE_NODES_PLUGIN_STATE = COPY_PASTE_NODES_PLUGIN_STATE
 exports.FRAME_TOOL_ACTION_NAME = FRAME_TOOL_ACTION_NAME
 exports.FRAME_TOOL_STATE = FRAME_TOOL_STATE
+exports.GUIDE_LINE_DEFAULT_CONFIG = GUIDE_LINE_DEFAULT_CONFIG
+exports.GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = GUIDE_LINE_DRAG_SNAPPING_THRESHOLD
 exports.GUIDE_LINE_NAME = GUIDE_LINE_NAME
+exports.GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD
 exports.GUIDE_ORIENTATION = GUIDE_ORIENTATION
 exports.IMAGE_TOOL_STATE = IMAGE_TOOL_STATE
 exports.MOVE_TOOL_ACTION_NAME = MOVE_TOOL_ACTION_NAME
@@ -21737,8 +21949,16 @@ exports.SELECTION_TOOL_ACTION_NAME = SELECTION_TOOL_ACTION_NAME
 exports.SELECTION_TOOL_STATE = SELECTION_TOOL_STATE
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
+exports.WEAVE_FRAME_NODE_DEFAULT_PROPS = WEAVE_FRAME_NODE_DEFAULT_PROPS
+exports.WEAVE_FRAME_NODE_SIZES = WEAVE_FRAME_NODE_SIZES
+exports.WEAVE_FRAME_NODE_SIZES_MULTIPLIER = WEAVE_FRAME_NODE_SIZES_MULTIPLIER
+exports.WEAVE_FRAME_NODE_SIZES_ORIENTATION = WEAVE_FRAME_NODE_SIZES_ORIENTATION
+exports.WEAVE_FRAME_NODE_SIZES_TYPES = WEAVE_FRAME_NODE_SIZES_TYPES
 exports.WEAVE_FRAME_NODE_TYPE = WEAVE_FRAME_NODE_TYPE
+exports.WEAVE_GRID_DEFAULT_COLOR = WEAVE_GRID_DEFAULT_COLOR
+exports.WEAVE_GRID_DEFAULT_ORIGIN_COLOR = WEAVE_GRID_DEFAULT_ORIGIN_COLOR
 exports.WEAVE_GRID_DEFAULT_SIZE = WEAVE_GRID_DEFAULT_SIZE
+exports.WEAVE_GRID_DEFAULT_TYPE = WEAVE_GRID_DEFAULT_TYPE
 exports.WEAVE_GRID_LAYER_ID = WEAVE_GRID_LAYER_ID
 exports.WEAVE_GRID_TYPES = WEAVE_GRID_TYPES
 exports.WEAVE_NODES_SELECTION_KEY = WEAVE_NODES_SELECTION_KEY