@/store#useStore TypeScript Examples

onAdd() {
		const digital = !this.options.showTimeOfDay && !this.options.showWeather && this.options.showDigitalClock,
			worldState = useStore().state.currentWorldState;

		this._container = DomUtil.create('div', 'clock' + (digital ? ' clock--digital' : ''));
		this._sun = DomUtil.create('div', 'clock__sun', this._container);
		this._moon = DomUtil.create('div', 'clock__moon', this._container);

		this._sun.style.transform = 'translate(-150px, -150px)';
		this._moon.style.transform = 'translate(-150px, -150px)';

		this._sun!.innerHTML = `
		<svg class="svg-icon" aria-hidden="true">
	  		<use xlink:href="#icon--clock_sun" />
		</svg>`;
		this._moon!.innerHTML = `
		<svg class="svg-icon" aria-hidden="true">
	  		<use xlink:href="#icon--clock_moon" />
		</svg>`;

		if (this.options.showDigitalClock) {
			this._clock = DomUtil.create('div', 'clock__time', this._container)
		}

		this._unwatchHandler = watch(worldState, (newValue) => {
			this._update(newValue);
		}, { deep: true });

		return this._container;
	}

useParamObject = () => {
  const store = useStore();
  const { GtParam } = store;

  return {
    GtParam,
    oneDayWidth: computed(() => {
      const size = GtParam.ganttOptions.columnSize ?? 'normal';
      switch (size) {
        case 'small':
          if (GtParam.headerUnit === 'week') return 7;
          if (GtParam.headerUnit === 'month') return 4;
          return 15;
        case 'large':
          if (GtParam.headerUnit === 'week') return 30;
          if (GtParam.headerUnit === 'month') return 15;
          return 60;
        case 'normal':
        default:
          if (GtParam.headerUnit === 'week') return 15;
          if (GtParam.headerUnit === 'month') return 8;
          return 30;
      }
    })
  };
}

export function useSetGanttHeader() {
  const { GtParam, oneDayWidth } = useParamObject();
  const { GtData } = useData();

  const store = useStore();

  function setHeaders() {
    const start = GtData.start as Date;
    const end = GtData.end as Date;

    let tmpEnd = end as Date | string | number;
    const d =
      getDateInterval(start, tmpEnd) / getMillisecond(GtParam.headerUnit);

    if (d * oneDayWidth.value < store.initGanttWidth.value) {
      const offset =
        (store.initGanttWidth.value - d * oneDayWidth.value) /
        oneDayWidth.value;
      tmpEnd = getDateOffset(
        tmpEnd,
        offset * getMillisecond(GtParam.headerUnit)
      );
    }

    GtParam.setGanttHeaders(start, tmpEnd);
  }

  return {
    initGanttWidth: store.initGanttWidth,
    setHeaders
  };
}

clipboardError = () => (e: Error) => {
	notify({ type: 'error', text: useStore().state.messages.copyToClipboardError });
	console.error('Error copying to clipboard', e);
}

clipboardSuccess = () => () => notify(useStore().state.messages.copyToClipboardSuccess)

handlePendingUpdates = async () => {
	const store = useStore(),
		updates = await store.dispatch(ActionTypes.POP_MARKER_UPDATES, 10);

	for(const update of updates) {
		updateHandlers.forEach(callback => callback(update));

		if(setUpdateHandlers[update.set]) {
			setUpdateHandlers[update.set].forEach(callback => callback(update));
		}
	}

	if(pendingUpdates.value) {
		// eslint-disable-next-line no-unused-vars
		updateFrame = requestAnimationFrame(() => handlePendingUpdates());
	} else {
		updateFrame = 0;
	}
}

startUpdateHandling = () => {
	const store = useStore();

	pendingUpdates = computed(() => store.state.pendingMarkerUpdates.length);

	watch(pendingUpdates, (newValue, oldValue) => {
		if(newValue && newValue > 0 && oldValue === 0 && !updateFrame) {
			updateFrame = requestAnimationFrame(() => handlePendingUpdates());
		}
	});
}

tickPlayerImageQueue = () => {
	if (playerImagesLoading.size > 8 || !playerImageQueue.length) {
		return;
	}

	const image = playerImageQueue.pop() as PlayerImageQueueEntry;

	playerImagesLoading.add(image.cacheKey);
	image.image.src = useStore().state.components.players.imageUrl(image);

	tickPlayerImageQueue();
}

