tg-ganttchart 0.0.7 → 0.0.8

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

@@ -0,0 +1,82 @@
+<template>
+  <g class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-task-wrapper" :style="{
+    ...root.style['chart-row-bar-wrapper'],
+    ...root.style['chart-row-task-wrapper'],
+    ...task.style['chart-row-bar-wrapper']
+  }">
+    <foreignObject class="gantt-elastic__chart-expander gantt-elastic__chart-expander--task" :style="{
+      ...root.style['chart-expander'],
+      ...root.style['chart-expander--task'],
+      ...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-task"
+      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-task'], ...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-task-polygon" :style="{
+        ...root.style['chart-row-bar-polygon'],
+        ...root.style['chart-row-task-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: 'Task',
+  components: {
+    ChartText,
+    ProgressBar,
+    Expander
+  },
+  inject: ['root'],
+  props: ['task'],
+  mixins: [taskMixin],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get clip path id
+     *
+     * @returns {string}
+     */
+    clipPathId() {
+      return 'gantt-elastic__task-clip-path-' + this.task.id;
+    },
+
+    /**
+     * Get points
+     *
+     * @returns {string}
+     */
+    getPoints() {
+      const task = this.task;
+      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    }
+  }
+};
+</script>

package/src/components/Chart/Text.vue

@@ -0,0 +1,105 @@
+
+<template>
+  <svg
+    class="gantt-elastic__chart-row-text-wrapper"
+    :style="{ ...root.style['chart-row-text-wrapper'] }"
+    :x="task.x + task.width + root.state.options.chart.text.offset"
+    :y="task.y - root.state.options.chart.grid.horizontal.gap"
+    :width="getWidth"
+    :height="getHeight"
+  >
+    <foreignObject x="0" y="0" width="100%" :height="getHeight">
+      <div
+        xmlns="http://www.w3.org/1999/xhtml"
+        class="gantt-elastic__chart-row-text"
+        :style="{ ...root.style['chart-row-text'] }"
+      >
+        <div
+          class="gantt-elastic__chart-row-text-content gantt-elastic__chart-row-text-content--text"
+          :style="{
+            ...root.style['chart-row-text-content'],
+            ...root.style['chart-row-text-content--text'],
+            ...contentStyle
+          }"
+          v-if="!html"
+        >
+          <div>{{ task.label }}</div>
+        </div>
+        <div
+          class="gantt-elastic__chart-row-text-content gantt-elastic__chart-row-text-content--html"
+          :style="{
+            ...root.style['chart-row-text-content'],
+            ...root.style['chart-row-text-content--html'],
+            ...contentStyle
+          }"
+          v-if="html"
+          v-html="task.label"
+        ></div>
+      </div>
+    </foreignObject>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChartText',
+  inject: ['root'],
+  props: ['task'],
+  data() {
+    return {};
+  },
+  computed: {
+    /**
+     * Get width
+     *
+     * @returns {number}
+     */
+    getWidth() {
+      const textStyle = this.root.style['chart-row-text'];
+      const font = `${textStyle['font-weight']} ${textStyle['font-size']} ${textStyle['font-family']}`;
+      this.setFont(font); // Set font in a method
+      const textWidth = this.root.state.ctx.measureText(this.task.label).width;
+      return textWidth + this.root.state.options.chart.text.xPadding * 2;
+    },
+
+    /**
+     * Get height
+     *
+     * @returns {number}
+     */
+    getHeight() {
+      return this.task.height + this.root.state.options.chart.grid.horizontal.gap * 2;
+    },
+
+    /**
+     * Get content style
+     *
+     * @returns {object}
+     */
+    contentStyle() {
+      return { height: '100%', 'line-height': this.getHeight + 'px' };
+    },
+
+    /**
+     * Should we render text as html?
+     *
+     * @returns {boolean}
+     */
+    html() {
+      const cols = this.root.state.options.taskList.columns;
+      for (let i = 0, len = cols.length; i < len; i++) {
+        const col = cols[i];
+        if (col.value === 'label' && typeof col.html !== 'undefined' && col.html) {
+          return true;
+        }
+      }
+      return false;
+    }
+  },
+  methods: {
+    setFont(font) {
+      this.root.state.ctx.font = font; // Set font in a method
+    }
+  }
+};
+</script>

