tg-ganttchart 0.0.8 → 0.0.9

package/src/components/Chart/Row/Epic.vue

@@ -1,131 +0,0 @@
-<template>
-  <g
-    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-epic-wrapper"
-    :style="{
-      ...root.style['chart-row-bar-wrapper'],
-      ...root.style['chart-row-epic-wrapper'],
-      ...task.style['chart-row-bar-wrapper']
-    }"
-  >
-    <foreignObject
-      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--epic"
-      :style="{
-        ...root.style['chart-expander'],
-        ...root.style['chart-expander--epic'],
-        ...task.style['chart-expander']
-      }"
-      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
-      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
-      :width="root.state.options.chart.expander.size"
-      :height="root.state.options.chart.expander.size"
-      v-if="displayExpander"
-    >
-      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
-    </foreignObject>
-    <svg
-      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-epic"
-      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-epic'], ...task.style['chart-row-bar'] }"
-      :x="task.x"
-      :y="task.y"
-      :width="task.width"
-      :height="task.height"
-      :viewBox="`0 0 ${task.width} ${task.height}`"
-      @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)"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clipPath :id="clipPathId">
-          <path :d="getPoints"></path>
-        </clipPath>
-      </defs>
-      <path
-        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-epic-polygon"
-        :style="{
-          ...root.style['chart-row-bar-polygon'],
-          ...root.style['chart-row-epic-polygon'],
-          ...task.style['base'],
-          ...task.style['chart-row-bar-polygon']
-        }"
-        :d="getPoints"
-      ></path>
-      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
-    </svg>
-    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
-  </g>
-</template>
-
-<script>
-import ChartText from '../Text.vue';
-import ProgressBar from '../ProgressBar.vue';
-import Expander from '../../Expander.vue';
-import taskMixin from './Task.mixin.js';
-export default {
-  name: 'Epic',
-  components: {
-    ChartText,
-    ProgressBar,
-    Expander
-  },
-  inject: ['root'],
-  props: ['task'],
-  mixins: [taskMixin],
-  data() {
-    return {};
-  },
-  computed: {
-    /**
-     * Get clip path id
-     *
-     * @returns {string}
-     */
-    clipPathId() {
-      return 'gantt-elastic__epic-clip-path-' + this.task.id;
-    },
-
-    /**
-     * Get points (same shape as project)
-     *
-     * @returns {string}
-     */
-    getPoints() {
-      const task = this.task;
-      const bottom = task.height - task.height / 4;
-      const corner = task.height / 6;
-      const smallCorner = task.height / 8;
-      return `M ${smallCorner},0
-                L ${task.width - smallCorner} 0
-                L ${task.width} ${smallCorner}
-                L ${task.width} ${bottom}
-                L ${task.width - corner} ${task.height}
-                L ${task.width - corner * 2} ${bottom}
-                L ${corner * 2} ${bottom}
-                L ${corner} ${task.height}
-                L 0 ${bottom}
-                L 0 ${smallCorner}
-                Z
-        `;
-    },
-
-    /**
-     * Should we display expander?
-     *
-     * @returns {boolean}
-     */
-    displayExpander() {
-      const expander = this.root.state.options.chart.expander;
-      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
-      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
-    }
-  }
-};
-</script>

package/src/components/Chart/Row/Milestone.vue

