@operato/data-grist 1.1.53 → 1.1.55

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

@@ -88,7 +88,6 @@ export class DataGridBody extends LitElement {
   private _focusedListener?: (e: KeyboardEvent) => void
   private _recordView?: any
   private _recordViewRow?: number
-  private _selectBlockWillBeReset: boolean = true
 
   resetEdit() {
     this.editTarget = null
@@ -163,7 +162,7 @@ export class DataGridBody extends LitElement {
           ></ox-grid-field>
         `
       })}
-      ${start && end ? html` <div select-block></div> ` : html``}
+      ${start && end && start !== end ? html` <div select-block></div> ` : html``}
       <slot></slot>
     `
   }
@@ -205,41 +204,49 @@ export class DataGridBody extends LitElement {
       this.setSelectBlock(start, end)
     })
 
-    this.renderRoot.addEventListener('mousemove', (event: Event) => {
+    this.renderRoot.addEventListener('mousedown', (event: Event) => {
       const e = event as MouseEvent
+      this.setSelectBlock()
+
       if (e.buttons !== 1) {
-        this._selectBlockWillBeReset = true
         return
       }
 
-      const field = e.target as DataGridField
+      var target = (e.target as Element).closest('ox-grid-field') as DataGridField
+      var { rowIndex, columnIndex } = target || {}
 
-      if (!this._selectBlock || this._selectBlockWillBeReset) {
-        this._selectBlockWillBeReset = false
-        this.setSelectBlock(field)
+      this.dispatchEvent(
+        new CustomEvent('focus-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            row: rowIndex,
+            column: columnIndex
+          }
+        })
+      )
 
-        // this.dispatchEvent(
-        //   new CustomEvent('focus-change', {
-        //     bubbles: true,
-        //     composed: true,
-        //     detail: undefined
-        //   })
-        // )
+      if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+        this.startEditTarget(rowIndex, columnIndex)
+      }
+    })
 
+    this.renderRoot.addEventListener('mousemove', (event: Event) => {
+      const e = event as MouseEvent
+      if (e.buttons !== 1) {
         return
       }
 
-      var { start, end } = this._selectBlock || {}
+      const field = e.target as DataGridField
 
-      if (start !== field && !end) {
-        /* cancel all selected text */
-        window.getSelection()?.removeAllRanges()
-      }
+      if (!this._selectBlock) {
+        this.setSelectBlock(field, field)
 
-      if (start === field && !end) {
         return
       }
 
+      var { start, end } = this._selectBlock || {}
+
       if (start && end !== field) {
         end = field
 
@@ -247,9 +254,7 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mouseup', (event: Event) => {
-      this._selectBlockWillBeReset = true
-    })
+    this.renderRoot.addEventListener('mouseup', (event: Event) => {})
 
     this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))
 
@@ -323,8 +328,6 @@ export class DataGridBody extends LitElement {
         return
       }
 
-      this.setSelectBlock()
-
       let { top, left } = calcScrollPos(this, element)
       // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.
       // this.scroll({
@@ -388,11 +391,6 @@ export class DataGridBody extends LitElement {
     if (!(start && end)) {
       start = this.focusedField
 
-      if (typeof start!.value === 'string' || typeof start!.value === 'number') {
-        const selection = document.getSelection()
-        return selection?.toString() || this.focusedField?.value
-      }
-
       end = start
     }
 
@@ -405,100 +403,169 @@ export class DataGridBody extends LitElement {
       const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex)
       const columns = this.columns.filter(column => !column.hidden)
 
-      return new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {
-        const rowIndex = start + index
-        const record = this.data.records[rowIndex]
-
-        return columnArray.map((start, index) => {
-          const columnIndex = start + index
-          const column = columns[columnIndex]
-
-          return record?.[column.name]
-        })
-      })
+      return (
+        '<table>' +
+        new Array(endRowIndex - startRowIndex + 1)
+          .fill(startRowIndex)
+          .map((start, index) => {
+            const rowIndex = start + index
+            const record = this.data.records[rowIndex]
+
+            const tds = columnArray
+              .map((start, index) => {
+                const columnIndex = start + index
+                const column = columns[columnIndex]
+                const value = record?.[column.name]
+                const text = value === undefined ? '' : typeof value == 'object' ? JSON.stringify(value) : value
+
+                return `<td>${text}</td>`
+              })
+              .join('')
+            return `<tr>${tds}</tr>`
+          })
+          .join('') +
+        '</table>'
+      )
     }
   }
 
   async copy() {
     const copied = this.getSelectedBlockValues()
-    await navigator.clipboard.writeText(
-      copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied
-    )
 
-    const selectBlock = this.selectBlock
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        'text/html': new Blob([copied], { type: 'text/html' }),
+        'text/plain': new Blob([copied], { type: 'text/plain' })
+      })
+    ])
+
+    const selectBlock = this.selectBlock || this.focusedField
     if (selectBlock) {
+      const backgroundColor = selectBlock.style.backgroundColor
+      const opacity = selectBlock.style.opacity
+
       selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')
       selectBlock.style.backgroundColor = 'red'
       selectBlock.style.opacity = '0.5'
       await sleep(500)
       selectBlock.removeAttribute('data-tooltip')
-      selectBlock.style.backgroundColor = ''
-      selectBlock.style.opacity = ''
+      selectBlock.style.backgroundColor = backgroundColor
+      selectBlock.style.opacity = opacity
     }
   }
 
   async paste() {
     try {
-      const text = await navigator.clipboard.readText()
-      if (!text) {
+      const selection = window.getSelection()
+
+      const clipboardItems = await navigator.clipboard.read()
+      if (!clipboardItems) {
         return
       }
 
-      const { row, column } = this.focused
-      const { records } = this.data
-      const columns = this.columns.filter(column => !column.hidden)
-      var block: Array<Array<any>>
+      var type: string | undefined
+      var content: string | undefined
+
+      for (const clipboardItem of clipboardItems) {
+        try {
+          var blob = await clipboardItem.getType('text/html')
+          content = blob && (await blob.text())
+          type = 'text/html'
+        } catch (e) {
+          try {
+            blob = await clipboardItem.getType('text/plain')
+            content = blob && (await blob.text())
+            type = 'text/plain'
+          } catch (e) {}
+        }
 
-      try {
-        var parsed = JSON.parse(text)
-      } catch (ex) {
-        parsed = text
+        break
       }
 
-      if (!(parsed instanceof Array)) {
-        block = [[parsed]]
-      } else {
-        block = parsed
+      if (!content) {
+        return
       }
 
-      block.forEach((record, rowIndex) => {
-        if (!(record instanceof Array)) {
+      const { row, column } = this.focused
+      const { records } = this.data
+      const columns = this.columns.filter(column => !column.hidden)
+
+      if (type === 'text/html') {
+        const div = document.createElement('div')
+        div.innerHTML = content!.trim()
+        const table = div.querySelector('table') as HTMLTableElement
+        if (!table) {
           return
         }
 
-        var targetRecord = records[row + rowIndex] || { __dirty__: '+' }
-        if (row + rowIndex >= records.length) {
-          records.push(targetRecord)
+        if (selection) {
+          this.resetEdit()
+          selection.removeAllRanges()
+          await this.updateComplete
         }
+        const rows = table.querySelectorAll('tr')
 
-        record.map((item, columnIndex) => {
-          const targetColumn = columns[column + columnIndex]
-          if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {
-            this.dispatchEvent(
-              new CustomEvent('field-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  before: targetRecord[targetColumn.name],
-                  after: item,
-                  column: targetColumn,
-                  record: targetRecord,
-                  row: row + rowIndex
-                }
-              })
-            )
+        rows.forEach((record, rowIndex) => {
+          if (!(record instanceof HTMLTableRowElement)) {
+            return
           }
+
+          var targetRecord = records[row + rowIndex] || { __dirty__: '+' }
+          if (row + rowIndex >= records.length) {
+            records.push(targetRecord)
+          }
+
+          const cells = record.querySelectorAll('td')
+          cells.forEach((item, columnIndex) => {
+            const targetColumn = columns[column + columnIndex]
+            if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {
+              this.dispatchEvent(
+                new CustomEvent('field-change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                    before: targetRecord[targetColumn.name],
+                    after: item.textContent,
+                    column: targetColumn,
+                    record: targetRecord,
+                    row: row + rowIndex
+                  }
+                })
+              )
+            }
+          })
         })
-      })
-    } catch (e) {
-      console.error(e)
-    }
+
+        return
+      } else if (!selection && type === 'text/plain') {
+        const targetRecord = records[row] || { __dirty__: '+' }
+        const targetColumn = columns[column]
+
+        if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {
+          this.dispatchEvent(
+            new CustomEvent('field-change', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                before: targetRecord[targetColumn.name],
+                after: content,
+                column: targetColumn,
+                record: targetRecord,
+                row: row
+              }
+            })
+          )
+        }
+      }
+    } catch (e) {}
   }
 
   setSelectBlock(start?: DataGridField, end?: DataGridField) {
     this._selectBlock = start && { start, end }
 
     if (start && end && start !== end) {
+      window.getSelection()?.removeAllRanges()
+
       const left = start.columnIndex < end.columnIndex ? start : end
       const right = left === start ? end : start
       const top = start.rowIndex < end.rowIndex ? start : end
@@ -518,7 +585,10 @@ export class DataGridBody extends LitElement {
         new CustomEvent('focus-change', {
           bubbles: true,
           composed: true,
-          detail: undefined
+          detail: {
+            row: end.rowIndex,
+            column: end.columnIndex
+          }
         })
       )
     }

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

@@ -10,6 +10,11 @@ import { DataGridField } from '../data-grid-field'
 export function dataGridBodyClickHandler(this: DataGridBody, e: Event): 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 || {}
@@ -19,16 +24,16 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
     return
   }
 
-  this.dispatchEvent(
-    new CustomEvent('focus-change', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        row: rowIndex,
-        column: columnIndex
-      }
-    })
-  )
+  // this.dispatchEvent(
+  //   new CustomEvent('focus-change', {
+  //     bubbles: true,
+  //     composed: true,
+  //     detail: {
+  //       row: rowIndex,
+  //       column: columnIndex
+  //     }
+  //   })
+  // )
 
   /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 코멘트를 제거한다. */
   /*  
@@ -36,12 +41,16 @@ export function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {
   */
 
   /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 부분을 코멘트처리한다. */
