@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/_mixin/Theme.ts

@@ -0,0 +1,222 @@
+import type { ThemeStyleParams } from 'vue-iclient/src/common/_utils/style/color/serialColors';
+import Vue, { VNode, CreateElement } from 'vue';
+import { Component, Prop, Emit } from 'vue-property-decorator';
+import globalEvent from 'vue-iclient/src/common/_utils/global-event';
+import { getDerivedColorsByTextColor } from 'vue-iclient/src/common/_utils/util';
+import { getPrimarySerialColors, getRootStyleSelector } from 'vue-iclient/src/common/_utils/style/color/serialColors';
+
+@Component({
+  name: 'Theme'
+})
+export default class Theme extends Vue {
+  backgroundData = '';
+
+  textColorsData = '';
+
+  collapseCardBackgroundData = '';
+
+  collapseCardHeaderBgData = '';
+
+  subComponentSpanBgData = '';
+
+  tablePopupBgData = '';
+
+  colorGroupsData: Array<string> = [];
+
+  themeStyleName: Array<string> = [];
+
+  @Prop() background: string;
+
+  @Prop() textColor: string;
+
+  @Prop() colorGroup: Array<string>;
+
+  get getBackgroundStyle() {
+    return {
+      background: this.backgroundData
+    };
+  }
+
+  get collapseCardBackgroundStyle() {
+    return {
+      background: this.collapseCardBackgroundData
+    };
+  }
+
+  get collapseCardBackgroundLightStyle() {
+    return {
+      background: getPrimarySerialColors({ colorGroup: [this.collapseCardBackgroundData] })[2]
+    };
+  }
+
+  get collapseCardHeaderBgStyle() {
+    return {
+      background: this.collapseCardHeaderBgData
+    };
+  }
+
+  get subComponentSpanBgStyle() {
+    return {
+      background: this.subComponentSpanBgData
+    };
+  }
+
+  get tablePopupBgStyle() {
+    return {
+      background: this.tablePopupBgData
+    };
+  }
+
+  get getTextColorStyle() {
+    return {
+      color: this.textColorsData
+    };
+  }
+
+  get headingTextColorStyle() {
+    return {
+      color: getDerivedColorsByTextColor(this.textColorsData, 0.85)
+    };
+  }
+
+  get secondaryTextColorStyle() {
+    return {
+      color: getDerivedColorsByTextColor(this.textColorsData, 0.45)
+    };
+  }
+
+  get disabledTextColorStyle() {
+    return {
+      color: getDerivedColorsByTextColor(this.textColorsData, 0.25)
+    };
+  }
+
+  get getBackground() {
+    return this.backgroundData;
+  }
+
+  get getTextColor() {
+    return this.textColorsData;
+  }
+
+  get getColorStyle() {
+    return function (index) {
+      return {
+        color: this.colorGroupsData[index]
+      };
+    };
+  }
+
+  get getColor() {
+    return function (index) {
+      return this.colorGroupsData[index];
+    };
+  }
+
+  @Emit()
+  themeStyleChanged(value?) {
+    return value;
+  }
+
+  created() {
+    this.initThemeData();
+    this.registerPropListener();
+  }
+
+  mounted() {
+    globalEvent.$on('change-theme', this.changeThemeCallback);
+  }
+
+  beforeDestroy() {
+    globalEvent.$off('change-theme', this.changeThemeCallback);
+  }
+
+  changeThemeCallback(themeStyle: ThemeStyleParams) {
+    this.setDataRelatedProps(themeStyle, true);
+    if ('background' in themeStyle) {
+      this.setDataRelatedWithBackgound('', themeStyle);
+    }
+    // this.themeStyleChanged();
+    this.initNeedTheme(themeStyle);
+  }
+
+  initThemeData(): void {
+    this.setDataRelatedProps();
+    this.setDataRelatedWithBackgound(this.background);
+  }
+
+  initNeedTheme(themeStyle) {
+    this.themeStyleName.forEach(name => {
+      if (name === 'primaryColor') {
+        this[name] = themeStyle.colorGroup && themeStyle.colorGroup[0];
+      } else {
+        this[name] = this.getRealColor(name, themeStyle);
+      }
+    });
+  }
+
+  registerPropListener(): void {
+    const vm = this;
+    const $props = this.getSelfProps();
+    $props.forEach((prop: string) => {
+      this.$watch(prop, function (next) {
+        const dataName: string = this.getDataNameOfProp(prop);
+        vm[dataName] = next || this.getRealColor(prop);
+        if (prop === 'background') {
+          vm.setDataRelatedWithBackgound(next);
+        }
+      });
+    });
+  }
+
+  setDataRelatedProps(themeStyle?: ThemeStyleParams, themePriority?: boolean) {
+    const themeStyleData = themeStyle || globalEvent.$options.theme || {};
+    const $props = this.getSelfProps();
+    $props.forEach((prop: string) => {
+      if (prop in themeStyleData) {
+        const dataName: string = this.getDataNameOfProp(prop);
+        const propValue = themePriority ? '' : this[prop];
+        this[dataName] = propValue || this.getRealColor(prop, themeStyle);
+      }
+    });
+  }
+
+  setDataRelatedWithBackgound(background?: string, themeStyle?: ThemeStyleParams) {
+    this.collapseCardHeaderBgData = background || this.getRealColor('collapseCardHeaderBg', themeStyle);
+    this.subComponentSpanBgData = background || this.getRealColor('subComponentSpanBg', themeStyle);
+    this.collapseCardBackgroundData = background || this.getRealColor('collapseCardBackground', themeStyle);
+    this.tablePopupBgData = background || this.getRealColor('messageBackground', themeStyle);
+  }
+
+  getSelfProps(): string[] {
+    // @ts-ignore
+    return Object.keys(Theme.extendOptions.props);
+  }
+
+  getRealColor(prop: string, acceptThemeStyle?: ThemeStyleParams) {
+    const themeStyle = (acceptThemeStyle || globalEvent.$options.theme) as unknown as ThemeStyleParams;
+    if (prop === 'colorGroup' || !themeStyle?.[prop]?.includes('var')) {
+      return themeStyle?.[prop];
+    }
+    const rootStyleSelector = getRootStyleSelector(themeStyle);
+    const computedStyle = window.getComputedStyle(document.querySelector(rootStyleSelector));
+    const themeColor = themeStyle[prop].replace(/var\((.+)\)/g, '$1');
+    const colorValue = computedStyle.getPropertyValue(themeColor);
+    return colorValue.trim();
+  }
+
+  getDataNameOfProp(prop: string) {
+    switch (prop) {
+      case 'textColor':
+        return 'textColorsData';
+      case 'colorGroup':
+        return 'colorGroupsData';
+      default:
+        return `${prop}Data`;
+    }
+  }
+
+  render(h: CreateElement): VNode {
+    return h('template', null);
+  }
+}

