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

package/src/gantt-chart-controller.ts

@@ -1,402 +0,0 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
-import * as d3 from 'd3'
-import { TimeScale, Task, TaskTag } from './types'
-import { OxTaskTooltip } from './ox-task-tooltip'
-import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'
-import { levelDown, levelUp } from './utils'
-import { GestureEventPinch, GestureEventDoubleTap, GestureEventDrag } from '@operato/utils/gesture-mixin.js'
-
-export class GanttChartController implements ReactiveController {
-  private host: (ReactiveControllerHost & LitElement) | null
-  private fromTime: Date
-  private toTime: Date
-  private totalDays: number
-  private _timeScale?: d3.ScaleTime<number, number, never>
-
-  private colorProvider?: (task: Task) => string
-
-  public baseWidth: number = 30
-  public level: TimeScale
-  public selectedTaskId?: string
-
-  public tasks: Task[] = []
-  public extendGridLines: boolean = false
-
-  constructor(host: ReactiveControllerHost & LitElement, fromDate: string, toDate: string, axisScale: TimeScale) {
-    this.host = host
-    this.fromTime = new Date(fromDate)
-    this.toTime = new Date(toDate)
-    this.level = axisScale
-    this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
-    this.host.addController(this)
-  }
-
-  dispose() {
-    this.host = null
-  }
-
-  hostConnected() {
-    this.updateTimeScale()
-  }
-
-  setColorProvider(colorProvider: (task: Task) => string) {
-    this.colorProvider = colorProvider
-  }
-
-  get timeScale() {
-    if (!this._timeScale) {
-      this._timeScale = d3
-        .scaleTime()
-        .domain([d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1)])
-        .range([0, this.getChartWidth()])
-    }
-    return this._timeScale
-  }
-
-  updateRange(fromDate: string, toDate: string) {
-    this.fromTime = new Date(fromDate)
-    this.toTime = new Date(toDate)
-    this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
-    this._timeScale = undefined
-    this.host?.requestUpdate()
-  }
-
-  setTasks(tasks: Task[]) {
-    this.tasks = tasks
-    this.host?.requestUpdate()
-  }
-
-  updateTimeScale() {
-    this.timeScale.range([0, this.getChartWidth()])
-  }
-
-  getScale() {
-    return getScale(this.level)
-  }
-
-  getChartWidth() {
-    return getChartWidth(this.fromTime, this.toTime, this.baseWidth, this.level)
-  }
-
-  drawAxes(svgHeader: SVGElement) {
-    drawTimeScaleHeader(svgHeader, this.timeScale, this.fromTime, this.toTime, this.baseWidth, this.level)
-  }
-
-  drawBody(svgBody: SVGElement, tooltip: OxTaskTooltip) {
-    const body = d3.select(svgBody)
-
-    body.selectAll('*').remove()
-    body.attr('width', this.getChartWidth())
-
-    // Define the arrow marker
-    const defs = body.append('defs')
-    defs
-      .append('marker')
-      .attr('id', 'arrow')
-      .attr('viewBox', '0 0 10 10')
-      .attr('refX', 10)
-      .attr('refY', 5)
-      .attr('markerWidth', 6)
-      .attr('markerHeight', 6)
-      .attr('orient', 'auto-start-reverse')
-      .append('path')
-      .attr('d', 'M 0 0 L 10 5 L 0 10 z')
-      .attr('fill', 'var(--md-sys-color-on-primary-container, black)')
-
-    if (this.extendGridLines) {
-      const addGridLines = (ticks: Date[]) => {
-        ticks.forEach(tick => {
-          const startX = this.timeScale(tick)
-          body
-            .append('line')
-            .attr('x1', startX)
-            .attr('x2', startX)
-            .attr('y1', 0)
-            .attr('y2', Number(svgBody.getBoundingClientRect().height) || 0)
-            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-            .attr('stroke-width', 1)
-        })
-      }
-
-      if (this.level === 'week-day') {
-        const dayTicks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))
-        addGridLines(dayTicks)
-      } else if (this.level === 'quarter-week') {
-        const weekTicks = d3.timeWeek
-          .every(1)!
-          .range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
-        addGridLines(weekTicks)
-      } else if (this.level === 'year-month') {
-        const monthTicks = d3.timeMonth
-          .every(1)!
-          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
-        addGridLines(monthTicks)
-      } else if (this.level === 'year-quarter') {
-        const quarterTicks = d3.timeMonth
-          .every(3)!
-          .range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
-        addGridLines(quarterTicks)
-      }
-    }
-
-    const taskPositions: { [key: string]: { x: number; y: number; width: number } } = {}
-
-    this.tasks.forEach((task, index) => {
-      const startDate = new Date(task.startDate)
-      const endDate = new Date(task.endDate)
-
-      const startX = this.timeScale(d3.timeDay.floor(d3.min([startDate, endDate])!))
-      const endX = this.timeScale(d3.timeDay.offset(d3.timeDay.ceil(d3.max([startDate, endDate])!), -1))
-
-      const taskWidth = endX - startX + this.baseWidth / this.getScale()
-      const taskY = index * 30 + 7.5
-
-      const showTooltip = (event: MouseEvent | TouchEvent) => {
-        tooltip.hide()
-
-        const touch = 'touches' in event
-        const x = touch ? event.touches[0].clientX : event.clientX
-        const y = touch ? event.touches[0].clientY : event.clientY
-
-        tooltip.title = task.title
-        tooltip.startDate = startDate.toISOString().split('T')[0]
-        tooltip.endDate = endDate.toISOString().split('T')[0]
-        tooltip.progress = task.progress ?? 0
-        tooltip.type = task.type
-
-        tooltip.show(x, y)
-      }
-
-      const hideTooltip = () => {
-        tooltip.hide()
-      }
-
-      if (this.selectedTaskId === task.id) {
-        body
-          .append('rect')
-          .attr('x', 0)
-          .attr('y', taskY - 7.5)
-          .attr('width', this.getChartWidth())
-          .attr('height', 30)
-          .attr('fill', 'var(--ox-gantt-selected-row-background-color, var(--md-sys-color-surface-variant))')
-      }
-
-      const taskBar = body
-        .append('rect')
-        .attr('x', startX)
-        .attr('y', taskY)
-        .attr('width', taskWidth)
-        .attr('height', 15)
-        .attr('fill', this.colorProvider ? this.colorProvider(task) : 'gray')
-        .attr('stroke', 'black')
-        .attr('stroke-width', 1)
-
-      taskBar
-        .on('click', e => {
-          this.selectedTaskId = task.id
-          const customEvent = new CustomEvent('task-clicked', {
-            detail: { taskId: task.id },
-            bubbles: true,
-            composed: true
-          })
-
-          showTooltip(e)
-
-          this.host?.dispatchEvent(customEvent)
-          this.host?.requestUpdate()
-        })
-        .on('mouseover', showTooltip)
-        .on('mouseout', hideTooltip)
-
-      if (task.progress !== undefined) {
-        const progressWidth = taskWidth * (task.progress / 100)
-        const progressBar = body
-          .append('rect')
-          .attr('x', startX)
-          .attr('y', taskY + 7.5 - 3.75)
-          .attr('width', progressWidth)
-          .attr('height', 7.5)
-          .attr('fill', 'lightgreen')
-
-        progressBar
-          .on('click', e => {
-            this.selectedTaskId = task.id
-            const customEvent = new CustomEvent('task-clicked', {
-              detail: { taskId: task.id },
-              bubbles: true,
-              composed: true
-            })
-
-            showTooltip(e)
-
-            this.host?.dispatchEvent(customEvent)
-            this.host?.requestUpdate()
-          })
-          .on('mouseover', showTooltip)
-          .on('mouseout', hideTooltip)
-      }
-
-      taskPositions[task.id] = { x: endX + this.baseWidth / this.getScale(), y: taskY + 7.5, width: taskWidth }
-    })
-
-    this.tasks.forEach(task => {
-      if (task.dependsOn && taskPositions[task.dependsOn]) {
-        const prevTask = taskPositions[task.dependsOn]
-        const currTask = taskPositions[task.id]
-
-        body
-          .append('path')
-          .attr(
-            'd',
-            `
-                    M${prevTask.x},${prevTask.y}
-                    L${prevTask.x + 10},${prevTask.y}
-                    ${
-                      prevTask.x + 10 < currTask.x - 10 - currTask.width
-                        ? `
-                      L${(prevTask.x + currTask.x - currTask.width) / 2},${prevTask.y}
-                      L${(prevTask.x + currTask.x - currTask.width) / 2},${currTask.y}
-                    `
-                        : `
-                        L${prevTask.x + 10},${(prevTask.y + currTask.y) / 2}
-                        L${currTask.x - 10 - currTask.width},${(prevTask.y + currTask.y) / 2}
-                    `
-                    }
-                    L${currTask.x - 10 - currTask.width},${currTask.y}
-                    L${currTask.x - currTask.width},${currTask.y}
-                  `
-          )
-          .attr('stroke', 'var(--md-sys-color-on-primary-container, black)')
-          .attr('fill', 'none')
-          .attr('stroke-width', 1)
-          .attr('marker-end', 'url(#arrow)')
-      }
-    })
-  }
-
-  getTaskColor(tags: TaskTag[]): string {
-    if (tags.includes('critical')) {
-      return 'red'
-    } else if (tags.includes('milestone')) {
-      return 'blue'
-    } else if (tags.includes('done')) {
-      return 'green'
-    } else {
-      return 'grey'
-    }
-  }
-
-  handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const { offsetHeight } = container
-
-    const deltaModeFactor =
-      event.deltaMode === WheelEvent.DOM_DELTA_LINE
-        ? 16
-        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
-          ? container.clientHeight
-          : 1
-    const deltaX = event.deltaX * deltaModeFactor
-    const deltaY = event.deltaY * deltaModeFactor
-
-    // 가로 스크롤 및 세로 스크롤 모두 처리
-    container.scrollLeft += deltaX
-    // container.scrollTop += deltaY
-    container.scrollTop = Math.min(this.tasks.length * 30 - (offsetHeight - 40), container.scrollTop + deltaY)
-
-    const customEvent = new CustomEvent('scroll', {
-      detail: {
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host?.dispatchEvent(customEvent)
-  }
-
-  handlePinchForBody = (event: GestureEventPinch) => {
-    const { scale } = event.detail
-
-    this.baseWidth *= scale
-
-    if (this.baseWidth > 40) {
-      if (this.level === 'week-day') {
-        this.baseWidth = 40
-      } else {
-        this.level = levelDown(this.level)
-        this.baseWidth = 30
-      }
-    } else if (this.baseWidth < 30) {
-      if (this.level === 'year-quarter') {
-        this.baseWidth = 30
-      }
-    }
-
-    if (this.baseWidth < 20) {
-      this.level = levelUp(this.level)
-      this.baseWidth = 30
-    }
-
-    this.updateTimeScale()
-    this.host?.requestUpdate()
-
-    const customEvent = new CustomEvent('timescale-changed', {
-      detail: {
-        baseWidth: this.baseWidth,
-        level: this.level
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host?.dispatchEvent(customEvent)
-  }
-
-  handleDoubleTapForBody = (event: GestureEventDoubleTap) => {
-    const container = (this.host as any).container
-
-    container.scrollLeft = 0
-    container.scrollTop = 0
-
-    this.baseWidth = 30
-    this.level = 'week-day'
-
-    this.updateTimeScale()
-    this.host?.requestUpdate()
-
-    const customEvent = new CustomEvent('timescale-changed', {
-      detail: {
-        baseWidth: this.baseWidth,
-        level: this.level
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host?.dispatchEvent(customEvent)
-  }
-
-  handleDragForBody = (event: GestureEventDrag) => {
-    const { deltaX: dx, deltaY: dy } = event.detail
-    const container = (this.host as any).container
-    const { offsetHeight } = container
-
-    container.scrollLeft -= dx
-    container.scrollTop = Math.min(this.tasks.length * 30 - (offsetHeight - 40), container.scrollTop - dy)
-
-    const customEvent = new CustomEvent('scroll', {
-      detail: {
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop
-      },
-      bubbles: true,
-      composed: true
-    })
-
-    this.host?.dispatchEvent(customEvent)
-  }
-}

package/src/locales.ts

@@ -1,78 +0,0 @@
-export const locales = {
-  'en-US': {
-    dateTime: '%x, %X',
-    date: '%-m/%-d/%Y',
-    time: '%-I:%M:%S %p',
-    periods: ['AM', 'PM'],
-    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    months: [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December'
-    ],
-    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-  },
-  'ko-KR': {
-    dateTime: '%x, %X',
-    date: '%Y-%m-%d',
-    time: '%H:%M:%S',
-    periods: ['오전', '오후'],
-    days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
-    shortDays: ['일', '월', '화', '수', '목', '금', '토'],
-    months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
-    shortMonths: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
-  },
-  'ja-JP': {
-    dateTime: '%x, %X',
-    date: '%Y/%m/%d',
-    time: '%H:%M:%S',
-    periods: ['午前', '午後'],
-    days: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
-    shortDays: ['日', '月', '火', '水', '木', '金', '土'],
-    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-    shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-  },
-  'zh-CN': {
-    dateTime: '%x, %X',
-    date: '%Y-%m-%d',
-    time: '%H:%M:%S',
-    periods: ['上午', '下午'],
-    days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
-    shortDays: ['日', '一', '二', '三', '四', '五', '六'],
-    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-    shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-  },
-  'ms-MY': {
-    dateTime: '%x, %X',
-    date: '%d/%m/%Y',
-    time: '%H:%M:%S',
-    periods: ['AM', 'PM'],
-    days: ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
-    shortDays: ['Ahd', 'Isn', 'Sel', 'Rab', 'Kha', 'Jum', 'Sab'],
-    months: [
-      'Januari',
-      'Februari',
-      'Mac',
-      'April',
-      'Mei',
-      'Jun',
-      'Julai',
-      'Ogos',
-      'September',
-      'Oktober',
-      'November',
-      'Disember'
-    ],
-    shortMonths: ['Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun', 'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis']
-  }
-}