-  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
-    this.startEditTarget(rowIndex, columnIndex)
-  } else {
-    console.error('should not be here.')
-    return
-  }
+  // if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+  //   this.startEditTarget(rowIndex, columnIndex)
+  //   if (this.editTarget) {
+  //     /* editTarget이 새로 설정되지 않았다면, 이후 기능이 실행된다. */
+  //     return
+  //   }
+  // } else {
+  //   console.error('should not be here.')
+  //   return
+  // }
   /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 여기까지 코멘트 처리한다. */
 
   /* do column click handler */

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

@@ -9,6 +9,11 @@ import { DataGridField } from '../data-grid-field'
 export async function dataGridBodyDblclickHandler(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 || {}
@@ -18,12 +23,12 @@ export async function dataGridBodyDblclickHandler(this: DataGridBody, e: Event):
     return
   }
 
-  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
-    this.startEditTarget(rowIndex, columnIndex)
-  } else {
-    console.error('should not be here.')
-    return
-  }
+  // if (!isNaN(rowIndex) && !isNaN(columnIndex)) {
+  //   this.startEditTarget(rowIndex, columnIndex)
+  // } else {
+  //   console.error('should not be here.')
+  //   return
+  // }
 
   /* do column dblclick handler */
   var { dblclick } = column.handlers

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

