@operato/gantt 7.1.27 → 7.1.32

package/src/ox-gantt-chart.ts

@@ -1,518 +0,0 @@
-import './ox-task-tooltip.js'
-import './ox-resource-chart.js'
-
-import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query } 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'
-
-@customElement('ox-gantt-chart')
-export class OxGanttChart extends LitElement {
-  static styles = [
-    MDTypeScaleStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow: hidden;
-        position: relative;
-      }
-      div[chart-container] {
-        display: block;
-        overflow-x: auto;
-        overflow-y: hidden;
-      }
-      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-buttons {
-        position: absolute;
-        top: 44px; /* 헤더 바로 아래 위치 */
-        right: 4px;
-        display: flex;
-        align-items: center;
-        gap: 2px;
-      }
-      .scroll-button {
-        width: 10px;
-        height: 10px;
-        background-color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
-        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-        cursor: pointer;
-        transform: rotate(90deg);
-      }
-      .scroll-button.left {
-        transform: rotate(-90deg);
-      }
-      .scroll-button.right {
-        transform: rotate(90deg);
-      }
-    `
-  ]
-
-  @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
-
-  @query('svg[header]') svgHeader!: SVGElement
-  @query('svg[body]') svgBody!: SVGElement
-  @query('[chart-container]') container!: HTMLDivElement
-  @query('ox-task-tooltip') tooltip!: OxTaskTooltip
-
-  private ganttChartController: GanttChartController
-
-  constructor() {
-    super()
-    this.ganttChartController = new GanttChartController(this, this.fromDate, this.toDate, this.axisScale)
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    this.initHeaderGestureHandlers()
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
-      this.ganttChartController.updateRange(this.fromDate, this.toDate)
-    }
-
-    if (changedProperties.has('tasks')) {
-      this.ganttChartController.setTasks(this.flattenTasks(this.tasks))
-      this.svgBody.style.height = Math.max(this.tasks.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)
-  }
-
-  render() {
-    return html`
-      <div
-        chart-container
-        @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}
-        @touchstart=${(e: TouchEvent) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
-        @touchmove=${(e: TouchEvent) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
-      >
-        <svg
-          header
-          @date-range-selected=${(e: CustomEvent) => this.handleDateRangeSelected(e)}
-          @wheel=${this.handleWheelForHeader.bind(this)}
-        ></svg>
-        <svg body></svg>
-        <div class="scroll-buttons">
-          <div class="scroll-button left" @click=${this.scrollToStart}></div>
-          <div class="scroll-button right" @click=${this.scrollToEnd}></div>
-        </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)
-  }
-
-  handleDateRangeSelected(event: CustomEvent) {
-    const detail = event.detail
-    this.dispatchEvent(new CustomEvent('date-range-selected', { detail }))
-  }
-
-  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 isDragging = false
-    let startX: number | null = null
-    let lastTouchDistance: number | null = null
-
-    const handleTouchStart = (event: TouchEvent) => {
-      event.preventDefault()
-
-      if (event.touches.length === 2) {
-        lastTouchDistance = getTouchDistance(event.touches)
-      } else {
-        isDragging = true
-        const touch = event.touches[0]
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        startX = touch.clientX - containerOffsetX
-      }
-    }
-
-    const handleTouchMove = (event: TouchEvent) => {
-      event.preventDefault()
-
-      if (event.touches.length === 2 && lastTouchDistance !== null) {
-        const currentDistance = getTouchDistance(event.touches)
-        const zoomFactor = currentDistance / lastTouchDistance
-        this.ganttChartController.baseWidth *= zoomFactor
-
-        if (this.ganttChartController.baseWidth > 60) {
-          if (this.ganttChartController.level == 'year-quarter') {
-            this.ganttChartController.baseWidth = 60
-          } else {
-            this.ganttChartController.level = levelUp(this.ganttChartController.level)
-            this.ganttChartController.baseWidth = 30
-          }
-        } else if (this.ganttChartController.baseWidth < 30) {
-          if (this.ganttChartController.level == 'week-day') {
-            this.ganttChartController.baseWidth = 30
-          } else {
-            this.ganttChartController.level = levelDown(this.ganttChartController.level)
-            this.ganttChartController.baseWidth = 60
-          }
-        }
-
-        lastTouchDistance = currentDistance
-        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)
-      } else if (isDragging && startX !== null) {
-        const touch = event.touches[0]
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        const currentX = touch.clientX - containerOffsetX
-        this.highlightSelection(startX, currentX)
-      }
-    }
-
-    const handleTouchEnd = (event: TouchEvent) => {
-      event.preventDefault()
-
-      if (event.touches.length < 2) {
-        lastTouchDistance = null
-      }
-
-      if (!isDragging || startX === null) {
-        const touch = event.changedTouches[0]
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        const clickX = touch.clientX - containerOffsetX
-        this.finalizeSelection(clickX, clickX)
-        return
-      }
-
-      const touch = event.changedTouches[0]
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      const endX = touch.clientX - containerOffsetX
-      this.finalizeSelection(startX, endX)
-
-      isDragging = false
-      startX = null
-    }
-
-    const getTouchDistance = (touches: TouchList): number => {
-      const dx = touches[0].clientX - touches[1].clientX
-      const dy = touches[0].clientY - touches[1].clientY
-      return Math.sqrt(dx * dx + dy * dy)
-    }
-
-    const handleMouseDown = (event: MouseEvent) => {
-      isDragging = true
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      startX = event.clientX - containerOffsetX
-    }
-
-    const handleMouseMove = (event: MouseEvent) => {
-      if (!isDragging || startX === null) return
-
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      const currentX = event.clientX - containerOffsetX
-      this.highlightSelection(startX, currentX)
-    }
-
-    const handleMouseUp = (event: MouseEvent) => {
-      if (!isDragging || startX === null) {
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        const clickX = event.clientX - containerOffsetX
-        this.finalizeSelection(clickX, clickX)
-        return
-      }
-
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      const endX = event.clientX - containerOffsetX
-      this.finalizeSelection(startX, endX)
-
-      isDragging = false
-      startX = null
-    }
-
-    header.on('mousedown', handleMouseDown)
-    header.on('mousemove', handleMouseMove)
-    header.on('mouseup', handleMouseUp)
-    header.on('touchstart', handleTouchStart)
-    header.on('touchmove', handleTouchMove)
-    header.on('touchend', handleTouchEnd)
-  }
-
-  highlightSelection(startX: number, endX: number) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
-    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)
-    }
-
-    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')
-  }
-
-  finalizeSelection(startX: number, endX: number) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
-    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)
-    }
-
-    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')
-
-    const formatDate = d3.timeFormat('%Y-%m-%d')
-    const customEvent = new CustomEvent('date-range-selected', {
-      detail: { start: formatDate(start!), end: formatDate(end!) }
-    })
-
-    header.node()?.dispatchEvent(customEvent)
-  }
-}

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()
-  }
-}