@operato/gantt 7.0.60 → 7.0.69

package/src/ox-resource-chart.ts

@@ -1,15 +1,15 @@
-import { LitElement, html, css, PropertyValues } from 'lit'
+import { LitElement, html, css } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
-import * as d3 from 'd3'
+import { ResourceChartController } from './resource-chart-controller'
+import { Task, Resource, TimeScale } from './types'
 
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { drawTimeScaleHeader } from './draw-time-scale-header'
-import { Task, TimeScale } from './types'
-
 @customElement('ox-resource-chart')
 export class OxResourceChart extends LitElement {
   static styles = [
+    MDTypeScaleStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -19,18 +19,16 @@ export class OxResourceChart extends LitElement {
       }
 
       div[chart-container] {
-        display: flex;
         flex-direction: column;
-
         overflow-x: auto;
-        overflow-y: auto;
+        overflow-y: hidden;
       }
 
       svg[header] {
         display: block;
         min-width: 100%;
         box-sizing: border-box;
-        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-on-secondary-container));
+        border-bottom: 1px solid var(--ox-gantt-header-border-color, var(--md-sys-color-outline));
         height: 30px;
         background-color: var(--ox-gantt-header-background-color, var(--md-sys-color-secondary-container));
         color: var(--ox-gantt-header-color, var(--md-sys-color-on-secondary-container));
@@ -40,16 +38,10 @@ export class OxResourceChart extends LitElement {
       }
 
       svg[body] {
-        flex: 1;
         display: block;
         min-width: 100%;
       }
 
-      .top-axis text,
-      .bottom-axis text {
-        font-size: 12px;
-      }
-
       .grid line {
         stroke: #e0e0e0;
       }
@@ -57,280 +49,92 @@ export class OxResourceChart extends LitElement {
       .grid path {
         stroke-width: 0;
       }
-
-      .no-select {
-        user-select: none;
-      }
-
-      .selected {
-        stroke-width: 2px;
-        stroke: var(--ox-gantt-selected-color, blue);
-      }
     `
   ]
 
   @property({ type: String }) fromDate: string = new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0]
   @property({ type: String }) toDate: string = new Date(new Date().getFullYear(), 11, 31).toISOString().split('T')[0]
-  @property({ type: String }) axisScale: string = 'week-day'
-  @property({ type: Array }) resources: any[] = []
+  @property({ type: String }) axisScale: TimeScale = 'week-day'
+  @property({ type: Array }) resources: Resource[] = []
   @property({ type: Array }) tasks: Task[] = []
 
-  private timeScale: any
-  private baseWidth: number = 30
-  private level: TimeScale = 'week-day'
-  private fromTime?: Date
-  private toTime?: Date
-
-  @query('[chart-container') container!: HTMLDivElement
+  @query('[chart-container]') container!: HTMLDivElement
   @query('svg[header]') svgHeader!: SVGSVGElement
   @query('svg[body]') svgBody!: SVGSVGElement
 
-  render() {
-    return html`
-      <div chart-container>
-        <svg header></svg>
-        <svg body></svg>
-      </div>
-    `
+  private resourceChartController: ResourceChartController
+
+  constructor() {
+    super()
+    this.resourceChartController = new ResourceChartController(this, this.fromDate, this.toDate, this.axisScale)
   }
 
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('fromDate') || changedProperties.has('toDate') || changedProperties.has('axisScale')) {
-      this.updateTimeScale()
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    if (changedProperties.has('fromDate') || changedProperties.has('toDate')) {
+      this.resourceChartController.updateRange(this.fromDate, this.toDate)
     }
 
-    if (changedProperties.has('resources') || changedProperties.has('tasks')) {
-      this.drawBody()
+    if (changedProperties.has('resources')) {
+      this.resourceChartController.setResources(this.resources)
+      this.updateChartHeight() // 리소스의 수에 따라 차트의 높이를 업데이트합니다.
     }
 
-    this.drawAxes()
-  }
-
-  updateTimeScale() {
-    this.fromTime = new Date(this.fromDate)
-    this.toTime = new Date(this.toDate)
-
-    this.timeScale = d3
-      .scaleTime()
-      .domain([d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1)])
-      .range([0, this.getChartWidth()])
-  }
-
-  getChartWidth() {
-    const totalDays = d3.timeDay.count(new Date(this.fromDate), d3.timeDay.offset(new Date(this.toDate), 1))
-    return (totalDays * this.baseWidth) / this.getScale()
-  }
-
-  getScale() {
-    if (this.level == 'quarter-week') {
-      return 7 / 2
-    } else if (this.level == 'year-month') {
-      return 30 / 2
-    } else if (this.level === 'year-quarter') {
-      return 90 / 2
+    if (changedProperties.has('tasks')) {
+      this.resourceChartController.setTasks(this.tasks)
+      this.updateChartHeight() // 리소스의 수에 따라 차트의 높이를 업데이트합니다.
     }
-    return 1
-  }
-
-  drawAxes() {
-    drawTimeScaleHeader(
-      this.svgHeader as any,
-      this.timeScale,
-      this.fromTime!,
-      this.toTime!,
-      this.baseWidth,
-      this.level,
-      false /* 1 level only header */
-    )
-  }
-
-  drawBody() {
-    const body = d3.select(this.svgBody)
-
-    body.selectAll('*').remove()
-    body.attr('width', this.getChartWidth())
-
-    if (this.resources.length > 0) {
-      const chartHeight = this.resources.length * 30
-
-      const addVerticalGridLines = (ticks: Date[]) => {
-        ticks.forEach(tick => {
-          const startX = this.timeScale(tick)
-          body
-            .append('line')
-            .attr('x1', startX)
-            .attr('x2', startX)
-            .attr('y1', 0)
-            .attr('y2', chartHeight) // Ensure vertical lines extend to the bottom
-            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-            .attr('stroke-width', 1)
-        })
-      }
-
-      const addHorizontalGridLines = () => {
-        this.resources.forEach((_, index) => {
-          const y = (index + 1) * 30
-          body
-            .append('line')
-            .attr('x1', 0)
-            .attr('x2', this.getChartWidth())
-            .attr('y1', y)
-            .attr('y2', y)
-            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-            .attr('stroke-width', 1)
-        })
-
-        // Ensure the last horizontal line extends to the bottom of the chart
-        body
-          .append('line')
-          .attr('x1', 0)
-          .attr('x2', this.getChartWidth())
-          .attr('y1', chartHeight)
-          .attr('y2', chartHeight)
-          .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
-          .attr('stroke-width', 1)
-      }
-
-      let ticks
-      if (this.level === 'week-day') {
-        ticks = d3.timeDay
-          .every(1)!
-          .range(d3.timeDay.floor(new Date(this.fromDate)), d3.timeDay.offset(new Date(this.toDate), 1))
-      } else if (this.level === 'quarter-week') {
-        ticks = d3.timeWeek
-          .every(1)!
-          .range(d3.timeWeek.floor(new Date(this.fromDate)), d3.timeWeek.offset(new Date(this.toDate), 1))
-      } else if (this.level === 'year-month') {
-        ticks = d3.timeMonth
-          .every(1)!
-          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 1))
-      } else if (this.level === 'year-quarter') {
-        ticks = d3.timeMonth
-          .every(3)!
-          .range(d3.timeMonth.floor(new Date(this.fromDate)), d3.timeMonth.offset(new Date(this.toDate), 3))
-      }
-
-      addVerticalGridLines(ticks!)
-      addHorizontalGridLines()
 
-      // Render the resource allocations
-      this.renderResourceAllocations(body, ticks!)
+    if (changedProperties.has('axisScale')) {
+      this.resourceChartController.level = this.axisScale
+      this.resourceChartController.updateTimeScale()
     }
-  }
-
-  renderResourceAllocations(body: d3.Selection<SVGSVGElement, unknown, null, undefined>, ticks: Date[]) {
-    const resourceAllocations = this.calculateResourceAllocations(ticks)
-
-    this.resources.forEach((resource, index) => {
-      const y = index * 30 + 15 // Center the text vertically in the row
-      ticks.forEach(tick => {
-        const tickEnd = this.getTickEnd(tick)
-        const dateKey = this.formatDateKey(tick, tickEnd)
-        const allocation = resourceAllocations[resource.type][dateKey]
-        if (allocation > 0) {
-          const startX = this.timeScale(tick)
-          const tickInterval = this.timeScale(tickEnd) - startX
 
-          body
-            .append('text')
-            .attr('x', startX + tickInterval / 2)
-            .attr('y', y)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
-            .attr('dominant-baseline', 'middle')
-            .text(allocation)
-            .style('font-size', '12px')
-        }
-      })
-    })
+    // 차트 렌더링
+    this.resourceChartController.drawAxes(this.svgHeader)
+    this.resourceChartController.drawBody(this.svgBody)
   }
 
-  calculateResourceAllocations(ticks: Date[]) {
-    const resourceAllocations: { [key: string]: { [key: string]: number } } = {}
-
-    // Initialize the resourceAllocations object
-    this.resources.forEach(resource => {
-      resourceAllocations[resource.type] = {}
-      ticks.forEach(tick => {
-        const tickEnd = this.getTickEnd(tick)
-        const dateKey = this.formatDateKey(tick, tickEnd)
-        resourceAllocations[resource.type][dateKey] = 0
-      })
-    })
-
-    // Function to process tasks recursively
-    const processTask = (task: Task) => {
-      const startDate = new Date(task.startDate)
-      const endDate = new Date(task.endDate)
-      let currentDate = startDate
+  updateChartHeight() {
+    const resourceCount = this.resources.length
+    const rowHeight = 30 // 리소스 하나당 할당된 높이 (픽셀)
+    const minHeight = 200 // 최소 높이
+    const chartHeight = Math.max(resourceCount * rowHeight, minHeight)
 
-      while (currentDate <= endDate) {
-        const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))
-        if (tick) {
-          const tickEnd = this.getTickEnd(tick)
-          const dateKey = this.formatDateKey(tick, tickEnd)
-
-          ;(task.resources || []).forEach(resource => {
-            if (resourceAllocations[resource.type][dateKey] !== undefined) {
-              resourceAllocations[resource.type][dateKey] += resource.allocated
-            }
-          })
-        }
-
-        currentDate.setDate(currentDate.getDate() + 1)
-      }
-
-      // Recursively process child tasks
-      if (task.children) {
-        task.children.forEach(childTask => processTask(childTask))
-      }
-    }
-
-    // Process all tasks
-    this.tasks.forEach(task => processTask(task))
-
-    return resourceAllocations
+    this.svgBody.style.height = `${chartHeight}px`
   }
 
-  getTickEnd(tick: Date) {
-    if (this.level === 'week-day') {
-      return d3.timeDay.offset(tick, 1)
-    } else if (this.level === 'quarter-week') {
-      return d3.timeWeek.offset(tick, 1)
-    } else if (this.level === 'year-month') {
-      return d3.timeMonth.offset(tick, 1)
-    } else if (this.level === 'year-quarter') {
-      return d3.timeMonth.offset(tick, 3)
-    }
-    return d3.timeDay.offset(tick, 1)
-  }
-
-  formatDateKey(start: Date, end: Date) {
-    return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`
+  render() {
+    return html`
+      <div
+        chart-container
+        @wheel=${(e: WheelEvent) => this.resourceChartController.handleWheelForBody(e, this.container)}
+        @touchstart=${(e: TouchEvent) => this.resourceChartController.handleTouchStartForBody(e, this.container)}
+        @touchmove=${(e: TouchEvent) => this.resourceChartController.handleTouchMoveForBody(e, this.container)}
+      >
+        <svg header></svg>
+        <svg body></svg>
+      </div>
+    `
   }
 
   syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {
-    this.baseWidth = detail.baseWidth
-    this.level = detail.level
+    this.resourceChartController.syncTimeScale(detail)
+    this.requestUpdate()
+  }
 
-    this.updateTimeScale()
-    this.drawAxes()
-    this.drawBody()
+  getHorizontalOffset(): number {
+    return this.container.scrollLeft
   }
 
-  setVerticalOffset(offset: number) {
-    this.container.scrollTop = offset
+  setHorizontalOffset(offset: number) {
+    this.container.scrollLeft = offset
   }
 
   getVerticalOffset(): number {
     return this.container.scrollTop
   }
 
-  setHorizontalOffset(offset: number) {
-    this.container.scrollLeft = offset
-  }
-
-  getHorizontalOffset(): number {
-    return this.container.scrollLeft
+  setVerticalOffset(offset: number) {
+    this.container.scrollTop = offset
   }
 }

package/src/ox-task-tooltip.ts

@@ -6,7 +6,7 @@ export class OxTaskTooltip extends LitElement {
   static styles = css`
     :host {
       position: fixed; /* position: absolute로 변경 */
-      background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface, #f9f9f9));
+      background-color: var(--ox-gantt-tooltip-background-color, var(--md-sys-color-surface-variant, #f9f9f9));
       border: 1px solid var(--ox-gantt-tooltip-border-color, var(--md-sys-color-outline, #ccc));
       padding: var(--spacing-medium, 10px);
       border-radius: var(--spacing-medium, 8px);
@@ -41,12 +41,12 @@ export class OxTaskTooltip extends LitElement {
     }
     .label {
       font-weight: bold;
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface-variant, #333));
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
       text-align: right; /* 라벨을 우측 정렬 */
     }
     .colon {
       text-align: center;
-      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
     }
     .value {
       text-align: left; /* 값을 좌측 정렬 */

package/src/resource-chart-controller.ts

@@ -0,0 +1,284 @@
+import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit'
+import * as d3 from 'd3'
+import { TimeScale, Task, Resource } from './types'
+import { drawTimeScaleHeader, getScale, getChartWidth } from './draw-time-scale-header'
+
+export class ResourceChartController implements ReactiveController {
+  private host: ReactiveControllerHost & LitElement
+  private fromTime: Date
+  private toTime: Date
+  private totalDays: number
+  private _timeScale?: d3.ScaleTime<number, number, never>
+
+  private touchStartY?: number
+  private touchStartX?: number
+  private scrollStartX?: number
+  private scrollStartY?: number
+
+  public baseWidth: number = 30
+  public level: TimeScale
+  public resources: Resource[] = []
+  public tasks: Task[] = []
+
+  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)
+  }
+
+  hostConnected() {
+    this.updateTimeScale()
+  }
+
+  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
+  }
+
+  public syncTimeScale(detail: { baseWidth: number; level: TimeScale }) {
+    this.baseWidth = detail.baseWidth
+    this.level = detail.level
+
+    this.updateTimeScale()
+  }
+
+  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()
+  }
+
+  setResources(resources: Resource[]) {
+    this.resources = resources
+    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, false)
+  }
+
+  drawBody(svgBody: SVGElement) {
+    const body = d3.select(svgBody)
+
+    body.selectAll('*').remove()
+    body.attr('width', this.getChartWidth())
+
+    if (this.resources.length > 0) {
+      const chartHeight = this.resources.length * 30
+
+      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', chartHeight) // Ensure vertical lines extend to the bottom
+            .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+            .attr('stroke-width', 1)
+        })
+      }
+
+      let ticks
+      if (this.level === 'week-day') {
+        ticks = d3.timeDay.every(1)!.range(d3.timeDay.floor(this.fromTime), d3.timeDay.offset(this.toTime, 1))
+      } else if (this.level === 'quarter-week') {
+        ticks = d3.timeWeek.every(1)!.range(d3.timeWeek.floor(this.fromTime), d3.timeWeek.offset(this.toTime, 1))
+      } else if (this.level === 'year-month') {
+        ticks = d3.timeMonth.every(1)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 1))
+      } else if (this.level === 'year-quarter') {
+        ticks = d3.timeMonth.every(3)!.range(d3.timeMonth.floor(this.fromTime), d3.timeMonth.offset(this.toTime, 3))
+      }
+
+      addGridLines(ticks!)
+
+      this.renderResourceAllocations(body, ticks!, chartHeight)
+    }
+  }
+
+  renderResourceAllocations(
+    body: d3.Selection<SVGElement, unknown, null, undefined>,
+    ticks: Date[],
+    chartHeight: number
+  ) {
+    const resourceAllocations = this.calculateResourceAllocations(ticks)
+
+    this.resources.forEach((resource, index) => {
+      const y = index * 30 + 15 // Center the text vertically in the row
+      ticks.forEach(tick => {
+        const tickEnd = this.getTickEnd(tick)
+        const dateKey = this.formatDateKey(tick, tickEnd)
+        const allocation = resourceAllocations[resource.type][dateKey]
+        if (allocation > 0) {
+          const startX = this.timeScale(tick)
+          const tickInterval = this.timeScale(tickEnd) - startX
+
+          body
+            .append('text')
+            .attr('x', startX + tickInterval / 2)
+            .attr('y', y)
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .attr('stroke', 'var(--ox-gantt-color-text, var(--md-sys-color-on-primary-container))')
+            .text(allocation)
+            .style('font-size', '12px')
+        }
+      })
+    })
+
+    // Draw horizontal grid lines for each resource row
+    for (let i = 0; i <= this.resources.length; i++) {
+      body
+        .append('line')
+        .attr('x1', 0)
+        .attr('x2', this.getChartWidth())
+        .attr('y1', i * 30)
+        .attr('y2', i * 30)
+        .attr('stroke', 'var(--ox-gantt-color-gridlines, var(--md-sys-color-outline))')
+        .attr('stroke-width', 1)
+    }
+  }
+
+  calculateResourceAllocations(ticks: Date[]): { [key: string]: { [key: string]: number } } {
+    const resourceAllocations: { [key: string]: { [key: string]: number } } = {}
+
+    this.resources.forEach(resource => {
+      resourceAllocations[resource.type] = {}
+      ticks.forEach(tick => {
+        const tickEnd = this.getTickEnd(tick)
+        const dateKey = this.formatDateKey(tick, tickEnd)
+        resourceAllocations[resource.type][dateKey] = 0
+      })
+    })
+
+    this.tasks.forEach(task => {
+      const startDate = new Date(task.startDate)
+      const endDate = new Date(task.endDate)
+      let currentDate = startDate
+
+      while (currentDate <= endDate) {
+        const tick = ticks.find(t => currentDate >= t && currentDate < this.getTickEnd(t))
+        if (tick) {
+          const tickEnd = this.getTickEnd(tick)
+          const dateKey = this.formatDateKey(tick, tickEnd)
+
+          ;(task.resources || []).forEach(resource => {
+            if (resourceAllocations[resource.type][dateKey] !== undefined) {
+              resourceAllocations[resource.type][dateKey] += resource.allocated
+            }
+          })
+        }
+
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+    })
+
+    return resourceAllocations
+  }
+
+  getTickEnd(tick: Date): Date {
+    if (this.level === 'week-day') {
+      return d3.timeDay.offset(tick, 1)
+    } else if (this.level === 'quarter-week') {
+      return d3.timeWeek.offset(tick, 1)
+    } else if (this.level === 'year-month') {
+      return d3.timeMonth.offset(tick, 1)
+    } else if (this.level === 'year-quarter') {
+      return d3.timeMonth.offset(tick, 3)
+    }
+    return d3.timeDay.offset(tick, 1)
+  }
+
+  formatDateKey(start: Date, end: Date): string {
+    return `${start.toISOString().split('T')[0]}_${end.toISOString().split('T')[0]}`
+  }
+
+  handleWheelForBody(event: WheelEvent, container: HTMLDivElement) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    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
+
+    const customEvent = new CustomEvent('scroll', {
+      detail: {
+        scrollLeft: container.scrollLeft,
+        scrollTop: container.scrollTop
+      },
+      bubbles: true,
+      composed: true
+    })
+
+    this.host.dispatchEvent(customEvent)
+  }
+
+  handleTouchStartForBody(event: TouchEvent, container: HTMLDivElement) {
+    event.stopPropagation()
+
+    this.touchStartX = event.touches[0].clientX
+    this.touchStartY = event.touches[0].clientY
+
+    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
+
+    const deltaX = this.touchStartX! - touchCurrentX
+    const deltaY = this.touchStartY! - touchCurrentY
+
+    container.scrollLeft = this.scrollStartX! + deltaX
+    container.scrollTop = this.scrollStartY! + deltaY
+
+    const customEvent = new CustomEvent('scroll', {
+      detail: {
+        scrollLeft: container.scrollLeft,
+        scrollTop: container.scrollTop
+      },
+      bubbles: true,
+      composed: true
+    })
+
+    this.host.dispatchEvent(customEvent)
+  }
+}