@operato/gantt 7.0.60 → 7.0.69

package/src/ox-gantt-chart.ts

@@ -36,10 +36,10 @@ export class OxGanttChart extends LitElement {
         display: block;
         min-width: 100%;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));
         height: 40px;
-        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
         color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));
         position: sticky;
         top: 0;
         z-index: 1;
@@ -166,45 +166,52 @@ export class OxGanttChart extends LitElement {
     event.preventDefault()
     event.stopPropagation()
 
-    if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
-      this.container.scrollBy({
-        left: event.shiftKey ? event.deltaX : event.deltaY
-      })
-    } else {
-      const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9
-      this.ganttChartController.baseWidth *= zoomFactor
-
-      if (this.ganttChartController.baseWidth > 40) {
-        if (this.ganttChartController.level == 'week-day') {
-          this.ganttChartController.baseWidth = 40
-        } else {
-          this.ganttChartController.level = levelDown(this.ganttChartController.level)
-          this.ganttChartController.baseWidth = 30
-        }
-      } else if (this.ganttChartController.baseWidth < 30) {
-        if (this.ganttChartController.level == 'year-quarter') {
-          this.ganttChartController.baseWidth = 30
-        }
+    const deltaModeFactor =
+      event.deltaMode === WheelEvent.DOM_DELTA_LINE
+        ? 16
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+          ? this.container.clientHeight
+          : 1
+
+    // deltaY 값이 0인 경우, deltaX 값을 사용하여 확대/축소를 처리
+    const delta = event.deltaY !== 0 ? event.deltaY : event.deltaX
+    const adjustedDelta = delta * deltaModeFactor
+
+    // 확대/축소 처리
+    const zoomFactor = adjustedDelta < 0 ? 1.1 : 0.9
+    this.ganttChartController.baseWidth *= zoomFactor
+
+    if (this.ganttChartController.baseWidth > 40) {
+      if (this.ganttChartController.level === 'week-day') {
+        this.ganttChartController.baseWidth = 40
+      } else {
+        this.ganttChartController.level = levelDown(this.ganttChartController.level)
+        this.ganttChartController.baseWidth = 30
       }
-      if (this.ganttChartController.baseWidth < 20) {
-        this.ganttChartController.level = levelUp(this.ganttChartController.level)
+    } else if (this.ganttChartController.baseWidth < 30) {
+      if (this.ganttChartController.level === 'year-quarter') {
         this.ganttChartController.baseWidth = 30
       }
+    }
 
-      this.ganttChartController.updateTimeScale()
-      this.requestUpdate()
-
-      // Dispatch custom event to sync with ox-resource-chart
-      const customEvent = new CustomEvent('timescale-changed', {
-        detail: {
-          baseWidth: this.ganttChartController.baseWidth,
-          level: this.ganttChartController.level
-        },
-        bubbles: true,
-        composed: true
-      })
-      this.dispatchEvent(customEvent)
+    if (this.ganttChartController.baseWidth < 20) {
+      this.ganttChartController.level = levelUp(this.ganttChartController.level)
+      this.ganttChartController.baseWidth = 30
     }
+
+    this.ganttChartController.updateTimeScale()
+    this.requestUpdate()
+
+    // Dispatch custom event to sync with ox-resource-chart
+    const customEvent = new CustomEvent('timescale-changed', {
+      detail: {
+        baseWidth: this.ganttChartController.baseWidth,
+        level: this.ganttChartController.level
+      },
+      bubbles: true,
+      composed: true
+    })
+    this.dispatchEvent(customEvent)
   }
 
   handleDateRangeSelected(event: CustomEvent) {

package/src/ox-gantt.ts

@@ -1,8 +1,8 @@
 import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } from 'lit'
 import * as d3 from 'd3'
-import i18next from 'i18next'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 import './ox-gantt-chart.js'
@@ -13,7 +13,7 @@ import { OxResourceChart } from './ox-resource-chart.js'
 import { ColumnConfig, Task, TimeScale, Resource } from './types.js'
 
 @customElement('ox-gantt')
-export class OxGantt extends LitElement {
+export class OxGantt extends localize(i18next)(LitElement) {
   static styles = [
     MDTypeScaleStyles,
     ScrollbarStyles,
@@ -48,14 +48,14 @@ export class OxGantt extends LitElement {
         overflow: auto;
         overflow-y: overlay;
         box-sizing: border-box;
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
       }
 
       .resource-chart-container {
         flex: 1;
         padding: 0;
         box-sizing: border-box;
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
       }
 
       .task-container {
@@ -71,20 +71,20 @@ export class OxGantt extends LitElement {
         overflow: auto;
         overflow-y: overlay;
         box-sizing: border-box;
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
       }
 
       .task-chart-container {
         flex: 1;
         padding: 0;
         box-sizing: border-box;
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
       }
 
       table {
         width: 100%;
         border-collapse: collapse;
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
         margin: -1px;
         margin-right: 0;
       }
@@ -93,15 +93,15 @@ export class OxGantt extends LitElement {
         position: sticky;
         top: -1px;
         z-index: 1;
-        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
-        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));
         color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-outline));
         text-transform: capitalize;
       }
 
       th,
       td {
-        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
         padding: 4px;
         text-align: left;
       }
@@ -135,54 +135,56 @@ export class OxGantt extends LitElement {
   toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
   @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
   @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'
-  @property({ type: Array }) columnConfig: ColumnConfig[] = [
-    { 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
-    },
-    {
-      name: 'resources',
-      label: i18next.t('label.gantt-task-resources') || 'resources',
-      visible: true,
-      width: 100,
-      order: 10
-    }
-  ]
+  @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {
+    return [
+      { 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
+      },
+      {
+        name: 'resources',
+        label: i18next.t('label.gantt-task-resources') || 'resources',
+        visible: true,
+        width: 100,
+        order: 10
+      }
+    ]
+  }
 
   @state() selectedTaskId?: string
 
@@ -263,12 +265,13 @@ export class OxGantt extends LitElement {
   }
 
   renderTaskTable() {
-    if (!this.columnConfig) {
+    const columnConfig = this.columnConfigProvider()
+    if (!columnConfig) {
       return
     }
 
     // Sort columns by the configured order
-    const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order)
+    const sortedColumns = [...columnConfig].sort((a, b) => a.order - b.order)
 
     return html`
       <table class="task-table">
@@ -280,23 +283,23 @@ export class OxGantt extends LitElement {
           </tr>
         </thead>
         <tbody>
-          ${this.renderTaskRows(this.tasks)}
+          ${this.renderTaskRows(this.tasks, 0, columnConfig)}
         </tbody>
       </table>
     `
   }
 
-  renderTaskRows(tasks: Task[], level: number = 0): TemplateResult[] {
+  renderTaskRows(tasks: Task[], level: number = 0, columnConfig: ColumnConfig[]): TemplateResult[] {
     return tasks.flatMap(task => [
-      this.renderTaskRow(task, level),
-      ...this.renderTaskRows(task.children || [], level + 1)
+      this.renderTaskRow(task, level, columnConfig),
+      ...this.renderTaskRows(task.children || [], level + 1, columnConfig)
     ])
   }
 
-  renderTaskRow(task: Task, level: number) {
+  renderTaskRow(task: Task, level: number, columnConfig: ColumnConfig[]) {
     return html`
       <tr class=${this.selectedTaskId === task.id ? 'selected' : ''} @click=${() => this.selectTask(task.id)}>
-        ${this.columnConfig.map(col =>
+        ${columnConfig.map(col =>
           col.visible
             ? html`<td class="task-row" style="padding-left: ${col.name == 'title' ? level * 8 + 4 : 4}px">
                 ${this.getTaskFieldValue(task, col.name)}
@@ -401,31 +404,21 @@ export class OxGantt extends LitElement {
     if (target === this.taskTableContainer) {
       const newScrollTop = this.taskTableContainer.scrollTop
       this.ganttChart.setVerticalOffset(newScrollTop)
-
-      if (this.ganttChart.getVerticalOffset() !== newScrollTop) {
-        this.ganttChart.setVerticalOffset(newScrollTop)
-      }
     } else if (target === this.ganttChart) {
       const newScrollTop = this.ganttChart.getVerticalOffset()
       this.taskTableContainer.scrollTop = newScrollTop
-      this.ganttChart.setVerticalOffset(this.taskTableContainer.scrollTop)
 
       const newScrollLeft = this.ganttChart.getHorizontalOffset()
       this.resourceChart.setHorizontalOffset(newScrollLeft)
     } else if (target === this.resourceChart) {
-      const newScrollTop = this.ganttChart.getVerticalOffset()
+      const newScrollTop = this.resourceChart.getVerticalOffset()
       this.resourceTableContainer.scrollTop = newScrollTop
-      this.resourceChart.setVerticalOffset(this.taskTableContainer.scrollTop)
 
       const newScrollLeft = this.resourceChart.getHorizontalOffset()
       this.ganttChart.setHorizontalOffset(newScrollLeft)
     } else if (target === this.resourceTableContainer) {
-      const newScrollTop = this.taskTableContainer.scrollTop
+      const newScrollTop = this.resourceTableContainer.scrollTop
       this.resourceChart.setVerticalOffset(newScrollTop)
-
-      if (this.resourceChart.getVerticalOffset() !== newScrollTop) {
-        this.resourceChart.setVerticalOffset(newScrollTop)
-      }
     }
   }