@@ -20,6 +20,7 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
       /* TODO 편집이 취소되어야 한다. */
       case 'Enter':
         this.editTarget = null
+
         this.focus()
         return
 
@@ -49,12 +50,32 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
         break
 
       default:
+        if (e.metaKey || e.ctrlKey) {
+          /* Window System에 선택된 영역이 없다면, 셀을 복사/붙여넣기 한다. */
+          switch (e.key) {
+            case 'c':
+              const selection = window.getSelection()
+              if (!selection || !selection.anchorNode || selection.type != 'Range') {
+                /* 
+                  editor가 select 인 경우 자체 복사 기능이 없으므로 this.copy()를 사용하도록 하기 위해서, selection.type != 'Range' 조건을 추가했다.
+                  select인 경우에는 selection.type 이 'Caret' 이었다.
+                 */
+                this.copy()
+                e.preventDefault()
+              }
+              break
+            case 'v':
+              this.paste()
+              break
+          }
+        }
         return
     }
   } else {
     switch (key) {
       case 'Up':
       case 'ArrowUp':
+        this.setSelectBlock()
         if (e.metaKey || e.ctrlKey) {
           row = 0
         } else {
@@ -64,6 +85,7 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
 
       case 'Down':
       case 'ArrowDown':
+        this.setSelectBlock()
         if (e.metaKey || e.ctrlKey) {
           row = maxrow
         } else {
@@ -72,12 +94,14 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
         break
 
       case 'Enter':
+        this.setSelectBlock()
         this.startEditTarget(row, column)
         return
 
       case 'Left':
       case 'ArrowLeft':
       case 'Backspace':
+        this.setSelectBlock()
         if (e.metaKey || e.ctrlKey) {
           column = 0
         } else {
@@ -87,6 +111,7 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
 
       case 'Right':
       case 'ArrowRight':
+        this.setSelectBlock()
         if (e.metaKey || e.ctrlKey) {
           column = maxcolumn
         } else {
@@ -96,6 +121,7 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
 
       case 'Tab':
         this.editTarget = null
+        this.setSelectBlock()
         if (e.shiftKey) {
           column = Math.max(0, column - 1)
         } else {
@@ -106,23 +132,28 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
 
       case 'PageUp':
         /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
+        this.setSelectBlock()
         row = Math.max(0, row - 10)
         break
 
       case 'PageDown':
       case ' ':
+        this.setSelectBlock()
         row = Math.min(maxrow, row + 10)
         break
 
       case 'Esc':
       case 'Escape':
+        this.setSelectBlock()
         return
 
       case 'End':
+        this.setSelectBlock()
         row = maxrow
         break
 
       case 'Home':
+        this.setSelectBlock()
         row = 0
         break
 
@@ -130,13 +161,23 @@ export async function dataGridBodyKeydownHandler(this: DataGridBody, e: Keyboard
         if (e.metaKey || e.ctrlKey) {
           switch (e.key) {
             case 'c':
-              this.copy()
+              const selection = window.getSelection()
+              if (!selection || !selection.anchorNode || selection.type != 'Range') {
+                /* 
+                  에디터 상태가 아닌 경우에도, selection.type != 'Range' 조건을 추가해서,
+                  셀렉션이 된 상태에서는 기본 동작으로 텍스트 복사를 할 수 있도록 했다.
+                  보통은, 싱글 필드가 셀렉션박스로 지정된 경우에 자체 텍스트의 일부를 복사하기 위해서 필요하다.
+                 */
+                this.copy()
+                e.preventDefault()
+              }
               break
             case 'v':
               this.paste()
               break
           }
         } else if (key.length === 1) {
+          this.setSelectBlock()
           this.startEditTarget(row, column)
         }
         return