@lvce-editor/server 0.0.2

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/TreeProviderJson.js

@@ -0,0 +1,136 @@
+const json = [
+  {
+    name: 'abc',
+  },
+  [
+    {
+      name: 'def',
+    },
+  ],
+]
+
+const isArray = (node) => Array.isArray(node)
+const isObject = (node) => typeof node === 'object'
+const isNull = (node) => node === null
+const isNumber = (node) => typeof node === 'number'
+const isBoolean = (node) => typeof node === 'bigint'
+const isString = (node) => typeof node === 'string'
+
+const EMPTY_ARRAY = []
+
+const parseArray = (node) => {
+  return {
+    type: 'array',
+    children: node.map(parse),
+  }
+}
+
+const parseNull = (node) => {
+  return {
+    type: 'null',
+  }
+}
+
+const parseBoolean = (node) => {
+  return {
+    type: 'boolean',
+    value: node,
+  }
+}
+
+const parseString = (node) => {
+  return {
+    type: 'string',
+    value: node,
+  }
+}
+
+const parseNumber = (node) => {
+  return {
+    type: 'number',
+    value: node,
+  }
+}
+
+const parseObjectKey = (key) => {
+  return {
+    type: 'propertyKey',
+    key,
+  }
+}
+
+const parseObjectProperty = ([key, value]) => {
+  return {
+    type: 'property',
+    key: parseObjectKey(key),
+    value: parse(value),
+  }
+}
+
+const parseObject = (node) => {
+  return {
+    type: 'object',
+    children: Object.entries(node).map(parseObjectProperty),
+  }
+}
+
+const parse = (node) => {
+  if (isArray(node)) {
+    return parseArray(node)
+  }
+  if (isObject(node)) {
+    return parseObject(node)
+  }
+  if (isNull(node)) {
+    return parseNull(node)
+  }
+  if (isBoolean(node)) {
+    return parseBoolean(node)
+  }
+  if (isString(node)) {
+    return parseString(node)
+  }
+  if (isNumber(node)) {
+    return parseNumber(node)
+  }
+}
+
+parse(json) // ?
+export {}
+
+// const getChildren = (node) => {
+//   switch (node.type) {
+//     case 'array':
+//       return node.children
+//     case 'object':
+//       return Object.values(node)
+//   }
+// }
+// export const create = (state) => {}
+
+// export const getChildren = (node) => {
+//   if (isArray(node)) {
+//   } else if (isObject(node)) {
+//   }
+//   // if()
+//   const keys = Object.keys(node)
+//   if (Array.isArray(node)) {
+//     return {
+//       expandable: true,
+//       children: node,
+//     }
+//   }
+// }
+
+// export const getLabel = (node) => {
+//   switch (node.type) {
+//     case 'array':
+//       return '[]'
+//     case 'object':
+//       return '{}'
+//     default:
+//       return node.value
+//   }
+// }
+
+// export const abc = {}

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/TreeView.js

