@operato/data-grist 2.0.0-alpha.2 → 2.0.0-alpha.20

package/src/data-manipulator.ts

@@ -64,18 +64,17 @@ export class DataManipulator extends LitElement {
     })
 
     /* tree processing */
-    this.addEventListener('collapse-all', (e: Event) => this.onCollapseAll(e as CustomEvent))
-    this.addEventListener('expand-all', (e: Event) => this.onExpandAll(e as CustomEvent))
-    this.addEventListener('collapsed', (e: Event) => this.onCollapsed(e as CustomEvent))
-    this.addEventListener('expanded', (e: Event) => this.onExpanded(e as CustomEvent))
+    this.addEventListener('collapse-all', (e: Event) => this.collapseAll())
+    this.addEventListener('expand-all', (e: Event) => this.expandAll())
+    this.addEventListener('collapse-node', (e: Event) => this.collapseNode((e as CustomEvent).detail as GristRecord))
+    this.addEventListener('expand-node', (e: Event) => this.expandNode((e as CustomEvent).detail as GristRecord))
     this.addEventListener('check-in-tree', (e: Event) => this.onCheckInTree(e as CustomEvent))
-  }
 
-  // updated(changes: PropertyValues<this>) {
-  //   if (changes.has('data')) {
-  //     this.refresh()
-  //   }
-  // }
+    this.addEventListener('add-sibling-node', (e: Event) =>
+      this.addSiblingNode((e as CustomEvent).detail as GristRecord)
+    )
+    this.addEventListener('add-child-node', (e: Event) => this.addChildNode((e as CustomEvent).detail as GristRecord))
+  }
 
   onFieldChange({
     after,
@@ -215,25 +214,119 @@ export class DataManipulator extends LitElement {
     this.requestUpdate()
   }
 
-  onCollapseAll(e: CustomEvent) {
+  collapseAll() {
     this.refresh(false)
   }
 
-  onExpandAll(e: CustomEvent) {
+  expandAll() {
     this.refresh(true)
   }
 
-  onCollapsed(e: CustomEvent) {
-    const record = e.detail
+  collapseNode(record: GristRecord) {
     record.__expanded__ = false
 
     this.refresh()
   }
 
-  onExpanded(e: CustomEvent) {
-    const record = e.detail
+  expandNode(record: GristRecord) {
+    record.__expanded__ = true
+
+    this.refresh()
+  }
+
+  // onCollapse(e: CustomEvent) {
+  //   const record = e.detail as GristRecord
+  //   record.__expanded__ = false
+
+  //   this.refresh()
+  // }
+
+  // onExpand(e: CustomEvent) {
+  //   const record = e.detail as GristRecord
+  //   record.__expanded__ = true
+
+  //   this.refresh()
+  // }
+
+  addSiblingNode(record: GristRecord) {
+    const { records } = this.data
+    const toplevelRecords = records.filter(
+      record => !record.__depth__
+    ) /* __depth__ 가 설정되지 않았거나, 0 인 경우만 수집 */
+
+    const { __depth__ } = record as GristRecord
+
+    function findParent(record: GristRecord, parent?: GristRecord): GristRecord | undefined {
+      var children = (parent ? parent.__children__ || [] : toplevelRecords) as GristRecord[]
+
+      if (children.find(child => child === record)) {
+        return parent
+      } else {
+        for (let child of children) {
+          const found = findParent(record, child)
+          if (found) {
+            return found
+          }
+        }
+      }
+    }
+
+    const parent = findParent(record)
+
+    const sibling = {
+      __depth__,
+      __dirty__: '+'
+    } as GristRecord
+
+    if (parent) {
+      const { id } = parent as GristRecord
+
+      sibling.parent = { id }
+
+      if (!parent.__children__) {
+        parent.__children__ = [sibling]
+      } else {
+        let index = parent.__children__.indexOf(record)
+
+        if (index !== -1) {
+          parent.__children__ = [
+            ...parent.__children__.slice(0, index + 1),
+            sibling,
+            ...parent.__children__.slice(index + 1)
+          ]
+        } else {
+          parent.__children__ = [...parent.__children__, sibling]
+        }
+      }
+
+      parent.__expanded__ = true
+    } else {
+      this.data.records = [...toplevelRecords, sibling]
+    }
+
+    this.refresh()
+  }
+
+  addChildNode(record: GristRecord) {
+    const { id: parentId, __children__, __depth__ } = record as GristRecord
+    const child = {
+      parent: {
+        id: parentId
+      },
+      __depth__: (__depth__ || 0) + 1,
+      __dirty__: '+'
+    }
+
+    if (!record.__children__) {
+      record.__children__ = [child]
+    } else {
+      record.__children__.unshift(child)
+    }
+
     record.__expanded__ = true
 
+    // this.requestUpdate()
+
     this.refresh()
   }
 
@@ -256,7 +349,8 @@ export class DataManipulator extends LitElement {
 
       children.forEach(child => updateCheckedAll(child))
 
-      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined
+      var checked: 'checked' | 'half-checked' | 'unchecked' | undefined =
+        record.__check_in_tree__ == 'checked' ? 'checked' : undefined
 
       children.forEach(child => {
         const { __check_in_tree__ } = child
@@ -264,7 +358,7 @@ export class DataManipulator extends LitElement {
         if (__check_in_tree__ == 'half-checked') {
           checked = 'half-checked'
         } else if (__check_in_tree__ == 'checked') {
-          checked = checked == 'checked' || !checked ? 'checked' : 'half-checked'
+          checked = checked == 'checked' ? 'checked' : 'half-checked'
         } else {
           checked = checked == 'unchecked' || !checked ? 'unchecked' : 'half-checked'
         }
@@ -318,10 +412,7 @@ export class DataManipulator extends LitElement {
 
   private traverseRefresh(record: GristRecord, forceExpandOrCollapse?: boolean): GristRecord[] {
     if (forceExpandOrCollapse !== undefined) {
-      record = {
-        ...record,
-        __expanded__: forceExpandOrCollapse
-      }
+      record.__expanded__ = forceExpandOrCollapse
     }
 
     const { __expanded__, __children__ = [] } = record

package/src/editors/ox-grist-editor-number.ts

@@ -1,6 +1,7 @@
 import { OxGristEditor } from './ox-grist-editor.js'
 import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { parseToNumberOrNull } from '@operato/utils'
 
 @customElement('ox-grist-editor-number')
 export class OxGristEditorNumber extends OxGristEditor {
@@ -9,9 +10,9 @@ export class OxGristEditorNumber extends OxGristEditor {
 
     switch (this.column.type) {
       case 'float':
-        return Number.parseFloat(value)
+        return Number.parseFloat(value) || 0
       case 'integer':
-        return Number.parseInt(value)
+        return Number.parseInt(value) || 0
       default:
         return Number(value)
     }

package/src/editors/ox-grist-editor.ts

@@ -5,6 +5,7 @@ import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { DataGridField } from '../data-grid/data-grid-field'
 import { ColumnConfig, GristRecord } from '../types'
 import { getDefaultValue } from '../value-generator'
+import { parseToNumberOrNull } from '@operato/utils'
 
 const STYLE = css`
   :host {
@@ -123,7 +124,10 @@ export class OxGristEditor extends LitElement {
 
     // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
     const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)
-    this.value = this._dirtyValue = this.field?.type === 'number' ? Number(editorValue) : editorValue
+    const fieldType = this.field?.type || 'string'
+    this.value = this._dirtyValue = ['number', 'float', 'integer', 'progress'].includes(fieldType)
+      ? parseToNumberOrNull(editorValue)
+      : editorValue
 
     requestAnimationFrame(() => {
       this.focus()

package/src/editors/ox-input-tree.ts

@@ -214,7 +214,7 @@ export class OxInputTree extends OxFormField {
     e.stopPropagation()
 
     this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
         bubbles: true,
         composed: true,
         detail: this.record

package/src/handlers/contextmenu-tree-mutation.ts

@@ -9,7 +9,7 @@ function dispatchEvent(field: DataGridField, event: string) {
     new CustomEvent(event, {
       bubbles: true,
       composed: true,
-      detail: field
+      detail: field.record
     })
   )
 }
@@ -54,24 +54,6 @@ export const ContextMenuTreeMutation = function (
         <mwc-icon slot="icon">playlist_add</mwc-icon>
       </ox-popup-menuitem>
 
-      <ox-popup-menuitem
-        label="move up"
-        @click=${() => {
-          dispatchEvent(field, 'move-up')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_upward</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move down"
-        @click=${() => {
-          dispatchEvent(field, 'move-down')
-        }}
-      >
-        <mwc-icon slot="icon">arrow_downward</mwc-icon>
-      </ox-popup-menuitem>
-
       <div separator></div>
 
       <ox-popup-menuitem

package/src/renderers/ox-grist-renderer-tree.ts

@@ -173,7 +173,7 @@ export class OxGristRendererTree extends OxGristRenderer {
     e.stopPropagation()
 
     this.dispatchEvent(
-      new CustomEvent(this.record.__expanded__ ? 'collapsed' : 'expanded', {
+      new CustomEvent(this.record.__expanded__ ? 'collapse-node' : 'expand-node', {
         bubbles: true,
         composed: true,
         detail: this.record