@inditextech/weave-sdk 0.3.2 → 0.4.0

package/dist/sdk.cjs

@@ -16286,6 +16286,40 @@ var WeaveNode = class {
 		if (selectionPlugin.getSelectedNodes().length === 1 && selectionPlugin.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
 		return selected;
 	}
+	clearContainerTargets() {
+		const getContainers = this.instance.getContainerNodes();
+		for (const container of getContainers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+	}
+	checkIfOverContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		return layerToMove;
+	}
+	moveNodeToContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = this.instance.getMainLayer();
+		if (layerToMove) {
+			const nodePos = node.getAbsolutePosition();
+			const nodeRotation = node.getAbsoluteRotation();
+			node.moveTo(layerToMove);
+			node.setAbsolutePosition(nodePos);
+			node.rotation(nodeRotation);
+			node.x(node.x() - (layerToMove.getAttrs().containerOffsetX ?? 0));
+			node.y(node.y() - (layerToMove.getAttrs().containerOffsetY ?? 0));
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			const actualNode = nodeHandler.serialize(node);
+			this.instance.removeNode(actualNode);
+			this.instance.addNode(actualNode, layerToMove?.getAttrs().id);
+		}
+		return layerToMove;
+	}
 	setupDefaultNodeEvents(node) {
 		this.previousPointer = null;
 		this.instance.addEventListener("onNodesChange", () => {
@@ -16303,14 +16337,18 @@ var WeaveNode = class {
 		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.checkIfOverContainer(e.target);
+				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.moveNodeToContainer(e.target);
+				if (layerToMove) return;
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		this.previousPointer = null;
@@ -16960,6 +16998,27 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
+	pointIntersectsContainerElement(point) {
+		const stage = this.instance.getStage();
+		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+			x: 0,
+			y: 0
+		};
+		const intersections = this.instance.getMainLayer()?.getAllIntersections(relativeMousePointer);
+		let intersectedNode = void 0;
+		if (intersections) for (const node of intersections) {
+			if (node.getAttrs().nodeId) {
+				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
+				intersectedNode = parent;
+				break;
+			}
+			if (node.getAttrs().containerId) {
+				intersectedNode = node;
+				break;
+			}
+		}
+		return intersectedNode;
+	}
 	getMousePointer(point) {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
@@ -17431,6 +17490,17 @@ var WeaveStateManager = class {
 		});
 		return found;
 	}
+	getContainerNodes(tree) {
+		const found = [];
+		if (tree.props.containerId) {
+			found.push(tree);
+			return found;
+		}
+		if (tree.props?.children && tree.props.children.length > 0) tree.props.children.some((child) => {
+			found.push(...this.getContainerNodes(child));
+		});
+		return found;
+	}
 	getNode(nodeKey) {
 		const state = this.instance.getStore().getState().weave;
 		if ((0, import_lodash.isEmpty)(state)) return {
@@ -17699,7 +17769,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.3.2";
+var version = "0.4.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -17771,6 +17841,10 @@ var WeaveStageManager = class {
 		const stage = this.getStage();
 		return stage.findOne(`#${__inditextech_weave_types.WEAVE_NODE_LAYER_ID}`);
 	}
+	getUtilityLayer() {
+		const stage = this.getStage();
+		return stage.findOne(`#${__inditextech_weave_types.WEAVE_UTILITY_LAYER_ID}`);
+	}
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		const attributes = instance.getAttrs();
 		if (instance.getParent() && instance.getParent()?.getAttrs().nodeType && ![
@@ -17794,6 +17868,11 @@ var WeaveStageManager = class {
 		stage.draw();
 		this.setStage(stage);
 	}
+	getContainerNodes() {
+		return this.instance.getMainLayer()?.find((node) => {
+			return node.getAttrs().containerId;
+		});
+	}
 };
 
 //#endregion
@@ -18153,6 +18232,9 @@ var Weave = class extends Emittery {
 	getMainLayer() {
 		return this.stageManager.getMainLayer();
 	}
+	getUtilityLayer() {
+		return this.stageManager.getUtilityLayer();
+	}
 	setStage(stage) {
 		this.stageManager.setStage(stage);
 	}
@@ -18162,6 +18244,9 @@ var Weave = class extends Emittery {
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		return this.stageManager.getInstanceRecursive(instance, filterInstanceType);
 	}
+	getContainerNodes() {
+		return this.stageManager.getContainerNodes();
+	}
 	getRegisterManager() {
 		return this.registerManager;
 	}
@@ -18282,6 +18367,9 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
+	pointIntersectsContainerElement(point) {
+		return this.targetingManager.pointIntersectsContainerElement(point);
+	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
 	}
@@ -19327,6 +19415,9 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frame = new konva.default.Group({
 			...frameParams,
 			containerId: `${id}-group-internal`,
+			containerOffsetX: 0,
+			containerOffsetY: titleHeight + strokeWidth,
+			isTarget: false,
 			width: frameWidth + strokeWidth * 2,
 			height: frameHeight + titleHeight + strokeWidth * 2,
 			fill: "#ffffffff",
@@ -19382,6 +19473,20 @@ var WeaveFrameNode = class extends WeaveNode {
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
+		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
+			background.setAttrs({
+				stroke: "#000000ff",
+				strokeWidth: 2,
+				fill: "#ffffffff"
+			});
+		});
+		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
+			background.setAttrs({
+				stroke: "#ff6863ff",
+				strokeWidth: 2,
+				fill: "#ecececff"
+			});
+		});
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {

package/dist/sdk.d.cts

@@ -274,6 +274,9 @@ declare abstract class WeaveNode implements WeaveNodeBase {
   isSelecting(): boolean;
   isPasting(): boolean;
   isNodeSelected(ele: Konva.Node): boolean;
+  clearContainerTargets(): void;
+  checkIfOverContainer(node: Konva.Node): Konva.Node | undefined;
+  moveNodeToContainer(node: Konva.Node): Konva.Node | undefined;
   setupDefaultNodeEvents(node: Konva.Node): void;
   create(key: string, props: WeaveElementAttributes): WeaveStateElement;
   abstract onRender(props: WeaveElementAttributes): WeaveElementInstance;
@@ -358,8 +361,10 @@ declare class WeaveStageManager {
   setStage(stage: Konva.Stage): void;
   getStage(): Konva.Stage;
   getMainLayer(): Konva.Layer | undefined;
+  getUtilityLayer(): Konva.Layer | undefined;
   getInstanceRecursive(instance: Konva.Node, filterInstanceType?: string[]): Konva.Node;
   initStage(): void;
+  getContainerNodes(): WeaveElementInstance[];
 }
 
 //#endregion
@@ -403,9 +408,11 @@ declare class Weave extends Emittery {
   getStageManager(): WeaveStageManager;
   getStage(): Konva.Stage;
   getMainLayer(): Konva.Layer | undefined;
+  getUtilityLayer(): Konva.Layer | undefined;
   setStage(stage: Konva.Stage): void;
   getStageConfiguration(): StageConfig;
   getInstanceRecursive(instance: Konva.Node, filterInstanceType?: string[]): Konva.Node;
+  getContainerNodes(): WeaveElementInstance[];
   getRegisterManager(): WeaveRegisterManager;
   getPlugins(): Record<string, WeavePlugin>;
   getPlugin<T>(pluginName: string): T;
@@ -446,6 +453,7 @@ declare class Weave extends Emittery {
   bringToFront(node: WeaveElementInstance): void;
   group(nodes: WeaveStateElement[]): void;
   unGroup(group: WeaveStateElement): void;
+  pointIntersectsContainerElement(point?: Vector2d): Konva.Node | undefined;
   getMousePointer(point?: Vector2d): WeaveMousePointInfo;
   getMousePointerRelativeToContainer(container: Konva.Group | Konva.Layer): WeaveMousePointInfoSimple;
   nodesToGroupSerialized(instancesToClone: Konva.Node[]): WeaveSerializedGroup;

package/dist/sdk.d.ts

@@ -274,6 +274,9 @@ declare abstract class WeaveNode implements WeaveNodeBase {
   isSelecting(): boolean;
   isPasting(): boolean;
   isNodeSelected(ele: Konva.Node): boolean;
+  clearContainerTargets(): void;
+  checkIfOverContainer(node: Konva.Node): Konva.Node | undefined;
+  moveNodeToContainer(node: Konva.Node): Konva.Node | undefined;
   setupDefaultNodeEvents(node: Konva.Node): void;
   create(key: string, props: WeaveElementAttributes): WeaveStateElement;
   abstract onRender(props: WeaveElementAttributes): WeaveElementInstance;
@@ -358,8 +361,10 @@ declare class WeaveStageManager {
   setStage(stage: Konva.Stage): void;
   getStage(): Konva.Stage;
   getMainLayer(): Konva.Layer | undefined;
+  getUtilityLayer(): Konva.Layer | undefined;
   getInstanceRecursive(instance: Konva.Node, filterInstanceType?: string[]): Konva.Node;
   initStage(): void;
+  getContainerNodes(): WeaveElementInstance[];
 }
 
 //#endregion
@@ -403,9 +408,11 @@ declare class Weave extends Emittery {
   getStageManager(): WeaveStageManager;
   getStage(): Konva.Stage;
   getMainLayer(): Konva.Layer | undefined;
+  getUtilityLayer(): Konva.Layer | undefined;
   setStage(stage: Konva.Stage): void;
   getStageConfiguration(): StageConfig;
   getInstanceRecursive(instance: Konva.Node, filterInstanceType?: string[]): Konva.Node;
+  getContainerNodes(): WeaveElementInstance[];
   getRegisterManager(): WeaveRegisterManager;
   getPlugins(): Record<string, WeavePlugin>;
   getPlugin<T>(pluginName: string): T;
@@ -446,6 +453,7 @@ declare class Weave extends Emittery {
   bringToFront(node: WeaveElementInstance): void;
   group(nodes: WeaveStateElement[]): void;
   unGroup(group: WeaveStateElement): void;
+  pointIntersectsContainerElement(point?: Vector2d): Konva.Node | undefined;
   getMousePointer(point?: Vector2d): WeaveMousePointInfo;
   getMousePointerRelativeToContainer(container: Konva.Group | Konva.Layer): WeaveMousePointInfoSimple;
   nodesToGroupSerialized(instancesToClone: Konva.Node[]): WeaveSerializedGroup;

package/dist/sdk.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 import "konva/lib/types";
-import { WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION } from "@inditextech/weave-types";
+import { WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
 import { Doc, UndoManager } from "yjs";
 import React from "react";
@@ -16286,6 +16286,40 @@ var WeaveNode = class {
 		if (selectionPlugin.getSelectedNodes().length === 1 && selectionPlugin.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
 		return selected;
 	}
+	clearContainerTargets() {
+		const getContainers = this.instance.getContainerNodes();
+		for (const container of getContainers) container.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+	}
+	checkIfOverContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		return layerToMove;
+	}
+	moveNodeToContainer(node) {
+		const nodesIntersected = this.instance.pointIntersectsContainerElement();
+		let nodeActualContainer = node.getParent();
+		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		let layerToMove = void 0;
+		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+		if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== WEAVE_NODE_LAYER_ID) layerToMove = this.instance.getMainLayer();
+		if (layerToMove) {
+			const nodePos = node.getAbsolutePosition();
+			const nodeRotation = node.getAbsoluteRotation();
+			node.moveTo(layerToMove);
+			node.setAbsolutePosition(nodePos);
+			node.rotation(nodeRotation);
+			node.x(node.x() - (layerToMove.getAttrs().containerOffsetX ?? 0));
+			node.y(node.y() - (layerToMove.getAttrs().containerOffsetY ?? 0));
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			const actualNode = nodeHandler.serialize(node);
+			this.instance.removeNode(actualNode);
+			this.instance.addNode(actualNode, layerToMove?.getAttrs().id);
+		}
+		return layerToMove;
+	}
 	setupDefaultNodeEvents(node) {
 		this.previousPointer = null;
 		this.instance.addEventListener("onNodesChange", () => {
@@ -16303,14 +16337,18 @@ var WeaveNode = class {
 		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.checkIfOverContainer(e.target);
+				if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
+				this.clearContainerTargets();
+				const layerToMove = this.moveNodeToContainer(e.target);
+				if (layerToMove) return;
 				this.instance.updateNode(this.serialize(node));
-				e.cancelBubble = true;
 			}
 		});
 		this.previousPointer = null;
@@ -16960,6 +16998,27 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
+	pointIntersectsContainerElement(point) {
+		const stage = this.instance.getStage();
+		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+			x: 0,
+			y: 0
+		};
+		const intersections = this.instance.getMainLayer()?.getAllIntersections(relativeMousePointer);
+		let intersectedNode = void 0;
+		if (intersections) for (const node of intersections) {
+			if (node.getAttrs().nodeId) {
+				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
+				intersectedNode = parent;
+				break;
+			}
+			if (node.getAttrs().containerId) {
+				intersectedNode = node;
+				break;
+			}
+		}
+		return intersectedNode;
+	}
 	getMousePointer(point) {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
@@ -17431,6 +17490,17 @@ var WeaveStateManager = class {
 		});
 		return found;
 	}
+	getContainerNodes(tree) {
+		const found = [];
+		if (tree.props.containerId) {
+			found.push(tree);
+			return found;
+		}
+		if (tree.props?.children && tree.props.children.length > 0) tree.props.children.some((child) => {
+			found.push(...this.getContainerNodes(child));
+		});
+		return found;
+	}
 	getNode(nodeKey) {
 		const state = this.instance.getStore().getState().weave;
 		if ((0, import_lodash.isEmpty)(state)) return {
@@ -17699,7 +17769,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.3.2";
+var version = "0.4.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -17771,6 +17841,10 @@ var WeaveStageManager = class {
 		const stage = this.getStage();
 		return stage.findOne(`#${WEAVE_NODE_LAYER_ID}`);
 	}
+	getUtilityLayer() {
+		const stage = this.getStage();
+		return stage.findOne(`#${WEAVE_UTILITY_LAYER_ID}`);
+	}
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		const attributes = instance.getAttrs();
 		if (instance.getParent() && instance.getParent()?.getAttrs().nodeType && ![
@@ -17794,6 +17868,11 @@ var WeaveStageManager = class {
 		stage.draw();
 		this.setStage(stage);
 	}
+	getContainerNodes() {
+		return this.instance.getMainLayer()?.find((node) => {
+			return node.getAttrs().containerId;
+		});
+	}
 };
 
 //#endregion
@@ -18153,6 +18232,9 @@ var Weave = class extends Emittery {
 	getMainLayer() {
 		return this.stageManager.getMainLayer();
 	}
+	getUtilityLayer() {
+		return this.stageManager.getUtilityLayer();
+	}
 	setStage(stage) {
 		this.stageManager.setStage(stage);
 	}
@@ -18162,6 +18244,9 @@ var Weave = class extends Emittery {
 	getInstanceRecursive(instance, filterInstanceType = []) {
 		return this.stageManager.getInstanceRecursive(instance, filterInstanceType);
 	}
+	getContainerNodes() {
+		return this.stageManager.getContainerNodes();
+	}
 	getRegisterManager() {
 		return this.registerManager;
 	}
@@ -18282,6 +18367,9 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
+	pointIntersectsContainerElement(point) {
+		return this.targetingManager.pointIntersectsContainerElement(point);
+	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
 	}
@@ -19327,6 +19415,9 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frame = new Konva.Group({
 			...frameParams,
 			containerId: `${id}-group-internal`,
+			containerOffsetX: 0,
+			containerOffsetY: titleHeight + strokeWidth,
+			isTarget: false,
 			width: frameWidth + strokeWidth * 2,
 			height: frameHeight + titleHeight + strokeWidth * 2,
 			fill: "#ffffffff",
@@ -19382,6 +19473,20 @@ var WeaveFrameNode = class extends WeaveNode {
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
+		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
+			background.setAttrs({
+				stroke: "#000000ff",
+				strokeWidth: 2,
+				fill: "#ffffffff"
+			});
+		});
+		frame.on(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, () => {
+			background.setAttrs({
+				stroke: "#ff6863ff",
+				strokeWidth: 2,
+				fill: "#ecececff"
+			});
+		});
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-sdk",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -26,7 +26,7 @@
     "bump:snapshot": "npm version $npm_package_version.$(date \"+%s\")",
     "bundle:analyze": "vite-bundle-visualizer",
     "check": "echo \"Monorepo test script\" && exit 0",
-    "dev": "vite build --watch",
+    "dev": "tsdown --watch",
     "dev:test": "vitest --passWithNoTests --coverage",
     "dist:tag": "npm dist-tag add \"$(jq -r .name package.json)@$(jq -r .version package.json)\" \"$PR_TAG\" --registry=\"$NPM_PUBLISHING_REGISTRY\" --verbose",
     "format": "npm run lint -- --quiet --fix --fix-type layout",
@@ -43,7 +43,7 @@
     "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
   },
   "dependencies": {
-    "@inditextech/weave-types": "0.3.2",
+    "@inditextech/weave-types": "0.4.0",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",