@@ -0,0 +1,296 @@
+import { findIndex } from '../../shared/findIndex.js'
+import * as Main from '../Main/Main.js'
+import * as Renderer from '../Renderer/Renderer.js'
+import * as RendererTree from '../Renderer/RendererTree.js'
+import * as Context from '../Context/Context.js'
+import * as Command from '../Command/Command.js'
+
+// class Dirent {
+//   constructor(name, type) {
+//     this.name = name
+//     this.type = type
+//   }
+// }
+
+// class File extends Dirent {
+//   constructor(name) {
+//     super(name, 1)
+//   }
+// }
+
+// class Directory extends Dirent {
+//   constructor(name) {
+//     super(name, 2)
+//     this.children = []
+//   }
+
+//   addChild(child) {
+//     this.children.push(child)
+//   }
+
+//   removeChild(child) {
+//     const index = this.children.indexOf(child)
+//     this.children.splice(index, 1)
+//   }
+
+//   getChild(index) {
+//     return this.children[index]
+//   }
+// }
+
+// const root = {
+//   type: 'directory',
+//   name: '',
+//   children: [],
+// }
+
+// root.children.push({
+//   type: 'file',
+//   name: 'abc.txt',
+//   children: [],
+// })
+
+// root.addChild(new Directory('b.txt'))
+
+const getAbsolutePath = (dirent) => {
+  if (!dirent) {
+    return ''
+  }
+  return getAbsolutePath(dirent.parent) + '/' + dirent.name
+}
+
+let activeTreeView
+
+const toTreeItem = (level) => (dirent) => ({
+  name: dirent.name,
+  level,
+  type: dirent.type,
+  children: [],
+  expanded: false,
+})
+
+export const create = (props) => {
+  let $Focused
+
+  const state = {
+    root: props.root,
+    items: [],
+    activeIndex: -1,
+    state: 'default', // default | loading | disposed
+  }
+
+  const internal = {
+    focusNext() {},
+    focusPrevious() {},
+    focusNextPage() {},
+    focusPreviousPage() {},
+    focusFirst() {},
+    focusLast() {},
+    focusNth() {},
+  }
+
+  // const focus = (element) => {
+  // if (activeElement) {
+  //   activeElement.removeAttribute('data-focused')
+  // }
+  // activeElement = element
+  // activeElement.dataset.focused = 'true'
+  // }
+
+  const focus = ($Element) => {
+    if ($Focused === $Element) {
+      return
+    }
+    if ($Focused) {
+      $Focused.classList.remove('Focused')
+    }
+    $Focused = $Element
+    $Element.classList.add('Focused')
+  }
+
+  const handleMouseDown = async (event) => {
+    if (event.button !== 0) {
+      return
+    }
+    const $Target = event.target
+    const index = findIndex($Viewlet, $Target)
+    if (index === -1) {
+      return
+    }
+    focus($Viewlet.children[index])
+    const dirent = state.items[index]
+    switch (dirent.type) {
+      case 'file':
+        props.handleClick(dirent)
+        break
+      case 'directory':
+        // dirent.expanded = !dirent.expanded
+        if (dirent.expanded) {
+          let endIndex = index
+          while (++endIndex < state.items.length) {
+            if (state.items[endIndex].level === dirent.level) {
+              break
+            }
+          }
+          state.items.splice(index + 1, endIndex - index)
+          // TODO only update from index of dirent
+          Renderer.render($Viewlet, RendererTree, state.items)
+        } else {
+          state.state = 'loading'
+          // TODO cancel this if tree is disposed
+          const newChildren = await props.getChildren(
+            `${state.root}/${dirent.name}`
+          )
+
+          const treeItems = newChildren.map(toTreeItem(dirent.level + 1))
+          state.items.splice(index + 1, 0, ...treeItems)
+
+          // TODO only update from index of dirent
+          Renderer.render($Viewlet, RendererTree, state.items)
+
+          // $Viewlet.insertBefore(fragment, $Viewlet.children[index + 1])
+          // if (state.state === 'disposed') {
+          //   return
+          // }
+          // state.items = newChildren.map(toTreeItem(1))
+          // state.state = 'default'
+        }
+        dirent.expanded = !dirent.expanded
+        // @ts-ignore
+        $Viewlet.children[index].ariaExpanded = dirent.expanded
+
+        break
+      default:
+        break
+    }
+    // focus(event.target)
+  }
+
+  const handleKeyDown = (event) => {
+    // if (!activeElement) {
+    //   return
+    // }
+    // switch (event.key) {
+    //   case 'ArrowUp':
+    //     if (activeElement.previousSibling) {
+    //       focus(activeElement.previousSibling)
+    //     }
+    //     break
+    //   case 'ArrowDown':
+    //     if (activeElement.nextSibling) {
+    //       focus(activeElement.nextSibling)
+    //     }
+    //     break
+    //   case ' ':
+    //   case 'Enter':
+    //     handleClick(activeElement)
+    //   default:
+    //     break
+    // }
+  }
+
+  const handleContextMenu = (event) => {
+    event.preventDefault()
+    const $Target = event.target
+    const index = findIndex($Viewlet, $Target)
+    if (index === -1) {
+      return
+    }
+    props.handleContextMenu(state.items[index], event.clientX, event.clientY)
+  }
+
+  const handleFocus = () => {
+    Context.setFocus('tree')
+  }
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.className = 'ListItems Viewlet'
+  $Viewlet.tabIndex = 0
+  $Viewlet.dataset.viewletId = 'Explorer'
+  $Viewlet.setAttribute('role', 'tree')
+  $Viewlet.ariaLabel = 'Files Explorer'
+  $Viewlet.addEventListener('keydown', handleKeyDown)
+  $Viewlet.addEventListener('mousedown', handleMouseDown)
+  $Viewlet.addEventListener('contextmenu', handleContextMenu)
+  $Viewlet.addEventListener('focus', handleFocus)
+
+  const update = async () => {
+    state.state = 'loading'
+    // TODO cancel this if tree is disposed
+    const newChildren = await props.getChildren(state.root)
+    if (state.state === 'disposed') {
+      return
+    }
+    state.items = newChildren.map(toTreeItem(1))
+    state.state = 'default'
+  }
+
+  const render = () => {
+    // TODO many objects created here, might cause garbage collection
+    // const items = state.dirents.map((dirent) => ({
+    //   name: dirent.name,
+    //   level: 1,
+    // }))
+    Renderer.render($Viewlet, RendererTree, state.items)
+    return $Viewlet
+  }
+
+  const dispose = () => {
+    state.state = 'disposed'
+  }
+
+  return {
+    update,
+    render,
+    dispose,
+    get root() {
+      return ''
+    },
+    set root(value) {
+      state.root = value
+      update().then(render)
+    },
+  }
+}
+
+// TODO separate commands from ui implementation
+
+const treeViewFocusDown = () => {
+  if (!activeTreeView) {
+    return
+  }
+  activeTreeView.focusNext()
+}
+
+const treeViewFocusUp = () => {
+  if (!activeTreeView) {
+    return
+  }
+  // TODO operate on state, don't call functions (doesn't scale)
+  activeTreeView.focusPrevious()
+}
+
+const treeViewFocusPageUp = () => {}
+
+const treeViewFocusPageDown = () => {}
+
+const treeViewCollapse = () => {
+  if (!activeTreeView) {
+    return
+  }
+  activeTreeView.collapse()
+}
+
+const treeViewCollapseAll = () => {
+  if (!activeTreeView) {
+    return
+  }
+  activeTreeView.collapseAll()
+}
+
+export const __initialize__ = () => {
+  Command.register(3000, treeViewFocusDown)
+  Command.register(3001, treeViewFocusUp)
+  Command.register(3002, treeViewCollapse)
+  Command.register(3003, treeViewCollapseAll)
+}

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/TreeView2.js

