@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/flow/Plumber.ts

@@ -3,24 +3,52 @@ import {
   FlowchartConnector,
   newInstance,
   ready,
-  RectangleEndpoint
+  RectangleEndpoint,
+  EVENT_CONNECTION_DRAG,
+  EVENT_CONNECTION_ABORT,
+  INTERCEPT_BEFORE_DROP,
+  EVENT_CONNECTION,
+  EVENT_REVERT,
+  INTERCEPT_BEFORE_DETACH,
+  EVENT_CONNECTION_DETACHED
 } from '@jsplumb/browser-ui';
 
+const CONNECTOR_DEFAULTS = {
+  type: FlowchartConnector.type,
+  options: {
+    stub: [20, 10],
+    midpoint: 0.5,
+    alwaysRespectStubs: true,
+    cornerRadius: 5,
+    cssClass: 'plumb-connector'
+  }
+};
+
+const OVERLAYS_DEFAULTS = [
+  {
+    type: 'PlainArrow',
+    options: {
+      width: 13,
+      length: 13,
+      location: 0.999,
+      cssClass: 'plumb-arrow'
+    }
+  }
+];
+
 export const SOURCE_DEFAULTS = {
   endpoint: {
     type: DotEndpoint.type,
     options: {
-      radius: 6,
-      connectedClass: 'plumb-connected',
+      radius: 12,
       cssClass: 'plumb-source',
       hoverClass: 'plumb-source-hover'
     }
   },
   anchors: ['Bottom', 'Continuous'],
   maxConnections: 1,
-  dragAllowedWhenFull: false,
-  deleteEndpointsOnEmpty: true,
-  isSource: true
+  source: true,
+  dragAllowedWhenFull: false
 };
 
 export const TARGET_DEFAULTS = {
@@ -40,23 +68,85 @@ export const TARGET_DEFAULTS = {
       cssClass: 'continuos plumb-target-anchor'
     }
   },
