@operato/gantt 8.0.0-alpha.10 → 8.0.0-alpha.27

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/gantt",
   "description": "Webcomponents for gantt chart following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.27",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
+    "@operato/styles": "^8.0.0-alpha.27",
     "@operato/utils": "^8.0.0-alpha.0",
     "d3": "^7.8.5",
     "d3-time-format": "^4.1.0",
@@ -85,5 +85,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f937b76c9831c46e26acde8e94cc71514068a961"
+  "gitHead": "7f16dfa02491950f7a8782cb305605925a9e0be4"
 }

package/src/gantt-chart-controller.ts

@@ -3,18 +3,22 @@ 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'
 
 export class GanttChartController implements ReactiveController {
-  private host: ReactiveControllerHost & LitElement
+  private host: (ReactiveControllerHost & LitElement) | null
   private fromTime: Date
   private toTime: Date
   private totalDays: number
   private _timeScale?: d3.ScaleTime<number, number, never>
 
-  private touchStartX?: number
-  private touchStartY?: number
-  private scrollStartX?: number
-  private scrollStartY?: number
+  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
 
@@ -34,6 +38,10 @@ export class GanttChartController implements ReactiveController {
     this.host.addController(this)
   }
 
+  dispose() {
+    this.host = null
+  }
+
   hostConnected() {
     this.updateTimeScale()
   }
@@ -57,12 +65,12 @@ export class GanttChartController implements ReactiveController {
     this.toTime = new Date(toDate)
     this.totalDays = d3.timeDay.count(this.fromTime, d3.timeDay.offset(this.toTime, 1))
     this._timeScale = undefined
-    this.host.requestUpdate()
+    this.host?.requestUpdate()
   }
 
   setTasks(tasks: Task[]) {
     this.tasks = tasks
-    this.host.requestUpdate()
+    this.host?.requestUpdate()
   }
 
   updateTimeScale() {
@@ -93,7 +101,7 @@ export class GanttChartController implements ReactiveController {
       .append('marker')
       .attr('id', 'arrow')
       .attr('viewBox', '0 0 10 10')
-      .attr('refX', 10) // Adjusted refX to move the arrow tip closer to the line's end
+      .attr('refX', 10)
       .attr('refY', 5)
       .attr('markerWidth', 6)
       .attr('markerHeight', 6)
@@ -150,14 +158,20 @@ export class GanttChartController implements ReactiveController {
       const taskWidth = endX - startX + this.baseWidth / this.getScale()
       const taskY = index * 30 + 7.5
 
-      const showTooltip = (event: MouseEvent) => {
+      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(event.clientX, event.clientY)
+        tooltip.show(x, y)
       }
 
       const hideTooltip = () => {
@@ -192,8 +206,21 @@ export class GanttChartController implements ReactiveController {
             bubbles: true,
             composed: true
           })
-          this.host.dispatchEvent(customEvent)
-          this.host.requestUpdate()
+          this.host?.dispatchEvent(customEvent)
+          this.host?.requestUpdate()
+        })
+        .on('touchstart', 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)
@@ -216,8 +243,21 @@ export class GanttChartController implements ReactiveController {
               bubbles: true,
               composed: true
             })
-            this.host.dispatchEvent(customEvent)
-            this.host.requestUpdate()
+            this.host?.dispatchEvent(customEvent)
+            this.host?.requestUpdate()
+          })
+          .on('touchstart', 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)
@@ -256,7 +296,7 @@ export class GanttChartController implements ReactiveController {
           .attr('stroke', 'var(--md-sys-color-on-primary-container, black)')
           .attr('fill', 'none')
           .attr('stroke-width', 1)
-          .attr('marker-end', 'url(#arrow)') // Add arrow marker
+          .attr('marker-end', 'url(#arrow)')
       }
     })
   }
@@ -299,38 +339,132 @@ export class GanttChartController implements ReactiveController {
       composed: true
     })
 
-    this.host.dispatchEvent(customEvent)
+    this.host?.dispatchEvent(customEvent)
   }
 