package/src/common/_mixin/ThirdService.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import { Component, Prop, Watch } from 'vue-property-decorator';
+import RestService from 'vue-iclient/src/common/_utils/RestService';
+
+@Component
+export default class ThirdService extends Vue {
+  features: any = null;
+  restService: any = null;
+
+  @Prop({ default: '' }) url: string;
+
+  @Prop({ default: '' }) field: string;
+
+  @Prop({ default: '' }) proxy: string;
+
+  @Watch('url', { immediate: true })
+  onUrlChange(newValue: string) {
+    if (newValue) {
+      this.getData();
+    }
+  }
+
+  @Watch('field')
+  onFieldChange() {
+    if (this.url) {
+      this.setValue(this.features);
+    }
+  }
+
+  @Watch('proxy')
+  onProxyChange() {
+    this.restService && this.restService.setProxy(this.proxy);
+    if (this.url) {
+      this.getData();
+    }
+  }
+
+  getData() {
+    if (!this.restService) {
+      this.restService = new RestService({ proxy: this.proxy });
+      this.restService.on({ getdatasucceeded: this.fetchData });
+    }
+    this.restService.getData(this.url);
+  }
+
+  fetchData({ features }) {
+    this.features = features;
+    this.setValue(features);
+  }
+
+  setValue(features) {
+    if (features && !!features.length) {
+      const field = this.field;
+      // @ts-ignore
+      this.finalValue = features[0].properties[field];
+    }
+  }
+}

package/src/common/_mixin/Timer.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import { Component, Prop, Watch } from 'vue-property-decorator';
+
+@Component
+export default class Timer extends Vue {
+  timer: any = null;
+
+  @Prop({ default: false }) startTiming: boolean;
+
+  @Prop({ default: 3 }) frequency: number | string;
+
+  @Watch('startTiming', { immediate: true })
+  onStartTimingChange(newValue: boolean) {
+    if (newValue) {
+      this._start();
+    } else {
+      this._close();
+    }
+  }
+
+  @Watch('frequency')
+  onFrequencyChange() {
+    if (this.startTiming) {
+      this.resetTimer();
+    }
+  }
+
+  _start() {
+    let time: number = 1000 * <number> this.frequency || 3000;
+    this.startTimer();
+    this.timer = setInterval(() => {
+      this.timing();
+    }, time);
+  }
+
+  _close() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.closeTimer();
+  }
+
+  startTimer() {}
+
+  timing() {}
+
+  closeTimer() {}
+
+  resetTimer() {
+    this._close();
+    this._start();
+  }
+
+  beforeDestroy() {
+    this.startTiming && this._close();
+  }
+}

