hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/tree_controller.js

@@ -0,0 +1,708 @@
+import RegistryController from "../base/registry_controller.js"
+import Sortable from "sortablejs"
+
+export default class extends RegistryController {
+  static targets = ["node", "children", "checkbox", "switcher", "title", "searchInput", "list", "nodeTemplate", "indent"]
+  static values = {
+    checkable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    defaultExpandKeys: { type: Array, default: [] },
+    defaultSelectedKeys: { type: Array, default: [] },
+    defaultCheckedKeys: { type: Array, default: [] },
+    expandedKeys: Array,
+    selectedKeys: Array,
+    checkedKeys: Array,
+    showLine: { type: Boolean, default: false },
+    switcherIcon: { type: String, default: "" },
+    icon: { type: String, default: "" },
+    directory: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: false },
+    blockNode: { type: Boolean, default: false },
+    searchable: { type: Boolean, default: false },
+    height: Number,
+    checkStrictly: { type: Boolean, default: false }
+  }
+
+  setup() {
+    this.nodeMap = new Map()
+    this.sortables = new Map()
+    this.searching = false
+    this.previousExpandedKeys = null
+
+    this.expandedKeys = new Set(this.hasExpandedKeysValue ? this.expandedKeysValue : this.defaultExpandKeysValue)
+    this.selectedKeys = new Set(this.hasSelectedKeysValue ? this.selectedKeysValue : this.defaultSelectedKeysValue)
+    this.checkedKeys = new Set(this.hasCheckedKeysValue ? this.checkedKeysValue : this.defaultCheckedKeysValue)
+    this.halfCheckedKeys = new Set()
+
+    this.buildNodeMap()
+    this.applyExpandedStates()
+    this.applySelectedStates()
+    this.applyCheckedStates(true)
+
+    if (this.draggableValue) {
+      this.setupSortables()
+    }
+  }
+
+  teardown() {
+    this.destroySortables()
+  }
+
+  disconnect() {
+    delete this.element.hakumiTree
+    super.disconnect()
+  }
+
+  registerApi() {
+    const api = {
+      getSelectedKeys: () => Array.from(this.selectedKeys),
+      setSelectedKeys: (keys) => this.setSelectedKeys(keys),
+      getCheckedKeys: () => Array.from(this.checkedKeys),
+      setCheckedKeys: (keys) => this.setCheckedKeys(keys),
+      getHalfCheckedKeys: () => Array.from(this.halfCheckedKeys),
+      getExpandedKeys: () => Array.from(this.expandedKeys),
+      setExpandedKeys: (keys) => this.setExpandedKeys(keys),
+      expandAll: () => this.expandAll(),
+      collapseAll: () => this.collapseAll(),
+      toggleNode: (key) => this.toggleNodeByKey(key),
+      selectNode: (key, options = {}) => this.selectNodeByKey(key, options),
+      checkNode: (key, checked = true) => this.checkNodeByKey(key, checked),
+      addNodes: (parentKey, nodes) => this.addNodes(parentKey, nodes),
+      setLoading: (key, loading) => this.setLoading(key, loading),
+      setError: (key, error = true) => this.setError(key, error)
+    }
+
+    this.element.hakumiComponent = {
+      name: "tree",
+      version: 1,
+      singleton: false,
+      api
+    }
+
+    this.element.hakumiTree = api
+  }
+
+  buildNodeMap() {
+    this.nodeMap.clear()
+
+    this.nodeTargets.forEach((node) => {
+      const key = node.dataset.key
+      const parentKey = node.dataset.parentKey || null
+      this.nodeMap.set(key, { element: node, key, parentKey, children: [] })
+    })
+
+    this.nodeMap.forEach((node) => {
+      if (node.parentKey && this.nodeMap.has(node.parentKey)) {
+        this.nodeMap.get(node.parentKey).children.push(node.key)
+      }
+    })
+  }
+
+  applyExpandedStates() {
+    this.nodeMap.forEach((node) => {
+      const expanded = this.expandedKeys.has(node.key)
+      node.element.classList.toggle("hakumi-tree-node-expanded", expanded)
+
+      if (node.element.dataset.leaf === "true") {
+        node.element.removeAttribute("aria-expanded")
+      } else {
+        node.element.setAttribute("aria-expanded", expanded)
+      }
+    })
+  }
+
+  applySelectedStates() {
+    this.nodeMap.forEach((node) => {
+      const selected = this.selectedKeys.has(node.key)
+      node.element.classList.toggle("hakumi-tree-node-selected", selected)
+      node.element.setAttribute("aria-selected", selected)
+    })
+  }
+
+  applyCheckedStates(includeCascade = false) {
+    if (!this.checkableValue) return
+
+    if (!this.checkStrictlyValue && includeCascade) {
+      const cascadeChecked = new Set(this.checkedKeys)
+      this.checkedKeys.forEach((key) => {
+        this.getDescendants(key).forEach((childKey) => cascadeChecked.add(childKey))
+      })
+      this.checkedKeys = cascadeChecked
+      this.updateAncestorsFromChecked()
+    }
+
+    this.nodeMap.forEach((node) => {
+      const checked = this.checkedKeys.has(node.key)
+      const half = this.halfCheckedKeys.has(node.key)
+
+      node.element.classList.toggle("hakumi-tree-node-checked", checked)
+      node.element.classList.toggle("hakumi-tree-node-half-checked", half)
+
+      const checkbox = node.element.querySelector(".hakumi-tree-checkbox")
+      if (checkbox) {
+        checkbox.setAttribute("aria-checked", half ? "mixed" : String(checked))
+        checkbox.classList.toggle("hakumi-tree-checkbox-checked", checked)
+        checkbox.classList.toggle("hakumi-tree-checkbox-indeterminate", half)
+      }
+    })
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const node = this.closestNode(event)
+    if (!node || node.dataset.leaf === "true") return
+    this.toggleNodeByKey(node.dataset.key)
+  }
+
+  select(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const node = this.closestNode(event)
+    if (!node) return
+
+    const key = node.dataset.key
+    const selectable = node.dataset.selectable !== "false"
+    const disabled = node.dataset.disabled === "true" || this.disabledValue
+
+    if (!this.selectableValue || !selectable || disabled) return
+
+    const options = {
+      multiple: this.multipleValue || (this.directoryValue && (event.metaKey || event.ctrlKey))
+    }
+
+    this.selectNodeByKey(key, options)
+  }
+
+  toggleCheck(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const node = this.closestNode(event)
+    if (!node) return
+
+    const key = node.dataset.key
+    const disabled = node.dataset.disabled === "true" || this.disabledValue
+    const checkboxDisabled = event.currentTarget.dataset.disabled === "true"
+
+    if (disabled || checkboxDisabled) return
+
+    const shouldCheck = !this.checkedKeys.has(key)
+    this.checkNodeByKey(key, shouldCheck)
+  }
+
+  toggleNodeByKey(key) {
+    if (this.expandedKeys.has(key)) {
+      this.expandedKeys.delete(key)
+    } else {
+      this.expandedKeys.add(key)
+      this.maybeLoadAsync(key)
+    }
+
+    this.applyExpandedStates()
+    this.dispatch("expand", { detail: { expandedKeys: Array.from(this.expandedKeys), key } })
+  }
+
+  selectNodeByKey(key, options = {}) {
+    if (!options.multiple) {
+      this.selectedKeys.clear()
+    }
+
+    if (this.selectedKeys.has(key) && options.multiple) {
+      this.selectedKeys.delete(key)
+    } else {
+      this.selectedKeys.add(key)
+    }
+
+    this.applySelectedStates()
+    this.dispatch("select", { detail: { selectedKeys: Array.from(this.selectedKeys), key } })
+  }
+
+  checkNodeByKey(key, checked = true) {
+    if (this.checkStrictlyValue) {
+      if (checked) {
+        this.checkedKeys.add(key)
+      } else {
+        this.checkedKeys.delete(key)
+      }
+      this.halfCheckedKeys.delete(key)
+    } else {
+      this.toggleCheckedCascade(key, checked)
+    }
+
+    this.applyCheckedStates()
+
+    this.dispatch("check", {
+      detail: {
+        checkedKeys: Array.from(this.checkedKeys),
+        halfCheckedKeys: Array.from(this.halfCheckedKeys),
+        key,
+        checked
+      }
+    })
+  }
+
+  toggleCheckedCascade(key, checked) {
+    const descendants = this.getDescendants(key)
+
+    if (checked) {
+      this.checkedKeys.add(key)
+      descendants.forEach((childKey) => this.checkedKeys.add(childKey))
+    } else {
+      this.checkedKeys.delete(key)
+      descendants.forEach((childKey) => this.checkedKeys.delete(childKey))
+    }
+
+    this.halfCheckedKeys.clear()
+    this.updateAncestorsFromChecked()
+  }
+
+  updateAncestorsFromChecked() {
+    const nodesByDepth = Array.from(this.nodeMap.values()).sort((a, b) => {
+      const aLevel = parseInt(a.element.dataset.level || "0", 10)
+      const bLevel = parseInt(b.element.dataset.level || "0", 10)
+      return bLevel - aLevel
+    })
+
+    nodesByDepth.forEach((node) => {
+      if (!node.children.length) return
+
+      const allChecked = node.children.every((childKey) => this.checkedKeys.has(childKey))
+      const someChecked = node.children.some((childKey) => this.checkedKeys.has(childKey) || this.halfCheckedKeys.has(childKey))
+
+      if (allChecked) {
+        this.checkedKeys.add(node.key)
+        this.halfCheckedKeys.delete(node.key)
+      } else if (someChecked) {
+        this.checkedKeys.delete(node.key)
+        this.halfCheckedKeys.add(node.key)
+      } else {
+        this.checkedKeys.delete(node.key)
+        this.halfCheckedKeys.delete(node.key)
+      }
+    })
+  }
+
+  setSelectedKeys(keys) {
+    this.selectedKeys = new Set(keys || [])
+    this.applySelectedStates()
+  }
+
+  setCheckedKeys(keys) {
+    this.checkedKeys = new Set(keys || [])
+    this.halfCheckedKeys.clear()
+    this.applyCheckedStates(true)
+  }
+
+  setExpandedKeys(keys) {
+    this.expandedKeys = new Set(keys || [])
+    this.applyExpandedStates()
+  }
+
+  expandAll() {
+    this.nodeMap.forEach((node) => {
+      if (node.element.dataset.leaf !== "true") {
+        this.expandedKeys.add(node.key)
+      }
+    })
+    this.applyExpandedStates()
+  }
+
+  collapseAll() {
+    this.expandedKeys.clear()
+    this.applyExpandedStates()
+  }
+
+  getDescendants(key) {
+    const node = this.nodeMap.get(key)
+    if (!node) return []
+
+    const descendants = []
+    const walk = (nodeKey) => {
+      const entry = this.nodeMap.get(nodeKey)
+      if (!entry) return
+      entry.children.forEach((childKey) => {
+        descendants.push(childKey)
+        walk(childKey)
+      })
+    }
+    walk(key)
+    return descendants
+  }
+
+  maybeLoadAsync(key) {
+    const node = this.nodeMap.get(key)
+    if (!node) return
+
+    const isAsync = node.element.dataset.async === "true"
+    const hasChildren = node.element.querySelector(".hakumi-tree-children")
+
+    if (!isAsync || hasChildren) return
+
+    this.setLoading(key, true)
+    this.dispatch("load", { detail: { key, node: node.element } })
+  }
+
+  setLoading(key, loading) {
+    const node = this.nodeMap.get(key)
+    if (!node) return
+
+    node.element.dataset.loading = loading ? "true" : "false"
+    node.element.classList.toggle("hakumi-tree-node-loading", loading)
+
+
+    if (loading) {
+      this.setError(key, false)
+    }
+
+
+    const switcher = node.element.querySelector(".hakumi-tree-switcher")
+    if (!switcher) return
+
+    if (loading) {
+
+      const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
+      if (switcherIcon) {
+        switcherIcon.style.display = "none"
+      }
+
+
+      if (!switcher.querySelector(".hakumi-tree-loading-icon")) {
+        const loadingIcon = document.createElement("span")
+        loadingIcon.className = "hakumi-tree-loading-icon"
+        loadingIcon.innerHTML = `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+          <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"/>
+        </svg>`
+        switcher.appendChild(loadingIcon)
+      }
+    } else {
+
+      const switcherIcon = switcher.querySelector(".hakumi-tree-switcher-icon")
+      if (switcherIcon) {
+        switcherIcon.style.display = ""
+      }
+
+
+      const loadingIcon = switcher.querySelector(".hakumi-tree-loading-icon")
+      if (loadingIcon) {
+        loadingIcon.remove()
+      }
+    }
+  }
+
+  setError(key, error = true) {
+    const node = this.nodeMap.get(key)
+    if (!node) return
+
+    node.element.dataset.error = error ? "true" : "false"
+    node.element.classList.toggle("hakumi-tree-node-error", error)
+
+
+    if (error) {
+      this.setLoading(key, false)
+    }
+  }
+
+  markAsLeaf(key) {
+    const node = this.nodeMap.get(key)
+    if (!node) return
+
+    node.element.dataset.leaf = "true"
+    node.element.dataset.async = "false"
+    node.element.classList.add("hakumi-tree-node-leaf")
+    node.element.removeAttribute("aria-expanded")
+
+    const switcher = node.element.querySelector(".hakumi-tree-switcher")
+    if (switcher) {
+      switcher.classList.add("hakumi-tree-switcher-leaf")
+      switcher.removeAttribute("data-action")
+      switcher.innerHTML = '<span class="hakumi-tree-switcher-noop"></span>'
+    }
+  }
+
+  addNodes(parentKey, nodes) {
+
+    if (!nodes || nodes.length === 0) {
+      this.markAsLeaf(parentKey)
+      this.setLoading(parentKey, false)
+      return
+    }
+
+    const parent = this.nodeMap.get(parentKey)
+    if (!parent) return
+
+    if (parent.element.dataset.leaf === "true") {
+      parent.element.dataset.leaf = "false"
+      parent.element.classList.remove("hakumi-tree-node-leaf")
+      const switcher = parent.element.querySelector(".hakumi-tree-switcher")
+      if (switcher) {
+        switcher.classList.remove("hakumi-tree-switcher-leaf")
+        switcher.dataset.action = "click->hakumi--tree#toggle"
+        if (switcher && !switcher.querySelector(".hakumi-tree-switcher-icon")) {
+
+
+
+
+
+
+
+
+          const tmpl = this.nodeTemplateTarget.content.cloneNode(true)
+          const tmplSwitcher = tmpl.querySelector(".hakumi-tree-switcher")
+          const tmplIcon = tmplSwitcher.querySelector(".hakumi-tree-switcher-icon")
+          if (tmplIcon) switcher.appendChild(tmplIcon.cloneNode(true))
+        }
+      }
+    }
+
+    let container = parent.element.querySelector(".hakumi-tree-children")
+    if (!container) {
+      container = document.createElement("div")
+      container.className = "hakumi-tree-children"
+      container.setAttribute("role", "group")
+      container.dataset.hakumiTreeTarget = "children"
+      parent.element.appendChild(container)
+    }
+
+    const parentLevel = parseInt(parent.element.dataset.level || "0", 10)
+    nodes.forEach((node, index) => {
+      const hasNext = index < nodes.length - 1
+      const nodeElement = this.createNodeElement(node, parentLevel + 1, parentKey, hasNext)
+      container.appendChild(nodeElement)
+    })
+
+    this.buildNodeMap()
+    this.applyExpandedStates()
+    this.applySelectedStates()
+    this.applyCheckedStates(true)
+    if (this.draggableValue) this.setupSortables()
+  }
+
+  createNodeElement(node, level, parentKey, hasNext = false) {
+    const key = String(node.key)
+    const title = node.title || node.key
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0
+    const isLeaf = node.is_leaf === true || (!hasChildren && !node.async)
+
+
+    const clone = this.nodeTemplateTarget.content.cloneNode(true)
+
+    const wrapper = clone.querySelector(".hakumi-tree-node")
+
+
+    wrapper.dataset.key = key
+    wrapper.dataset.parentKey = parentKey
+    wrapper.dataset.level = String(level)
+    wrapper.dataset.title = title
+    wrapper.dataset.selectable = node.selectable === false ? "false" : "true"
+    wrapper.dataset.checkable = node.checkable === false ? "false" : "true"
+    wrapper.dataset.disabled = node.disabled ? "true" : "false"
+    wrapper.dataset.leaf = isLeaf ? "true" : "false"
+    wrapper.dataset.async = node.async ? "true" : "false"
+    wrapper.dataset.hasNext = hasNext ? "true" : "false"
+    wrapper.setAttribute("aria-selected", "false")
+
+
+    const indentContainer = wrapper.querySelector(".hakumi-tree-indent")
+    if (indentContainer) {
+      if (parentKey && this.nodeMap.has(parentKey)) {
+        const parent = this.nodeMap.get(parentKey)
+        const parentIndent = parent.element.querySelector(".hakumi-tree-indent")
+        if (parentIndent) {
+          Array.from(parentIndent.children).forEach((u) => {
+            indentContainer.appendChild(u.cloneNode(true))
+          })
+        }
+
+        const unit = document.createElement("span")
+        unit.className = "hakumi-tree-indent-unit"
+        if (parent.element.dataset.hasNext === "true") {
+          unit.classList.add("hakumi-tree-indent-unit-active")
+        }
+        indentContainer.appendChild(unit)
+      } else {
+
+
+        for (let i = 0; i < level; i++) {
+          const unit = document.createElement("span")
+          unit.className = "hakumi-tree-indent-unit"
+          indentContainer.appendChild(unit)
+        }
+      }
+    }
+
+
+    const switcher = wrapper.querySelector(".hakumi-tree-switcher")
+    if (switcher) {
+      switcher.dataset.key = key
+      if (isLeaf) {
+        switcher.classList.add("hakumi-tree-switcher-leaf")
+
+        switcher.removeAttribute("data-action")
+
+        switcher.innerHTML = '<span class="hakumi-tree-switcher-noop"></span>'
+      } else {
+        switcher.dataset.action = "click->hakumi--tree#toggle"
+      }
+    }
+
+
+    const checkbox = wrapper.querySelector(".hakumi-tree-checkbox")
+    if (checkbox) {
+      if (this.checkableValue && node.checkable !== false) {
+        checkbox.dataset.action = "click->hakumi--tree#toggleCheck"
+        checkbox.dataset.key = key
+      } else {
+        checkbox.remove()
+      }
+    }
+
+
+    const titleButton = wrapper.querySelector(".hakumi-tree-title")
+    if (titleButton) {
+      titleButton.dataset.action = "click->hakumi--tree#select"
+      titleButton.dataset.key = key
+      const titleText = titleButton.querySelector(".hakumi-tree-title-text")
+      if (titleText) {
+        titleText.dataset.title = title
+        titleText.textContent = title
+      }
+
+
+
+    }
+
+
+    if (hasChildren) {
+      const childrenContainer = wrapper.querySelector(".hakumi-tree-children")
+      if (childrenContainer) {
+        node.children.forEach((child, index) => {
+          const childHasNext = index < node.children.length - 1
+          childrenContainer.appendChild(this.createNodeElement(child, level + 1, key, childHasNext))
+        })
+      }
+    }
+
+    return wrapper
+  }
+
+  setupSortables() {
+    this.destroySortables()
+
+    const containers = new Set()
+    if (this.hasListTarget) {
+      containers.add(this.listTarget)
+    }
+    this.childrenTargets.forEach((child) => containers.add(child))
+
+    containers.forEach((container) => {
+      const sortable = Sortable.create(container, {
+        animation: 150,
+        group: "hakumi-tree",
+        draggable: ".hakumi-tree-node",
+        handle: ".hakumi-tree-node-content",
+        ghostClass: "hakumi-tree-node-ghost",
+        chosenClass: "hakumi-tree-node-chosen",
+        dragClass: "hakumi-tree-node-drag",
+        onEnd: (evt) => {
+          const item = evt.item
+          const parentNode = item.closest(".hakumi-tree-node")
+          const parentKey = parentNode ? parentNode.dataset.key : null
+          item.dataset.parentKey = parentKey || ""
+          this.buildNodeMap()
+          this.dispatch("dragEnd", {
+            detail: {
+              key: item.dataset.key,
+              parentKey,
+              oldIndex: evt.oldIndex,
+              newIndex: evt.newIndex
+            }
+          })
+        }
+      })
+
+      this.sortables.set(container, sortable)
+    })
+  }
+
+  destroySortables() {
+    this.sortables.forEach((sortable) => sortable.destroy())
+    this.sortables.clear()
+  }
+
+  search(event) {
+    const query = event.target.value || ""
+    this.applySearch(query)
+  }
+
+  applySearch(query) {
+    const term = query.trim().toLowerCase()
+
+    if (!term) {
+      if (this.searching && this.previousExpandedKeys) {
+        this.expandedKeys = new Set(this.previousExpandedKeys)
+      }
+      this.searching = false
+      this.previousExpandedKeys = null
+      this.nodeMap.forEach((node) => {
+        node.element.classList.remove("hakumi-tree-node-hidden")
+        const titleEl = node.element.querySelector(".hakumi-tree-title-text")
+        if (titleEl) titleEl.textContent = titleEl.dataset.title || ""
+      })
+      this.applyExpandedStates()
+      return
+    }
+
+    if (!this.searching) {
+      this.previousExpandedKeys = new Set(this.expandedKeys)
+      this.searching = true
+    }
+
+    const matches = new Set()
+    this.nodeMap.forEach((node) => {
+      const title = (node.element.dataset.title || "").toLowerCase()
+      if (title.includes(term)) {
+        matches.add(node.key)
+        let parentKey = node.parentKey
+        while (parentKey) {
+          matches.add(parentKey)
+          const parent = this.nodeMap.get(parentKey)
+          parentKey = parent ? parent.parentKey : null
+        }
+      }
+    })
+
+    this.nodeMap.forEach((node) => {
+      const shouldShow = matches.has(node.key)
+      node.element.classList.toggle("hakumi-tree-node-hidden", !shouldShow)
+
+      const titleEl = node.element.querySelector(".hakumi-tree-title-text")
+      if (!titleEl) return
+      const original = titleEl.dataset.title || ""
+      const lower = original.toLowerCase()
+      const index = lower.indexOf(term)
+      if (index >= 0) {
+        const before = original.slice(0, index)
+        const match = original.slice(index, index + term.length)
+        const after = original.slice(index + term.length)
+        titleEl.innerHTML = `${before}<span class="hakumi-tree-title-highlight">${match}</span>${after}`
+      } else {
+        titleEl.textContent = original
+      }
+    })
+
+    matches.forEach((key) => {
+      const node = this.nodeMap.get(key)
+      if (node && node.element.dataset.leaf !== "true") {
+        this.expandedKeys.add(node.key)
+      }
+    })
+
+    this.applyExpandedStates()
+  }
+
+  closestNode(event) {
+    return event.currentTarget.closest(".hakumi-tree-node")
+  }
+}