@operato/gantt 7.0.20 → 7.0.22

package/src/gantt-chart-controller.ts

@@ -2,6 +2,7 @@ import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
 import * as d3 from 'd3'
 import { TimeScale, Task, TaskTag } from './types'
 import { OxTaskTooltip } from './ox-task-tooltip'
+import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'
 
 export class GanttChartController implements ReactiveController {
   private host: ReactiveControllerHost & LitElement
@@ -60,200 +61,16 @@ export class GanttChartController implements ReactiveController {
     this.timeScale.range([0, this.getChartWidth()])
   }
 
-  getChartWidth() {
-    return (this.totalDays * this.baseWidth) / this.getScale()
+  getScale() {
+    return getScale(this.level)
   }
 
-  getScale() {
-    if (this.level == 'quarter-week') {
-      return 7 / 2
-    } else if (this.level == 'year-month') {
-      return 30 / 2
-    } else if (this.level == 'year-quarter') {
-      return 90 / 2
-    }
-    return 1
+  getChartWidth() {
+    return getChartWidth(this.fromTime, this.toTime, this.baseWidth, this.level)
   }
 
   drawAxes(svgHeader: SVGElement) {
-    const header = d3.select(svgHeader)
-
-    header.selectAll('*').remove()
-    header.attr('width', this.getChartWidth())
-
-    const addGridLines = (ticks: Date[], yStart: number, yEnd: number) => {
-      ticks.forEach(tick => {
-        const startX = this.timeScale(tick)
-        header
-          .append('line')
-          .attr('x1', startX)
-          .attr('x2', startX)
-          .attr('y1', yStart)
-          .attr('y2', yEnd)
-          .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-on-secondary-container))')
-          .attr('stroke-width', 1)
-      })
-    }
-
-    const centerLabel = (
-      selection: d3.Selection<SVGGElement, unknown, null, any>,
-      tickInterval: d3.CountableTimeInterval
-    ) => {
-      selection.selectAll('text').attr('transform', (d: any) => {
-        const tickIntervalWidth = this.timeScale(tickInterval.offset(d, 1)) - this.timeScale(d)
-        return `translate(${tickIntervalWidth / 2}, -2)`
-      })
-    }
-
-    if (this.level === 'week-day') {
-      const weekAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeWeek.every(1))
-        .tickFormat(d3.timeFormat('%B %d') as any)
-        .tickSize(0)
-      const weekTicks = d3.timeWeek
-        .every(1)!
-        .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
-      addGridLines(weekTicks, 0, 20)
-
-      const weekAxisG = header
-        .append('g')
-        .classed('week-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 20)`)
-        .call(weekAxis)
-
-      centerLabel(weekAxisG, d3.timeWeek)
-
-      const dayAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeDay.every(1))
-        .tickFormat(d3.timeFormat('%d') as any)
-        .tickSize(0)
-
-      const dayTicks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))
-      addGridLines(dayTicks, 20, 40)
-
-      const dayAxisG = header
-        .append('g')
-        .classed('day-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 40)`)
-        .call(dayAxis)
-
-      centerLabel(dayAxisG, d3.timeDay)
-    } else if (this.level === 'quarter-week') {
-      const quarterAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeMonth.every(3))
-        .tickFormat(d3.timeFormat('%Y %b') as any)
-        .tickSize(0)
-
-      const quarterTicks = d3.timeMonth
-        .every(3)!
-        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
-      addGridLines(quarterTicks, 0, 20)
-
-      const quarterAxisG = header
-        .append('g')
-        .classed('quarter-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 20)`)
-        .call(quarterAxis)
-
-      centerLabel(quarterAxisG, d3.timeMonth.every(3) as any)
-
-      const weekAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeWeek.every(1))
-        .tickFormat(d3.timeFormat('%b %d') as any)
-        .tickSize(0)
-      const weekTicks = d3.timeWeek
-        .every(1)!
-        .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
-      addGridLines(weekTicks, 20, 40)
-
-      const weekAxisG = header
-        .append('g')
-        .classed('week-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 40)`)
-        .call(weekAxis)
-
-      centerLabel(weekAxisG, d3.timeWeek)
-    } else if (this.level === 'year-month') {
-      const yearAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeYear.every(1))
-        .tickFormat(d3.timeFormat('%Y') as any)
-        .tickSize(0)
-
-      const yearTicks = d3.timeYear
-        .every(1)!
-        .range(d3.timeYear.floor(this.fromTime), d3.timeYear.offset(this.toTime, 1))
-      addGridLines(yearTicks, 0, 20)
-
-      const yearAxisG = header
-        .append('g')
-        .classed('year-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 20)`)
-        .call(yearAxis)
-
-      centerLabel(yearAxisG, d3.timeYear.every(1)! as any)
-
-      const monthAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeMonth.every(1))
-        .tickFormat(d3.timeFormat('%b') as any)
-        .tickSize(0)
-
-      const monthTicks = d3.timeMonth
-        .every(1)!
-        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
-      addGridLines(monthTicks, 20, 40)
-
-      const monthAxisG = header
-        .append('g')
-        .classed('month-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 40)`)
-        .call(monthAxis)
-
-      centerLabel(monthAxisG, d3.timeMonth.every(1) as any)
-    } else if (this.level === 'year-quarter') {
-      const yearAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeYear.every(1))
-        .tickFormat(d3.timeFormat('%Y') as any)
-        .tickSize(0)
-
-      const yearTicks = d3.timeYear
-        .every(1)!
-        .range(d3.timeYear.floor(this.fromTime), d3.timeYear.offset(this.toTime, 1))
-      addGridLines(yearTicks, 0, 20)
-
-      const yearAxisG = header
-        .append('g')
-        .classed('year-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 20)`)
-        .call(yearAxis)
-
-      centerLabel(yearAxisG, d3.timeYear.every(1)! as any)
-
-      const quarterAxis = d3
-        .axisTop(this.timeScale)
-        .ticks(d3.timeMonth.every(3))
-        .tickFormat(d3.timeFormat('%Y %b') as any)
-        .tickSize(0)
-
-      const quarterTicks = d3.timeMonth
-        .every(3)!
-        .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
-      addGridLines(quarterTicks, 20, 40)
-
-      const quarterAxisG = header
-        .append('g')
-        .classed('quarter-axis no-select md-typescale-label-small', true)
-        .attr('transform', `translate(0, 40)`)
-        .call(quarterAxis)
-
-      centerLabel(quarterAxisG, d3.timeMonth.every(3) as any)
-    }
+    drawTimeScaleHeader(svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level)
   }
 
   drawBody(svgBody: SVGElement, tooltip: OxTaskTooltip) {

package/src/ox-gantt-chart.ts

@@ -1,4 +1,5 @@
-import './ox-task-tooltip'
+import './ox-task-tooltip.js'
+import './ox-resource-chart.js'
 
 import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -39,7 +40,6 @@ export class OxGanttChart extends LitElement {
         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));
