@operato/gantt 8.0.0-alpha.33 → 8.0.0-alpha.36

package/src/gantt-chart-controller.ts

@@ -4,6 +4,7 @@ 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
@@ -12,14 +13,6 @@ export class GanttChartController implements ReactiveController {
   private totalDays: number
   private _timeScale?: d3.ScaleTime<number, number, never>
 
-  private touchStartX: number | null = null
-  private touchStartY: number | null = null
-  private scrollStartX: number | null = null
-  private scrollStartY: number | null = null
-  private lastTouchDistance?: number | null
-  private draggingThreshold: number = 20
-  private dragging: boolean = false
-
   private colorProvider?: (task: Task) => string
 
   public baseWidth: number = 30
@@ -199,17 +192,7 @@ export class GanttChartController implements ReactiveController {
         .attr('stroke-width', 1)
 
       taskBar
-        .on('click', () => {
-          this.selectedTaskId = task.id
-          const customEvent = new CustomEvent('task-clicked', {
-            detail: { taskId: task.id },
-            bubbles: true,
-            composed: true
-          })
-          this.host?.dispatchEvent(customEvent)
-          this.host?.requestUpdate()
-        })
-        .on('touchstart', e => {
+        .on('click', e => {
           this.selectedTaskId = task.id
           const customEvent = new CustomEvent('task-clicked', {
             detail: { taskId: task.id },
@@ -236,17 +219,7 @@ export class GanttChartController implements ReactiveController {
           .attr('fill', 'lightgreen')
 
         progressBar
-          .on('click', () => {
-            this.selectedTaskId = task.id
-            const customEvent = new CustomEvent('task-clicked', {
-              detail: { taskId: task.id },
-              bubbles: true,
-              composed: true
-            })
-            this.host?.dispatchEvent(customEvent)
-            this.host?.requestUpdate()
-          })
-          .on('touchstart', e => {
+          .on('click', e => {
             this.selectedTaskId = task.id
             const customEvent = new CustomEvent('task-clicked', {
               detail: { taskId: task.id },
@@ -317,6 +290,8 @@ export class GanttChartController implements ReactiveController {
     event.preventDefault()
     event.stopPropagation()
 
+    const { offsetHeight } = container
+
     const deltaModeFactor =
       event.deltaMode === WheelEvent.DOM_DELTA_LINE
         ? 16
@@ -328,7 +303,8 @@ export class GanttChartController implements ReactiveController {
 
     // 가로 스크롤 및 세로 스크롤 모두 처리
     container.scrollLeft += deltaX
-    container.scrollTop += deltaY
+    // container.scrollTop += deltaY
+    container.scrollTop = Math.min(this.tasks.length * 30 - (offsetHeight - 40), container.scrollTop + deltaY)
 
     const customEvent = new CustomEvent('scroll', {
       detail: {
@@ -342,129 +318,85 @@ export class GanttChartController implements ReactiveController {
     this.host?.dispatchEvent(customEvent)
   }
 
-  handleTouchStartForBody(event: MouseEvent | TouchEvent, container: HTMLDivElement) {
-    event.preventDefault()
-    event.stopPropagation()
+  handlePinchForBody = (event: GestureEventPinch) => {
+    const { scale } = event.detail
 
-    const touch = 'touches' in event
-    const x = touch ? event.touches[0].clientX : event.clientX
-    const y = touch ? event.touches[0].clientY : event.clientY
+    this.baseWidth *= scale
 
-    this.dragging = false
-
-    if (touch && event.touches.length === 2) {
-      this.lastTouchDistance = this.getTouchDistance(event.touches)
-    } else {
-      this.touchStartX = x
-      this.touchStartY = y
+    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
+      }
+    }
 
-      this.scrollStartX = container.scrollLeft
-      this.scrollStartY = container.scrollTop
+    if (this.baseWidth < 20) {
+      this.level = levelUp(this.level)
+      this.baseWidth = 30
     }
-  }
 
-  handleTouchMoveForBody(event: MouseEvent | TouchEvent, container: HTMLDivElement) {
-    event.preventDefault()
-    event.stopPropagation()
+    this.updateTimeScale()
+    this.host?.requestUpdate()
 
-    const touch = 'touches' in event
-    const x = touch ? event.touches[0].clientX : event.clientX
-    const y = touch ? event.touches[0].clientY : event.clientY
-
-    if (touch && event.touches.length > 1 && this.lastTouchDistance !== null) {
-      const currentDistance = this.getTouchDistance(event.touches)
-
-      const zoomSensitivity = 0.3
-      let zoomFactor = currentDistance / this.lastTouchDistance!
-      zoomFactor = 1 + (zoomFactor - 1) * zoomSensitivity
-
-      this.baseWidth *= zoomFactor
-
-      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
-        }
-      }
+    const customEvent = new CustomEvent('timescale-changed', {
+      detail: {
+        baseWidth: this.baseWidth,
+        level: this.level
+      },
+      bubbles: true,
+      composed: true
+    })
 
-      if (this.baseWidth < 20) {
-        this.level = levelUp(this.level)
-        this.baseWidth = 30
-      }
+    this.host?.dispatchEvent(customEvent)
+  }
 
-      this.lastTouchDistance = currentDistance
-      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)
-    } else if (this.touchStartX !== null) {
-      const dx = this.touchStartX! - x
-      const dy = this.touchStartY! - y
-
-      if (!this.dragging) {
-        if (Math.sqrt(dx * dx + dy * dy) > this.draggingThreshold) {
-          this.dragging = true
-        } else {
-          return
-        }
-      }
+  handleDoubleTapForBody = (event: GestureEventDoubleTap) => {
+    const container = (this.host as any).container
 
-      container.scrollLeft = this.scrollStartX! + dx
-      container.scrollTop = this.scrollStartY! + dy
+    container.scrollLeft = 0
+    container.scrollTop = 0
 
-      const customEvent = new CustomEvent('scroll', {
-        detail: {
-          scrollLeft: container.scrollLeft,
-          scrollTop: container.scrollTop
-        },
-        bubbles: true,
-        composed: true
-      })
+    this.baseWidth = 30
+    this.level = 'week-day'
 
-      this.host?.dispatchEvent(customEvent)
-    }
+    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)
   }
 
-  handleTouchEndForBody(event: MouseEvent | TouchEvent) {
-    event.preventDefault()
-    event.stopPropagation()
+  handleDragForBody = (event: GestureEventDrag) => {
+    const { deltaX: dx, deltaY: dy } = event.detail
+    const container = (this.host as any).container
+    const { offsetHeight } = container
 
-    if ('touches' in event && event.touches.length > 1) {
-      this.lastTouchDistance = null
-    } else if (this.touchStartX !== null) {
-      if (!this.dragging) {
-        this.host?.dispatchEvent(
-          new CustomEvent('date-range-cleared', {
-            bubbles: true,
-            composed: true
-          })
-        )
-      }
+    container.scrollLeft -= dx
+    container.scrollTop = Math.min(this.tasks.length * 30 - (offsetHeight - 40), container.scrollTop - dy)
 
-      this.touchStartX = null
-      this.touchStartY = null
-      this.scrollStartX = null
-      this.scrollStartY = null
-    }
-  }
+    const customEvent = new CustomEvent('scroll', {
+      detail: {
+        scrollLeft: container.scrollLeft,
+        scrollTop: container.scrollTop
+      },
+      bubbles: true,
+      composed: true
+    })
 
-  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)
+    this.host?.dispatchEvent(customEvent)
   }
 }

package/src/ox-gantt-chart.ts

@@ -13,8 +13,10 @@ 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 LitElement {
+export class OxGanttChart extends gesture(LitElement) {
   static styles = [
     MDTypeScaleStyles,
     ScrollbarStyles,
@@ -31,6 +33,7 @@ export class OxGanttChart extends LitElement {
         overflow-x: auto;
         overflow-y: hidden;
         overscroll-behavior: none;
+        touch-action: none;
       }
 
       svg {
@@ -91,12 +94,7 @@ export class OxGanttChart extends LitElement {
   @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)
-  }
+  private ganttChartController!: GanttChartController
 
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this.initHeaderGestureHandlers()
@@ -104,9 +102,22 @@ export class OxGanttChart extends LitElement {
     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()
   }
 
@@ -116,8 +127,9 @@ export class OxGanttChart extends LitElement {
     }
 
     if (changedProperties.has('tasks')) {
-      this.ganttChartController.setTasks(this.flattenTasks(this.tasks))
-      this.svgBody.style.height = Math.max(this.tasks.length * 30, 2000) + 'px'
+      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')) {
@@ -143,16 +155,7 @@ export class OxGanttChart extends LitElement {
 
   render() {
     return html`
-      <div
-        chart-container
-        @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}
-        @mousedown=${(e: MouseEvent) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
-        @mousemove=${(e: MouseEvent) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
-        @mouseup=${(e: MouseEvent) => this.ganttChartController.handleTouchEndForBody(e)}
-        @touchstart=${(e: TouchEvent) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
-        @touchmove=${(e: TouchEvent) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
-        @touchend=${(e: TouchEvent) => this.ganttChartController.handleTouchEndForBody(e)}
-      >
+      <div chart-container @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}>
         <svg
           header
           @date-range-selected=${(e: CustomEvent) => this.handleDateRangeSelected(e)}
@@ -279,88 +282,44 @@ export class OxGanttChart extends LitElement {
   initHeaderGestureHandlers() {
     const header = d3.select(this.svgHeader)
 
-    let isDragging = false
     let startX: number | null = null
 
-    const handleTouchStart = (event: TouchEvent) => {
+    const handlePointerDown = (event: PointerEvent) => {
       event.preventDefault()
       event.stopPropagation()
 
-      isDragging = true
-      const touch = event.touches[0]
       const containerOffsetX = header.node()!.getBoundingClientRect().left
-      startX = touch.clientX - containerOffsetX
-    }
-
-    const handleTouchMove = (event: TouchEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
+      startX = event.clientX - containerOffsetX
 
-      if (isDragging && startX !== null) {
-        const touch = event.touches[0]
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        const currentX = touch.clientX - containerOffsetX
-        this.highlightSelection(startX, currentX)
-      }
+      window.addEventListener('pointermove', handlePointerMove)
+      window.addEventListener('pointerup', handlePointerUp)
     }
 
-    const handleTouchEnd = (event: TouchEvent) => {
+    const handlePointerMove = (event: PointerEvent) => {
       event.preventDefault()
       event.stopPropagation()
 
-      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 currentX = event.clientX - containerOffsetX
 
-    const handleMouseDown = (event: MouseEvent) => {
-      isDragging = true
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      startX = event.clientX - containerOffsetX
+      this.highlightSelection(startX!, currentX)
     }
 
-    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 handlePointerUp = (event: PointerEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
 
-    const handleMouseUp = (event: MouseEvent) => {
-      if (!isDragging || startX === null) {
-        const containerOffsetX = header.node()!.getBoundingClientRect().left
-        const clickX = event.clientX - containerOffsetX
-        this.finalizeSelection(clickX, clickX)
-        return
-      }
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', handlePointerUp)
 
       const containerOffsetX = header.node()!.getBoundingClientRect().left
       const endX = event.clientX - containerOffsetX
-      this.finalizeSelection(startX, endX)
+      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)
+    header.on('pointerdown', handlePointerDown)
   }
 
   highlightSelection(startX: number, endX: number) {

package/stories/ox-gantt.stories.ts

@@ -95,7 +95,7 @@ const Template: Story<ArgTypes> = ({
 
     ox-gantt {
       width: 95%;
-      height: 650px;
+      height: 800px;
       box-sizing: border-box;
 
       background-color: var(--md-sys-color-primary-container);