tg-ganttchart 0.0.8 → 0.0.10

package/src/components/Header/GanttViewFilter.vue

@@ -1,154 +0,0 @@
-<!-- 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

@@ -1,266 +0,0 @@
-<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

@@ -1,283 +0,0 @@
-
-<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>