tg-ganttchart 0.0.1

package/src/components/components/MainView.vue

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

package/src/components/components/TaskList/ItemColumn.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="gantt-elastic__task-list-item-column" :style="itemColumnStyle">
+    <div class="gantt-elastic__task-list-item-value-wrapper" :style="wrapperStyle">
+      <slot></slot>
+      <div class="gantt-elastic__task-list-item-value-container" :style="containerStyle">
+        <div
+          class="gantt-elastic__task-list-item-value"
+          :style="valueStyle"
+          @click="emitEvent('click', $event)"
+          @mouseenter="emitEvent('mouseenter', $event)"
+          @mouseover="emitEvent('mouseover', $event)"
+          @mouseout="emitEvent('mouseout', $event)"
+          @mousemove="emitEvent('mousemove', $event)"
+          @mousedown="emitEvent('mousedown', $event)"
+          @mouseup="emitEvent('mouseup', $event)"
+          @mousewheel="emitEvent('mousewheel', $event)"
+          @touchstart="emitEvent('touchstart', $event)"
+          @touchmove="emitEvent('touchmove', $event)"
+          @touchend="emitEvent('touchend', $event)"
+          v-if="!html"
+        >
+          {{ value }}
+        </div>
+        <div
+          class="gantt-elastic__task-list-item-value"
+          :style="valueStyle"
+          v-else
+          v-html="value"
+          @click="emitEvent('click', $event)"
+          @mouseenter="emitEvent('mouseenter', $event)"
+          @mouseover="emitEvent('mouseover', $event)"
+          @mouseout="emitEvent('mouseout', $event)"
+          @mousemove="emitEvent('mousemove', $event)"
+          @mousedown="emitEvent('mousedown', $event)"
+          @mouseup="emitEvent('mouseup', $event)"
+          @mousewheel="emitEvent('mousewheel', $event)"
+          @touchstart="emitEvent('touchstart', $event)"
+          @touchmove="emitEvent('touchmove', $event)"
+          @touchend="emitEvent('touchend', $event)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ItemColumn',
+  inject: ['root'],
+  props: {
+    column: Object,
+    task: Object
+  },
+  methods: {
+    emitEvent(eventName, event) {
+      const eventHandler = this.column.events?.[eventName];
+      if (eventHandler) {
+        eventHandler({ event, data: this.task, column: this.column });
+      }
+      this.root.$emit(`taskList-${this.task.type}-${eventName}`, { event, data: this.task, column: this.column });
+    }
+  },
+  computed: {
+    html() {
+      return this.column.html === true;
+    },
+    value() {
+      return typeof this.column.value === 'function' ? this.column.value(this.task) : this.task[this.column.value];
+    },
+    itemColumnStyle() {
+      return {
+        ...this.root.style['task-list-item-column'],
+        ...this.column.style['task-list-item-column'],
+        width: `${this.column.finalWidth}px`,
+        height: `${this.column.height}px`
+      };
+    },
+    wrapperStyle() {
+      return {
+        ...this.root.style['task-list-item-value-wrapper'],
+        ...this.column.style['task-list-item-value-wrapper']
+      };
+    },
+    containerStyle() {
+      return {
+        ...this.root.style['task-list-item-value-container'],
+        ...this.column.style['task-list-item-value-container']
+      };
+    },
+    valueStyle() {
+      return {
+        ...this.root.style['task-list-item-value'],
+        ...this.column.style['task-list-item-value']
+      };
+    }
+  }
+};
+</script>

package/src/components/components/TaskList/TaskList.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="gantt-elastic__task-list-wrapper"
+    ref="taskListWrapper"
+    :style="{ ...root.style['task-list-wrapper'], width: '100%', height: '100%' }"
+    v-show="root.state.options.taskList.display"
+  >
+    <div class="gantt-elastic__task-list" :style="{ ...root.style['task-list'] }" ref="taskList">
+      <task-list-header></task-list-header>
+      <div
+        class="gantt-elastic__task-list-items"
+        ref="taskListItems"
+        :style="{ ...root.style['task-list-items'], height: `${root.state.options.rowsHeight}px` }"
+      >
+        <task-list-item
+          v-for="task in root.visibleTasks"
+          :key="task.id"
+          :task="task"
+        ></task-list-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TaskListHeader from './TaskListHeader.vue';
+import TaskListItem from './TaskListItem.vue';
+
+export default {
+  name: 'TaskList',
+  components: {
+    TaskListHeader,
+    TaskListItem
+  },
+  inject: ['root'],
+  mounted() {
+    this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
+    this.root.state.refs.taskList = this.$refs.taskList;
+    this.root.state.refs.taskListItems = this.$refs.taskListItems;
+  }
+};
+</script>

