@operato/scene-grist 0.0.9

package/helps/scene/component/grist.md

@@ -0,0 +1,26 @@
+# grist
+
+It is a component that expresses multiple record data in the form of a data grid or data list.
+Data grid is suitable for web application UI, and data list is suitable for mobile application.
+This can be set with the grist mode attribute.
+
+## Properties
+
+- grist mode
+  - Grid: Data grid format that organizes multi-columns in a table format
+  - list: Data list format that composes multi-column information in the form of an item block
+  - Depends on device : Depending on the current display, it is automatically selected in the form of a data grid or a data list.
+- config
+  - Configuration for grist
+  - It consists of column, header, record and pagination information.
+- appendable
+  - Set whether to provide UI function so that new record can be added
+- paginatable
+  - Set whether to provide the footer area UI function that provides pagination function in the footer area
+- scale
+  - Set scale of grist content
+  - The minimum value is 0.1, and it can be increased by 0.1.
+  - Default value is 1
+- bound data
+  - focused row : The current record selected or moved by the user with the mouse or keyboard is sent as the data attribute. Since only one record is focused, the data is in the form of a single object.
+  - selected rows : Records selected by the user through the selection checkbox are sent as data attributes. Since multiple records can be selected, the data becomes an array of records.

package/helps/scene/component/grist.zh.md

@@ -0,0 +1,26 @@
+# grist
+
+它是一个以数据网格或数据列表的形式表示多个记录数据的组件。
+数据网格适用于 Web 应用程序 UI，数据列表适用于移动应用程序。
+可以使用 grist 模式属性进行移动端应用设置。
+
+## Properties
+
+- 模式
+  - Grid: 数据网格格式，以表格格式组织多列
+  - list: 以项目块的形式组成多列信息的数据列表格式
+  - Depends on device : 根据当前设备自动选择数据网格或数据列表
+- 配置
+  - 用于 grist 的配置
+  - 包含表列、表头、数据、分页信息
+- 可增加新行
+  - 设置是否提供 UI 功能，以便可以添加新记录
+- 可分页
+  - 设置是否提供在页脚区域中提供分页功能的页脚区域 UI 功能
+- scale
+  - Set scale of grist content
+  - The minimum value is 0.1, and it can be increased by 0.1.
+  - Default value is 1
+- 绑定数据
+  - focused row : 用户选择的或移动数据的属性将会传递出去，只传递一行数据
+  - selected rows : 用户选择的所有数据会将会传递出去，数据将会作为 Array 发送。

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@operato/scene-grist",
+  "description": "Grist UI component for things-scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.9",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/grist"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@operato/data-grist": "^0.2.35",
+    "uuid": "^3.4.0"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.20",
+    "@operato/board": "^0.2.35",
+    "@things-factory/builder": "^4.0.6",
+    "@things-factory/operato-board": "^4.0.6",
+    "@types/chance": "^1.1.3",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "594dd5222e6d477a4cac888d564814c3340e6523"
+}

package/src/editors/index.ts

@@ -0,0 +1 @@
+export default []

package/src/grist-action.ts

