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

package/src/ox-gantt-chart.ts

@@ -2,7 +2,7 @@ import './ox-task-tooltip.js'
 import './ox-resource-chart.js'
 
 import { LitElement, html, css, PropertyValues, PropertyValueMap } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import * as d3 from 'd3'
 import { locales } from './locales'
 
@@ -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,
@@ -23,15 +25,21 @@ 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;
+        touch-action: none;
       }
+
       svg {
         min-width: 100%;
       }
+
       svg[header] {
         display: block;
         min-width: 100%;
@@ -44,27 +52,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;
       }
     `
   ]
@@ -81,20 +89,38 @@ export class OxGanttChart extends LitElement {
   @property({ type: String }) locale: string = 'en-US'
   @property({ type: Object }) colorProvider!: (task: Task) => string
 
+  @state() dateRangeSelected?: { start: Date; end: Date }
+
   @query('svg[header]') svgHeader!: SVGElement
   @query('svg[body]') svgBody!: SVGElement
   @query('[chart-container]') container!: HTMLDivElement
   @query('ox-task-tooltip') tooltip!: OxTaskTooltip
 
-  private ganttChartController: GanttChartController
+  private ganttChartController!: GanttChartController
+
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.initHeaderGestureHandlers()
+
+    // this.addEventListener('date-range-cleared', e => this.clearSelection())
+  }
 
-  constructor() {
-    super()
+  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)
   }
 
-  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    this.initHeaderGestureHandlers()
+  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()
   }
 
   updated(changedProperties: PropertyValues<this>) {
@@ -103,8 +129,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')) {
@@ -126,26 +153,16 @@ export class OxGanttChart extends LitElement {
 
     this.ganttChartController.drawAxes(this.svgHeader)
     this.ganttChartController.drawBody(this.svgBody, this.tooltip)
+    this.drawSelectedRange()
   }
 
   render() {
     return html`
-      <div
-        chart-container
-        @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}
-        @touchstart=${(e: TouchEvent) => this.ganttChartController.handleTouchStartForBody(e, this.container)}
-        @touchmove=${(e: TouchEvent) => this.ganttChartController.handleTouchMoveForBody(e, this.container)}
-      >
-        <svg
-          header
-          @date-range-selected=${(e: CustomEvent) => this.handleDateRangeSelected(e)}
-          @wheel=${this.handleWheelForHeader.bind(this)}
-        ></svg>
+      <div chart-container @wheel=${(e: WheelEvent) => this.ganttChartController.handleWheelForBody(e, this.container)}>
+        <svg header @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>
     `
@@ -248,11 +265,6 @@ export class OxGanttChart extends LitElement {
     this.dispatchEvent(customEvent)
   }
 
-  handleDateRangeSelected(event: CustomEvent) {
-    const detail = event.detail
-    this.dispatchEvent(new CustomEvent('date-range-selected', { detail }))
-  }
-
   updateLocale(locale: string) {
     const localeDefinition = (locales as any)[locale || 'en-US']
     if (localeDefinition) {
@@ -264,141 +276,47 @@ export class OxGanttChart extends LitElement {
   initHeaderGestureHandlers() {
     const header = d3.select(this.svgHeader)
 
-    let isDragging = false
     let startX: number | null = null
-    let lastTouchDistance: number | null = null
 
-    const handleTouchStart = (event: TouchEvent) => {
+    const handlePointerDown = (event: PointerEvent) => {
       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
-      }
-    }
-
-    const handleTouchMove = (event: TouchEvent) => {
-      event.preventDefault()
+      const containerOffsetX = header.node()!.getBoundingClientRect().left
+      startX = event.clientX - containerOffsetX
 
-      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) {
-        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 (event.touches.length < 2) {
-        lastTouchDistance = null
-      }
-
-      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 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.highlightSelection(startX!, currentX)
     }
 
-    const handleMouseDown = (event: MouseEvent) => {
-      isDragging = true
-      const containerOffsetX = header.node()!.getBoundingClientRect().left
-      startX = event.clientX - containerOffsetX
-    }
-
-    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) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
     let startDate = this.ganttChartController.timeScale.invert(startX)
     let endDate = this.ganttChartController.timeScale.invert(endX)
 
@@ -418,44 +336,10 @@ export class OxGanttChart extends LitElement {
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
 
-    header.selectAll('.selection-rect').remove()
-    body.selectAll('.selection-rect').remove()
-
-    header
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 20)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', 20)
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
-
-    body
-      .append('rect')
-      .attr('class', 'selection-rect')
-      .attr('x', this.ganttChartController.timeScale(start!))
-      .attr('y', 0)
-      .attr(
-        'width',
-        this.ganttChartController.timeScale(end!) -
-          this.ganttChartController.timeScale(start!) +
-          this.ganttChartController.baseWidth / this.ganttChartController.getScale()
-      )
-      .attr('height', '100%')
-      .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
-      .attr('opacity', '.2')
+    this.dateRangeSelected = { start: start!, end: end! }
   }
 
   finalizeSelection(startX: number, endX: number) {
-    const header = d3.select(this.svgHeader)
-    const body = d3.select(this.svgBody)
-
     let startDate = this.ganttChartController.timeScale.invert(startX)
     let endDate = this.ganttChartController.timeScale.invert(endX)
 
@@ -475,6 +359,29 @@ export class OxGanttChart extends LitElement {
       end = d3.timeDay.offset(d3.timeMonth.every(3)!.ceil(d3.max([startDate, endDate])!), -1)
     }
 
+    this.dateRangeSelected = { start: start!, end: end! }
+
+    const formatDate = d3.timeFormat('%Y-%m-%d')
+
+    this.dispatchEvent(
+      new CustomEvent('date-range-selected', {
+        detail: { start: formatDate(start!), end: formatDate(end!) },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  drawSelectedRange() {
+    if (!this.dateRangeSelected) {
+      return
+    }
+
+    let { start, end } = this.dateRangeSelected
+
+    const header = d3.select(this.svgHeader)
+    const body = d3.select(this.svgBody)
+
     header.selectAll('.selection-rect').remove()
     body.selectAll('.selection-rect').remove()
 
@@ -507,12 +414,5 @@ export class OxGanttChart extends LitElement {
       .attr('height', '100%')
       .attr('fill', 'var(--ox-gantt-selection-color, var(--md-sys-color-on-primary-container))')
       .attr('opacity', '.2')
-
-    const formatDate = d3.timeFormat('%Y-%m-%d')
-    const customEvent = new CustomEvent('date-range-selected', {
-      detail: { start: formatDate(start!), end: formatDate(end!) }
-    })
-
-    header.node()?.dispatchEvent(customEvent)
   }
 }

package/src/ox-gantt-resize-splitter.ts

@@ -10,15 +10,29 @@ export class OxGanttResizeSplitter extends LitElement {
       background-color: var(--splitter-background-color);
       width: var(--width);
       height: var(--height);
+      z-index: 2;
     }
 
     :host(:hover) {
       background-color: var(--splitter-hover-background-color);
     }
 
+    /* 터치 영역을 넓히기 위해 실제 터치 영역을 더 크게 설정 */
     div {
       width: var(--width);
       height: var(--height);
+      touch-action: none; /* 터치 이벤트 처리에 방해되지 않도록 설정 */
+    }
+
+    div.touch-target {
+      width: var(--width);
+      height: var(--height);
+      transform: scale(1, 5);
+      transform-origin: center;
+    }
+
+    :host([vertical]) div.touch-target {
+      transform: scale(5, 1); /* 세로 스플리터는 세로 방향으로 터치 영역을 확장 */
     }
   `
 