@@ -0,0 +1,189 @@
+// export const create = (props) => {
+//   const expanded = new Set()
+//   const resolved = new Set()
+
+//   let setSize = 0
+
+//   const isExpanded = (item) => expanded.has(item)
+//   const isResolved = (item) => resolved.has(item)
+
+//   const root = {
+//     type: 'directory',
+//     name: '',
+//     children: [],
+//   }
+
+//   const render=()=> {
+//     for(const child of root.children){
+
+//     }
+//   }
+
+//   return {
+//     size() {
+//       return setSize
+//     },
+//     render() {
+//       for(const child of root.children){
+
+//       }
+//     },
+//   }
+// }
+
+// const treeView = create()
+
+// only tree model, sends commands to ui
+const createTree = (props) => {
+  const state = {
+    root: 'abcdef',
+    items: [],
+  }
+
+  const expanded = new Set()
+  const childCountMap = new Map()
+
+  const isExpanded = (item) => expanded.has(item)
+
+  const getIndex = (item) => {
+    return 0
+  }
+
+  const toggle = async (item) => {
+    if (isExpanded(item)) {
+      const childCount = childCountMap.get(item)
+      const index = getIndex(item)
+      state.items.splice(index, childCount)
+    } else {
+      const children = await props.getChildren(item)
+      const index = getIndex(item)
+      childCountMap.set(item, children.length)
+      state.items.splice(index, 0, ...children)
+    }
+  }
+
+  const handleClick = (item) => {
+    switch (item.type) {
+      case 'file':
+        props.handleClick(item)
+        break
+      case 'directory':
+        toggle(item)
+        break
+      default:
+        break
+    }
+  }
+}
+
+// only ui
+const createTreeUi = () => {
+  const items = []
+
+  return {
+    updateItem(index, item) {
+      items[index] = item
+    },
+    splice(start, end, ...items) {
+      items.splice(start, end, ...items)
+    },
+    render() {},
+  }
+}
+
+// list model tree
+
+const createTreeList = () => {
+  const isExpanded = (node) => {
+    return false
+  }
+  const rootItems = []
+
+  const visit = (node, fn) => {
+    switch (node.type) {
+      case 'file':
+        fn(node)
+        break
+      case 'directory':
+        fn(node)
+        parentPath += node.name
+        if (isExpanded(node)) {
+          for (const child of node.children) {
+            visit(child, fn)
+          }
+        }
+        parentPath = parentPath.slice(0, -node.name)
+        break
+      default:
+        break
+    }
+  }
+
+  let parentPath = ''
+
+  return {
+    toList() {
+      const listItems = []
+
+      const fn = (node) => {}
+      for (const rootItem of rootItems) {
+        visit(rootItem, fn)
+      }
+      const segments = []
+      // yield 1
+      // yield 2
+      // yield 3
+    },
+  }
+}
+
+const sendRendererProcess = (...args) => {}
+
+const expand = () => {
+  const index = 90
+  const items = [
+    {
+      type: 'directory',
+      name: 'abc',
+      absolutePath: '/tmp/abc',
+      level: 1,
+    },
+    {
+      type: 'file',
+      name: 'file',
+      absolutePath: '/tmp/abc/file',
+      level: 2,
+    },
+    {
+      type: 'file',
+      name: 'def',
+      absolutePath: '/tmp/def',
+      level: 1,
+    },
+  ]
+  sendRendererProcess([
+    /* addNodes */ 89981,
+    /* index */ index,
+    /* items */ items,
+  ])
+}
+
+const collapse = () => {
+  const index = 90
+  const itemsToRemove = 2
+  sendRendererProcess([
+    /* removeNodes */ 89982,
+    /* index */ index,
+    /* itemsToRemove */ itemsToRemove,
+  ])
+}
+
+const rename = () => {
+  const index = 80
+  const newName = 'hij'
+  sendRendererProcess([
+    /* rename */ 89983,
+    /* index */ index,
+    /* newName */ newName,
+  ])
+}

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/TreeViewClass.js