-
         position: sticky;
         top: 0;
         z-index: 1;
@@ -79,7 +79,7 @@ export class OxGanttChart extends LitElement {
   @query('svg[header]') svgHeader!: SVGElement
   @query('svg[body]') svgBody!: SVGElement
   @query('[chart-container]') container!: HTMLDivElement
-  @query('ox-task-tooltip') tooltip!: OxTaskTooltip // 툴팁 요소 쿼리 추가
+  @query('ox-task-tooltip') tooltip!: OxTaskTooltip
 
   private ganttChartController: GanttChartController
 
@@ -98,12 +98,10 @@ export class OxGanttChart extends LitElement {
     }
 
     if (changedProperties.has('tasks')) {
-      this.ganttChartController.setTasks(this.tasks)
-      this.svgBody.style.height =
-        Math.max(this.tasks.length * 30, 2000 /* 태스크가 많이 없어도, 빈 공간이 없도록, 충분히 높게 */) + 'px'
+      this.ganttChartController.setTasks(this.flattenTasks(this.tasks))
+      this.svgBody.style.height = Math.max(this.tasks.length * 30, 2000) + 'px'
     }
 
-    // Update locale
     if (changedProperties.has('locale')) {
       this.updateLocale(this.locale)
     }
@@ -135,15 +133,19 @@ export class OxGanttChart extends LitElement {
       >
         <svg
           header
-          @date-range-selected=${(e: CustomEvent) => console.log(e.detail)}
+          @date-range-selected=${(e: CustomEvent) => this.handleDateRangeSelected(e)}
           @wheel=${this.handleWheelForHeader.bind(this)}
         ></svg>
         <svg body></svg>
-        <ox-task-tooltip></ox-task-tooltip> // 툴팁 요소 추가
+        <ox-task-tooltip></ox-task-tooltip>
       </div>
     `
   }
 
+  flattenTasks(tasks: Task[], level: number = 0): Task[] {
+    return tasks.flatMap(task => [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)])
+  }
+
   setVerticalOffset(offset: number) {
     this.container.scrollTop = offset
   }
@@ -152,6 +154,14 @@ export class OxGanttChart extends LitElement {
     return this.container.scrollTop
   }
 
+  setHorizontalOffset(offset: number) {
+    this.container.scrollLeft = offset
+  }
+
+  getHorizontalOffset(): number {
+    return this.container.scrollLeft
+  }
+
   handleWheelForHeader(event: WheelEvent) {
     event.preventDefault()
     event.stopPropagation()
@@ -183,9 +193,25 @@ export class OxGanttChart extends LitElement {
 
       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) {
+    const detail = event.detail
+    this.dispatchEvent(new CustomEvent('date-range-selected', { detail }))
+  }
+
   updateLocale(locale: string) {
     const localeDefinition = (locales as any)[locale || 'en-US']
     if (localeDefinition) {
@@ -241,6 +267,17 @@ export class OxGanttChart extends LitElement {
         lastTouchDistance = currentDistance
         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)
       } else if (isDragging && startX !== null) {
         const touch = event.touches[0]
         const containerOffsetX = header.node()!.getBoundingClientRect().left

package/src/ox-gantt-resize-splitter.ts

@@ -8,6 +8,8 @@ export class OxGanttResizeSplitter extends LitElement {
       position: relative;
       opacity: 0.7;
       background-color: var(--splitter-background-color);
+      width: var(--width);
+      height: var(--height);
     }
 
     :host(:hover) {
@@ -15,9 +17,8 @@ export class OxGanttResizeSplitter extends LitElement {
     }
 
     div {
-      position: absolute;
-      width: 100%;
-      height: 100%;
+      width: var(--width);
+      height: var(--height);
     }
   `
 
@@ -27,12 +28,12 @@ export class OxGanttResizeSplitter extends LitElement {
     super.connectedCallback()
 
     if (this.hasAttribute('vertical')) {
-      this.style.width = '3px'
-      this.style.height = '100%'
+      this.style.setProperty('--width', '3px')
+      this.style.setProperty('--height', '100%')
       this.style.cursor = 'col-resize'
     } else {
-      this.style.width = '100%'
-      this.style.height = '3px'
+      this.style.setProperty('--height', '3px')
+      this.style.setProperty('--width', '100%')
       this.style.cursor = 'row-resize'
     }
   }