@3t-transform/threeteeui 1.9.56 → 1.9.57

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js

@@ -1,9 +1,70 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Fragment } from '@stencil/core';
+import { h, Fragment, getAssetPath } from '@stencil/core';
 import * as DOMPurify from 'dompurify';
 import domSanitiserOptions from '../../../shared/domsanitiser.options';
 export class TttxTreeView {
   constructor() {
+    this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
+    this.dragGhost = {
+      el: null,
+    };
+    this.createGhostImage = (label) => {
+      const ghost = document.createElement('div');
+      ghost.textContent = label;
+      Object.assign(ghost.style, {
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+        padding: '6px 20px',
+        background: 'white',
+        border: '1px solid #ccc',
+        fontSize: '14px',
+        pointerEvents: 'none',
+      });
+      document.body.appendChild(ghost);
+      setTimeout(() => document.body.removeChild(ghost), 0);
+      return ghost;
+    };
+    this.handleDragStart = (event, node, index, parentId) => {
+      if (!event.dataTransfer)
+        return;
+      this.draggedNodeParentId = parentId;
+      const payload = JSON.stringify({ parentId, index, node });
+      event.dataTransfer.setData('text/plain', payload);
+      const ghostImg = this.createGhostImage(node.title);
+      this.dragGhost.el = ghostImg;
+      event.dataTransfer.setDragImage(ghostImg, 0, 0);
+    };
+    this.handleDragDrop = (event, node, targetIndex, parentId) => {
+      var _a;
+      event.preventDefault();
+      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+      if (!nodeData)
+        return;
+      const { parentId: sourceParentId, index: sourceParentIndex, node: sourceNode } = JSON.parse(nodeData);
+      if (node.id === sourceNode.id || sourceParentId !== parentId)
+        return;
+      const updatedTree = [...this.treeData];
+      const parent = this.findNodeById(updatedTree, parentId);
+      const children = [...parent.child];
+      const [moved] = children.splice(sourceParentIndex, 1);
+      children.splice(targetIndex, 0, moved);
+      parent.child = children;
+      this.treeData = updatedTree;
+      this.draggedNodeParentId = undefined;
+      if (this.dragGhost.el) {
+        this.dragGhost.el.remove();
+        this.dragGhost.el = null;
+      }
+      this.moveNode.emit(this.treeData);
+    };
+    this.handleDragOver = (event, parentId) => {
+      event.preventDefault();
+      if (!event.dataTransfer)
+        return;
+      const validDrag = this.draggedNodeParentId === parentId;
+      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
+    };
     this.data = undefined;
     this.treeData = undefined;
   }
@@ -53,25 +114,23 @@ export class TttxTreeView {
    */
   updateParentCheckStatus(parent = undefined, children = undefined) {
     if (parent === undefined) {
-      this.treeData.map((node) => this.updateParentCheckStatus(node, node.child));
+      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
       return;
     }
     let childrenCheckedStatuses = [];
     // set status relative to children if we have some
     if (children && children.length > 0) {
-      childrenCheckedStatuses = children
-        .map((node) => this.updateParentCheckStatus(node, node.child))
-        .flat(1);
+      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
       // parent checked if any children are checked
-      if (childrenCheckedStatuses.some((checked) => checked)) {
+      if (childrenCheckedStatuses.some(checked => checked)) {
         parent.checked = true;
       }
       // parent unchecked if all children are unchecked
-      if (childrenCheckedStatuses.every((checked) => !checked)) {
+      if (childrenCheckedStatuses.every(checked => !checked)) {
         parent.checked = false;
       }
     }
-    // return the gathered checked statuses so nodes above can make check choices 
+    // return the gathered checked statuses so nodes above can make check choices
     return [...childrenCheckedStatuses, parent.checked];
   }
   treeConfigs(node) {
@@ -89,35 +148,48 @@ export class TttxTreeView {
     const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
     return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
   }
-  renderNode(node) {
+  findNodeById(nodes, id) {
+    for (const node of nodes) {
+      if (node.id === id)
+        return node;
+      if (node.child) {
+        const found = this.findNodeById(node.child, id);
+        if (found)
+          return found;
+      }
+    }
+    return undefined;
+  }
+  renderNode(node, index, parentId = undefined) {
+    var _a, _b;
     const options = this.treeConfigs(node);
     if (node.child) {
-      return (h(Fragment, null, h("li", { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
+      return (h(Fragment, null, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }, h("tttx-button_1_9_56", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor)), node.isOpen ? (h("li", null, h("ul", null, node.child.map(childNode => {
-        return this.renderNode(childNode);
+        } }), h("tttx-button_1_9_57", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
+        return this.renderNode(childNode, index, node.id);
       })))) : null));
     }
     else {
-      return (h("li", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
+      return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }, this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor)));
+        } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
     }
   }
-  htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button_1_9_56", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_56", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
+  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
+    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_57", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_57", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
     return htmlcode;
   }
   render() {
     if (!this.data)
       return;
-    return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node) => this.renderNode(node)))));
+    return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
   }
-  static get is() { return "tttx-tree-view_1_9_56"; }
+  static get is() { return "tttx-tree-view_1_9_57"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -219,6 +291,27 @@ export class TttxTreeView {
             }
           }
         }
+      }, {
+        "method": "moveNode",
+        "name": "moveNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
       }];
   }
+  static get elementRef() { return "el"; }
 }