@@ -0,0 +1,30 @@
+class TreeView {
+  constructor(props) {
+    this.props = props
+    this.$Viewlet = document.createElement('div')
+    this.$Viewlet.className = 'ListItems Viewlet'
+    this.$Viewlet.tabIndex = 0
+    this.$Viewlet.dataset.viewletId = 'Explorer'
+    this.$Viewlet.setAttribute('role', 'tree')
+    this.$Viewlet.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.$Viewlet.addEventListener('mousedown', this.handleMouseDown.bind(this))
+    this.$Viewlet.addEventListener(
+      'contextmenu',
+      this.handleContextMenu.bind(this)
+    )
+  }
+
+  handleKeyDown() {}
+
+  handleMouseDown() {
+    const index = -1
+    this.props.handleClick(index)
+  }
+
+  handleContextMenu() {
+    const index = -1
+    this.props.handleContextMenu(index)
+  }
+}
+
+export const createTreeView = () => new TreeView()

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/TreeViewNumber.js

@@ -0,0 +1,25 @@
+// @ts-ignore
+import { getChildren } from './TreeProviderFile.js'
+
+const treeViewNumber = {
+  getRoot() {
+    return 1
+  },
+  async getChildren(entry) {
+    return [entry * 2, entry * 3, entry * 4, entry * 5]
+  },
+  toTreeItem(entry) {
+    return {
+      label: `${entry}`,
+      collapsibleState: 'none',
+    }
+  },
+}
+
+const init = async () => {
+  const root = treeViewNumber.getRoot()
+
+  const rootItems = await getChildren(root)
+}
+
+init()

package/static/1914fad/packages/renderer-process/src/parts/Viewlet/Viewlet.ipc.js

@@ -0,0 +1,14 @@
+import * as Command from '../Command/Command.js'
+import * as Viewlet from '../Viewlet/Viewlet.js'
+
+export const __initialize__ = () => {
+  Command.register(3022, Viewlet.refresh)
+  Command.register(3024, Viewlet.invoke)
+  Command.register(3027, Viewlet.focus)
+  Command.register(3026, Viewlet.dispose)
+  // Command.register(3028, Viewlet.hydrate)
+  Command.register(3029, Viewlet.appendViewlet)
+  Command.register(3030, Viewlet.load)
+  Command.register(3031, Viewlet.handleError)
+  Command.register(3032, Viewlet.sendMultiple)
+}