package/src/components/Expander.vue

@@ -0,0 +1,114 @@
+
+<template>
+  <div :class="getClassPrefix() + '-wrapper'" :style="{ ...root.style[getClassPrefix(false) + '-wrapper'], ...style }">
+    <svg
+      :class="getClassPrefix() + '-content'"
+      :style="{ ...root.style[getClassPrefix(false) + '-content'] }"
+      :width="options.size"
+      :height="options.size"
+      v-if="allChildren.length"
+      @click="toggle"
+      viewBox="0 0 16 16"
+    >
+      <!-- Simple arrow icon for expand/collapse -->
+      <path
+        :class="getClassPrefix() + '-arrow'"
+        :style="{ ...root.style[getClassPrefix(false) + '-arrow'] }"
+        :d="collapsed ? 'M6 4 L10 8 L6 12' : 'M4 6 L8 10 L12 6'"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Expander',
+  inject: ['root'],
+  props: ['tasks', 'options', 'type'],
+  data() {
+    const border = 0.5;
+    return {
+      border,
+      borderStyle: {
+        'stroke-width': border
+      },
+      lineOffset: 5
+    };
+  },
+  computed: {
+    style() {
+      if (this.type !== 'taskList') {
+        return {};
+      }
+      const margin = this.root.state.options.taskList.expander.margin;
+      const padding = this.tasks[0].parents.length * this.root.state.options.taskList.expander.padding;
+      return {
+        'padding-left': padding + margin + 'px',
+        margin: 'auto 0'
+      };
+    },
+    /**
+     * Get all tasks
+     *
+     * @returns {array}
+     */
+    allChildren() {
+      const children = [];
+      this.tasks.forEach(task => {
+        task.allChildren.forEach(childId => {
+          children.push(childId);
+        });
+      });
+      return children;
+    },
+    /**
+     * Is current expander collapsed?
+     *
+     * @returns {boolean}
+     */
+    collapsed() {
+      if (this.tasks.length === 0) {
+        return false;
+      }
+      let collapsed = 0;
+      for (let i = 0, len = this.tasks.length; i < len; i++) {
+        if (this.tasks[i].collapsed) {
+          collapsed++;
+        }
+      }
+      return collapsed === this.tasks.length;
+    }
+  },
+  methods: {
+    /**
+     * Get specific class prefix
+     *
+     * @returns {string}
+     */
+    getClassPrefix(full = true) {
+      return `${full ? 'gantt-elastic__' : ''}${this.options.type}-expander`;
+    },
+    /**
+     * Toggle expander
+     */
+    toggle() {
+      if (this.tasks.length === 0) {
+        return;
+      }
+      const collapsed = !this.collapsed;
+      this.tasks.forEach(task => {
+        task.collapsed = collapsed;
+      });
+      
+      // Force reactivity update
+      this.$forceUpdate();
+      this.root.$forceUpdate();
+    }
+  }
+};
+</script>

package/src/components/GanttElastic.standalone.vue

@@ -0,0 +1,48 @@
+<template>
+  <gantt-elastic :tasks="tasks" :options="options" :dynamicStyle="dynamicStyle">
+    <component v-if="components.header" :is="components.header" slot="header"></component>
+    <component v-if="components.footer" :is="components.footer" slot="footer"></component>
+  </gantt-elastic>
+</template>
+
+<script>
+import GanttElastic from './GanttElastic.vue';
+
+export default {
+  name: 'GanttElasticStandalone',
+  components: {
+    'gantt-elastic': GanttElastic,
+  },
+  props: {
+    // Props to receive from parent
+    tasks: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    dynamicStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    header: {
+      type: Object,
+      default: () => ({}),
+    },
+    footer: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      components: {
+        header: this.header,
+        footer: this.footer,
+      },
+    };
+  },
+};
+</script>