Allow elements to set properties previous to create the element

code/components/actions/align-elements-tool/align-elements-tool.ts

@@ -1,8 +1,13 @@
-import { WeaveAction, WeaveElementInstance, WeaveSelection } from "@inditextech/weavejs-sdk";
+import {
+  WeaveAction,
+  WeaveElementInstance,
+  WeaveSelection,
+} from "@inditextech/weavejs-sdk";
 import Konva from "konva";
 
 export class AlignElementsToolAction extends WeaveAction {
   protected cancelAction!: () => void;
+  internalUpdate = undefined;
   init = undefined;
 
   getName(): string {
@@ -42,7 +47,9 @@ export class AlignElementsToolAction extends WeaveAction {
       }
 
       if (prevInstance) {
-        const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
+        const handler = this.instance.getNodeHandler(
+          instance.getAttrs().nodeType
+        );
         const node = handler.toNode(instance as WeaveElementInstance);
 
         const newNode = {
@@ -68,7 +75,10 @@ export class AlignElementsToolAction extends WeaveAction {
     this.cancelAction?.();
   }
 
-  trigger(cancelAction: () => void, { gap = 20, nodes }: { gap: number; nodes: WeaveSelection[] }) {
+  trigger(
+    cancelAction: () => void,
+    { gap = 20, nodes }: { gap: number; nodes: WeaveSelection[] }
+  ) {
     if (!this.instance) {
       throw new Error("Instance not defined");
     }

code/components/actions/workspace-tool/constants.ts → code/components/actions/frame-tool/constants.ts

@@ -1,4 +1,4 @@
-export const WORKSPACE_TOOL_STATE = {
+export const FRAME_TOOL_STATE = {
   ["IDLE"]: "idle",
   ["ADDING"]: "adding",
   ["ADDED"]: "added",

code/components/actions/workspace-tool/workspace-tool.ts → code/components/actions/frame-tool/frame-tool.ts

@@ -1,35 +1,44 @@
 import { v4 as uuidv4 } from "uuid";
 import { Vector2d } from "konva/lib/types";
-import { WeaveWorkspaceToolActionState } from "./types";
-import { WORKSPACE_TOOL_STATE } from "./constants";
+import { FrameToolActionState, FrameToolCallbacks } from "./types";
+import { FRAME_TOOL_STATE } from "./constants";
 import {
   WEAVE_NODE_LAYER_ID,
   WeaveAction,
   WeaveNodesSelectionPlugin,
 } from "@inditextech/weavejs-sdk";
 import Konva from "konva";
 
-export class WorkspaceToolAction extends WeaveAction {
+export class FrameToolAction extends WeaveAction {
   protected initialized: boolean = false;
-  protected state: WeaveWorkspaceToolActionState;
-  protected workspaceId: string | null;
+  protected state: FrameToolActionState;
+  protected frameId: string | null;
   protected container: Konva.Layer | Konva.Group | undefined;
   protected clickPoint: Vector2d | null;
   protected cancelAction!: () => void;
+  internalUpdate = undefined;
   init = undefined;
 
-  constructor() {
-    super();
+  constructor(callbacks: FrameToolCallbacks) {
+    super(callbacks);
 
     this.initialized = false;
-    this.state = WORKSPACE_TOOL_STATE.IDLE;
-    this.workspaceId = null;
+    this.state = FRAME_TOOL_STATE.IDLE;
+    this.frameId = null;
     this.container = undefined;
     this.clickPoint = null;
   }
 
   getName(): string {
-    return "workspaceTool";
+    return "frameTool";
+  }
+
+  initProps() {
+    return {
+      title: "Frame XXX",
+      editing: false,
+      opacity: 1,
+    };
   }
 
   private setupEvents() {
@@ -45,11 +54,11 @@ export class WorkspaceToolAction extends WeaveAction {
     stage.on("click tap", (e) => {
       e.evt.preventDefault();
 
-      if (this.state === WORKSPACE_TOOL_STATE.IDLE) {
+      if (this.state === FRAME_TOOL_STATE.IDLE) {
         return;
       }
 
-      if (this.state === WORKSPACE_TOOL_STATE.ADDING) {
+      if (this.state === FRAME_TOOL_STATE.ADDING) {
         this.handleAdding();
         return;
       }
@@ -58,26 +67,19 @@ export class WorkspaceToolAction extends WeaveAction {
     this.initialized = true;
   }
 
-  private setState(state: WeaveWorkspaceToolActionState) {
+  private setState(state: FrameToolActionState) {
     this.state = state;
   }
 
-  private addWorkspace() {
+  private addFrame() {
     const stage = this.instance.getStage();
 
-    const selectionPlugin =
-      this.instance.getPlugin<WeaveNodesSelectionPlugin>("nodesSelection");
-    if (selectionPlugin) {
-      const tr = selectionPlugin.getTransformer();
-      tr.hide();
-    }
-
     stage.container().style.cursor = "crosshair";
     stage.container().focus();
 
-    this.workspaceId = null;
+    this.frameId = null;
     this.clickPoint = null;
-    this.setState(WORKSPACE_TOOL_STATE.ADDING);
+    this.setState(FRAME_TOOL_STATE.ADDING);
   }
 
   private handleAdding() {
@@ -91,17 +93,14 @@ export class WorkspaceToolAction extends WeaveAction {
     this.clickPoint = mousePoint;
     this.container = container;
 
-    this.workspaceId = uuidv4();
+    this.frameId = uuidv4();
 
-    const nodeHandler = this.instance.getNodeHandler("workspace");
+    const nodeHandler = this.instance.getNodeHandler("frame");
 
-    const node = nodeHandler.createNode(this.workspaceId, {
-      title: "Workspace 1",
-      editing: false,
+    const node = nodeHandler.createNode(this.frameId, {
+      ...this.props,
       x: this.clickPoint.x,
       y: this.clickPoint.y,
-      opacity: 1,
-      draggable: true,
     });
 
     this.instance.addNode(node, this.container?.getAttrs().id);
@@ -124,7 +123,8 @@ export class WorkspaceToolAction extends WeaveAction {
 
     this.cancelAction = cancelAction;
 
-    this.addWorkspace();
+    this.props = this.initProps();
+    this.addFrame();
   }
 
   cleanup() {
@@ -135,16 +135,16 @@ export class WorkspaceToolAction extends WeaveAction {
     const selectionPlugin =
       this.instance.getPlugin<WeaveNodesSelectionPlugin>("nodesSelection");
     if (selectionPlugin) {
-      const node = stage.findOne(`#${this.workspaceId}`);
+      const node = stage.findOne(`#${this.frameId}`);
       if (node) {
         selectionPlugin.setSelectedNodes([node]);
       }
       this.instance.triggerAction("selectionTool");
     }
 
-    this.workspaceId = null;
+    this.frameId = null;
     this.container = undefined;
     this.clickPoint = null;
-    this.setState(WORKSPACE_TOOL_STATE.IDLE);
+    this.setState(FRAME_TOOL_STATE.IDLE);
   }
 }

code/components/actions/frame-tool/types.ts

@@ -0,0 +1,8 @@
+import { WeaveActionCallbacks } from "@inditextech/weavejs-sdk";
+import { FRAME_TOOL_STATE } from "./constants";
+
+export type FrameToolActionStateKeys = keyof typeof FRAME_TOOL_STATE;
+export type FrameToolActionState =
+  (typeof FRAME_TOOL_STATE)[FrameToolActionStateKeys];
+
+export type FrameToolCallbacks = WeaveActionCallbacks;

code/components/actions/pantone-tool/pantone-tool.ts

@@ -1,6 +1,10 @@
 import { v4 as uuidv4 } from "uuid";
 import { Vector2d } from "konva/lib/types";
-import { WeavePantoneToolActionState } from "./types";
+import {
+  PantoneToolCallbacks,
+  PantoneToolActionState,
+  PantoneToolActionTriggerParams,
+} from "./types";
 import { PANTONE_TOOL_STATE } from "./constants";
 import {
   WeaveAction,
@@ -10,15 +14,15 @@ import Konva from "konva";
 
 export class PantoneToolAction extends WeaveAction {
   protected initialized: boolean = false;
-  protected state: WeavePantoneToolActionState;
+  protected state: PantoneToolActionState;
   protected pantoneId: string | null;
   protected container: Konva.Layer | Konva.Group | undefined;
   protected clickPoint: Vector2d | null;
   protected cancelAction!: () => void;
-  init = undefined;
+  internalUpdate = undefined;
 
-  constructor() {
-    super();
+  constructor(callbacks: PantoneToolCallbacks) {
+    super(callbacks);
 
     this.initialized = false;
     this.state = PANTONE_TOOL_STATE.IDLE;
@@ -31,6 +35,25 @@ export class PantoneToolAction extends WeaveAction {
     return "pantoneTool";
   }
 
+  initProps() {
+    return {
+      pantone: "#000000",
+      width: 300,
+      height: 300,
+      opacity: 1,
+    };
+  }
+
+  init() {
+    this.instance.addEventListener("onStageDrop", () => {
+      if (window.pantoneDragColor) {
+        this.instance.triggerAction("pantoneTool", {
+          color: window.pantoneDragColor,
+        });
+      }
+    });
+  }
+
   private setupEvents() {
     const stage = this.instance.getStage();
 
@@ -57,7 +80,7 @@ export class PantoneToolAction extends WeaveAction {
     this.initialized = true;
   }
 
-  private setState(state: WeavePantoneToolActionState) {
+  private setState(state: PantoneToolActionState) {
     this.state = state;
   }
 
@@ -83,19 +106,17 @@ export class PantoneToolAction extends WeaveAction {
     const nodeHandler = this.instance.getNodeHandler("pantone");
 
     const node = nodeHandler.createNode(this.pantoneId, {
+      ...this.props,
       x: this.clickPoint.x,
       y: this.clickPoint.y,
-      width: 300,
-      height: 300,
-      opacity: 1,
     });
 
     this.instance.addNode(node, this.container?.getAttrs().id);
 
     this.cancelAction?.();
   }
 
-  trigger(cancelAction: () => void) {
+  trigger(cancelAction: () => void, params?: PantoneToolActionTriggerParams) {
     if (!this.instance) {
       throw new Error("Instance not defined");
     }
@@ -110,6 +131,12 @@ export class PantoneToolAction extends WeaveAction {
 
     this.cancelAction = cancelAction;
 
+    this.props = this.initProps();
+
+    if (params?.color) {
+      this.props.pantone = params.color;
+    }
+
     this.addPantone();
   }
 

code/components/actions/pantone-tool/types.ts

@@ -1,4 +1,12 @@
+import { WeaveActionCallbacks } from "@inditextech/weavejs-sdk";
 import { PANTONE_TOOL_STATE } from "./constants";
 
-export type WeavePantoneToolActionStateKeys = keyof typeof PANTONE_TOOL_STATE;
-export type WeavePantoneToolActionState = (typeof PANTONE_TOOL_STATE)[WeavePantoneToolActionStateKeys];
+export type PantoneToolActionStateKeys = keyof typeof PANTONE_TOOL_STATE;
+export type PantoneToolActionState =
+  (typeof PANTONE_TOOL_STATE)[PantoneToolActionStateKeys];
+
+export type PantoneToolCallbacks = WeaveActionCallbacks;
+
+export type PantoneToolActionTriggerParams = {
+  color?: string;
+};