@operato/gantt 2.0.0-beta.0 → 2.0.0-beta.1

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

@@ -0,0 +1,707 @@
+import { __decorate } from "tslib";
+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 * as d3 from 'd3';
+import { levelDown, levelUp } from './utils';
+import { ScrollbarStyles } from '@operato/styles';
+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;
+      }
+
+      div[chart-container] {
+        display: block;
+
+        overflow-x: auto;
+        overflow-y: clip;
+
+        position: relative;
+      }
+
+      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));
+        height: 40px;
+        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-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;
+      }
+    `
+    ]; }
+    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;
+        }
+        if (changedProperties.has('tasks')) {
+            this.svgBody.style.height = this.tasks.length * 30 + 'px';
+            redrawRequired = true;
+        }
+        redrawRequired && this.redraw();
+    }
+    render() {
+        return html `
+      <div chart-container>
+        <svg
+          header
+          @date-range-selected=${(e) => {
+            console.log(e.detail);
+        }}
+          @wheel=${this.handleWheelForHeader.bind(this)}
+        ></svg>
+        <svg body></svg>
+      </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(); // 총 차트 폭 계산
+    }
+    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();
+    }
+    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 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);
+            }
+        }
+        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));
+        }
+    }
+    initHeaderGestureHandlers() {
+        const header = d3.select(this.svgHeader);
+        let isDragging = false;
+        let startX = null;
+        let lastTouchDistance = null;
+        const handleTouchStart = (event) => {
+            event.preventDefault(); // 기본 터치 이벤트 막기
+            if (event.touches.length === 2) {
+                lastTouchDistance = getTouchDistance(event.touches);
+            }
+            else {
+                isDragging = true;
+                const touch = event.touches[0];
+                const containerOffsetX = header.node().getBoundingClientRect().left;
+                startX = touch.clientX - containerOffsetX;
+            }
+        };
+        const handleTouchMove = (event) => {
+            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;
+                    }
+                    else {
+                        this.level = levelUp(this.level);
+                        this.baseWidth = 30;
+                    }
+                }
+                else if (this.baseWidth < 30) {
+                    if (this.level == 'week-day') {
+                        this.baseWidth = 30;
+                    }
+                    else {
+                        this.level = levelDown(this.level);
+                        this.baseWidth = 60;
+                    }
+                }
+                lastTouchDistance = currentDistance;
+                this.updateTimeScale();
+                this.redraw();
+            }
+            else if (isDragging && startX !== null) {
+                const touch = event.touches[0];
+                const containerOffsetX = header.node().getBoundingClientRect().left;
+                const currentX = touch.clientX - containerOffsetX;
+                this.highlightSelection(startX, currentX);
+            }
+        };
+        const handleTouchEnd = (event) => {
+            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;
+                this.finalizeSelection(clickX, clickX);
+                return;
+            }
+            const touch = event.changedTouches[0];
+            const containerOffsetX = header.node().getBoundingClientRect().left;
+            const endX = touch.clientX - containerOffsetX;
+            this.finalizeSelection(startX, endX);
+            isDragging = false;
+            startX = null;
+        };
+        const getTouchDistance = (touches) => {
+            const dx = touches[0].clientX - touches[1].clientX;
+            const dy = touches[0].clientY - touches[1].clientY;
+            return Math.sqrt(dx * dx + dy * dy);
+        };
+        const handleMouseDown = (event) => {
+            isDragging = true;
+            const containerOffsetX = header.node().getBoundingClientRect().left;
+            startX = event.clientX - containerOffsetX;
+        };
+        const handleMouseMove = (event) => {
+            if (!isDragging || startX === null)
+                return;
+            const containerOffsetX = header.node().getBoundingClientRect().left;
+            const currentX = event.clientX - containerOffsetX;
+            this.highlightSelection(startX, currentX);
+        };
+        const handleMouseUp = (event) => {
+            if (!isDragging || startX === null) {
+                // 클릭 이벤트 처리
+                const containerOffsetX = header.node().getBoundingClientRect().left;
+                const clickX = event.clientX - containerOffsetX;
+                this.finalizeSelection(clickX, clickX);
+                return;
+            }
+            const containerOffsetX = header.node().getBoundingClientRect().left;
+            const endX = event.clientX - containerOffsetX;
+            this.finalizeSelection(startX, endX);
+            isDragging = false;
+            startX = null;
+        };
+        header.on('mousedown', handleMouseDown);
+        header.on('mousemove', handleMouseMove);
+        header.on('mouseup', handleMouseUp);
+        header.on('touchstart', handleTouchStart);
+        header.on('touchmove', handleTouchMove);
+        header.on('touchend', handleTouchEnd);
+    }
+    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 start, end;
+        if (this.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') {
+            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') {
+            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') {
+            start = d3.timeMonth.every(3).floor(d3.min([startDate, endDate]));
+            end = d3.timeDay.offset(d3.timeMonth.every(3).ceil(d3.max([startDate, endDate])), -1);
+        }
+        header.selectAll('.selection-rect').remove();
+        body.selectAll('.selection-rect').remove();
+        header
+            .append('rect')
+            .attr('class', 'selection-rect')
+            .attr('x', this.timeScale(start))
+            .attr('y', 20)
+            .attr('width', this.timeScale(end) - this.timeScale(start) + this.baseWidth / this.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('y', 0)
+            .attr('width', this.timeScale(end) - this.timeScale(start) + this.baseWidth / this.getScale())
+            .attr('height', '100%')
+            .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+            .attr('opacity', '.2');
+    }
+    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 start, end;
+        if (this.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') {
+            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') {
+            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') {
+            start = d3.timeMonth.every(3).floor(d3.min([startDate, endDate]));
+            end = d3.timeDay.offset(d3.timeMonth.every(3).ceil(d3.max([startDate, endDate])), -1);
+        }
+        header.selectAll('.selection-rect').remove();
+        body.selectAll('.selection-rect').remove();
+        header
+            .append('rect')
+            .attr('class', 'selection-rect')
+            .attr('x', this.timeScale(start))
+            .attr('y', 20)
+            .attr('width', this.timeScale(end) - this.timeScale(start) + this.baseWidth / this.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('y', 0)
+            .attr('width', this.timeScale(end) - this.timeScale(start) + this.baseWidth / this.getScale())
+            .attr('height', '100%')
+            .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-secondary))')
+            .attr('opacity', '.2');
+        const formatDate = d3.timeFormat('%Y-%m-%d');
+        const customEvent = new CustomEvent('date-range-selected', {
+            detail: { start: formatDate(start), end: formatDate(end) }
+        });
+        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' })
+], OxGanttChart.prototype, "fromDate", void 0);
+__decorate([
+    property({ type: String, attribute: 'to-date' })
+], OxGanttChart.prototype, "toDate", void 0);
+__decorate([
+    property({ type: String, attribute: 'axis-scale' })
+], OxGanttChart.prototype, "axisScale", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'extend-grid-lines' })
+], OxGanttChart.prototype, "extendGridLines", void 0);
+__decorate([
+    property({ type: Array })
+], OxGanttChart.prototype, "tasks", void 0);
+__decorate([
+    state()
+], OxGanttChart.prototype, "baseWidth", void 0);
+__decorate([
+    state()
+], OxGanttChart.prototype, "level", void 0);
+__decorate([
+    query('svg[header]')
+], OxGanttChart.prototype, "svgHeader", void 0);
+__decorate([
+    query('svg[body]')
+], OxGanttChart.prototype, "svgBody", void 0);
+__decorate([
+    query('[chart-container]')
+], OxGanttChart.prototype, "container", void 0);
+OxGanttChart = __decorate([
+    customElement('ox-gantt-chart')
+], OxGanttChart);
+export { OxGanttChart };
+//# sourceMappingURL=ox-gantt-chart.js.map