@shjjs/visual-ui 1.0.0

package/es/core/earth/utils/interface.d.ts

@@ -0,0 +1,134 @@
+import * as THREE from 'three';
+export interface BorderParameter {
+    color: number | undefined;
+    lineWidth: number;
+    opacity: number;
+    wakeline?: boolean;
+    wakelineNumber?: number;
+    wakelineColors?: Array<string>;
+}
+export interface SceneParameter {
+    isBackground: boolean;
+    background: string;
+    fog: boolean;
+    fogColor: string;
+    fogNear: number;
+    fogFar: number;
+    stats: boolean;
+    statsType: number;
+}
+export interface AmbientLightParameter {
+    color: string;
+    intensity?: number;
+}
+export interface DirectionalLightParameter {
+    x: number;
+    y: number;
+    z: number;
+    color: string;
+    intensity?: number;
+}
+export interface GridHelperParameter {
+    show: boolean;
+    width: number;
+    height: number;
+    color: string;
+}
+export interface AxesHelperParameter {
+    show: boolean;
+    size: number;
+}
+export interface SceneInterface {
+    /**
+     * Camera 场景
+     * @default null
+     */
+    scene: THREE.Scene;
+    /**
+     * Camera 相机
+     * @default null
+     */
+    camera: THREE.Camera;
+    /**
+     * Camera WebGL渲染器
+     * @default null
+     */
+    webGlRenderer: THREE.WebGLRenderer;
+    /**
+     * stats 性能监听器
+     * @default null
+     */
+    stats: any;
+    /**
+     * 创建场景
+     * @param sceneParameter 场景参数
+     * @returns 场景
+     */
+    createScene(sceneParameter: SceneParameter): THREE.Scene;
+    /**
+     * 创建相机
+     * @param element 容器
+     * @returns 相机
+     */
+    createCamera(element: HTMLElement): THREE.Camera;
+    /**
+     * 创建WebGL渲染器
+     * @param element 容器
+     * @returns WebGL渲染器
+     */
+    createWebGLRenderer(element: HTMLElement): THREE.WebGLRenderer;
+    /**
+     * 创建环境光
+     * @param option 参数
+     * @returns 环境光
+     */
+    createAmbientLight(option: AmbientLightParameter): THREE.AmbientLight;
+    /**
+     * 创建平行光
+     * @param option 参数
+     * @returns 平行光
+     */
+    createDirectionalLight(option: DirectionalLightParameter): THREE.DirectionalLight;
+    /**
+     * 创建Grid辅助线
+     * @returns GridHelper
+     */
+    createGridHelper(option: GridHelperParameter): THREE.GridHelper;
+    /**
+     * 创建Axes辅助线
+     * @returns AxesHelper
+     */
+    createAxesHelper(option: AxesHelperParameter): THREE.AxesHelper;
+    /**
+     * 创建性能监测器
+     * @param sceneParameter 场景参数
+     */
+    createStats(sceneParameter: SceneParameter): any;
+    /**
+     * 添加物体
+     * @param object Object3D
+     * @returns void
+     */
+    add(...object: THREE.Object3D[] | undefined): void;
+    /**
+     * 重置大小
+     * @returns void
+     */
+    resize(): void;
+    /**
+     * 渲染器
+     * @returns void
+     */
+    render(): void;
+    /**
+     * 销毁实例
+     * @returns void
+     */
+    dispose(): void;
+    /**
+     * 容器发生改变时
+     * @param element
+     * @returns void
+     */
+    onWindowResize(element: HTMLElement): void;
+}

package/es/core/earth/utils/label.d.ts

@@ -0,0 +1,4 @@
+import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+declare function tag2D(name: any): CSS2DObject;
+declare function labelRenderer(container: any): CSS2DRenderer;
+export { tag2D, labelRenderer };

package/es/core/earth/utils/label.mjs

