tg-ganttchart 0.0.5 → 0.0.7

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

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

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

@@ -1,264 +0,0 @@
-<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() {
-    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>