@@ -0,0 +1,362 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * grist 컴포넌트를 보조하여 grist의 각종 동작을 수행하는 컴포넌트.
+ */
+
+import { Component, Properties, RectPath, ValueHolder } from '@hatiolab/things-scene'
+import { GristData, GristRecord, SorterConfig } from '@operato/data-grist/src/types.js'
+
+import { DataGrist } from '@operato/data-grist'
+import SceneGrist from './grist'
+import uuid from 'uuid'
+
+export enum ACTIONS {
+  GET_ALL_ROWS = 'getAllRows',
+  COMMIT = 'commit',
+  GET_SELECTED = 'getSelectedRows',
+  GET_DIRTY = 'getDirtyRows',
+  ADD_ROW = 'addRow',
+  DELETE_SELECTED_ROWS = 'deleteSelectedRowsSoftly',
+  GET_PAGE_INFO = 'getPageInfo'
+}
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      // 대상 Grist
+      type: 'id-input',
+      label: 'target-grist',
+      name: 'target',
+      property: {
+        component: 'grist'
+      }
+    },
+    {
+      // 동작
+      type: 'select',
+      label: 'action',
+      name: 'action',
+      property: {
+        options: [
+          {
+            // 페이지네이션 정보 가져오기
+            display: 'Get page information',
+            value: ACTIONS.GET_PAGE_INFO
+          },
+          {
+            // 모든 레코드 데이터 가져오기
+            display: 'Get all rows',
+            value: ACTIONS.GET_ALL_ROWS
+          },
+          {
+            // 체크된 레코드 데이터 가져오기
+            display: 'Get selected rows',
+            value: ACTIONS.GET_SELECTED
+          },
+          {
+            // 변경 사항이 있는 데이터 가져오기
+            display: 'Get dirty rows',
+            value: ACTIONS.GET_DIRTY
+          },
+          {
+            // 행 추가
+            display: 'Add a row',
+            value: ACTIONS.ADD_ROW
+          },
+          {
+            // 선택 행 삭제
+            display: 'Delete selected rows',
+            value: ACTIONS.DELETE_SELECTED_ROWS
+          },
+          {
+            // 변경 사항을 데이터에 적용
+            display: 'Commit',
+            value: ACTIONS.COMMIT
+          }
+        ]
+      }
+    },
+    {
+      // 뷰어 시작 시 자동 실행 여부
+      type: 'checkbox',
+      label: 'run-at-startup',
+      name: 'runAtStartup'
+    },
+    {
+      // 행 추가 시의 포맷
+      type: 'textarea',
+      label: 'record-adder-format',
+      name: 'recordFormat'
+    }
+  ],
+  help: 'scene/component/grist-action'
+}
+
+export default class GristAction extends ValueHolder(RectPath(Component)) {
+  static get nature() {
+    return NATURE
+  }
+
+  // grist의 fetchHandler를 사용할 때 이 컴포넌트를 판별할 ID
+  private uuid = uuid.v4()
+  private _data: any
+
+  ready() {
+    // 뷰어 시작시에도 action 값이 getPageInfo로 되어 있을 경우 fetchHandler를 등록하기 위해 onchange를 호출함
+    this.onchange({ action: this.state.action })
+    if (this.state.runAtStartup) this.doAction()
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  onclick() {
+    // 컴포넌트 클릭 시 동작
+    this.doAction()
+  }
+
+  onchange(after: Properties) {
+    // value 값이 바뀌면 동작
+    if ('value' in after) {
+      this.doAction()
+    }
+
+    // action 값이 바뀌면 getPageInfo인지 확인하고 grist에 fetchHandler를 등록하거나 폐기함
+    if ('action' in after) {
+      const gristComponent = this.targetGristComponent
+
+      if (gristComponent) {
+        if (after.action == ACTIONS.GET_PAGE_INFO)
+          //@ts-ignore
+          gristComponent.beforeFetchFuncs[this.uuid] = fetchedData => {
+            //@ts-ignore
+            this.data = this.getPageInfoFrom(null, fetchedData)
+            this.doDataMap()
+          }
+        //@ts-ignore
+        else delete gristComponent.beforeFetchFuncs[this.uuid]
+      }
+    }
+  }
+
+  // 데이터 매핑을 수동으로 실행하기 위해 기존의 메소드를 무효화
+  executeMappings() {
+    console.debug(
+      "[@operato/data-grist] The method 'executeMappings' is overriden in the component 'grist-action', because of to prevent executing when initialize."
+    )
+  }
+
+  // 데이터 매핑을 수동으로 조작하기 위한 새 메소드
+  doDataMap() {
+    super.executeMappings()
+  }
+
+  // action 값에 따라 동작
+  doAction(action?: ACTIONS) {
+    if (!this.app.isViewMode) {
+      return
+    }
+
+    // 파라미터가 명시되어있지 않으면 컴포넌트 속성에서 action 값을 가져옴
+    var { action: storedAction } = this.state
+    action = action || storedAction
+
+    // 대상 Grist 컴포넌트
+    var grist = this.targetGristElement
+    if (!grist) return
+
+    var data
+    switch (action) {
+      case ACTIONS.GET_ALL_ROWS:
+        data = grist.grist.data
+        break
+      case ACTIONS.COMMIT:
+        grist.commit()
+        break
+      case ACTIONS.GET_SELECTED:
+        data = {
+          patches: this.buildPatches(grist.selected),
+          original: grist.selected
+        }
+        break
+      case ACTIONS.GET_DIRTY:
+        data = this.assortDirties(grist)
+        break
+      case ACTIONS.ADD_ROW:
+        {
+          var records = grist.dirtyData.records || []
+
+          let recordFormat
+          try {
+            recordFormat = eval(`(${this.state.recordFormat})`)
+          } catch (e) {
+            console.log('Invalid JSON format. It will be assumed as empty object.\n', e)
+            recordFormat = {}
+          }
+          records.push({ ...recordFormat, __dirty__: '+' })
+          this.refreshGrist(grist)
+        }
+        break
+      case ACTIONS.DELETE_SELECTED_ROWS:
+        {
+          var records = grist.dirtyData.records || []
+
+          //@ts-ignore
+          records.forEach((record, idx) => {
+            if (record['__selected__']) {
+              if (record['__dirty__'] == '+') delete records[idx]
+              else record['__dirty__'] = '-'
+            }
+          })
+          grist.dirtyData.records = records.flat()
+          this.refreshGrist(grist)
+        }
+        break
+      case ACTIONS.GET_PAGE_INFO:
+        data = this.getPageInfoFrom(grist)
+        break
+    }
+
+    // 이 컴포넌트의 data 값이 바뀌는 동작은 데이터 매핑까지 실행함
+    if (data) {
+      this.data = data
+      this.doDataMap()
+    }
+  }
+
+  // 대상 grist 컴포넌트의 레코드를 새로고침
+  refreshGrist(grist: DataGrist) {
+    grist = grist || this.targetGristElement
+    if (!grist) return
+
+    //@ts-ignore
+    grist.dataProvider.onRecordChange()
+    grist.grist.data = { ...grist.dirtyData }
+  }
+
+  // 변경 사항이 있는 레코드의 경우, CUD를 분류해서 반환함
+  assortDirties(grist: DataGrist) {
+    const dirties = grist.dirtyRecords
+    var patches = this.buildPatches(dirties)
+    var records = {
+      original: dirties,
+      patches,
+      created: [] as GristRecord[],
+      updated: [] as GristRecord[],
+      deleted: [] as GristRecord[]
+    }
+
+    patches.forEach((record: GristRecord) => {
+      switch (record['cuFlag']) {
+        case 'M':
+          records.updated.push(record)
+          break
+        case '+':
+          records.created.push(record)
+          break
+        case '-':
+          records.deleted.push(record)
+          break
+      }
+    })
+    return records
+  }
+
+  // 페이지네이션 정보를 가져옴
+  getPageInfoFrom(grist: DataGrist, fetchedData?: GristData) {
+    //@ts-ignore
+    var { page = 1, limit = 20, sorters = [] } = fetchedData || (grist && grist.dataProvider) || pagination(grist)
+
+    sorters = sorters.map((sorter: SorterConfig) => {
+      sorter.desc = sorter.desc ? true : false
+      return sorter
+    })
+    return { page, limit, sorters }
+
+    function pagination(grist: DataGrist) {
+      var config = grist && grist.config && grist.config.pagination
+      if (config)
+        return {
+          page: config.page,
+          limit: config.limit || (config.pages && config.pages[0])
+        }
+      else return {}
+    }
+  }
+
+  // 레코드들을 서버 공통 resolver에 맞는 포맷으로 만듦
+  buildPatches(patches: GristRecord[]): GristRecord[] {
+    return patches.map(patch => {
+      let patchField: { [key: string]: any } = patch.id ? { id: patch.id } : {}
+      const dirtyFields = patch.__dirtyfields__
+
+      for (let key in dirtyFields) {
+        patchField[key] = dirtyFields[key].after
+      }
+      patchField.cuFlag = patch.__dirty__
+
+      return patchField
+    })
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { top, left, height, width, fillStyle = 'transparent' } = this.model
+
+    // background의 색상
+    context.beginPath()
+    context.rect(left, top, width, height)
+
+    context.fillStyle = fillStyle
+    context.fill()
+
+    // value의 색상
+    context.beginPath()
+
+    var drawValue = width - (width * Math.max(Math.min(this.animValue, 100), 0)) / 100
+    drawValue = Math.max(Math.min(drawValue, width), 0)
+
+    context.rect(left + drawValue, top, width - drawValue, height)
+
+    this.drawFill(context)
+
+    context.closePath()
+
+    context.beginPath()
+
+    context.rect(left, top, width, height)
+  }
+
+  postrender(context: CanvasRenderingContext2D) {
+    this.drawStroke(context)
+    this.drawText(context)
+  }
+
+  get controls() {
+    return []
+  }
+
+  get targetGristComponent(): SceneGrist {
+    var { target } = this.state
+    return this.root.findById(target) as SceneGrist
+  }
+
+  get targetGristElement(): DataGrist | undefined {
+    return this.targetGristComponent?.grist
+  }
+
+  // @ts-ignore
+  get data() {
+    return this._data
+  }
+
+  set data(data) {
+    this._data = data
+  }
+}
+
+Component.register('grist-action', GristAction)