@@ -39,14 +53,37 @@ export class OxGanttResizeSplitter extends LitElement {
   }
 
   render() {
-    return html`<div @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}></div>`
+    return html`
+      <div
+        class="touch-target"
+        @mousedown=${(e: MouseEvent) => this.onMouseDown(e)}
+        @touchstart=${this.onTouchStart}
+      ></div>
+      <div></div>
+      <!-- 실제 보이는 스플리터 -->
+    `
   }
 
   private onMouseDown(e: MouseEvent) {
-    this.dragstart = {
-      x: e.clientX,
-      y: e.clientY
+    this.startDrag(e.clientX, e.clientY)
+    window.addEventListener('mousemove', this.onMouseMove)
+    window.addEventListener('mouseup', this.onMouseUp)
+    e.stopPropagation()
+  }
+
+  private onTouchStart(e: TouchEvent) {
+    // 터치가 touch-target에서 시작된 경우에만 작동
+    if ((e.target as HTMLElement).classList.contains('touch-target')) {
+      const touch = e.touches[0]
+      this.startDrag(touch.clientX, touch.clientY)
+      window.addEventListener('touchmove', this.onTouchMove)
+      window.addEventListener('touchend', this.onTouchEnd)
     }
+    e.stopPropagation()
+  }
+
+  private startDrag(clientX: number, clientY: number) {
+    this.dragstart = { x: clientX, y: clientY }
 
     this.dispatchEvent(
       new CustomEvent('splitter-dragstart', {
@@ -54,44 +91,28 @@ export class OxGanttResizeSplitter extends LitElement {
         composed: true
       })
     )
-
-    this.parentElement!.addEventListener('mousemove', this.onMouseMoveHandler)
-    this.parentElement!.addEventListener('mouseup', this.onMouseUpHandler)
-    window.addEventListener('mousemove', this.onMouseMoveHandler)
-    window.addEventListener('mouseup', this.onMouseUpHandler)
-
-    e.stopPropagation()
   }
 
-  private onMouseMoveHandler = (e: MouseEvent) => this.onMouseMove(e)
-  private onMouseUpHandler = (e: MouseEvent) => this.onMouseUp(e)
+  private onMouseMove = (e: MouseEvent) => {
+    this.moveDrag(e.clientX, e.clientY)
+  }
 
-  private onMouseMove(e: MouseEvent) {
-    if (!this.dragstart) {
-      return
-    }
+  private onTouchMove = (e: TouchEvent) => {
+    const touch = e.touches[0]
+    this.moveDrag(touch.clientX, touch.clientY)
+  }
 
-    const parentRect = this.parentElement!.getBoundingClientRect()
-    if (
-      e.clientX < parentRect.left ||
-      e.clientX > parentRect.right ||
-      e.clientY < parentRect.top ||
-      e.clientY > parentRect.bottom
-    ) {
-      this.onMouseUp(e)
-      return
-    }
+  private moveDrag(clientX: number, clientY: number) {
+    if (!this.dragstart) return
 
-    e.preventDefault()
+    const deltaX = clientX - this.dragstart.x
+    const deltaY = clientY - this.dragstart.y
 
     this.dispatchEvent(
       new CustomEvent('splitter-drag', {
         bubbles: true,
         composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
+        detail: { x: deltaX, y: deltaY }
       })
     )
 
@@ -102,30 +123,37 @@ export class OxGanttResizeSplitter extends LitElement {
     }
 
     document.body.style.userSelect = 'none'
+  }
 
-    e.stopPropagation()
+  private onMouseUp = (e: MouseEvent) => {
+    this.endDrag(e.clientX, e.clientY)
+    window.removeEventListener('mousemove', this.onMouseMove)
+    window.removeEventListener('mouseup', this.onMouseUp)
+  }
+
+  private onTouchEnd = (e: TouchEvent) => {
+    const touch = e.changedTouches[0]
+    this.endDrag(touch.clientX, touch.clientY)
+    window.removeEventListener('touchmove', this.onTouchMove)
+    window.removeEventListener('touchend', this.onTouchEnd)
   }
 
-  private onMouseUp(e: MouseEvent) {
-    this.parentElement!.removeEventListener('mousemove', this.onMouseMoveHandler)
-    this.parentElement!.removeEventListener('mouseup', this.onMouseUpHandler)
-    window.removeEventListener('mousemove', this.onMouseMoveHandler)
-    window.removeEventListener('mouseup', this.onMouseUpHandler)
+  private endDrag(clientX: number, clientY: number) {
+    if (!this.dragstart) return
+
+    const deltaX = clientX - this.dragstart.x
+    const deltaY = clientY - this.dragstart.y
 
     this.dispatchEvent(
       new CustomEvent('splitter-dragend', {
         bubbles: true,
         composed: true,
-        detail: {
-          x: e.clientX - this.dragstart!.x,
-          y: e.clientY - this.dragstart!.y
-        }
+        detail: { x: deltaX, y: deltaY }
       })
     )
 
+    this.dragstart = undefined
     document.body.style.cursor = ''
     document.body.style.userSelect = ''
-
-    e.stopPropagation()
   }
 }

package/src/ox-gantt.ts

@@ -23,6 +23,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
         font-family: Arial, sans-serif;
         text-wrap: nowrap;
         position: relative;
+        user-select: none;
       }
 
       .container {
@@ -49,6 +50,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
         overflow-y: overlay;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none; /* diabled rubber-band effect */
       }
 
       .resource-chart-container {
@@ -56,6 +58,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
         padding: 0;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none;
       }
 
       .task-container {
@@ -64,6 +67,8 @@ export class OxGantt extends localize(i18next)(LitElement) {
         display: flex;
         overflow: hidden;
         box-sizing: border-box;
+        user-select: none;
+        overscroll-behavior: none;
       }
 
       .task-table-container {
@@ -72,6 +77,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
         overflow-y: overlay;
         box-sizing: border-box;
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
+        overscroll-behavior: none; /* diabled rubber-band effect */
       }
 
       .task-chart-container {
@@ -104,6 +110,9 @@ export class OxGantt extends localize(i18next)(LitElement) {
         border: 1px solid var(--ox-gantt-border-color, var(--md-sys-color-outline));
         padding: 4px;
         text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       th {
@@ -146,15 +155,9 @@ export class OxGantt extends localize(i18next)(LitElement) {
   @property({ type: Boolean, attribute: 'extend-grid-lines' }) extendGridLines: boolean = false
   @property({ type: String, attribute: 'time-scale' }) timeScale: TimeScale = 'week-day'
   @property({ type: Object }) colorProvider: (task: Task) => string = (task: Task) => {
-    const { tags = [] } = task
-    if (tags.includes('critical')) {
-      return 'red'
-    } else if (tags.includes('milestone')) {
-      return 'blue'
-    } else if (tags.includes('done')) {
-      return 'green'
-    }
-    return 'grey'
+    const { style } = task
+
+    return style || 'gray'
   }
   @property({ type: Object }) columnConfigProvider: () => ColumnConfig[] = function () {
     return [

package/src/ox-resource-chart.ts

@@ -16,12 +16,14 @@ export class OxResourceChart extends LitElement {
         display: flex;
         overflow: hidden;
         position: relative;
+        user-select: none;
       }
 
       div[chart-container] {
         flex-direction: column;
         overflow-x: auto;
         overflow-y: hidden;
+        overscroll-behavior: none;
       }
 
       svg[header] {