@@ -0,0 +1,15 @@
+import { CSS2DObject as o, CSS2DRenderer as s } from "three/examples/jsm/renderers/CSS2DRenderer";
+function d(t) {
+  const e = document.createElement("div");
+  e.innerHTML = t, e.classList.add("tag");
+  const n = new o(e);
+  return e.style.pointerEvents = "none", n;
+}
+function r(t) {
+  const e = new s();
+  return e.setSize(t.offsetWidth, t.offsetHeight), e.domElement.style.position = "absolute", e.domElement.style.top = "0px", e.domElement.style.left = "0px", e.domElement.style.pointerEvents = "none", t.appendChild(e.domElement), e;
+}
+export {
+  r as labelRenderer,
+  d as tag2D
+};

package/es/core/earth/utils/line2.d.ts

@@ -0,0 +1,3 @@
+import { Line2 } from 'three/examples/jsm/lines/Line2';
+import { BorderParameter } from './interface';
+export declare const DrawLine: (lines: any, option: BorderParameter) => Line2;

package/es/core/earth/utils/line2.mjs

@@ -0,0 +1,21 @@
+import { Line2 as s } from "three/examples/jsm/lines/Line2";
+import { LineGeometry as c } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial as m } from "three/examples/jsm/lines/LineMaterial";
+const u = (o, e) => {
+  const r = [];
+  o.forEach(({ x: n, y: a, z: l }) => r.push(n, a, l));
+  const t = new c();
+  t.setPositions(r);
+  const i = new m({
+    transparent: !0,
+    color: e.color,
+    linewidth: e.lineWidth * 0.01,
+    opacity: e.opacity,
+    worldUnits: !0,
+    alphaToCoverage: !0
+  });
+  return new s(t, i);
+};
+export {
+  u as DrawLine
+};

package/es/core/earth/utils/scene.d.ts

@@ -0,0 +1,28 @@
+import * as THREE from 'three';
+import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
+import { SceneInterface, SceneParameter, AmbientLightParameter, GridHelperParameter, AxesHelperParameter, DirectionalLightParameter } from './interface';
+export declare class Scene implements SceneInterface {
+    stats: any;
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    webGlRenderer: THREE.WebGLRenderer;
+    labelRenderer: CSS2DRenderer;
+    element: HTMLElement;
+    animationFrameId: number;
+    textures: any;
+    constructor(element: HTMLElement, sceneParameter: SceneParameter);
+    createScene(sceneParameter: SceneParameter): THREE.Scene;
+    createCamera(element: HTMLElement): THREE.PerspectiveCamera;
+    createWebGLRenderer(element: HTMLElement): THREE.WebGLRenderer;
+    createAmbientLight(option: AmbientLightParameter): THREE.AmbientLight;
+    createDirectionalLight(option: DirectionalLightParameter): THREE.DirectionalLight;
+    createGridHelper(option: GridHelperParameter): THREE.GridHelper | undefined;
+    createAxesHelper(option: AxesHelperParameter): THREE.AxesHelper | undefined;
+    createStats(sceneParameter: SceneParameter): any;
+    resize(): void;
+    render(): void;
+    add(...object: THREE.Object3D[] | undefined): void;
+    dispose(): void;
+    onWindowResize(element: HTMLElement): void;
+    loadTextures(texturePaths: any, callback: any): void;
+}

package/es/core/earth/utils/scene.mjs

