wip ui

Author: heapwolf

build.js

@@ -18,7 +18,7 @@ async function copy (target) {
   await cp('src/preview.js', target)
   await cp('src/worker.js', target)
   await cp('icons/icon.png', target)
-  await cp('src/template', target)
+  await cp('src/settings.json', target)
   await cp('src/fonts', target)
   await cp('src/lib', target)
   await cp('src/pages', target)

src/components/editor.js

@@ -98,6 +98,70 @@ class EditorTabs extends Tonic {
     this.reRender()
   }
 
+  rename ({ oldId, newId, label }) {
+    if (!this.state.tabs.has(oldId)) return
+
+    const tab = this.state.tabs.get(oldId)
+    tab.id = newId
+    tab.path = newId
+    tab.label = label
+
+    this.state.tabs.delete(oldId)
+    this.state.tabs.set(newId, tab)
+
+    this.reRender()
+  }
+
+  async close (id) {
+    if (!this.state.tabs.has(id)) return
+
+    const tab = this.state.tabs.get(id)
+
+    if (tab.unsaved) {
+      this.selectTab(id)
+
+      const coDialogConfirm = document.querySelector('dialog-confirm')
+      const result = await coDialogConfirm.prompt({
+        type: 'question',
+        message: 'This file has changes, what do you want to do?',
+        buttons: [
+          { label: 'Abandon', value: 'abandon' },
+          { label: 'Save', value: 'save' }
+        ]
+      })
+
+      if (!result.abandon && !result.save) return
+
+      if (result.save) {
+        await this.props.parent.saveCurrentTab()
+      }
+    }
+
+    this.remove(id)
+
+    // if this tab was selected
+    if (this.state.selectedTabId === id) {
+      // check if there are any other tabs
+      if (this.state.tabs.size > 0) {
+        const tabs = [...this.state.tabs.values()]
+        const previousSibling = tabs.findLast(t => t.index < tab.index)
+        const nextSibling = tabs.find(t => t.index > tab.index)
+        const sibling = previousSibling || nextSibling
+
+        if (sibling) {
+          sibling.selected = true
+          this.state.selectedTabId = sibling.id
+          this.selectTab(sibling.id)
+        }
+      } else {
+        // there are no more tabs. empty the editor
+        this.props.parent.editor.setValue('')
+      }
+    }
+
+    this.reRender()
+  }
+
   get tab () {
     return this.state.tabs.get(this.state.selectedTabId)
   }
@@ -148,53 +212,7 @@ class EditorTabs extends Tonic {
     if (event === 'close') {
       const parentTab = el.closest('.tab')
       const id = parentTab.dataset.id
-      if (!this.state.tabs.has(id)) return
-
-      const tab = this.state.tabs.get(id)
-
-      if (tab.unsaved) {
-        this.selectTab(id)
-
-        const coDialogConfirm = document.querySelector('dialog-confirm')
-        const result = await coDialogConfirm.prompt({
-          type: 'question',
-          message: 'This file has changes, what do you want to do?',
-          buttons: [
-            { label: 'Abandon', value: 'abandon' },
-            { label: 'Save', value: 'save' }
-          ]
-        })
-
-        if (!result.abandon && !result.save) return
-
-        if (result.save) {
-          await this.props.parent.saveCurrentTab()
-        }
-      }
-
-      this.remove(id)
-
-      // if this tab was selected
-      if (this.state.selectedTabId === id) {
-        // check if there are any other tabs
-        if (this.state.tabs.size > 0) {
-          const tabs = [...this.state.tabs.values()]
-          const previousSibling = tabs.findLast(t => t.index < tab.index)
-          const nextSibling = tabs.find(t => t.index > tab.index)
-          const sibling = previousSibling || nextSibling
-
-          if (sibling) {
-            sibling.selected = true
-            this.state.selectedTabId = sibling.id
-            this.selectTab(sibling.id)
-          }
-        } else {
-          // there are no more tabs. empty the editor
-          this.props.parent.editor.setValue('')
-        }
-      }
-
-      this.reRender()
+      this.close(id)
     }
   }
 

src/components/project.js

@@ -52,6 +52,17 @@ class AppProject extends Tonic {
   mouseMoveThreshold = 0
   timeoutMouseMove = 0
 
+  constructor () {
+    super()
+
+    window.addEventListener('keyup', e => {
+      if (this.mouseIsDragging && e.key === 'Escape') {
+        this.resetMouse()
+        this.load()
+      }
+    })
+  }
+
   /**
    * auto-sort="false"
    */
@@ -136,6 +147,8 @@ class AppProject extends Tonic {
     if (!node) this.getNodeFromElement(el.parentElement)
     if (!node) return
 
+    if (node.nonMovable) return
+
     this.removeAttribute('dragging')
     this.mouseMoveThreshold = 0
 
@@ -211,6 +224,10 @@ class AppProject extends Tonic {
   }
 
   mousemove (e) {
+    if (Tonic.match(e.target, '[data-event="rename"]')) {
+      return // renaming, can't drag
+    }
+
     if (this.mouseIsDown) {
       ++this.mouseMoveThreshold
 
@@ -278,13 +295,26 @@ class AppProject extends Tonic {
     // Rename a node in the tree
     //
     if (Tonic.match(e.target, '[data-event="rename"]')) {
+      if (e.key === 'Escape') {
+        this.load()
+      }
+
       if (e.key === 'Enter') {
         const value = e.target.value.trim()
         if (this.getNodeByProperty('id', value)) return
 
-        const newId = path.join(path.dirname(node.id), value)
+        const dirname = path.dirname(node.id).replace(/%20/g, ' ')
+        const newId = path.join(dirname, value)
         await fs.promises.rename(node.id, newId)
+
+        const coTabs = document.querySelector('editor-tabs')
+        if (coTabs && coTabs.tab.id === node.id) {
+          coTabs.rename({ oldId: coTabs.tab.id, newId, label: value })
+        }
+
         node.label = value
+        node.id = newId
+
         this.load()
       }
     }
@@ -293,6 +323,10 @@ class AppProject extends Tonic {
   async dblclick (e) {
     this.resetMouse()
 
+    if (Tonic.match(e.target, '[data-event="rename"]')) {
+      return // already renaming
+    }
+
     const el = Tonic.match(e.target, '[data-path]')
     if (!el) return
 
@@ -475,6 +509,8 @@ class AppProject extends Tonic {
 
       this.state.currentProject = projectNode.id
 
+      if (node.isDirectory) return
+
       const coImagePreview = document.querySelector('view-image-preview')
       const coHome = document.querySelector('view-home')
 
@@ -578,8 +614,9 @@ class AppProject extends Tonic {
   }
 
   async load () {
-    const oldState = this.state.tree
-    const oldChild = this.getNodeByProperty('id', 'home', oldState)
+    const app = this.props.parent
+    let oldState = this.state.tree
+    let oldChild = this.getNodeByProperty('id', 'home', oldState)
 
     const tree = {
       id: 'root',
@@ -594,6 +631,7 @@ class AppProject extends Tonic {
       isDirectory: false,
       icon: 'home-icon',
       label: 'Home',
+      nonMovable: true,
       children: []
     })
 
@@ -619,7 +657,6 @@ class AppProject extends Tonic {
           state: oldChild?.state ?? 0,
           isDirectory: entry.isDirectory(),
           label: entry.name,
-          data: {},
           mime: await lookup(path.extname(entry.name)),
           children: []
         }
@@ -650,12 +687,49 @@ class AppProject extends Tonic {
       }
     }
 
-    try {
-      await readDir(path.join(path.DATA, 'projects'), tree)
-      this.state.tree = tree
-    } catch (err) {
-      console.error('Error initiating read directory operation:', err)
-      return
+    const settingsId = path.join(path.DATA, 'settings.json')
+    oldChild = this.getNodeByProperty('id', settingsId, oldState)
+
+    tree.children.push({
+      id: settingsId,
+      parent: tree,
+      selected: oldChild?.selected ?? 0,
+      state: oldChild?.state ?? 0,
+      isDirectory: false,
+      icon: 'settings-icon',
+      label: 'Settings',
+      nonMovable: true,
+      children: []
+    })
+
+    const { data: dataProjects } = await app.db.projects.readAll()
+
+    for (const [projectId, project] of dataProjects.entries()) {
+      const oldChild = this.getNodeByProperty('id', project.path, oldState)
+
+      const node = {
+        parent: tree,
+        selected: oldChild?.selected ?? 0,
+        state: oldChild?.state ?? 0,
+        id: project.path,
+        label: project.label,
+        isDirectory: true,
+        nonMovable: true,
+        icon: 'package',
+        children: []
+      }
+
+      tree.children.push(node)
+
+      if (project.path) {
+        try {
+          await readDir(project.path, node)
+          this.state.tree = tree
+        } catch (err) {
+          console.error('Error initiating read directory operation:', err)
+          return
+        }
+      }
     }
 
     this.reRender()

src/components/sprite.js

@@ -177,7 +177,7 @@ class AppSprite extends Tonic {
           <line stroke="currentColor" x1="65.3" y1="11.9" x2="81" y2="27.6"/>
         </symbol>
 
-        <symbol id="settings" viewBox="0 0 100 100">
+        <symbol id="settings-icon" viewBox="0 0 100 100">
           <path fill="currentColor" d="M85.7,52.2c-1.1-0.5-2.1-1.1-3.2-1.7L82,50.1c-1-0.5-1.9-1-2.8-1.5c-0.4-0.2-0.7-0.4-0.8-1.2c-0.1-1.1-0.4-2.6-1-4.1
             c-0.3-0.9-0.2-1.3,0.2-1.9c0.8-1,1.5-2.1,2.3-3.2c0.7-0.9,1.3-1.9,2-2.7c1.4-1.9,0.3-3.4-0.1-4c-0.5-0.5-1-1.2-1.5-1.9l-3.7-4.7
             c-0.8-1-2.1-1.3-3.3-0.9l-2.2,0.9c-1.6,0.7-3.3,1.4-4.9,2.1c-0.5,0.2-0.9,0.2-1.5-0.1c-1.2-0.7-2.6-1.4-4.1-2

src/components/subscribe.js

@@ -26,8 +26,10 @@ export class DialogSubscribe extends TonicDialog {
       const coInput = this.querySelector('#subscribe-shared-secret')
       const url = new URL(coInput.value.trim())
 
-      const cId = url.searchParams.get('clusterId')
-      const bundleId = url.searchParams.get('bundleId')
+      const cId = url.searchParams.get('org')
+      const bundleId = url.searchParams.get('id')
+
+      // union://foo?id=com.demo.project&org=test
 
       if (!bundleId || !cId) {
         const notifications = document.querySelector('#notifications')
@@ -58,10 +60,30 @@ export class DialogSubscribe extends TonicDialog {
 
       await app.db.projects.put(bundleId, project)
       await app.initNetwork()
+
+      const coProject = document.querySelector('app-project')
+      await this.close()
+      coProject.reRender()
     }
   }
 
   async render () {
+    const app = this.props.parent
+    const { data: dataProjects } = await app.db.projects.readAll()
+
+    /* const existingProjects
+
+    for (const [projectId, project] of dataProjects.entries()) {
+
+      tree.children.push({
+        id: project.bundleId,
+        label: project.bundleId,
+        isDirectory: false,
+        icon: 'package',
+        children: []
+      })
+    } */
+
     return this.html`
       <header>
         Create Subscription

src/css/view-image-preview.css

@@ -1,25 +1,29 @@
 view-image-preview {
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
-  overflow: auto;
   z-index: -1;
   opacity: 0;
   transition: z-index .1s ease, opacity .1s ease;
-
-  display: grid;
-  justify-content: center;
-  align-items: center;
-  grid-template-rows: 1fr 1fr;
-  grid-template-columns: 1fr;
   background-color: var(--tonic-background);
-  padding: 10%;
 }
 
 view-image-preview.show {
   opacity: 1;
   z-index: 30;
 }
 
+view-image-preview .container {
+  position: absolute;
+  top: 50px; bottom: 0; left: 0; right: 0;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr;
+  overflow: auto;
+  padding: 6%;
+}
+
 view-image-preview .top {
   display: grid;
   justify-content: center;