-  handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {
+  handleTouchStartForBody(event: MouseEvent | TouchEvent, container: HTMLDivElement) {
+    event.preventDefault()
     event.stopPropagation()
 
-    this.touchStartX = event.touches[0].clientX
-    this.touchStartY = event.touches[0].clientY
+    const touch = 'touches' in event
+    const x = touch ? event.touches[0].clientX : event.clientX
+    const y = touch ? event.touches[0].clientY : event.clientY
 
-    this.scrollStartX = container.scrollLeft
-    this.scrollStartY = container.scrollTop
+    this.dragging = false
+
+    if (touch && event.touches.length === 2) {
+      this.lastTouchDistance = this.getTouchDistance(event.touches)
+    } else {
+      this.touchStartX = x
+      this.touchStartY = y
+
+      this.scrollStartX = container.scrollLeft
+      this.scrollStartY = container.scrollTop
+    }
   }
 
-  handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {
-    const touchCurrentX = event.touches[0].clientX
-    const touchCurrentY = event.touches[0].clientY
+  handleTouchMoveForBody(event: MouseEvent | TouchEvent, container: HTMLDivElement) {
+    event.preventDefault()
+    event.stopPropagation()
 
-    const deltaX = this.touchStartX! - touchCurrentX
-    const deltaY = this.touchStartY! - touchCurrentY
+    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
+        }
+      }
 
-    container.scrollLeft = this.scrollStartX! + deltaX
-    container.scrollTop = this.scrollStartY! + deltaY
+      if (this.baseWidth < 20) {
+        this.level = levelUp(this.level)
+        this.baseWidth = 30
+      }
 
-    const customEvent = new CustomEvent('scroll', {
-      detail: {
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop
-      },
-      bubbles: true,
-      composed: true
-    })
+      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
+        }
+      }
+
+      container.scrollLeft = this.scrollStartX! + dx
+      container.scrollTop = this.scrollStartY! + dy
+
+      const customEvent = new CustomEvent('scroll', {
+        detail: {
+          scrollLeft: container.scrollLeft,
+          scrollTop: container.scrollTop
+        },
+        bubbles: true,
+        composed: true
+      })
+
+      this.host?.dispatchEvent(customEvent)
+    }
+  }
+
+  handleTouchEndForBody(event: MouseEvent | TouchEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    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
+          })
+        )
+      }
+
+      this.touchStartX = null
+      this.touchStartY = null
+      this.scrollStartX = null
+      this.scrollStartY = null
+    }
+  }
 
-    this.host.dispatchEvent(customEvent)
+  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)
   }
 }

package/src/ox-gantt-chart.ts

@@ -23,15 +23,20 @@ export class OxGanttChart extends LitElement {
         display: flex;
         overflow: hidden;
         position: relative;
+        user-select: none;
       }
+
       div[chart-container] {
         display: block;
         overflow-x: auto;
         overflow-y: hidden;
+        overscroll-behavior: none;
       }
+
       svg {
         min-width: 100%;
       }
+
       svg[header] {
         display: block;
         min-width: 100%;
@@ -44,27 +49,27 @@ export class OxGanttChart extends LitElement {
         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;
+        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;
       }
     `
   ]
@@ -95,6 +100,14 @@ export class OxGanttChart extends LitElement {
 
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this.initHeaderGestureHandlers()
+
+    this.addEventListener('date-range-cleared', e => this.clearSelection())
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    this.ganttChartController.dispose()
   }
 
   updated(changedProperties: PropertyValues<this>) {
@@ -133,8 +146,12 @@ export class OxGanttChart extends LitElement {
       <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)}
       >
         <svg
           header
@@ -142,10 +159,8 @@ export class OxGanttChart extends LitElement {
           @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>
+        <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>
     `
@@ -266,60 +281,22 @@ export class OxGanttChart extends LitElement {
 
     let isDragging = false
     let startX: number | null = null
-    let lastTouchDistance: number | null = null
 
     const handleTouchStart = (event: TouchEvent) => {
       event.preventDefault()
+      event.stopPropagation()
 
-      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
-      }
+      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()
 
-      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) {
+      if (isDragging && startX !== null) {
         const touch = event.touches[0]
         const containerOffsetX = header.node()!.getBoundingClientRect().left
         const currentX = touch.clientX - containerOffsetX
@@ -329,10 +306,7 @@ export class OxGanttChart extends LitElement {
 
     const handleTouchEnd = (event: TouchEvent) => {
       event.preventDefault()
-
-      if (event.touches.length < 2) {
-        lastTouchDistance = null
-      }
+      event.stopPropagation()
 
       if (!isDragging || startX === null) {
         const touch = event.changedTouches[0]
@@ -351,12 +325,6 @@ export class OxGanttChart extends LitElement {
       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
@@ -515,4 +483,13 @@ export class OxGanttChart extends LitElement {
 
     header.node()?.dispatchEvent(customEvent)
   }
+
+  clearSelection() {
+    const header = d3.select(this.svgHeader)
+    const body = d3.select(this.svgBody)
+
+    // 선택한 영역을 나타내는 모든 'selection-rect' 요소를 제거합니다.
+    header.selectAll('.selection-rect').remove()
+    body.selectAll('.selection-rect').remove()
+  }
 }