@operato/gantt 8.0.0-alpha.4 → 8.0.0-alpha.43

package/dist/src/ox-gantt-resize-splitter.js

@@ -4,8 +4,24 @@ import { customElement } from 'lit/decorators.js';
 let OxGanttResizeSplitter = class OxGanttResizeSplitter extends LitElement {
     constructor() {
         super(...arguments);
-        this.onMouseMoveHandler = (e) => this.onMouseMove(e);
-        this.onMouseUpHandler = (e) => this.onMouseUp(e);
+        this.onMouseMove = (e) => {
+            this.moveDrag(e.clientX, e.clientY);
+        };
+        this.onTouchMove = (e) => {
+            const touch = e.touches[0];
+            this.moveDrag(touch.clientX, touch.clientY);
+        };
+        this.onMouseUp = (e) => {
+            this.endDrag(e.clientX, e.clientY);
+            window.removeEventListener('mousemove', this.onMouseMove);
+            window.removeEventListener('mouseup', this.onMouseUp);
+        };
+        this.onTouchEnd = (e) => {
+            const touch = e.changedTouches[0];
+            this.endDrag(touch.clientX, touch.clientY);
+            window.removeEventListener('touchmove', this.onTouchMove);
+            window.removeEventListener('touchend', this.onTouchEnd);
+        };
     }
     static { this.styles = css `
     :host {
@@ -14,15 +30,29 @@ let OxGanttResizeSplitter = class OxGanttResizeSplitter extends LitElement {
       background-color: var(--splitter-background-color);
       width: var(--width);
       height: var(--height);
+      z-index: 2;
     }
 
     :host(:hover) {
       background-color: var(--splitter-hover-background-color);
     }
 
+    /* 터치 영역을 넓히기 위해 실제 터치 영역을 더 크게 설정 */
     div {
       width: var(--width);
       height: var(--height);
+      touch-action: none; /* 터치 이벤트 처리에 방해되지 않도록 설정 */
+    }
+
+    div.touch-target {
+      width: var(--width);
+      height: var(--height);
+      transform: scale(1, 5);
+      transform-origin: center;
+    }
+
+    :host([vertical]) div.touch-target {
+      transform: scale(5, 1); /* 세로 스플리터는 세로 방향으로 터치 영역을 확장 */
     }
   `; }
     connectedCallback() {
@@ -39,43 +69,48 @@ let OxGanttResizeSplitter = class OxGanttResizeSplitter extends LitElement {
         }
     }
     render() {
-        return html `<div @mousedown=${(e) => this.onMouseDown(e)}></div>`;
+        return html `
+      <div
+        class="touch-target"
+        @mousedown=${(e) => this.onMouseDown(e)}
+        @touchstart=${this.onTouchStart}
+      ></div>
+      <div></div>
+      <!-- 실제 보이는 스플리터 -->
+    `;
     }
     onMouseDown(e) {
-        this.dragstart = {
-            x: e.clientX,
-            y: e.clientY
-        };
+        this.startDrag(e.clientX, e.clientY);
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+        e.stopPropagation();
+    }
+    onTouchStart(e) {
+        // 터치가 touch-target에서 시작된 경우에만 작동
+        if (e.target.classList.contains('touch-target')) {
+            const touch = e.touches[0];
+            this.startDrag(touch.clientX, touch.clientY);
+            window.addEventListener('touchmove', this.onTouchMove);
+            window.addEventListener('touchend', this.onTouchEnd);
+        }
+        e.stopPropagation();
+    }
+    startDrag(clientX, clientY) {
+        this.dragstart = { x: clientX, y: clientY };
         this.dispatchEvent(new CustomEvent('splitter-dragstart', {
             bubbles: true,
             composed: true
         }));
-        this.parentElement.addEventListener('mousemove', this.onMouseMoveHandler);
-        this.parentElement.addEventListener('mouseup', this.onMouseUpHandler);
-        window.addEventListener('mousemove', this.onMouseMoveHandler);
-        window.addEventListener('mouseup', this.onMouseUpHandler);
-        e.stopPropagation();
     }
-    onMouseMove(e) {
-        if (!this.dragstart) {
+    moveDrag(clientX, clientY) {
+        if (!this.dragstart)
             return;
-        }
-        const parentRect = this.parentElement.getBoundingClientRect();
-        if (e.clientX < parentRect.left ||
-            e.clientX > parentRect.right ||
-            e.clientY < parentRect.top ||
-            e.clientY > parentRect.bottom) {
-            this.onMouseUp(e);
-            return;
-        }
-        e.preventDefault();
+        const deltaX = clientX - this.dragstart.x;
+        const deltaY = clientY - this.dragstart.y;
         this.dispatchEvent(new CustomEvent('splitter-drag', {
             bubbles: true,
             composed: true,
-            detail: {
-                x: e.clientX - this.dragstart.x,
-                y: e.clientY - this.dragstart.y
-            }
+            detail: { x: deltaX, y: deltaY }
         }));
         if (this.hasAttribute('vertical')) {
             document.body.style.cursor = 'col-resize';
@@ -84,24 +119,20 @@ let OxGanttResizeSplitter = class OxGanttResizeSplitter extends LitElement {
             document.body.style.cursor = 'row-resize';
         }
         document.body.style.userSelect = 'none';
-        e.stopPropagation();
     }
-    onMouseUp(e) {
-        this.parentElement.removeEventListener('mousemove', this.onMouseMoveHandler);
-        this.parentElement.removeEventListener('mouseup', this.onMouseUpHandler);
-        window.removeEventListener('mousemove', this.onMouseMoveHandler);
-        window.removeEventListener('mouseup', this.onMouseUpHandler);
+    endDrag(clientX, clientY) {
+        if (!this.dragstart)
+            return;
+        const deltaX = clientX - this.dragstart.x;
+        const deltaY = clientY - this.dragstart.y;
         this.dispatchEvent(new CustomEvent('splitter-dragend', {
             bubbles: true,
             composed: true,
-            detail: {
-                x: e.clientX - this.dragstart.x,
-                y: e.clientY - this.dragstart.y
-            }
+            detail: { x: deltaX, y: deltaY }
         }));
+        this.dragstart = undefined;
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
-        e.stopPropagation();
     }
 };
 OxGanttResizeSplitter = __decorate([

package/dist/src/ox-gantt-resize-splitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-gantt-resize-splitter.js","sourceRoot":"","sources":["../../src/ox-gantt-resize-splitter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('ox-gantt-resize-splitter')\nexport class OxGanttResizeSplitter extends LitElement {\n  static styles = css`\n    :host {\n      position: relative;\n      opacity: 0.7;\n      background-color: var(--splitter-background-color);\n      width: var(--width);\n      height: var(--height);\n    }\n\n    :host(:hover) {\n      background-color: var(--splitter-hover-background-color);\n    }\n\n    div {\n      width: var(--width);\n      height: var(--height);\n    }\n  `\n\n  private dragstart?: { x: number; y: number }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (this.hasAttribute('vertical')) {\n      this.style.setProperty('--width', '3px')\n      this.style.setProperty('--height', '100%')\n      this.style.cursor = 'col-resize'\n    } else {\n      this.style.setProperty('--height', '3px')\n      this.style.setProperty('--width', '100%')\n      this.style.cursor = 'row-resize'\n    }\n  }\n\n  render() {\n    return html`<div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div>`\n  }\n\n  private onMouseDown(e: MouseEvent) {\n    this.dragstart = {\n      x: e.clientX,\n      y: e.clientY\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragstart', {\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    this.parentElement!.addEventListener('mousemove', this.onMouseMoveHandler)\n    this.parentElement!.addEventListener('mouseup', this.onMouseUpHandler)\n    window.addEventListener('mousemove', this.onMouseMoveHandler)\n    window.addEventListener('mouseup', this.onMouseUpHandler)\n\n    e.stopPropagation()\n  }\n\n  private onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e)\n  private onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e)\n\n  private onMouseMove(e: MouseEvent) {\n    if (!this.dragstart) {\n      return\n    }\n\n    const parentRect = this.parentElement!.getBoundingClientRect()\n    if (\n      e.clientX < parentRect.left ||\n      e.clientX > parentRect.right ||\n      e.clientY < parentRect.top ||\n      e.clientY > parentRect.bottom\n    ) {\n      this.onMouseUp(e)\n      return\n    }\n\n    e.preventDefault()\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-drag', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          x: e.clientX - this.dragstart!.x,\n          y: e.clientY - this.dragstart!.y\n        }\n      })\n    )\n\n    if (this.hasAttribute('vertical')) {\n      document.body.style.cursor = 'col-resize'\n    } else {\n      document.body.style.cursor = 'row-resize'\n    }\n\n    document.body.style.userSelect = 'none'\n\n    e.stopPropagation()\n  }\n\n  private onMouseUp(e: MouseEvent) {\n    this.parentElement!.removeEventListener('mousemove', this.onMouseMoveHandler)\n    this.parentElement!.removeEventListener('mouseup', this.onMouseUpHandler)\n    window.removeEventListener('mousemove', this.onMouseMoveHandler)\n    window.removeEventListener('mouseup', this.onMouseUpHandler)\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragend', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          x: e.clientX - this.dragstart!.x,\n          y: e.clientY - this.dragstart!.y\n        }\n      })\n    )\n\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n\n    e.stopPropagation()\n  }\n}\n"]}
+{"version":3,"file":"ox-gantt-resize-splitter.js","sourceRoot":"","sources":["../../src/ox-gantt-resize-splitter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('ox-gantt-resize-splitter')\nexport class OxGanttResizeSplitter extends LitElement {\n  static styles = css`\n    :host {\n      position: relative;\n      opacity: 0.7;\n      background-color: var(--splitter-background-color);\n      width: var(--width);\n      height: var(--height);\n      z-index: 2;\n    }\n\n    :host(:hover) {\n      background-color: var(--splitter-hover-background-color);\n    }\n\n    /* 터치 영역을 넓히기 위해 실제 터치 영역을 더 크게 설정 */\n    div {\n      width: var(--width);\n      height: var(--height);\n      touch-action: none; /* 터치 이벤트 처리에 방해되지 않도록 설정 */\n    }\n\n    div.touch-target {\n      width: var(--width);\n      height: var(--height);\n      transform: scale(1, 5);\n      transform-origin: center;\n    }\n\n    :host([vertical]) div.touch-target {\n      transform: scale(5, 1); /* 세로 스플리터는 세로 방향으로 터치 영역을 확장 */\n    }\n  `\n\n  private dragstart?: { x: number; y: number }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (this.hasAttribute('vertical')) {\n      this.style.setProperty('--width', '3px')\n      this.style.setProperty('--height', '100%')\n      this.style.cursor = 'col-resize'\n    } else {\n      this.style.setProperty('--height', '3px')\n      this.style.setProperty('--width', '100%')\n      this.style.cursor = 'row-resize'\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"touch-target\"\n        @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}\n        @touchstart=${this.onTouchStart}\n      ></div>\n      <div></div>\n      <!-- 실제 보이는 스플리터 -->\n    `\n  }\n\n  private onMouseDown(e: MouseEvent) {\n    this.startDrag(e.clientX, e.clientY)\n    window.addEventListener('mousemove', this.onMouseMove)\n    window.addEventListener('mouseup', this.onMouseUp)\n    e.stopPropagation()\n  }\n\n  private onTouchStart(e: TouchEvent) {\n    // 터치가 touch-target에서 시작된 경우에만 작동\n    if ((e.target as HTMLElement).classList.contains('touch-target')) {\n      const touch = e.touches[0]\n      this.startDrag(touch.clientX, touch.clientY)\n      window.addEventListener('touchmove', this.onTouchMove)\n      window.addEventListener('touchend', this.onTouchEnd)\n    }\n    e.stopPropagation()\n  }\n\n  private startDrag(clientX: number, clientY: number) {\n    this.dragstart = { x: clientX, y: clientY }\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragstart', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private onMouseMove = (e: MouseEvent) => {\n    this.moveDrag(e.clientX, e.clientY)\n  }\n\n  private onTouchMove = (e: TouchEvent) => {\n    const touch = e.touches[0]\n    this.moveDrag(touch.clientX, touch.clientY)\n  }\n\n  private moveDrag(clientX: number, clientY: number) {\n    if (!this.dragstart) return\n\n    const deltaX = clientX - this.dragstart.x\n    const deltaY = clientY - this.dragstart.y\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-drag', {\n        bubbles: true,\n        composed: true,\n        detail: { x: deltaX, y: deltaY }\n      })\n    )\n\n    if (this.hasAttribute('vertical')) {\n      document.body.style.cursor = 'col-resize'\n    } else {\n      document.body.style.cursor = 'row-resize'\n    }\n\n    document.body.style.userSelect = 'none'\n  }\n\n  private onMouseUp = (e: MouseEvent) => {\n    this.endDrag(e.clientX, e.clientY)\n    window.removeEventListener('mousemove', this.onMouseMove)\n    window.removeEventListener('mouseup', this.onMouseUp)\n  }\n\n  private onTouchEnd = (e: TouchEvent) => {\n    const touch = e.changedTouches[0]\n    this.endDrag(touch.clientX, touch.clientY)\n    window.removeEventListener('touchmove', this.onTouchMove)\n    window.removeEventListener('touchend', this.onTouchEnd)\n  }\n\n  private endDrag(clientX: number, clientY: number) {\n    if (!this.dragstart) return\n\n    const deltaX = clientX - this.dragstart.x\n    const deltaY = clientY - this.dragstart.y\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragend', {\n        bubbles: true,\n        composed: true,\n        detail: { x: deltaX, y: deltaY }\n      })\n    )\n\n    this.dragstart = undefined\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n}\n"]}

package/dist/src/ox-gantt.js

@@ -93,6 +93,7 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         font-family: Arial, sans-serif;
         text-wrap: nowrap;
         position: relative;
+        user-select: none;
       }
 
       .container {
@@ -119,6 +120,7 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         overflow-y: overlay;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none; /* diabled rubber-band effect */
       }
 
       .resource-chart-container {
@@ -126,6 +128,7 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         padding: 0;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none;
       }
 
       .task-container {
@@ -134,6 +137,8 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         display: flex;
         overflow: hidden;
         box-sizing: border-box;
+        user-select: none;
+        overscroll-behavior: none;
       }
 
       .task-table-container {
@@ -142,6 +147,7 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         overflow-y: overlay;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none; /* diabled rubber-band effect */
       }
 
       .task-chart-container {
@@ -174,6 +180,9 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
         padding: 4px;
         text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       th {
@@ -291,7 +300,7 @@ let OxGantt = class OxGantt extends localize(i18next)(LitElement) {
     `;
     }
     renderTaskRows(tasks, level = 0, columnConfig) {
-        return tasks.flatMap(task => {
+        return (tasks || []).flatMap(task => {
             if (task.collapsed) {
                 return [this.renderTaskRow(task, level, columnConfig)];
             }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-gantt.js","sourceRoot":"","sources":["../../src/ox-gantt.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } from 'lit'\nimport * as d3 from 'd3'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './ox-gantt-chart.js'\nimport './ox-resource-chart.js'\nimport './ox-gantt-resize-splitter.js'\nimport { OxGanttChart } from './ox-gantt-chart.js'\nimport { OxResourceChart } from './ox-resource-chart.js'\nimport { ColumnConfig, Task, TimeScale, Resource } from './types.js'\n\n@customElement('ox-gantt')\nexport class OxGantt extends localize(i18next)(LitElement) {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        font-family: Arial, sans-serif;\n        text-wrap: nowrap;\n        position: relative;\n      }\n\n      .container {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n      }\n\n      .resource-container {\n        height: 300px;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n\n      .resource-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n      }\n\n      .resource-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n      }\n\n      .task-container {\n        flex: 1;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n\n      .task-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n      }\n\n      .task-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        margin: -1px;\n        margin-right: 0;\n      }\n\n      thead th {\n        position: sticky;\n        top: -1px;\n        z-index: 1;\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n        text-transform: capitalize;\n      }\n\n      th,\n      td {\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        padding: 4px;\n        text-align: left;\n      }\n\n      th {\n        height: 40px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n\n      td {\n        height: 30px;\n        box-sizing: border-box;\n      }\n\n      tr.selected {\n        color: var(--ox-gantt-selected-color, var(--md-sys-color-on-surface));\n        background-color: var(--ox-gantt-selected-background-color, var(--md-sys-color-surface-variant));\n      }\n\n      .resource-table-container th {\n        height: 30px;\n      }\n\n      svg.toggle-icon[collapsed] {\n        transform: rotate(-90deg);\n      }\n\n      span[group] {\n        cursor: pointer;\n        user-select: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) tasks: Task[] = []\n  @property({ type: Array }) resources: Resource[] = []\n  @property({ type: String, attribute: 'from-date' })\n  fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */\n  @property({ type: String, attribute: 'to-date' })\n  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */\n  @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false\n  @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'\n  @property({ type: Object }) colorProvider: (task: Task) => string = (task: Task) => {\n    const { tags = [] } = task\n    if (tags.includes('critical')) {\n      return 'red'\n    } else if (tags.includes('milestone')) {\n      return 'blue'\n    } else if (tags.includes('done')) {\n      return 'green'\n    }\n    return 'grey'\n  }\n  @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {\n    return [\n      { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: 50, order: 1 },\n      { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 2 },\n      { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: 100, order: 3 },\n      {\n        name: 'startDate',\n        label: i18next.t('label.gantt-task-start-date') || 'start date',\n        visible: true,\n        width: 100,\n        order: 4\n      },\n      {\n        name: 'endDate',\n        label: i18next.t('label.gantt-task-end-date') || 'end date',\n        visible: true,\n        width: 100,\n        order: 5\n      },\n      {\n        name: 'duration',\n        label: i18next.t('label.gantt-task-duration') || 'duration',\n        visible: true,\n        width: 30,\n        order: 6\n      },\n      { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: 100, order: 7 },\n      {\n        name: 'progress',\n        label: i18next.t('label.gantt-task-progress') || 'progress',\n        visible: true,\n        width: 100,\n        order: 8\n      },\n      {\n        name: 'dependsOn',\n        label: i18next.t('label.gantt-task-previous') || 'previous',\n        visible: true,\n        width: 100,\n        order: 9\n      },\n      {\n        name: 'resources',\n        label: i18next.t('label.gantt-task-resources') || 'resources',\n        visible: true,\n        width: 100,\n        order: 10\n      }\n    ]\n  }\n\n  @state() selectedTaskId?: string\n\n  @query('.task-container') taskContainer!: HTMLDivElement\n  @query('.task-table-container') taskTableContainer!: HTMLDivElement\n  @query('.resource-container') resourceContainer!: HTMLDivElement\n  @query('.resource-table-container') resourceTableContainer!: HTMLDivElement\n  @query('.task-table') taskTable!: HTMLTableElement\n  @query('ox-gantt-chart') ganttChart!: OxGanttChart\n  @query('ox-resource-chart') resourceChart!: OxResourceChart\n\n  private _startWidth: number = 0\n  private _startHeight: number = 0\n  private _isDragging: boolean = false\n\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <div class=\"task-container\">\n          <div class=\"task-table-container\" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-gantt-chart\n            class=\"task-chart-container\"\n            @scroll=${this.syncScroll}\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .selectedTaskId=${this.selectedTaskId}\n            .axisScale=${this.timeScale}\n            .colorProvider=${this.colorProvider}\n            ?extend-grid-lines=${this.extendGridLines}\n            @task-clicked=${this.handleTaskClicked}\n            @timescale-changed=${(e: CustomEvent) => this.syncTimeScale(e)}\n          ></ox-gantt-chart>\n        </div>\n        <ox-gantt-resize-splitter\n          horizontal\n          @splitter-dragstart=${(e: CustomEvent) => this.resizeVerticalStart(e)}\n          @splitter-drag=${(e: CustomEvent) => this.resizeVerticalDrag(e)}\n          @splitter-dragend=${(e: CustomEvent) => this.resizeVerticalEnd(e)}\n        ></ox-gantt-resize-splitter>\n        <div class=\"resource-container\">\n          <div class=\"resource-table-container\" @scroll=${this.syncScroll}>\n            <table>\n              <thead>\n                <tr>\n                  <th style=\"width: 100px\">${i18next.t('label.gantt-resource-type')}</th>\n                  <th>${i18next.t('label.gantt-resource-allocated')}</th>\n                </tr>\n              </thead>\n              <tbody>\n                ${this.resources.map(resource => this.renderResourceRow(resource))}\n              </tbody>\n            </table>\n          </div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-resource-chart\n            class=\"resource-chart-container\"\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .resources=${this.resources}\n            .axisScale=${this.timeScale}\n            @scroll=${this.syncScroll}\n          ></ox-resource-chart>\n        </div>\n      </div>\n    `\n  }\n\n  renderTaskTable() {\n    const columnConfig = this.columnConfigProvider()\n    if (!columnConfig) {\n      return\n    }\n\n    // Sort columns by the configured order\n    const sortedColumns = [...columnConfig].sort((a, b) => a.order - b.order)\n\n    return html`\n      <table class=\"task-table\">\n        <thead>\n          <tr>\n            ${sortedColumns.map(col =>\n              col.visible ? html`<th style=\"width: ${col.width}px\">${col.label}</th>` : nothing\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.renderTaskRows(this.tasks, 0, columnConfig)}\n        </tbody>\n      </table>\n    `\n  }\n\n  renderTaskRows(tasks: Task[], level: number = 0, columnConfig: ColumnConfig[]): TemplateResult[] {\n    return tasks.flatMap(task => {\n      if (task.collapsed) {\n        return [this.renderTaskRow(task, level, columnConfig)]\n      } else {\n        return [\n          this.renderTaskRow(task, level, columnConfig),\n          ...this.renderTaskRows(task.children || [], level + 1, columnConfig)\n        ]\n      }\n    })\n  }\n\n  renderTaskRow(task: Task, level: number, columnConfig: ColumnConfig[]) {\n    const isGroupTask = task.children && task.children.length > 0\n    const isCollapsed = !!task.collapsed\n    const paddingLeft = level * 16 + 4 // 트리 구조를 위한 패딩\n\n    return html`\n      <tr class=${this.selectedTaskId === task.id ? 'selected' : ''} @click=${() => this.selectTask(task.id)}>\n        ${columnConfig.map(col =>\n          col.visible\n            ? html`\n                <td class=\"task-row\" style=\"padding-left: ${col.name === 'title' ? paddingLeft : 4}px\">\n                  ${col.name === 'title'\n                    ? html`\n                        ${isGroupTask\n                          ? html`\n                              <span class=\"toggle-icon\" @click=${(e: Event) => this.toggleCollapse(e, task)} group>\n                                ${isGroupTask\n                                  ? html`\n                                      <svg\n                                        class=\"toggle-icon\"\n                                        width=\"10\"\n                                        height=\"10\"\n                                        viewBox=\"0 0 10 10\"\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        ?collapsed=${isCollapsed}\n                                      >\n                                        <polygon\n                                          points=\"0,1 10,1 5,9\"\n                                          fill=\"var(--md-sys-color-on-primary-container)\"\n                                          opacity=\"0.5\"\n                                        />\n                                      </svg>\n                                    `\n                                  : nothing}\n                              </span>\n                            `\n                          : nothing}\n                        ${this.getTaskFieldValue(task, col.name)}\n                      `\n                    : this.getTaskFieldValue(task, col.name)}\n                </td>\n              `\n            : nothing\n        )}\n      </tr>\n    `\n  }\n\n  toggleCollapse(e: Event, task: Task) {\n    e.stopPropagation() // 클릭 이벤트 전파 방지\n\n    task.collapsed = !task.collapsed\n    this.requestUpdate()\n\n    this.ganttChart.tasks = [...this.tasks]\n  }\n\n  renderResourceRow(resource: Resource) {\n    return html`\n      <tr>\n        <td>${resource.type}</td>\n        <td>${resource.allocated}</td>\n      </tr>\n    `\n  }\n\n  getTaskFieldValue(task: Task, field: string) {\n    switch (field) {\n      case 'id':\n        return task.id\n      case 'title':\n        return task.title\n      case 'type':\n        return task.type\n      case 'startDate':\n        return new Date(task.startDate).toISOString().split('T')[0]\n      case 'endDate':\n        return new Date(task.endDate).toISOString().split('T')[0]\n      case 'duration':\n        return task.duration || 0\n      case 'tags':\n        return task.tags?.join(', ') || ''\n      case 'progress':\n        return task.progress || ''\n      case 'dependsOn':\n        return task.dependsOn || ''\n      case 'resources':\n        return task.resources?.map(res => `${res.type}: ${res.allocated}`).join(', ') || ''\n      default:\n        return ''\n    }\n  }\n\n  selectTask(taskId: string) {\n    this.selectedTaskId = taskId\n  }\n\n  handleTaskClicked(event: CustomEvent) {\n    this.selectedTaskId = event.detail.taskId\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.taskTableContainer.style.width = '254px'\n    this.resourceTableContainer.style.width = '254px'\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('tasks')) {\n      this.resources = this.aggregateResources(this.tasks)\n    }\n  }\n\n  aggregateResources(tasks: Task[]): Resource[] {\n    const resourceMap: { [key: string]: number } = {}\n\n    const traverseTasks = (tasks: Task[]) => {\n      tasks.forEach(task => {\n        if (task.resources) {\n          const startDate = new Date(task.startDate)\n          const endDate = new Date(task.endDate)\n          const durationDays = d3.timeDay.count(startDate, d3.timeDay.offset(endDate, 1))\n\n          task.resources.forEach(resource => {\n            const totalAllocation = resource.allocated * durationDays\n            if (!resourceMap[resource.type]) {\n              resourceMap[resource.type] = 0\n            }\n            resourceMap[resource.type] += totalAllocation\n          })\n        }\n\n        if (task.children) {\n          traverseTasks(task.children)\n        }\n      })\n    }\n\n    traverseTasks(tasks)\n\n    return Object.keys(resourceMap).map(type => ({\n      type,\n      allocated: resourceMap[type]\n    }))\n  }\n\n  syncScroll(e: Event) {\n    const target = e.target as HTMLElement\n\n    if (target === this.taskTableContainer) {\n      const newScrollTop = this.taskTableContainer.scrollTop\n      this.ganttChart.setVerticalOffset(newScrollTop)\n    } else if (target === this.ganttChart) {\n      const newScrollTop = this.ganttChart.getVerticalOffset()\n      this.taskTableContainer.scrollTop = newScrollTop\n\n      const newScrollLeft = this.ganttChart.getHorizontalOffset()\n      this.resourceChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceChart) {\n      const newScrollTop = this.resourceChart.getVerticalOffset()\n      this.resourceTableContainer.scrollTop = newScrollTop\n\n      const newScrollLeft = this.resourceChart.getHorizontalOffset()\n      this.ganttChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceTableContainer) {\n      const newScrollTop = this.resourceTableContainer.scrollTop\n      this.resourceChart.setVerticalOffset(newScrollTop)\n    }\n  }\n\n  syncTimeScale(e: CustomEvent) {\n    const detail = e.detail\n    this.resourceChart.syncTimeScale(detail)\n  }\n\n  resizeHorizontalStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n    this._isDragging = true\n  }\n\n  resizeHorizontalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n    this.taskTableContainer.style.width = `${this._startWidth + delta.x}px`\n    this.resourceTableContainer.style.width = `${this._startWidth + delta.x}px`\n  }\n\n  resizeHorizontalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n\n  resizeVerticalStart(e: CustomEvent) {\n    this._startHeight = ((e.target as HTMLElement)?.nextElementSibling as HTMLElement)?.offsetHeight\n    this._isDragging = true\n  }\n\n  resizeVerticalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n\n    this.resourceContainer.style.height = `${this._startHeight - delta.y}px`\n  }\n\n  resizeVerticalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n}\n"]}
+{"version":3,"file":"ox-gantt.js","sourceRoot":"","sources":["../../src/ox-gantt.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, PropertyValueMap, nothing, TemplateResult } from 'lit'\nimport * as d3 from 'd3'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport './ox-gantt-chart.js'\nimport './ox-resource-chart.js'\nimport './ox-gantt-resize-splitter.js'\nimport { OxGanttChart } from './ox-gantt-chart.js'\nimport { OxResourceChart } from './ox-resource-chart.js'\nimport { ColumnConfig, Task, TimeScale, Resource } from './types.js'\n\n@customElement('ox-gantt')\nexport class OxGantt extends localize(i18next)(LitElement) {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        font-family: Arial, sans-serif;\n        text-wrap: nowrap;\n        position: relative;\n        user-select: none;\n      }\n\n      .container {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n      }\n\n      .resource-container {\n        height: 300px;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n\n      .resource-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        overscroll-behavior: none; /* diabled rubber-band effect */\n      }\n\n      .resource-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        overscroll-behavior: none;\n      }\n\n      .task-container {\n        flex: 1;\n\n        display: flex;\n        overflow: hidden;\n        box-sizing: border-box;\n        user-select: none;\n        overscroll-behavior: none;\n      }\n\n      .task-table-container {\n        padding: 0;\n        overflow: auto;\n        overflow-y: overlay;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        overscroll-behavior: none; /* diabled rubber-band effect */\n      }\n\n      .task-chart-container {\n        flex: 1;\n        padding: 0;\n        box-sizing: border-box;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        margin: -1px;\n        margin-right: 0;\n      }\n\n      thead th {\n        position: sticky;\n        top: -1px;\n        z-index: 1;\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        border-color: var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n        text-transform: capitalize;\n      }\n\n      th,\n      td {\n        border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));\n        padding: 4px;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      th {\n        height: 40px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n\n      td {\n        height: 30px;\n        box-sizing: border-box;\n      }\n\n      tr.selected {\n        color: var(--ox-gantt-selected-color, var(--md-sys-color-on-surface));\n        background-color: var(--ox-gantt-selected-background-color, var(--md-sys-color-surface-variant));\n      }\n\n      .resource-table-container th {\n        height: 30px;\n      }\n\n      svg.toggle-icon[collapsed] {\n        transform: rotate(-90deg);\n      }\n\n      span[group] {\n        cursor: pointer;\n        user-select: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) tasks: Task[] = []\n  @property({ type: Array }) resources: Resource[] = []\n  @property({ type: String, attribute: 'from-date' })\n  fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0] /* beginning of this year */\n  @property({ type: String, attribute: 'to-date' })\n  toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */\n  @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false\n  @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'\n  @property({ type: Object }) colorProvider: (task: Task) => string = (task: Task) => {\n    const { tags = [] } = task\n    if (tags.includes('critical')) {\n      return 'red'\n    } else if (tags.includes('milestone')) {\n      return 'blue'\n    } else if (tags.includes('done')) {\n      return 'green'\n    }\n    return 'grey'\n  }\n  @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {\n    return [\n      { name: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: 50, order: 1 },\n      { name: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: 150, order: 2 },\n      { name: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: 100, order: 3 },\n      {\n        name: 'startDate',\n        label: i18next.t('label.gantt-task-start-date') || 'start date',\n        visible: true,\n        width: 100,\n        order: 4\n      },\n      {\n        name: 'endDate',\n        label: i18next.t('label.gantt-task-end-date') || 'end date',\n        visible: true,\n        width: 100,\n        order: 5\n      },\n      {\n        name: 'duration',\n        label: i18next.t('label.gantt-task-duration') || 'duration',\n        visible: true,\n        width: 30,\n        order: 6\n      },\n      { name: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: 100, order: 7 },\n      {\n        name: 'progress',\n        label: i18next.t('label.gantt-task-progress') || 'progress',\n        visible: true,\n        width: 100,\n        order: 8\n      },\n      {\n        name: 'dependsOn',\n        label: i18next.t('label.gantt-task-previous') || 'previous',\n        visible: true,\n        width: 100,\n        order: 9\n      },\n      {\n        name: 'resources',\n        label: i18next.t('label.gantt-task-resources') || 'resources',\n        visible: true,\n        width: 100,\n        order: 10\n      }\n    ]\n  }\n\n  @state() selectedTaskId?: string\n\n  @query('.task-container') taskContainer!: HTMLDivElement\n  @query('.task-table-container') taskTableContainer!: HTMLDivElement\n  @query('.resource-container') resourceContainer!: HTMLDivElement\n  @query('.resource-table-container') resourceTableContainer!: HTMLDivElement\n  @query('.task-table') taskTable!: HTMLTableElement\n  @query('ox-gantt-chart') ganttChart!: OxGanttChart\n  @query('ox-resource-chart') resourceChart!: OxResourceChart\n\n  private _startWidth: number = 0\n  private _startHeight: number = 0\n  private _isDragging: boolean = false\n\n  render() {\n    return html`\n      <div class=\"container md-typescale-body-medium\">\n        <div class=\"task-container\">\n          <div class=\"task-table-container\" @scroll=${this.syncScroll}>${this.renderTaskTable()}</div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-gantt-chart\n            class=\"task-chart-container\"\n            @scroll=${this.syncScroll}\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .selectedTaskId=${this.selectedTaskId}\n            .axisScale=${this.timeScale}\n            .colorProvider=${this.colorProvider}\n            ?extend-grid-lines=${this.extendGridLines}\n            @task-clicked=${this.handleTaskClicked}\n            @timescale-changed=${(e: CustomEvent) => this.syncTimeScale(e)}\n          ></ox-gantt-chart>\n        </div>\n        <ox-gantt-resize-splitter\n          horizontal\n          @splitter-dragstart=${(e: CustomEvent) => this.resizeVerticalStart(e)}\n          @splitter-drag=${(e: CustomEvent) => this.resizeVerticalDrag(e)}\n          @splitter-dragend=${(e: CustomEvent) => this.resizeVerticalEnd(e)}\n        ></ox-gantt-resize-splitter>\n        <div class=\"resource-container\">\n          <div class=\"resource-table-container\" @scroll=${this.syncScroll}>\n            <table>\n              <thead>\n                <tr>\n                  <th style=\"width: 100px\">${i18next.t('label.gantt-resource-type')}</th>\n                  <th>${i18next.t('label.gantt-resource-allocated')}</th>\n                </tr>\n              </thead>\n              <tbody>\n                ${this.resources.map(resource => this.renderResourceRow(resource))}\n              </tbody>\n            </table>\n          </div>\n          <ox-gantt-resize-splitter\n            vertical\n            @splitter-dragstart=${(e: CustomEvent) => this.resizeHorizontalStart(e)}\n            @splitter-drag=${(e: CustomEvent) => this.resizeHorizontalDrag(e)}\n            @splitter-dragend=${(e: CustomEvent) => this.resizeHorizontalEnd(e)}\n          ></ox-gantt-resize-splitter>\n          <ox-resource-chart\n            class=\"resource-chart-container\"\n            .fromDate=${this.fromDate}\n            .toDate=${this.toDate}\n            .tasks=${this.tasks}\n            .resources=${this.resources}\n            .axisScale=${this.timeScale}\n            @scroll=${this.syncScroll}\n          ></ox-resource-chart>\n        </div>\n      </div>\n    `\n  }\n\n  renderTaskTable() {\n    const columnConfig = this.columnConfigProvider()\n    if (!columnConfig) {\n      return\n    }\n\n    // Sort columns by the configured order\n    const sortedColumns = [...columnConfig].sort((a, b) => a.order - b.order)\n\n    return html`\n      <table class=\"task-table\">\n        <thead>\n          <tr>\n            ${sortedColumns.map(col =>\n              col.visible ? html`<th style=\"width: ${col.width}px\">${col.label}</th>` : nothing\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.renderTaskRows(this.tasks, 0, columnConfig)}\n        </tbody>\n      </table>\n    `\n  }\n\n  renderTaskRows(tasks: Task[], level: number = 0, columnConfig: ColumnConfig[]): TemplateResult[] {\n    return (tasks || []).flatMap(task => {\n      if (task.collapsed) {\n        return [this.renderTaskRow(task, level, columnConfig)]\n      } else {\n        return [\n          this.renderTaskRow(task, level, columnConfig),\n          ...this.renderTaskRows(task.children || [], level + 1, columnConfig)\n        ]\n      }\n    })\n  }\n\n  renderTaskRow(task: Task, level: number, columnConfig: ColumnConfig[]) {\n    const isGroupTask = task.children && task.children.length > 0\n    const isCollapsed = !!task.collapsed\n    const paddingLeft = level * 16 + 4 // 트리 구조를 위한 패딩\n\n    return html`\n      <tr class=${this.selectedTaskId === task.id ? 'selected' : ''} @click=${() => this.selectTask(task.id)}>\n        ${columnConfig.map(col =>\n          col.visible\n            ? html`\n                <td class=\"task-row\" style=\"padding-left: ${col.name === 'title' ? paddingLeft : 4}px\">\n                  ${col.name === 'title'\n                    ? html`\n                        ${isGroupTask\n                          ? html`\n                              <span class=\"toggle-icon\" @click=${(e: Event) => this.toggleCollapse(e, task)} group>\n                                ${isGroupTask\n                                  ? html`\n                                      <svg\n                                        class=\"toggle-icon\"\n                                        width=\"10\"\n                                        height=\"10\"\n                                        viewBox=\"0 0 10 10\"\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        ?collapsed=${isCollapsed}\n                                      >\n                                        <polygon\n                                          points=\"0,1 10,1 5,9\"\n                                          fill=\"var(--md-sys-color-on-primary-container)\"\n                                          opacity=\"0.5\"\n                                        />\n                                      </svg>\n                                    `\n                                  : nothing}\n                              </span>\n                            `\n                          : nothing}\n                        ${this.getTaskFieldValue(task, col.name)}\n                      `\n                    : this.getTaskFieldValue(task, col.name)}\n                </td>\n              `\n            : nothing\n        )}\n      </tr>\n    `\n  }\n\n  toggleCollapse(e: Event, task: Task) {\n    e.stopPropagation() // 클릭 이벤트 전파 방지\n\n    task.collapsed = !task.collapsed\n    this.requestUpdate()\n\n    this.ganttChart.tasks = [...this.tasks]\n  }\n\n  renderResourceRow(resource: Resource) {\n    return html`\n      <tr>\n        <td>${resource.type}</td>\n        <td>${resource.allocated}</td>\n      </tr>\n    `\n  }\n\n  getTaskFieldValue(task: Task, field: string) {\n    switch (field) {\n      case 'id':\n        return task.id\n      case 'title':\n        return task.title\n      case 'type':\n        return task.type\n      case 'startDate':\n        return new Date(task.startDate).toISOString().split('T')[0]\n      case 'endDate':\n        return new Date(task.endDate).toISOString().split('T')[0]\n      case 'duration':\n        return task.duration || 0\n      case 'tags':\n        return task.tags?.join(', ') || ''\n      case 'progress':\n        return task.progress || ''\n      case 'dependsOn':\n        return task.dependsOn || ''\n      case 'resources':\n        return task.resources?.map(res => `${res.type}: ${res.allocated}`).join(', ') || ''\n      default:\n        return ''\n    }\n  }\n\n  selectTask(taskId: string) {\n    this.selectedTaskId = taskId\n  }\n\n  handleTaskClicked(event: CustomEvent) {\n    this.selectedTaskId = event.detail.taskId\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.taskTableContainer.style.width = '254px'\n    this.resourceTableContainer.style.width = '254px'\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('tasks')) {\n      this.resources = this.aggregateResources(this.tasks)\n    }\n  }\n\n  aggregateResources(tasks: Task[]): Resource[] {\n    const resourceMap: { [key: string]: number } = {}\n\n    const traverseTasks = (tasks: Task[]) => {\n      tasks.forEach(task => {\n        if (task.resources) {\n          const startDate = new Date(task.startDate)\n          const endDate = new Date(task.endDate)\n          const durationDays = d3.timeDay.count(startDate, d3.timeDay.offset(endDate, 1))\n\n          task.resources.forEach(resource => {\n            const totalAllocation = resource.allocated * durationDays\n            if (!resourceMap[resource.type]) {\n              resourceMap[resource.type] = 0\n            }\n            resourceMap[resource.type] += totalAllocation\n          })\n        }\n\n        if (task.children) {\n          traverseTasks(task.children)\n        }\n      })\n    }\n\n    traverseTasks(tasks)\n\n    return Object.keys(resourceMap).map(type => ({\n      type,\n      allocated: resourceMap[type]\n    }))\n  }\n\n  syncScroll(e: Event) {\n    const target = e.target as HTMLElement\n\n    if (target === this.taskTableContainer) {\n      const newScrollTop = this.taskTableContainer.scrollTop\n      this.ganttChart.setVerticalOffset(newScrollTop)\n    } else if (target === this.ganttChart) {\n      const newScrollTop = this.ganttChart.getVerticalOffset()\n      this.taskTableContainer.scrollTop = newScrollTop\n\n      const newScrollLeft = this.ganttChart.getHorizontalOffset()\n      this.resourceChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceChart) {\n      const newScrollTop = this.resourceChart.getVerticalOffset()\n      this.resourceTableContainer.scrollTop = newScrollTop\n\n      const newScrollLeft = this.resourceChart.getHorizontalOffset()\n      this.ganttChart.setHorizontalOffset(newScrollLeft)\n    } else if (target === this.resourceTableContainer) {\n      const newScrollTop = this.resourceTableContainer.scrollTop\n      this.resourceChart.setVerticalOffset(newScrollTop)\n    }\n  }\n\n  syncTimeScale(e: CustomEvent) {\n    const detail = e.detail\n    this.resourceChart.syncTimeScale(detail)\n  }\n\n  resizeHorizontalStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n    this._isDragging = true\n  }\n\n  resizeHorizontalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n    this.taskTableContainer.style.width = `${this._startWidth + delta.x}px`\n    this.resourceTableContainer.style.width = `${this._startWidth + delta.x}px`\n  }\n\n  resizeHorizontalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n\n  resizeVerticalStart(e: CustomEvent) {\n    this._startHeight = ((e.target as HTMLElement)?.nextElementSibling as HTMLElement)?.offsetHeight\n    this._isDragging = true\n  }\n\n  resizeVerticalDrag(e: CustomEvent) {\n    if (!this._isDragging) return\n    const delta = e.detail\n\n    this.resourceContainer.style.height = `${this._startHeight - delta.y}px`\n  }\n\n  resizeVerticalEnd(e: CustomEvent) {\n    this._isDragging = false\n  }\n}\n"]}

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

@@ -13,12 +13,14 @@ let OxResourceChart = class OxResourceChart extends LitElement {
         display: flex;
         overflow: hidden;
         position: relative;
+        user-select: none;
       }
 
       div[chart-container] {
         flex-direction: column;
         overflow-x: auto;
         overflow-y: hidden;
+        overscroll-behavior: none;
       }
 
       svg[header] {

package/dist/src/ox-resource-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-resource-chart.js","sourceRoot":"","sources":["../../src/ox-resource-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ResourceChartController } from './resource-chart-controller'\nimport { Task, Resource, TimeScale } from './types'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-resource-chart')\nexport class OxResourceChart extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: hidden;\n        position: relative;\n      }\n\n      div[chart-container] {\n        flex-direction: column;\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n\n      svg[header] {\n        display: block;\n        min-width: 100%;\n        box-sizing: border-box;\n        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n        height: 30px;\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        position: sticky;\n        top: 0;\n        z-index: 1;\n      }\n\n      svg[body] {\n        display: block;\n        min-width: 100%;\n      }\n\n      .grid line {\n        stroke: #e0e0e0;\n      }\n\n      .grid path {\n        stroke-width: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]\n  @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]\n  @property({ type: String }) axisScale: TimeScale = 'week-day'\n  @property({ type: Array }) resources: Resource[] = []\n  @property({ type: Array }) tasks: Task[] = []\n\n  @query('[chart-container]') container!: HTMLDivElement\n  @query('svg[header]') svgHeader!: SVGSVGElement\n  @query('svg[body]') svgBody!: SVGSVGElement\n\n  private resourceChartController: ResourceChartController\n\n  constructor() {\n    super()\n    this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {\n      this.resourceChartController.updateRange(this.fromDate, this.toDate)\n    }\n\n    if (changedProperties.has('resources')) {\n      this.resourceChartController.setResources(this.resources)\n      this.updateChartHeight()\n    }\n\n    if (changedProperties.has('tasks')) {\n      this.resourceChartController.setTasks(this.flattenTasks(this.tasks))\n      this.updateChartHeight()\n    }\n\n    if (changedProperties.has('axisScale')) {\n      this.resourceChartController.level = this.axisScale\n      this.resourceChartController.updateTimeScale()\n    }\n\n    this.resourceChartController.drawAxes(this.svgHeader)\n    this.resourceChartController.drawBody(this.svgBody)\n  }\n\n  updateChartHeight() {\n    const resourceCount = this.resources.length\n    const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)\n    const minHeight = 200 // 최소 높이\n    const chartHeight = Math.max(resourceCount * rowHeight, minHeight)\n\n    this.svgBody.style.height = `${chartHeight}px`\n  }\n\n  render() {\n    return html`\n      <div\n        chart-container\n        @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}\n        @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}\n        @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}\n      >\n        <svg header></svg>\n        <svg body></svg>\n      </div>\n    `\n  }\n\n  syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n    this.resourceChartController.syncTimeScale(detail)\n    this.requestUpdate()\n  }\n\n  getHorizontalOffset(): number {\n    return this.container.scrollLeft\n  }\n\n  setHorizontalOffset(offset: number) {\n    this.container.scrollLeft = offset\n  }\n\n  getVerticalOffset(): number {\n    return this.container.scrollTop\n  }\n\n  setVerticalOffset(offset: number) {\n    this.container.scrollTop = offset\n  }\n\n  flattenTasks(tasks: Task[], level: number = 0): Task[] {\n    return tasks.flatMap(task =>\n      task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-resource-chart.js","sourceRoot":"","sources":["../../src/ox-resource-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ResourceChartController } from './resource-chart-controller'\nimport { Task, Resource, TimeScale } from './types'\n\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-resource-chart')\nexport class OxResourceChart extends LitElement {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: hidden;\n        position: relative;\n        user-select: none;\n      }\n\n      div[chart-container] {\n        flex-direction: column;\n        overflow-x: auto;\n        overflow-y: hidden;\n        overscroll-behavior: none;\n      }\n\n      svg[header] {\n        display: block;\n        min-width: 100%;\n        box-sizing: border-box;\n        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));\n        height: 30px;\n        background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));\n        color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));\n        position: sticky;\n        top: 0;\n        z-index: 1;\n      }\n\n      svg[body] {\n        display: block;\n        min-width: 100%;\n      }\n\n      .grid line {\n        stroke: #e0e0e0;\n      }\n\n      .grid path {\n        stroke-width: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]\n  @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]\n  @property({ type: String }) axisScale: TimeScale = 'week-day'\n  @property({ type: Array }) resources: Resource[] = []\n  @property({ type: Array }) tasks: Task[] = []\n\n  @query('[chart-container]') container!: HTMLDivElement\n  @query('svg[header]') svgHeader!: SVGSVGElement\n  @query('svg[body]') svgBody!: SVGSVGElement\n\n  private resourceChartController: ResourceChartController\n\n  constructor() {\n    super()\n    this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {\n      this.resourceChartController.updateRange(this.fromDate, this.toDate)\n    }\n\n    if (changedProperties.has('resources')) {\n      this.resourceChartController.setResources(this.resources)\n      this.updateChartHeight()\n    }\n\n    if (changedProperties.has('tasks')) {\n      this.resourceChartController.setTasks(this.flattenTasks(this.tasks))\n      this.updateChartHeight()\n    }\n\n    if (changedProperties.has('axisScale')) {\n      this.resourceChartController.level = this.axisScale\n      this.resourceChartController.updateTimeScale()\n    }\n\n    this.resourceChartController.drawAxes(this.svgHeader)\n    this.resourceChartController.drawBody(this.svgBody)\n  }\n\n  updateChartHeight() {\n    const resourceCount = this.resources.length\n    const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)\n    const minHeight = 200 // 최소 높이\n    const chartHeight = Math.max(resourceCount * rowHeight, minHeight)\n\n    this.svgBody.style.height = `${chartHeight}px`\n  }\n\n  render() {\n    return html`\n      <div\n        chart-container\n        @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}\n        @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}\n        @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}\n      >\n        <svg header></svg>\n        <svg body></svg>\n      </div>\n    `\n  }\n\n  syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {\n    this.resourceChartController.syncTimeScale(detail)\n    this.requestUpdate()\n  }\n\n  getHorizontalOffset(): number {\n    return this.container.scrollLeft\n  }\n\n  setHorizontalOffset(offset: number) {\n    this.container.scrollLeft = offset\n  }\n\n  getVerticalOffset(): number {\n    return this.container.scrollTop\n  }\n\n  setVerticalOffset(offset: number) {\n    this.container.scrollTop = offset\n  }\n\n  flattenTasks(tasks: Task[], level: number = 0): Task[] {\n    return tasks.flatMap(task =>\n      task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]\n    )\n  }\n}\n"]}

package/dist/src/ox-task-tooltip.d.ts

@@ -6,7 +6,9 @@ export declare class OxTaskTooltip extends LitElement {
     endDate: string;
     progress: number;
     type: string;
+    visible: boolean;
+    titleElement: HTMLDivElement;
     show(x: number, y: number): void;
-    hide(): void;
+    hide: () => void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ox-task-tooltip.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 let OxTaskTooltip = class OxTaskTooltip extends LitElement {
     constructor() {
         super(...arguments);
@@ -9,10 +9,15 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
         this.endDate = '';
         this.progress = 0;
         this.type = '';
+        this.visible = false;
+        this.hide = () => {
+            this.titleElement.removeEventListener('blur', this.hide);
+            this.removeAttribute('visible');
+        };
     }
     static { this.styles = css `
     :host {
-      position: fixed; /* position: absolute로 변경 */
+      position: fixed;
       background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));
       border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
       padding: var(--spacing-medium, 10px);
@@ -28,17 +33,18 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
       transition:
         visibility 0.1s,
         opacity 0.1s;
-      opacity: 0; /* 초기에는 보이지 않음 */
+      opacity: 0;
     }
     :host([visible]) {
       visibility: visible;
-      opacity: 1; /* 보일 때는 불투명 */
+      opacity: 1;
     }
     .title {
       font-weight: bold;
       font-size: 16px;
       margin-bottom: 8px;
-      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */
+      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4));
+      outline: none;
     }
     .detail {
       display: grid;
@@ -49,14 +55,24 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
     .label {
       font-weight: bold;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
-      text-align: right; /* 라벨을 우측 정렬 */
+      text-align: right;
     }
     .colon {
       text-align: center;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
     }
     .value {
-      text-align: left; /* 값을 좌측 정렬 */
+      text-align: left;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+    }
+    .close-button {
+      position: absolute;
+      top: 4px;
+      right: 8px;
+      background: none;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
     }
   `; }
@@ -94,13 +110,16 @@ let OxTaskTooltip = class OxTaskTooltip extends LitElement {
             }
         }
         this.setAttribute('visible', '');
-    }
-    hide() {
-        this.removeAttribute('visible');
+        setTimeout(() => {
+            this.titleElement.addEventListener('blur', this.hide);
+            this.titleElement.focus({ preventScroll: true });
+        }, 500);
     }
     render() {
         return html `
-      <div class="title">${this.title}</div>
+      <div class="close-button" @click=${this.hide} @touchstart=${this.hide}>✕</div>
+      <div class="title" tabindex="0">${this.title}</div>
+
       <div class="detail">
         <span class="label">Type</span><span class="colon">:</span><span class="value">${this.type}</span>
         <span class="label">Start Date</span><span class="colon">:</span><span class="value">${this.startDate}</span>
@@ -125,6 +144,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxTaskTooltip.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], OxTaskTooltip.prototype, "visible", void 0);
+__decorate([
+    query('.title')
+], OxTaskTooltip.prototype, "titleElement", void 0);
 OxTaskTooltip = __decorate([
     customElement('ox-task-tooltip')
 ], OxTaskTooltip);