package/src/common/_mixin/VmUpdater.ts

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import isequal from 'lodash.isequal';
+
+@Component
+export default class VmUpdater extends Vue {
+  viewModel: any;
+  $options: any;
+  $watch: any;
+
+  mounted() {
+    // 为vm层的props绑定监听，更新vm层的视图变化
+    if (this.$options.viewModelProps) {
+      this.watchViewModelOptions(this.$options.viewModelProps);
+    }
+  }
+
+  // 组件设置vm实例
+  public setViewModel(viewModel) {
+    this.viewModel = viewModel;
+  }
+
+  // 给vm的props绑定监听
+  watchViewModelOptions(viewModelProps) {
+    // 给每个vm层的props绑定监听，然后操作vm层的视图变化,必须在vue实例化的时候调用
+    // viewModelProps(组件props的名字) ['chartType', 'datasets'],调用的方法名字setXxx,eg:setChartType
+    // mapOptions.xxx.xx 获取对象取属性的最后一项 取xx
+    viewModelProps.map(item => {
+      this.$watch(
+        item,
+        function(newVal, oldVal) {
+          if (!isequal(newVal, oldVal)) {
+            if (item.includes('.')) {
+              let itemArr = item.split('.');
+              item = itemArr[itemArr.length - 1];
+            }
+            let setFun = 'set' + item.replace(item[0], item[0].toUpperCase());
+            // 子组件的viewModel
+            this.viewModel && this.viewModel[setFun]?.(newVal);
+          }
+        },
+        { deep: true }
+      );
+    });
+  }
+}

package/src/common/_types/AddressMatchParameter.js

@@ -0,0 +1,9 @@
+import { geti18n } from 'vue-iclient/src/common/_lang/index';
+
+export default class AddressMatchParameter {
+  constructor(options) {
+    this.url = options.url;
+    this.name = options.name || geti18n().t('commontypes.addressMatch');
+    this.proxy = options.proxy;
+  }
+}

package/src/common/_types/GeoJSONParamter.ts

@@ -0,0 +1,17 @@
+interface geojsonOptions {
+  type?: string;
+  // eslint-disable-next-line
+  geoJSON?: Array<GeoJSON.Feature<GeoJSON.Geometry>> | GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>,
+  maxFeatures?: number;
+}
+export default class GeoJSONParameter {
+  type: string;
+  // eslint-disable-next-line
+  geoJSON: Array<GeoJSON.Feature<GeoJSON.Geometry>> | GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>
+  maxFeatures: number;
+  constructor(options: geojsonOptions = {}) {
+    this.type = 'geoJSON';
+    this.maxFeatures = options.maxFeatures === void 0 ? options.maxFeatures : 20;
+    this.geoJSON = options.geoJSON;
+  }
+}

package/src/common/_types/RestDataParameter.js

@@ -0,0 +1,8 @@
+import iServerDataParameter from 'vue-iclient/src/common/_types/iServerDataParameter';
+
+export default class RestDataParameter extends iServerDataParameter {
+  // eslint-disable-next-line
+  constructor(options) {
+    super(options);
+  }
+}

package/src/common/_types/RestMapParameter.js

@@ -0,0 +1,8 @@
+import iServerMapParameter from 'vue-iclient/src/common/_types/iServerMapParameter';
+
+export default class RestMapParameter extends iServerMapParameter {
+  // eslint-disable-next-line
+  constructor(options) {
+    super(options);
+  }
+}

package/src/common/_types/RestParameter.js

@@ -0,0 +1,12 @@
+import { geti18n } from 'vue-iclient/src/common/_lang/index';
+
+export default class RestParameter {
+  constructor(options) {
+    this.url = options.url;
+    this.type = 'rest';
+    this.attributeFilter = options.attributeFilter || null;
+    this.maxFeatures = options.maxFeatures || 20;
+    this.name = options.name || geti18n().t('commontypes.restData');
+    this.proxy = options.proxy;
+  }
+}

package/src/common/_types/event/BaseTypes.js

@@ -0,0 +1,24 @@
+/* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html. */
+
+export let FunctionExt = {
+  bind: function (func, object) {
+    // create a reference to all arguments past the second one
+    let args = Array.prototype.slice.apply(arguments, [2]);
+    return function () {
+      // Push on any additional arguments from the actual function call.
+      // These will come after those sent to the bind call.
+      let newArgs = args.concat(
+        Array.prototype.slice.apply(arguments, [0])
+      );
+      return func.apply(object, newArgs);
+    };
+  },
+
+  bindAsEventListener: function (func, object) {
+    return function (event) {
+      return func.call(object, event || window.event);
+    };
+  }
+};