@@ -0,0 +1,120 @@
+var d = Object.defineProperty;
+var c = (s, e, t) => e in s ? d(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var i = (s, e, t) => c(s, typeof e != "symbol" ? e + "" : e, t);
+import * as r from "three";
+import f from "stats.js";
+import { labelRenderer as m } from "./label.mjs";
+class b {
+  constructor(e, t) {
+    i(this, "stats");
+    i(this, "scene");
+    i(this, "camera");
+    i(this, "webGlRenderer");
+    i(this, "labelRenderer");
+    i(this, "element");
+    i(this, "animationFrameId", 0);
+    i(this, "textures", {});
+    this.element = e, this.scene = this.createScene(t), this.stats = this.createStats(t), this.camera = this.createCamera(this.element), this.webGlRenderer = this.createWebGLRenderer(this.element), window.addEventListener("resize", () => this.onWindowResize(this.element));
+  }
+  createScene(e) {
+    const t = new r.Scene();
+    return e.isBackground ? t.background = new r.Color(e.background) : t.background = null, e.fog && (t.fog = new r.Fog(e.fogColor, e.fogNear, e.fogFar)), t;
+  }
+  createCamera(e) {
+    const t = new r.PerspectiveCamera(45, e.offsetWidth / e.offsetHeight, 0.1, 1e4);
+    return t.position.set(10, 10, 10), t.lookAt(0, 0, 0), t;
+  }
+  createWebGLRenderer(e) {
+    const t = new r.WebGLRenderer({
+      preserveDrawingBuffer: !0,
+      // 开启缓冲区保护
+      antialias: !0,
+      alpha: !0
+    });
+    return t.setClearAlpha(0), t.setPixelRatio(window.devicePixelRatio), t.autoClear = !1, t.clearColor(), t.setSize(e.offsetWidth, e.offsetHeight), e.appendChild(t.domElement), this.labelRenderer = m(e), t;
+  }
+  createAmbientLight(e) {
+    return new r.AmbientLight(
+      new r.Color(e.color),
+      e.intensity
+    );
+  }
+  createDirectionalLight(e) {
+    const t = new r.DirectionalLight(
+      new r.Color(e.color),
+      e.intensity
+    );
+    return t.position.set(
+      e.x,
+      e.y,
+      e.z
+    ), t.lookAt(0, 0, 0), t;
+  }
+  createGridHelper(e) {
+    if (e.show)
+      return new r.GridHelper(
+        e.width,
+        e.height,
+        new r.Color(e.color),
+        new r.Color(e.color)
+      );
+  }
+  createAxesHelper(e) {
+    if (e.show)
+      return new r.AxesHelper(e.size);
+  }
+  createStats(e) {
+    if (e.stats) {
+      const t = new f();
+      return t.domElement.style.position = "absolute", t.domElement.style.top = "5px", t.domElement.style.left = "5px", t.showPanel(e.statsType), this.element.appendChild(t.dom), t;
+    }
+    return null;
+  }
+  resize() {
+    this.webGlRenderer.setSize(this.element.offsetWidth, this.element.offsetHeight), this.camera.aspect = this.element.offsetWidth / this.element.offsetHeight, this.camera.updateProjectionMatrix();
+  }
+  render() {
+    this.animationFrameId = requestAnimationFrame(() => {
+      this.stats && this.stats.update(), this.render(), this.webGlRenderer.clear(), this.webGlRenderer.render(this.scene, this.camera);
+    });
+  }
+  add(...e) {
+    e.forEach((t) => {
+      t && this.scene.add(t);
+    });
+  }
+  dispose() {
+    try {
+      cancelAnimationFrame(this.animationFrameId), this.element.innerHTML = "", this.camera.clear(), this.webGlRenderer.forceContextLoss(), this.webGlRenderer.dispose(), this.scene.clear();
+    } catch {
+    }
+  }
+  onWindowResize(e) {
+    const t = e.offsetWidth, o = e.offsetHeight;
+    this.webGlRenderer.setSize(t, o), this.camera.aspect = t / o, this.camera.updateProjectionMatrix();
+  }
+  loadTextures(e, t) {
+    const o = new r.TextureLoader();
+    let n = 0;
+    const a = () => {
+      if (n < e.length) {
+        const l = e[n].value;
+        l ? o.load(
+          l,
+          (h) => {
+            this.textures[e[n].key] = h, n++, a();
+          },
+          void 0,
+          function(h) {
+            n++, a();
+          }
+        ) : (n++, a());
+      } else
+        t(this.textures);
+    };
+    a();
+  }
+}
+export {
+  b as Scene
+};

package/es/core/useChart.d.ts

@@ -0,0 +1,15 @@
+import * as echarts from 'echarts';
+export interface IUseChart {
+    basicOption: any;
+    useEvents: any[];
+    customRenderData: Function;
+    emit: any;
+}
+export declare const useChart: ({ basicOption, useEvents, customRenderData, emit }: IUseChart) => {
+    id: string;
+    status: import("vue").Ref<boolean>;
+    chart: import("vue").ShallowRef<echarts.ECharts>;
+    setOption: (optionParams: any) => void;
+    renderChart: import("lodash").DebouncedFunc<(option: echarts.EChartsOption) => void>;
+    renderData: Function;
+};

package/es/core/useChart.mjs

@@ -0,0 +1,111 @@
+import { ref as m, shallowRef as H, onMounted as L, onBeforeUnmount as P } from "vue";
+import { useResizeObserver as Z } from "@vueuse/core";
+import { debounce as I, cloneDeep as w, isArray as n } from "lodash";
+import O from "is-electron";
+import * as h from "echarts";
+import { nanoid as b } from "nanoid";
+import { HoverLoop as S } from "../utils/hoverLoop.mjs";
+import "echarts-wordcloud";
+import "echarts-liquidfill";
+const k = (l) => {
+  const e = [];
+  l.geo && (n(l.geo) ? e.push(...l.geo.map((r) => r.map)) : e.push(l.geo.map)), l.series && n(l.series) && l.series.forEach((r) => {
+    r.map && e.push(r.map);
+  });
+  const d = e.map((r) => {
+    if (r === "customize")
+      if (n(l.geo)) {
+        const u = JSON.parse(l.geo.find((f) => f.map === "customize").geoData);
+        return h.registerMap(r, u);
+      } else {
+        const u = JSON.parse(l.geo.geoData);
+        return h.registerMap(r, u);
+      }
+    else
+      return fetch((O() ? "gismap/" : "/gismap/") + r + ".json").then((u) => u.json()).then((u) => {
+        h.registerMap(r, u);
+      }).catch((u) => {
+      });
+  });
+  return Promise.all(d);
+}, D = async (l) => {
+  l.bmap && await import(
+    /* @vite-ignore */
+    "echarts/extension/bmap/bmap"
+  );
+}, R = ({ basicOption: l, useEvents: e, customRenderData: d, emit: r }) => {
+  const u = b(), f = m(!0), t = H(null), v = d, c = m(null), i = m(null), V = (s) => {
+    try {
+      t.value || (t.value = h.init(document.getElementById(u), null, { renderer: "svg" }));
+      const o = w(s);
+      if (o) {
+        if (t.value.setOption(o, !0), o.hoverLoop)
+          if (i.value && clearInterval(i.value), c.value && c.value.closeSwitchTooltip(), o.hoverLoop.type === "方式二") {
+            let a = 0;
+            o.dataset && o.dataset.source && (a = o.dataset.source.length), o.series[0] && o.series[0].data && (a = o.series[0].data.length);
+            const J = o.dataZoom[0].endValue, y = o.dataZoom[0].startValue, g = () => {
+              i.value = setInterval(() => {
+                o.dataZoom[0].endValue > a - 2 ? (o.dataZoom[0].endValue = J, o.dataZoom[0].startValue = y) : (o.dataZoom[0].endValue = o.dataZoom[0].endValue + 1, o.dataZoom[0].startValue = o.dataZoom[0].startValue + 1), t.value.setOption(o);
+              }, o.hoverLoop.delay2);
+            };
+            t.value.on("mousemove", function() {
+              i.value && clearInterval(i.value);
+            }), t.value.on("mouseout", function() {
+              i.value && clearInterval(i.value), g();
+            }), g();
+          } else o.hoverLoop.type === "方式一" && (t.value.on("mousemove", function() {
+            c.value && c.value.closeSwitchTooltip();
+          }), t.value.on("mouseout", function() {
+            c.value && c.value.closeSwitchTooltip(), c.value = new S(t.value, o);
+          }), c.value = new S(t.value, o));
+        else
+          i.value && clearInterval(i.value), c.value && c.value.closeSwitchTooltip();
+        t.value.on("click", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-click", a), window.SHJParseEvent(e, "chart-click", a));
+        }), t.value.on("dblclick", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-dblclick", a), window.SHJParseEvent(e, "chart-dblclick", a));
+        }), t.value.on("mousedown", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-mousedown", a), window.SHJParseEvent(e, "chart-mousedown", a));
+        }), t.value.on("mouseup", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-mouseup", a), window.SHJParseEvent(e, "chart-mouseup", a));
+        }), t.value.on("mouseover", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-mouseover", a), window.SHJParseEvent(e, "chart-mouseover", a));
+        }), t.value.on("mouseout", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-mouseout", a), window.SHJParseEvent(e, "chart-mouseout", a));
+        }), t.value.on("contextmenu", (a) => {
+          e && n(e) && e.length > 0 && (r("chart-contextmenu", a), window.SHJParseEvent(e, "chart-contextmenu", a));
+        }), f.value = !1;
+      }
+    } catch {
+      try {
+        t.value.dispose();
+      } catch {
+      }
+      t.value = null;
+    }
+  }, p = I((s) => {
+    f.value = !0, s = w(s), k(s).then(() => {
+      D(s).then(() => {
+        v(s);
+      });
+    }).catch((o) => {
+    });
+  }, 100);
+  return L(() => {
+    p(l), Z(document.getElementById(u), (s) => {
+      t.value && t.value.resize();
+    });
+  }), P(() => {
+    c.value && c.value.closeSwitchTooltip(), i.value && clearInterval(i.value), t.value && t.value.dispose();
+  }), {
+    id: u,
+    status: f,
+    chart: t,
+    setOption: V,
+    renderChart: p,
+    renderData: v
+  };
+};
+export {
+  R as useChart
+};

