@inditextech/weave-sdk 3.2.5 → 3.3.0

package/dist/types.js

@@ -21982,7 +21982,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.2.5";
+var version = "3.3.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -24150,11 +24150,15 @@ var GreedySnapper = class {
 	reset() {
 		this.snappedAngle = null;
 	}
+	angleDiff(a, b) {
+		const diff = Math.abs(a - b) % 360;
+		return diff > 180 ? 360 - diff : diff;
+	}
 	apply(angleDeg) {
 		const { snapAngles, activateThreshold, releaseThreshold } = this.config;
 		const normalized = (angleDeg % 360 + 360) % 360;
 		if (this.snappedAngle !== null) {
-			const diff = Math.abs(normalized - this.snappedAngle);
+			const diff = this.angleDiff(normalized, this.snappedAngle);
 			if (diff > releaseThreshold) {
 				this.snappedAngle = null;
 				return normalized;
@@ -27477,8 +27481,8 @@ const WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG = { snapAngles: {
 		270,
 		315
 	],
-	activateThreshold: 5,
-	releaseThreshold: 10
+	activateThreshold: 3,
+	releaseThreshold: 4
 } };
 const WEAVE_STROKE_SINGLE_NODE_TIP_TYPE = {
 	NONE: "none",
@@ -27600,7 +27604,7 @@ var WeaveArrowLineTipManager = class extends WeaveBaseLineTipManager {
 		const height = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Height`] ?? Math.sqrt(3) / 2 * 3;
 		const triangle = new Konva.Line({
 			id: `${instance.getAttrs().id}-tip-${point}`,
-			name: "lineTip",
+			name: "lineTip stroke-internal",
 			nodeId: instance.getAttrs().id,
 			closed: true,
 			stroke,
@@ -27666,7 +27670,7 @@ var WeaveCircleLineTipManager = class extends WeaveBaseLineTipManager {
 		const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
 		const circle = new Konva.Circle({
 			id: `${instance.getAttrs().id}-tip-${point}`,
-			name: "lineTip",
+			name: "lineTip stroke-internal",
 			nodeId: instance.getAttrs().id,
 			radius,
 			stroke: "black",
@@ -27780,7 +27784,7 @@ var WeaveSquareLineTipManager = class extends WeaveBaseLineTipManager {
 		const width = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Width`] ?? 3;
 		const square = new Konva.Rect({
 			id: `${instance.getAttrs().id}-tip-${point}`,
-			name: "lineTip",
+			name: "lineTip stroke-internal",
 			nodeId: instance.getAttrs().id,
 			width,
 			height: width,
@@ -27829,13 +27833,26 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		this.config = mergeExceptArrays(WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, params?.config ?? {});
 		this.handleNodeChanges = null;
 		this.handleZoomChanges = null;
+		this.shiftPressed = false;
 		this.snapper = new GreedySnapper({
 			snapAngles: this.config.snapAngles.angles,
 			activateThreshold: this.config.snapAngles.activateThreshold,
 			releaseThreshold: this.config.snapAngles.releaseThreshold
 		});
+		this.eventsInitialized = false;
+	}
+	initEvents() {
+		if (this.eventsInitialized) return;
+		window.addEventListener("keydown", (e) => {
+			if (e.key === "Shift") this.shiftPressed = true;
+		});
+		window.addEventListener("keyup", (e) => {
+			if (e.key === "Shift") this.shiftPressed = false;
+		});
+		this.eventsInitialized = true;
 	}
 	onRender(props) {
+		this.initEvents();
 		const stroke = new Konva.Group({
 			...props,
 			name: `node ${WEAVE_STROKE_SINGLE_NODE_TYPE}`,
@@ -27847,7 +27864,7 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 			...props,
 			id: `${stroke.getAttrs().id}-line`,
 			nodeId: stroke.getAttrs().id,
-			name: void 0,
+			name: "stroke-internal",
 			x: 0,
 			y: 0,
 			strokeScaleEnabled: true,
@@ -27869,6 +27886,7 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 				shouldOverdrawWholeArea: points.length !== 4
 			};
 		};
+		this.setupDefaultNodeEvents(stroke);
 		let originalStartHandleVisibility = null;
 		let originalEndHandleVisibility = null;
 		stroke.on("dragstart", () => {
@@ -27883,7 +27901,6 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 			originalStartHandleVisibility = null;
 			originalEndHandleVisibility = null;
 		});
-		this.setupDefaultNodeEvents(stroke);
 		if (!this.handleZoomChanges) {
 			this.handleZoomChanges = () => {
 				if (this.startHandle) this.startHandle.scale({
@@ -27900,12 +27917,10 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		if (!this.handleNodeChanges) {
 			this.handleNodeChanges = (nodes) => {
 				this.teardownSelection();
-				if (nodes.length === 1 && nodes[0].instance.getAttrs().nodeType === WEAVE_STROKE_SINGLE_NODE_TYPE) {
-					const strokeSelected = this.instance.getStage().findOne(`#${nodes[0].instance.getAttrs().id}`);
-					if (!strokeSelected) return;
+				if (nodes.length === 1 && nodes[0].node?.type === WEAVE_STROKE_SINGLE_NODE_TYPE) {
 					this.setupHandles();
-					this.showHandles(strokeSelected);
-					this.setupSelection(strokeSelected, true);
+					this.showHandles(nodes[0].instance);
+					this.setupSelection(nodes[0].instance, true);
 				} else {
 					this.startHandle?.setAttr("strokeId", void 0);
 					this.startHandle?.visible(false);
@@ -27948,175 +27963,92 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		return stroke;
 	}
 	setupHandles() {
-		if (!this.startHandle) {
-			const startHandle = new Konva.Circle({
-				id: "line-start-handle",
-				radius: 5,
-				fill: "#ffffff",
-				stroke: "#000000",
-				strokeWidth: 1,
-				edgeDistanceDisableOnDrag: true,
-				scaleX: 1 / this.instance.getStage().scaleX(),
-				scaleY: 1 / this.instance.getStage().scaleY(),
-				draggable: true
-			});
-			startHandle.on("pointerover", () => {
-				this.instance.getStage().container().style.cursor = "move";
-			});
-			startHandle.on("pointerout", () => {
-				this.instance.getStage().container().style.cursor = "default";
-			});
-			startHandle.on("dragstart", (e) => {
-				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
-				if (tr) tr.hide();
-				const strokeId = e.target.getAttr("strokeId");
-				const stroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!stroke) return;
-				const points = stroke.getAttrs().linePoints;
-				if (points.length === 4) stroke.setAttr("eventTarget", true);
-				this.instance.emitEvent("onDrag", e.target);
-			});
-			startHandle.on("dragmove", (e) => {
-				const draggedTarget = e.target;
-				const strokeId = draggedTarget.getAttr("strokeId");
-				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!draggedStroke) return;
-				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
-				if (!internalLine) return;
-				const points = draggedStroke.getAttrs().linePoints;
-				if (points.length !== 4) return;
-				this.teardownSelection();
-				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
-				draggedStroke.setAttrs({ linePoints: [
-					newLinePoint.x,
-					newLinePoint.y,
-					points[2],
-					points[3]
-				] });
-				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
-				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
-				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				this.setupSelection(draggedStroke);
-			});
-			startHandle.on("dragend", (e) => {
-				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
-				if (tr) tr.show();
-				const draggedTarget = e.target;
-				const strokeId = draggedTarget.getAttr("strokeId");
-				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!draggedStroke) return;
-				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
-				if (!internalLine) return;
-				const points = draggedStroke.getAttrs().linePoints;
-				if (points.length !== 4) return;
-				this.teardownSelection();
-				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
-				draggedStroke.setAttrs({ linePoints: [
-					newLinePoint.x,
-					newLinePoint.y,
-					points[2],
-					points[3]
-				] });
-				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
-				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
-				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				this.setupSelection(draggedStroke);
-				this.instance.updateNode(this.serialize(draggedStroke));
-				this.instance.emitEvent("onDrag", null);
-			});
-			this.startHandle = startHandle;
+		if (!this.startHandle) this.setupHandle("start");
+		if (!this.endHandle) this.setupHandle("end");
+	}
+	setupHandle(side) {
+		const handleDragStart = (e) => {
+			const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
+			if (tr) tr.hide();
+			const strokeId = e.target.getAttr("strokeId");
+			const stroke = this.instance.getStage().findOne(`#${strokeId}`);
+			if (!stroke) return;
+			const points = stroke.getAttrs().linePoints;
+			if (points.length === 4) stroke.setAttr("eventTarget", true);
+			this.instance.emitEvent("onDrag", e.target);
+		};
+		const handleDragPosition = (side$1) => (e) => {
+			const draggedTarget = e.target;
+			const strokeId = draggedTarget.getAttr("strokeId");
+			const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+			if (!draggedStroke) return;
+			const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
+			if (!internalLine) return;
+			const points = draggedStroke.getAttrs().linePoints;
+			if (points.length !== 4) return;
+			this.teardownSelection();
+			const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
+			const pos = this.getDragPoint(draggedStroke, newLinePoint, side$1);
+			if (side$1 === "start") draggedStroke.setAttrs({ linePoints: [
+				pos.x,
+				pos.y,
+				points[2],
+				points[3]
+			] });
+			else draggedStroke.setAttrs({ linePoints: [
+				points[0],
+				points[1],
+				pos.x,
+				pos.y
+			] });
+			this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+			this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+			const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
+			this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+			const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
+			this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+			this.setupSelection(draggedStroke);
+		};
+		const handleDragMove = (side$1) => (e) => {
+			handleDragPosition(side$1)(e);
+		};
+		const handleDragEnd = (side$1) => (e) => {
+			handleDragPosition(side$1)(e);
+			const draggedTarget = e.target;
+			const strokeId = draggedTarget.getAttr("strokeId");
+			const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+			if (!draggedStroke) return;
+			this.instance.updateNode(this.serialize(draggedStroke));
+			this.instance.emitEvent("onDrag", null);
+		};
+		const handle = new Konva.Circle({
+			id: `line-${side}-handle`,
+			radius: 5,
+			fill: "#ffffff",
+			stroke: "#000000",
+			strokeWidth: 1,
+			edgeDistanceDisableOnDrag: true,
+			scaleX: 1 / this.instance.getStage().scaleX(),
+			scaleY: 1 / this.instance.getStage().scaleY(),
+			draggable: true
+		});
+		handle.on("pointerover", () => {
+			this.instance.getStage().container().style.cursor = "move";
+		});
+		handle.on("pointerout", () => {
+			this.instance.getStage().container().style.cursor = "default";
+		});
+		handle.on("dragstart", handleDragStart);
+		handle.on("dragmove", handleDragMove(side));
+		handle.on("dragend", handleDragEnd(side));
+		if (side === "start") {
+			this.startHandle = handle;
 			this.startHandle.visible(false);
-			this.instance.getSelectionLayer()?.add(this.startHandle);
-		}
-		if (!this.endHandle) {
-			const endHandle = new Konva.Circle({
-				id: "line-end-handle",
-				radius: 5,
-				fill: "#ffffff",
-				stroke: "#000000",
-				strokeWidth: 1,
-				edgeDistanceDisableOnDrag: true,
-				scaleX: 1 / this.instance.getStage().scaleX(),
-				scaleY: 1 / this.instance.getStage().scaleY(),
-				draggable: true
-			});
-			endHandle.on("pointerover", () => {
-				this.instance.getStage().container().style.cursor = "move";
-			});
-			endHandle.on("pointerout", () => {
-				this.instance.getStage().container().style.cursor = "default";
-			});
-			endHandle.on("dragstart", (e) => {
-				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
-				if (tr) tr.hide();
-				const strokeId = e.target.getAttr("strokeId");
-				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!draggedStroke) return;
-				const points = draggedStroke.getAttrs().linePoints;
-				if (points.length !== 4) return;
-				if (points.length === 4) draggedStroke.setAttr("eventTarget", true);
-				this.instance.emitEvent("onDrag", e.target);
-			});
-			endHandle.on("dragmove", (e) => {
-				const draggedTarget = e.target;
-				const strokeId = draggedTarget.getAttr("strokeId");
-				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!draggedStroke) return;
-				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
-				if (!internalLine) return;
-				const points = draggedStroke.getAttrs().linePoints;
-				if (points.length !== 4) return;
-				this.teardownSelection();
-				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
-				draggedStroke.setAttrs({ linePoints: [
-					points[0],
-					points[1],
-					newLinePoint.x,
-					newLinePoint.y
-				] });
-				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
-				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
-				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				this.setupSelection(draggedStroke);
-			});
-			endHandle.on("dragend", (e) => {
-				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
-				if (tr) tr.show();
-				const draggedTarget = e.target;
-				const strokeId = draggedTarget.getAttr("strokeId");
-				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
-				if (!draggedStroke) return;
-				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
-				if (!internalLine) return;
-				const points = draggedStroke.getAttrs().linePoints;
-				if (points.length !== 4) return;
-				this.teardownSelection();
-				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
-				draggedStroke.setAttrs({ linePoints: [
-					points[0],
-					points[1],
-					newLinePoint.x,
-					newLinePoint.y
-				] });
-				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
-				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
-				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
-				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
-				this.setupSelection(draggedStroke);
-				this.instance.updateNode(this.serialize(draggedStroke));
-				this.instance.emitEvent("onDrag", null);
-			});
-			this.endHandle = endHandle;
+		} else {
+			this.endHandle = handle;
 			this.endHandle.visible(false);
-			this.instance.getSelectionLayer()?.add(this.endHandle);
 		}
+		this.instance.getSelectionLayer()?.add(handle);
 	}
 	showHandles(stroke) {
 		if (this.startHandle === null || this.endHandle === null) return;
@@ -28140,7 +28072,7 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		this.tipManagers[tipEndStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
 		const internalLine = stroke.findOne(`#${stroke.getAttrs().id}-line`);
 		if (internalLine) internalLine.setAttrs({
-			name: void 0,
+			name: "stroke-internal",
 			dash: nextProps.dash,
 			fill: nextProps.fill,
 			stroke: nextProps.stroke,
@@ -28200,20 +28132,19 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		if (markSelected) instance.setAttrs({ isSelected: true });
 		const hoverClone = instance.findOne(".hoverClone");
 		if (hoverClone) return;
-		const internalLine = instance.findOne(`#${instance.getAttrs().id}-line`);
-		if (!internalLine) return;
-		const internalLineHover = internalLine.clone();
-		internalLineHover.setAttrs({
-			name: "hoverClone",
-			stroke: "#1a1aff",
-			listening: false,
-			draggable: false,
-			strokeWidth: 1,
-			points: instance.getAttrs().linePoints,
-			strokeScaleEnabled: false
-		});
-		instance.add(internalLineHover);
-		internalLineHover.moveToTop();
+		const internalNodes = instance.find(".stroke-internal");
+		for (const node of internalNodes) {
+			const internalNode = node.clone();
+			internalNode.setAttrs({
+				name: "hoverClone",
+				fill: "#1a1aff",
+				stroke: "#1a1aff",
+				listening: false,
+				draggable: false
+			});
+			instance.add(internalNode);
+			internalNode.moveToTop();
+		}
 	}
 	teardownSelection() {
 		const stage = this.instance.getStage();
@@ -28231,6 +28162,37 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		const tipEndStyle = instance.getAttrs().tipEndStyle ?? "none";
 		this.tipManagers[tipEndStyle]?.update(instance, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
 	}
+	getDragPoint(draggedStroke, newLinePoint, dragFrom) {
+		const pos = {
+			x: 0,
+			y: 0
+		};
+		const linePoints = draggedStroke.getAttrs().linePoints;
+		const fixed = dragFrom === "start" ? {
+			x: linePoints[2],
+			y: linePoints[3]
+		} : {
+			x: linePoints[0],
+			y: linePoints[1]
+		};
+		if (this.shiftPressed) {
+			let dx = newLinePoint.x - fixed.x;
+			let dy = newLinePoint.y - fixed.y;
+			const angle = Math.atan2(dy, dx);
+			const angleDeg = angle * 180 / Math.PI;
+			const snapped = this.snapper.apply(angleDeg);
+			const dist = Math.hypot(dx, dy);
+			const rad = snapped * Math.PI / 180;
+			dx = Math.cos(rad) * dist;
+			dy = Math.sin(rad) * dist;
+			pos.x = fixed.x + dx;
+			pos.y = fixed.y + dy;
+		} else {
+			pos.x = newLinePoint.x;
+			pos.y = newLinePoint.y;
+		}
+		return pos;
+	}
 };
 
 //#endregion