@operato/gantt 8.0.0-alpha.6 → 8.0.0-beta.0

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.6",
+  "version": "8.0.0-beta.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,9 +42,9 @@
     }
   },
   "dependencies": {
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/i18n": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/utils": "^8.0.0-beta.0",
     "d3": "^7.8.5",
     "d3-time-format": "^4.1.0",
     "i18next": "^23.11.5",
@@ -52,18 +52,18 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@types/lodash-es": "^4.17.5",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -85,5 +85,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f0c1979adcf64df1f543f383ae7385a56df1e57a"
+  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
 }

package/src/gantt-chart-controller.ts

@@ -3,19 +3,16 @@ 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
+  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 colorProvider?: (task: Task) => string
 
   public baseWidth: number = 30
@@ -34,6 +31,10 @@ export class GanttChartController implements ReactiveController {
     this.host.addController(this)
   }
 
+  dispose() {
+    this.host = null
+  }
+
   hostConnected() {
     this.updateTimeScale()
   }
@@ -57,12 +58,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 +94,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 +151,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 = () => {
@@ -185,15 +192,18 @@ export class GanttChartController implements ReactiveController {
         .attr('stroke-width', 1)
 
       taskBar
-        .on('click', () => {
+        .on('click', e => {
           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()
+
+          showTooltip(e)
+
+          this.host?.dispatchEvent(customEvent)
+          this.host?.requestUpdate()
         })
         .on('mouseover', showTooltip)
         .on('mouseout', hideTooltip)
@@ -209,15 +219,18 @@ export class GanttChartController implements ReactiveController {
           .attr('fill', 'lightgreen')
 
         progressBar
-          .on('click', () => {
+          .on('click', e => {
             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()
+
+            showTooltip(e)
+
+            this.host?.dispatchEvent(customEvent)
+            this.host?.requestUpdate()
           })
           .on('mouseover', showTooltip)
           .on('mouseout', hideTooltip)
@@ -256,7 +269,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)')
       }
     })
   }
@@ -277,6 +290,8 @@ export class GanttChartController implements ReactiveController {
     event.preventDefault()
     event.stopPropagation()
 
+    const { offsetHeight } = container
+
     const deltaModeFactor =
       event.deltaMode === WheelEvent.DOM_DELTA_LINE
         ? 16
@@ -288,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: {
@@ -299,28 +315,78 @@ export class GanttChartController implements ReactiveController {
       composed: true
     })
 
-    this.host.dispatchEvent(customEvent)
+    this.host?.dispatchEvent(customEvent)
   }
 
-  handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {
-    event.stopPropagation()
+  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
+      }
+    }
 
-    this.touchStartX = event.touches[0].clientX
-    this.touchStartY = event.touches[0].clientY
+    if (this.baseWidth < 20) {
+      this.level = levelUp(this.level)
+      this.baseWidth = 30
+    }
 
-    this.scrollStartX = container.scrollLeft
-    this.scrollStartY = container.scrollTop
+    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)
   }
 
-  handleTouchMoveForBody(event: TouchEvent, container: HTMLDivElement) {
-    const touchCurrentX = event.touches[0].clientX
-    const touchCurrentY = event.touches[0].clientY
+  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)
+  }
 
-    const deltaX = this.touchStartX! - touchCurrentX
-    const deltaY = this.touchStartY! - touchCurrentY
+  handleDragForBody = (event: GestureEventDrag) => {
+    const { deltaX: dx, deltaY: dy } = event.detail
+    const container = (this.host as any).container
+    const { offsetHeight } = container
 
-    container.scrollLeft = this.scrollStartX! + deltaX
-    container.scrollTop = this.scrollStartY! + deltaY
+    container.scrollLeft -= dx
+    container.scrollTop = Math.min(this.tasks.length * 30 - (offsetHeight - 40), container.scrollTop - dy)
 
     const customEvent = new CustomEvent('scroll', {
       detail: {
@@ -331,6 +397,6 @@ export class GanttChartController implements ReactiveController {
       composed: true
     })
 
-    this.host.dispatchEvent(customEvent)
+    this.host?.dispatchEvent(customEvent)
   }
 }