loadConfig = (config: LiveAtlasGlobalConfig): Map<string, LiveAtlasServerDefinition> => {
	if (!config) {
		throw new ConfigurationError(`No configuration found.\nCheck for any syntax errors in your configuration in index.html. Your browser console may contain additional information.`);
	}

	if (config.version !== expectedConfigVersion) {
		throw new ConfigurationError(`Configuration version mismatch.\nUse a fresh copy of index.html from your current LiveAtlas version (${useStore().state.version}) and reapply any customisations.`);
	}

	if (typeof config.servers !== 'undefined') {
		return loadLiveAtlasConfig(config.servers);
	}

	return loadDefaultConfig(window.config?.url || null);
}

private static buildServerConfig(response: any): LiveAtlasServerConfig {
		return {
			title: useStore().state.initialTitle,

			//Not used by overviewer
			expandUI: false,
			defaultZoom: 0, //Defined per map
			defaultMap: undefined,
			defaultWorld: undefined,
			followMap: undefined,
			followZoom: undefined,
		};
	}

constructor(map: Map) {
		const showControl = computed(() => useStore().state.components.layerControl);
		this.map = map;
		this.layerControl = new LiveAtlasLayerControl({}, {},{
			position: 'topleft',
		});

		if(showControl.value) {
			this.map.addControl(this.layerControl);
		}

		watch(showControl, (show) => {
			if(show) {
				this.map.addControl(this.layerControl);
			} else {
				this.map.removeControl(this.layerControl);
			}
		})
	}

onAdd(map: Map) {
		this._loadingIndicator.title = useStore().state.messages.loadingTitle;
		this._loadingIndicator.hidden = true;
		this._loadingIndicator.innerHTML = `
		<svg class="svg-icon">
		  <use xlink:href="#icon--loading" />
		</svg>`;

		this._addLayerListeners(map);
		this._addMapListeners(map);

		return this._loadingIndicator;
	}

onAdd() {
		const store = useStore(),
			linkButton = DomUtil.create('button',
				'leaflet-control-button leaflet-control-link') as HTMLButtonElement,
			copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess),
			copyErrorMessage = computed(() => store.state.messages.copyToClipboardError);

		linkButton.type = 'button';
		linkButton.title = store.state.messages.linkTitle;
		linkButton.innerHTML = `
		<svg class="svg-icon" aria-hidden="true">
		  <use xlink:href="#icon--link" />
		</svg>`;

		linkButton.addEventListener('click', e => {
			e.preventDefault();
			toClipboard(window.location.href.split("#")[0] + store.getters.url).then(() => {
				notify(copySuccessMessage.value);
			}).catch((e) => {
				notify({ type: 'error', text: copyErrorMessage.value });
				console.error('Error copying to clipboard', e);
			});

		});

		return linkButton;
	}

onAdd() {
		const store = useStore(),
			chatButton = DomUtil.create('button',
				'leaflet-control-bottom leaflet-control-button leaflet-control-chat') as HTMLButtonElement;

		chatButton.type = 'button';
		chatButton.title = store.state.messages.chatTitle;
		chatButton.innerHTML = `
		<svg class="svg-icon">
		  <use xlink:href="#icon--chat" />
		</svg>`;

		chatButton.addEventListener('click', e => {
			store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'chat');
			e.stopPropagation();
			e.preventDefault();
		});

		//Open chat on ArrowRight from button
		DomEvent.on(chatButton,'keydown', (e: Event) => {
			if((e as KeyboardEvent).key === 'ArrowRight') {
				store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'chat', state: true});
			}
		});

		watch(store.state.ui.visibleElements, (newValue) => {
			chatButton.setAttribute('aria-expanded', newValue.has('chat').toString());
		});

		return chatButton;
	}

protected readonly store = useStore();

private readonly _store: Store = useStore();

onAdd(map: Map) {
		const imageUrl = computed(() => useStore().state.components.players.imageUrl);

		this._playerUnwatch = watch(this._player, () => this._PlayerIcon.update(), {deep: true});
		this._imageUrlUnwatch = watch(imageUrl, () => nextTick(() => this._PlayerIcon.updateImage()));

		return super.onAdd(map);
	}

private readonly store = useStore();

store = useStore()

export function useInitData(
  data: Ref<Array<any>>,
  options: ComputedRef<DataOptions>
) {
  const store = useStore();
  const { GtData } = store;

  const { setHeaders } = useSetGanttHeader();
  const { IFClickRow } = useRootEmit();

  // 处理数据
  GtData.initData(data.value, options.value);

  const allData = computed(() => GtData.flatData as Row[]);

  // 监听数据变化
  watch(
    () => data,
    val => {
      let item = null as Row | null;

      // 先判断选中的内容
      const select = GtData.selected.index;
      if (select > -1) item = allData.value[select];

      GtData.update(val.value, item, options.value);
      setHeaders();

      // 数据发生变化，如果 selectIndex 变为 -1，表示数据已经被删除，选择的行内容需要抛出清空
      if (select > -1 && GtData.selected.index === -1) {
        IFClickRow(undefined);
      }
    },
    { deep: true }
  );

  return {
    allData
  };
}

