@operato/gantt 8.0.0-alpha.4 → 8.0.0-alpha.43

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 {
@@ -312,7 +321,7 @@ export class OxGantt extends localize(i18next)(LitElement) {
   }
 
   renderTaskRows(tasks: Task[], level: number = 0, columnConfig: ColumnConfig[]): TemplateResult[] {
-    return tasks.flatMap(task => {
+    return (tasks || []).flatMap(task => {
       if (task.collapsed) {
         return [this.renderTaskRow(task, level, columnConfig)]
       } else {

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] {

package/src/ox-task-tooltip.ts

@@ -1,11 +1,11 @@
 import { LitElement, html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 @customElement('ox-task-tooltip')
 export class OxTaskTooltip extends LitElement {
   static styles = css`
     :host {
-      position: fixed; /* position: absolute로 변경 */
+      position: fixed;
       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);
@@ -21,17 +21,18 @@ export class OxTaskTooltip extends LitElement {
       transition:
         visibility 0.1s,
         opacity 0.1s;
-      opacity: 0; /* 초기에는 보이지 않음 */
+      opacity: 0;
     }
     :host([visible]) {
       visibility: visible;
-      opacity: 1; /* 보일 때는 불투명 */
+      opacity: 1;
     }
     .title {
       font-weight: bold;
       font-size: 16px;
       margin-bottom: 8px;
-      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4)); /* 파란색 텍스트 */
+      color: var(--ox-gantt-tooltip-title-color, var(--md-sys-color-primary, #0078d4));
+      outline: none;
     }
     .detail {
       display: grid;
@@ -42,14 +43,24 @@ export class OxTaskTooltip extends LitElement {
     .label {
       font-weight: bold;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
-      text-align: right; /* 라벨을 우측 정렬 */
+      text-align: right;
     }
     .colon {
       text-align: center;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-secondary, #333));
     }
     .value {
-      text-align: left; /* 값을 좌측 정렬 */
+      text-align: left;
+      color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
+    }
+    .close-button {
+      position: absolute;
+      top: 4px;
+      right: 8px;
+      background: none;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
       color: var(--ox-gantt-tooltip-color, var(--md-sys-color-on-surface, #333));
     }
   `
@@ -59,6 +70,9 @@ export class OxTaskTooltip extends LitElement {
   @property({ type: String }) endDate = ''
   @property({ type: Number }) progress = 0
   @property({ type: String }) type = ''
+  @property({ type: Boolean, attribute: true }) visible: boolean = false
+
+  @query('.title') titleElement!: HTMLDivElement
 
   show(x: number, y: number) {
     const tooltipWidth = this.offsetWidth
@@ -100,15 +114,23 @@ export class OxTaskTooltip extends LitElement {
     }
 
     this.setAttribute('visible', '')
+
+    setTimeout(() => {
+      this.titleElement.addEventListener('blur', this.hide)
+      this.titleElement.focus({ preventScroll: true })
+    }, 500)
   }
 
-  hide() {
+  hide = () => {
+    this.titleElement.removeEventListener('blur', this.hide)
     this.removeAttribute('visible')
   }
 
   render() {
     return html`
-      <div class="title">${this.title}</div>
+      <div class="close-button" @click=${this.hide} @touchstart=${this.hide}>✕</div>
+      <div class="title" tabindex="0">${this.title}</div>
+
       <div class="detail">
         <span class="label">Type</span><span class="colon">:</span><span class="value">${this.type}</span>
         <span class="label">Start Date</span><span class="colon">:</span><span class="value">${this.startDate}</span>

package/stories/ox-gantt.stories.ts

@@ -68,6 +68,22 @@ const Template: Story<ArgTypes> = ({
   </style>
 
   <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+
+      overscroll-behavior: none;
+
+      /* This is a font-stack that tries to use the system-default sans-serifs first */
+      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+
+      accent-color: var(--md-sys-color-primary);
+    }
+
     body {
       width: 100%;
       height: 800px;
@@ -79,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);

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);