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

package/dist/src/ox-gantt-chart.js

@@ -1,435 +1,168 @@
 import { __decorate } from "tslib";
+import './ox-task-tooltip';
 import { LitElement, html, css } 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 { levelDown, levelUp } from './utils';
+import { locales } from './locales';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { ScrollbarStyles } from '@operato/styles';
+import { GanttChartController } from './gantt-chart-controller';
+import { levelDown, levelUp } from './utils';
 let OxGanttChart = class OxGanttChart extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.fromDate = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]; /* beginning of this year */
-        this.toDate = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]; /* end of this year */
-        this.axisScale = 'week-day';
-        this.extendGridLines = false;
-        this.tasks = [];
-        this.baseWidth = 30;
-        this.level = this.axisScale;
-        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));
-    }
     static { this.styles = [
         MDTypeScaleStyles,
         ScrollbarStyles,
         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);
+      }
     `
     ]; }
+    constructor() {
+        super();
+        this.fromDate = new Date(new Date().getFullYear(), 0, 1)
+            .toISOString()
+            .split('T')[0];
+        this.toDate = new Date(new Date().getFullYear(), 11, 31)
+            .toISOString()
+            .split('T')[0];
+        this.axisScale = 'week-day';
+        this.extendGridLines = false;
+        this.tasks = [];
+        this.locale = 'en-US';
+        this.ganttChartController = new GanttChartController(this, this.fromDate, this.toDate, this.axisScale);
+    }
     firstUpdated(_changedProperties) {
         this.initHeaderGestureHandlers();
     }
     updated(changedProperties) {
-        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));
-            redrawRequired = true;
-        }
-        if (changedProperties.has('axisScale')) {
-            redrawRequired = true;
+            this.ganttChartController.updateRange(this.fromDate, this.toDate);
         }
         if (changedProperties.has('tasks')) {
-            this.svgBody.style.height = this.tasks.length * 30 + 'px';
-            redrawRequired = true;
+            this.ganttChartController.setTasks(this.tasks);
+            this.svgBody.style.height =
+                Math.max(this.tasks.length * 30, 2000 /* 태스크가 많이 없어도, 빈 공간이 없도록, 충분히 높게 */) + 'px';
+        }
+        // Update locale
+        if (changedProperties.has('locale')) {
+            this.updateLocale(this.locale);
         }
-        redrawRequired && this.redraw();
+        if (changedProperties.has('selectedTaskId')) {
+            this.ganttChartController.selectedTaskId = this.selectedTaskId;
+        }
+        if (changedProperties.has('extendGridLines')) {
+            this.ganttChartController.extendGridLines = this.extendGridLines;
+        }
+        if (changedProperties.has('axisScale')) {
+            this.ganttChartController.level = this.axisScale;
+            this.ganttChartController.updateTimeScale();
+        }
+        this.ganttChartController.drawAxes(this.svgHeader);
+        this.ganttChartController.drawBody(this.svgBody, this.tooltip);
     }
     render() {
         return html `