package/src/components/components/TaskList/TaskListHeader.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="gantt-elastic__task-list-header"
+    :style="headerStyle"
+  >
+    <div
+      class="gantt-elastic__task-list-header-column"
+      v-for="column in root.getTaskListColumns"
+      :key="column._id"
+      :style="columnStyle(column)"
+    >
+      <task-list-expander
+        v-if="column.expander"
+        :tasks="collapsible"
+        :options="root.state.options.taskList.expander"
+      ></task-list-expander>
+      <div
+        class="gantt-elastic__task-list-header-label"
+        :style="headerLabelStyle(column)"
+        :column="column"
+        @mouseup="resizerMouseUp"
+      >
+        {{ column.label }}
+      </div>
+      <div
+        class="gantt-elastic__task-list-header-resizer-wrapper"
+        :style="resizerWrapperStyle(column)"
+        :column="column"
+        @mousedown="resizerMouseDown($event, column)"
+      >
+        <div class="gantt-elastic__task-list-header-resizer" :style="resizerStyle(column)">
+          <div
+            class="gantt-elastic__task-list-header-resizer-dot"
+            v-for="dot in 3"
+            :key="dot"
+            :style="resizerDotStyle(column)"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TaskListExpander from '../Expander.vue';
+
+export default {
+  name: 'TaskListHeader',
+  components: {
+    TaskListExpander
+  },
+  inject: ['root'],
+  data() {
+    return {
+      resizer: {
+        moving: false,
+        x: 0
+      }
+    };
+  },
+  computed: {
+    collapsible() {
+      return this.root.state.tasks.filter(task => task.allChildren.length > 0);
+    },
+    headerStyle() {
+      return {
+        ...this.root.style['task-list-header'],
+        height: `${this.root.state.options.calendar.height}px`,
+        marginBottom: `${this.root.state.options.calendar.gap}px`
+      };
+    }
+  },
+  methods: {
+    columnStyle(column) {
+      return {
+        ...this.root.style['task-list-header-column'],
+        ...column.style['task-list-header-column'],
+        width: `${column.finalWidth}px`
+      };
+    },
+    headerLabelStyle(column) {
+      return {
+        ...this.root.style['task-list-header-label'],
+        ...column.style['task-list-header-label']
+      };
+    },
+    resizerWrapperStyle(column) {
+      return {
+        ...this.root.style['task-list-header-resizer-wrapper'],
+        ...column.style['task-list-header-resizer-wrapper']
+      };
+    },
+    resizerStyle(column) {
+      return {
+        ...this.root.style['task-list-header-resizer'],
+        ...column.style['task-list-header-resizer']
+      };
+    },
+    resizerDotStyle(column) {
+      return {
+        ...this.root.style['task-list-header-resizer-dot'],
+        ...column.style['task-list-header-resizer-dot']
+      };
+    },
+    resizerMouseDown(event, column) {
+      if (!this.resizer.moving) {
+        this.resizer.moving = column;
+        this.resizer.x = event.clientX;
+        this.resizer.initialWidth = column.width;
+        this.root.$emit('taskList-column-width-change-start', this.resizer.moving);
+      }
+    },
+    resizerMouseMove(event) {
+      if (this.resizer.moving) {
+        const lastWidth = this.resizer.moving.width;
+        this.resizer.moving.width = this.resizer.initialWidth + event.clientX - this.resizer.x;
+        if (this.resizer.moving.width < this.root.state.options.taskList.minWidth) {
+          this.resizer.moving.width = this.root.state.options.taskList.minWidth;
+        }
+        if (lastWidth !== this.resizer.moving.width) {
+          this.root.$emit('taskList-column-width-change', this.resizer.moving);
+        }
+      }
+    },
+    resizerMouseUp() {
+      if (this.resizer.moving) {
+        this.root.$emit('taskList-column-width-change-stop', this.resizer.moving);
+        this.resizer.moving = false;
+      }
+    }
+  },
+  created() {
+    document.addEventListener('mouseup', this.resizerMouseUp);
+    document.addEventListener('mousemove', this.resizerMouseMove);
+    this.root.$on('main-view-mousemove', this.resizerMouseMove);
+    this.root.$on('main-view-mouseup', this.resizerMouseUp);
+  },
+  // beforeDestroy() {
+  //   document.removeEventListener('mouseup', this.resizerMouseUp);
+  //   document.removeEventListener('mousemove', this.resizerMouseMove);
+  // }
+};
+</script>

