@inditextech/weave-sdk 0.21.1 → 0.22.0

package/dist/sdk.cjs

@@ -15789,7 +15789,7 @@ function moveNodeToContainer(instance, node) {
 	let layerToMove = void 0;
 	if (!nodeAttrs.containerId && nodeIntersected && actualContainerAttrs.id !== nodeIntersected.getAttrs().id) layerToMove = nodeIntersected;
 	if (!nodeIntersected && actualContainerAttrs.id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
-	if (layerToMove) {
+	if (layerToMove && actualContainerAttrs.id !== layerToMove.getAttrs().id && actualContainerAttrs.id !== layerToMove.getAttrs().containerId) {
 		const layerToMoveAttrs = layerToMove.getAttrs();
 		const nodePos = node.getAbsolutePosition();
 		const nodeRotation = node.getAbsoluteRotation();
@@ -15798,12 +15798,14 @@ function moveNodeToContainer(instance, node) {
 		node.rotation(nodeRotation);
 		node.x(node.x() - (layerToMoveAttrs.containerOffsetX ?? 0));
 		node.y(node.y() - (layerToMoveAttrs.containerOffsetY ?? 0));
+		node.movedToContainer(layerToMove);
 		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
 		const actualNode = nodeHandler.serialize(node);
 		instance.removeNode(actualNode);
 		instance.addNode(actualNode, layerToMoveAttrs.id);
+		return layerToMove;
 	}
-	return layerToMove;
+	return void 0;
 }
 
 //#endregion
@@ -15954,6 +15956,12 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.triggerSelectedNodesEvent();
 		});
 		tr.on("dragstart", (e) => {
+			const stage$1 = this.instance.getStage();
+			if (stage$1.isMouseWheelPressed()) {
+				e.cancelBubble = true;
+				e.target.stopDrag();
+				return;
+			}
 			const selectedNodes = tr.nodes();
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
@@ -15963,6 +15971,12 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			e.cancelBubble = true;
 		});
 		const handleDragMove = (e) => {
+			const stage$1 = this.instance.getStage();
+			if (stage$1.isMouseWheelPressed()) {
+				e.cancelBubble = true;
+				e.target.stopDrag();
+				return;
+			}
 			const selectedNodes = tr.nodes();
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
@@ -16495,6 +16509,11 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 
 //#endregion
 //#region src/nodes/node.ts
+const setStageDefaultConfiguration = () => {
+	konva.default.Stage.prototype.isMouseWheelPressed = function() {
+		return false;
+	};
+};
 const setNodesDefaultConfiguration = (config) => {
 	const { transform } = config ?? {};
 	konva.default.Node.prototype.getTransformerProperties = function() {
@@ -16503,6 +16522,7 @@ const setNodesDefaultConfiguration = (config) => {
 			...transform
 		};
 	};
+	konva.default.Node.prototype.movedToContainer = function() {};
 	konva.default.Node.prototype.updatePosition = function() {};
 	konva.default.Node.prototype.resetCrop = function() {};
 };
@@ -16537,25 +16557,8 @@ var WeaveNode = class {
 		return selected;
 	}
 	scaleReset(node) {
-		if (node.getAttrs().nodeType === "line") {
-			const lineNode = node;
-			const oldPoints = lineNode.points();
-			const newPoints = [];
-			for (let i = 0; i < oldPoints.length / 2; i++) {
-				const point = {
-					x: oldPoints[i * 2] * lineNode.scaleX(),
-					y: oldPoints[i * 2 + 1] * lineNode.scaleY()
-				};
-				newPoints.push(point.x, point.y);
-			}
-			lineNode.points(newPoints);
-		}
 		node.width(Math.max(5, node.width() * node.scaleX()));
 		node.height(Math.max(5, node.height() * node.scaleY()));
-		if (node.getAttrs().nodeType === "image" && node.getAttrs().uncroppedImage) node.setAttrs({ uncroppedImage: {
-			width: node.getAttrs().uncroppedImage.width * node.scaleX(),
-			height: node.getAttrs().uncroppedImage.height * node.scaleY()
-		} });
 		node.scaleX(1);
 		node.scaleY(1);
 	}
@@ -16596,7 +16599,21 @@ var WeaveNode = class {
 			const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
 			this.instance.updateNode(nodeHandler.serialize(node$1));
 		});
+		node.on("dragstart", (e) => {
+			const stage = this.instance.getStage();
+			if (stage.isMouseWheelPressed()) {
+				e.cancelBubble = true;
+				node.stopDrag();
+				return;
+			}
+		});
 		const handleDragMove = (e) => {
+			const stage = this.instance.getStage();
+			if (stage.isMouseWheelPressed()) {
+				e.cancelBubble = true;
+				node.stopDrag();
+				return;
+			}
 			if (this.isSelecting() && this.isNodeSelected(node)) {
 				clearContainerTargets(this.instance);
 				const layerToMove = checkIfOverContainer(this.instance, e.target);
@@ -18085,7 +18102,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.21.1";
+var version = "0.22.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18526,6 +18543,9 @@ var Weave = class extends Emittery {
 	getConfiguration() {
 		return this.config;
 	}
+	setStageDefaultConfiguration() {
+		setStageDefaultConfiguration();
+	}
 	setNodesDefaultConfiguration(config) {
 		setNodesDefaultConfiguration(config);
 	}
@@ -18754,8 +18774,17 @@ const WEAVE_STAGE_NODE_TYPE = "stage";
 //#region src/nodes/stage/stage.ts
 var WeaveStageNode = class extends WeaveNode {
 	nodeType = WEAVE_STAGE_NODE_TYPE;
+	wheelMousePressed = false;
 	onRender(props) {
 		const stage = new konva.default.Stage({ ...props });
+		this.wheelMousePressed = false;
+		stage.isMouseWheelPressed = () => this.wheelMousePressed;
+		stage.on("mousedown", (e) => {
+			if (e.evt.button === 1) this.wheelMousePressed = true;
+		});
+		stage.on("mouseup", (e) => {
+			if (e.evt.button === 1) this.wheelMousePressed = false;
+		});
 		stage.batchDraw();
 		return stage;
 	}
@@ -18885,6 +18914,65 @@ var WeaveRectangleNode = class extends WeaveNode {
 	}
 };
 
+//#endregion
+//#region src/nodes/ellipse/constants.ts
+const WEAVE_ELLIPSE_NODE_TYPE = "ellipse";
+
+//#endregion
+//#region src/nodes/ellipse/ellipse.ts
+var WeaveEllipseNode = class extends WeaveNode {
+	nodeType = WEAVE_ELLIPSE_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
+	onRender(props) {
+		const rectangle = new konva.default.Ellipse({
+			...props,
+			name: "node",
+			radiusX: props.radiusX,
+			radiusY: props.radiusY
+		});
+		rectangle.getTransformerProperties = () => {
+			const stage = this.instance.getStage();
+			const node = stage.findOne(`#${props.id}`);
+			if (node && node.getAttrs().keepAspectRatio) return {
+				...this.config.transform,
+				enabledAnchors: [
+					"top-left",
+					"top-right",
+					"bottom-left",
+					"bottom-right"
+				],
+				keepRatio: true
+			};
+			return this.config.transform;
+		};
+		this.setupDefaultNodeEvents(rectangle);
+		return rectangle;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) {
+			const actualSelectedNodes = nodesSelectionPlugin.getSelectedNodes();
+			nodesSelectionPlugin.setSelectedNodes(actualSelectedNodes);
+			nodesSelectionPlugin.getTransformer().forceUpdate();
+		}
+	}
+	scaleReset(node) {
+		const ellipseNode = node;
+		ellipseNode.radiusX(Math.max(5, ellipseNode.radiusX() * ellipseNode.scaleX()));
+		ellipseNode.radiusY(Math.max(5, ellipseNode.radiusY() * ellipseNode.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
+};
+
 //#endregion
 //#region src/nodes/line/constants.ts
 const WEAVE_LINE_NODE_TYPE = "line";
@@ -18917,6 +19005,25 @@ var WeaveLineNode = class extends WeaveNode {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
+	scaleReset(node) {
+		if (node.getAttrs().nodeType === "line") {
+			const lineNode = node;
+			const oldPoints = lineNode.points();
+			const newPoints = [];
+			for (let i = 0; i < oldPoints.length / 2; i++) {
+				const point = {
+					x: oldPoints[i * 2] * lineNode.scaleX(),
+					y: oldPoints[i * 2 + 1] * lineNode.scaleY()
+				};
+				newPoints.push(point.x, point.y);
+			}
+			lineNode.points(newPoints);
+		}
+		node.width(Math.max(5, node.width() * node.scaleX()));
+		node.height(Math.max(5, node.height() * node.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
 };
 
 //#endregion
@@ -19463,7 +19570,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
-				strokeScaleEnabled: false,
+				strokeScaleEnabled: true,
 				listening: false
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
@@ -19490,7 +19597,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
-				strokeScaleEnabled: false,
+				strokeScaleEnabled: true,
 				imageWidth: this.preloadImgs[this.imageId].width,
 				imageHeight: this.preloadImgs[this.imageId].height,
 				imageInfo: {
@@ -19894,6 +20001,12 @@ var WeaveImageNode = class extends WeaveNode {
 			id,
 			name: "node"
 		});
+		image.movedToContainer = () => {
+			const stage = this.instance.getStage();
+			const image$1 = stage.findOne(`#${id}`);
+			if (!image$1) return;
+			this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
+		};
 		image.resetCrop = () => {
 			const stage = this.instance.getStage();
 			const image$1 = stage.findOne(`#${id}`);
@@ -19936,7 +20049,7 @@ var WeaveImageNode = class extends WeaveNode {
 			height: 0,
 			stroke: "#ff0000ff",
 			strokeWidth: 0,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			draggable: false,
 			visible: false
 		});
@@ -20052,7 +20165,7 @@ var WeaveImageNode = class extends WeaveNode {
 				draggable: false,
 				zIndex: 0
 			});
-			this.updateCrop(nextProps);
+			this.updateImageCrop(nextProps);
 		}
 		try {
 			const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -20100,18 +20213,22 @@ var WeaveImageNode = class extends WeaveNode {
 				});
 				this.scaleReset(image);
 				const imageRect = image.getClientRect({ relativeTo: this.instance.getStage() });
-				image.setAttr("uncroppedImage", {
-					width: imageProps.uncroppedImage ? imageProps.uncroppedImage.width : imageRect.width,
-					height: imageProps.uncroppedImage ? imageProps.uncroppedImage.height : imageRect.height
+				if (imageProps.cropInfo && imageProps.uncroppedImage) image.setAttr("uncroppedImage", {
+					width: imageProps.uncroppedImage.width,
+					height: imageProps.uncroppedImage.height
 				});
-				this.updateCrop(imageProps);
+				if (!imageProps.cropInfo) image.setAttr("uncroppedImage", {
+					width: imageRect.width,
+					height: imageRect.height
+				});
+				this.updateImageCrop(imageProps);
 				const nodeHandler = this.instance.getNodeHandler(image.getAttrs().nodeType);
 				this.instance.updateNode(nodeHandler.serialize(image));
 			}
 		};
 		if (imageProps.imageURL) imageObj.src = imageProps.imageURL;
 	}
-	updateCrop(nextProps) {
+	updateImageCrop(nextProps) {
 		const imageAttrs = nextProps;
 		const stage = this.instance.getStage();
 		const image = stage.findOne(`#${imageAttrs.id}`);
@@ -20150,6 +20267,134 @@ var WeaveImageNode = class extends WeaveNode {
 		if (!imageToolAction) throw new Error("Image Tool action not found");
 		return imageToolAction;
 	}
+	scaleReset(node) {
+		const widthNotNormalized = node.width();
+		const heightNotNormalized = node.height();
+		node.width(Math.max(5, node.width() * node.scaleX()));
+		node.height(Math.max(5, node.height() * node.scaleY()));
+		const uncroppedWidth = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.width : widthNotNormalized;
+		const uncroppedHeight = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.height : heightNotNormalized;
+		node.setAttrs({ uncroppedImage: {
+			width: uncroppedWidth * node.scaleX(),
+			height: uncroppedHeight * node.scaleY()
+		} });
+		node.scaleX(1);
+		node.scaleY(1);
+	}
+};
+
+//#endregion
+//#region src/nodes/star/constants.ts
+const WEAVE_STAR_NODE_TYPE = "star";
+
+//#endregion
+//#region src/nodes/star/star.ts
+var WeaveStarNode = class extends WeaveNode {
+	nodeType = WEAVE_STAR_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
+	onRender(props) {
+		const rectangle = new konva.default.Star({
+			...props,
+			name: "node",
+			numPoints: props.numPoints,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius
+		});
+		rectangle.getTransformerProperties = () => {
+			const stage = this.instance.getStage();
+			const node = stage.findOne(`#${props.id}`);
+			if (node && node.getAttrs().keepAspectRatio) return {
+				...this.config.transform,
+				enabledAnchors: [
+					"top-left",
+					"top-right",
+					"bottom-left",
+					"bottom-right"
+				],
+				keepRatio: true
+			};
+			return this.config.transform;
+		};
+		this.setupDefaultNodeEvents(rectangle);
+		return rectangle;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) {
+			const actualSelectedNodes = nodesSelectionPlugin.getSelectedNodes();
+			nodesSelectionPlugin.setSelectedNodes(actualSelectedNodes);
+			nodesSelectionPlugin.getTransformer().forceUpdate();
+		}
+	}
+	scaleReset(node) {
+		const starNode = node;
+		starNode.innerRadius(Math.max(5, starNode.innerRadius() * starNode.scaleX()));
+		starNode.outerRadius(Math.max(5, starNode.outerRadius() * starNode.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
+};
+
+//#endregion
+//#region src/nodes/arrow/constants.ts
+const WEAVE_ARROW_NODE_TYPE = "arrow";
+
+//#endregion
+//#region src/nodes/arrow/arrow.ts
+var WeaveArrowNode = class extends WeaveNode {
+	nodeType = WEAVE_ARROW_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
+	onRender(props) {
+		const line = new konva.default.Arrow({
+			...props,
+			name: "node",
+			points: props.points
+		});
+		line.getTransformerProperties = () => {
+			return this.config.transform;
+		};
+		this.setupDefaultNodeEvents(line);
+		return line;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+	}
+	scaleReset(node) {
+		if (node.getAttrs().nodeType === "arrow") {
+			const lineNode = node;
+			const oldPoints = lineNode.points();
+			const newPoints = [];
+			for (let i = 0; i < oldPoints.length / 2; i++) {
+				const point = {
+					x: oldPoints[i * 2] * lineNode.scaleX(),
+					y: oldPoints[i * 2 + 1] * lineNode.scaleY()
+				};
+				newPoints.push(point.x, point.y);
+			}
+			lineNode.points(newPoints);
+		}
+		node.width(Math.max(5, node.width() * node.scaleX()));
+		node.height(Math.max(5, node.height() * node.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
 };
 
 //#endregion
@@ -20283,7 +20528,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			id,
 			containerId: `${id}-group-internal`,
 			containerOffsetX: 0,
-			containerOffsetY: titleHeight,
+			containerOffsetY: borderWidth,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			fill: "transparent",
@@ -20296,7 +20541,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			y: 0,
 			width: props.frameWidth,
 			height: props.frameHeight,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			draggable: false
 		});
 		frame.add(frameInternalGroup);
@@ -20308,7 +20553,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth,
 			stroke: borderColor,
 			strokeWidth: borderWidth,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			shadowForStrokeEnabled: false,
 			height: props.frameHeight,
 			fill: "#ffffffff",
@@ -20329,7 +20574,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			text: props.title,
 			stroke: "#000000ff",
 			strokeWidth: 1,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			listening: false,
 			draggable: false
 		});
@@ -20418,17 +20663,17 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new konva.default.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: 0,
-			y: titleHeight,
-			width: props.frameWidth,
-			height: props.frameHeight,
-			strokeScaleEnabled: false,
+			x: borderWidth,
+			y: borderWidth,
+			width: props.frameWidth - borderWidth * 2,
+			height: props.frameHeight - borderWidth * 2,
+			strokeScaleEnabled: true,
 			draggable: false
 		});
 		frameInternal.clipFunc((ctx) => {
-			const width = frameInternal.width() * frameInternal.scaleX();
-			const height = frameInternal.height() * frameInternal.scaleY();
-			ctx.rect(0, -titleHeight, width, height);
+			const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
+			const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
+			ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
 		});
 		frameInternalGroup.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
@@ -20454,9 +20699,11 @@ var WeaveFrameNode = class extends WeaveNode {
 		const { id } = nextProps;
 		const frameNode = nodeInstance;
 		const newProps = { ...nextProps };
-		const { titleHeight } = this.config;
+		const { titleHeight, borderWidth } = this.config;
 		nodeInstance.setAttrs({
 			...newProps,
+			containerOffsetX: 0,
+			containerOffsetY: borderWidth,
 			clip: void 0
 		});
 		const selectorArea = frameNode.findOne(`#${id}-selector-area`);
@@ -20489,14 +20736,15 @@ var WeaveFrameNode = class extends WeaveNode {
 				x: 0,
 				y: -titleHeight,
 				text: nextProps.title,
-				width: width * selectorArea.scaleX()
+				width: width * selectorArea.scaleX(),
+				height: titleHeight * selectorArea.scaleY()
 			});
 			const frameInternal = frameNode.findOne(`#${id}-group-internal`);
 			if (frameInternal) frameInternal.setAttrs({
-				x: 0,
-				y: titleHeight,
-				width: width * selectorArea.scaleX(),
-				height: height * selectorArea.scaleY()
+				x: borderWidth,
+				y: borderWidth,
+				width: (width - borderWidth * 2) * selectorArea.scaleX(),
+				height: (height - borderWidth * 2) * selectorArea.scaleY()
 			});
 		}
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -20536,10 +20784,6 @@ var WeaveFrameNode = class extends WeaveNode {
 const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
 const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG = {
 	zoomSteps: [
-		.1,
-		.2,
-		.3,
-		.4,
 		.5,
 		.6,
 		.7,
@@ -20554,7 +20798,11 @@ const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG = {
 		4,
 		6,
 		8,
-		10
+		10,
+		20,
+		50,
+		100,
+		250
 	],
 	defaultZoom: 1,
 	fitToScreen: { padding: 40 },
@@ -20576,6 +20824,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		};
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
 		this.isCtrlOrMetaPressed = false;
+		this.updatedMinimumZoom = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
 		this.actualScale = this.config.zoomSteps[this.actualStep];
 		this.defaultStep = this.actualStep;
@@ -20585,9 +20834,27 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	}
 	onInit() {
 		this.initEvents();
+		const minimumZoom = this.minimumZoom();
+		if (minimumZoom < this.config.zoomSteps[0]) {
+			this.updatedMinimumZoom = true;
+			this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
+		}
+		const mainLayer = this.instance.getMainLayer();
+		mainLayer?.on("draw", () => {
+			const minimumZoom$1 = this.minimumZoom();
+			if (this.updatedMinimumZoom && minimumZoom$1 < this.config.zoomSteps[0]) {
+				this.updatedMinimumZoom = true;
+				this.config.zoomSteps.shift();
+				this.config.zoomSteps = [minimumZoom$1, ...this.config.zoomSteps];
+			}
+			if (!this.updatedMinimumZoom && minimumZoom$1 < this.config.zoomSteps[0]) {
+				this.updatedMinimumZoom = true;
+				this.config.zoomSteps = [minimumZoom$1, ...this.config.zoomSteps];
+			}
+		});
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
-	setZoom(scale, centered = true) {
+	setZoom(scale, centered = true, pointer) {
 		const stage = this.instance.getStage();
 		const mainLayer = this.instance.getMainLayer();
 		if (mainLayer) {
@@ -20612,6 +20879,17 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				};
 				stage.position(newPos);
 			}
+			if (!centered && pointer) {
+				const mousePointTo = {
+					x: (pointer.x - stage.x()) / oldScale,
+					y: (pointer.y - stage.y()) / oldScale
+				};
+				const newPos = {
+					x: pointer.x - mousePointTo.x * scale,
+					y: pointer.y - mousePointTo.y * scale
+				};
+				stage.position(newPos);
+			}
 			const plugins = this.instance.getPlugins();
 			for (const pluginId of Object.keys(plugins)) {
 				const pluginInstance = plugins[pluginId];
@@ -20632,7 +20910,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		if (!this.enabled) return false;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomOut");
-		return this.actualStep - 1 > 0;
+		return this.actualStep - 1 >= 0;
 	}
 	canZoomIn() {
 		if (!this.enabled) return false;
@@ -20650,68 +20928,88 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const nextValue = this.config.zoomSteps.filter((scale) => direction === "zoomIn" ? scale >= this.actualScale : scale <= this.actualScale).sort((a, b) => direction === "zoomIn" ? a - b : b - a)[0];
 		return this.config.zoomSteps.findIndex((scale) => scale === nextValue);
 	}
-	zoomIn() {
+	zoomIn(pointer) {
 		if (!this.enabled) return;
 		if (!this.canZoomIn()) return;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomIn");
 		else this.actualStep += 1;
-		this.setZoom(this.config.zoomSteps[this.actualStep]);
+		this.setZoom(this.config.zoomSteps[this.actualStep], pointer ? false : true, pointer);
 	}
-	zoomOut() {
+	zoomOut(pointer) {
 		if (!this.enabled) return;
 		if (!this.canZoomOut()) return;
 		const actualZoomIsStep = this.config.zoomSteps.findIndex((scale) => scale === this.actualScale);
 		if (actualZoomIsStep === -1) this.actualStep = this.findClosestStepIndex("zoomOut");
 		else this.actualStep -= 1;
-		this.setZoom(this.config.zoomSteps[this.actualStep]);
+		this.setZoom(this.config.zoomSteps[this.actualStep], pointer ? false : true, pointer);
+	}
+	minimumZoom() {
+		if (!this.enabled) return -1;
+		const mainLayer = this.instance.getMainLayer();
+		if (!mainLayer) return -1;
+		if (mainLayer.getChildren().length === 0) return this.config.zoomSteps[this.defaultStep];
+		const stage = this.instance.getStage();
+		const box = mainLayer.getClientRect({
+			relativeTo: stage,
+			skipStroke: true
+		});
+		const stageBox = {
+			width: stage.width(),
+			height: stage.height()
+		};
+		const availableScreenWidth = stageBox.width - 2 * this.config.fitToScreen.padding;
+		const availableScreenHeight = stageBox.height - 2 * this.config.fitToScreen.padding;
+		const scaleX = availableScreenWidth / box.width;
+		const scaleY = availableScreenHeight / box.height;
+		const scale = Math.min(scaleX, scaleY);
+		return scale;
 	}
 	fitToScreen() {
 		if (!this.enabled) return;
 		const mainLayer = this.instance.getMainLayer();
+		if (!mainLayer) return;
 		if (mainLayer?.getChildren().length === 0) {
 			this.setZoom(this.config.zoomSteps[this.defaultStep]);
 			return;
 		}
 		const stage = this.instance.getStage();
-		if (mainLayer) {
-			const box = mainLayer.getClientRect({
-				relativeTo: stage,
-				skipStroke: true
-			});
-			const stageBox = {
-				width: stage.width(),
-				height: stage.height()
-			};
-			const availableScreenWidth = stageBox.width - 2 * this.config.fitToScreen.padding;
-			const availableScreenHeight = stageBox.height - 2 * this.config.fitToScreen.padding;
-			const scaleX = availableScreenWidth / box.width;
-			const scaleY = availableScreenHeight / box.height;
-			const scale = Math.min(scaleX, scaleY);
-			stage.scale({
-				x: scale,
-				y: scale
-			});
-			const selectionCenterX = box.x + box.width / 2;
-			const selectionCenterY = box.y + box.height / 2;
-			const canvasCenterX = stage.width() / (2 * scale);
-			const canvasCenterY = stage.height() / (2 * scale);
-			const stageX = (canvasCenterX - selectionCenterX) * scale;
-			const stageY = (canvasCenterY - selectionCenterY) * scale;
-			stage.position({
-				x: stageX,
-				y: stageY
-			});
-			this.setZoom(scale, false);
-		}
-	}
-	fitToSelection() {
-		if (!this.enabled) return;
-		const stage = this.instance.getStage();
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		const nodes = selectionPlugin.getTransformer().getNodes();
-		if (nodes.length === 0) return;
-		let zoomTransformer = stage.findOne("#zoomTransformer");
+		const box = mainLayer.getClientRect({
+			relativeTo: stage,
+			skipStroke: true
+		});
+		const stageBox = {
+			width: stage.width(),
+			height: stage.height()
+		};
+		const availableScreenWidth = stageBox.width - 2 * this.config.fitToScreen.padding;
+		const availableScreenHeight = stageBox.height - 2 * this.config.fitToScreen.padding;
+		const scaleX = availableScreenWidth / box.width;
+		const scaleY = availableScreenHeight / box.height;
+		const scale = Math.min(scaleX, scaleY);
+		stage.scale({
+			x: scale,
+			y: scale
+		});
+		const selectionCenterX = box.x + box.width / 2;
+		const selectionCenterY = box.y + box.height / 2;
+		const canvasCenterX = stage.width() / (2 * scale);
+		const canvasCenterY = stage.height() / (2 * scale);
+		const stageX = (canvasCenterX - selectionCenterX) * scale;
+		const stageY = (canvasCenterY - selectionCenterY) * scale;
+		stage.position({
+			x: stageX,
+			y: stageY
+		});
+		this.setZoom(scale, false);
+	}
+	fitToSelection() {
+		if (!this.enabled) return;
+		const stage = this.instance.getStage();
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		const nodes = selectionPlugin.getTransformer().getNodes();
+		if (nodes.length === 0) return;
+		let zoomTransformer = stage.findOne("#zoomTransformer");
 		if (!zoomTransformer) {
 			zoomTransformer = new konva.default.Transformer({
 				id: "zoomTransformer",
@@ -20776,8 +21074,11 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		});
 		window.addEventListener("wheel", (e) => {
 			if (!this.enabled || !this.isCtrlOrMetaPressed) return;
-			if (e.deltaY > 0) this.zoomOut();
-			if (e.deltaY < 0) this.zoomIn();
+			const stage = this.instance.getStage();
+			const pointer = stage.getPointerPosition();
+			if (!pointer) return;
+			if (e.deltaY > 0) this.zoomOut(pointer);
+			if (e.deltaY < 0) this.zoomIn(pointer);
 		});
 	}
 };
@@ -21199,7 +21500,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("rectangle");
 		const node = nodeHandler.create(this.rectId, {
 			...this.props,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			width: 0,
@@ -21281,6 +21582,192 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/ellipse-tool/constants.ts
+const ELLIPSE_TOOL_ACTION_NAME = "ellipseTool";
+const ELLIPSE_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "definingSize",
+	["ADDED"]: "added"
+};
+
+//#endregion
+//#region src/actions/ellipse-tool/ellipse-tool.ts
+var WeaveEllipseToolAction = class extends WeaveAction {
+	initialized = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor() {
+		super();
+		this.initialized = false;
+		this.state = ELLIPSE_TOOL_STATE.IDLE;
+		this.ellipseId = null;
+		this.creating = false;
+		this.moved = false;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.props = this.initProps();
+	}
+	getName() {
+		return ELLIPSE_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			opacity: 1,
+			fill: "#71717aff",
+			stroke: "#000000ff",
+			strokeWidth: 1,
+			radiusX: 50,
+			radiusY: 50,
+			keepAspectRatio: false
+		};
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Enter" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Escape" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		stage.on("mousedown touchstart", (e) => {
+			e.evt.preventDefault();
+			if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
+				this.creating = true;
+				this.handleAdding();
+			}
+		});
+		stage.on("mousemove touchmove", (e) => {
+			e.evt.preventDefault();
+			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
+				this.moved = true;
+				this.handleMovement();
+			}
+		});
+		stage.on("mouseup touchend", (e) => {
+			e.evt.preventDefault();
+			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
+				this.creating = false;
+				this.handleSettingSize();
+			}
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addEllipse() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.clickPoint = null;
+		this.setState(ELLIPSE_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint, container } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.ellipseId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler("ellipse");
+		const node = nodeHandler.create(this.ellipseId, {
+			...this.props,
+			strokeScaleEnabled: true,
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			radiusX: 0,
+			radiusY: 0
+		});
+		this.instance.addNode(node, this.container?.getAttrs().id);
+		this.setState(ELLIPSE_TOOL_STATE.DEFINING_SIZE);
+	}
+	handleSettingSize() {
+		const ellipse = this.instance.getStage().findOne(`#${this.ellipseId}`);
+		if (this.ellipseId && this.clickPoint && this.container && ellipse) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+			const nodeHandler = this.instance.getNodeHandler("ellipse");
+			const ellipsePos = {
+				x: this.clickPoint.x,
+				y: this.clickPoint.y
+			};
+			let ellipseRadiusX = this.props.radiusY;
+			let ellipseRadiusY = this.props.radiusY;
+			if (this.moved) {
+				ellipsePos.x = Math.min(this.clickPoint.x, mousePoint.x);
+				ellipsePos.y = Math.min(this.clickPoint.y, mousePoint.y);
+				ellipseRadiusX = Math.abs(this.clickPoint.x - mousePoint.x);
+				ellipseRadiusY = Math.abs(this.clickPoint.y - mousePoint.y);
+			}
+			ellipse.setAttrs({
+				...this.props,
+				x: ellipsePos.x + ellipseRadiusX / 2,
+				y: ellipsePos.y + ellipseRadiusY / 2,
+				radiusX: ellipseRadiusX,
+				radiusY: ellipseRadiusY
+			});
+			this.instance.updateNode(nodeHandler.serialize(ellipse));
+		}
+		this.cancelAction();
+	}
+	handleMovement() {
+		if (this.state !== ELLIPSE_TOOL_STATE.DEFINING_SIZE) return;
+		const ellipse = this.instance.getStage().findOne(`#${this.ellipseId}`);
+		if (this.ellipseId && this.container && this.clickPoint && ellipse) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+			const deltaX = Math.abs(mousePoint.x - this.clickPoint?.x);
+			const deltaY = Math.abs(mousePoint.y - this.clickPoint?.y);
+			const nodeHandler = this.instance.getNodeHandler("ellipse");
+			const ellipsePos = {
+				x: this.clickPoint.x,
+				y: this.clickPoint.y
+			};
+			if (this.moved) {
+				ellipsePos.x = Math.min(this.clickPoint.x, mousePoint.x);
+				ellipsePos.y = Math.min(this.clickPoint.y, mousePoint.y);
+			}
+			ellipse.setAttrs({
+				x: ellipsePos.x + deltaX / 2,
+				y: ellipsePos.y + deltaY / 2,
+				radiusX: deltaX,
+				radiusY: deltaY
+			});
+			this.instance.updateNode(nodeHandler.serialize(ellipse));
+		}
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.props = this.initProps();
+		this.addEllipse();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.ellipseId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		this.ellipseId = null;
+		this.creating = false;
+		this.moved = false;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.setState(ELLIPSE_TOOL_STATE.IDLE);
+	}
+};
+
 //#endregion
 //#region src/actions/pen-tool/constants.ts
 const PEN_TOOL_ACTION_NAME = "penTool";
@@ -21377,7 +21864,7 @@ var WeavePenToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.lineId, {
 			...this.props,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -21387,7 +21874,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -21397,7 +21884,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			...this.props,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			points: [0, 0]
 		});
 		this.instance.addNode(tempLine, this.container?.getAttrs().id);
@@ -21405,7 +21892,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -21601,7 +22088,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.strokeId, {
 			...this.props,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -21741,7 +22228,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			strokeEnabled: false,
 			stroke: "#000000ff",
 			strokeWidth: 1,
-			strokeScaleEnabled: false,
+			strokeScaleEnabled: true,
 			align: "left",
 			verticalAlign: "top",
 			opacity: 1,
@@ -21778,6 +22265,444 @@ var WeaveTextToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/star-tool/constants.ts
+const STAR_TOOL_ACTION_NAME = "starTool";
+const STAR_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "definingSize",
+	["ADDED"]: "added"
+};
+
+//#endregion
+//#region src/actions/star-tool/star-tool.ts
+var WeaveStarToolAction = class extends WeaveAction {
+	initialized = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor() {
+		super();
+		this.initialized = false;
+		this.state = STAR_TOOL_STATE.IDLE;
+		this.starId = null;
+		this.creating = false;
+		this.moved = false;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.props = this.initProps();
+	}
+	getName() {
+		return STAR_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			opacity: 1,
+			fill: "#71717aff",
+			stroke: "#000000ff",
+			strokeWidth: 1,
+			numPoints: 5,
+			innerRadius: 70,
+			outerRadius: 184,
+			keepAspectRatio: false
+		};
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Enter" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Escape" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		stage.on("mousedown touchstart", (e) => {
+			e.evt.preventDefault();
+			if (this.state === STAR_TOOL_STATE.ADDING) {
+				this.creating = true;
+				this.handleAdding();
+			}
+		});
+		stage.on("mousemove touchmove", (e) => {
+			e.evt.preventDefault();
+			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
+				this.moved = true;
+				this.handleMovement();
+			}
+		});
+		stage.on("mouseup touchend", (e) => {
+			e.evt.preventDefault();
+			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
+				this.creating = false;
+				this.handleSettingSize();
+			}
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addStar() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.clickPoint = null;
+		this.setState(STAR_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint, container } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.starId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler("star");
+		const node = nodeHandler.create(this.starId, {
+			...this.props,
+			strokeScaleEnabled: true,
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			numPoints: 5,
+			innerRadius: 0,
+			outerRadius: 0
+		});
+		this.instance.addNode(node, this.container?.getAttrs().id);
+		this.setState(STAR_TOOL_STATE.DEFINING_SIZE);
+	}
+	handleSettingSize() {
+		const star = this.instance.getStage().findOne(`#${this.starId}`);
+		if (this.starId && this.clickPoint && this.container && star) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+			const nodeHandler = this.instance.getNodeHandler("star");
+			const starPos = {
+				x: this.clickPoint.x,
+				y: this.clickPoint.y
+			};
+			let starOuterRadius = this.props.outerRadius;
+			let starInnerRadius = this.props.innerRadius;
+			if (this.moved) {
+				starPos.x = Math.min(this.clickPoint.x, mousePoint.x);
+				starPos.y = Math.min(this.clickPoint.y, mousePoint.y);
+				starOuterRadius = Math.abs(this.clickPoint.x - mousePoint.x);
+				starInnerRadius = Math.abs(this.clickPoint.y - mousePoint.y);
+			}
+			star.setAttrs({
+				...this.props,
+				x: starPos.x + starOuterRadius / 2,
+				y: starPos.y + starOuterRadius / 2,
+				outerRadius: starOuterRadius,
+				innerRadius: starInnerRadius
+			});
+			this.instance.updateNode(nodeHandler.serialize(star));
+		}
+		this.cancelAction();
+	}
+	handleMovement() {
+		if (this.state !== STAR_TOOL_STATE.DEFINING_SIZE) return;
+		const star = this.instance.getStage().findOne(`#${this.starId}`);
+		if (this.starId && this.container && this.clickPoint && star) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+			const deltaX = Math.abs(mousePoint.x - this.clickPoint?.x);
+			const deltaY = Math.abs(mousePoint.y - this.clickPoint?.y);
+			const nodeHandler = this.instance.getNodeHandler("star");
+			const starPos = {
+				x: this.clickPoint.x,
+				y: this.clickPoint.y
+			};
+			if (this.moved) {
+				starPos.x = Math.min(this.clickPoint.x, mousePoint.x);
+				starPos.y = Math.min(this.clickPoint.y, mousePoint.y);
+			}
+			star.setAttrs({
+				x: starPos.x + deltaX / 2,
+				y: starPos.y + deltaX / 2,
+				outerRadius: deltaX,
+				innerRadius: deltaY
+			});
+			this.instance.updateNode(nodeHandler.serialize(star));
+		}
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.props = this.initProps();
+		this.addStar();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.starId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		this.starId = null;
+		this.creating = false;
+		this.moved = false;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.setState(STAR_TOOL_STATE.IDLE);
+	}
+};
+
+//#endregion
+//#region src/actions/arrow-tool/constants.ts
+const ARROW_TOOL_ACTION_NAME = "arrowTool";
+const ARROW_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "definingSize",
+	["ADDED"]: "added"
+};
+
+//#endregion
+//#region src/actions/arrow-tool/arrow-tool.ts
+var WeaveArrowToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor() {
+		super();
+		this.initialized = false;
+		this.state = ARROW_TOOL_STATE.IDLE;
+		this.arrowId = null;
+		this.tempArrowId = null;
+		this.container = void 0;
+		this.measureContainer = void 0;
+		this.clickPoint = null;
+		this.tempPoint = void 0;
+		this.tempNextPoint = void 0;
+		this.props = this.initProps();
+	}
+	getName() {
+		return ARROW_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			fill: "#000000ff",
+			stroke: "#000000ff",
+			strokeWidth: 1,
+			opacity: 1,
+			pointerLength: 10,
+			pointerWidth: 10,
+			pointerAtBeginning: false,
+			pointerAtEnding: true
+		};
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Enter" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Escape" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		stage.on("dblclick dbltap", (e) => {
+			e.evt.preventDefault();
+			this.cancelAction();
+		});
+		stage.on("click tap", (e) => {
+			e.evt.preventDefault();
+			if (this.state === ARROW_TOOL_STATE.IDLE) return;
+			if (this.state === ARROW_TOOL_STATE.ADDING) {
+				this.handleAdding();
+				return;
+			}
+			if (this.state === ARROW_TOOL_STATE.DEFINING_SIZE) {
+				this.handleSettingSize();
+				return;
+			}
+		});
+		stage.on("mousemove touchmove", (e) => {
+			e.evt.preventDefault();
+			this.handleMovement();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addArrow() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+		this.tempPoint = void 0;
+		this.tempNextPoint = void 0;
+		this.clickPoint = null;
+		this.setState(ARROW_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const stage = this.instance.getStage();
+		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.measureContainer = measureContainer;
+		this.arrowId = v4_default();
+		this.tempArrowId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler("arrow");
+		const lineNodeHandler = this.instance.getNodeHandler("line");
+		const node = lineNodeHandler.create(this.arrowId, {
+			...this.props,
+			strokeScaleEnabled: true,
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			points: [0, 0]
+		});
+		this.instance.addNode(node, this.container?.getAttrs().id);
+		this.tempPoint = new konva.default.Circle({
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: true,
+			stroke: "#cccccc",
+			strokeWidth: 0,
+			fill: "#cccccc"
+		});
+		this.measureContainer?.add(this.tempPoint);
+		const tempArrow = nodeHandler.create(this.tempArrowId, {
+			...this.props,
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			strokeScaleEnabled: true,
+			points: [0, 0]
+		});
+		this.instance.addNode(tempArrow, this.container?.getAttrs().id);
+		this.tempNextPoint = new konva.default.Circle({
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0,
+			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: true,
+			stroke: "#cccccc",
+			strokeWidth: 0,
+			fill: "#cccccc"
+		});
+		this.measureContainer?.add(this.tempNextPoint);
+		this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
+	}
+	handleSettingSize() {
+		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
+		const tempMainArrow = this.instance.getStage().findOne(`#${this.arrowId}`);
+		if (this.arrowId && this.tempPoint && this.tempNextPoint && this.measureContainer && tempMainArrow && tempArrow) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+			const newPoints = [...tempMainArrow.points()];
+			newPoints.push(mousePoint.x - tempMainArrow.x());
+			newPoints.push(mousePoint.y - tempMainArrow.y());
+			tempMainArrow.setAttrs({
+				...this.props,
+				points: newPoints
+			});
+			const nodeHandler = this.instance.getNodeHandler("arrow");
+			const lineNodeHandler = this.instance.getNodeHandler("line");
+			this.instance.updateNode(lineNodeHandler.serialize(tempMainArrow));
+			this.tempPoint.setAttrs({
+				x: mousePoint.x,
+				y: mousePoint.y
+			});
+			this.tempNextPoint.setAttrs({
+				x: mousePoint.x,
+				y: mousePoint.y
+			});
+			tempArrow.setAttrs({
+				...this.props,
+				x: mousePoint.x,
+				y: mousePoint.y,
+				points: [0, 0]
+			});
+			this.instance.updateNode(nodeHandler.serialize(tempArrow));
+		}
+		this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
+	}
+	handleMovement() {
+		if (this.state !== ARROW_TOOL_STATE.DEFINING_SIZE) return;
+		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
+		if (this.arrowId && this.measureContainer && this.tempNextPoint && tempArrow) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+			tempArrow.setAttrs({
+				...this.props,
+				points: [
+					tempArrow.points()[0],
+					tempArrow.points()[1],
+					mousePoint.x - tempArrow.x(),
+					mousePoint.y - tempArrow.y()
+				]
+			});
+			const nodeHandler = this.instance.getNodeHandler("arrow");
+			this.instance.updateNode(nodeHandler.serialize(tempArrow));
+			this.tempNextPoint.setAttrs({
+				x: mousePoint.x,
+				y: mousePoint.y
+			});
+		}
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.props = this.initProps();
+		this.addArrow();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		this.tempPoint?.destroy();
+		this.tempNextPoint?.destroy();
+		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
+		const tempMainArrow = this.instance.getStage().findOne(`#${this.arrowId}`);
+		if (tempArrow) {
+			const nodeHandler = this.instance.getNodeHandler("arrow");
+			this.instance.removeNode(nodeHandler.serialize(tempArrow));
+		}
+		if (this.arrowId && tempMainArrow && tempMainArrow.points().length < 4) {
+			const nodeHandler = this.instance.getNodeHandler("line");
+			this.instance.removeNode(nodeHandler.serialize(tempMainArrow));
+		}
+		if (this.arrowId && tempMainArrow && tempMainArrow.points().length >= 4) {
+			const nodeHandler = this.instance.getNodeHandler("arrow");
+			const lineNodeHandler = this.instance.getNodeHandler("line");
+			const finalArrow = nodeHandler.create(this.arrowId, {
+				...tempMainArrow.getAttrs(),
+				...this.props,
+				strokeScaleEnabled: true,
+				strokeWidth: 1,
+				hitStrokeWidth: 16
+			});
+			this.instance.removeNode(lineNodeHandler.serialize(tempMainArrow));
+			this.instance.addNode(finalArrow, this.container?.getAttrs().id);
+		}
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.arrowId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction("selectionTool");
+		}
+		stage.container().style.cursor = "default";
+		this.initialCursor = null;
+		this.tempPoint = void 0;
+		this.tempNextPoint = void 0;
+		this.arrowId = null;
+		this.tempArrowId = null;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.setState(ARROW_TOOL_STATE.IDLE);
+	}
+};
+
 //#endregion
 //#region src/actions/frame-tool/constants.ts
 const FRAME_TOOL_ACTION_NAME = "frameTool";
