tg-ganttchart 0.0.7 → 0.0.8

package/src/components/Header/GanttViewFilter.vue

@@ -0,0 +1,154 @@
+<!-- GanttViewFilter.vue -->
+<template>
+    <div class="gantt-view-filter">
+        <div class="view-toggle-group">
+            <button @click="changeViewMode('day')" :class="{ active: viewMode === 'day' }" class="view-toggle-btn">
+                <span class="view-icon">📅</span>
+                <span class="view-label">Day</span>
+            </button>
+            <button @click="changeViewMode('week')" :class="{ active: viewMode === 'week' }" class="view-toggle-btn">
+                <span class="view-icon">📊</span>
+                <span class="view-label">Week</span>
+            </button>
+            <button @click="changeViewMode('month')" :class="{ active: viewMode === 'month' }" class="view-toggle-btn">
+                <span class="view-icon">🗓️</span>
+                <span class="view-label">Month</span>
+            </button>
+            <button @click="changeViewMode('quarter')" :class="{ active: viewMode === 'quarter' }" class="view-toggle-btn">
+                <span class="view-icon">📈</span>
+                <span class="view-label">Quarter</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GanttViewFilter',
+    data() {
+        return {
+            viewMode: 'day' // default view mode
+        };
+    },
+    methods: {
+        changeViewMode(mode) {
+            // eslint-disable-next-line no-debugger
+            debugger;
+            this.viewMode = mode;
+            // Emit an event to the parent component (App.vue) so it can update the Gantt chart
+            this.$emit('view-mode-changed', mode);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.gantt-view-filter {
+    padding: 16px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.view-toggle-group {
+    display: flex;
+    gap: 8px;
+    justify-content: right;
+    align-items: center;
+}
+
+.view-toggle-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    cursor: pointer;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    color: white;
+    font-weight: 500;
+    font-size: 14px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+.view-toggle-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.view-toggle-btn:hover::before {
+    left: 100%;
+}
+
+.view-toggle-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.view-toggle-btn.active {
+    background: rgba(255, 255, 255, 0.9);
+    color: #667eea;
+    border-color: rgba(255, 255, 255, 0.9);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    font-weight: 600;
+}
+
+.view-icon {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-label {
+    font-size: 14px;
+    font-weight: inherit;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gantt-view-filter {
+        padding: 12px 16px;
+    }
+    
+    .view-toggle-group {
+        gap: 6px;
+    }
+    
+    .view-toggle-btn {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+    
+    .view-icon {
+        font-size: 14px;
+    }
+    
+    .view-label {
+        font-size: 13px;
+    }
+}
+
+@media (max-width: 480px) {
+    .view-toggle-btn {
+        padding: 8px 12px;
+    }
+    
+    .view-label {
+        display: none;
+    }
+}
+</style>

package/src/components/Header/Header.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="gantt-elastic__header" :style="{ ...style['header'] }">
+    <div class="gantt-elastic__header-title" :style="{ ...style['header-title'] }">
+      <div class="gantt-elastic__header-title--text" :style="{ ...style['header-title--text'] }"
+        v-if="!opts.title.html">
+        {{ opts.title.label }}
+      </div>
+      <div class="gantt-elastic__header-title--html" :style="{ ...style['header-title--html'] }" v-if="opts.title.html"
+        v-html="opts.title.label"></div>
+    </div>
+    <div class="gantt-elastic__header-options" :style="{ ...style['header-options'] }">
+      <button class="gantt-elastic__header-btn-recenter" :style="{ ...style['header-btn-recenter'] }"
+        @click.prevent="recenterPosition">
+        {{ opts.locale.Now }}
+      </button>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["X-Scale"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="scale" :max="24" :min="2"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Y-Scale"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="height" :max="100" :min="7"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Before/After"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="scope" :max="31" :min="0"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Task list width"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="divider" :max="100" :min="0"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-task-list-switch--wrapper"
+        :style="{ ...style['header-task-list-switch--label'] }">
+        <switches class="gantt-elastic__header-task-list-switch" :style="{ ...style['header-task-list-switch'] }"
+          v-model="root.state.options.taskList.display"></switches>
+        {{ opts.locale["Display task list"] }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
+import Switches from "vue-switches";
+
+const defaultStyle = {
+  header: {
+    margin: "0px auto",
+    background: "#f3f5f747",
+    padding: "10px",
+    overflow: "hidden",
+    clear: "both",
+    display: "flex",
+    "justify-content": "space-between"
+  },
+  "header-title": { float: "left" },
+  "header-options": { float: "right" },
+  "header-title--text": {
+    "font-size": "20px",
+    "vertical-align": "middle",
+    "font-weight": "400",
+    "line-height": "35px",
+    "padding-left": "22px",
+    "letter-spacing": "1px"
+  },
+  "header-title--html": {
+    "font-size": "20px",
+    "vertical-align": "middle",
+    "font-weight": "400",
+    "line-height": "35px",
+    "padding-left": "22px",
+    "letter-spacing": "1px"
+  },
+  "header-btn-recenter": {
+    background: "#95A5A6",
+    border: "none",
+    outline: "none",
+    cursor: "pointer",
+    color: "white",
+    "border-radius": "3px",
+    "margin-right": "27px",
+    "font-size": "16px",
+    padding: "8px 12px"
+  },
+  "header-slider": {
+    "box-sizing": "content-box"
+  },
+  "header-slider-wrapper": {
+    display: "inline-block",
+    "vertical-align": "middle"
+  },
+  "header-slider--slider": { "box-sizing": "content-box" },
+  "header-slider--process": { "box-sizing": "content-box" },
+  "header-task-list-switch--label": { "box-sizing": "content-box" },
+  "header-task-list-switch": {
+    margin: "0px 15px",
+    "vertical-align": "middle"
+  },
+  "header-label": {}
+};
+const defaultOptions = {
+  title: {
+    label: "ajay",
+    html: true
+  },
+  locale: {
+    Now: "Now",
+    "X-Scale": "Zoom-X",
+    "Y-Scale": "Zoom-Y",
+    "Task list width": "Task list",
+    "Before/After": "Expand",
+    "Display task list": "Show task list"
+  }
+};
+export default {
+  name: "GanttHeader",
+  components: {
+    vueSlider,
+    Switches
+  },
+  props: ["options", "dynamicStyle"],
+  inject: ["root"],
+  data() {
+    return {
+      scaleTimeoutId: null,
+      firstScale: false,
+      localScale: 0,
+      localHeight: 0,
+      localBefore: 0,
+      localPercent: 0,
+      sliderOptions: {
+        xScale: {
+          value: 0
+        }
+      },
+      style: {},
+      opts: {}
+    };
+  },
+  created() {
+    debugger; // eslint-disable-line no-debugger
+    defaultOptions.title.label = this.root.projectName
+    this.localScale = this.root.state.options.times.timeZoom;
+    this.localHeight = this.root.state.options.row.height;
+    this.localBefore = this.root.state.options.scope.before;
+    this.localPercent = this.root.state.options.taskList.percent;
+    this.sliderOptions.xScale.value = this.root.state.options.times.timeZoom;
+    this.style = this.root.mergeDeep({}, defaultStyle, this.dynamicStyle);
+    this.opts = this.root.mergeDeep({}, defaultOptions, this.options);
+  },
+  methods: {
+    getImage() {
+      this.root.getImage("image/png").then(imgB64 => {
+        const link = document.createElement("a");
+        link.href = imgB64;
+        link.download = "gantt-elastic.png";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+    },
+    recenterPosition() {
+      this.root.$emit("recenterPosition");
+    },
+    setScale(value) {
+      if (this.scaleTimeoutId !== null) {
+        clearTimeout(this.scaleTimeoutId);
+        this.scaleTimeoutId = null;
+      }
+      // debouncing
+      if (this.firstScale) {
+        this.scaleTimeoutId = setTimeout(() => {
+          this.root.$emit("times-timeZoom-change", value);
+          this.scaleTimeoutId = null;
+        }, 50);
+      } else {
+        this.root.$emit("times-timeZoom-change", value);
+        this.firstScale = true;
+      }
+    }
+  },
+  computed: {
+    /**
+     * If there is a component slot specified for header
+     * @returns {bool}
+     */
+    beforeOptionsIsComponent() {
+      const headerSlot = this.options.slots.header;
+      if (
+        typeof headerSlot.beforeOptions === "object" &&
+        !Array.isArray(headerSlot.beforeOptions)
+      ) {
+        return true;
+      }
+      return false;
+    },
+    /**
+     * If there is a slot with beforeOptions html content
+     * @returns {bool}
+     */
+    beforeOptionsIsHtml() {
+      if (typeof this.options.slots.header.beforeOptions === "string") {
+        return true;
+      }
+      return false;
+    },
+    scale: {
+      get() {
+        return this.localScale;
+      },
+      set(value) {
+        this.localScale = Number(value);
+        this.setScale(this.localScale);
+      }
+    },
+    height: {
+      get() {
+        return this.localHeight;
+      },
+      set(value) {
+        this.localHeight = Number(value);
+        this.root.$emit("row-height-change", Number(value));
+      }
+    },
+    scope: {
+      get() {
+        return this.localBefore;
+      },
+      set(value) {
+        this.localBefore = Number(value);
+        this.root.$emit("scope-change", Number(value));
+      }
+    },
+    divider: {
+      get() {
+        return this.localPercent;
+      },
+      set(value) {
+        this.localPercent = Number(value);
+        this.root.$emit("taskList-width-change", Number(value));
+      }
+    }
+  }
+};
+</script>

package/src/components/MainView.vue

@@ -0,0 +1,283 @@
+
+<template>
+  <div class="gantt-elastic__main-view" :style="{ ...root.style['main-view'] }">
+    <div
+      class="gantt-elastic__main-container-wrapper"
+      :style="{ ...root.style['main-container-wrapper'], height: root.state.options.height + 'px' }"
+    >
+      <div
+        class="gantt-elastic__main-container"
+        :style="{
+          ...root.style['main-container'],
+          width: root.state.options.clientWidth + 'px',
+          height: root.state.options.height + 'px'
+        }"
+        ref="mainView"
+      >
+        <div
+          class="gantt-elastic__container"
+          :style="{ ...root.style['container'] }"
+          @mousemove="mouseMove"
+          @mouseup="mouseUp"
+        >
+          <div
+            ref="taskList"
+            class="gantt-elastic__task-list-container"
+            :style="{
+              ...root.style['task-list-container'],
+              width: root.state.options.taskList.finalWidth + 'px',
+              height: root.state.options.height + 'px'
+            }"
+            v-show="root.state.options.taskList.display"
+          >
+            <task-list></task-list>
+          </div>
+          <div
+            class="gantt-elastic__main-view-container"
+            :style="{ ...root.style['main-view-container'] }"
+            ref="chartContainer"
+            @mousedown="chartMouseDown"
+            @touchstart="chartMouseDown"
+            @mouseup="chartMouseUp"
+            @touchend="chartMouseUp"
+            @mousemove.prevent="chartMouseMove"
+            @touchmove.prevent="chartMouseMove"
+            @wheel.prevent="chartWheel"
+          >
+            <chart></chart>
+          </div>
+        </div>
+      </div>
+      <div
+        class="gantt-elastic__chart-scroll-container gantt-elastic__chart-scroll-container--vertical"
+        :style="{
+          ...root.style['chart-scroll-container'],
+          ...root.style['chart-scroll-container--vertical'],
+          ...verticalStyle
+        }"
+        ref="chartScrollContainerVertical"
+        @scroll="onVerticalScroll"
+      >
+        <div
+          class="gantt-elastic__chart-scroll--vertical"
+          :style="{ width: '1px', height: root.state.options.allVisibleTasksHeight + 'px' }"
+        ></div>
+      </div>
+    </div>
+    <div
+      class="gantt-elastic__chart-scroll-container gantt-elastic__chart-scroll-container--horizontal"
+      :style="{
+        ...root.style['chart-scroll-container'],
+        ...root.style['chart-scroll-container--horizontal'],
+        marginLeft: getMarginLeft
+      }"
+      @scroll="onHorizontalScroll"
+      ref="chartScrollContainerHorizontal"
+    >
+      <div
+        class="gantt-elastic__chart-scroll--horizontal"
+        :style="{ height: '1px', width: root.state.options.width + 'px' }"
+      >
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TaskList from './TaskList/TaskList.vue';
+import Chart from './Chart/Chart.vue';
+
+let ignoreScrollEvents = false;
+
+export default {
+  name: 'MainView',
+  components: {
+    TaskList,
+    Chart
+  },
+  inject: ['root'],
+  data() {
+    return {
+      defs: '',
+      mousePos: {
+        x: 0,
+        y: 0,
+        movementX: 0,
+        movementY: 0,
+        lastX: 0,
+        lastY: 0,
+        positiveX: 0,
+        positiveY: 0,
+        currentX: 0,
+        currentY: 0
+      }
+    };
+  },
+  /**
+   * Mounted
+   */
+  mounted() {
+    this.viewBoxWidth = this.$el.clientWidth;
+    this.root.state.refs.mainView = this.$refs.mainView;
+    this.root.state.refs.chartContainer = this.$refs.chartContainer;
+    this.root.state.refs.taskList = this.$refs.taskList;
+    this.root.state.refs.chartScrollContainerHorizontal = this.$refs.chartScrollContainerHorizontal;
+    this.root.state.refs.chartScrollContainerVertical = this.$refs.chartScrollContainerVertical;
+    document.addEventListener('mouseup', this.chartMouseUp.bind(this));
+    document.addEventListener('mousemove', this.chartMouseMove.bind(this));
+    document.addEventListener('touchmove', this.chartMouseMove.bind(this));
+    document.addEventListener('touchend', this.chartMouseUp.bind(this));
+  },
+  computed: {
+    /**
+     * Get margin left
+     *
+     * @returns {string}
+     */
+    getMarginLeft() {
+      if (!this.root.state.options.taskList.display) {
+        return '0px';
+      }
+      return this.root.state.options.taskList.finalWidth + 'px';
+    },
+
+    /**
+     * Get vertical style
+     *
+     * @returns {object}
+     */
+    verticalStyle() {
+      return {
+        width: this.root.state.options.scrollBarHeight + 'px',
+        height: this.root.state.options.rowsHeight + 'px',
+        'margin-top': this.root.state.options.calendar.height + this.root.state.options.calendar.gap + 'px'
+      };
+    },
+
+    /**
+     * Get view box
+     *
+     * @returns {string}
+     */
+    getViewBox() {
+      if (this.root.state.options.clientWidth) {
+        return `0 0 ${this.root.state.options.clientWidth - this.root.state.options.scrollBarHeight} ${
+          this.root.state.options.height
+        }`;
+      }
+      return `0 0 0 ${this.root.state.options.height}`;
+    }
+  },
+  methods: {
+    /**
+     * Emit event when mouse is moving inside main view
+     */
+    mouseMove(event) {
+      this.root.$emit('main-view-mousemove', event);
+    },
+
+    /**
+     * Emit mouseup event inside main view
+     */
+    mouseUp(event) {
+      this.root.$emit('main-view-mouseup', event);
+    },
+
+    /**
+     * Horizontal scroll event handler
+     */
+    onHorizontalScroll(ev) {
+      this.root.$emit('chart-scroll-horizontal', ev);
+    },
+
+    /**
+     * Vertical scroll event handler
+     */
+    onVerticalScroll(ev) {
+      this.root.$emit('chart-scroll-vertical', ev);
+    },
+
+    /**
+     * Mouse wheel event handler
+     */
+    chartWheel(ev) {
+      this.root.$emit('chart-wheel', ev);
+    },
+
+    /**
+     * Chart mousedown event handler
+     * Initiates drag scrolling mode
+     */
+    chartMouseDown(ev) {
+      if (typeof ev.touches !== 'undefined') {
+        this.mousePos.x = this.mousePos.lastX = ev.touches[0].screenX;
+        this.mousePos.y = this.mousePos.lastY = ev.touches[0].screenY;
+        this.mousePos.movementX = 0;
+        this.mousePos.movementY = 0;
+        this.mousePos.currentX = this.$refs.chartScrollContainerHorizontal.scrollLeft;
+        this.mousePos.currentY = this.$refs.chartScrollContainerVertical.scrollTop;
+      }
+      this.root.state.options.scroll.scrolling = true;
+    },
+
+    /**
+     * Chart mouseup event handler
+     * Deactivates drag scrolling mode
+     */
+    chartMouseUp(ev) {
+      this.root.state.options.scroll.scrolling = false;
+    },
+
+    /**
+     * Chart mousemove event handler
+     * When in drag scrolling mode this method calculate scroll movement
+     */
+    chartMouseMove(ev) {
+      if (this.root.state.options.scroll.scrolling) {
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        ev.stopPropagation();
+        const touch = typeof ev.touches !== 'undefined';
+        let movementX, movementY;
+        if (touch) {
+          const screenX = ev.touches[0].screenX;
+          const screenY = ev.touches[0].screenY;
+          movementX = this.mousePos.x - screenX;
+          movementY = this.mousePos.y - screenY;
+          this.mousePos.lastX = screenX;
+          this.mousePos.lastY = screenY;
+        } else {
+          movementX = ev.movementX;
+          movementY = ev.movementY;
+        }
+        const horizontal = this.$refs.chartScrollContainerHorizontal;
+        const vertical = this.$refs.chartScrollContainerVertical;
+        let x = 0,
+          y = 0;
+        if (touch) {
+          x = this.mousePos.currentX + movementX * this.root.state.options.scroll.dragXMoveMultiplier;
+        } else {
+          x = horizontal.scrollLeft - movementX * this.root.state.options.scroll.dragXMoveMultiplier;
+        }
+        horizontal.scrollLeft = x;
+        if (touch) {
+          y = this.mousePos.currentY + movementY * this.root.state.options.scroll.dragYMoveMultiplier;
+        } else {
+          y = vertical.scrollTop - movementY * this.root.state.options.scroll.dragYMoveMultiplier;
+        }
+        vertical.scrollTop = y;
+      }
+    }
+  },
+
+  /**
+   * Before destroy event - clean up
+   */
+  // beforeDestroy() {
+  //   document.removeEventListener('mouseup', this.chartMouseUp);
+  //   document.removeEventListener('mousemove', this.chartMouseMove);
+  //   document.removeEventListener('touchmove', this.chartMouseMove);
+  //   document.removeEventListener('touchend', this.chartMouseUp);
+  // }
+};
+</script>