@@ -1,117 +0,0 @@
-
-<template>
-  <g
-    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper"
-    :style="{
-      ...root.style['chart-row-bar-wrapper'],
-      ...root.style['chart-row-milestone-wrapper'],
-      ...task.style['chart-row-bar-wrapper']
-    }"
-  >
-    <foreignObject
-      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone"
-      :style="{
-        ...root.style['chart-expander'],
-        ...root.style['chart-expander--milestone'],
-        ...task.style['chart-expander']
-      }"
-      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
-      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
-      :width="root.state.options.chart.expander.size"
-      :height="root.state.options.chart.expander.size"
-      v-if="displayExpander"
-    >
-      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
-    </foreignObject>
-    <svg
-      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-milestone"
-      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-milestone'], ...task.style['chart-row-bar'] }"
-      :x="task.x"
-      :y="task.y"
-      :width="task.width"
-      :height="task.height"
-      :viewBox="`0 0 ${task.width} ${task.height}`"
-      @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)"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clipPath :id="clipPathId">
-          <polygon :points="getPoints"></polygon>
-        </clipPath>
-      </defs>
-      <polygon
-        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon"
-        :style="{
-          ...root.style['chart-row-bar-polygon'],
-          ...root.style['chart-row-milestone-polygon'],
-          ...task.style['base'],
-          ...task.style['chart-row-bar-polygon']
-        }"
-        :points="getPoints"
-      ></polygon>
-      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
-    </svg>
-    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
-  </g>
-</template>
-
-<script>
-import ChartText from '../Text.vue';
-import ProgressBar from '../ProgressBar.vue';
-import Expander from '../../Expander.vue';
-import taskMixin from './Task.mixin.js';
-export default {
-  name: 'Milestone',
-  components: {
-    ChartText,
-    ProgressBar,
-    Expander
-  },
-  inject: ['root'],
-  props: ['task'],
-  mixins: [taskMixin],
-  data() {
-    return {};
-  },
-  computed: {
-    /**
-     * Get clip path id
-     *
-     * @returns {string}
-     */
-    clipPathId() {
-      return 'gantt-elastic__milestone-clip-path-' + this.task.id;
-    },
-
-    /**
-     * Get points
-     *
-     * @returns {string}
-     */
-    getPoints() {
-      const task = this.task;
-      const fifty = task.height / 2;
-      let offset = fifty;
-      if (task.width / 2 - offset < 0) {
-        offset = task.width / 2;
-      }
-      return `0,${fifty}
-        ${offset},0
-        ${task.width - offset},0
-        ${task.width},${fifty}
-        ${task.width - offset},${task.height}
-        ${offset},${task.height}`;
-    }
-  }
-};
-</script>

package/src/components/Chart/Row/Project.vue

@@ -1,132 +0,0 @@
-
-<template>
-  <g
-    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper"
-    :style="{
-      ...root.style['chart-row-bar-wrapper'],
-      ...root.style['chart-row-project-wrapper'],
-      ...task.style['chart-row-bar-wrapper']
-    }"
-  >
-    <foreignObject
-      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--project"
-      :style="{
-        ...root.style['chart-expander'],
-        ...root.style['chart-expander--project'],
-        ...task.style['chart-expander']
-      }"
-      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
-      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
-      :width="root.state.options.chart.expander.size"
-      :height="root.state.options.chart.expander.size"
-      v-if="displayExpander"
-    >
-      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
-    </foreignObject>
-    <svg
-      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-project"
-      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-project'], ...task.style['chart-row-bar'] }"
-      :x="task.x"
-      :y="task.y"
-      :width="task.width"
-      :height="task.height"
-      :viewBox="`0 0 ${task.width} ${task.height}`"
-      @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)"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clipPath :id="clipPathId">
-          <path :d="getPoints"></path>
-        </clipPath>
-      </defs>
-      <path
-        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-project-polygon"
-        :style="{
-          ...root.style['chart-row-bar-polygon'],
-          ...root.style['chart-row-project-polygon'],
-          ...task.style['base'],
-          ...task.style['chart-row-bar-polygon']
-        }"
-        :d="getPoints"
-      ></path>
-      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
-    </svg>
-    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
-  </g>
-</template>
-
-<script>
-import ChartText from '../Text.vue';
-import ProgressBar from '../ProgressBar.vue';
-import Expander from '../../Expander.vue';
-import taskMixin from './Task.mixin.js';
-export default {
-  name: 'Project',
-  components: {
-    ChartText,
-    ProgressBar,
-    Expander
-  },
-  inject: ['root'],
-  props: ['task'],
-  mixins: [taskMixin],
-  data() {
-    return {};
-  },
-  computed: {
-    /**
-     * Get clip path id
-     *
-     * @returns {string}
-     */
-    clipPathId() {
-      return 'gantt-elastic__project-clip-path-' + this.task.id;
-    },
-
-    /**
-     * Get points
-     *
-     * @returns {string}
-     */
-    getPoints() {
-      const task = this.task;
-      const bottom = task.height - task.height / 4;
-      const corner = task.height / 6;
-      const smallCorner = task.height / 8;
-      return `M ${smallCorner},0
-                L ${task.width - smallCorner} 0
-                L ${task.width} ${smallCorner}
-                L ${task.width} ${bottom}
-                L ${task.width - corner} ${task.height}
-                L ${task.width - corner * 2} ${bottom}
-                L ${corner * 2} ${bottom}
-                L ${corner} ${task.height}
-                L 0 ${bottom}
-                L 0 ${smallCorner}
-                Z
-        `;
-    },
-
-    /**
-     * Should we display expander?
-     *
-     * @returns {boolean}
-     */
-    displayExpander() {
-      const expander = this.root.state.options.chart.expander;
-      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
-      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
-    }
-  }
-};
-</script>

