How to use GSTC.api from vue component?

[fancydev18]

Hi,

The vue example in README works great. More advanced usage eg from https://neuronet.io/gantt-schedule-timeline-calendar/scheduler.html requires GSTC.api

However, this is undefined when using this vue component, which has only

name: "GSTC"
props: {config: {…}}
mounted: ƒ mounted()
destroyed: ƒ destroyed()
render: ƒ ()
staticRenderFns: []
_compiled: true
beforeCreate: [ƒ]
beforeDestroy: [ƒ]
__file: "node_modules/vue-gantt-schedule-timeline-calendar/src/components/GSTC.vue"
_Ctor: {0: ƒ}

How to access the "api" method, similar to https://github.com/neuronetio/gantt-schedule-timeline-calendar ?

Thanks

[giovannybm]

You are importing a vue component but api are in the gantt-schedule-timeline-calendar repository. may be you can try import main repository whit other name also:

import * as Gantt from "gantt-schedule-timeline-calendar"
console.log(Gantt.api)

[fancydev18]

That works, thanks. Note, I had to use this syntax

import GSTC from 'gantt-schedule-timeline-calendar' // this works
// import * as Gantt from "gantt-schedule-timeline-calendar" doesn't work

I thought it has to be the same instance for API to work properly. So now I have 2 instances, for the the actual vue component, and another one just for the API. If API isn't linked to the instance rows/chart data, that's ok with me. Please close this issue if so.

Thanks for your help!

[dbalgley]

Does this method work for extracting the state such as in the line let GSTCState = (window.state = GSTC.api.stateFromConfig(config)); So that later you can apply an update to the state? Or is it completely detached from the data and configuration of the "real" component?

Semi-related (and I can open up a new issue to ask if needed) but is there documentation somewhere about adding tasks to the chart after the component has been created and mounted? As far as I can tell the component isn't watching the config (which is where I tried to add the tasks when creating the component but after creation it doesnt work). Is the API and State required for such an action?

[mushgev]

+1 we can access state but not gstc instance.

[mushgev]

As workaround copy this code:

limitScrollLeft(
    totalViewDurationPx: number,
    chartWidth: number,
    scrollLeft: number
  ) {
    const width = totalViewDurationPx - chartWidth;
    if (scrollLeft < 0) {
      scrollLeft = 0;
    } else if (scrollLeft > width) {
      scrollLeft = width;
    }
    return Math.round(scrollLeft);
  }

  scrollToTime(date: moment.Moment) {
    const time = this.state.get("_internal.chart.time");
    this.state.update("config.scroll", (scroll: any) => {
      const chartWidth = this.state.get("_internal.chart.dimensions.width");
      const halfTime = (chartWidth / 2) * time.timePerPixel;
      const leftGlobal = date.valueOf() - halfTime - time.finalFrom;
      scroll.left = this.limitScrollLeft(
        time.totalViewDurationPx,
        chartWidth,
        leftGlobal / time.timePerPixel
      );
      return scroll;
    });
  }