@operato/data-grist 2.0.0-alpha.0 → 2.0.0-alpha.11

package/src/configure/zero-config.ts

@@ -18,7 +18,9 @@ export const ZERO_FIELD_RENDERER: FieldRenderer = (value, column, record, rowInd
 
 export const ZERO_EVENTHANDLERSET: GristEventHandlerSet = {
   click: undefined,
-  dblclick: undefined
+  dblclick: undefined,
+  focus: undefined,
+  contextmenu: undefined
 }
 export const ZERO_COLUMNS: ColumnConfig[] = []
 export const ZERO_GROUPS: GroupConfig[] = []

package/src/data-card/data-card-field.ts

@@ -89,7 +89,7 @@ export class DataCardField extends LitElement {
 
     if (typeof label == 'object') {
       let { renderer: labelRenderer } = label
-      return html`<label>${labelRenderer()}</label>${recordRenderer(value, column, record, rowIndex, this)}`
+      return html`<label>${labelRenderer(column)}</label>${recordRenderer(value, column, record, rowIndex, this)}`
     } else {
       return html`${recordRenderer(value, column, record, rowIndex, this)}`
     }

package/src/data-grid/data-grid-accum-field.ts

@@ -58,6 +58,7 @@ export class DataGridAccumField extends LitElement {
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
   @property({ attribute: false }) emphasized: any = false
+  @property({ type: String }) fixed?: string
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
@@ -90,5 +91,11 @@ export class DataGridAccumField extends LitElement {
         this.style.setProperty('--data-grid-field-text-align', align)
       }
     }
+
+    if (changes.has('fixed')) {
+      if (this.fixed) {
+        this.style.left = this.fixed + 'px'
+      }
+    }
   }
 }

package/src/data-grid/data-grid-body.ts

@@ -18,6 +18,7 @@ import { DataGridField } from './data-grid-field'
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'
 import { dataGridBodyFocusChangeHandler } from './event-handlers/data-grid-body-focus-change-handler'
+import { dataGridBodyContextMenuHandler } from './event-handlers/data-grid-body-contextmenu-handler'
 import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
 import { accumulate } from '../accumulator/accumulator'
 
@@ -75,7 +76,7 @@ export class DataGridBody extends LitElement {
       [fixed] {
         position: sticky;
         background-color: var(--grid-record-background-color);
-        z-index: 1; /* 고정된 열을 다른 열 위에 표시. */
+        z-index: 2; /* 고정된 열을 다른 열 위에 표시. */
       }
 
       :host([raised]) [fixed] {
@@ -88,6 +89,10 @@ export class DataGridBody extends LitElement {
         bottom: 0;
         z-index: 1;
       }
+
+      ox-grid-accum-field[fixed] {
+        background-color: var(--grid-accum-record-background-color, #ccc);
+      }
     `
   ]
 
@@ -135,7 +140,6 @@ export class DataGridBody extends LitElement {
     var columns = this.columns.filter(column => !column.hidden)
     var data = this.data
     var { records } = data
-    records = records.filter(record => !record.__parent__ || !record.__parent__.collapsed)
     var { appendable, classifier, accumulator } = this.config.rows
     const { start, end } = this._selectBlock || {}
 
@@ -208,6 +212,7 @@ export class DataGridBody extends LitElement {
                   .column=${column}
                   .record=${accumRecord!}
                   .value=${accumRecord[column.name]}
+                  fixed=${ifDefined(this.fixedLefts[idxColumn])}
                 ></ox-grid-accum-field>
               `
             )}
@@ -261,6 +266,27 @@ export class DataGridBody extends LitElement {
       this.setSelectBlock(start, end)
     })
 
+    this.renderRoot.addEventListener('contextmenu', (event: Event) => {
+      const e = event as MouseEvent
+      this.setSelectBlock()
+
+      this._draggable = false
+
+      var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+      var { rowIndex, columnIndex } = target || {}
+
+      this.dispatchEvent(
+        new CustomEvent('focus-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            row: rowIndex,
+            column: columnIndex
+          }
+        })
+      )
+    })
+
     this.renderRoot.addEventListener('mousedown', (event: Event) => {
       const e = event as MouseEvent
       this.setSelectBlock()
@@ -285,7 +311,7 @@ export class DataGridBody extends LitElement {
         })
       )
 
-      if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+      if (columnIndex >= 0 && target.editableOnClick && !isNaN(rowIndex) && !isNaN(columnIndex)) {
         this.startEditTarget(rowIndex, columnIndex)
       }
     })
@@ -318,6 +344,7 @@ export class DataGridBody extends LitElement {
 
     this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))
     this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))
+    this.renderRoot.addEventListener('contextmenu', dataGridBodyContextMenuHandler.bind(this))
 
     this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this))
 

package/src/data-grid/data-grid-field.ts

@@ -173,4 +173,10 @@ export class DataGridField extends LitElement {
       this.removeAttribute('emphasized-row')
     }
   }
