@inditextech/weave-sdk 0.7.1 → 0.9.0

package/dist/sdk.js

@@ -15484,6 +15484,7 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
 		} else root._ = _;
 	}).call(exports);
 } });
+var import_lodash$1 = __toESM(require_lodash());
 var import_lodash = __toESM(require_lodash(), 1);
 
 //#endregion
@@ -15571,13 +15572,13 @@ var WeaveStore = class {
 			const newState = JSON.parse(JSON.stringify(this.getState()));
 			config.callbacks?.onStateChange?.(newState);
 			this.instance.emitEvent("onStateChange", newState);
-			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
+			if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
-			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
+			if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
 		});
 	}
 	canUndoStateStep() {
@@ -15639,13 +15640,12 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		super();
 		this.touchTimer = void 0;
 		this.tapHold = false;
-		const { callbacks, config } = params ?? {};
+		const { 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;
@@ -15682,7 +15682,11 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 				x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 				y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 			};
-			this.callbacks.onNodeMenu?.(this.instance, nodes, point, true);
+			this.instance.emitEvent("onNodeContextMenu", {
+				selection: nodes,
+				point,
+				visible: true
+			});
 		}
 	}
 	initEvents() {
@@ -15718,7 +15722,11 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 					x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 					y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 				};
-				this.callbacks.onNodeMenu?.(this.instance, [], point, false);
+				this.instance.emitEvent("onNodeContextMenu", {
+					selection: [],
+					point,
+					visible: false
+				});
 			}
 		});
 	}
@@ -15738,7 +15746,7 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
-		const { config, callbacks } = params ?? {};
+		const { config } = params ?? {};
 		this.config = { transformer: {
 			rotationSnaps: [
 				0,
@@ -15776,7 +15784,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			borderStroke: "#1e40afff",
 			...config?.transformer
 		} };
-		this.callbacks = callbacks ?? {};
 		this.active = false;
 		this.cameFromSelectingMultiple = false;
 		this.selecting = false;
@@ -15794,6 +15801,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const layer = new Konva.Layer({ id: this.getLayerName() });
 		stage.add(layer);
 	}
+	isPasting() {
+		const copyPastePlugin = this.instance.getPlugin("copyPasteNodes");
+		return copyPastePlugin.isPasting();
+	}
 	isSelecting() {
 		return this.instance.getActiveAction() === "selectionTool";
 	}
@@ -15837,14 +15848,18 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			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";
-			e.cancelBubble = true;
+			if (!this.isPasting()) {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "grab";
+				e.cancelBubble = true;
+			}
 		});
 		tr.on("mouseleave", (e) => {
-			const stage$1 = this.instance.getStage();
-			stage$1.container().style.cursor = "default";
-			e.cancelBubble = true;
+			if (!this.isPasting()) {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "default";
+				e.cancelBubble = true;
+			}
 		});
 		this.tr = tr;
 		this.selectionRectangle = selectionRectangle;
@@ -15892,7 +15907,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				node: nodeHandler.serialize(node)
 			};
 		});
-		this.callbacks?.onNodesChange?.(selectedNodes);
 		this.instance.emitEvent("onNodesChange", selectedNodes);
 	}
 	initEvents() {
@@ -16012,10 +16026,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (e.target instanceof Konva.Stage && !selectedGroup) {
 				this.tr.nodes([]);
 				this.triggerSelectedNodesEvent();
-				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) {
-					this.callbacks?.onStageSelection?.();
-					this.instance.emitEvent("onStageSelection", void 0);
-				}
+				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) this.instance.emitEvent("onStageSelection");
 				return;
 			}
 			const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
@@ -16066,6 +16077,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	getSelectedNodes() {
 		return this.tr.nodes();
 	}
