@operato/gantt 2.0.0-beta.5 → 7.0.0-rc.0

package/src/ox-gantt-chart.ts

@@ -1,16 +1,16 @@
+import './ox-task-tooltip'
+
 import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+import { customElement, property, query } from 'lit/decorators.js'
 import * as d3 from 'd3'
+import { locales } from './locales'
 
-import { LEVEL, TaskTag } from './types'
-import { levelDown, levelUp } from './utils'
-
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 import { ScrollbarStyles } from '@operato/styles'
-
-import { Task } from './types.js'
-
-type TimeScale = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'
+import { GanttChartController } from './gantt-chart-controller'
+import { Task, TimeScale } from './types.js'
+import { levelDown, levelUp } from './utils'
+import { OxTaskTooltip } from './ox-task-tooltip.js'
 
 @customElement('ox-gantt-chart')
 export class OxGanttChart extends LitElement {
@@ -20,491 +20,177 @@ export class OxGanttChart extends LitElement {
     css`
       :host {
         display: flex;
-
         overflow: hidden;
+        position: relative;
       }
-
       div[chart-container] {
         display: block;
-
         overflow-x: auto;
-        overflow-y: clip;
-
-        position: relative;
+        overflow-y: hidden;
       }
-
       svg {
         min-width: 100%;
       }
-
       svg[header] {
         display: block;
         min-width: 100%;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-on-surface));
+        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));
 
         position: sticky;
         top: 0;
         z-index: 1;
       }
-
       .top-axis text,
       .bottom-axis text {
         font-size: 12px;
       }
-
       .grid line {
         stroke: #e0e0e0;
       }
-
       .grid path {
         stroke-width: 0;
       }
-
       .no-select {
         user-select: none;
       }
+      .selected {
+        stroke-width: 2px;
+        stroke: var(--ox-gantt-selected-color, blue);
+      }
     `
   ]
 
-  @property({ type: String, attribute: 'from-date' })
-  fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */
-
-  @property({ type: String, attribute: 'to-date' })
-  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
-
+  @property({ type: String, attribute: 'from-date' }) fromDate: string = new Date(new Date().getFullYear(), 0, 1)
+    .toISOString()
+    .split('T')[0]
+  @property({ type: String, attribute: 'to-date' }) toDate: string = new Date(new Date().getFullYear(), 11, 31)
+    .toISOString()
+    .split('T')[0]
   @property({ type: String, attribute: 'axis-scale' }) axisScale: TimeScale = 'week-day'
   @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
   @property({ type: Array }) tasks: Task[] = []
-
-  @state() baseWidth: number = 30
-  @state() level: LEVEL = this.axisScale
-
-  private fromTime: Date = new Date(this.fromDate!)
-  private toTime: Date = new Date(this.toDate)
-  private totalDays: number = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
-  private _timeScale!: d3.ScaleTime<number, number, never>
+  @property({ type: String, attribute: 'selected-task-id' }) selectedTaskId?: string
+  @property({ type: String }) locale: string = 'en-US'
 
   @query('svg[header]') svgHeader!: SVGElement
   @query('svg[body]') svgBody!: SVGElement
   @query('[chart-container]') container!: HTMLDivElement
+  @query('ox-task-tooltip') tooltip!: OxTaskTooltip // 툴팁 요소 쿼리 추가
+
+  private ganttChartController: GanttChartController
+
+  constructor() {
+    super()
+    this.ganttChartController = new GanttChartController(this, this.fromDate, this.toDate, this.axisScale)
+  }
 
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this.initHeaderGestureHandlers()
   }
 
   updated(changedProperties: PropertyValues<this>) {
-    var redrawRequired = false
-
     if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
-      this.fromTime = new Date(this.fromDate)
-      this.toTime = new Date(this.toDate)
-      this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
+      this.ganttChartController.updateRange(this.fromDate, this.toDate)
+    }
+
+    if (changedProperties.has('tasks')) {
+      this.ganttChartController.setTasks(this.tasks)
+      this.svgBody.style.height =
+        Math.max(this.tasks.length * 30, 2000 /* 태스크가 많이 없어도, 빈 공간이 없도록, 충분히 높게 */) + 'px'
+    }
 
