@operato/scene-gantt 2.0.0-beta.0

package/src/index.ts

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

package/src/templates/index.ts

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

package/src/templates/wellstek-gantt.ts

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

package/src/wellstek-gantt.ts

@@ -0,0 +1,190 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'row-height',
+      name: 'rowHeight',
+      defaultValue: 35
+    },
+    {
+      type: 'number',
+      label: 'row-padding',
+      name: 'rowPadding',
+      defaultValue: 5
+    },
+    {
+      type: 'number',
+      label: 'column-offset',
+      name: 'columnOffset',
+      defaultValue: 15
+    },
+    {
+      type: 'number',
+      label: 'magnet-offset',
+      name: 'magnetOffset',
+      defaultValue: 15
+    },
+    {
+      type: 'number',
+      label: 'table-width',
+      name: 'tableWidth',
+      defaultValue: 140
+    },
+    {
+      type: 'number',
+      label: 'min-width',
+      name: 'minWidth',
+      defaultValue: 1500
+    },
+    {
+      type: 'string',
+      label: 'column-unit',
+      name: 'columnUnit',
+      defaultValue: 'hour'
+    },
+    {
+      type: 'boolean',
+      label: 'fit-width',
+      name: 'fitWidth',
+      defaultValue: false
+    },
+    {
+      type: 'date',
+      label: 'from',
+      name: 'from',
+      defaultValue: '09/25/2023'
+    },
+    {
+      type: 'date',
+      label: 'to',
+      name: 'to',
+      defaultValue: '10/11/2023'
+    }
+  ]
+}
+
+import moment from 'moment'
+import 'wellstek-gantt'
+import { MomentWellstekGanttDateAdapter, WellstekGanttDependencies, WellstekGanttTable } from 'wellstek-gantt'
+
+import { data } from './data'
+
+import { Component, HTMLOverlayContainer, Properties, error } from '@hatiolab/things-scene'
+
+export default class WellstekGanttScene extends HTMLOverlayContainer {
+  static get nature() {
+    return NATURE
+  }
+
+  oncreate_element(element: HTMLElement) {
+    element.style.width = '100%'
+    element.style.height = '100%'
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  /*
+   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+   *
+   * ThingsComponent state => HTML element properties
+   */
+  setElementProperties() {
+    const element = this.element
+
+    const {
+      rowHeight = 35,
+      rowPadding = 5,
+      columnOffset = 15,
+      magnetOffset = 15,
+      tableWidth = 140,
+      minWidth = 1500,
+      columnUnit = 'hour',
+      fitWidth = false,
+      from,
+      to
+    } = this.state
+
+    const options = {
+      rows: data.rows,
+      tasks: data.tasks
+    }
+
+    ;(element as any).dateAdapter = new MomentWellstekGanttDateAdapter(moment)
+    ;(element as any).rows = options.rows
+    ;(element as any).tasks = options.tasks
+    ;(element as any).columnOffset = columnOffset
+    ;(element as any).magnetOffset = magnetOffset
+    ;(element as any).rowHeight = rowHeight
+    ;(element as any).rowPadding = rowPadding
+    ;(element as any).headers = [
+      { unit: 'day', format: 'MM-DD' },
+      { unit: 'hour', format: 'HH:mm', offset: 12 }
+    ]
+    ;(element as any).fitWidth = fitWidth
+    ;(element as any).minWidth = minWidth
+    ;(element as any).from = new Date(from).getTime()
+    ;(element as any).to = new Date(to).getTime()
+    ;(element as any).tableHeader = {
+      //   title: '테스트 라벨',
+      //   property: 'label',
+      //   isFilter: true
+      // }
+      // {
+      title: 'Label9',
+      property: 'label',
+      width: 140,
+      type: 'tree',
+      isFilter: true
+    }
+    ;(element as any).tableWidth = tableWidth
+    ;(element as any).ganttTableModules = [WellstekGanttTable]
+    ;(element as any).ganttBodyModules = [WellstekGanttDependencies]
+    ;(element as any).columnUnit = columnUnit
+  }
+
+  /*
+   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+   */
+  reposition() {
+    super.reposition()
+  }
+
+  get tagName() {
+    return 'wellstek-gantt'
+  }
+
+  onchange(props: Properties) {
+    ;[
+      'rowHeight',
+      'rowPadding',
+      'columnOffset',
+      'magnetOffset',
+      'tableWidth',
+      'minWidth',
+      'columnUnit',
+      'fitWidth'
+    ].forEach(prop => {
+      if (prop in props) {
+        ;(this.element as any)[prop] = this.state[prop]
+      }
+    })
+    ;['from', 'to'].forEach(prop => {
+      if (prop in props) {
+        ;(this.element as any)[prop] = new Date(this.state[prop]).getTime()
+      }
+    })
+  }
+}
+
+Component.register('wellstek-gantt', WellstekGanttScene)

package/things-scene.config.js

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

package/translations/en.json

@@ -0,0 +1,12 @@
+{
+  "label.row-height": "row height",
+  "label.row-padding": "row padding",
+  "label.column-offset": "column offset",
+  "label.magnet-offset": "magnet offset",
+  "label.table-width": "table width",
+  "label.min-width": "min width",
+  "label.column-unit": "column unit",
+  "label.fit-width": "fit width",
+  "label.from": "from",
+  "label.to": "to"
+}

package/translations/ja.json

@@ -0,0 +1,12 @@
+{
+  "label.row-height": "row height",
+  "label.row-padding": "row padding",
+  "label.column-offset": "column offset",
+  "label.magnet-offset": "magnet offset",
+  "label.table-width": "table width",
+  "label.min-width": "min width",
+  "label.column-unit": "column unit",
+  "label.fit-width": "fit width",
+  "label.from": "from",
+  "label.to": "to"
+}

package/translations/ko.json

@@ -0,0 +1,13 @@
+{
+  "component.wellstek-gantt": "Wellstek Gantt",
+  "label.row-height": "row height",
+  "label.row-padding": "row padding",
+  "label.column-offset": "column offset",
+  "label.magnet-offset": "magnet offset",
+  "label.table-width": "table width",
+  "label.min-width": "min width",
+  "label.column-unit": "column unit",
+  "label.fit-width": "fit width",
+  "label.from": "from",
+  "label.to": "to"
+}

package/translations/ms.json

@@ -0,0 +1,12 @@
+{
+  "label.row-height": "row height",
+  "label.row-padding": "row padding",
+  "label.column-offset": "column offset",
+  "label.magnet-offset": "magnet offset",
+  "label.table-width": "table width",
+  "label.min-width": "min width",
+  "label.column-unit": "column unit",
+  "label.fit-width": "fit width",
+  "label.from": "from",
+  "label.to": "to"
+}

package/translations/zh.json

@@ -0,0 +1,13 @@
+{
+  "component.wellstek-gantt": "Wellstek Gantt",
+  "label.row-height": "row height",
+  "label.row-padding": "row padding",
+  "label.column-offset": "column offset",
+  "label.magnet-offset": "magnet offset",
+  "label.table-width": "table width",
+  "label.min-width": "min width",
+  "label.column-unit": "column unit",
+  "label.fit-width": "fit width",
+  "label.from": "from",
+  "label.to": "to"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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"]
+}