-      <div chart-container>
+      <div
+        chart-container
+        @wheel=${(e) => this.ganttChartController.handleWheelForBody(e, this.container)}
+        @touchstart=${(e) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
+        @touchmove=${(e) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
+      >
         <svg
           header
-          @date-range-selected=${(e) => {
-            console.log(e.detail);
-        }}
+          @date-range-selected=${(e) => console.log(e.detail)}
           @wheel=${this.handleWheelForHeader.bind(this)}
         ></svg>
         <svg body></svg>
+        <ox-task-tooltip></ox-task-tooltip> // 툴팁 요소 추가
       </div>
     `;
     }
     setVerticalOffset(offset) {
-        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(); // 총 차트 폭 계산
+    getVerticalOffset() {
+        return this.container.scrollTop;
     }
-    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()]);
+    handleWheelForHeader(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
+            this.container.scrollBy({
+                left: event.shiftKey ? event.deltaX : event.deltaY
+            });
         }
-        return this._timeScale;
-    }
-    updateTimeScale() {
-        this.timeScale.range([0, this.getChartWidth()]);
-    }
-    redraw() {
-        this.drawAxes();
-        this.drawBody();
-    }
-    drawBody() {
-        const body = d3.select(this.svgBody);
-        body.selectAll('*').remove();
-        body.attr('width', this.getChartWidth());
-        if (this.extendGridLines) {
-            const addGridLines = (ticks) => {
-                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 {
+            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.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.ganttChartController.baseWidth < 30) {
+                if (this.ganttChartController.level == 'year-quarter') {
+                    this.ganttChartController.baseWidth = 30;
+                }
             }
-            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);
+            if (this.ganttChartController.baseWidth < 20) {
+                this.ganttChartController.level = levelUp(this.ganttChartController.level);
+                this.ganttChartController.baseWidth = 30;
             }
+            this.ganttChartController.updateTimeScale();
+            this.requestUpdate();
         }
-        const taskPositions = {};
-        // 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);
-            });
-            // 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');
-            }
-            // 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);
-            }
-        });
     }
-    // Helper function to determine task color based on tags
-    getTaskColor(tags) {
-        if (tags.includes('critical')) {
-            return 'red';
-        }
-        else if (tags.includes('milestone')) {
-            return 'blue';
-        }
-        else if (tags.includes('done')) {
-            return 'green';
-        }
-        else {
-            return 'grey';
-        }
-    }
-    drawAxes() {
-        const header = d3.select(this.svgHeader);
-        header.selectAll('*').remove();
-        header.attr('width', this.getChartWidth());
-        // 차트 컨테이너의 폭 설정 및 스크롤 가능하도록 설정
-        header.attr('width', this.getChartWidth());
-        const addGridLines = (ticks, yStart, yEnd, extendable) => {
-            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, tickInterval) => {
-            selection.selectAll('text').attr('transform', (d) => {
-                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'))
-                .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'))
-                .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'))
-                .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));
-            // Weekly axis
-            const weekAxis = d3
-                .axisTop(this.timeScale)
-                .ticks(d3.timeWeek.every(1))
-                .tickFormat(d3.timeFormat('%b %d'))
-                .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'))
-                .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));
-            // Monthly axis
-            const monthAxis = d3
-                .axisTop(this.timeScale)
-                .ticks(d3.timeMonth.every(1))
-                .tickFormat(d3.timeFormat('%b'))
-                .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));
-        }
-        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'))
-                .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));
-            // Quarterly axis
-            const quarterAxis = d3
-                .axisTop(this.timeScale)
-                .ticks(d3.timeMonth.every(3))
-                .tickFormat(d3.timeFormat('%Y %b'))
-                .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));
+    updateLocale(locale) {
+        const localeDefinition = locales[locale || 'en-US'];
+        if (localeDefinition) {
+            d3.timeFormatDefaultLocale(localeDefinition);
+            this.ganttChartController.updateTimeScale();
         }
     }
     initHeaderGestureHandlers() {
@@ -438,7 +171,7 @@ let OxGanttChart = class OxGanttChart extends LitElement {
         let startX = null;
         let lastTouchDistance = null;
         const handleTouchStart = (event) => {
-            event.preventDefault(); // 기본 터치 이벤트 막기
+            event.preventDefault();
             if (event.touches.length === 2) {
                 lastTouchDistance = getTouchDistance(event.touches);
             }
@@ -450,32 +183,32 @@ let OxGanttChart = class OxGanttChart extends LitElement {
             }
         };
         const handleTouchMove = (event) => {
-            event.preventDefault(); // 기본 터치 이벤트 막기
+            event.preventDefault();
             if (event.touches.length === 2 && lastTouchDistance !== null) {
                 const currentDistance = getTouchDistance(event.touches);
                 const zoomFactor = currentDistance / lastTouchDistance;
-                this.baseWidth *= zoomFactor;
-                if (this.baseWidth > 60) {
-                    if (this.level == 'year-quarter') {
-                        this.baseWidth = 60;
+                this.ganttChartController.baseWidth *= zoomFactor;
+                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];
@@ -485,12 +218,11 @@ let OxGanttChart = class OxGanttChart extends LitElement {
             }
         };
         const handleTouchEnd = (event) => {
-            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;
@@ -523,7 +255,6 @@ let OxGanttChart = class OxGanttChart extends LitElement {
         };
         const handleMouseUp = (event) => {
             if (!isDragging || startX === null) {
-                // 클릭 이벤트 처리
                 const containerOffsetX = header.node().getBoundingClientRect().left;
                 const clickX = event.clientX - containerOffsetX;
                 this.finalizeSelection(clickX, clickX);
@@ -545,22 +276,22 @@ let OxGanttChart = class OxGanttChart extends LitElement {
     highlightSelection(startX, endX) {
         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);
         }
@@ -569,18 +300,22 @@ let OxGanttChart = 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');
         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');
@@ -588,22 +323,22 @@ let OxGanttChart = class OxGanttChart extends LitElement {
     finalizeSelection(startX, endX) {
         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);
         }
@@ -612,18 +347,22 @@ let OxGanttChart = 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');
         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');
@@ -633,42 +372,6 @@ let OxGanttChart = class OxGanttChart extends LitElement {
         });
         header.node()?.dispatchEvent(customEvent);
     }
-    handleWheelForHeader(event) {
-        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();
-        }
-    }
 };
 __decorate([
     property({ type: String, attribute: 'from-date' })
@@ -686,11 +389,11 @@ __decorate([
     property({ type: Array })
 ], OxGanttChart.prototype, "tasks", void 0);
 __decorate([
-    state()
-], OxGanttChart.prototype, "baseWidth", void 0);
+    property({ type: String, attribute: 'selected-task-id' })
+], OxGanttChart.prototype, "selectedTaskId", void 0);
 __decorate([
-    state()
-], OxGanttChart.prototype, "level", void 0);
+    property({ type: String })
+], OxGanttChart.prototype, "locale", void 0);
 __decorate([
     query('svg[header]')
 ], OxGanttChart.prototype, "svgHeader", void 0);
@@ -700,6 +403,9 @@ __decorate([
 __decorate([
     query('[chart-container]')
 ], OxGanttChart.prototype, "container", void 0);
+__decorate([
+    query('ox-task-tooltip')
+], OxGanttChart.prototype, "tooltip", void 0);
 OxGanttChart = __decorate([
     customElement('ox-gantt-chart')
 ], OxGanttChart);