-      redrawRequired = true
+    // Update locale
+    if (changedProperties.has('locale')) {
+      this.updateLocale(this.locale)
     }
 
-    if (changedProperties.has('axisScale')) {
-      redrawRequired = true
+    if (changedProperties.has('selectedTaskId')) {
+      this.ganttChartController.selectedTaskId = this.selectedTaskId
     }
 
-    if (changedProperties.has('tasks')) {
-      this.svgBody.style.height = this.tasks.length * 30 + 'px'
-      redrawRequired = true
+    if (changedProperties.has('extendGridLines')) {
+      this.ganttChartController.extendGridLines = this.extendGridLines
+    }
+
+    if (changedProperties.has('axisScale')) {
+      this.ganttChartController.level = this.axisScale
+      this.ganttChartController.updateTimeScale()
     }
 
-    redrawRequired && this.redraw()
+    this.ganttChartController.drawAxes(this.svgHeader)
+    this.ganttChartController.drawBody(this.svgBody, this.tooltip)
   }
 
   render() {
     return html`
-      <div chart-container>
+      <div
+        chart-container
+        @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}
+        @touchstart=${(e: TouchEvent) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
+        @touchmove=${(e: TouchEvent) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
+      >
         <svg
           header
-          @date-range-selected=${(e: CustomEvent) => {
-            console.log(e.detail)
-          }}
+          @date-range-selected=${(e: CustomEvent) => console.log(e.detail)}
           @wheel=${this.handleWheelForHeader.bind(this)}
         ></svg>
         <svg body></svg>
+        <ox-task-tooltip></ox-task-tooltip> // 툴팁 요소 추가
       </div>
     `
   }
 
   setVerticalOffset(offset: number) {
-    console.log(offset)
     this.container.scrollTop = offset
   }
 
-  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 (this.totalDays * this.baseWidth) / this.getScale() // 총 차트 폭 계산
-  }
-
-  get timeScale() {
-    if (!this._timeScale) {
-      // 시간축 스케일 생성
-      this._timeScale = d3
-        .scaleTime()
-        .domain([d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1)])
-        .range([0, this.getChartWidth()])
-    }
-
-    return this._timeScale
-  }
-
-  updateTimeScale() {
-    this.timeScale.range([0, this.getChartWidth()])
-  }
-
-  redraw() {
-    this.drawAxes()
-    this.drawBody()
+  getVerticalOffset(): number {
+    return this.container.scrollTop
   }
 
-  drawBody() {
-    const body = d3.select(this.svgBody)
-
-    body.selectAll('*').remove()
-    body.attr('width', this.getChartWidth())
-
-    if (this.extendGridLines) {
-      const addGridLines = (ticks: Date[]) => {
-        ticks.forEach(tick => {
-          const startX = this.timeScale(tick)
-          body
-            .append('line')
-            .attr('x1', startX)
-            .attr('x2', startX)
-            .attr('y1', 0)
-            .attr('y2', Number(this.svgBody.getBoundingClientRect().height) || 0)
-            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-            .attr('stroke-width', 1)
-        })
-      }
-
-      if (this.level === 'week-day') {
-        const dayTicks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))
-        addGridLines(dayTicks)
-      } else if (this.level === 'quarter-week') {
-        const weekTicks = d3.timeWeek
-          .every(1)!
-          .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
-        addGridLines(weekTicks)
-      } else if (this.level === 'year-month') {
-        const monthTicks = d3.timeMonth
-          .every(1)!
-          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
-        addGridLines(monthTicks)
-      } else if (this.level === 'year-quarter') {
-        const quarterTicks = d3.timeMonth
-          .every(3)!
-          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
-        addGridLines(quarterTicks)
-      }
-    }
+  handleWheelForHeader(event: WheelEvent) {
+    event.preventDefault()
+    event.stopPropagation()
 
-    const taskPositions: { [key: string]: { x: number; y: number; width: number } } = {}
-
-    // Add task bars
-    this.tasks.forEach((task, index) => {
-      const startX = this.timeScale(d3.timeDay.floor(d3.min([task.startTime, task.endTime])!))
-      const endX = this.timeScale(d3.timeDay.offset(d3.timeDay.ceil(d3.max([task.startTime, task.endTime])!), -1))
-
-      const taskWidth = endX - startX + this.baseWidth / this.getScale()
-      const taskY = index * 30 + 7.5
-
-      // Main task bar
-      const taskBar = body
-        .append('rect')
-        .attr('x', startX)
-        .attr('y', taskY)
-        .attr('width', taskWidth)
-        .attr('height', 15)
-        .attr('fill', this.getTaskColor(task.tags || []))
-        .attr('stroke', 'black')
-        .attr('stroke-width', 1)
-
-      // Add click event listener to task bar
-      taskBar.on('click', () => {
-        const customEvent = new CustomEvent('task-clicked', {
-          detail: { task },
-          bubbles: true,
-          composed: true
-        })
-        this.dispatchEvent(customEvent)
+    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
 
-      // Progress bar
-      if (task.progress !== undefined) {
-        const progressWidth = taskWidth * (task.progress / 100)
-        body
-          .append('rect')
-          .attr('x', startX)
-          .attr('y', taskY + 7.5 - 3.75) // Adjust to center within the task bar
-          .attr('width', progressWidth)
-          .attr('height', 7.5) // Set height to 50% of the task bar height
-          .attr('fill', 'lightgreen')
+      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
+        }
       }
-
-      // Save task position for linking lines
-      taskPositions[task.id] = { x: endX + this.baseWidth / this.getScale(), y: taskY + 7.5, width: taskWidth }
-    })
-
-    // Add linking lines
-    this.tasks.forEach(task => {
-      if (task.after && taskPositions[task.after]) {
-        const prevTask = taskPositions[task.after]
-        const currTask = taskPositions[task.id]
-
-        // Draw the linking line
-        body
-          .append('path')
-          .attr(
-            'd',
-            `
-            M${prevTask.x},${prevTask.y}
-            L${prevTask.x + 10},${prevTask.y}
-            ${
-              prevTask.x + 10 < currTask.x - 10 - currTask.width
-                ? `
-              L${(prevTask.x + currTask.x - currTask.width) / 2},${prevTask.y}
-              L${(prevTask.x + currTask.x - currTask.width) / 2},${currTask.y}
-            `
-                : `
-                L${prevTask.x + 10},${(prevTask.y + currTask.y) / 2}
-                L${currTask.x - 10 - currTask.width},${(prevTask.y + currTask.y) / 2}
-            `
-            }
-            L${currTask.x - 10 - currTask.width},${currTask.y}
-            L${currTask.x - currTask.width},${currTask.y}
-          `
-          )
-          .attr('stroke', 'black')
-          .attr('fill', 'none')
-          .attr('stroke-width', 1)
+      if (this.ganttChartController.baseWidth < 20) {
+        this.ganttChartController.level = levelUp(this.ganttChartController.level)
+        this.ganttChartController.baseWidth = 30
       }
-    })
-  }
 
-  // Helper function to determine task color based on tags
-  getTaskColor(tags: TaskTag[]): string {
-    if (tags.includes('critical')) {
-      return 'red'
-    } else if (tags.includes('milestone')) {
-      return 'blue'
-    } else if (tags.includes('done')) {
-      return 'green'
-    } else {
-      return 'grey'
+      this.ganttChartController.updateTimeScale()
+      this.requestUpdate()
     }
   }
 
-  drawAxes() {
-    const header = d3.select(this.svgHeader)
-
-    header.selectAll('*').remove()
-    header.attr('width', this.getChartWidth())
-
-    // 차트 컨테이너의 폭 설정 및 스크롤 가능하도록 설정
-    header.attr('width', this.getChartWidth())
-
-    const addGridLines = (ticks: Date[], yStart: number, yEnd: number, extendable?: boolean) => {
-      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-outline))')
-          .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') {
-      // Level 1: week-day
-      // Weekly axis
-      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)
-
-      // Daily axis
-      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') {
-      // Level 2: quarter-week
-      // Quarterly axis
-      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)
-
-      // Weekly axis
-      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') {
-      // Level 3: year-month
-      // Yearly axis
-      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)
-
-      // Monthly axis
-      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') {
-      // Level 4: year-quarter
-      // Yearly axis
-      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)
-
-      // Quarterly axis
-      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)
+  updateLocale(locale: string) {
+    const localeDefinition = (locales as any)[locale || 'en-US']
+    if (localeDefinition) {
+      d3.timeFormatDefaultLocale(localeDefinition)
+      this.ganttChartController.updateTimeScale()
     }
   }
 