+
+  get editableOnClick() {
+    const renderer = this.renderRoot.firstElementChild as HTMLElement
+    //@ts-ignore
+    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true
+  }
 }

package/src/data-grid/data-grid-header.ts

@@ -267,26 +267,26 @@ export class DataGridHeader extends LitElement {
     `
   }
 
-  updated(changes: PropertyValues) {
-    if (changes.has('data')) {
-      const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
-      const fixedLefts = [] as number[]
-      var left = 0
-      fixedHeaders.forEach((header: HTMLElement) => {
-        header.style.left = left + 'px'
-        fixedLefts.push(left)
-
-        const width = header.offsetWidth
-        left += width
-      })
+  notifyFixedLeftChange() {
+    const fixedHeaders = Array.from(this.renderRoot.querySelectorAll('div[fixed]')) as HTMLElement[]
+    const fixedLefts = [] as number[]
+    var left = 0
+    fixedHeaders.forEach((header: HTMLElement) => {
+      header.style.left = left + 'px'
+      fixedLefts.push(left)
+
+      const width = header.offsetWidth
+      left += width
+    })
 
-      this.dispatchEvent(
-        new CustomEvent('fixed-lefts-change', {
-          detail: fixedLefts
-        })
-      )
-    }
+    this.dispatchEvent(
+      new CustomEvent('fixed-lefts-change', {
+        detail: fixedLefts
+      })
+    )
+  }
 
+  updated(changes: PropertyValues) {
     if (changes.has('columns')) {
       this.row2 = this.columns.reduce((row2, column, index) => {
         if (column.hidden || !column.header?.group) {
@@ -340,6 +340,8 @@ export class DataGridHeader extends LitElement {
 
         return row1
       }, [] as any[])
+
+      requestAnimationFrame(this.notifyFixedLeftChange.bind(this))
     }
   }
 
@@ -512,6 +514,8 @@ export class DataGridHeader extends LitElement {
           })
         )
 
+        this.notifyFixedLeftChange()
+
         this._lastAccVal = 0
       }, 100)
     }

package/src/data-grid/event-handlers/data-grid-body-click-handler.ts

@@ -56,10 +56,10 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   /* do column click handler */
   if (column) {
     var { click } = column.handlers
-    click && click(this.columns, this.data, column, record, rowIndex, target)
+    click && click(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows click handler */
   var { click: rowsClick } = this.config.rows.handlers
-  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)
+  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target, e)
 }

package/src/data-grid/event-handlers/data-grid-body-contextmenu-handler.ts

@@ -0,0 +1,32 @@
+import { DataGridBody } from '../data-grid-body'
+import { DataGridField } from '../data-grid-field'
+
+/**
+ * ox-grid-body 의 focus-change handler
+ *
+ * - handler의 this 는 ox-grid-body임.
+ */
+export async function dataGridBodyContextMenuHandler(this: DataGridBody, e: Event): Promise<void> {
+  e.stopPropagation()
+
+  if (this.editTarget) {
+    /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
+    return
+  }
+
+  /* target should be 'ox-grid-field' */
+  var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+  var { column, record, rowIndex, columnIndex } = target || {}
+
+  var { column, record } = target || {}
+
+  /* do column contextmenu handler */
+  if (column) {
+    var { contextmenu } = column.handlers
+    contextmenu && contextmenu(this.columns, this.data, column, record, rowIndex, target, e)
+  }
+
+  /* do rows contextmenu handler */
+  var { contextmenu: rowsContextMenu } = this.config.rows.handlers
+  rowsContextMenu && rowsContextMenu(this.columns, this.data, column, record, rowIndex, target, e)
+}

package/src/data-grid/event-handlers/data-grid-body-dblclick-handler.ts

@@ -33,10 +33,10 @@ export async function dataGridBodyDblclickHandler(this: DataGridBody, e: Event):
   /* do column dblclick handler */
   if (column) {
     var { dblclick } = column.handlers
-    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+    dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows dblclick handler */
   var { dblclick: rowsDblclick } = this.config.rows.handlers
-  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target)
+  rowsDblclick && rowsDblclick(this.columns, this.data, column, record, rowIndex, target, e)
 }

package/src/data-grid/event-handlers/data-grid-body-focus-change-handler.ts

@@ -15,10 +15,10 @@ export async function dataGridBodyFocusChangeHandler(this: DataGridBody, e: Even
   /* do column focus handler */
   if (column) {
     var { focus } = column.handlers
-    focus && focus(this.columns, this.data, column, record, rowIndex, target)
+    focus && focus(this.columns, this.data, column, record, rowIndex, target, e)
   }
 
   /* do rows focus handler */
   var { focus: rowsFocus } = this.config.rows.handlers
-  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target)
+  rowsFocus && rowsFocus(this.columns, this.data, column, record, rowIndex, target, e)
 }