@operato/scene-gantt 2.0.0-beta.0 → 2.0.0-beta.1

package/src/gantt.ts

@@ -0,0 +1,261 @@
+import { i18next } from '@operato/i18n'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'date',
+      label: 'gantt-from-date',
+      name: 'fromDate',
+      defaultValue: () =>
+        new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */
+    },
+    {
+      type: 'date',
+      label: 'gantt-to-date',
+      name: 'toDate',
+      defaultValue: () => new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
+    },
+    {
+      type: 'boolean',
+      label: 'gantt-gridline',
+      name: 'gridline',
+      defaultValue: true
+    },
+    {
+      type: 'select',
+      label: 'gantt-time-scale',
+      name: 'timeScale',
+      property: {
+        options: [
+          {
+            display: 'week-day',
+            value: 'week-day'
+          },
+          {
+            display: 'month-week',
+            value: 'month-week'
+          },
+          {
+            display: 'quarter-week',
+            value: 'quarter-week'
+          },
+          {
+            display: 'year-quarter',
+            value: 'year-quarter'
+          }
+        ]
+      },
+      defaultValue: 'week-day'
+    },
+    {
+      type: 'column-config',
+      label: 'gantt-column-config',
+      name: 'columnConfig',
+      defaultValue: () => [
+        { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: '50px', order: 1 },
+        {
+          name: 'section',
+          label: i18next.t('label.gantt-task-section') || 'section',
+          visible: true,
+          width: '100px',
+          order: 2
+        },
+        {
+          name: 'title',
+          label: i18next.t('label.gantt-task-title') || 'title',
+          visible: true,
+          width: '150px',
+          order: 3
+        },
+        { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: '100px', order: 4 },
+        {
+          name: 'startDate',
+          label: i18next.t('label.gantt-task-start-date') || 'start date',
+          visible: true,
+          width: '100px',
+          order: 5
+        },
+        {
+          name: 'endDate',
+          label: i18next.t('label.gantt-task-end-date') || 'end date',
+          visible: true,
+          width: '100px',
+          order: 6
+        },
+        { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: '100px', order: 7 },
+        {
+          name: 'progress',
+          label: i18next.t('label.gantt-task-progress') || 'progress',
+          visible: true,
+          width: '100px',
+          order: 8
+        },
+        {
+          name: 'dependsOn',
+          label: i18next.t('label.gantt-task-previous') || 'previous',
+          visible: true,
+          width: '100px',
+          order: 9
+        }
+      ]
+    }
+  ],
+  'value-property': 'tasks'
+}
+
+import '@operato/gantt/ox-gantt.js'
+
+import { OxGantt } from '@operato/gantt/dist/src/ox-gantt.js'
+import { Task } from '@operato/gantt/dist/src/types.js'
+
+import { Component, HTMLOverlayContainer, Properties, error } from '@hatiolab/things-scene'
+
+function getGlobalScale(component: GanttScene) {
+  var scale = { x: 1, y: 1 }
+  var parent: Component = component
+
+  while (parent) {
+    let { x, y } = parent.get('scale') || { x: 1, y: 1 }
+    scale.x *= x || 1
+    scale.y *= y || 1
+
+    parent = parent.parent
+  }
+  return scale
+}
+
+export default class GanttScene extends HTMLOverlayContainer {
+  static get nature() {
+    return NATURE
+  }
+
+  private _tasks: Task[] = []
+
+  private listenTo?: Component
+  private listener? = function (this: GanttScene, after: any) {
+    after.scale && this.rescale()
+  }.bind(this)
+
+  private gantt!: OxGantt
+
+  createElement() {
+    super.createElement()
+
+    this.gantt = document.createElement('ox-gantt') as OxGantt
+    this.gantt.style.width = 'inherit'
+    this.gantt.style.height = 'inherit'
+
+    this.element.appendChild(this.gantt)
+
+    this.rescale()
+
+    const { fromDate, toDate, gridline, columnConfig, timeScale = 'week-day' } = this.state
+
+    this.gantt.fromDate = fromDate
+    this.gantt.toDate = toDate
+    this.gantt.extendGridLines = gridline
+    this.gantt.columnConfig = columnConfig
+    this.gantt.timeScale = timeScale
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  /*
+   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+   *
+   * ThingsComponent state => HTML element properties
+   */
+
+  setElementProperties(div: HTMLDivElement) {
+    this.rescale()
+  }
+
+  /*
+   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+   */
+  reposition() {
+    super.reposition()
+  }
+
+  get tagName() {
+    return 'div'
+  }
+
+  get tasks() {
+    return this.get('tasks')
+  }
+
+  set tasks(tasks) {
+    this.set('tasks', tasks)
+    ;(this.gantt as OxGantt).tasks = tasks
+  }
+
+  ready() {
+    super.ready()
+
+    if (this.rootModel) {
+      this.listenTo = this.rootModel
+      this.rootModel.on('change', this.listener!)
+    }
+  }
+
+  removed() {
+    if (this.listenTo) {
+      this.listenTo.off('change', this.listener!)
+
+      delete this.listenTo
+      delete this.listener
+    }
+  }
+
+  /*
+   * gantt은 scale된 상태에서 마우스/터치 포지션을 정확히 매핑하지 못하므로, 타임 범위를 정상적으로 지정하지 못한다.
+   * 따라서, gantt의 경우에는 부모의 스케일의 역으로 transform해서, scale을 1로 맞추어야 한다.
+   */
+  rescale() {
+    var scale = getGlobalScale(this)
+
+    var sx = 1 / scale.x
+    var sy = 1 / scale.y
+
+    var transform = `scale(${sx}, ${sy})`
+
+    ;['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach(prefix => {
+      this.gantt!.style[(prefix + 'transform') as any] = transform
+      this.gantt!.style[(prefix + 'transform-origin') as any] = '0px 0px'
+    })
+
+    var { width, height } = this.state
+    this.gantt!.style.width = width * scale.x + 'px'
+    this.gantt!.style.height = height * scale.y + 'px'
+
+    this.gantt.requestUpdate()
+  }
+
+  onchange(props: Properties) {
+    ;['fromDate', 'toDate', 'timeScale', 'columnConfig'].forEach(prop => {
+      if (prop in props) {
+        ;(this.gantt as any)[prop] = this.state[prop]
+      }
+    })
+
+    if ('gridline' in props) {
+      ;(this.gantt as OxGantt).extendGridLines = this.state['gridline']
+    }
+
+    this.rescale()
+  }
+}
+
+Component.register('gantt', GanttScene)