package/src/components/Chart/Row/Story.vue

@@ -1,127 +0,0 @@
-<template>
-  <g
-    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-story-wrapper"
-    :style="{
-      ...root.style['chart-row-bar-wrapper'],
-      ...root.style['chart-row-story-wrapper'],
-      ...task.style['chart-row-bar-wrapper']
-    }"
-  >
-    <foreignObject
-      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--story"
-      :style="{
-        ...root.style['chart-expander'],
-        ...root.style['chart-expander--story'],
-        ...task.style['chart-expander']
-      }"
-      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
-      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
-      :width="root.state.options.chart.expander.size"
-      :height="root.state.options.chart.expander.size"
-      v-if="displayExpander"
-    >
-      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
-    </foreignObject>
-    <svg
-      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-story"
-      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-story'], ...task.style['chart-row-bar'] }"
-      :x="task.x"
-      :y="task.y"
-      :width="task.width"
-      :height="task.height"
-      :viewBox="`0 0 ${task.width} ${task.height}`"
-      @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)"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clipPath :id="clipPathId">
-          <path :d="getPoints"></path>
-        </clipPath>
-      </defs>
-      <path
-        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-story-polygon"
-        :style="{
-          ...root.style['chart-row-bar-polygon'],
-          ...root.style['chart-row-story-polygon'],
-          ...task.style['base'],
-          ...task.style['chart-row-bar-polygon']
-        }"
-        :d="getPoints"
-      ></path>
-      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
-    </svg>
-    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
-  </g>
-</template>
-
-<script>
-import ChartText from '../Text.vue';
-import ProgressBar from '../ProgressBar.vue';
-import Expander from '../../Expander.vue';
-import taskMixin from './Task.mixin.js';
-export default {
-  name: 'Story',
-  components: {
-    ChartText,
-    ProgressBar,
-    Expander
-  },
-  inject: ['root'],
-  props: ['task'],
-  mixins: [taskMixin],
-  data() {
-    return {};
-  },
-  computed: {
-    /**
-     * Get clip path id
-     *
-     * @returns {string}
-     */
-    clipPathId() {
-      return 'gantt-elastic__story-clip-path-' + this.task.id;
-    },
-
-    /**
-     * Get points (rounded rectangle for stories)
-     *
-     * @returns {string}
-     */
-    getPoints() {
-      const task = this.task;
-      const corner = Math.min(task.height / 4, 8); // Rounded corners
-      return `M ${corner},0
-                L ${task.width - corner} 0
-                Q ${task.width} 0 ${task.width} ${corner}
-                L ${task.width} ${task.height - corner}
-                Q ${task.width} ${task.height} ${task.width - corner} ${task.height}
-                L ${corner} ${task.height}
-                Q 0 ${task.height} 0 ${task.height - corner}
-                L 0 ${corner}
-                Q 0 0 ${corner} 0
-                Z`;
-    },
-
-    /**
-     * Should we display expander?
-     *
-     * @returns {boolean}
-     */
-    displayExpander() {
-      const expander = this.root.state.options.chart.expander;
-      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
-      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
-    }
-  }
-};
-</script>

