@nyaruka/temba-components 0.142.2 → 0.142.3

package/out-tsc/src/flow/CanvasMenu.js

@@ -69,15 +69,19 @@ export class CanvasMenu extends RapidElement {
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        // Close menu when clicking outside — use mousedown instead of click
-        // to avoid being triggered by the click synthesized from a drag-and-drop
-        // (mousedown on exit + mouseup on canvas = click on common ancestor)
+        // Close menu when clicking/tapping outside — use mousedown instead of
+        // click to avoid being triggered by the click synthesized from a
+        // drag-and-drop (mousedown on exit + mouseup on canvas = click on
+        // common ancestor). Also listen for touchstart for touch devices.
         const handleClickOutside = (e) => {
             if (this.open && !this.contains(e.target)) {
                 this.close();
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('touchstart', handleClickOutside, {
+            passive: true
+        });
         // Store cleanup function
         this._clickOutsideHandler = handleClickOutside;
     }
@@ -85,6 +89,7 @@ export class CanvasMenu extends RapidElement {
         super.disconnectedCallback();
         if (this._clickOutsideHandler) {
             document.removeEventListener('mousedown', this._clickOutsideHandler);
+            document.removeEventListener('touchstart', this._clickOutsideHandler);
         }
     }
     show(x, y, clickPosition, showStickyNote = true, showReflow = false, showWaitForResponse = true) {

package/out-tsc/src/flow/CanvasMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasMenu.js","sourceRoot":"","sources":["../../../src/flow/CanvasMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\n\n/**\n * Event detail for canvas menu selection\n */\nexport interface CanvasMenuSelection {\n  action:\n    | 'sticky'\n    | 'action'\n    | 'split'\n    | 'send_msg'\n    | 'wait_for_response'\n    | 'reflow';\n  position: { x: number; y: number };\n}\n\n/**\n * CanvasMenu - A popup menu for adding items to the flow canvas\n * Displayed when double-clicking on empty canvas space\n */\nexport class CanvasMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        z-index: 10000;\n        display: block;\n        pointer-events: none;\n      }\n\n      .menu {\n        position: fixed;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: var(--dropdown-shadow);\n        padding: 0.5em 0;\n        width: 265px;\n        pointer-events: auto;\n      }\n\n      .menu-item {\n        padding: 0.75em 1.5em;\n        cursor: pointer;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.75em;\n        transition: background-color 0.15s ease;\n      }\n\n      .menu-item:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      .menu-item temba-icon {\n        --icon-color: var(--color-text);\n      }\n\n      .menu-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n      }\n\n      .divider {\n        height: 1px;\n        background: rgba(0, 0, 0, 0.1);\n        margin: 0.5em 0;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  public x = 0;\n\n  @property({ type: Number })\n  public y = 0;\n\n  @property({ type: Boolean })\n  public open = false;\n\n  @property({ type: Boolean })\n  public showStickyNote = true;\n\n  @property({ type: Boolean })\n  public showWaitForResponse = true;\n\n  @property({ type: Boolean })\n  public showReflow = false;\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    // Close menu when clicking outside — use mousedown instead of click\n    // to avoid being triggered by the click synthesized from a drag-and-drop\n    // (mousedown on exit + mouseup on canvas = click on common ancestor)\n    const handleClickOutside = (e: MouseEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n\n    // Store cleanup function\n    (this as any)._clickOutsideHandler = handleClickOutside;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if ((this as any)._clickOutsideHandler) {\n      document.removeEventListener(\n        'mousedown',\n        (this as any)._clickOutsideHandler\n      );\n    }\n  }\n\n  public show(\n    x: number,\n    y: number,\n    clickPosition: { x: number; y: number },\n    showStickyNote: boolean = true,\n    showReflow: boolean = false,\n    showWaitForResponse: boolean = true\n  ) {\n    this.x = x;\n    this.y = y;\n    this.clickPosition = clickPosition;\n    this.showStickyNote = showStickyNote;\n    this.showReflow = showReflow;\n    this.showWaitForResponse = showWaitForResponse;\n    this.open = true;\n\n    // Adjust position after menu renders to ensure it fits on screen\n    requestAnimationFrame(() => {\n      this.adjustPosition();\n    });\n  }\n\n  private adjustPosition(): void {\n    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;\n    if (!menuElement) return;\n\n    const menuRect = menuElement.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // margin from viewport edges\n\n    let adjustedX = this.x;\n    let adjustedY = this.y;\n\n    // Check if menu goes off the right edge\n    if (this.x + menuRect.width + margin > viewportWidth) {\n      adjustedX = viewportWidth - menuRect.width - margin;\n    }\n\n    // Check if menu goes off the bottom edge\n    if (this.y + menuRect.height + margin > viewportHeight) {\n      adjustedY = viewportHeight - menuRect.height - margin;\n    }\n\n    // Update position if needed\n    if (adjustedX !== this.x || adjustedY !== this.y) {\n      this.x = adjustedX;\n      this.y = adjustedY;\n    }\n  }\n\n  public close(fireCanceledEvent: boolean = true) {\n    if (this.open) {\n      this.open = false;\n      // Fire close event so parent can clean up, but only if not from a selection\n      if (fireCanceledEvent) {\n        this.fireCustomEvent(CustomEventType.Canceled, {});\n      }\n    }\n  }\n\n  private handleMenuItemClick(action: CanvasMenuSelection['action']) {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      action,\n      position: this.clickPosition\n    } as CanvasMenuSelection);\n    // Close without firing canceled event since we made a selection\n    this.close(false);\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    return html`\n      <div class=\"menu\" style=\"left: ${this.x}px; top: ${this.y}px;\">\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('send_msg')}\n        >\n          <temba-icon name=\"send\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Send Message</div>\n        </div>\n\n        ${this.showWaitForResponse\n          ? html`\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('wait_for_response')}\n              >\n                <temba-icon name=\"message\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Wait for Response</div>\n              </div>\n            `\n          : ''}\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('action')}\n        >\n          <temba-icon name=\"action\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Add Action</div>\n        </div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('split')}\n        >\n          <temba-icon name=\"split\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Add Split</div>\n        </div>\n\n        ${this.showStickyNote\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('sticky')}\n              >\n                <temba-icon name=\"note\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Add Sticky Note</div>\n              </div>\n            `\n          : ''}\n        ${this.showReflow\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('reflow')}\n              >\n                <temba-icon name=\"flow\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Reflow</div>\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"CanvasMenu.js","sourceRoot":"","sources":["../../../src/flow/CanvasMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\n\n/**\n * Event detail for canvas menu selection\n */\nexport interface CanvasMenuSelection {\n  action:\n    | 'sticky'\n    | 'action'\n    | 'split'\n    | 'send_msg'\n    | 'wait_for_response'\n    | 'reflow';\n  position: { x: number; y: number };\n}\n\n/**\n * CanvasMenu - A popup menu for adding items to the flow canvas\n * Displayed when double-clicking on empty canvas space\n */\nexport class CanvasMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        z-index: 10000;\n        display: block;\n        pointer-events: none;\n      }\n\n      .menu {\n        position: fixed;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: var(--dropdown-shadow);\n        padding: 0.5em 0;\n        width: 265px;\n        pointer-events: auto;\n      }\n\n      .menu-item {\n        padding: 0.75em 1.5em;\n        cursor: pointer;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.75em;\n        transition: background-color 0.15s ease;\n      }\n\n      .menu-item:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      .menu-item temba-icon {\n        --icon-color: var(--color-text);\n      }\n\n      .menu-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n      }\n\n      .divider {\n        height: 1px;\n        background: rgba(0, 0, 0, 0.1);\n        margin: 0.5em 0;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  public x = 0;\n\n  @property({ type: Number })\n  public y = 0;\n\n  @property({ type: Boolean })\n  public open = false;\n\n  @property({ type: Boolean })\n  public showStickyNote = true;\n\n  @property({ type: Boolean })\n  public showWaitForResponse = true;\n\n  @property({ type: Boolean })\n  public showReflow = false;\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    // Close menu when clicking/tapping outside — use mousedown instead of\n    // click to avoid being triggered by the click synthesized from a\n    // drag-and-drop (mousedown on exit + mouseup on canvas = click on\n    // common ancestor). Also listen for touchstart for touch devices.\n    const handleClickOutside = (e: MouseEvent | TouchEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside, {\n      passive: true\n    });\n\n    // Store cleanup function\n    (this as any)._clickOutsideHandler = handleClickOutside;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if ((this as any)._clickOutsideHandler) {\n      document.removeEventListener(\n        'mousedown',\n        (this as any)._clickOutsideHandler\n      );\n      document.removeEventListener(\n        'touchstart',\n        (this as any)._clickOutsideHandler\n      );\n    }\n  }\n\n  public show(\n    x: number,\n    y: number,\n    clickPosition: { x: number; y: number },\n    showStickyNote: boolean = true,\n    showReflow: boolean = false,\n    showWaitForResponse: boolean = true\n  ) {\n    this.x = x;\n    this.y = y;\n    this.clickPosition = clickPosition;\n    this.showStickyNote = showStickyNote;\n    this.showReflow = showReflow;\n    this.showWaitForResponse = showWaitForResponse;\n    this.open = true;\n\n    // Adjust position after menu renders to ensure it fits on screen\n    requestAnimationFrame(() => {\n      this.adjustPosition();\n    });\n  }\n\n  private adjustPosition(): void {\n    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;\n    if (!menuElement) return;\n\n    const menuRect = menuElement.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // margin from viewport edges\n\n    let adjustedX = this.x;\n    let adjustedY = this.y;\n\n    // Check if menu goes off the right edge\n    if (this.x + menuRect.width + margin > viewportWidth) {\n      adjustedX = viewportWidth - menuRect.width - margin;\n    }\n\n    // Check if menu goes off the bottom edge\n    if (this.y + menuRect.height + margin > viewportHeight) {\n      adjustedY = viewportHeight - menuRect.height - margin;\n    }\n\n    // Update position if needed\n    if (adjustedX !== this.x || adjustedY !== this.y) {\n      this.x = adjustedX;\n      this.y = adjustedY;\n    }\n  }\n\n  public close(fireCanceledEvent: boolean = true) {\n    if (this.open) {\n      this.open = false;\n      // Fire close event so parent can clean up, but only if not from a selection\n      if (fireCanceledEvent) {\n        this.fireCustomEvent(CustomEventType.Canceled, {});\n      }\n    }\n  }\n\n  private handleMenuItemClick(action: CanvasMenuSelection['action']) {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      action,\n      position: this.clickPosition\n    } as CanvasMenuSelection);\n    // Close without firing canceled event since we made a selection\n    this.close(false);\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    return html`\n      <div class=\"menu\" style=\"left: ${this.x}px; top: ${this.y}px;\">\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('send_msg')}\n        >\n          <temba-icon name=\"send\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Send Message</div>\n        </div>\n\n        ${this.showWaitForResponse\n          ? html`\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('wait_for_response')}\n              >\n                <temba-icon name=\"message\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Wait for Response</div>\n              </div>\n            `\n          : ''}\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('action')}\n        >\n          <temba-icon name=\"action\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Add Action</div>\n        </div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('split')}\n        >\n          <temba-icon name=\"split\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-title\">Add Split</div>\n        </div>\n\n        ${this.showStickyNote\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('sticky')}\n              >\n                <temba-icon name=\"note\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Add Sticky Note</div>\n              </div>\n            `\n          : ''}\n        ${this.showReflow\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div\n                class=\"menu-item\"\n                @click=${() => this.handleMenuItemClick('reflow')}\n              >\n                <temba-icon name=\"flow\" size=\"1.25\"></temba-icon>\n                <div class=\"menu-item-title\">Reflow</div>\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/flow/CanvasNode.js

@@ -171,24 +171,20 @@ export class CanvasNode extends RapidElement {
       }
       .title-spacer {
         width: 1.8em;
-        
       }
 
       .action:hover .drag-handle {
         visibility: visible;
         opacity: 0.7;
-        
-        
-      }
-
-      strong {
-        font-weight: 500;
       }
 
       .action .drag-handle:hover {
         visibility: visible;
         opacity: 1;
-        
+      }
+
+      strong {
+        font-weight: 500;
       }
 
       .action .cn-title,
@@ -215,6 +211,8 @@ export class CanvasNode extends RapidElement {
 
       .quick-replies {
         margin-top: 0.5em;
+        display: flex;
+        flex-wrap: wrap;
       }
 
       .quick-reply {
@@ -222,9 +220,14 @@ export class CanvasNode extends RapidElement {
         border: 1px solid #e0e0e0;
         border-radius: calc(var(--curvature) * 1.5);
         padding: 0.2em 1em;
-        display: inline-block;
         font-size: 0.8em;
         margin: 0.2em;
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .router-section {
@@ -409,6 +412,22 @@ export class CanvasNode extends RapidElement {
         color: #9ca3af;
         font-size: 0.9em;
       }
+
+      /* On touch devices, always show interactive controls.
+         The .touch-device class is added to the editor on first touch. */
+      .touch-device .remove-button {
+        visibility: visible !important;
+        opacity: 0.7;
+      }
+
+      .touch-device .action .drag-handle {
+        visibility: visible !important;
+        opacity: 0.7;
+      }
+
+      .touch-device .add-action-button {
+        opacity: 0.8 !important;
+      }
   }`;
     }
     constructor() {
@@ -850,6 +869,61 @@ export class CanvasNode extends RapidElement {
         this.actionClickStartPos = null;
         this.pendingActionClick = null;
     }
+    /* c8 ignore start -- touch-only handlers untestable in headless Chromium */
+    handleActionTouchStart(event, action) {
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            target.closest('.drag-handle') ||
+            target.closest('.linked-name') ||
+            this.actionRemovingState.has(action.uuid)) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.actionClickStartPos = { x: touch.clientX, y: touch.clientY };
+        this.pendingActionClick = { action, event: event };
+    }
+    handleActionTouchEnd(event, action) {
+        if (!this.pendingActionClick ||
+            this.pendingActionClick.action.uuid !== action.uuid) {
+            this.actionClickStartPos = null;
+            this.pendingActionClick = null;
+            return;
+        }
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            target.closest('.drag-handle') ||
+            target.closest('.linked-name') ||
+            this.actionRemovingState.has(action.uuid)) {
+            this.actionClickStartPos = null;
+            this.pendingActionClick = null;
+            return;
+        }
+        const touch = event.changedTouches[0];
+        if (this.actionClickStartPos && touch) {
+            const deltaX = touch.clientX - this.actionClickStartPos.x;
+            const deltaY = touch.clientY - this.actionClickStartPos.y;
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            const editor = this.closest('temba-flow-editor');
+            const editorWasDragging = editor === null || editor === void 0 ? void 0 : editor.dragging;
+            if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+                const actionEl = event.currentTarget;
+                const origin = actionEl
+                    ? this.getTopCenter(actionEl)
+                    : { x: touch.clientX, y: touch.clientY };
+                this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+                    action,
+                    nodeUuid: this.node.uuid,
+                    originX: origin.x,
+                    originY: origin.y
+                });
+            }
+        }
+        this.actionClickStartPos = null;
+        this.pendingActionClick = null;
+    }
+    /* c8 ignore stop */
     handleActionClick(event, action) {
         // This method is kept for backward compatibility but should not be used
         // The new mousedown/mouseup approach handles click vs drag properly
@@ -972,6 +1046,73 @@ export class CanvasNode extends RapidElement {
         this.nodeClickStartPos = null;
         this.pendingNodeClick = null;
     }
+    /* c8 ignore start -- touch-only handlers */
+    handleNodeTouchStart(event) {
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            target.closest('.exit') ||
+            target.closest('.exit-wrapper') ||
+            target.closest('.drag-handle') ||
+            target.closest('.linked-name') ||
+            this.actionRemovingState.has(this.node.uuid)) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.nodeClickStartPos = { x: touch.clientX, y: touch.clientY };
+        this.pendingNodeClick = { event: event };
+    }
+    handleNodeTouchEnd(event) {
+        if (!this.pendingNodeClick) {
+            this.nodeClickStartPos = null;
+            this.pendingNodeClick = null;
+            return;
+        }
+        const target = event.target;
+        if (target.closest('.remove-button') ||
+            target.closest('.exit') ||
+            target.closest('.exit-wrapper') ||
+            target.closest('.drag-handle') ||
+            target.closest('.linked-name') ||
+            this.actionRemovingState.has(this.node.uuid)) {
+            this.nodeClickStartPos = null;
+            this.pendingNodeClick = null;
+            return;
+        }
+        const touch = event.changedTouches[0];
+        if (this.nodeClickStartPos && touch) {
+            const deltaX = touch.clientX - this.nodeClickStartPos.x;
+            const deltaY = touch.clientY - this.nodeClickStartPos.y;
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            const editor = this.closest('temba-flow-editor');
+            const editorWasDragging = editor === null || editor === void 0 ? void 0 : editor.dragging;
+            if (distance <= 5 && (!editor || !editorWasDragging)) {
+                if (this.node.router) {
+                    const origin = this.getTopCenter(this);
+                    if (this.node.actions && this.node.actions.length === 1) {
+                        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+                            action: this.node.actions[0],
+                            nodeUuid: this.node.uuid,
+                            originX: origin.x,
+                            originY: origin.y
+                        });
+                    }
+                    else {
+                        this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+                            node: this.node,
+                            nodeUI: this.ui,
+                            originX: origin.x,
+                            originY: origin.y
+                        });
+                    }
+                }
+            }
+        }
+        this.nodeClickStartPos = null;
+        this.pendingNodeClick = null;
+    }
+    /* c8 ignore stop */
     handleAddActionClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -1230,6 +1371,8 @@ export class CanvasNode extends RapidElement {
           class="action-content ${hasIssues ? 'has-issues' : ''}"
           @mousedown=${(e) => !isDisabled && this.handleActionMouseDown(e, action)}
           @mouseup=${(e) => !isDisabled && this.handleActionMouseUp(e, action)}
+          @touchstart=${(e) => !isDisabled && this.handleActionTouchStart(e, action)}
+          @touchend=${(e) => !isDisabled && this.handleActionTouchEnd(e, action)}
           style="cursor: ${isDisabled ? 'not-allowed' : 'pointer'}"
         >
           ${this.renderTitle(config, action, index, isRemoving)}
@@ -1283,6 +1426,8 @@ export class CanvasNode extends RapidElement {
               class="body"
               @mousedown=${(e) => this.handleNodeMouseDown(e)}
               @mouseup=${(e) => this.handleNodeMouseUp(e)}
+              @touchstart=${(e) => this.handleNodeTouchStart(e)}
+              @touchend=${(e) => this.handleNodeTouchEnd(e)}
               style="cursor: pointer;"
             >
               ${renderClamped(html `Save as
@@ -1332,6 +1477,8 @@ export class CanvasNode extends RapidElement {
             })}
             @mousedown=${(e) => this.handleNodeMouseDown(e)}
             @mouseup=${(e) => this.handleNodeMouseUp(e)}
+            @touchstart=${(e) => this.handleNodeTouchStart(e)}
+            @touchend=${(e) => this.handleNodeTouchEnd(e)}
             style="cursor: pointer;"
           >
             <div class="cn-title" title="${displayName}">${displayName}</div>
@@ -1396,6 +1543,8 @@ export class CanvasNode extends RapidElement {
               <div
                 @mousedown=${(e) => this.handleNodeMouseDown(e)}
                 @mouseup=${(e) => this.handleNodeMouseUp(e)}
+                @touchstart=${(e) => this.handleNodeTouchStart(e)}
+                @touchend=${(e) => this.handleNodeTouchEnd(e)}
                 style="cursor: pointer;"
               >
                 ${this.renderNodeTitle(nodeConfig, this.node, this.ui, this.actionRemovingState.has(this.node.uuid))}