@operato/gantt 8.0.0-alpha.6 → 8.0.0-beta.1

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

@@ -1,131 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-@customElement('ox-gantt-resize-splitter')
-export class OxGanttResizeSplitter extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      opacity: 0.7;
-      background-color: var(--splitter-background-color);
-      width: var(--width);
-      height: var(--height);
-    }
-
-    :host(:hover) {
-      background-color: var(--splitter-hover-background-color);
-    }
-
-    div {
-      width: var(--width);
-      height: var(--height);
-    }
-  `
-
-  private dragstart?: { x: number; y: number }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.hasAttribute('vertical')) {
-      this.style.setProperty('--width', '3px')
-      this.style.setProperty('--height', '100%')
-      this.style.cursor = 'col-resize'
-    } else {
-      this.style.setProperty('--height', '3px')
-      this.style.setProperty('--width', '100%')
-      this.style.cursor = 'row-resize'
-    }
-  }
-
-  render() {
-    return html`<div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div>`
-  }
-
-  private onMouseDown(e: MouseEvent) {
-    this.dragstart = {
-      x: e.clientX,
-      y: e.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()
-  }
-
-  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(
-      new CustomEvent('splitter-drag', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-
-    if (this.hasAttribute('vertical')) {
-      document.body.style.cursor = 'col-resize'
-    } else {
-      document.body.style.cursor = 'row-resize'
-    }
-
-    document.body.style.userSelect = 'none'
-
-    e.stopPropagation()
-  }
-
-  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)
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragend', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
-      })
-    )
-
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-
-    e.stopPropagation()
-  }
-}

package/src/ox-gantt.ts

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