@@ -23214,9 +24139,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
+exports.ARROW_TOOL_ACTION_NAME = ARROW_TOOL_ACTION_NAME
+exports.ARROW_TOOL_STATE = ARROW_TOOL_STATE
 exports.BRUSH_TOOL_ACTION_NAME = BRUSH_TOOL_ACTION_NAME
 exports.BRUSH_TOOL_STATE = BRUSH_TOOL_STATE
 exports.COPY_PASTE_NODES_PLUGIN_STATE = COPY_PASTE_NODES_PLUGIN_STATE
+exports.ELLIPSE_TOOL_ACTION_NAME = ELLIPSE_TOOL_ACTION_NAME
+exports.ELLIPSE_TOOL_STATE = ELLIPSE_TOOL_STATE
 exports.ERASER_TOOL_ACTION_NAME = ERASER_TOOL_ACTION_NAME
 exports.ERASER_TOOL_STATE = ERASER_TOOL_STATE
 exports.FRAME_TOOL_ACTION_NAME = FRAME_TOOL_ACTION_NAME
@@ -23237,11 +24166,15 @@ exports.RECTANGLE_TOOL_ACTION_NAME = RECTANGLE_TOOL_ACTION_NAME
 exports.RECTANGLE_TOOL_STATE = RECTANGLE_TOOL_STATE
 exports.SELECTION_TOOL_ACTION_NAME = SELECTION_TOOL_ACTION_NAME
 exports.SELECTION_TOOL_STATE = SELECTION_TOOL_STATE
