tg-ganttchart 0.0.1

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

@@ -0,0 +1,107 @@
+
+<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/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/components/Expander.vue

@@ -0,0 +1,126 @@
+
+<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"
+    >
+      <rect
+        :class="getClassPrefix() + '-border'"
+        :style="{ ...root.style[getClassPrefix(false) + '-border'], ...borderStyle }"
+        :x="border"
+        :y="border"
+        :width="options.size - border * 2"
+        :height="options.size - border * 2"
+        rx="2"
+        ry="2"
+      ></rect>
+      <line
+        :class="getClassPrefix() + '-line'"
+        :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
+        v-if="allChildren.length"
+        :x1="lineOffset"
+        :y1="options.size / 2"
+        :x2="options.size - lineOffset"
+        :y2="options.size / 2"
+      ></line>
+      <line
+        :class="getClassPrefix() + '-line'"
+        :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
+        v-if="collapsed"
+        :x1="options.size / 2"
+        :y1="lineOffset"
+        :x2="options.size / 2"
+        :y2="options.size - lineOffset"
+      ></line>
+    </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;
+      });
+    }
+  }
+};
+</script>

package/src/components/components/Header/Header.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="gantt-elastic__header" :style="{ ...style['header'] }">
+    <div class="gantt-elastic__header-title" :style="{ ...style['header-title'] }">
+      <div class="gantt-elastic__header-title--text" :style="{ ...style['header-title--text'] }"
+        v-if="!opts.title.html">
+        {{ opts.title.label }}
+      </div>
+      <div class="gantt-elastic__header-title--html" :style="{ ...style['header-title--html'] }" v-if="opts.title.html"
+        v-html="opts.title.label"></div>
+    </div>
+    <div class="gantt-elastic__header-options" :style="{ ...style['header-options'] }">
+      <button class="gantt-elastic__header-btn-recenter" :style="{ ...style['header-btn-recenter'] }"
+        @click.prevent="recenterPosition">
+        {{ opts.locale.Now }}
+      </button>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["X-Scale"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="scale" :max="24" :min="2"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Y-Scale"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="height" :max="100" :min="7"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Before/After"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="scope" :max="31" :min="0"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-label" :style="{ ...style['header-label'] }">
+        {{ opts.locale["Task list width"] }}
+        <div class="gantt-elastic__header-slider-wrapper" :style="{ ...style['header-slider-wrapper'] }">
+          <vue-slider class="gantt-elastic__header-slider" tooltip="none" :style="{ ...style['header-slider'] }"
+            :process-style="{ ...style['header-slider--process'] }"
+            :slider-style="{ ...style['header-slider--slider'] }" v-model="divider" :max="100" :min="0"
+            width="100px"></vue-slider>
+        </div>
+      </label>
+      <label class="gantt-elastic__header-task-list-switch--wrapper"
+        :style="{ ...style['header-task-list-switch--label'] }">
+        <switches class="gantt-elastic__header-task-list-switch" :style="{ ...style['header-task-list-switch'] }"
+          v-model="root.state.options.taskList.display"></switches>
+        {{ opts.locale["Display task list"] }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";
+import Switches from "vue-switches";
+
+const defaultStyle = {
+  header: {
+    margin: "0px auto",
+    background: "#f3f5f747",
+    padding: "10px",
+    overflow: "hidden",
+    clear: "both",
+    display: "flex",
+    "justify-content": "space-between"
+  },
+  "header-title": { float: "left" },
+  "header-options": { float: "right" },
+  "header-title--text": {
+    "font-size": "20px",
+    "vertical-align": "middle",
+    "font-weight": "400",
+    "line-height": "35px",
+    "padding-left": "22px",
+    "letter-spacing": "1px"
+  },
+  "header-title--html": {
+    "font-size": "20px",
+    "vertical-align": "middle",
+    "font-weight": "400",
+    "line-height": "35px",
+    "padding-left": "22px",
+    "letter-spacing": "1px"
+  },
+  "header-btn-recenter": {
+    background: "#95A5A6",
+    border: "none",
+    outline: "none",
+    cursor: "pointer",
+    color: "white",
+    "border-radius": "3px",
+    "margin-right": "27px",
+    "font-size": "16px",
+    padding: "8px 12px"
+  },
+  "header-slider": {
+    "box-sizing": "content-box"
+  },
+  "header-slider-wrapper": {
+    display: "inline-block",
+    "vertical-align": "middle"
+  },
+  "header-slider--slider": { "box-sizing": "content-box" },
+  "header-slider--process": { "box-sizing": "content-box" },
+  "header-task-list-switch--label": { "box-sizing": "content-box" },
+  "header-task-list-switch": {
+    margin: "0px 15px",
+    "vertical-align": "middle"
+  },
+  "header-label": {}
+};
+const defaultOptions = {
+  title: {
+    label: "tg-gantt-chart",
+    html: false
+  },
+  locale: {
+    Now: "Now",
+    "X-Scale": "Zoom-X",
+    "Y-Scale": "Zoom-Y",
+    "Task list width": "Task list",
+    "Before/After": "Expand",
+    "Display task list": "Show task list"
+  }
+};
+export default {
+  name: "GanttHeader",
+  components: {
+    vueSlider,
+    Switches
+  },
+  props: ["options", "dynamicStyle"],
+  inject: ["root"],
+  data() {
+    return {
+      scaleTimeoutId: null,
+      firstScale: false,
+      localScale: 0,
+      localHeight: 0,
+      localBefore: 0,
+      localPercent: 0,
+      sliderOptions: {
+        xScale: {
+          value: 0
+        }
+      },
+      style: {},
+      opts: {}
+    };
+  },
+  created() {
+    debugger; // eslint-disable-line no-debugger
+    console.log("this.localScale", this.root);
+    this.localScale = this.root.state.options?.times?.timeZoom;
+    this.localHeight = this.root.state.options.row.height;
+    this.localBefore = this.root.state.options.scope.before;
+    this.localPercent = this.root.state.options.taskList.percent;
+    this.sliderOptions.xScale.value = this.root.state.options.times.timeZoom;
+    this.style = this.root.mergeDeep({}, defaultStyle, this.dynamicStyle);
+    this.opts = this.root.mergeDeep({}, defaultOptions, this.options);
+  },
+  methods: {
+    getImage() {
+      this.root.getImage("image/png").then(imgB64 => {
+        const link = document.createElement("a");
+        link.href = imgB64;
+        link.download = "gantt-elastic.png";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+    },
+    recenterPosition() {
+      this.root.$emit("recenterPosition");
+    },
+    setScale(value) {
+      if (this.scaleTimeoutId !== null) {
+        clearTimeout(this.scaleTimeoutId);
+        this.scaleTimeoutId = null;
+      }
+      // debouncing
+      if (this.firstScale) {
+        this.scaleTimeoutId = setTimeout(() => {
+          this.root.$emit("times-timeZoom-change", value);
+          this.scaleTimeoutId = null;
+        }, 50);
+      } else {
+        this.root.$emit("times-timeZoom-change", value);
+        this.firstScale = true;
+      }
+    }
+  },
+  computed: {
+    /**
+     * If there is a component slot specified for header
+     * @returns {bool}
+     */
+    beforeOptionsIsComponent() {
+      const headerSlot = this.options.slots.header;
+      if (
+        typeof headerSlot.beforeOptions === "object" &&
+        !Array.isArray(headerSlot.beforeOptions)
+      ) {
+        return true;
+      }
+      return false;
+    },
+    /**
+     * If there is a slot with beforeOptions html content
+     * @returns {bool}
+     */
+    beforeOptionsIsHtml() {
+      if (typeof this.options.slots.header.beforeOptions === "string") {
+        return true;
+      }
+      return false;
+    },
+    scale: {
+      get() {
+        return this.localScale;
+      },
+      set(value) {
+        this.localScale = Number(value);
+        this.setScale(this.localScale);
+      }
+    },
+    height: {
+      get() {
+        return this.localHeight;
+      },
+      set(value) {
+        this.localHeight = Number(value);
+        this.root.$emit("row-height-change", Number(value));
+      }
+    },
+    scope: {
+      get() {
+        return this.localBefore;
+      },
+      set(value) {
+        this.localBefore = Number(value);
+        this.root.$emit("scope-change", Number(value));
+      }
+    },
+    divider: {
+      get() {
+        return this.localPercent;
+      },
+      set(value) {
+        this.localPercent = Number(value);
+        this.root.$emit("taskList-width-change", Number(value));
+      }
+    }
+  }
+};
+</script>