export function useGetRootEmit() {
  const store = useStore();
  return store.rootEmit;
}

export function useInitGanttRef() {
  const store = useStore();
  return { ganttRef: store.ganttRef };
}

store = useStore()

export function useInitRootRef() {
  const store = useStore();
  return { rootRef: store.rootRef };
}

export function useInitTableRef() {
  const store = useStore();
  return { tableRef: store.tableRef };
}

/**
 * 左侧表格调整列宽方法
 */
export function useResizeTableColumn() {
  const { GtParam } = useParam();
  const { GtData } = useData();
  const { rootRef } = useRootRef();
  const store = useStore();

  const rootClientWidth = computed(() => rootRef.value?.clientWidth || 0);

  function onHiddenColumnSliderLine() {
    store.columnSliderLineVisible.value = false;
    store.columnDefaultLeft.value = -1;
  }

  function onMoveColumnSliderLine(offset: number) {
    if (store.columnSliderLineVisible.value === false) {
      store.columnSliderLineVisible.value = true;
    }

    if (store.columnDefaultLeft.value === -1) {
      store.columnDefaultLeft.value = rootRef.value?.offsetLeft as number;
    }

    store.columnSliderLineLeft.value = offset - store.columnDefaultLeft.value;
  }

  /**
   * 处理整个表格的右侧拉伸线
   */
  function onResizeTableWidth(e: MouseEvent) {
    let offset = 0;
    const srcX = e.pageX;
    const w = GtParam.tableHeaders[GtParam.tableHeaders.length - 1].width;

    document.onmousemove = moveEvent => {
      let targetX = moveEvent.pageX;
      // 如果鼠标离从左侧离开浏览器, 那么鼠标的位置停留在浏览器最左侧的位置, 也就是targetX = 0.
      if (targetX < 0) {
        targetX = 0;
      }

      // 判断最大值，最大总宽度要给甘特留出一定空间
      const space = 100;
      const originAllWidth = GtParam.tableHeaders.reduce(
        (res, head) => res + head.width,
        0
      );
      const diffWidth = targetX - srcX;
      if (
        originAllWidth + diffWidth >
        (rootRef.value?.clientWidth as number) - space
      ) {
        return;
      }

      // 判断表格宽度的最小值
      if (w + targetX - srcX > Variables.size.minTableColumnWidth) {
        // 赋差值
        offset = targetX - srcX;
        onMoveColumnSliderLine(targetX);
      }
    };

    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
      const tmpW = GtParam.tableHeaders[GtParam.tableHeaders.length - 1].width;
      GtParam.tableHeaders[GtParam.tableHeaders.length - 1].setWidth(
        tmpW + offset
      );
      onHiddenColumnSliderLine();
    };
  }

  function onResizeColumnWidth(e: MouseEvent, item: TableHeader) {
    let offset = 0;
    const srcX = e.pageX;

    document.onmousemove = moveEvent => {
      let targetX = moveEvent.pageX;
      // 如果鼠标离从左侧离开浏览器, 那么鼠标的位置停留在浏览器最左侧的位置, 也就是targetX = 0.
      if (targetX < 0) {
        targetX = 0;
      }

      // 判断表格宽度的最小值
      let minWidth = Variables.size.minTableColumnWidth;
      if (item.key === 0) {
        let w = 0;
        // 留出层级的宽度
        w += GtParam.expandWidth * GtData.hierarchy;

        // 需要留出层级和 checkbox 的宽度
        if (GtParam.showCheckbox) w += GtParam.checkBoxWidth;

        if (w > minWidth) minWidth = w;
      }

      // 判断最大值，最大总宽度要给甘特留出一定空间
      const space = 100;
      const originAllWidth = GtParam.tableHeaders.reduce(
        (res, head) => res + head.width,
        0
      );
      const diffWidth = targetX - srcX;

      if (originAllWidth + diffWidth > rootClientWidth.value - space) {
        return;
      }

      if (item.width + targetX - srcX > minWidth) {
        // 赋差值
        offset = targetX - srcX;
        onMoveColumnSliderLine(targetX);
      }
    };

    document.onmouseup = () => {
      document.onmousemove = null;
      document.onmouseup = null;
      item.setWidth(item.width + offset);
      onHiddenColumnSliderLine();
    };
  }

  const sliderLineClass = computed(() => {
    return {
      'gt-hide': !store.columnSliderLineVisible.value
    };
  });

  const sliderLineStyle = computed(() => {
    return {
      left: `${store.columnSliderLineLeft.value}px`
    };
  });

  return {
    sliderLineClass,
    sliderLineStyle,

    onResizeTableWidth,
    onResizeColumnWidth
  };
}