+exports.STAR_TOOL_ACTION_NAME = STAR_TOOL_ACTION_NAME
+exports.STAR_TOOL_STATE = STAR_TOOL_STATE
 exports.TEXT_LAYOUT = TEXT_LAYOUT
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
+exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
 exports.WEAVE_DEFAULT_USER_INFO_FUNCTION = WEAVE_DEFAULT_USER_INFO_FUNCTION
+exports.WEAVE_ELLIPSE_NODE_TYPE = WEAVE_ELLIPSE_NODE_TYPE
 exports.WEAVE_FRAME_NODE_DEFAULT_CONFIG = WEAVE_FRAME_NODE_DEFAULT_CONFIG
 exports.WEAVE_FRAME_NODE_DEFAULT_PROPS = WEAVE_FRAME_NODE_DEFAULT_PROPS
 exports.WEAVE_FRAME_NODE_SIZES = WEAVE_FRAME_NODE_SIZES
@@ -23255,10 +24188,18 @@ 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_GROUP_NODE_TYPE = WEAVE_GROUP_NODE_TYPE
+exports.WEAVE_IMAGE_NODE_TYPE = WEAVE_IMAGE_NODE_TYPE
+exports.WEAVE_LAYER_NODE_TYPE = WEAVE_LAYER_NODE_TYPE
+exports.WEAVE_LINE_NODE_TYPE = WEAVE_LINE_NODE_TYPE
 exports.WEAVE_NODES_SELECTION_KEY = WEAVE_NODES_SELECTION_KEY
 exports.WEAVE_NODES_SELECTION_LAYER_ID = WEAVE_NODES_SELECTION_LAYER_ID
 exports.WEAVE_NODES_SNAPPING_KEY = WEAVE_NODES_SNAPPING_KEY
