@operato/gantt 2.0.0-beta.14 → 2.0.0-beta.15

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

@@ -1,5 +1,4 @@
 import { LitElement, css, html } from 'lit'
-
 import { customElement } from 'lit/decorators.js'
 
 @customElement('ox-gantt-resize-splitter')
@@ -39,20 +38,7 @@ export class OxGanttResizeSplitter extends LitElement {
   }
 
   render() {
-    return html` <div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div> `
-  }
-
-  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
-  _throttled(delay: number, fn: (...args: any) => void) {
-    let lastCall = 0
-    return function (...args: any) {
-      const now = new Date().getTime()
-      if (now - lastCall < delay) {
-        return
-      }
-      lastCall = now
-      return fn(...args)
-    }
+    return html`<div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div>`
   }
 
   private onMouseDown(e: MouseEvent) {
@@ -68,20 +54,33 @@ export class OxGanttResizeSplitter extends LitElement {
       })
     )
 
+    this.parentElement!.addEventListener('mousemove', this.onMouseMoveHandler)
+    this.parentElement!.addEventListener('mouseup', this.onMouseUpHandler)
     window.addEventListener('mousemove', this.onMouseMoveHandler)
     window.addEventListener('mouseup', this.onMouseUpHandler)
 
     e.stopPropagation()
   }
 
-  onMouseMoveHandler = this._throttled(100, this.onMouseMove.bind(this)) // this.onMouseMove.bind(this)
-  onMouseUpHandler = this.onMouseUp.bind(this)
+  private onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e)
+  private onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e)
 
   private onMouseMove(e: MouseEvent) {
     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()
 
     this.dispatchEvent(
@@ -94,9 +93,6 @@ export class OxGanttResizeSplitter extends LitElement {
         }
       })
     )
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-    })
 
     if (this.hasAttribute('vertical')) {
       document.body.style.cursor = 'col-resize'
@@ -110,6 +106,8 @@ export class OxGanttResizeSplitter extends LitElement {
   }
 
   private onMouseUp(e: MouseEvent) {
+    this.parentElement!.removeEventListener('mousemove', this.onMouseMoveHandler)
+    this.parentElement!.removeEventListener('mouseup', this.onMouseUpHandler)
     window.removeEventListener('mousemove', this.onMouseMoveHandler)
     window.removeEventListener('mouseup', this.onMouseUpHandler)
 
@@ -124,11 +122,6 @@ export class OxGanttResizeSplitter extends LitElement {
       })
     )
 
-    requestAnimationFrame(() => {
-      dispatchEvent(new Event('resize'))
-      delete this.dragstart
-    })
-
     document.body.style.cursor = ''
     document.body.style.userSelect = ''
 

package/src/ox-gantt.ts

@@ -1,12 +1,13 @@
 import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import i18next from 'i18next'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 import { ScrollbarStyles } from '@operato/styles'
 
 import './ox-gantt-chart.js'
 import './ox-gantt-resize-splitter.js'
 import { OxGanttChart } from './ox-gantt-chart.js'