package/src/index.ts

@@ -1 +1,2 @@
+export { default as GanttScene } from './gantt'
 export { default as WellstekGanttScene } from './wellstek-gantt'

package/src/templates/gantt.ts

@@ -0,0 +1,16 @@
+const icon = new URL('../../icons/gantt.png', import.meta.url).href
+
+export default {
+  type: 'gantt',
+  description: 'gantt',
+  group: 'etc',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  icon,
+  model: {
+    type: 'gantt',
+    left: 150,
+    top: 150,
+    width: 300,
+    height: 200
+  }
+}

package/src/templates/index.ts

@@ -1,3 +1,4 @@
+import Gantt from './gantt'
 import WellstekGantt from './wellstek-gantt'
 
-export default [WellstekGantt]
+export default [Gantt, WellstekGantt]

package/things-scene.config.js

@@ -1,5 +1,7 @@
+import editors from './dist/editors'
 import templates from './dist/templates'
 
 export default {
-  templates
+  templates,
+  editors
 }

package/translations/en.json

@@ -1,4 +1,6 @@
 {
+  "component.gantt": "gantt",
+  "component.wellstek-gantt": "Wellstek Gantt",
   "label.row-height": "row height",
   "label.row-padding": "row padding",
   "label.column-offset": "column offset",
@@ -8,5 +10,19 @@
   "label.column-unit": "column unit",
   "label.fit-width": "fit width",
   "label.from": "from",
-  "label.to": "to"
+  "label.to": "to",
+  "label.gantt-task-id": "ID",
+  "label.gantt-task-section": "section",
+  "label.gantt-task-title": "title",
+  "label.gantt-task-type": "type",
+  "label.gantt-task-start-date": "start date",
+  "label.gantt-task-end-date": "end date",
+  "label.gantt-task-tags": "tags",
+  "label.gantt-task-progress": "progress",
+  "label.gantt-task-previous": "previous",
+  "label.gantt-gridline": "gridline",
+  "label.gantt-from-date": "from date",
+  "label.gantt-to-date": "to date",
+  "label.gantt-column-config": "column config.",
+  "label.gantt-time-scale": "time scale"
 }

package/translations/ja.json

