@nyaruka/temba-components 0.129.1 → 0.129.3

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

@@ -1 +1 @@
-{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n\n      .node {\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n        cursor: move;\n        user-select: none;\n\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n        \n      .action {\n        max-width: 200px;\n        position: relative;\n      }\n\n      .action.sortable {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .action .action-content {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .drag-handle {\n        opacity: 0;\n        transition: all 200ms ease-in-out;\n        cursor: move;\n        background: rgba(0, 0, 0, 0.02);\n        max-width:0px;\n        position: absolute;\n      }\n\n      .action:hover .drag-handle {\n        opacity: 0.5;\n        padding: 0.25em;\n        max-width: 20px;\n      }\n\n      .action .drag-handle:hover {\n        opacity: 1;\n        \n      }\n\n      .action .title,\n      .router .title {\n        display: flex;\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n\n      }\n\n      .title .name {\n        flex-grow: 1;\n        }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  constructor() {\n    super();\n    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      // make our initial connections\n      if (changes.get('node') === undefined) {\n        // this.plumber.makeTarget(this.node.uuid);\n        for (const exit of this.node.exits) {\n          if (!exit.destination_uuid) {\n            this.plumber.makeSource(exit.uuid);\n          } else {\n            this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n          }\n        }\n      }\n\n      const ele = this.parentElement;\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        ?.getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private handleActionOrderChanged(event: CustomEvent) {\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    // swap our actions\n    const newActions = [...this.node.actions];\n    const movedAction = newActions.splice(fromIdx, 1)[0];\n    newActions.splice(toIdx, 0, movedAction);\n\n    // udate our internal reprensentation, this isn't strictly necessary\n    // since the editor will update us from it's definition subscription\n    // but it makes testing a lot easier\n    this.node = { ...this.node, actions: newActions };\n\n    getStore()\n      ?.getState()\n      .updateNode(this.node.uuid, { ...this.node, actions: newActions });\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${this.node?.actions?.length > 1\n        ? html`<temba-icon class=\"drag-handle\" name=\"sort\"></temba-icon>`\n        : null}\n\n      <div class=\"name\">${config.name}</div>\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action, index: number) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div\n        class=\"action sortable ${action.type}\"\n        id=\"action-${index}\"\n      >\n        <div class=\"action-content\">\n          ${this.renderTitle(config)}\n          <div class=\"body\">\n            ${config.render\n              ? config.render(node, action)\n              : html`<pre>${action.type}</pre>`}\n          </div>\n        </div>\n      </div>`;\n    }\n    return html`<div class=\"action sortable\" id=\"action-${index}\">\n      ${action.type}\n    </div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.length > 0\n          ? html`<temba-sortable-list\n              dragHandle=\"drag-handle\"\n              @temba-order-changed=\"${this.handleActionOrderChanged}\"\n            >\n              ${this.node.actions.map((actionSpec, index) => {\n                return this.renderAction(this.node, actionSpec, index);\n              })}\n            </temba-sortable-list>`\n          : ''}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,aAAa,EAAY,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,OAAO,UAAW,SAAQ,YAAY;IAC1C,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAuBD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoPV,CAAC;IACH,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QArQV,2CAA2C;QACnC,wBAAmB,GAAwB,IAAI,GAAG,EAAE,CAAC;QAE7D,mDAAmD;QAC3C,sBAAiB,GAAgB,IAAI,GAAG,EAAE,CAAC;QAEnD,6CAA6C;QACrC,0BAAqB,GAAwB,IAAI,GAAG,EAAE,CAAC;QAE/D,qDAAqD;QAC7C,wBAAmB,GAAgB,IAAI,GAAG,EAAE,CAAC;QA4PnD,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3E,CAAC;IAES,OAAO,CACf,OAA0D;;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,+BAA+B;YAC/B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS,EAAE,CAAC;gBACtC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;oBACnC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACrC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,OAAO,CAAC,UAAU,CACrB,IAAI,CAAC,IAAI,CAAC,IAAI,EACd,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,gBAAgB,CACtB,CAAC;oBACJ,CAAC;gBACH,CAAC;YACH,CAAC;YAED,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;YAC/B,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;YAEzC,MAAA,QAAQ,EAAE,0CACN,QAAQ,GACT,YAAY,CACX,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAClC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CACnC,CAAC;QACN,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,0DAA0D;QAC1D,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,0CAA0C;QAC1C,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC7C,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;QAEjC,4CAA4C;QAC5C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/C,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,CAAC;QAEnC,2BAA2B;QAC3B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;IACnC,CAAC;IAEO,eAAe,CAAC,KAAiB,EAAE,IAAU;QACnD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;QAEzB,uCAAuC;QACvC,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEnC,mEAAmE;QACnE,IAAI,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,yBAAyB;QACzB,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,uCAAuC;QACvC,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAEtD,2CAA2C;QAC3C,IAAI,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACzC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,CAAC;QAED,gDAAgD;QAChD,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAExC,uCAAuC;YACvC,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YAEvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAEO,cAAc,CAAC,IAAU;;QAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;QAEzB,qBAAqB;QACrB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEtC,4FAA4F;QAC5F,8DAA8D;QAC9D,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEvD,oBAAoB;QACpB,IAAI,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACzC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC1C,CAAC;QAED,gCAAgC;QAChC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAE1C,6BAA6B;QAC7B,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAC7C,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CACpC,CAAC;QAEF,kBAAkB;QAClB,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;QAC1D,MAAA,QAAQ,EAAE,0CAAE,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAE/D,oCAAoC;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,uBAAuB,CAC7B,KAAiB,EACjB,MAAc,EACd,KAAa;QAEb,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC;QAE7B,kEAAkE;QAClE,IAAI,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,yBAAyB;QACzB,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,6CAA6C;QAC7C,IAAI,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QACzD,CAAC;QAED,gDAAgD;QAChD,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC1C,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,+BAA+B;QAEzC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACtD,CAAC;IAED,6DAA6D;IACrD,YAAY,CAAC,MAAc,EAAE,MAAc;;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC;QAE7B,qBAAqB;QACrB,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE1C,oBAAoB;QACpB,IAAI,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7C,YAAY,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;YACvD,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC9C,CAAC;QAED,kCAAkC;QAClC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;QAE5E,+CAA+C;QAC/C,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,WAAW,EAAE;gBAChD,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI;aACrB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,yCAAyC;YACzC,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;YAC9D,MAAA,QAAQ,EAAE,0CAAE,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YAE/D,oCAAoC;YACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,wBAAwB,CAAC,KAAkB;;QACjD,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QAE3C,mBAAmB;QACnB,MAAM,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC;QAEzC,oEAAoE;QACpE,oEAAoE;QACpE,oCAAoC;QACpC,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;QAElD,MAAA,QAAQ,EAAE,0CACN,QAAQ,GACT,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC;IACvE,CAAC;IAEO,WAAW,CAAC,MAAgB,EAAE,aAAsB,KAAK;;QAC/D,OAAO,IAAI,CAAA,wCAAwC,MAAM,CAAC,KAAK;QAC3D,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,0CAAE,MAAM,IAAG,CAAC;YAC9B,CAAC,CAAC,IAAI,CAAA,2DAA2D;YACjE,CAAC,CAAC,IAAI;;0BAEY,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;WACnD,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,IAAU,EAAE,MAAc,EAAE,KAAa;QAC5D,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAE7D,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,IAAI,CAAA;iCACgB,MAAM,CAAC,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;qBACvD,KAAK;;;;mBAIP,CAAC,CAAa,EAAE,EAAE,CACzB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC;;;;;;YAM9C,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC;;cAElC,MAAM,CAAC,MAAM;gBACb,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC;gBAC7B,CAAC,CAAC,IAAI,CAAA,QAAQ,MAAM,CAAC,IAAI,QAAQ;;;aAGlC,CAAC;QACV,CAAC;QACD,OAAO,IAAI,CAAA;+BACgB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;mBACxC,KAAK;;;;iBAIP,CAAC,CAAa,EAAE,EAAE,CACzB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC;;;;;QAKhD,MAAM,CAAC,IAAI;WACR,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,MAAc,EAAE,EAAU;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,IAAI,CAAA;UACP,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;UAC/B,MAAM,CAAC,WAAW;gBAClB,CAAC,CAAC,IAAI,CAAA;;yCAEyB,MAAM,CAAC,WAAW;mBACxC;gBACT,CAAC,CAAC,IAAI;aACH,CAAC;QACV,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,IAAU;QACjC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YAC5C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YACzD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAC1B,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,SAAS,CAChD,CAAC;YAEF,OAAO,IAAI,CAAA;6BACY,QAAQ,CAAC,IAAI;UAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;aAClB,CAAC;QACV,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,2BAA2B,UAAU,QAAQ,CAAC;IAC3D,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI;gBACP,UAAU,CAAC;YACjB,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB;YAClC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SAChD,CAAC;iBACO,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;;WAEtD,CAAC;IACV,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAA,oCAAoC,CAAC;QAClD,CAAC;QAED,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,IAAI,CAAC,IAAI;;sBAEN,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG;;UAE/D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA;;sCAEsB,IAAI,CAAC,wBAAwB;;gBAEnD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;gBAC5C,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;YACzD,CAAC,CAAC;mCACmB;YACzB,CAAC,CAAC,EAAE;UACJ,IAAI,CAAC,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;cAClD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACtC,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC7B,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC,CAAC;mBACG;;KAEd,CAAC;IACJ,CAAC;CACF;AAxmBS;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACF;AAGjB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACR;AAGX;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACR","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\nimport { CustomEventType } from '../interfaces';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  // Track exits that are in \"removing\" state\n  private exitRemovalTimeouts: Map<string, number> = new Map();\n\n  // Set of exit UUIDs that are in the removing state\n  private exitRemovingState: Set<string> = new Set();\n\n  // Track actions that are in \"removing\" state\n  private actionRemovalTimeouts: Map<string, number> = new Map();\n\n  // Set of action UUIDs that are in the removing state\n  private actionRemovingState: Set<string> = new Set();\n\n  static get styles() {\n    return css`\n\n      .node {\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: var(--curvature);\n        \n        color: #333;\n        cursor: move;\n        user-select: none;\n\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n\n      .action {\n        max-width: 200px;\n        position: relative;\n      }\n\n      .action .remove-button {\n        position: absolute;\n        top: 5px;\n        right: 5px;\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        background: var(--color-error, #dc3545);\n        color: white;\n        border: none;\n        cursor: pointer;\n        display: none;\n        align-items: center;\n        justify-content: center;\n        font-size: 10px;\n        line-height: 1;\n        z-index: 10;\n      }\n\n      .action:hover .remove-button {\n        display: flex;\n      }\n\n      .action.removing .title {\n        background-color: var(--color-error, #dc3545) !important;\n      }\n\n      .action.removing .title .name {\n        color: white;\n      }\n\n      .action.sortable {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .action .action-content {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .drag-handle {\n        opacity: 0;\n        transition: all 200ms ease-in-out;\n        cursor: move;\n        background: rgba(0, 0, 0, 0.02);\n        max-width:0px;\n        position: absolute;\n      }\n\n      .action:hover .drag-handle {\n        opacity: 0.5;\n        padding: 0.25em;\n        max-width: 20px;\n      }\n\n      .action .drag-handle:hover {\n        opacity: 1;\n        \n      }\n\n      .action .title,\n      .router .title {\n        display: flex;\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n\n      }\n\n      .title .name {\n        flex-grow: 1;\n        }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .action-exits {\n        padding-bottom: 0.6em;\n        margin-top: -0.8em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit-wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        margin-bottom: -1.2em;\n        padding-top:0.2em;\n      }\n\n      .exit {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background-color: tomato;\n        position: relative;\n        box-shadow: 0 2px 2px rgba(0, 0, 0, .1);\n        cursor: pointer;\n        pointer-events: none;\n      }\n\n      .exit.jtk-connected {\n        background: var(--color-connectors, #e6e6e6);\n      }\n\n      .exit.connected {\n        background-color: #fff;\n        pointer-events: all;\n      }\n\n      .exit.connected:hover {\n        background-color: var(--color-connectors, #e6e6e6);\n      }\n      \n      .exit.removing, .exit.removing:hover {\n        background-color: var(--color-error);\n        pointer-events: all;\n      }\n      \n      .exit.removing::before {\n        content: '✕';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        font-size: 8px;\n        color: white;\n        line-height: 1;\n      }\n      \n      /* Connector in removing state */\n      :host {\n        --color-connector-removing: var(--color-error);\n      }\n      \n      body svg.plumb-connector.removing path {\n        stroke: var(--color-connector-removing, tomato) !important;\n        stroke-width: 3px;\n      }\n      \n      body .plumb-connector.removing .plumb-arrow {\n        fill: var(--color-connector-removing, tomato) !important;\n        stroke: var(--color-connector-removing, transparent) !important;\n      }\n\n      .category:first-child {\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .category:last-child {\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .router .title {\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n      }\n\n      .action{\n        overflow: hidden;\n      }\n\n      .action:first-child .title {\n        border-top-left-radius: var(--curvature);\n        border-top-right-radius: var(--curvature);\n      }\n  }`;\n  }\n\n  constructor() {\n    super();\n    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      // make our initial connections\n      if (changes.get('node') === undefined) {\n        for (const exit of this.node.exits) {\n          if (!exit.destination_uuid) {\n            this.plumber.makeSource(exit.uuid);\n          } else {\n            this.plumber.connectIds(\n              this.node.uuid,\n              exit.uuid,\n              exit.destination_uuid\n            );\n          }\n        }\n      }\n\n      const ele = this.parentElement;\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        ?.getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  disconnectedCallback() {\n    // Remove the event listener when the component is removed\n    super.disconnectedCallback();\n\n    // Clear any pending exit removal timeouts\n    this.exitRemovalTimeouts.forEach((timeoutId) => {\n      clearTimeout(timeoutId);\n    });\n    this.exitRemovalTimeouts.clear();\n\n    // Clear any pending action removal timeouts\n    this.actionRemovalTimeouts.forEach((timeoutId) => {\n      clearTimeout(timeoutId);\n    });\n    this.actionRemovalTimeouts.clear();\n\n    // Clear the removing state\n    this.exitRemovingState.clear();\n    this.actionRemovingState.clear();\n  }\n\n  private handleExitClick(event: MouseEvent, exit: Exit) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const exitId = exit.uuid;\n\n    // If exit is not connected, do nothing\n    if (!exit.destination_uuid) return;\n\n    // If the exit is already in removing state, perform the disconnect\n    if (this.exitRemovingState.has(exitId)) {\n      this.disconnectExit(exit);\n      return;\n    }\n\n    // Start removal UI state\n    this.exitRemovingState.add(exitId);\n    this.requestUpdate();\n\n    // Set the connection to removing state\n    this.plumber.setConnectionRemovingState(exitId, true);\n\n    // Clear any existing timeout for this exit\n    if (this.exitRemovalTimeouts.has(exitId)) {\n      clearTimeout(this.exitRemovalTimeouts.get(exitId));\n    }\n\n    // Set timeout to reset UI if user doesn't click\n    const timeoutId = window.setTimeout(() => {\n      this.exitRemovingState.delete(exitId);\n      this.exitRemovalTimeouts.delete(exitId);\n\n      // Reset the connection to normal state\n      this.plumber.setConnectionRemovingState(exitId, false);\n\n      this.requestUpdate();\n    }, 1500);\n\n    this.exitRemovalTimeouts.set(exitId, timeoutId);\n  }\n\n  private disconnectExit(exit: Exit) {\n    const exitId = exit.uuid;\n\n    // Clear the UI state\n    this.exitRemovingState.delete(exitId);\n\n    // Reset the connection to normal state (this will be redundant as we're about to remove it,\n    // but it's safer to do this in case there's any timing issue)\n    this.plumber.setConnectionRemovingState(exitId, false);\n\n    // Clear any timeout\n    if (this.exitRemovalTimeouts.has(exitId)) {\n      clearTimeout(this.exitRemovalTimeouts.get(exitId));\n      this.exitRemovalTimeouts.delete(exitId);\n    }\n\n    // Remove the JSPlumb connection\n    this.plumber.removeExitConnection(exitId);\n\n    // Update the flow definition\n    const updatedExit = { ...exit, destination_uuid: null };\n    const updatedExits = this.node.exits.map((e) =>\n      e.uuid === exitId ? updatedExit : e\n    );\n\n    // Update the node\n    const updatedNode = { ...this.node, exits: updatedExits };\n    getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n    // Request update to reflect changes\n    this.requestUpdate();\n  }\n\n  private handleActionRemoveClick(\n    event: MouseEvent,\n    action: Action,\n    index: number\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const actionId = action.uuid;\n\n    // If the action is already in removing state, perform the removal\n    if (this.actionRemovingState.has(actionId)) {\n      this.removeAction(action, index);\n      return;\n    }\n\n    // Start removal UI state\n    this.actionRemovingState.add(actionId);\n    this.requestUpdate();\n\n    // Clear any existing timeout for this action\n    if (this.actionRemovalTimeouts.has(actionId)) {\n      clearTimeout(this.actionRemovalTimeouts.get(actionId));\n    }\n\n    // Set timeout to reset UI if user doesn't click\n    const timeoutId = window.setTimeout(() => {\n      this.actionRemovingState.delete(actionId);\n      this.actionRemovalTimeouts.delete(actionId);\n      this.requestUpdate();\n    }, 1000); // 1 second as per requirements\n\n    this.actionRemovalTimeouts.set(actionId, timeoutId);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private removeAction(action: Action, _index: number) {\n    const actionId = action.uuid;\n\n    // Clear the UI state\n    this.actionRemovingState.delete(actionId);\n\n    // Clear any timeout\n    if (this.actionRemovalTimeouts.has(actionId)) {\n      clearTimeout(this.actionRemovalTimeouts.get(actionId));\n      this.actionRemovalTimeouts.delete(actionId);\n    }\n\n    // Remove the action from the node\n    const updatedActions = this.node.actions.filter((a) => a.uuid !== actionId);\n\n    // If no actions remain, remove the entire node\n    if (updatedActions.length === 0) {\n      this.fireCustomEvent(CustomEventType.NodeDeleted, {\n        uuid: this.node.uuid\n      });\n    } else {\n      // Update the node with remaining actions\n      const updatedNode = { ...this.node, actions: updatedActions };\n      getStore()?.getState().updateNode(this.node.uuid, updatedNode);\n\n      // Request update to reflect changes\n      this.requestUpdate();\n    }\n  }\n\n  private handleActionOrderChanged(event: CustomEvent) {\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    // swap our actions\n    const newActions = [...this.node.actions];\n    const movedAction = newActions.splice(fromIdx, 1)[0];\n    newActions.splice(toIdx, 0, movedAction);\n\n    // udate our internal reprensentation, this isn't strictly necessary\n    // since the editor will update us from it's definition subscription\n    // but it makes testing a lot easier\n    this.node = { ...this.node, actions: newActions };\n\n    getStore()\n      ?.getState()\n      .updateNode(this.node.uuid, { ...this.node, actions: newActions });\n  }\n\n  private renderTitle(config: UIConfig, isRemoving: boolean = false) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${this.node?.actions?.length > 1\n        ? html`<temba-icon class=\"drag-handle\" name=\"sort\"></temba-icon>`\n        : null}\n\n      <div class=\"name\">${isRemoving ? 'Remove?' : config.name}</div>\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action, index: number) {\n    const config = EDITOR_CONFIG[action.type];\n    const isRemoving = this.actionRemovingState.has(action.uuid);\n\n    if (config) {\n      return html`<div\n        class=\"action sortable ${action.type} ${isRemoving ? 'removing' : ''}\"\n        id=\"action-${index}\"\n      >\n        <button\n          class=\"remove-button\"\n          @click=${(e: MouseEvent) =>\n            this.handleActionRemoveClick(e, action, index)}\n          title=\"Remove action\"\n        >\n          ✕\n        </button>\n        <div class=\"action-content\">\n          ${this.renderTitle(config, isRemoving)}\n          <div class=\"body\">\n            ${config.render\n              ? config.render(node, action)\n              : html`<pre>${action.type}</pre>`}\n          </div>\n        </div>\n      </div>`;\n    }\n    return html`<div\n      class=\"action sortable ${isRemoving ? 'removing' : ''}\"\n      id=\"action-${index}\"\n    >\n      <button\n        class=\"remove-button\"\n        @click=${(e: MouseEvent) =>\n          this.handleActionRemoveClick(e, action, index)}\n        title=\"Remove action\"\n      >\n        ✕\n      </button>\n      ${action.type}\n    </div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config, false)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div class=\"exit-wrapper\">\n      <div\n        id=\"${exit.uuid}\"\n        class=${getClasses({\n          exit: true,\n          connected: !!exit.destination_uuid,\n          removing: this.exitRemovingState.has(exit.uuid)\n        })}\n        @click=${(e: MouseEvent) => this.handleExitClick(e, exit)}\n      ></div>\n    </div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.length > 0\n          ? html`<temba-sortable-list\n              dragHandle=\"drag-handle\"\n              @temba-order-changed=\"${this.handleActionOrderChanged}\"\n            >\n              ${this.node.actions.map((actionSpec, index) => {\n                return this.renderAction(this.node, actionSpec, index);\n              })}\n            </temba-sortable-list>`\n          : ''}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,19 +1,38 @@
-import { DotEndpoint, FlowchartConnector, newInstance, ready, RectangleEndpoint } from '@jsplumb/browser-ui';
+import { DotEndpoint, FlowchartConnector, newInstance, ready, 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 = {
     endpoint: {
@@ -32,21 +51,74 @@ export const TARGET_DEFAULTS = {
             cssClass: 'continuos plumb-target-anchor'
         }
     },
-    dragAllowedWhenFull: false,
-    deleteEndpointsOnEmpty: true,
-    isTarget: true
+    deleteOnEmpty: true,
+    maxConnections: 1,
+    target: true
 };
 export class Plumber {
     constructor(canvas) {
         this.jsPlumb = null;
         this.pendingConnections = [];
+        this.connectionListeners = new Map();
+        this.connectionDragging = false;
         this.connectionWait = null;
         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, () => { });
         });
     }
+    notifyListeners(eventName, info) {
+        const listeners = this.connectionListeners.get(eventName) || [];
+        listeners.forEach((listener) => listener(info));
+    }
+    on(eventName, callback) {
+        if (!this.connectionListeners.has(eventName)) {
+            this.connectionListeners.set(eventName, []);
+        }
+        this.connectionListeners.get(eventName).push(callback);
+    }
+    off(eventName, callback) {
+        if (!this.connectionListeners.has(eventName))
+            return;
+        const listeners = this.connectionListeners.get(eventName);
+        const index = listeners.indexOf(callback);
+        if (index !== -1) {
+            listeners.splice(index, 1);
+        }
+    }
     makeTarget(uuid) {
         const element = document.getElementById(uuid);
         this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
@@ -66,9 +138,11 @@ 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: {
@@ -84,35 +158,20 @@ export class Plumber {
                         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 = [];
             });
         }, 50);
     }
-    connectIds(fromId, toId) {
-        this.pendingConnections.push({ fromId, toId });
+    connectIds(scope, fromId, toId) {
+        this.pendingConnections.push({ scope, fromId, toId });
         this.processPendingConnections();
     }
     repaintEverything() {
@@ -120,57 +179,78 @@ export class Plumber {
             this.jsPlumb.repaintEverything();
         }
     }
-    elevateNodeConnections(nodeId) {
+    revalidate(ids) {
         if (!this.jsPlumb)
             return;
-        // Get all connections
-        const connections = this.jsPlumb.getConnections();
-        // 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);
-        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');
+        this.jsPlumb.batch(() => {
+            ids.forEach((id) => {
+                const element = document.getElementById(id);
+                if (element) {
+                    this.jsPlumb.revalidate(element);
                 }
-            }
+            });
+        });
+    }
+    removeNodeConnections(nodeId) {
+        var _a;
+        if (!this.jsPlumb)
+            return;
+        const inbound = this.jsPlumb.select({ target: nodeId });
+        // 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(((_a = document.getElementById(nodeId)) === null || _a === void 0 ? void 0 : _a.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);
         });
     }
-    restoreNodeConnections(nodeId) {
+    removeExitConnection(exitId) {
         if (!this.jsPlumb)
             return;
-        // Get all connections
-        const connections = this.jsPlumb.getConnections();
-        // 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 exitElement = document.getElementById(exitId);
+        if (!exitElement)
+            return;
+        // 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
+     */
+    setConnectionRemovingState(exitId, isRemoving) {
+        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;
     }
 }
 //# sourceMappingURL=Plumber.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Plumber.js","sourceRoot":"","sources":["../../../src/flow/Plumber.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DotEndpoint,\n  FlowchartConnector,\n  newInstance,\n  ready,\n  RectangleEndpoint\n} from '@jsplumb/browser-ui';\n\nexport const SOURCE_DEFAULTS = {\n  endpoint: {\n    type: DotEndpoint.type,\n    options: {\n      radius: 6,\n      connectedClass: 'plumb-connected',\n      cssClass: 'plumb-source',\n      hoverClass: 'plumb-source-hover'\n    }\n  },\n  anchors: ['Bottom', 'Continuous'],\n  maxConnections: 1,\n  dragAllowedWhenFull: false,\n  deleteEndpointsOnEmpty: true,\n  isSource: true\n};\n\nexport const TARGET_DEFAULTS = {\n  endpoint: {\n    type: RectangleEndpoint.type,\n    options: {\n      width: 23,\n      height: 23,\n      cssClass: 'plumb-target',\n      hoverClass: 'plumb-target-hover'\n    }\n  },\n  anchor: {\n    type: 'Continuous',\n    options: {\n      faces: ['top', 'left', 'right'],\n      cssClass: 'continuos plumb-target-anchor'\n    }\n  },\n  dragAllowedWhenFull: false,\n  deleteEndpointsOnEmpty: true,\n  isTarget: true\n};\n\nexport class Plumber {\n  private jsPlumb = null;\n  private pendingConnections = [];\n\n  constructor(canvas: HTMLElement) {\n    ready(() => {\n      this.jsPlumb = newInstance({\n        container: canvas\n      });\n    });\n  }\n\n  public makeTarget(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);\n  }\n\n  public makeSource(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);\n  }\n\n  private connectionWait = null;\n\n  // we'll process our pending connections, but we want to debounce this\n  public processPendingConnections() {\n    // if we have a pending connection wait, clear it\n    if (this.connectionWait) {\n      clearTimeout(this.connectionWait);\n      this.connectionWait = null;\n    }\n\n    // debounce the connection processing\n    this.connectionWait = setTimeout(() => {\n      this.jsPlumb.batch(() => {\n        this.pendingConnections.forEach((connection) => {\n          const { fromId, toId } = connection;\n          const fromElement = document.getElementById(fromId);\n          const toElement = document.getElementById(toId);\n\n          const source = this.jsPlumb.addEndpoint(fromElement, {\n            ...SOURCE_DEFAULTS,\n            endpoint: {\n              ...SOURCE_DEFAULTS.endpoint,\n              options: {\n                ...SOURCE_DEFAULTS.endpoint.options,\n                cssClass: 'plumb-source connected'\n              }\n            }\n          });\n          const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);\n          this.jsPlumb.connect({\n            source,\n            target,\n            connector: {\n              type: FlowchartConnector.type,\n              options: {\n                stub: 12,\n                midpoint: 0.75,\n                alwaysRespectStubs: false,\n                gap: [0, 5],\n                cornerRadius: 3,\n                cssClass: 'plumb-connector'\n              }\n            },\n            overlays: [\n              {\n                type: 'PlainArrow',\n                options: {\n                  width: 13,\n                  length: 13,\n                  location: 0.999,\n                  cssClass: 'plumb-arrow'\n                }\n              }\n            ]\n          });\n        });\n        this.pendingConnections = [];\n      });\n    }, 50);\n  }\n\n  public connectIds(fromId: string, toId: string) {\n    this.pendingConnections.push({ fromId, toId });\n    this.processPendingConnections();\n  }\n\n  public repaintEverything() {\n    if (this.jsPlumb) {\n      this.jsPlumb.repaintEverything();\n    }\n  }\n  public elevateNodeConnections(nodeId: string) {\n    if (!this.jsPlumb) return;\n\n    // Get all connections\n    const connections = this.jsPlumb.getConnections();\n\n    // Get the node element to find its exit elements\n    const nodeElement = document.getElementById(nodeId);\n    const exitElements = nodeElement\n      ? nodeElement.querySelectorAll('.exit')\n      : [];\n    const exitIds = Array.from(exitElements).map((exit) => exit.id);\n\n    connections.forEach((connection) => {\n      const sourceId = connection.source.id;\n      const targetId = connection.target.id;\n\n      // Check if this connection involves the dragged node:\n      // - Incoming: target is the node itself\n      // - Outgoing: source is one of the node's exits\n      if (targetId === nodeId || exitIds.includes(sourceId)) {\n        // Add elevated class to the connector element\n        const connectorElement = connection.connector.canvas;\n        if (connectorElement) {\n          connectorElement.classList.add('elevated');\n        }\n      }\n    });\n  }\n\n  public restoreNodeConnections(nodeId: string) {\n    if (!this.jsPlumb) return;\n\n    // Get all connections\n    const connections = this.jsPlumb.getConnections();\n\n    // Get the node element to find its exit elements\n    const nodeElement = document.getElementById(nodeId);\n    const exitElements = nodeElement\n      ? nodeElement.querySelectorAll('.exit')\n      : [];\n    const exitIds = Array.from(exitElements).map((exit) => exit.id);\n\n    connections.forEach((connection) => {\n      const sourceId = connection.source.id;\n      const targetId = connection.target.id;\n\n      // Check if this connection involves the node:\n      // - Incoming: target is the node itself\n      // - Outgoing: source is one of the node's exits\n      if (targetId === nodeId || exitIds.includes(sourceId)) {\n        // Remove elevated class from the connector element\n        const connectorElement = connection.connector.canvas;\n        if (connectorElement) {\n          connectorElement.classList.remove('elevated');\n        }\n      }\n    });\n  }\n}\n"]}
+{"version":3,"file":"Plumber.js","sourceRoot":"","sources":["../../../src/flow/Plumber.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,kBAAkB,CAAC,IAAI;IAC7B,OAAO,EAAE;QACP,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;QACd,QAAQ,EAAE,GAAG;QACb,kBAAkB,EAAE,IAAI;QACxB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,iBAAiB;KAC5B;CACF,CAAC;AAEF,MAAM,iBAAiB,GAAG;IACxB;QACE,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,aAAa;SACxB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,OAAO,EAAE;YACP,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,cAAc;YACxB,UAAU,EAAE,oBAAoB;SACjC;KACF;IACD,OAAO,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;IACjC,cAAc,EAAE,CAAC;IACjB,MAAM,EAAE,IAAI;IACZ,mBAAmB,EAAE,KAAK;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE;QACR,IAAI,EAAE,iBAAiB,CAAC,IAAI;QAC5B,OAAO,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,cAAc;YACxB,UAAU,EAAE,oBAAoB;SACjC;KACF;IACD,MAAM,EAAE;QACN,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE;YACP,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC;YAC/B,QAAQ,EAAE,+BAA+B;SAC1C;KACF;IACD,aAAa,EAAE,IAAI;IACnB,cAAc,EAAE,CAAC;IACjB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,OAAO,OAAO;IAOlB,YAAY,MAAmB;QANvB,YAAO,GAAG,IAAI,CAAC;QACf,uBAAkB,GAAG,EAAE,CAAC;QACxB,wBAAmB,GAAG,IAAI,GAAG,EAAE,CAAC;QACjC,uBAAkB,GAAG,KAAK,CAAC;QAC1B,mBAAc,GAAG,IAAI,CAAC;QAG5B,KAAK,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;gBACzB,SAAS,EAAE,MAAM;gBACjB,qBAAqB,EAAE,IAAI;gBAC3B,aAAa,EAAE;oBACb,IAAI,EAAE,OAAO;iBACd;gBACD,SAAS,EAAE,kBAAkB;gBAC7B,kBAAkB,EAAE,iBAAiB;aACtC,CAAC,CAAC;YAEH,4BAA4B;YAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,EAAE;gBAC3C,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;gBAChC,IAAI,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;YAC/C,CAAC,CAAC,CAAC;YAEH,iCAAiC;YACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,IAAI,EAAE,EAAE;gBAChD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;gBAC/B,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;YACpD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,IAAI,EAAE,EAAE;gBACjD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;gBAChC,IAAI,CAAC,eAAe,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,IAAI,EAAE,EAAE;gBACpD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;gBAChC,IAAI,CAAC,eAAe,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;gBACvC,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,GAAG,EAAE;gBAC5C,uCAAuC;gBACvC,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,SAAiB,EAAE,IAAS;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QAChE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAClD,CAAC;IAEM,EAAE,CAAC,SAAiB,EAAE,QAA6B;QACxD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC9C,CAAC;QACD,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;IAEM,GAAG,CAAC,SAAiB,EAAE,QAA6B;QACzD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,OAAO;QACrD,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC1C,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAEM,UAAU,CAAC,IAAY;QAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAEM,UAAU,CAAC,IAAY;QAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAED,sEAAsE;IAC/D,yBAAyB;QAC9B,iDAAiD;QACjD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;QAED,qCAAqC;QACrC,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;YACpC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE;gBACtB,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;oBAC7C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC;oBAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBACpD,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;oBAEhD,gCAAgC;oBAChC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;oBAE7D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,EAAE;wBACnD,GAAG,eAAe;wBAClB,QAAQ,EAAE;4BACR,GAAG,eAAe,CAAC,QAAQ;4BAC3B,OAAO,EAAE;gCACP,GAAG,eAAe,CAAC,QAAQ,CAAC,OAAO;gCACnC,QAAQ,EAAE,wBAAwB;6BACnC;yBACF;qBACF,CAAC,CAAC;oBAEH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;oBACpE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;wBACnB,MAAM;wBACN,MAAM;wBACN,SAAS,EAAE;4BACT,GAAG,kBAAkB;4BACrB,OAAO,EAAE,EAAE,GAAG,kBAAkB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;yBACxD;wBACD,IAAI,EAAE;4BACJ,MAAM,EAAE,KAAK;yBACd;qBACF,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;YAC/B,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC;IAEM,UAAU,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;QAC3D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAEM,iBAAiB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAEM,UAAU,CAAC,GAAa;QAC7B,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE;YACtB,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBACjB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;gBAC5C,IAAI,OAAO,EAAE,CAAC;oBACZ,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,qBAAqB,CAAC,MAAc;;QACzC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QAExD,4EAA4E;QAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEnE,MAAM,OAAO,GACX,KAAK,CAAC,IAAI,CACR,CAAA,MAAA,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,0CAAE,gBAAgB,CAAC,OAAO,CAAC,KAAI,EAAE,CACjE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACb,OAAO,IAAI,CAAC,EAAE,CAAC;QACjB,CAAC,CAAC,IAAI,EAAE,CAAC;QAEX,OAAO,CAAC,SAAS,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;QACrD,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;QAE9D,4CAA4C;QAC5C,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC3B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,oBAAoB,CAAC,MAAc;QACxC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,qCAAqC;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;QAEzE,yBAAyB;QACzB,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,yDAAyD;QACzD,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAC7C,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACI,0BAA0B,CAC/B,MAAc,EACd,UAAmB;QAEnB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAEhC,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,WAAW;YAAE,OAAO,KAAK,CAAC;QAE/B,qCAAqC;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;QAEzE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAE3C,sCAAsC;QACtC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;YACjC,IAAI,UAAU,EAAE,CAAC;gBACf,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YACrC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import {\n  DotEndpoint,\n  FlowchartConnector,\n  newInstance,\n  ready,\n  RectangleEndpoint,\n  EVENT_CONNECTION_DRAG,\n  EVENT_CONNECTION_ABORT,\n  INTERCEPT_BEFORE_DROP,\n  EVENT_CONNECTION,\n  EVENT_REVERT,\n  INTERCEPT_BEFORE_DETACH,\n  EVENT_CONNECTION_DETACHED\n} from '@jsplumb/browser-ui';\n\nconst CONNECTOR_DEFAULTS = {\n  type: FlowchartConnector.type,\n  options: {\n    stub: [20, 10],\n    midpoint: 0.5,\n    alwaysRespectStubs: true,\n    cornerRadius: 5,\n    cssClass: 'plumb-connector'\n  }\n};\n\nconst OVERLAYS_DEFAULTS = [\n  {\n    type: 'PlainArrow',\n    options: {\n      width: 13,\n      length: 13,\n      location: 0.999,\n      cssClass: 'plumb-arrow'\n    }\n  }\n];\n\nexport const SOURCE_DEFAULTS = {\n  endpoint: {\n    type: DotEndpoint.type,\n    options: {\n      radius: 12,\n      cssClass: 'plumb-source',\n      hoverClass: 'plumb-source-hover'\n    }\n  },\n  anchors: ['Bottom', 'Continuous'],\n  maxConnections: 1,\n  source: true,\n  dragAllowedWhenFull: false\n};\n\nexport const TARGET_DEFAULTS = {\n  endpoint: {\n    type: RectangleEndpoint.type,\n    options: {\n      width: 23,\n      height: 23,\n      cssClass: 'plumb-target',\n      hoverClass: 'plumb-target-hover'\n    }\n  },\n  anchor: {\n    type: 'Continuous',\n    options: {\n      faces: ['top', 'left', 'right'],\n      cssClass: 'continuos plumb-target-anchor'\n    }\n  },\n  deleteOnEmpty: true,\n  maxConnections: 1,\n  target: true\n};\n\nexport class Plumber {\n  private jsPlumb = null;\n  private pendingConnections = [];\n  private connectionListeners = new Map();\n  public connectionDragging = false;\n  private connectionWait = null;\n\n  constructor(canvas: HTMLElement) {\n    ready(() => {\n      this.jsPlumb = newInstance({\n        container: canvas,\n        connectionsDetachable: true,\n        endpointStyle: {\n          fill: 'green'\n        },\n        connector: CONNECTOR_DEFAULTS,\n        connectionOverlays: OVERLAYS_DEFAULTS\n      });\n\n      // Bind to connection events\n      this.jsPlumb.bind(EVENT_CONNECTION, (info) => {\n        this.connectionDragging = false;\n        this.notifyListeners(EVENT_CONNECTION, info);\n      });\n\n      // Bind to connection drag events\n      this.jsPlumb.bind(EVENT_CONNECTION_DRAG, (info) => {\n        this.connectionDragging = true;\n        this.notifyListeners(EVENT_CONNECTION_DRAG, info);\n      });\n\n      this.jsPlumb.bind(EVENT_CONNECTION_ABORT, (info) => {\n        this.connectionDragging = false;\n        this.notifyListeners(EVENT_CONNECTION_ABORT, info);\n      });\n\n      this.jsPlumb.bind(EVENT_CONNECTION_DETACHED, (info) => {\n        this.connectionDragging = false;\n        this.notifyListeners(EVENT_CONNECTION_DETACHED, info);\n      });\n\n      this.jsPlumb.bind(EVENT_REVERT, (info) => {\n        this.notifyListeners(EVENT_REVERT, info);\n      });\n\n      this.jsPlumb.bind(INTERCEPT_BEFORE_DROP, () => {\n        // we always deny automatic connections\n        return false;\n      });\n      this.jsPlumb.bind(INTERCEPT_BEFORE_DETACH, () => {});\n    });\n  }\n\n  private notifyListeners(eventName: string, info: any) {\n    const listeners = this.connectionListeners.get(eventName) || [];\n    listeners.forEach((listener) => listener(info));\n  }\n\n  public on(eventName: string, callback: (info: any) => void) {\n    if (!this.connectionListeners.has(eventName)) {\n      this.connectionListeners.set(eventName, []);\n    }\n    this.connectionListeners.get(eventName).push(callback);\n  }\n\n  public off(eventName: string, callback: (info: any) => void) {\n    if (!this.connectionListeners.has(eventName)) return;\n    const listeners = this.connectionListeners.get(eventName);\n    const index = listeners.indexOf(callback);\n    if (index !== -1) {\n      listeners.splice(index, 1);\n    }\n  }\n\n  public makeTarget(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);\n  }\n\n  public makeSource(uuid: string) {\n    const element = document.getElementById(uuid);\n    this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);\n  }\n\n  // we'll process our pending connections, but we want to debounce this\n  public processPendingConnections() {\n    // if we have a pending connection wait, clear it\n    if (this.connectionWait) {\n      clearTimeout(this.connectionWait);\n      this.connectionWait = null;\n    }\n\n    // debounce the connection processing\n    this.connectionWait = setTimeout(() => {\n      this.jsPlumb.batch(() => {\n        this.pendingConnections.forEach((connection) => {\n          const { scope, fromId, toId } = connection;\n          const fromElement = document.getElementById(fromId);\n          const toElement = document.getElementById(toId);\n\n          // delete any existing endpoints\n          this.jsPlumb.selectEndpoints({ source: fromId }).deleteAll();\n\n          const source = this.jsPlumb.addEndpoint(fromElement, {\n            ...SOURCE_DEFAULTS,\n            endpoint: {\n              ...SOURCE_DEFAULTS.endpoint,\n              options: {\n                ...SOURCE_DEFAULTS.endpoint.options,\n                cssClass: 'plumb-source connected'\n              }\n            }\n          });\n\n          const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);\n          this.jsPlumb.connect({\n            source,\n            target,\n            connector: {\n              ...CONNECTOR_DEFAULTS,\n              options: { ...CONNECTOR_DEFAULTS.options, gap: [0, 5] }\n            },\n            data: {\n              nodeId: scope\n            }\n          });\n        });\n        this.pendingConnections = [];\n      });\n    }, 50);\n  }\n\n  public connectIds(scope: string, fromId: string, toId: string) {\n    this.pendingConnections.push({ scope, fromId, toId });\n    this.processPendingConnections();\n  }\n\n  public repaintEverything() {\n    if (this.jsPlumb) {\n      this.jsPlumb.repaintEverything();\n    }\n  }\n\n  public revalidate(ids: string[]) {\n    if (!this.jsPlumb) return;\n    this.jsPlumb.batch(() => {\n      ids.forEach((id) => {\n        const element = document.getElementById(id);\n        if (element) {\n          this.jsPlumb.revalidate(element);\n        }\n      });\n    });\n  }\n\n  public removeNodeConnections(nodeId: string) {\n    if (!this.jsPlumb) return;\n\n    const inbound = this.jsPlumb.select({ target: nodeId });\n\n    // keep track of our source ids that are connected, we'll need new endpoints\n    const sourceIds = inbound.map((connection) => connection.sourceId);\n\n    const exitIds =\n      Array.from(\n        document.getElementById(nodeId)?.querySelectorAll('.exit') || []\n      ).map((exit) => {\n        return exit.id;\n      }) || [];\n\n    inbound.deleteAll();\n    this.jsPlumb.select({ source: exitIds }).deleteAll();\n    this.jsPlumb.selectEndpoints({ source: exitIds }).deleteAll();\n\n    // Recreate source endpoints for each source\n    sourceIds.forEach((exitId) => {\n      this.makeSource(exitId);\n    });\n  }\n\n  public removeExitConnection(exitId: string) {\n    if (!this.jsPlumb) return;\n\n    const exitElement = document.getElementById(exitId);\n    if (!exitElement) return;\n\n    // Get all connections from this exit\n    const connections = this.jsPlumb.getConnections({ source: exitElement });\n\n    // Remove the connections\n    connections.forEach((connection) => {\n      this.jsPlumb.deleteConnection(connection);\n    });\n\n    // Re-create the source endpoint (now without connection)\n    this.jsPlumb.removeAllEndpoints(exitElement);\n    this.makeSource(exitId);\n\n    return connections.length > 0;\n  }\n\n  /**\n   * Set the removing state for an exit's connection\n   * @param exitId The ID of the exit whose connections should be marked as removing\n   * @returns true if connections were found and updated, false otherwise\n   */\n  public setConnectionRemovingState(\n    exitId: string,\n    isRemoving: boolean\n  ): boolean {\n    if (!this.jsPlumb) return false;\n\n    const exitElement = document.getElementById(exitId);\n    if (!exitElement) return false;\n\n    // Get all connections from this exit\n    const connections = this.jsPlumb.getConnections({ source: exitElement });\n\n    if (connections.length === 0) return false;\n\n    // Update the connections' CSS classes\n    connections.forEach((connection) => {\n      if (isRemoving) {\n        connection.addClass('removing');\n      } else {\n        connection.removeClass('removing');\n      }\n    });\n\n    return true;\n  }\n}\n"]}