vue-cesium-jyt/es/components/overlays/dynamic/index.mjs

Vue 3.x components for CesiumJS.

import { defineComponent, getCurrentInstance, ref, watch, onUnmounted, createCommentVNode } from 'vue';
import '../../../composables/index.mjs';
import { show } from '../../../utils/cesium-props.mjs';
import { addCustomProperty, kebabCase } from '../../../utils/util.mjs';
import DynamicOverlay from '../../../shared/src/DynamicOverlay.mjs';
import { makeJulianDate } from '../../../utils/cesium-helpers.mjs';
import { cloneDeep, remove, differenceBy } from 'lodash-unified';
import { getInstanceListener } from '../../../utils/private/vm.mjs';
import { commonEmits } from '../../../utils/emits.mjs';
import useCommon from '../../../composables/use-common/index.mjs';
import { isPlainObject } from '@vue/shared';

const dynamicOverlayProps = {
  ...show,
  name: {
    type: String,
    default: "__vc__overlay__dynamic__"
  },
  startTime: {
    type: [Object, String]
  },
  stopTime: {
    type: [Object, String]
  },
  currentTime: {
    type: [Object, String]
  },
  clockRange: {
    type: Number,
    default: 0
  },
  clockStep: {
    type: Number,
    default: 1
  },
  shouldAnimate: {
    type: Boolean,
    default: true
  },
  canAnimate: {
    type: Boolean,
    default: true
  },
  multiplier: {
    type: Number,
    default: 1
  },
  dynamicOverlays: {
    type: Array,
    default: () => []
  },
  defaultInterval: {
    type: Number,
    default: 3
  }
};
const emits = {
  ...commonEmits,
  "update:currentTime": (currentTime) => true,
  "update:shouldAnimate": (shouldAnimate) => true,
  "update:canAnimate": (canAnimate) => true,
  "update:clockRange": (clockRange) => true,
  "update:clockStep": (clockStep) => true,
  "update:multiplier": (multiplier) => true,
  "update:startTime": (startTime) => true,
  "update:stopTime": (stopTime) => true,
  onStop: (clock) => true
};
var OverlayDynamic = defineComponent({
  name: "VcOverlayDynamic",
  props: dynamicOverlayProps,
  emits,
  setup(props, ctx) {
    const instance = getCurrentInstance();
    instance.cesiumClass = "VcOverlayDynamic";
    instance.cesiumEvents = [];
    const commonState = useCommon(props, ctx, instance);
    if (commonState === void 0) {
      return;
    }
    const { $services } = commonState;
    const overlays = ref([]);
    const restoreClockOpts = ref({});
    const { emit } = ctx;
    let unwatchFns = [];
    unwatchFns.push(watch(() => props.show, (val) => {
      const datasource = instance.cesiumObject;
      datasource && (datasource.show = val);
    }));
    unwatchFns.push(watch(() => props.name, (val) => {
      const datasource = instance.cesiumObject;
      datasource && (datasource.name = val);
    }));
    unwatchFns.push(watch(() => props.startTime, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer) && val) {
        viewer.clock.startTime = makeJulianDate(val);
      }
    }));
    unwatchFns.push(watch(() => props.stopTime, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer) && val) {
        viewer.clock.stopTime = makeJulianDate(val);
      }
    }));
    unwatchFns.push(watch(() => props.currentTime, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer) && val) {
        viewer.clock.currentTime = makeJulianDate(val);
      }
    }));
    unwatchFns.push(watch(() => props.multiplier, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer)) {
        viewer.clock.multiplier = val;
      }
    }));
    unwatchFns.push(watch(() => props.clockStep, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer)) {
        viewer.clock.clockStep = val;
      }
    }));
    unwatchFns.push(watch(() => props.clockRange, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer)) {
        viewer.clock.clockRange = val;
      }
    }));
    unwatchFns.push(watch(() => props.canAnimate, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer)) {
        viewer.clock.canAnimate = val;
      }
    }));
    unwatchFns.push(watch(() => props.shouldAnimate, (val) => {
      const { viewer } = $services;
      if (Cesium.defined(viewer)) {
        viewer.clock.shouldAnimate = val;
      }
    }));
    unwatchFns.push(watch(() => cloneDeep(props.dynamicOverlays), (newVal, oldVal) => {
      if (!instance.mounted) {
        return;
      }
      const datasource = instance.cesiumObject;
      if (newVal.length === oldVal.length) {
        const modifies = [];
        for (let i = 0; i < newVal.length; i++) {
          const options = newVal[i];
          const oldOptions = oldVal[i];
          const testReplace = (key, value) => {
            if (key !== "nodeTransformations") {
              return value;
            }
          };
          if (JSON.stringify(options, testReplace) !== JSON.stringify(oldOptions, testReplace)) {
            modifies.push({
              newOptions: options,
              oldOptions
            });
          }
        }
        modifies.forEach((v) => {
          const modifyEntity = datasource.entities.getById(v.oldOptions.id);
          if (v.oldOptions.id === v.newOptions.id) {
            modifyEntity && Object.keys(v.newOptions).forEach((prop) => {
              if (v.oldOptions[prop] !== v.newOptions[prop]) {
                modifyEntity[prop] = commonState.transformProp(prop, v.newOptions[prop]);
              }
            });
          } else {
            if (modifyEntity) {
              datasource.entities.remove(modifyEntity);
              remove(overlays.value, (overlay) => overlay.id === modifyEntity.id);
              const entityOptions = v.newOptions;
              addDynamicOverlays(datasource, [entityOptions]);
            }
          }
        });
      } else {
        const adds = differenceBy(newVal, oldVal, "id");
        const deletes = differenceBy(oldVal, newVal, "id");
        const deletedEntities = [];
        for (let i = 0; i < deletes.length; i++) {
          const deleteEntity = datasource.entities.getById(deletes[i].id);
          deletedEntities.push(deleteEntity);
        }
        deletedEntities.forEach((v) => {
          datasource.entities.remove(v);
          remove(overlays.value, (overlay) => overlay.id === v.id);
        });
        addDynamicOverlays(datasource, adds);
      }
    }, {
      deep: true
    }));
    instance.createCesiumObject = async () => {
      return new Cesium.CustomDataSource(props.name);
    };
    const onClockTick = (clock) => {
      let listener = getInstanceListener(instance, "update:currentTime");
      listener && emit("update:currentTime", clock.currentTime);
      listener = getInstanceListener(instance, "update:shouldAnimate");
      listener && emit("update:shouldAnimate", clock.shouldAnimate);
      listener = getInstanceListener(instance, "update:canAnimate");
      listener && emit("update:canAnimate", clock.canAnimate);
      listener = getInstanceListener(instance, "update:clockRange");
      listener && emit("update:clockRange", clock.clockRange);
      listener = getInstanceListener(instance, "update:clockStep");
      listener && emit("update:clockStep", clock.clockStep);
      listener = getInstanceListener(instance, "update:multiplier");
      listener && emit("update:multiplier", clock.multiplier);
      listener = getInstanceListener(instance, "update:startTime");
      listener && emit("update:startTime", clock.startTime);
      listener = getInstanceListener(instance, "update:stopTime");
      listener && emit("update:stopTime", clock.stopTime);
    };
    const addDynamicOverlays = (datasource, dynamicOverlays) => {
      for (let i = 0; i < dynamicOverlays.length; i++) {
        const entityOptions = dynamicOverlays[i];
        const entityOptionsTransform = commonState.transformProps(entityOptions);
        const dynamicOverlay = new DynamicOverlay(entityOptionsTransform);
        overlays.value.push(dynamicOverlay);
        const entity = datasource.entities.add(dynamicOverlay._entity);
        entityOptionsTransform.sampledPositions.forEach((sampledPosition) => {
          if (Array.isArray(sampledPosition) || sampledPosition instanceof Cesium.Cartesian3) {
            dynamicOverlay.addPosition(sampledPosition, props.defaultInterval);
          } else if (isPlainObject(sampledPosition)) {
            if (sampledPosition.time) {
              dynamicOverlay.addPosition(sampledPosition.position, sampledPosition.time);
            } else if (sampledPosition.interval) {
              dynamicOverlay.addPosition(sampledPosition.position, sampledPosition.interval);
            }
          }
        });
        entityOptions.id !== entity.id && (entityOptions.id = entity.id);
        addCustomProperty(entity, entityOptionsTransform);
      }
    };
    instance.mount = async () => {
      const { viewer } = $services;
      const datasource = instance.cesiumObject;
      datasource.show = props.show;
      addDynamicOverlays(datasource, props.dynamicOverlays);
      return viewer.dataSources.add(datasource).then(() => {
        restoreClockOpts.value.startTime = viewer.clock.startTime;
        restoreClockOpts.value.stopTime = viewer.clock.stopTime;
        restoreClockOpts.value.currentTime = viewer.clock.currentTime;
        restoreClockOpts.value.multiplier = viewer.clock.multiplier;
        restoreClockOpts.value.clockStep = viewer.clock.clockStep;
        restoreClockOpts.value.clockRange = viewer.clock.clockRange;
        restoreClockOpts.value.canAnimate = viewer.clock.canAnimate;
        restoreClockOpts.value.shouldAnimate = viewer.clock.shouldAnimate;
        if (props.startTime) {
          viewer.clock.startTime = makeJulianDate(props.startTime);
        }
        if (props.stopTime) {
          viewer.clock.stopTime = makeJulianDate(props.stopTime);
        }
        if (props.currentTime) {
          viewer.clock.currentTime = makeJulianDate(props.currentTime);
        }
        viewer.clock.multiplier = props.multiplier;
        viewer.clock.clockStep = props.clockStep;
        viewer.clock.clockRange = props.clockRange;
        viewer.clock.canAnimate = false;
        viewer.clock.shouldAnimate = props.shouldAnimate;
        viewer.clock.onTick.addEventListener(onClockTick);
        const listener = getInstanceListener(instance, "onStop");
        listener && viewer.clock.onStop.addEventListener(listener);
        return true;
      });
    };
    instance.unmount = async () => {
      const { viewer } = $services;
      const datasource = instance.cesiumObject;
      viewer.dataSources.remove(datasource, true);
      viewer.clock.startTime = restoreClockOpts.value.startTime;
      viewer.clock.stopTime = restoreClockOpts.value.stopTime;
      viewer.clock.multiplier = restoreClockOpts.value.multiplier;
      viewer.clock.clockStep = restoreClockOpts.value.clockStep;
      viewer.clock.clockRange = restoreClockOpts.value.clockRange;
      viewer.clock.canAnimate = restoreClockOpts.value.canAnimate;
      viewer.clock.shouldAnimate = restoreClockOpts.value.shouldAnimate;
      overlays.value.length = 0;
      viewer.clock.onTick.removeEventListener(onClockTick);
      const listener = getInstanceListener(instance, "onStop");
      listener && viewer.clock.onStop.removeEventListener(listener);
      return true;
    };
    onUnmounted(() => {
      unwatchFns.forEach((item) => item());
      unwatchFns = [];
    });
    Object.assign(instance.proxy, { overlays });
    return () => {
      var _a;
      return createCommentVNode(kebabCase(((_a = instance.proxy) == null ? void 0 : _a.$options.name) || ""));
    };
  }
});

export { OverlayDynamic as default, dynamicOverlayProps };
//# sourceMappingURL=index.mjs.map