@@ -1,4 +1,6 @@
 {
+  "component.gantt": "gantt",
+  "component.wellstek-gantt": "Wellstek Gantt",
   "label.row-height": "row height",
   "label.row-padding": "row padding",
   "label.column-offset": "column offset",
@@ -8,5 +10,19 @@
   "label.column-unit": "column unit",
   "label.fit-width": "fit width",
   "label.from": "from",
-  "label.to": "to"
+  "label.to": "to",
+  "label.gantt-task-id": "ID",
+  "label.gantt-task-section": "セクション",
+  "label.gantt-task-title": "タイトル",
+  "label.gantt-task-type": "タイプ",
+  "label.gantt-task-start-date": "開始日",
+  "label.gantt-task-end-date": "終了日",
+  "label.gantt-task-tags": "タグ",
+  "label.gantt-task-progress": "進捗",
+  "label.gantt-task-previous": "前",
+  "label.gantt-gridline": "グリッド線",
+  "label.gantt-from-date": "開始日",
+  "label.gantt-to-date": "終了日",
+  "label.gantt-column-config": "列設定.",
+  "label.gantt-time-scale": "時間軸スケール"
 }

package/translations/ko.json

@@ -1,4 +1,5 @@
 {
+  "component.gantt": "간트차트",
   "component.wellstek-gantt": "Wellstek Gantt",
   "label.row-height": "row height",
   "label.row-padding": "row padding",
@@ -9,5 +10,19 @@
   "label.column-unit": "column unit",
   "label.fit-width": "fit width",
   "label.from": "from",
-  "label.to": "to"
+  "label.to": "to",
+  "label.gantt-task-id": "아이디",
+  "label.gantt-task-section": "섹션",
+  "label.gantt-task-title": "제목",
+  "label.gantt-task-type": "유형",
+  "label.gantt-task-start-date": "시작 날짜",
+  "label.gantt-task-end-date": "종료 날짜",
+  "label.gantt-task-tags": "태그",
+  "label.gantt-task-progress": "진행 상황",
+  "label.gantt-task-previous": "이전",
+  "label.gantt-gridline": "그리드라인",
+  "label.gantt-from-date": "시작일",
+  "label.gantt-to-date": "완료일",
+  "label.gantt-column-config": "컬럼 설정",
+  "label.gantt-time-scale": "시간축 스케일"
 }

package/translations/ms.json

@@ -1,4 +1,6 @@
 {
+  "component.gantt": "gantt",
+  "component.wellstek-gantt": "Wellstek Gantt",
   "label.row-height": "row height",
   "label.row-padding": "row padding",
   "label.column-offset": "column offset",
@@ -8,5 +10,19 @@
   "label.column-unit": "column unit",
   "label.fit-width": "fit width",
   "label.from": "from",
-  "label.to": "to"
+  "label.to": "to",
+  "label.gantt-task-id": "id",
+  "label.gantt-task-section": "seksyen",
+  "label.gantt-task-title": "tajuk",
+  "label.gantt-task-type": "jenis",
+  "label.gantt-task-start-date": "tarikh mula",
+  "label.gantt-task-end-date": "tarikh tamat",
+  "label.gantt-task-tags": "tag",
+  "label.gantt-task-progress": "kemajuan",
+  "label.gantt-task-previous": "sebelumnya",
+  "label.gantt-gridline": "garis grid",
+  "label.gantt-from-date": "tarikh mula",
+  "label.gantt-to-date": "tarikh tamat",
+  "label.gantt-column-config": "konfigurasi lajur.",
+  "label.gantt-time-scale": "skala masa"
 }

package/translations/zh.json

@@ -1,4 +1,5 @@
 {
+  "component.gantt": "gantt",
   "component.wellstek-gantt": "Wellstek Gantt",
   "label.row-height": "row height",
   "label.row-padding": "row padding",
@@ -9,5 +10,19 @@
   "label.column-unit": "column unit",
   "label.fit-width": "fit width",
   "label.from": "from",
-  "label.to": "to"
+  "label.to": "to",
+  "label.gantt-task-id": "ID",
+  "label.gantt-task-section": "部分",
+  "label.gantt-task-title": "标题",
+  "label.gantt-task-type": "类型",
+  "label.gantt-task-start-date": "开始日期",
+  "label.gantt-task-end-date": "结束日期",
+  "label.gantt-task-tags": "标签",
+  "label.gantt-task-progress": "进度",
+  "label.gantt-task-previous": "以前",
+  "label.gantt-gridline": "网格线",
+  "label.gantt-from-date": "起始日期",
+  "label.gantt-to-date": "结束日期",
+  "label.gantt-column-config": "列配置.",
+  "label.gantt-time-scale": "时间轴刻度"
 }