-import { Task } from './types.js'
+import { ColumnConfig, Task } from './types.js'
 
 @customElement('ox-gantt')
 export class OxGantt extends LitElement {
@@ -18,6 +19,7 @@ export class OxGantt extends LitElement {
         display: block;
         font-family: Arial, sans-serif;
         text-wrap: nowrap;
+        position: relative;
       }
 
       .container {
@@ -44,6 +46,7 @@ export class OxGantt extends LitElement {
 
       ox-gantt-resize-splitter {
         width: 4px;
+        cursor: ew-resize;
       }
 
       table {
@@ -59,6 +62,7 @@ export class OxGantt extends LitElement {
         top: -1px;
         z-index: 1;
         background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
+        text-transform: capitalize;
       }
 
       th,
@@ -77,6 +81,10 @@ export class OxGantt extends LitElement {
         height: 30px;
         box-sizing: border-box;
       }
+
+      tr.selected {
+        background-color: var(--ox-gantt-selected-background-color, var(--md-sys-color-surface-variant));
+      }
     `
   ]
 
@@ -87,6 +95,50 @@ export class OxGantt extends LitElement {
   toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0] /* end of this year */
   @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
 
+  @state() selectedTaskId?: string
+  @state()
+  private columnConfig: ColumnConfig[] = [
+    { id: 'id', label: i18next.t('label.gantt-task-id') || 'ID', visible: true, width: '50px', order: 1 },
+    {
+      id: 'section',
+      label: i18next.t('label.gantt-task-section') || 'section',
+      visible: true,
+      width: '100px',
+      order: 2
+    },
+    { id: 'title', label: i18next.t('label.gantt-task-title') || 'title', visible: true, width: '150px', order: 3 },
+    { id: 'type', label: i18next.t('label.gantt-task-type') || 'type', visible: true, width: '100px', order: 4 },
+    {
+      id: 'startDate',
+      label: i18next.t('label.gantt-task-start-date') || 'start date',
+      visible: true,
+      width: '100px',
+      order: 5
+    },
+    {
+      id: 'endDate',
+      label: i18next.t('label.gantt-task-end-date') || 'end date',
+      visible: true,
+      width: '100px',
+      order: 6
+    },
+    { id: 'tags', label: i18next.t('label.gantt-task-tags') || 'tags', visible: true, width: '100px', order: 7 },
+    {
+      id: 'progress',
+      label: i18next.t('label.gantt-task-progress') || 'progress',
+      visible: true,
+      width: '100px',
+      order: 8
+    },
+    {
+      id: 'dependsOn',
+      label: i18next.t('label.gantt-task-previous') || 'previous',
+      visible: true,
+      width: '100px',
+      order: 9
+    }
+  ]
+
   @query('.container') container!: HTMLDivElement
   @query('.task-container') taskContainer!: HTMLDivElement
   @query('.chart-container') chartContainer!: HTMLDivElement
@@ -94,6 +146,7 @@ export class OxGantt extends LitElement {
   @query('ox-gantt-chart') ganttChart!: OxGanttChart
 
   private _startWidth: number = 0
+  private _isDragging: boolean = false
 
   render() {
     return html`
@@ -103,6 +156,7 @@ export class OxGantt extends LitElement {
           vertical
           @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
           @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
+          @splitter-dragend=${(e: CustomEvent) => this.resizeEnd(e)}
         ></ox-gantt-resize-splitter>
         <ox-gantt-chart
           class="chart-container"
@@ -110,42 +164,42 @@ export class OxGantt extends LitElement {
           .fromDate=${this.fromDate}
           .toDate=${this.toDate}
           .tasks=${this.tasks}
+          .selectedTaskId=${this.selectedTaskId}
           axis-scale="week-day"
           ?extend-grid-lines=${this.extendGridLines}
+          @task-clicked=${this.handleTaskClicked}
         ></ox-gantt-chart>
       </div>
     `
   }
 
   renderTaskTable() {
+    const mergedTasks = this.mergeTasksBySection(this.tasks)
+
+    // Sort columns by the configured order
+    const sortedColumns = [...this.columnConfig].sort((a, b) => a.order - b.order)
+
     return html`
       <table>
         <thead>
           <tr>
-            <th>ID</th>
-            <th>Section</th>
-            <th>Title</th>
-            <th>Type</th>
-            <th>Start Time</th>
-            <th>End Time</th>
-            <th>Tags</th>
-            <th>Progress</th>
-            <th>Prev. Task</th>
+            ${sortedColumns.map(col => (col.visible ? html`<th style="width: ${col.width}">${col.label}</th>` : null))}
           </tr>
         </thead>
         <tbody>
-          ${this.tasks.map(
-            task => html`
-              <tr>
-                <td>${task.id}</td>
-                <td>${task.section?.name || ''}</td>
-                <td>${task.title}</td>
-                <td>${task.type}</td>
-                <td>${task.startTime.toISOString().split('T')[0]}</td>
-                <td>${task.endTime.toISOString().split('T')[0]}</td>
-                <td>${task.tags?.join(', ') || ''}</td>
-                <td>${task.progress || ''}</td>
-                <td>${task.after || ''}</td>
+          ${mergedTasks.map(
+            ({ task, showSection, rowSpan }) => html`
+              <tr class="${this.selectedTaskId === task.id ? 'selected' : ''}" @click=${() => this.selectTask(task.id)}>
+                ${sortedColumns.map(col => {
+                  if (col.id === 'section') {
+                    return col.visible && showSection
+                      ? html`<td rowspan="${rowSpan}" style="width: ${col.width}">${task.section?.name || ''}</td>`
+                      : null
+                  }
+                  return col.visible
+                    ? html`<td style="width: ${col.width}">${this.getTaskFieldValue(task, col.id)}</td>`
+                    : null
+                })}
               </tr>
             `
           )}
@@ -154,25 +208,93 @@ export class OxGantt extends LitElement {
     `
   }
 
+  getTaskFieldValue(task: Task, field: string) {
+    switch (field) {
+      case 'id':
+        return task.id
+      case 'section':
+        return task.section?.name || ''
+      case 'title':
+        return task.title
+      case 'type':
+        return task.type
+      case 'startDate':
+        return task.startDate.toISOString().split('T')[0]
+      case 'endDate':
+        return task.endDate.toISOString().split('T')[0]
+      case 'tags':
+        return task.tags?.join(', ') || ''
+      case 'progress':
+        return task.progress || ''
+      case 'dependsOn':
+        return task.dependsOn || ''
+      default:
+        return ''
+    }
+  }
+
+  mergeTasksBySection(tasks: Task[]): Array<{ task: Task; showSection: boolean; rowSpan: number }> {
+    const mergedTasks = [] as Array<{ task: Task; showSection: boolean; rowSpan: number }>
+    let currentSection = ''
+    let rowSpan = 0
+
+    tasks.forEach((task, index) => {
+      if (task.section?.name !== currentSection) {
+        currentSection = task.section?.name || ''
+        rowSpan = 1
+        mergedTasks.push({ task, showSection: true, rowSpan: 1 })
+      } else {
+        mergedTasks[mergedTasks.length - rowSpan].rowSpan = ++rowSpan
+        mergedTasks.push({ task, showSection: false, rowSpan: 0 })
+      }
+
+      if (index === tasks.length - 1 && rowSpan > 0) {
+        mergedTasks[mergedTasks.length - rowSpan].rowSpan = rowSpan
+      }
+    })
+
+    return mergedTasks
+  }
+
+  selectTask(taskId: string) {
+    this.selectedTaskId = taskId
+  }
+
+  handleTaskClicked(event: CustomEvent) {
+    this.selectedTaskId = event.detail.taskId
+  }
+
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this.taskContainer.style.width = '254px'
   }
 
   updated(changes: PropertyValues<this>) {}
 
-  syncScroll() {
-    this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop)
+  syncScroll(e: Event) {
+    const target = e.target as HTMLElement
+    if (target === this.taskContainer) {
+      this.ganttChart.setVerticalOffset(this.taskContainer.scrollTop)
+    } else if (target === this.ganttChart) {
+      this.taskContainer.scrollTop = this.ganttChart.getVerticalOffset()
+    }
   }
 
   resizeStart(e: CustomEvent) {
     this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth
+    this._isDragging = true
   }
 
   resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-    var x = (e.target as HTMLElement)?.previousElementSibling as HTMLElement
-    if (x) {
-      x.style.width = `${this._startWidth + delta.x}px`
+    if (!this._isDragging) return
+    const delta = e.detail
+    const taskContainer = this.taskContainer
+
+    if (taskContainer) {
+      taskContainer.style.width = `${this._startWidth + delta.x}px`
     }
   }
+
+  resizeEnd(e: CustomEvent) {
+    this._isDragging = false
+  }
 }

package/src/ox-task-tooltip.ts

@@ -0,0 +1,120 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-task-tooltip')
+export class OxTaskTooltip extends LitElement {
+  static styles = css`
+    :host {
+      position: fixed; /* position: absolute로 변경 */
+      background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface, #f9f9f9));
+      border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
+      padding: var(--spacing-medium, 10px);
+      border-radius: var(--spacing-medium, 8px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      visibility: hidden;
+      z-index: 10;
+      max-width: 300px;
+      font-family: Roboto;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+      transition:
+        visibility 0.1s,
+        opacity 0.1s;
+      opacity: 0; /* 초기에는 보이지 않음 */
+    }
+    :host([visible]) {
+      visibility: visible;
+      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)); /* 파란색 텍스트 */
+    }
+    .detail {
+      display: grid;
+      grid-template-columns: auto auto 1fr;
+      gap: 4px;
+      align-items: center;
+    }
+    .label {
+      font-weight: bold;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface-variant, #333));
+      text-align: right; /* 라벨을 우측 정렬 */
+    }
+    .colon {
+      text-align: center;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+    }
+    .value {
+      text-align: left; /* 값을 좌측 정렬 */
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+    }
+  `
+
+  @property({ type: String }) title = ''
+  @property({ type: String }) startDate = ''
+  @property({ type: String }) endDate = ''
+  @property({ type: Number }) progress = 0
+  @property({ type: String }) type = ''
+
+  show(x: number, y: number) {
+    const tooltipWidth = this.offsetWidth
+    const tooltipHeight = this.offsetHeight
+    const offsetX = 10
+    const offsetY = 10
+
+    // 기본 위치 계산
+    let left = x + offsetX
+    let top = y + offsetY
+
+    // 화면 경계 확인 및 조정
+    const screenWidth = window.innerWidth
+    const screenHeight = window.innerHeight
+
+    if (left + tooltipWidth > screenWidth) {
+      left = x - tooltipWidth - offsetX
+    }
+    if (top + tooltipHeight > screenHeight) {
+      top = y - tooltipHeight - offsetY
+    }
+
+    // offsetParent 요소를 기준으로 위치 설정
+    if (this.offsetParent) {
+      const parentRect = this.offsetParent!.getBoundingClientRect()
+      this.style.left = `${left - parentRect.left}px`
+      this.style.top = `${top - parentRect.top}px`
+    } else {
+      this.style.left = `${left}px`
+      this.style.top = `${top}px`
+
+      const myRect = this.getBoundingClientRect()
+
+      /* 실제 바운드와 설정한 left/top 이 일치하지 않는다면, 부모 어딘가에서 transform 되었다고 판단하고, 보정해줌 */
+      if (myRect.left !== left || myRect.top !== top) {
+        this.style.left = `${left + (left - myRect.left)}px`
+        this.style.top = `${top + (top - myRect.top)}px`
+      }
+    }
+
+    this.setAttribute('visible', '')
+  }
+
+  hide() {
+    this.removeAttribute('visible')
+  }
+
+  render() {
+    return html`
+      <div class="title">${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>
+        <span class="label">End Date</span><span class="colon">:</span><span class="value">${this.endDate}</span>
+        <span class="label">Progress</span><span class="colon">:</span><span class="value">${this.progress}%</span>
+      </div>
+    `
+  }
+}

package/src/types.ts

@@ -6,10 +6,10 @@ export interface Task {
   title: string
   type: TaskType
   section?: Section
-  startTime: Date
-  endTime: Date
+  startDate: Date
+  endDate: Date
   progress?: number
-  after?: string // 이전 태스크의 ID
+  dependsOn?: string // 이전 태스크의 ID
   length: string // 예: '3d' (3 days)
   tags?: TaskTag[]
   children?: Task[]
@@ -19,4 +19,12 @@ export interface Section {
   name: string
 }
 
+export interface ColumnConfig {
+  id: string
+  label: string
+  visible: boolean
+  width: string
+  order: number
+}
+
 export type LEVEL = 'year-quarter' | 'year-month' | 'quarter-week' | 'week-day'