+	getSelectedNodesExtended() {
+		const selectedNodes = this.tr.getNodes().map((node) => {
+			const nodeType = node.getAttr("nodeType");
+			const nodeHandler = this.instance.getNodeHandler(nodeType);
+			return {
+				instance: node,
+				node: nodeHandler.serialize(node)
+			};
+		});
+		return selectedNodes;
+	}
 	removeSelectedNodes() {
 		const selectedNodes = this.tr.getNodes();
 		for (const node of selectedNodes) node.destroy();
@@ -16101,10 +16123,8 @@ const COPY_PASTE_NODES_PLUGIN_STATE = {
 //#endregion
 //#region src/plugins/copy-paste-nodes/copy-paste-nodes.ts
 var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
-	constructor(params) {
+	constructor() {
 		super();
-		const { callbacks } = params ?? {};
-		this.callbacks = callbacks;
 		this.state = COPY_PASTE_NODES_PLUGIN_STATE.IDLE;
 	}
 	getName() {
@@ -16161,18 +16181,15 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				await this.readClipboardData();
 				this.performPaste();
 			} catch (ex) {
-				this.callbacks?.onPaste?.(ex);
 				this.instance.emitEvent("onPaste", ex);
 			}
 			try {
 				const items$1 = await navigator.clipboard.read();
 				if (items$1 && items$1.length === 1) {
 					const item = items$1[0];
-					this.callbacks?.onPasteExternal?.(item);
 					this.instance.emitEvent("onPasteExternal", item);
 				}
 			} catch (ex) {
-				this.callbacks?.onPaste?.(ex);
 				this.instance.emitEvent("onPaste", ex);
 			}
 		};
@@ -16213,7 +16230,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				node.props.x = mousePoint.x + (node.props.x - this.toPaste.weaveMinPoint.x);
 				node.props.y = mousePoint.y + (node.props.y - this.toPaste.weaveMinPoint.y);
 				this.instance.addNode(node, container?.getAttr("id"));
-				this.callbacks?.onPaste?.();
+				this.instance.emitEvent("onPaste");
 				this.instance.emitEvent("onPaste", void 0);
 			}
 			this.toPaste = void 0;
@@ -16243,10 +16260,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			for (const serializedNode of result.serializedNodes) copyClipboard.weave[serializedNode.key ?? ""] = serializedNode;
 			try {
 				await this.writeClipboardData(JSON.stringify(copyClipboard));
-				this.callbacks?.onCopy?.();
-				this.instance.emitEvent("onCopy", void 0);
+				this.instance.emitEvent("onCopy");
 			} catch (ex) {
-				this.callbacks?.onCopy?.(ex);
 				this.instance.emitEvent("onCopy", ex);
 			}
 		}
@@ -16390,6 +16405,14 @@ var WeaveNode = class {
 				this.previousPointer = stage.container().style.cursor;
 				stage.container().style.cursor = "pointer";
 				e.cancelBubble = true;
+				return;
+			}
+			if (this.isPasting()) {
+				const stage = this.instance.getStage();
+				this.previousPointer = stage.container().style.cursor;
+				stage.container().style.cursor = "crosshair";
+				e.cancelBubble = true;
+				return;
 			}
 		});
 		node.on("mouseleave", (e) => {
@@ -16399,6 +16422,14 @@ var WeaveNode = class {
 				stage.container().style.cursor = this.previousPointer ?? "default";
 				this.previousPointer = null;
 				e.cancelBubble = true;
+				return;
+			}
+			if (this.isPasting()) {
+				const stage = this.instance.getStage();
+				this.previousPointer = stage.container().style.cursor;
+				stage.container().style.cursor = "crosshair";
+				e.cancelBubble = true;
+				return;
 			}
 		});
 	}
