@operato/scene-gantt 8.0.0-beta.1 → 8.0.0-beta.2

package/src/editors/index.ts

@@ -1,8 +0,0 @@
-import '@operato/property-editor/ox-property-editor-table-column-config.js'
-
-export default [
-  {
-    type: 'column-config',
-    element: 'ox-property-editor-table-column-config'
-  }
-]

package/src/gantt.ts

@@ -1,265 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE: ComponentNature = {
-  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: '50', order: 1 },
-      //     {
-      //       name: 'section',
-      //       label: i18next.t('label.gantt-task-section') || 'section',
-      //       visible: true,
-      //       width: '100',
-      //       order: 2
-      //     },
-      //     {
-      //       name: 'title',
-      //       label: i18next.t('label.gantt-task-title') || 'title',
-      //       visible: true,
-      //       width: '150',
-      //       order: 3
-      //     },
-      //     { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: '100', order: 4 },
-      //     {
-      //       name: 'startDate',
-      //       label: i18next.t('label.gantt-task-start-date') || 'start date',
-      //       visible: true,
-      //       width: '100',
-      //       order: 5
-      //     },
-      //     {
-      //       name: 'endDate',
-      //       label: i18next.t('label.gantt-task-end-date') || 'end date',
-      //       visible: true,
-      //       width: '100',
-      //       order: 6
-      //     },
-      //     { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: '100', order: 7 },
-      //     {
-      //       name: 'progress',
-      //       label: i18next.t('label.gantt-task-progress') || 'progress',
-      //       visible: true,
-      //       width: '100',
-      //       order: 8
-      //     },
-      //     {
-      //       name: 'dependsOn',
-      //       label: i18next.t('label.gantt-task-previous') || 'previous',
-      //       visible: true,
-      //       width: '100',
-      //       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, ComponentNature, 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.columnConfigProvider = () => 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() {
-    if (!this.gantt) {
-      return
-    }
-
-    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 +0,0 @@
-export { default as GanttScene } from './gantt'

package/src/templates/gantt.ts

@@ -1,16 +0,0 @@
-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 +0,0 @@
-import Gantt from './gantt'
-
-export default [Gantt]

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2019", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "inlineSources": true,
-    "rootDir": "src",
-    "declaration": true,
-    "incremental": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}