@@ -516,7 +202,7 @@ export class OxGanttChart extends LitElement {
     let lastTouchDistance: number | null = null
 
     const handleTouchStart = (event: TouchEvent) => {
-      event.preventDefault() // 기본 터치 이벤트 막기
+      event.preventDefault()
 
       if (event.touches.length === 2) {
         lastTouchDistance = getTouchDistance(event.touches)
@@ -529,32 +215,32 @@ export class OxGanttChart extends LitElement {
     }
 
     const handleTouchMove = (event: TouchEvent) => {
-      event.preventDefault() // 기본 터치 이벤트 막기
+      event.preventDefault()
 
       if (event.touches.length === 2 && lastTouchDistance !== null) {
         const currentDistance = getTouchDistance(event.touches)
         const zoomFactor = currentDistance / lastTouchDistance
-        this.baseWidth *= zoomFactor
+        this.ganttChartController.baseWidth *= zoomFactor
 
-        if (this.baseWidth > 60) {
-          if (this.level == 'year-quarter') {
-            this.baseWidth = 60
+        if (this.ganttChartController.baseWidth > 60) {
+          if (this.ganttChartController.level == 'year-quarter') {
+            this.ganttChartController.baseWidth = 60
           } else {
-            this.level = levelUp(this.level)
-            this.baseWidth = 30
+            this.ganttChartController.level = levelUp(this.ganttChartController.level)
+            this.ganttChartController.baseWidth = 30
           }
-        } else if (this.baseWidth < 30) {
-          if (this.level == 'week-day') {
-            this.baseWidth = 30
+        } else if (this.ganttChartController.baseWidth < 30) {
+          if (this.ganttChartController.level == 'week-day') {
+            this.ganttChartController.baseWidth = 30
           } else {
-            this.level = levelDown(this.level)
-            this.baseWidth = 60
+            this.ganttChartController.level = levelDown(this.ganttChartController.level)
+            this.ganttChartController.baseWidth = 60
           }
         }
 
         lastTouchDistance = currentDistance
-        this.updateTimeScale()
-        this.redraw()
+        this.ganttChartController.updateTimeScale()
+        this.requestUpdate()
       } else if (isDragging && startX !== null) {
         const touch = event.touches[0]
         const containerOffsetX = header.node()!.getBoundingClientRect().left
@@ -564,14 +250,13 @@ export class OxGanttChart extends LitElement {
     }
 
     const handleTouchEnd = (event: TouchEvent) => {
-      event.preventDefault() // 기본 터치 이벤트 막기
+      event.preventDefault()
 
       if (event.touches.length < 2) {
         lastTouchDistance = null
       }
 
       if (!isDragging || startX === null) {
-        // 클릭 이벤트 처리
         const touch = event.changedTouches[0]
         const containerOffsetX = header.node()!.getBoundingClientRect().left
         const clickX = touch.clientX - containerOffsetX
@@ -610,7 +295,6 @@ export class OxGanttChart extends LitElement {
 
     const handleMouseUp = (event: MouseEvent) => {
       if (!isDragging || startX === null) {
-        // 클릭 이벤트 처리
         const containerOffsetX = header.node()!.getBoundingClientRect().left
         const clickX = event.clientX - containerOffsetX
         this.finalizeSelection(clickX, clickX)
@@ -637,21 +321,21 @@ export class OxGanttChart extends LitElement {
     const header = d3.select(this.svgHeader)
     const body = d3.select(this.svgBody)
 
-    let startDate = this.timeScale.invert(startX)
-    let endDate = this.timeScale.invert(endX)
+    let startDate = this.ganttChartController.timeScale.invert(startX)
+    let endDate = this.ganttChartController.timeScale.invert(endX)
 
     let start, end
 
-    if (this.level === 'week-day') {
+    if (this.ganttChartController.level === 'week-day') {
       start = d3.timeDay.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'quarter-week') {
+    } else if (this.ganttChartController.level === 'quarter-week') {
       start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'year-month') {
+    } else if (this.ganttChartController.level === 'year-month') {
       start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'year-quarter') {
+    } else if (this.ganttChartController.level === 'year-quarter') {
       start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
@@ -662,9 +346,14 @@ export class OxGanttChart extends LitElement {
     header
       .append('rect')
       .attr('class', 'selection-rect')
-      .attr('x', this.timeScale(start!))
+      .attr('x', this.ganttChartController.timeScale(start!))
       .attr('y', 20)
-      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr(
+        'width',
+        this.ganttChartController.timeScale(end!) -
+          this.ganttChartController.timeScale(start!) +
+          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
+      )
       .attr('height', 20)
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
       .attr('opacity', '.2')
@@ -672,9 +361,14 @@ export class OxGanttChart extends LitElement {
     body
       .append('rect')
       .attr('class', 'selection-rect')
-      .attr('x', this.timeScale(start!))
+      .attr('x', this.ganttChartController.timeScale(start!))
       .attr('y', 0)
-      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr(
+        'width',
+        this.ganttChartController.timeScale(end!) -
+          this.ganttChartController.timeScale(start!) +
+          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
+      )
       .attr('height', '100%')
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
       .attr('opacity', '.2')
@@ -684,21 +378,21 @@ export class OxGanttChart extends LitElement {
     const header = d3.select(this.svgHeader)
     const body = d3.select(this.svgBody)
 
-    let startDate = this.timeScale.invert(startX)
-    let endDate = this.timeScale.invert(endX)
+    let startDate = this.ganttChartController.timeScale.invert(startX)
+    let endDate = this.ganttChartController.timeScale.invert(endX)
 
     let start, end
 
-    if (this.level === 'week-day') {
+    if (this.ganttChartController.level === 'week-day') {
       start = d3.timeDay.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'quarter-week') {
+    } else if (this.ganttChartController.level === 'quarter-week') {
       start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'year-month') {
+    } else if (this.ganttChartController.level === 'year-month') {
       start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.level === 'year-quarter') {
+    } else if (this.ganttChartController.level === 'year-quarter') {
       start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
@@ -709,9 +403,14 @@ export class OxGanttChart extends LitElement {
     header
       .append('rect')
       .attr('class', 'selection-rect')
-      .attr('x', this.timeScale(start!))
+      .attr('x', this.ganttChartController.timeScale(start!))
       .attr('y', 20)
-      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr(
+        'width',
+        this.ganttChartController.timeScale(end!) -
+          this.ganttChartController.timeScale(start!) +
+          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
+      )
       .attr('height', 20)
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
       .attr('opacity', '.2')
@@ -719,9 +418,14 @@ export class OxGanttChart extends LitElement {
     body
       .append('rect')
       .attr('class', 'selection-rect')
-      .attr('x', this.timeScale(start!))
+      .attr('x', this.ganttChartController.timeScale(start!))
       .attr('y', 0)
-      .attr('width', this.timeScale(end!) - this.timeScale(start!) + this.baseWidth / this.getScale())
+      .attr(
+        'width',
+        this.ganttChartController.timeScale(end!) -
+          this.ganttChartController.timeScale(start!) +
+          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
+      )
       .attr('height', '100%')
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
       .attr('opacity', '.2')
@@ -733,41 +437,4 @@ export class OxGanttChart extends LitElement {
 
     header.node()?.dispatchEvent(customEvent)
   }
-
-  handleWheelForHeader(event: WheelEvent) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
-      // 좌우 스크롤
-      this.container.scrollBy({
-        left: event.shiftKey ? event.deltaX : event.deltaY,
-        behavior: 'smooth'
-      })
-    } else {
-      // Zoom in/out
-      const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9
-      this.baseWidth *= zoomFactor
-
-      if (this.baseWidth > 40) {
-        if (this.level == 'week-day') {
-          this.baseWidth = 40
-        } else {
-          this.level = levelDown(this.level)
-          this.baseWidth = 30
-        }
-      } else if (this.baseWidth < 30) {
-        if (this.level == 'year-quarter') {
-          this.baseWidth = 30
-        }
-      }
-      if (this.baseWidth < 20) {
-        this.level = levelUp(this.level)
-        this.baseWidth = 30
-      }
-
-      this.updateTimeScale()
-      this.redraw()
-    }
-  }
 }