-  dragAllowedWhenFull: false,
-  deleteEndpointsOnEmpty: true,
-  isTarget: true
+  deleteOnEmpty: true,
+  maxConnections: 1,
+  target: true
 };
 
 export class Plumber {
   private jsPlumb = null;
   private pendingConnections = [];
+  private connectionListeners = new Map();
+  public connectionDragging = false;
+  private connectionWait = null;
 
   constructor(canvas: HTMLElement) {
     ready(() => {
       this.jsPlumb = newInstance({
-        container: canvas
+        container: canvas,
+        connectionsDetachable: true,
+        endpointStyle: {
+          fill: 'green'
+        },
+        connector: CONNECTOR_DEFAULTS,
+        connectionOverlays: OVERLAYS_DEFAULTS
+      });
+
+      // Bind to connection events
+      this.jsPlumb.bind(EVENT_CONNECTION, (info) => {
+        this.connectionDragging = false;
+        this.notifyListeners(EVENT_CONNECTION, info);
+      });
+
+      // Bind to connection drag events
+      this.jsPlumb.bind(EVENT_CONNECTION_DRAG, (info) => {
+        this.connectionDragging = true;
+        this.notifyListeners(EVENT_CONNECTION_DRAG, info);
+      });
+
+      this.jsPlumb.bind(EVENT_CONNECTION_ABORT, (info) => {
+        this.connectionDragging = false;
+        this.notifyListeners(EVENT_CONNECTION_ABORT, info);
       });
+
+      this.jsPlumb.bind(EVENT_CONNECTION_DETACHED, (info) => {
+        this.connectionDragging = false;
+        this.notifyListeners(EVENT_CONNECTION_DETACHED, info);
+      });
+
+      this.jsPlumb.bind(EVENT_REVERT, (info) => {
+        this.notifyListeners(EVENT_REVERT, info);
+      });
+
+      this.jsPlumb.bind(INTERCEPT_BEFORE_DROP, () => {
+        // we always deny automatic connections
+        return false;
+      });
+      this.jsPlumb.bind(INTERCEPT_BEFORE_DETACH, () => {});
     });
   }
 
+  private notifyListeners(eventName: string, info: any) {
+    const listeners = this.connectionListeners.get(eventName) || [];
+    listeners.forEach((listener) => listener(info));
+  }
+
+  public on(eventName: string, callback: (info: any) => void) {
+    if (!this.connectionListeners.has(eventName)) {
+      this.connectionListeners.set(eventName, []);
+    }
+    this.connectionListeners.get(eventName).push(callback);
+  }
+
+  public off(eventName: string, callback: (info: any) => void) {
+    if (!this.connectionListeners.has(eventName)) return;
+    const listeners = this.connectionListeners.get(eventName);
+    const index = listeners.indexOf(callback);
+    if (index !== -1) {
+      listeners.splice(index, 1);
+    }
+  }
+
   public makeTarget(uuid: string) {
     const element = document.getElementById(uuid);
     this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
@@ -67,8 +157,6 @@ export class Plumber {
     this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);
   }
 
-  private connectionWait = null;
-
   // we'll process our pending connections, but we want to debounce this
   public processPendingConnections() {
     // if we have a pending connection wait, clear it
@@ -81,10 +169,13 @@ export class Plumber {
     this.connectionWait = setTimeout(() => {
       this.jsPlumb.batch(() => {
         this.pendingConnections.forEach((connection) => {
-          const { fromId, toId } = connection;
+          const { scope, fromId, toId } = connection;
           const fromElement = document.getElementById(fromId);
           const toElement = document.getElementById(toId);
 
+          // delete any existing endpoints
+          this.jsPlumb.selectEndpoints({ source: fromId }).deleteAll();
+
           const source = this.jsPlumb.addEndpoint(fromElement, {
             ...SOURCE_DEFAULTS,
             endpoint: {
@@ -95,32 +186,18 @@ export class Plumber {
               }
             }
           });
+
           const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);
           this.jsPlumb.connect({
             source,
             target,
             connector: {
-              type: FlowchartConnector.type,
-              options: {
-                stub: 12,
-                midpoint: 0.75,
-                alwaysRespectStubs: false,
-                gap: [0, 5],
-                cornerRadius: 3,
-                cssClass: 'plumb-connector'
-              }
+              ...CONNECTOR_DEFAULTS,
+              options: { ...CONNECTOR_DEFAULTS.options, gap: [0, 5] }
             },
-            overlays: [
-              {
-                type: 'PlainArrow',
-                options: {
-                  width: 13,
-                  length: 13,
-                  location: 0.999,
-                  cssClass: 'plumb-arrow'
-                }
-              }
-            ]
+            data: {
+              nodeId: scope
+            }
           });
         });
         this.pendingConnections = [];
@@ -128,8 +205,8 @@ export class Plumber {
     }, 50);
   }
 
-  public connectIds(fromId: string, toId: string) {
-    this.pendingConnections.push({ fromId, toId });
+  public connectIds(scope: string, fromId: string, toId: string) {
+    this.pendingConnections.push({ scope, fromId, toId });
     this.processPendingConnections();
   }
 
@@ -138,63 +215,93 @@ export class Plumber {
       this.jsPlumb.repaintEverything();
     }
   }
-  public elevateNodeConnections(nodeId: string) {
+
+  public revalidate(ids: string[]) {
     if (!this.jsPlumb) return;
+    this.jsPlumb.batch(() => {
+      ids.forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) {
+          this.jsPlumb.revalidate(element);
+        }
+      });
+    });
+  }
 
-    // Get all connections
-    const connections = this.jsPlumb.getConnections();
+  public removeNodeConnections(nodeId: string) {
+    if (!this.jsPlumb) return;
 
-    // Get the node element to find its exit elements
-    const nodeElement = document.getElementById(nodeId);
-    const exitElements = nodeElement
-      ? nodeElement.querySelectorAll('.exit')
-      : [];
-    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+    const inbound = this.jsPlumb.select({ target: nodeId });
 
-    connections.forEach((connection) => {
-      const sourceId = connection.source.id;
-      const targetId = connection.target.id;
-
-      // Check if this connection involves the dragged node:
-      // - Incoming: target is the node itself
-      // - Outgoing: source is one of the node's exits
-      if (targetId === nodeId || exitIds.includes(sourceId)) {
-        // Add elevated class to the connector element
-        const connectorElement = connection.connector.canvas;
-        if (connectorElement) {
-          connectorElement.classList.add('elevated');
-        }
-      }
+    // keep track of our source ids that are connected, we'll need new endpoints
+    const sourceIds = inbound.map((connection) => connection.sourceId);
+
+    const exitIds =
+      Array.from(
+        document.getElementById(nodeId)?.querySelectorAll('.exit') || []
+      ).map((exit) => {
+        return exit.id;
+      }) || [];
+
+    inbound.deleteAll();
+    this.jsPlumb.select({ source: exitIds }).deleteAll();
+    this.jsPlumb.selectEndpoints({ source: exitIds }).deleteAll();
+
+    // Recreate source endpoints for each source
+    sourceIds.forEach((exitId) => {
+      this.makeSource(exitId);
     });
   }
 
-  public restoreNodeConnections(nodeId: string) {
+  public removeExitConnection(exitId: string) {
     if (!this.jsPlumb) return;
 
-    // Get all connections
-    const connections = this.jsPlumb.getConnections();
+    const exitElement = document.getElementById(exitId);
+    if (!exitElement) return;
 
-    // Get the node element to find its exit elements
-    const nodeElement = document.getElementById(nodeId);
-    const exitElements = nodeElement
-      ? nodeElement.querySelectorAll('.exit')
-      : [];
-    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+    // Get all connections from this exit
+    const connections = this.jsPlumb.getConnections({ source: exitElement });
 
+    // Remove the connections
     connections.forEach((connection) => {
-      const sourceId = connection.source.id;
-      const targetId = connection.target.id;
-
-      // Check if this connection involves the node:
-      // - Incoming: target is the node itself
-      // - Outgoing: source is one of the node's exits
-      if (targetId === nodeId || exitIds.includes(sourceId)) {
-        // Remove elevated class from the connector element
-        const connectorElement = connection.connector.canvas;
-        if (connectorElement) {
-          connectorElement.classList.remove('elevated');
-        }
+      this.jsPlumb.deleteConnection(connection);
+    });
+
+    // Re-create the source endpoint (now without connection)
+    this.jsPlumb.removeAllEndpoints(exitElement);
+    this.makeSource(exitId);
+
+    return connections.length > 0;
+  }
+
+  /**
+   * Set the removing state for an exit's connection
+   * @param exitId The ID of the exit whose connections should be marked as removing
+   * @returns true if connections were found and updated, false otherwise
+   */
+  public setConnectionRemovingState(
+    exitId: string,
+    isRemoving: boolean
+  ): boolean {
+    if (!this.jsPlumb) return false;
+
+    const exitElement = document.getElementById(exitId);
+    if (!exitElement) return false;
+
+    // Get all connections from this exit
+    const connections = this.jsPlumb.getConnections({ source: exitElement });
+
+    if (connections.length === 0) return false;
+
+    // Update the connections' CSS classes
+    connections.forEach((connection) => {
+      if (isRemoving) {
+        connection.addClass('removing');
+      } else {
+        connection.removeClass('removing');
       }
     });
+
+    return true;
   }
 }

package/src/flow/StickyNote.ts

@@ -14,6 +14,12 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private dragging = false;
 
+  @property({ type: Boolean })
+  public selected = false;
+
+  @property({ type: Boolean })
+  private colorPickerExpanded = false;
+
   static get styles() {
     return css`
       :host {
@@ -35,10 +41,11 @@ export class StickyNote extends RapidElement {
         overflow: hidden;
         transition: transform 0.1s ease, box-shadow 0.2s ease;
         color: var(--sticky-text-color);
+        opacity: 0.85;
       }
 
       .sticky-note.dragging {
-        opacity: 0.5;
+        opacity: 0.7;
         z-index: 1000;
         transform: rotate(0deg);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
@@ -147,20 +154,16 @@ export class StickyNote extends RapidElement {
       .sticky-title-container > .drag-handle {
         --icon-color: var(--sticky-border-color);
         cursor: move;
-        max-width: 0px;
+        max-width: 20px;
+        padding-left: 8px;
         overflow: hidden;
         transition: all 0.2s ease;
-        padding-left: 0;
       }
 
       .sticky-note:hover .drag-handle {
-        max-width: 20px;
-        padding-left: 8px;
       }
 
       .sticky-note:focus-within .sticky-title-container > .drag-handle {
-        max-width: 0px;
-        padding-left: 0px;
       }
 
       /* Focus/active states */
@@ -171,6 +174,83 @@ export class StickyNote extends RapidElement {
 
       .sticky-note:focus-within .drag-handle {
         max-width: 0px;
+        padding-left: 0px;
+      }
+
+      /* Color picker */
+      .color-picker {
+        position: absolute;
+        bottom: 4px;
+        right: 4px;
+        width: 8px;
+        height: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+
+        border-radius: 3px;
+        background-color: var(--sticky-color);
+        cursor: pointer;
+        transition: transform 0.2s ease;
+      }
+
+      .color-picker:hover {
+        transform: scale(1.1);
+      }
+
+      .color-options {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        gap: 4px;
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        padding: 3px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        transform-origin: bottom right;
+        transform: scale(0);
+        opacity: 0;
+        transition: transform 0.2s ease, opacity 0.2s ease;
+        z-index: 1000;
+      }
+
+      .color-options.expanded {
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      .color-option {
+        width: 12px;
+        height: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+        cursor: pointer;
+        transition: transform 0.15s ease, border-color 0.15s ease;
+      }
+
+      .color-option:hover {
+        transform: scale(1.1);
+        border-color: rgba(0, 0, 0, 0.4);
+      }
+
+      .color-option.yellow {
+        background-color: #fef08a;
+      }
+
+      .color-option.blue {
+        background-color: #bfdbfe;
+      }
+
+      .color-option.pink {
+        background-color: #fce7f3;
+      }
+
+      .color-option.green {
+        background-color: #d1fae5;
+      }
+
+      .color-option.gray {
+        background-color: #f3f4f6;
       }
     `;
   }
@@ -231,6 +311,16 @@ export class StickyNote extends RapidElement {
     this.requestUpdate();
   }
 
+  private handleContentMouseDown(event: MouseEvent): void {
+    // If this sticky note is selected, don't stop propagation
+    // so that group dragging can work
+    if (this.selected) {
+      return;
+    }
+    // Otherwise, stop propagation to enable editing
+    event.stopPropagation();
+  }
+
   private handleKeyDown(event: KeyboardEvent): void {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
@@ -241,6 +331,33 @@ export class StickyNote extends RapidElement {
     }
   }
 
+  private handleColorPickerMouseEnter(): void {
+    this.colorPickerExpanded = true;
+  }
+
+  private handleColorPickerMouseLeave(): void {
+    this.colorPickerExpanded = false;
+  }
+
+  private handleColorOptionClick(
+    event: MouseEvent,
+    color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
+  ): void {
+    event.stopPropagation();
+
+    if (this.data && color !== this.data.color) {
+      getStore()
+        .getState()
+        .updateStickyNote(this.uuid, {
+          ...this.data,
+          color: color
+        });
+    }
+
+    this.colorPickerExpanded = false;
+    this.requestUpdate();
+  }
+
   public render(): TemplateResult {
     if (!this.data) {
       return html`<div class="sticky-note" style="display: none;"></div>`;
@@ -263,7 +380,7 @@ export class StickyNote extends RapidElement {
             contenteditable="true"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleKeyDown}"
-            @mousedown="${(e: MouseEvent) => e.stopPropagation()}"
+            @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.title}"
           ></div>
         </div>
@@ -273,10 +390,49 @@ export class StickyNote extends RapidElement {
             contenteditable="true"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleKeyDown}"
-            @mousedown="${(e: MouseEvent) => e.stopPropagation()}"
+            @mousedown="${this.handleContentMouseDown}"
             .textContent="${this.data.body}"
           ></div>
           <div class="edit-icon" title="Edit note"></div>
+
+          <!-- Color picker -->
+          <div
+            class="color-picker"
+            @mouseenter="${this.handleColorPickerMouseEnter}"
+            @mouseleave="${this.handleColorPickerMouseLeave}"
+          >
+            <div
+              class="color-options ${this.colorPickerExpanded
+                ? 'expanded'
+                : ''}"
+            >
+              <div
+                class="color-option yellow"
+                @click="${(e: MouseEvent) =>
+                  this.handleColorOptionClick(e, 'yellow')}"
+              ></div>
+              <div
+                class="color-option blue"
+                @click="${(e: MouseEvent) =>
+                  this.handleColorOptionClick(e, 'blue')}"
+              ></div>
+              <div
+                class="color-option pink"
+                @click="${(e: MouseEvent) =>
+                  this.handleColorOptionClick(e, 'pink')}"
+              ></div>
+              <div
+                class="color-option green"
+                @click="${(e: MouseEvent) =>
+                  this.handleColorOptionClick(e, 'green')}"
+              ></div>
+              <div
+                class="color-option gray"
+                @click="${(e: MouseEvent) =>
+                  this.handleColorOptionClick(e, 'gray')}"
+              ></div>
+            </div>
+          </div>
         </div>
       </div>
     `;