package/src/components/Chart/Row/Subtask.vue

@@ -1,117 +0,0 @@
-<template>
-  <g
-    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-subtask-wrapper"
-    :style="{
-      ...root.style['chart-row-bar-wrapper'],
-      ...root.style['chart-row-subtask-wrapper'],
-      ...task.style['chart-row-bar-wrapper']
-    }"
-  >
-    <foreignObject
-      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--subtask"
-      :style="{
-        ...root.style['chart-expander'],
-        ...root.style['chart-expander--subtask'],
-        ...task.style['chart-expander']
-      }"
-      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
-      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
-      :width="root.state.options.chart.expander.size"
-      :height="root.state.options.chart.expander.size"
-      v-if="displayExpander"
-    >
-      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
-    </foreignObject>
-    <svg
-      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-subtask"
-      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-subtask'], ...task.style['chart-row-bar'] }"
-      :x="task.x"
-      :y="task.y"
-      :width="task.width"
-      :height="task.height"
-      :viewBox="`0 0 ${task.width} ${task.height}`"
-      @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)"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <clipPath :id="clipPathId">
-          <polygon :points="getPoints"></polygon>
-        </clipPath>
-      </defs>
-      <polygon
-        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-subtask-polygon"
-        :style="{
-          ...root.style['chart-row-bar-polygon'],
-          ...root.style['chart-row-subtask-polygon'],
-          ...task.style['base'],
-          ...task.style['chart-row-bar-polygon']
-        }"
-        :points="getPoints"
-      ></polygon>
-      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
-    </svg>
-    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
-  </g>
-</template>
-
-<script>
-import ChartText from '../Text.vue';
-import ProgressBar from '../ProgressBar.vue';
-import Expander from '../../Expander.vue';
-import taskMixin from './Task.mixin.js';
-export default {
-  name: 'Subtask',
-  components: {
-    ChartText,
-    ProgressBar,
-    Expander
-  },
-  inject: ['root'],
-  props: ['task'],
-  mixins: [taskMixin],
-  data() {
-    return {};
-  },
-  computed: {
-    /**
-     * Get clip path id
-     *
-     * @returns {string}
-     */
-    clipPathId() {
-      return 'gantt-elastic__subtask-clip-path-' + this.task.id;
-    },
-
-    /**
-     * Get points (simple rectangle for subtasks)
-     *
-     * @returns {string}
-     */
-    getPoints() {
-      const task = this.task;
-      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
-    },
-
-    /**
-     * Should we display expander?
-     *
-     * @returns {boolean}
-     */
-    displayExpander() {
-      const expander = this.root.state.options.chart.expander;
-      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
-      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
-    }
-  }
-};
-</script>

package/src/components/Chart/Row/Task.mixin.js

@@ -1,47 +0,0 @@
-
-export default {
-  computed: {
-    /**
-     * Get view box
-     *
-     * @returns {string}
-     */
-    getViewBox() {
-      const task = this.task;
-      return `0 0 ${task.width} ${task.height}`;
-    },
-
-    /**
-     * Get group transform
-     *
-     * @returns {string}
-     */
-    getGroupTransform() {
-      return `translate(${this.task.x} ${this.task.y})`;
-    },
-
-    /**
-     * Should we display expander?
-     *
-     * @returns {boolean}
-     */
-    displayExpander() {
-      const expander = this.root.state.options.chart.expander;
-      const hasChildren = this.task.allChildren && this.task.allChildren.length > 0;
-      return (expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display)) && hasChildren;
-    }
-  },
-  methods: {
-    /**
-     * Emit event
-     *
-     * @param {string} eventName
-     * @param {Event} event
-     */
-    emitEvent(eventName, event) {
-      if (!this.root.state.options.scroll.scrolling) {
-        this.root.$emit(`chart-${this.task.type}-${eventName}`, { event, data: this.task });
-      }
-    }
-  }
-};