@@ -16437,12 +16468,14 @@ var WeaveNode = class {
 //#endregion
 //#region src/actions/action.ts
 var WeaveAction = class {
-	constructor(callbacks) {
-		this.callbacks = callbacks;
+	constructor() {
 		return new Proxy(this, { set: (target, key, value) => {
 			Reflect.set(target, key, value);
-			this.internalUpdate?.();
-			this.callbacks?.onPropsChange?.(this.props);
+			this.onPropsChange?.();
+			this.instance?.emitEvent("onPropsChange", {
+				instance: this,
+				props: this.props
+			});
 			return true;
 		} });
 	}
@@ -17807,7 +17840,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.7.1";
+var version = "0.9.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18818,10 +18851,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
 	update = void 0;
-	constructor(imageCallbacks) {
-		const { onPropsChange,...restCallbacks } = imageCallbacks;
-		super({ onPropsChange });
-		this.imageCallbacks = restCallbacks;
+	constructor() {
+		super();
 		this.initialized = false;
 		this.state = IMAGE_TOOL_STATE.IDLE;
 		this.imageId = null;
@@ -18902,7 +18933,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 			console.error(error);
 		};
 		this.preloadImgs[this.imageId].onload = () => {
-			this.imageCallbacks?.onImageLoadEnd?.();
+			this.instance.emitEvent("onImageLoadEnd", void 0);
 			if (this.imageId) this.props = {
 				...this.props,
 				width: this.preloadImgs[this.imageId].width,
@@ -18911,11 +18942,11 @@ var WeaveImageToolAction = class extends WeaveAction {
 			this.addImageNode();
 		};
 		this.preloadImgs[this.imageId].onerror = () => {
-			this.imageCallbacks?.onImageLoadEnd?.(new Error("Error loading image"));
+			this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
 			this.cancelAction();
 		};
 		this.preloadImgs[this.imageId].src = imageURL;
-		this.imageCallbacks?.onImageLoadStart?.();
+		this.instance.emitEvent("onImageLoadStart");
 	}
 	addImageNode() {
 		const stage = this.instance.getStage();
@@ -18941,7 +18972,6 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.setState(IMAGE_TOOL_STATE.ADDING);
 	}
 	addImage() {
-		this.imageCallbacks?.onUploadImage(this.loadImage.bind(this));
 		this.setState(IMAGE_TOOL_STATE.UPLOADING);
 	}
 	handleAdding() {
@@ -18984,7 +19014,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.addImage();
 		return { finishUploadCallback: this.loadImage.bind(this) };
 	}
-	internalUpdate() {
+	onPropsChange() {
 		const stage = this.instance?.getStage();
 		if (stage) {
 			const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
@@ -19509,12 +19539,23 @@ const WEAVE_FRAME_NODE_SIZES = {
 		}
 	}
 };
-const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
-	title: "Frame XXX",
+const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	fontFamily: "Arial",
+	fontStyle: "normal",
 	titleHeight: 30,
 	borderColor: "#000000ff",
 	borderWidth: 2,
+	onTargetLeave: {
+		borderColor: "#000000ff",
+		fill: "#ffffffff"
+	},
+	onTargetEnter: {
+		borderColor: "#ff6863ff",
+		fill: "#ecececff"
+	}
+};
+const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
+	title: "Frame XXX",
 	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,
@@ -19525,6 +19566,14 @@ const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
 //#region src/nodes/frame/frame.ts
 var WeaveFrameNode = class extends WeaveNode {
 	nodeType = WEAVE_FRAME_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = {
+			...WEAVE_FRAME_NODE_DEFAULT_CONFIG,
+			...config
+		};
+	}
 	create(key, props) {
 		return {
 			key,
@@ -19533,12 +19582,9 @@ var WeaveFrameNode = class extends WeaveNode {
 				...props,
 				id: key,
 				nodeType: this.nodeType,
+				...this.config,
 				...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 },
@@ -19549,30 +19595,31 @@ var WeaveFrameNode = class extends WeaveNode {
 	}
 	onRender(props) {
 		const { id, zIndex,...restProps } = props;
+		const { fontFamily, fontStyle, titleHeight, borderColor, borderWidth, onTargetEnter: { borderColor: onTargetEnterBorderColor, fill: onTargetEnterFill }, onTargetLeave: { borderColor: onTargetLeaveBorderColor, fill: onTargetLeaveFill } } = this.config;
 		const frameParams = { ...restProps };
 		const frame = new Konva.Group({
 			...frameParams,
 			id,
 			containerId: `${id}-group-internal`,
 			containerOffsetX: 0,
-			containerOffsetY: props.titleHeight + props.borderWidth,
-			width: props.frameWidth + props.borderWidth * 2,
-			height: props.frameHeight + props.titleHeight + props.borderWidth * 2,
+			containerOffsetY: titleHeight + borderWidth,
+			width: props.frameWidth + borderWidth * 2,
+			height: props.frameHeight + titleHeight + borderWidth * 2,
 			fill: "#ffffffff",
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth + props.borderWidth * 2,
-			clipHeight: props.frameHeight + props.titleHeight + props.borderWidth * 2,
+			clipWidth: props.frameWidth + borderWidth * 2,
+			clipHeight: props.frameHeight + titleHeight + borderWidth * 2,
 			name: "node"
 		});
 		const background = new Konva.Rect({
 			id: `${id}-bg`,
 			nodeId: id,
-			x: props.borderWidth,
-			y: props.titleHeight + props.borderWidth,
+			x: borderWidth,
+			y: titleHeight + borderWidth,
 			width: props.frameWidth,
-			stroke: props.borderColor,
-			strokeWidth: props.borderWidth,
+			stroke: borderColor,
+			strokeWidth: borderWidth,
 			strokeScaleEnabled: false,
 			height: props.frameHeight,
 			fill: "#ffffffff",
@@ -19584,9 +19631,10 @@ var WeaveFrameNode = class extends WeaveNode {
 			x: 0,
 			y: 0,
 			width: props.frameWidth,
-			height: props.titleHeight - 10,
+			height: titleHeight - 10,
 			fontSize: 20,
-			fontFamily: props.fontFamily,
+			fontFamily,
+			fontStyle,
 			align: "left",
 			text: props.title,
 			stroke: "#000000ff",
@@ -19599,14 +19647,14 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new Konva.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: props.borderWidth,
-			y: props.titleHeight + props.borderWidth,
+			x: borderWidth,
+			y: titleHeight + borderWidth,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
 			strokeScaleEnabled: false,
-			borderWidth: props.borderWidth,
+			borderWidth,
 			clipX: 0,
 			clipY: 0,
 			clipWidth: props.frameWidth,
@@ -19616,16 +19664,16 @@ var WeaveFrameNode = class extends WeaveNode {
 		this.setupDefaultNodeEvents(frame);
 		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
-				stroke: "#000000ff",
-				strokeWidth: props.borderWidth,
-				fill: "#ffffffff"
+				stroke: onTargetLeaveBorderColor,
+				strokeWidth: borderWidth,
+				fill: onTargetLeaveFill
 			});
 		});
 		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
 			background.setAttrs({
-				stroke: "#ff6863ff",
-				strokeWidth: props.borderWidth,
-				fill: "#ecececff"
+				stroke: onTargetEnterBorderColor,
+				strokeWidth: borderWidth,
+				fill: onTargetEnterFill
 			});
 		});
 		return frame;
@@ -19634,7 +19682,6 @@ var WeaveFrameNode = class extends WeaveNode {
 		const { id } = nextProps;
 		const frameNode = nodeInstance;
 		const newProps = { ...nextProps };
-		delete newProps.title;
 		nodeInstance.setAttrs({ ...newProps });
 		const frameTitle = frameNode.findOne(`#${id}-title`);
 		if (frameTitle) frameTitle.setAttrs({ text: nextProps.title });
@@ -19678,7 +19725,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	defaultStep = 3;
 	constructor(params) {
 		super();
-		const { config, callbacks } = params;
+		const { config } = params ?? {};
 		this.config = {
 			zoomSteps: [
 				.1,
@@ -19692,12 +19739,10 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			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 = this.callbacks?.onZoomChange;
 	}
 	getName() {
 		return WEAVE_STAGE_ZOOM_KEY;
@@ -19743,7 +19788,6 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				canZoomIn: this.canZoomIn(),
 				canZoomOut: this.canZoomOut()
 			};
-			this.onZoomChangeCb?.(callbackParams);
 			this.instance.emitEvent("onZoomChange", callbackParams);
 		}
 	}
@@ -19857,7 +19901,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/actions/zoom-out-tool/zoom-out-tool.ts
 var WeaveZoomOutToolAction = class extends WeaveAction {
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	getName() {
 		return "zoomOutTool";
 	}
@@ -19886,7 +19930,7 @@ var WeaveZoomOutToolAction = class extends WeaveAction {
 //#endregion
 //#region src/actions/zoom-in-tool/zoom-in-tool.ts
 var WeaveZoomInToolAction = class extends WeaveAction {
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	getName() {
 		return "zoomInTool";
 	}
@@ -19915,7 +19959,7 @@ var WeaveZoomInToolAction = class extends WeaveAction {
 //#endregion
 //#region src/actions/fit-to-screen-tool/fit-to-screen-tool.ts
 var WeaveFitToScreenToolAction = class extends WeaveAction {
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	getName() {
 		return "fitToScreenTool";
 	}
@@ -19943,7 +19987,7 @@ var WeaveFitToScreenToolAction = class extends WeaveAction {
 //#endregion
 //#region src/actions/fit-to-selection-tool/fit-to-selection-tool.ts
 var WeaveFitToSelectionToolAction = class extends WeaveAction {
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	getName() {
 		return "fitToSelectionTool";
 	}
@@ -19985,7 +20029,7 @@ const MOVE_TOOL_STATE = {
 //#region src/actions/move-tool/move-tool.ts
 var WeaveMoveToolAction = class extends WeaveAction {
 	initialized = false;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
 		super();
@@ -20041,7 +20085,7 @@ const SELECTION_TOOL_STATE = {
 //#region src/actions/selection-tool/selection-tool.ts
 var WeaveSelectionToolAction = class extends WeaveAction {
 	initialized = false;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
 		super();
@@ -20105,10 +20149,10 @@ const RECTANGLE_TOOL_STATE = {
 //#region src/actions/rectangle-tool/rectangle-tool.ts
 var WeaveRectangleToolAction = class extends WeaveAction {
 	initialized = false;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
-	constructor(callbacks) {
-		super(callbacks);
+	constructor() {
+		super();
 		this.initialized = false;
 		this.state = RECTANGLE_TOOL_STATE.IDLE;
 		this.rectId = null;
@@ -20268,10 +20312,10 @@ const PEN_TOOL_STATE = {
 var WeavePenToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
-	constructor(callbacks) {
-		super(callbacks);
+	constructor() {
+		super();
 		this.initialized = false;
 		this.state = PEN_TOOL_STATE.IDLE;
 		this.lineId = null;
@@ -20501,10 +20545,10 @@ const BRUSH_TOOL_STATE = {
 //#region src/actions/brush-tool/brush-tool.ts
 var WeaveBrushToolAction = class extends WeaveAction {
 	initialized = false;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
-	constructor(callbacks) {
-		super(callbacks);
+	constructor() {
+		super();
 		this.initialized = false;
 		this.state = BRUSH_TOOL_STATE.INACTIVE;
 		this.strokeId = null;
@@ -20650,7 +20694,7 @@ const TEXT_TOOL_STATE = {
 var WeaveTextToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
 		super();
@@ -20757,10 +20801,10 @@ const FRAME_TOOL_STATE = {
 //#region src/actions/frame-tool/frame-tool.ts
 var WeaveFrameToolAction = class extends WeaveAction {
 	initialized = false;
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
-	constructor(callbacks) {
-		super(callbacks);
+	constructor() {
+		super();
 		this.initialized = false;
 		this.state = FRAME_TOOL_STATE.IDLE;
 		this.frameId = null;
@@ -20773,7 +20817,6 @@ var WeaveFrameToolAction = class extends WeaveAction {
 	initProps(params) {
 		return {
 			title: params?.title ?? WEAVE_FRAME_NODE_DEFAULT_PROPS.title,
-			fontFamily: params?.fontFamily ?? WEAVE_FRAME_NODE_DEFAULT_PROPS.fontFamily,
 			editing: false,
 			opacity: 1
 		};
@@ -20861,7 +20904,7 @@ var WeaveExportStageToolAction = class extends WeaveAction {
 		backgroundColor: WEAVE_EXPORT_BACKGROUND_COLOR,
 		quality: 1
 	};
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
 	getName() {
 		return "exportStageTool";
@@ -20905,7 +20948,7 @@ var WeaveExportNodeToolAction = class extends WeaveAction {
 		backgroundColor: WEAVE_EXPORT_BACKGROUND_COLOR,
 		quality: 1
 	};
-	internalUpdate = void 0;
+	onPropsChange = void 0;
 	onInit = void 0;
 	getName() {
 		return "exportNodeTool";
@@ -21297,24 +21340,32 @@ var WeaveStageResizePlugin = class extends WeavePlugin {
 	getName() {
 		return WEAVE_STAGE_RESIZE_KEY;
 	}
-	onInit() {
+	resizeStage() {
 		const stage = this.instance.getStage();
-		window.addEventListener("resize", () => {
-			const containerParent = stage.container().parentNode;
-			if (!this.enabled) return;
-			if (containerParent) {
-				const containerBoundBox = stage.container().getBoundingClientRect();
-				const containerWidth = containerBoundBox.width;
-				const containerHeight = containerBoundBox.height;
-				stage.width(containerWidth);
-				stage.height(containerHeight);
-				const plugins = this.instance.getPlugins();
-				for (const pluginId of Object.keys(plugins)) {
-					const pluginInstance = plugins[pluginId];
-					pluginInstance.onRender?.();
-				}
+		const containerParent = stage.container().parentNode;
+		if (!this.enabled) return;
+		if (containerParent) {
+			const containerBoundBox = stage.container().getBoundingClientRect();
+			const containerWidth = containerBoundBox.width;
+			const containerHeight = containerBoundBox.height;
+			stage.width(containerWidth);
+			stage.height(containerHeight);
+			const plugins = this.instance.getPlugins();
+			for (const pluginId of Object.keys(plugins)) {
+				const pluginInstance = plugins[pluginId];
+				pluginInstance.onRender?.();
 			}
+		}
+	}
+	onInit() {
+		window.addEventListener("resize", () => {
+			this.resizeStage();
 		});
+		const resizeObserver = new ResizeObserver(() => {
+			this.resizeStage();
+		});
+		const stage = this.instance.getStage();
+		resizeObserver.observe(stage.container());
 	}
 	enable() {
 		this.enabled = true;
@@ -21336,9 +21387,8 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	constructor(params) {
 		super();
-		const { config, callbacks } = params ?? {};
+		const { config } = params ?? {};
 		this.config = config;
-		this.callbacks = callbacks ?? {};
 		this.connectedUsers = {};
 	}
 	getName() {
@@ -21348,11 +21398,11 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 		const store = this.instance.getStore();
 		const userInfo = this.config.getUser();
 		store.setAwarenessInfo(WEAVE_CONNECTED_USER_INFO_KEY, userInfo);
-		this.callbacks?.onConnectedUsersChanged?.({ [userInfo.name]: userInfo });
-		store.onAwarenessChange((changes) => {
+		this.instance.emitEvent("onConnectedUsersChange", { [userInfo.name]: userInfo });
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			if (!this.enabled) {
 				this.connectedUsers = {};
-				this.callbacks?.onConnectedUsersChanged?.({});
+				this.instance.emitEvent("onConnectedUsersChange", {});
 				return;
 			}
 			const newConnectedUsers = {};
@@ -21363,7 +21413,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.name] = userInformation;
 				}
 			}
-			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.callbacks?.onConnectedUsersChanged?.(newConnectedUsers);
+			if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}
@@ -21417,7 +21467,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	onInit() {
 		const store = this.instance.getStore();
 		const stage = this.instance.getStage();
-		store.onAwarenessChange((changes) => {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			const selfUser = this.config.getUser();
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
@@ -21550,7 +21600,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				x: userPointer.actualPos.x,
 				y: userPointer.actualPos.y
 			};
-			const hasChanged = !import_lodash.default.isEqual(actualPos, oldPos);
+			const hasChanged = !import_lodash$1.default.isEqual(actualPos, oldPos);
 			const userPointNode = userPointerNode.getChildren((node) => node.getAttrs().id === "userPoint");
 			userPointNode[0]?.setAttrs({
 				radius: this.userPointerCircleRadius / stage.scaleX(),
@@ -21607,10 +21657,8 @@ const WEAVE_STAGE_DROP_AREA_KEY = "stageDropArea";
 var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
-	constructor(params) {
+	constructor() {
 		super();
-		const { callbacks } = params ?? {};
-		this.callbacks = callbacks;
 		this.enabled = true;
 	}
 	getName() {
@@ -21628,7 +21676,6 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 		stage.container().addEventListener("drop", (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			this.callbacks?.onStageDrop?.(e);
 			this.instance.emitEvent("onStageDrop", e);
 		});
 	}
@@ -21941,4 +21988,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_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, 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 };
+export { BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, 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_CONFIG, 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 };