@inditextech/weave-sdk 5.1.1 → 5.1.2

package/dist/sdk.js

@@ -4913,6 +4913,11 @@ function handleClickOrTap(ctx, e) {
 		tr.nodes([nodeTargeted]);
 		tr.show();
 		areNodesSelected = true;
+		const canMove = typeof nodeTargeted.canDrag === "function" ? nodeTargeted.canDrag() : false;
+		if (canMove && e.evt) {
+			nodeTargeted.draggable(true);
+			ctx.armDrag(nodeTargeted, e.evt.pointerId);
+		}
 	}
 	if (metaPressed && isSelected) {
 		const nodes = tr.nodes().slice();
@@ -5010,6 +5015,7 @@ function handlePointerDown(ctx, e) {
 	if (e.target.getClassName().includes("custom-snap-guide")) return;
 	ctx.setClickOrTapHandled(false);
 	ctx.registerPointer(e.evt.pointerId, e.evt);
+	ctx.clearArmedDrag();
 	if (e.evt.pointerType === "touch" && ctx.getPointerCount() > 1) return;
 	if (e.evt.pointerType === "mouse" && e.evt?.button !== 0) return;
 	if (e.evt.pointerType === "pen" && e.evt?.pressure <= .05) return;
@@ -5103,6 +5109,7 @@ function handlePointerUp(ctx, e) {
 	ctx.getGesture().checkDoubleTap(e.evt.clientX, e.evt.clientY);
 	ctx.unregisterPointer(e.evt.pointerId);
 	ctx.getGesture().commitTap();
+	ctx.clearArmedDrag();
 	if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
 	const contextMenuPlugin = ctx.getContextMenuPlugin();
 	if (!ctx.isInitialized()) {
@@ -5193,6 +5200,35 @@ function handlePointerUp(ctx, e) {
 	ctx.triggerSelectedNodesEvent();
 }
 
+//#endregion
+//#region src/plugins/nodes-selection/events/armed-drag.ts
+/**
+* Handles the stage `pointermove` for single-gesture select+drag. When a node
+* has been "armed" by a fresh single-selection click (see click-tap.ts), this
+* starts the drag on the same gesture as soon as the pointer moves past the
+* move threshold, so the user does not need a second press to begin moving.
+*
+* A plain click (no movement) never reaches the threshold, so it only selects.
+* Uses the public Konva `startDrag` API — the node's own `dragstart` handler
+* and the transformer's drag proxy take over from there.
+*
+* Wired un-throttled (separate from the throttled selection pointermove) to
+* keep drag initiation responsive.
+*/
+function handleArmedDrag(ctx, e) {
+	const node = ctx.getArmedDragNode();
+	if (!node || !e?.evt) return;
+	if (e.evt.buttons === 0) {
+		ctx.clearArmedDrag();
+		return;
+	}
+	if (e.evt.pointerId !== ctx.getArmedDragPointerId()) return;
+	if (!ctx.getGesture().checkMoved(e.evt.clientX, e.evt.clientY)) return;
+	if (node.isDragging()) return;
+	ctx.clearArmedDrag();
+	node.startDrag(e.evt);
+}
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -5200,6 +5236,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	_handledClickOrTap = false;
 	dragSelectedNodes = [];
 	_activeGroupContext = null;
+	_armedDragNode = null;
+	_armedDragPointerId = null;
 	onRender = void 0;
 	constructor(params) {
 		super();
@@ -5227,6 +5265,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.dragSelectedNodes = [];
 		this._handledClickOrTap = false;
 		this._activeGroupContext = null;
+		this._armedDragNode = null;
+		this._armedDragPointerId = null;
 	}
 	getName() {
 		return WEAVE_NODES_SELECTION_KEY;
@@ -5285,6 +5325,20 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	setAreaSelecting(val) {
 		this.selecting = val;
 	}
+	armDrag(node, pointerId) {
+		this._armedDragNode = node;
+		this._armedDragPointerId = pointerId;
+	}
+	getArmedDragNode() {
+		return this._armedDragNode;
+	}
+	getArmedDragPointerId() {
+		return this._armedDragPointerId;
+	}
+	clearArmedDrag() {
+		this._armedDragNode = null;
+		this._armedDragPointerId = null;
+	}
 	initLayer() {
 		const stage = this.instance.getStage();
 		const layer = new Konva.Layer({ id: this.getLayerName() });
@@ -5427,6 +5481,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		registerKeyboardHandlers(this);
 		stage.on("pointerdown", (e) => handlePointerDown(this, e));
 		stage.on("pointermove", (0, import_throttle.default)((e) => handlePointerMove(this, e), DEFAULT_THROTTLE_MS));
+		stage.on("pointermove", (e) => handleArmedDrag(this, e));
 		stage.on("pointerup", (e) => handlePointerUp(this, e));
 		this.instance.addEventListener("onStateChange", () => {
 			requestAnimationFrame(() => {
@@ -9701,7 +9756,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "5.1.1";
+var version = "5.1.2";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -13710,6 +13765,8 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer = null;
 		this.textArea = null;
 		this.editing = false;
+		this.editingNodeId = null;
+		this.nodeRenderedAddedRegistered = false;
 		this.textArea = null;
 	}
 	updateNode(nodeInstance) {
@@ -13725,9 +13782,9 @@ var WeaveTextNode = class extends WeaveNode {
 				this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
 			} else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
 			else this.instance.updateNode(this.serialize(clonedText));
-			this.createNode = false;
 			clonedText.destroy();
 		}
+		this.createNode = false;
 	}
 	handleKeyPress = (e) => {
 		if (e.code === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
@@ -13897,9 +13954,12 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformend", () => {
 			handleTransformEnd();
 		});
-		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
-			if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
-		});
+		if (!this.nodeRenderedAddedRegistered) {
+			this.instance.addEventListener("onNodeRenderedAdded", (node) => {
+				if (this.editing && this.editingNodeId !== null && node.id() === this.editingNodeId && node.getAttr("cancelEditMode")) node.getAttr("cancelEditMode")?.();
+			});
+			this.nodeRenderedAddedRegistered = true;
+		}
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
 			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController().signal });
@@ -13935,7 +13995,7 @@ var WeaveTextNode = class extends WeaveNode {
 			width,
 			height
 		});
-		if (this.editing) this.updateTextAreaDOM(nodeInstance);
+		if (this.editing && this.editingNodeId === nodeInstance.id()) this.updateTextAreaDOM(nodeInstance);
 		if (!this.editing) {
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			if (nodesSelectionPlugin) {
@@ -14279,27 +14339,29 @@ var WeaveTextNode = class extends WeaveNode {
 			this.instance.disablePlugin("nodesSelection");
 			tr.hide();
 		}
-		if (this.editing) textNode.visible(false);
+		if (this.editing && this.editingNodeId === textNode.id()) textNode.visible(false);
 		else textNode.visible(true);
 	}
 	removeTextAreaDOM(textNode) {
 		this.instance.releaseMutexLock();
 		this.instance.getStage().mode(WEAVE_STAGE_DEFAULT_MODE);
 		this.editing = false;
+		this.editingNodeId = null;
 		const stage = this.instance.getStage();
 		if (this.textAreaSuperContainer) this.textAreaSuperContainer.remove();
 		textNode.visible(true);
 		this.updateNode(textNode);
+		const liveNode = stage.findOne(`#${textNode.id()}`) ?? textNode;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			this.instance.enablePlugin("nodesSelection");
-			selectionPlugin.setSelectedNodes([textNode]);
+			selectionPlugin.setSelectedNodes([liveNode]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		stage.container().tabIndex = 1;
 		stage.container().click();
 		stage.container().focus();
-		this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
+		this.instance.emitEvent("onExitTextNodeEditMode", { node: liveNode });
 	}
 	triggerEditMode(textNode, create = false) {
 		if (create) this.createNode = true;
@@ -14309,6 +14371,7 @@ var WeaveTextNode = class extends WeaveNode {
 		});
 		if (!lockAcquired) return;
 		this.editing = true;
+		this.editingNodeId = textNode.id();
 		textNode.visible(false);
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
@@ -24787,14 +24850,18 @@ var WeaveTextToolAction = class extends WeaveAction {
 	cleanup() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			const node = stage.findOne(`#${this.textId}`);
-			if (node) selectionPlugin.setSelectedNodes([node]);
-			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		const placedId = this.textId;
+		const justAdded = this.state === TEXT_TOOL_STATE.FINISHED && !!placedId;
+		if (justAdded) {
+			const selectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (selectionPlugin) {
+				const node = stage.findOne(`#${placedId}`);
+				if (node) selectionPlugin.setSelectedNodes([node]);
+				this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+			}
+			const textGroup = stage.findOne(`#${placedId}`);
+			if (textGroup) textGroup.getAttr("triggerEditMode")?.(textGroup, true);
 		}
-		const textGroup = stage.findOne(`#${this.textId}`);
-		if (textGroup) textGroup.getAttr("triggerEditMode")(textGroup, true);
 		this.initialCursor = null;
 		this.textId = null;
 		this.container = void 0;

package/dist/sdk.node.js

@@ -4912,6 +4912,11 @@ function handleClickOrTap(ctx, e) {
 		tr.nodes([nodeTargeted]);
 		tr.show();
 		areNodesSelected = true;
+		const canMove = typeof nodeTargeted.canDrag === "function" ? nodeTargeted.canDrag() : false;
+		if (canMove && e.evt) {
+			nodeTargeted.draggable(true);
+			ctx.armDrag(nodeTargeted, e.evt.pointerId);
+		}
 	}
 	if (metaPressed && isSelected) {
 		const nodes = tr.nodes().slice();
@@ -5009,6 +5014,7 @@ function handlePointerDown(ctx, e) {
 	if (e.target.getClassName().includes("custom-snap-guide")) return;
 	ctx.setClickOrTapHandled(false);
 	ctx.registerPointer(e.evt.pointerId, e.evt);
+	ctx.clearArmedDrag();
 	if (e.evt.pointerType === "touch" && ctx.getPointerCount() > 1) return;
 	if (e.evt.pointerType === "mouse" && e.evt?.button !== 0) return;
 	if (e.evt.pointerType === "pen" && e.evt?.pressure <= .05) return;
@@ -5102,6 +5108,7 @@ function handlePointerUp(ctx, e) {
 	ctx.getGesture().checkDoubleTap(e.evt.clientX, e.evt.clientY);
 	ctx.unregisterPointer(e.evt.pointerId);
 	ctx.getGesture().commitTap();
+	ctx.clearArmedDrag();
 	if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
 	const contextMenuPlugin = ctx.getContextMenuPlugin();
 	if (!ctx.isInitialized()) {
@@ -5192,6 +5199,35 @@ function handlePointerUp(ctx, e) {
 	ctx.triggerSelectedNodesEvent();
 }
 
+//#endregion
+//#region src/plugins/nodes-selection/events/armed-drag.ts
+/**
+* Handles the stage `pointermove` for single-gesture select+drag. When a node
+* has been "armed" by a fresh single-selection click (see click-tap.ts), this
+* starts the drag on the same gesture as soon as the pointer moves past the
+* move threshold, so the user does not need a second press to begin moving.
+*
+* A plain click (no movement) never reaches the threshold, so it only selects.
+* Uses the public Konva `startDrag` API — the node's own `dragstart` handler
+* and the transformer's drag proxy take over from there.
+*
+* Wired un-throttled (separate from the throttled selection pointermove) to
+* keep drag initiation responsive.
+*/
+function handleArmedDrag(ctx, e) {
+	const node = ctx.getArmedDragNode();
+	if (!node || !e?.evt) return;
+	if (e.evt.buttons === 0) {
+		ctx.clearArmedDrag();
+		return;
+	}
+	if (e.evt.pointerId !== ctx.getArmedDragPointerId()) return;
+	if (!ctx.getGesture().checkMoved(e.evt.clientX, e.evt.clientY)) return;
+	if (node.isDragging()) return;
+	ctx.clearArmedDrag();
+	node.startDrag(e.evt);
+}
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -5199,6 +5235,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	_handledClickOrTap = false;
 	dragSelectedNodes = [];
 	_activeGroupContext = null;
+	_armedDragNode = null;
+	_armedDragPointerId = null;
 	onRender = void 0;
 	constructor(params) {
 		super();
@@ -5226,6 +5264,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.dragSelectedNodes = [];
 		this._handledClickOrTap = false;
 		this._activeGroupContext = null;
+		this._armedDragNode = null;
+		this._armedDragPointerId = null;
 	}
 	getName() {
 		return WEAVE_NODES_SELECTION_KEY;
@@ -5284,6 +5324,20 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	setAreaSelecting(val) {
 		this.selecting = val;
 	}
+	armDrag(node, pointerId) {
+		this._armedDragNode = node;
+		this._armedDragPointerId = pointerId;
+	}
+	getArmedDragNode() {
+		return this._armedDragNode;
+	}
+	getArmedDragPointerId() {
+		return this._armedDragPointerId;
+	}
+	clearArmedDrag() {
+		this._armedDragNode = null;
+		this._armedDragPointerId = null;
+	}
 	initLayer() {
 		const stage = this.instance.getStage();
 		const layer = new Konva.Layer({ id: this.getLayerName() });
@@ -5426,6 +5480,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		registerKeyboardHandlers(this);
 		stage.on("pointerdown", (e) => handlePointerDown(this, e));
 		stage.on("pointermove", (0, import_throttle.default)((e) => handlePointerMove(this, e), DEFAULT_THROTTLE_MS));
+		stage.on("pointermove", (e) => handleArmedDrag(this, e));
 		stage.on("pointerup", (e) => handlePointerUp(this, e));
 		this.instance.addEventListener("onStateChange", () => {
 			requestAnimationFrame(() => {
@@ -9700,7 +9755,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "5.1.1";
+var version = "5.1.2";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -13709,6 +13764,8 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer = null;
 		this.textArea = null;
 		this.editing = false;
+		this.editingNodeId = null;
+		this.nodeRenderedAddedRegistered = false;
 		this.textArea = null;
 	}
 	updateNode(nodeInstance) {
@@ -13724,9 +13781,9 @@ var WeaveTextNode = class extends WeaveNode {
 				this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
 			} else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
 			else this.instance.updateNode(this.serialize(clonedText));
-			this.createNode = false;
 			clonedText.destroy();
 		}
+		this.createNode = false;
 	}
 	handleKeyPress = (e) => {
 		if (e.code === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
@@ -13896,9 +13953,12 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformend", () => {
 			handleTransformEnd();
 		});
-		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
-			if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
-		});
+		if (!this.nodeRenderedAddedRegistered) {
+			this.instance.addEventListener("onNodeRenderedAdded", (node) => {
+				if (this.editing && this.editingNodeId !== null && node.id() === this.editingNodeId && node.getAttr("cancelEditMode")) node.getAttr("cancelEditMode")?.();
+			});
+			this.nodeRenderedAddedRegistered = true;
+		}
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
 			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController().signal });
@@ -13934,7 +13994,7 @@ var WeaveTextNode = class extends WeaveNode {
 			width,
 			height
 		});
-		if (this.editing) this.updateTextAreaDOM(nodeInstance);
+		if (this.editing && this.editingNodeId === nodeInstance.id()) this.updateTextAreaDOM(nodeInstance);
 		if (!this.editing) {
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			if (nodesSelectionPlugin) {
@@ -14278,27 +14338,29 @@ var WeaveTextNode = class extends WeaveNode {
 			this.instance.disablePlugin("nodesSelection");
 			tr.hide();
 		}
-		if (this.editing) textNode.visible(false);
+		if (this.editing && this.editingNodeId === textNode.id()) textNode.visible(false);
 		else textNode.visible(true);
 	}
 	removeTextAreaDOM(textNode) {
 		this.instance.releaseMutexLock();
 		this.instance.getStage().mode(WEAVE_STAGE_DEFAULT_MODE);
 		this.editing = false;
+		this.editingNodeId = null;
 		const stage = this.instance.getStage();
 		if (this.textAreaSuperContainer) this.textAreaSuperContainer.remove();
 		textNode.visible(true);
 		this.updateNode(textNode);
+		const liveNode = stage.findOne(`#${textNode.id()}`) ?? textNode;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			this.instance.enablePlugin("nodesSelection");
-			selectionPlugin.setSelectedNodes([textNode]);
+			selectionPlugin.setSelectedNodes([liveNode]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		stage.container().tabIndex = 1;
 		stage.container().click();
 		stage.container().focus();
-		this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
+		this.instance.emitEvent("onExitTextNodeEditMode", { node: liveNode });
 	}
 	triggerEditMode(textNode, create = false) {
 		if (create) this.createNode = true;
@@ -14308,6 +14370,7 @@ var WeaveTextNode = class extends WeaveNode {
 		});
 		if (!lockAcquired) return;
 		this.editing = true;
+		this.editingNodeId = textNode.id();
 		textNode.visible(false);
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
@@ -24786,14 +24849,18 @@ var WeaveTextToolAction = class extends WeaveAction {
 	cleanup() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			const node = stage.findOne(`#${this.textId}`);
-			if (node) selectionPlugin.setSelectedNodes([node]);
-			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		const placedId = this.textId;
+		const justAdded = this.state === TEXT_TOOL_STATE.FINISHED && !!placedId;
+		if (justAdded) {
+			const selectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (selectionPlugin) {
+				const node = stage.findOne(`#${placedId}`);
+				if (node) selectionPlugin.setSelectedNodes([node]);
+				this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+			}
+			const textGroup = stage.findOne(`#${placedId}`);
+			if (textGroup) textGroup.getAttr("triggerEditMode")?.(textGroup, true);
 		}
-		const textGroup = stage.findOne(`#${this.textId}`);
-		if (textGroup) textGroup.getAttr("triggerEditMode")(textGroup, true);
 		this.initialCursor = null;
 		this.textId = null;
 		this.container = void 0;