package/es/env.d.ts

@@ -0,0 +1,55 @@
+declare module '*.vue' {
+    import { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
+
+// eslint-disable-next-line no-unused-vars
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
+
+declare interface Window {
+    SHJSceneUeStream: any;
+    // UE场景
+    SHJSceneUEIframeWebscoket: any;
+    // Vr场景
+    SHJSceneVrViewer: any;
+    // Unity场景
+    SHJSceneUnityIframeInstance: any;
+    // 全局数据源函数
+    SHJDatasourceV2: ({ sources, callback, tId, isStore, noUseMapping, isInterval }: { sources: IDataSource[], callback?: Function, tId: string, isStore?: boolean, noUseMapping?: boolean, isInterval?: boolean }) => void;
+    SHJDatasourceV2Timer: {
+        id: string
+        timer: any
+    }[];
+    // 全局事件解析器
+    SHJParseEvent: Function;
+    // 全局组件Ref
+    SHJComponentRefs: any[];
+    // 高德地图Loca对象
+    Loca: any;
+
+
+    // 客户端 Electron对象
+    electron: any;
+    // 客户端 Electron对象
+    electronAPI: any;
+    // 外部插件 pannellum
+    pannellum: any;
+    // 外部插件 videojs
+    videojs: any;
+    // 外部插件 ue
+    ue: any;
+    // 外部插件 ue5
+    ue5: Function;
+    // 高德密钥
+    _AMapSecurityConfig: any
+}
+
+declare module 'html2canvas'
+declare module 'jexcel'
+declare module 'videojs'
+declare module '@swiftcarrot/color-fns'
+declare module '*.png'
+declare module '*.jpg'

package/es/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+export * from './components/index';
+export * from './utils/shj/component-refs';
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;