package/src/components/components/TaskList/TaskListItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="gantt-elastic__task-list-item" :style="root.style['task-list-item']">
+    <item-column
+      v-for="column in columns"
+      :key="column._id"
+      :column="column"
+      :task="task"
+    >
+      <task-list-expander
+        v-if="column.expander"
+        :tasks="[task]"
+        :options="root.state.options.taskList.expander"
+        type="taskList"
+      ></task-list-expander>
+    </item-column>
+  </div>
+</template>
+
+<script>
+import TaskListExpander from '../Expander.vue';
+import ItemColumn from './ItemColumn.vue';
+
+export default {
+  name: 'TaskListItem',
+  components: {
+    TaskListExpander,
+    ItemColumn
+  },
+  inject: ['root'],
+  props: {
+    task: Object
+  },
+  computed: {
+    columns() {
+      return this.root.state.options.taskList.columns;
+    }
+  }
+};
+</script>

package/src/components/components/bundle.js

@@ -0,0 +1,28 @@
+
+import Vue from 'vue';
+import { mergeDeep } from '../GanttElastic.vue';
+import GanttElasticStandalone from '../GanttElastic.standalone.vue';
+
+window.GanttElastic = {
+  component: GanttElasticStandalone,
+  mount(config) {
+    const ready = typeof config.ready === 'function' ? config.ready : () => { };
+    const cfg = mergeDeep({}, config);
+    if (typeof cfg.dynamicStyle === 'undefined') {
+      cfg.dynamicStyle = {};
+    }
+    const ganttElastic = { ...GanttElasticStandalone };
+    for (let prop in cfg) {
+      if (['el', 'ready'].includes(prop)) {
+        continue;
+      }
+      if (typeof ganttElastic[prop] !== 'undefined') {
+        ganttElastic[prop] = { ...ganttElastic[prop], ...cfg[prop] };
+        continue;
+      }
+      ganttElastic[prop] = cfg[prop];
+    }
+    return new Vue(ganttElastic).$on('gantt-elastic-ready', ready).$mount(cfg.el);
+  }
+};
+export default GanttElasticStandalone;

package/src/index.js

@@ -0,0 +1,13 @@
+
+
+import ganttChart from './components/GanttElastic.standalone.vue';
+export default {
+    install(app, options = {}) {
+        app.component('tg-ganttchart', ganttChart);
+     },
+};
+// if (typeof window !== 'undefined' && window.Vue) {
+//     window.Vue.use(TgList);
+//   }
+
+export { ganttChart };

package/vue.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const isBundleAnalyze = false; 
+module.exports = {
+  lintOnSave: false,
+  filenameHashing: false,
+  configureWebpack: {    
+    entry:'./src/index.js',
+    resolve: {
+      extensions: ['.js', '.vue'],
+      alias: {
+        'vue$': 'vue/dist/vue.esm.js',
+        '@': path.resolve(__dirname, 'src')
+      }
+    },
+    output: {
+      filename:(format)=>`index.${format}.js`,
+      path: path.resolve(__dirname, 'dist'),       
+     },
+    performance:{
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000
+    },
+    plugins: [
+      new Dotenv(),
+      ...isBundleAnalyze ? [ new BundleAnalyzerPlugin() ] : []
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: "javascript/auto",
+          use: [],
+        }
+      ] 
+    }   
+  },
+};
+