sun-card-design 1.1.37 → 1.1.39

package/dist/sun-card-designer.es175.js

@@ -1,409 +0,0 @@
-import { ref, watch, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js";
-import { ColorList } from "./sun-card-designer.es76.js";
-import { useCardManageStore } from "./sun-card-designer.es13.js";
-/* empty css                        */
-import _export_sfc from "./sun-card-designer.es16.js";
-const _sfc_main = {
-  __name: "barChart3dComp",
-  props: ["record"],
-  setup(__props) {
-    const props = __props;
-    const currentUuid = ref(null);
-    const cardManageStore = useCardManageStore();
-    watch(
-      () => cardManageStore.currentSelectUuid,
-      (val) => {
-        currentUuid.value = val;
-      }
-    );
-    const containerRef = ref(null);
-    let renderer = null;
-    let labelRenderer = null;
-    let scene = null;
-    let camera = null;
-    let animationId = null;
-    let resizeObserver = null;
-    let barsGroup = null;
-    let controls = null;
-    let hasFramedView = false;
-    let defaultBarColor = null;
-    let envTexture = null;
-    const chartStyle = computed(() => {
-      const style = props.record?.options?.style || {};
-      return {
-        width: style.width || "100%",
-        height: style.height || "260px"
-      };
-    });
-    function getChartConfig() {
-      const options = props.record?.options || {};
-      const xAxis = Array.isArray(options?.xAxisConfig) && options.xAxisConfig[0] ? options.xAxisConfig[0] : { data: ["A", "B", "C", "D", "E"] };
-      const series = Array.isArray(options?.seriesConfig) && options.seriesConfig[0] ? options.seriesConfig[0] : { data: [12, 20, 8, 16, 10], itemStyle: { colorType: "solid", color: getRandomColor() } };
-      const colorType = series?.itemStyle?.colorType || (typeof series?.itemStyle?.color === "object" ? "gradient" : "solid");
-      if (!defaultBarColor) {
-        defaultBarColor = typeof series?.itemStyle?.color === "string" && series.itemStyle.color !== "auto" ? series.itemStyle.color : getRandomColor();
-      }
-      const color = !series?.itemStyle?.color || series?.itemStyle?.color === "auto" ? defaultBarColor : series.itemStyle.color;
-      const data = Array.isArray(series?.data) ? series.data : [];
-      const labels = Array.isArray(xAxis?.data) ? xAxis.data : data.map((_, i) => String(i + 1));
-      return { data, labels, color, colorType };
-    }
-    function getRandomColor() {
-      const list = Array.isArray(ColorList) && ColorList.length ? ColorList : ["#2b7fff"];
-      const idx = Math.floor(Math.random() * list.length);
-      return list[idx];
-    }
-    function initScene() {
-      if (!containerRef.value) return;
-      const { clientWidth, clientHeight } = containerRef.value;
-      scene = new THREE.Scene();
-      scene.background = null;
-      const aspect = Math.max(clientWidth, 1) / Math.max(clientHeight, 1);
-      camera = new THREE.PerspectiveCamera(40, aspect, 0.1, 1e3);
-      const { data } = getChartConfig();
-      const barWidth = 0.8;
-      const gap = 1.6;
-      const totalWidth = data.length * (barWidth + gap);
-      const centerX = totalWidth / 2;
-      const maxBarHeight = 8;
-      const centerY = maxBarHeight / 2;
-      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
-      renderer.setSize(clientWidth, clientHeight);
-      renderer.toneMapping = THREE.LinearToneMapping;
-      renderer.toneMappingExposure = 1.6;
-      renderer.outputColorSpace = THREE.SRGBColorSpace;
-      containerRef.value.appendChild(renderer.domElement);
-      try {
-        const jpgUrl = new URL("/assets/pic1.jpg", import.meta.url).href;
-        const textureLoader = new THREE.TextureLoader();
-        textureLoader.load(
-          jpgUrl,
-          (tex) => {
-            tex.mapping = THREE.EquirectangularReflectionMapping;
-            tex.colorSpace = THREE.SRGBColorSpace;
-            tex.userData = { brightness: 1.6, contrast: 1.2 };
-            envTexture = tex;
-            if (scene) {
-              scene.background = envTexture;
-              scene.environment = envTexture;
-            } else {
-              envTexture.dispose();
-              envTexture = null;
-            }
-          },
-          void 0,
-          () => {
-          }
-        );
-      } catch (e) {
-        return e;
-      }
-      labelRenderer = new CSS2DRenderer();
-      labelRenderer.setSize(clientWidth, clientHeight);
-      labelRenderer.domElement.style.position = "absolute";
-      labelRenderer.domElement.style.top = "0px";
-      labelRenderer.domElement.style.pointerEvents = "none";
-      containerRef.value.appendChild(labelRenderer.domElement);
-      addXYAxes();
-      barsGroup = new THREE.Group();
-      scene.add(barsGroup);
-      buildBars();
-      controls = new OrbitControls(camera, renderer.domElement);
-      controls.enableDamping = true;
-      controls.enablePan = true;
-      controls.enableRotate = true;
-      controls.enableZoom = true;
-      controls.screenSpacePanning = true;
-      controls.panSpeed = 1;
-      controls.rotateSpeed = 0.5;
-      controls.zoomSpeed = 1;
-      controls.autoRotate = false;
-      controls.target.set(centerX, centerY, 0);
-      camera.position.set(centerX, centerY, 20);
-      camera.lookAt(centerX, centerY, 0);
-      camera.rotation.set(0, 0, 0);
-      controls.update();
-      startAnimate();
-      observeResize();
-    }
-    function clearGroup(group) {
-      if (!group) return;
-      for (let i = group.children.length - 1; i >= 0; i--) {
-        const child = group.children[i];
-        if (child.children && child.children.length) {
-          clearGroup(child);
-        }
-        if (child.isCSS2DObject && child.element && child.element.parentNode) {
-          child.element.parentNode.removeChild(child.element);
-        }
-        group.remove(child);
-        if (child.geometry) child.geometry.dispose();
-        if (child.material) {
-          if (Array.isArray(child.material)) child.material.forEach((m) => m.dispose());
-          else child.material.dispose();
-        }
-      }
-    }
-    function buildBars() {
-      if (!barsGroup) return;
-      clearGroup(barsGroup);
-      const { data, color, colorType } = getChartConfig();
-      if (!Array.isArray(data) || data.length === 0) return;
-      const maxValue = Math.max(...data.map((v) => Number.isFinite(v) ? v : 0), 1);
-      const maxBarHeight = 8;
-      const barWidth = 0.8;
-      const gap = 1.6;
-      const totalWidth = data.length * (barWidth + gap);
-      const startX = barWidth / 2;
-      const materialFactory = (() => {
-        if (colorType === "gradient" && typeof color === "object" && Array.isArray(color.colorStops)) {
-          const tex = createVerticalGradientTexture(color);
-          const mat = new THREE.MeshStandardMaterial({ color: 16777215, map: tex, transparent: false });
-          mat.needsUpdate = true;
-          return () => mat;
-        }
-        return () => new THREE.MeshStandardMaterial({ color: new THREE.Color(typeof color === "string" ? color : defaultBarColor) });
-      })();
-      data.forEach((v, idx) => {
-        const value = Number(v) || 0;
-        const height = value / maxValue * maxBarHeight;
-        const geometry = new THREE.BoxGeometry(barWidth, Math.max(height, 0.01), barWidth);
-        const mesh = new THREE.Mesh(geometry, materialFactory());
-        mesh.position.set(startX + idx * (barWidth + gap), height / 2, 0);
-        mesh.castShadow = false;
-        mesh.receiveShadow = false;
-        barsGroup.add(mesh);
-        const valueDiv = document.createElement("div");
-        valueDiv.className = "bar-value-label";
-        valueDiv.textContent = String(value);
-        valueDiv.style.color = "#ffffff";
-        valueDiv.style.fontSize = "12px";
-        valueDiv.style.fontFamily = "Arial, sans-serif";
-        valueDiv.style.textAlign = "center";
-        valueDiv.style.pointerEvents = "none";
-        const valueObj = new CSS2DObject(valueDiv);
-        valueObj.position.set(startX + idx * (barWidth + gap), Math.max(height, 0.01) + 0.4, 0);
-        barsGroup.add(valueObj);
-      });
-      if (!hasFramedView) {
-        const zDistance = Math.max(14, totalWidth * 1.2);
-        const anchorX = -totalWidth * 0.5;
-        const yCenter = 10 / 2;
-        camera.position.set(anchorX, yCenter, zDistance);
-        controls && controls.target.set(anchorX, yCenter, 0);
-        camera.lookAt(anchorX, yCenter, 0);
-        hasFramedView = true;
-      }
-    }
-    function addXYAxes() {
-      const axisGroup = new THREE.Group();
-      axisGroup.name = "xy-axis-group";
-      const old = scene.getObjectByName("xy-axis-group");
-      if (old) {
-        clearGroup(old);
-        scene.remove(old);
-      }
-      const materialX = new THREE.MeshBasicMaterial({ color: 16777215 });
-      const materialY = new THREE.MeshBasicMaterial({ color: 16777215 });
-      const materialTick = new THREE.MeshBasicMaterial({ color: 16777215 });
-      const { data, labels } = getChartConfig();
-      const maxValue = Math.max(...data.map((v) => Number.isFinite(v) ? v : 0), 1);
-      const xLen = Math.max(20, data.length * 1.5);
-      const yLen = 10;
-      const xCylinderGeom = new THREE.CylinderGeometry(0.05, 0.05, xLen, 8);
-      const xCylinder = new THREE.Mesh(xCylinderGeom, materialX);
-      xCylinder.rotation.z = Math.PI / 2;
-      xCylinder.position.set(xLen / 2, 0, 0);
-      axisGroup.add(xCylinder);
-      const xArrowGeom = new THREE.ConeGeometry(0.2, 0.8, 8);
-      const xArrow = new THREE.Mesh(xArrowGeom, materialX);
-      xArrow.rotation.z = -Math.PI / 2;
-      xArrow.position.set(xLen, 0, 0);
-      axisGroup.add(xArrow);
-      const barWidth = 0.8;
-      const gap = 1.6;
-      const startX = barWidth / 2;
-      labels.forEach((label, idx) => {
-        const x = startX + idx * (barWidth + gap);
-        const tickGeom = new THREE.CylinderGeometry(0.05, 0.05, 0.3, 6);
-        const tick = new THREE.Mesh(tickGeom, materialTick);
-        tick.position.set(x, -0.15, 0);
-        axisGroup.add(tick);
-        const labelDiv = document.createElement("div");
-        labelDiv.className = "axis-label";
-        labelDiv.textContent = label;
-        labelDiv.style.color = "#ffffff";
-        labelDiv.style.fontSize = "14px";
-        labelDiv.style.fontFamily = "Arial, sans-serif";
-        labelDiv.style.textAlign = "center";
-        labelDiv.style.pointerEvents = "none";
-        const labelObject = new CSS2DObject(labelDiv);
-        labelObject.position.set(x, -2, 0);
-        axisGroup.add(labelObject);
-      });
-      const yCylinderGeom = new THREE.CylinderGeometry(0.05, 0.05, yLen, 8);
-      const yCylinder = new THREE.Mesh(yCylinderGeom, materialY);
-      yCylinder.position.set(0, yLen / 2, 0);
-      axisGroup.add(yCylinder);
-      const yArrowGeom = new THREE.ConeGeometry(0.2, 0.8, 8);
-      const yArrow = new THREE.Mesh(yArrowGeom, materialY);
-      yArrow.position.set(0, yLen, 0);
-      axisGroup.add(yArrow);
-      const tickCount = 5;
-      for (let i = 0; i <= tickCount; i++) {
-        const value = maxValue / tickCount * i;
-        const y = yLen / tickCount * i;
-        const tickGeom = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 6);
-        const tick = new THREE.Mesh(tickGeom, materialTick);
-        tick.rotation.z = Math.PI / 2;
-        tick.position.set(-0.15, y, 0);
-        axisGroup.add(tick);
-        const labelDiv = document.createElement("div");
-        labelDiv.className = "axis-label";
-        labelDiv.textContent = Math.round(value).toString();
-        labelDiv.style.color = "#ffffff";
-        labelDiv.style.fontSize = "12px";
-        labelDiv.style.fontFamily = "Arial, sans-serif";
-        labelDiv.style.textAlign = "right";
-        labelDiv.style.pointerEvents = "none";
-        const labelObject = new CSS2DObject(labelDiv);
-        labelObject.position.set(-1, y, 0);
-        axisGroup.add(labelObject);
-      }
-      scene.add(axisGroup);
-    }
-    function createVerticalGradientTexture(gradient) {
-      const size = 128;
-      const canvas = document.createElement("canvas");
-      canvas.width = 1;
-      canvas.height = size;
-      const ctx = canvas.getContext("2d");
-      const grd = ctx.createLinearGradient(0, 0, 0, size);
-      const stops = Array.isArray(gradient.colorStops) ? gradient.colorStops : [];
-      if (stops.length === 0) {
-        grd.addColorStop(0, "#83bff6");
-        grd.addColorStop(1, "#188df0");
-      } else {
-        stops.forEach((s) => {
-          const off = typeof s.offset === "number" ? Math.min(Math.max(s.offset, 0), 1) : 0;
-          grd.addColorStop(off, s.color || "#ffffff");
-        });
-      }
-      ctx.fillStyle = grd;
-      ctx.fillRect(0, 0, 1, size);
-      const texture = new THREE.CanvasTexture(canvas);
-      texture.wrapS = THREE.ClampToEdgeWrapping;
-      texture.wrapT = THREE.ClampToEdgeWrapping;
-      texture.needsUpdate = true;
-      return texture;
-    }
-    function startAnimate() {
-      stopAnimate();
-      const animate = () => {
-        animationId = requestAnimationFrame(animate);
-        if (controls) controls.update();
-        renderer && renderer.render(scene, camera);
-        labelRenderer && labelRenderer.render(scene, camera);
-      };
-      animate();
-    }
-    function stopAnimate() {
-      if (animationId) {
-        cancelAnimationFrame(animationId);
-        animationId = null;
-      }
-    }
-    function observeResize() {
-      if (!containerRef.value) return;
-      if (resizeObserver) resizeObserver.disconnect();
-      resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const cr = entry.contentRect;
-          onResize(Math.max(cr.width, 1), Math.max(cr.height, 1));
-        }
-      });
-      resizeObserver.observe(containerRef.value);
-    }
-    function onResize(width, height) {
-      if (!renderer || !camera) return;
-      renderer.setSize(width, height);
-      labelRenderer && labelRenderer.setSize(width, height);
-      camera.aspect = width / height;
-      camera.updateProjectionMatrix();
-    }
-    watch(
-      () => [props.record?.options?.seriesConfig, props.record?.options?.xAxisConfig],
-      () => {
-        addXYAxes();
-        buildBars();
-        const { data } = getChartConfig();
-        const barWidth = 0.8;
-        const gap = 1.6;
-        const totalWidth = data.length * (barWidth + gap);
-        const centerX = totalWidth / 2;
-        const maxBarHeight = 8;
-        const centerY = maxBarHeight / 2;
-        controls && controls.target.set(centerX, centerY, 0);
-        controls && controls.update();
-      },
-      { deep: true }
-    );
-    onMounted(() => {
-      initScene();
-    });
-    onUnmounted(() => {
-      stopAnimate();
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-        resizeObserver = null;
-      }
-      if (barsGroup) {
-        clearGroup(barsGroup);
-        barsGroup = null;
-      }
-      if (renderer) {
-        renderer.dispose();
-        if (renderer.domElement && renderer.domElement.parentNode) {
-          renderer.domElement.parentNode.removeChild(renderer.domElement);
-        }
-        renderer = null;
-      }
-      if (labelRenderer) {
-        if (labelRenderer.domElement && labelRenderer.domElement.parentNode) {
-          labelRenderer.domElement.parentNode.removeChild(labelRenderer.domElement);
-        }
-        labelRenderer = null;
-      }
-      if (envTexture) {
-        envTexture.dispose();
-        envTexture = null;
-      }
-      if (controls) {
-        controls.dispose();
-        controls = null;
-      }
-      camera = null;
-      scene = null;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mian-barChart3d", { active: currentUuid.value === props.record.uuid }]),
-        ref_key: "containerRef",
-        ref: containerRef,
-        style: normalizeStyle({
-          width: chartStyle.value.width,
-          height: chartStyle.value.height,
-          padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px`
-        })
-      }, null, 6);
-    };
-  }
-};
-const BarChart3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a51ec53a"]]);
-export {
-  BarChart3D as default
-};