@operato/gantt 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-gantt-chart.ts

@@ -1,418 +0,0 @@
-import './ox-task-tooltip.js'
-import './ox-resource-chart.js'
-
-import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import * as d3 from 'd3'
-import { locales } from './locales'
-
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-import { ScrollbarStyles } from '@operato/styles'
-import { GanttChartController } from './gantt-chart-controller'
-import { Task, TimeScale } from './types.js'
-import { levelDown, levelUp } from './utils'
-import { OxTaskTooltip } from './ox-task-tooltip.js'
-
-import { gesture } from '@operato/utils/gesture-mixin.js'
-
-@customElement('ox-gantt-chart')
-export class OxGanttChart extends gesture(LitElement) {
-  static styles = [
-    MDTypeScaleStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow: hidden;
-        position: relative;
-        user-select: none;
-      }
-
-      div[chart-container] {
-        display: block;
-        overflow-x: auto;
-        overflow-y: hidden;
-        overscroll-behavior: none;
-        touch-action: none;
-      }
-
-      svg {
-        min-width: 100%;
-      }
-
-      svg[header] {
-        display: block;
-        min-width: 100%;
-        box-sizing: border-box;
-        height: 40px;
-        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-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-
-      .scroll-button {
-        position: absolute;
-        top: 46px; /* 헤더 바로 아래 위치 */
-        width: 14px;
-        height: 14px;
-        background-color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
-        opacity: 0.5;
-        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-        cursor: pointer;
-        transform: rotate(90deg);
-      }
-
-      .scroll-button.left {
-        left: 6px;
-        transform: rotate(-90deg);
-      }
-
-      .scroll-button.right {
-        transform: rotate(90deg);
-        right: 6px;
-      }
-    `
-  ]
-
-  @property({ type: String, attribute: 'from-date' }) fromDate: string = new Date(new Date().getFullYear(), 0, 1)
-    .toISOString()
-    .split('T')[0]
-  @property({ type: String, attribute: 'to-date' }) toDate: string = new Date(new Date().getFullYear(), 11, 31)
-    .toISOString()
-    .split('T')[0]
-  @property({ type: String, attribute: 'axis-scale' }) axisScale: TimeScale = 'week-day'
-  @property({ type: Array }) tasks: Task[] = []
-  @property({ type: String, attribute: 'selected-task-id' }) selectedTaskId?: string
-  @property({ type: String }) locale: string = 'en-US'
-  @property({ type: Object }) colorProvider!: (task: Task) => string
-
-  @state() dateRangeSelected?: { start: Date; end: Date }
-
-  @query('svg[header]') svgHeader!: SVGElement
-  @query('svg[body]') svgBody!: SVGElement
-  @query('[chart-container]') container!: HTMLDivElement
-  @query('ox-task-tooltip') tooltip!: OxTaskTooltip
-
-  private ganttChartController!: GanttChartController
-
-  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    this.initHeaderGestureHandlers()
-
-    // this.addEventListener('date-range-cleared', e => this.clearSelection())
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.ganttChartController = new GanttChartController(this, this.fromDate, this.toDate, this.axisScale)
-
-    this.addEventListener('pinch', this.ganttChartController.handlePinchForBody as EventListener)
-    this.addEventListener('drag', this.ganttChartController.handleDragForBody as EventListener)
-    this.addEventListener('doubletap', this.ganttChartController.handleDoubleTapForBody as EventListener)
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this.removeEventListener('pinch', this.ganttChartController.handlePinchForBody as EventListener)
-    this.removeEventListener('drag', this.ganttChartController.handleDragForBody as EventListener)
-    this.removeEventListener('doubletap', this.ganttChartController.handleDoubleTapForBody as EventListener)
-
-    this.ganttChartController.dispose()
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
-      this.ganttChartController.updateRange(this.fromDate, this.toDate)
-    }
-
-    if (changedProperties.has('tasks')) {
-      const flattenTasks = this.flattenTasks(this.tasks)
-      this.ganttChartController.setTasks(flattenTasks)
-      this.svgBody.style.height = Math.max(flattenTasks.length * 30, 2000) + 'px'
-    }
-
-    if (changedProperties.has('locale')) {
-      this.updateLocale(this.locale)
-    }
-
-    if (changedProperties.has('selectedTaskId')) {
-      this.ganttChartController.selectedTaskId = this.selectedTaskId
-    }
-
-    if (changedProperties.has('axisScale')) {
-      this.ganttChartController.level = this.axisScale
-      this.ganttChartController.updateTimeScale()
-    }
-
-    if (changedProperties.has('colorProvider')) {
-      this.ganttChartController.setColorProvider(this.colorProvider)
-    }
-
-    this.ganttChartController.drawAxes(this.svgHeader)
-    this.ganttChartController.drawBody(this.svgBody, this.tooltip)
-    this.drawSelectedRange()
-  }
-
-  render() {
-    return html`
-      <div chart-container @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}>
-        <svg header @wheel=${this.handleWheelForHeader.bind(this)}></svg>
-        <svg body></svg>
-        <div class="scroll-button left" @click=${this.scrollToStart} @touchstart=${this.scrollToStart}></div>
-        <div class="scroll-button right" @click=${this.scrollToEnd} @touchstart=${this.scrollToEnd}></div>
-        <ox-task-tooltip></ox-task-tooltip>
-      </div>
-    `
-  }
-
-  scrollToStart() {
-    this.container.scrollTo({ left: 0, behavior: 'auto' })
-
-    this.syncScrollPosition()
-  }
-
-  scrollToEnd() {
-    this.container.scrollTo({ left: this.container.scrollWidth, behavior: 'auto' })
-    this.syncScrollPosition()
-  }
-
-  syncScrollPosition() {
-    const scrollLeft = this.container.scrollLeft
-    const customEvent = new CustomEvent('scroll', {
-      detail: { scrollLeft },
-      bubbles: true,
-      composed: true
-    })
-
-    this.dispatchEvent(customEvent)
-  }
-
-  setVerticalOffset(offset: number) {
-    this.container.scrollTop = offset
-  }
-
-  getVerticalOffset(): number {
-    return this.container.scrollTop
-  }
-
-  setHorizontalOffset(offset: number) {
-    this.container.scrollLeft = offset
-  }
-
-  getHorizontalOffset(): number {
-    return this.container.scrollLeft
-  }
-
-  flattenTasks(tasks: Task[], level: number = 0): Task[] {
-    return tasks.flatMap(task =>
-      task.collapsed ? [{ ...task, level }] : [{ ...task, level }, ...this.flattenTasks(task.children || [], level + 1)]
-    )
-  }
-
-  // 나머지 메서드는 기존 코드와 동일하게 유지
-  handleWheelForHeader(event: WheelEvent) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const deltaModeFactor =
-      event.deltaMode === WheelEvent.DOM_DELTA_LINE
-        ? 16
-        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
-          ? this.container.clientHeight
-          : 1
-
-    // deltaY 값이 0인 경우, deltaX 값을 사용하여 확대/축소를 처리
-    const delta = event.deltaY !== 0 ? event.deltaY : event.deltaX
-    const adjustedDelta = delta * deltaModeFactor
-
-    // 확대/축소 처리
-    const zoomFactor = adjustedDelta < 0 ? 1.1 : 0.9
-    this.ganttChartController.baseWidth *= zoomFactor
-
-    if (this.ganttChartController.baseWidth > 40) {
-      if (this.ganttChartController.level === 'week-day') {
-        this.ganttChartController.baseWidth = 40
-      } else {
-        this.ganttChartController.level = levelDown(this.ganttChartController.level)
-        this.ganttChartController.baseWidth = 30
-      }
-    } else if (this.ganttChartController.baseWidth < 30) {
-      if (this.ganttChartController.level === 'year-quarter') {
-        this.ganttChartController.baseWidth = 30
-      }
-    }
-
-    if (this.ganttChartController.baseWidth < 20) {
-      this.ganttChartController.level = levelUp(this.ganttChartController.level)
-      this.ganttChartController.baseWidth = 30
-    }
-
-    this.ganttChartController.updateTimeScale()
-    this.requestUpdate()
-
-    // Dispatch custom event to sync with ox-resource-chart
-    const customEvent = new CustomEvent('timescale-changed', {
-      detail: {
-        baseWidth: this.ganttChartController.baseWidth,
-        level: this.ganttChartController.level
-      },
-      bubbles: true,
-      composed: true
-    })
-    this.dispatchEvent(customEvent)
-  }
-
-  updateLocale(locale: string) {
-    const localeDefinition = (locales as any)[locale || 'en-US']
-    if (localeDefinition) {
-      d3.timeFormatDefaultLocale(localeDefinition)
-      this.ganttChartController.updateTimeScale()
-    }
-  }
-
-  initHeaderGestureHandlers() {
-    const header = d3.select(this.svgHeader)
-
-    let startX: number | null = null
-
-    const handlePointerDown = (event: PointerEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      startX = event.clientX - containerOffsetX
-
-      window.addEventListener('pointermove', handlePointerMove)
-      window.addEventListener('pointerup', handlePointerUp)
-    }
-
-    const handlePointerMove = (event: PointerEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      const currentX = event.clientX - containerOffsetX
-
-      this.highlightSelection(startX!, currentX)
-    }
-
-    const handlePointerUp = (event: PointerEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      window.removeEventListener('pointermove', handlePointerMove)
-      window.removeEventListener('pointerup', handlePointerUp)
-
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      const endX = event.clientX - containerOffsetX
-      this.finalizeSelection(startX!, endX)
-
-      startX = null
-    }
-
-    header.on('pointerdown', handlePointerDown)
-  }
-
-  highlightSelection(startX: number, endX: number) {
-    let startDate = this.ganttChartController.timeScale.invert(startX)
-    let endDate = this.ganttChartController.timeScale.invert(endX)
-
-    let start, end
-
-    if (this.ganttChartController.level === 'week-day') {
-      start = d3.timeDay.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'quarter-week') {
-      start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'year-month') {
-      start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'year-quarter') {
-      start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
-    }
-
-    this.dateRangeSelected = { start: start!, end: end! }
-  }
-
-  finalizeSelection(startX: number, endX: number) {
-    let startDate = this.ganttChartController.timeScale.invert(startX)
-    let endDate = this.ganttChartController.timeScale.invert(endX)
-
-    let start, end
-
-    if (this.ganttChartController.level === 'week-day') {
-      start = d3.timeDay.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'quarter-week') {
-      start = d3.timeWeek.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeWeek.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'year-month') {
-      start = d3.timeMonth.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeMonth.ceil(d3.max([startDate, endDate])!), -1)
-    } else if (this.ganttChartController.level === 'year-quarter') {
-      start = d3.timeMonth.every(3)!.floor(d3.min([startDate, endDate])!)
-      end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
-    }
-
-    this.dateRangeSelected = { start: start!, end: end! }
-
-    const formatDate = d3.timeFormat('%Y-%m-%d')
-
-    this.dispatchEvent(
-      new CustomEvent('date-range-selected', {
-        detail: { start: formatDate(start!), end: formatDate(end!) },
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  drawSelectedRange() {
-    if (!this.dateRangeSelected) {
-      return
-    }
-
-    let { start, end } = this.dateRangeSelected
-
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
-    header.selectAll('.selection-rect').remove()
-    body.selectAll('.selection-rect').remove()
-
-    header
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 20)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', 20)
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
-
-    body
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 0)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', '100%')
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
-  }
-}

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

@@ -1,159 +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);
-      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); /* 세로 스플리터는 세로 방향으로 터치 영역을 확장 */
-    }
-  `
-
-  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
-        class="touch-target"
-        @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}
-        @touchstart=${this.onTouchStart}
-      ></div>
-      <div></div>
-      <!-- 실제 보이는 스플리터 -->
-    `
-  }
-
-  private onMouseDown(e: MouseEvent) {
-    this.startDrag(e.clientX, e.clientY)
-    window.addEventListener('mousemove', this.onMouseMove)
-    window.addEventListener('mouseup', this.onMouseUp)
-    e.stopPropagation()
-  }
-
-  private onTouchStart(e: TouchEvent) {
-    // 터치가 touch-target에서 시작된 경우에만 작동
-    if ((e.target as HTMLElement).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()
-  }
-
-  private startDrag(clientX: number, clientY: number) {
-    this.dragstart = { x: clientX, y: clientY }
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragstart', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-
-  private onMouseMove = (e: MouseEvent) => {
-    this.moveDrag(e.clientX, e.clientY)
-  }
-
-  private onTouchMove = (e: TouchEvent) => {
-    const touch = e.touches[0]
-    this.moveDrag(touch.clientX, touch.clientY)
-  }
-
-  private moveDrag(clientX: number, clientY: number) {
-    if (!this.dragstart) return
-
-    const deltaX = clientX - this.dragstart.x
-    const deltaY = clientY - this.dragstart.y
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-drag', {
-        bubbles: true,
-        composed: true,
-        detail: { x: deltaX, y: deltaY }
-      })
-    )
-
-    if (this.hasAttribute('vertical')) {
-      document.body.style.cursor = 'col-resize'
-    } else {
-      document.body.style.cursor = 'row-resize'
-    }
-
-    document.body.style.userSelect = 'none'
-  }
-
-  private onMouseUp = (e: MouseEvent) => {
-    this.endDrag(e.clientX, e.clientY)
-    window.removeEventListener('mousemove', this.onMouseMove)
-    window.removeEventListener('mouseup', this.onMouseUp)
-  }
-
-  private onTouchEnd = (e: TouchEvent) => {
-    const touch = e.changedTouches[0]
-    this.endDrag(touch.clientX, touch.clientY)
-    window.removeEventListener('touchmove', this.onTouchMove)
-    window.removeEventListener('touchend', this.onTouchEnd)
-  }
-
-  private endDrag(clientX: number, clientY: number) {
-    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: deltaX, y: deltaY }
-      })
-    )
-
-    this.dragstart = undefined
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-  }
-}