tg-ganttchart 0.0.8 → 0.0.10

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

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

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

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

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