tg-ganttchart 0.0.1 → 0.0.3

package/src/components/components/MainView.vue

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

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

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

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

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

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

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

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

@@ -1,42 +0,0 @@
-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: [],
-        }
-      ] 
-    }   
-  },
-};
-