+exports.WEAVE_RECTANGLE_NODE_TYPE = WEAVE_RECTANGLE_NODE_TYPE
 exports.WEAVE_STAGE_GRID_KEY = WEAVE_STAGE_GRID_KEY
+exports.WEAVE_STAGE_NODE_TYPE = WEAVE_STAGE_NODE_TYPE
+exports.WEAVE_STAR_NODE_TYPE = WEAVE_STAR_NODE_TYPE
+exports.WEAVE_TEXT_NODE_TYPE = WEAVE_TEXT_NODE_TYPE
 exports.WEAVE_USERS_POINTERS_KEY = WEAVE_USERS_POINTERS_KEY
 exports.WEAVE_USERS_SELECTION_KEY = WEAVE_USERS_SELECTION_KEY
 exports.WEAVE_USER_POINTERS_DEFAULT_PROPS = WEAVE_USER_POINTERS_DEFAULT_PROPS
@@ -23266,10 +24207,14 @@ exports.WEAVE_USER_POINTER_KEY = WEAVE_USER_POINTER_KEY
 exports.WEAVE_USER_SELECTION_KEY = WEAVE_USER_SELECTION_KEY
 exports.Weave = Weave
 exports.WeaveAction = WeaveAction
+exports.WeaveArrowNode = WeaveArrowNode
+exports.WeaveArrowToolAction = WeaveArrowToolAction
 exports.WeaveBrushToolAction = WeaveBrushToolAction
 exports.WeaveConnectedUsersPlugin = WeaveConnectedUsersPlugin
 exports.WeaveContextMenuPlugin = WeaveContextMenuPlugin
 exports.WeaveCopyPasteNodesPlugin = WeaveCopyPasteNodesPlugin
+exports.WeaveEllipseNode = WeaveEllipseNode
+exports.WeaveEllipseToolAction = WeaveEllipseToolAction
 exports.WeaveEraserToolAction = WeaveEraserToolAction
 exports.WeaveExportNodeToolAction = WeaveExportNodeToolAction
 exports.WeaveExportStageToolAction = WeaveExportStageToolAction
@@ -23297,6 +24242,8 @@ exports.WeaveStageNode = WeaveStageNode
 exports.WeaveStagePanningPlugin = WeaveStagePanningPlugin
 exports.WeaveStageResizePlugin = WeaveStageResizePlugin
 exports.WeaveStageZoomPlugin = WeaveStageZoomPlugin
+exports.WeaveStarNode = WeaveStarNode
+exports.WeaveStarToolAction = WeaveStarToolAction
 exports.WeaveStore = WeaveStore
 exports.WeaveTextNode = WeaveTextNode
 exports.WeaveTextToolAction = WeaveTextToolAction