@easyv/react-component-builder 0.19.3 → 0.19.5-beta.0

package/templates/three-component/index.jsx

@@ -1,122 +1,122 @@
-import React, { Component } from "react";
-import * as THREE from "three";
-import { isEqual } from "lodash";
-import { EasyVComponent3d } from "./utils/Component";
-import { reduceConfig } from "./utils/reduce-config";
-
-export default class MyComponent extends Component {
-  constructor(props) {
-    super(props);
-
-    this.component = new EasyVComponent3d(props);
-    this.initStage();
-  }
-
-  initStage = () => {
-    let { width, height } = this.component.getDimension(),
-      { cameraConfig } = this.component.config.chart.visionConfig,
-      camera = new THREE.PerspectiveCamera(
-        cameraConfig.fov,
-        width / height,
-        0.01,
-        10000
-      ),
-      renderer = new THREE.WebGLRenderer({
-        antialias: true,
-        alpha: true,
-        logarithmicDepthBuffer: true,
-      }),
-      scene = new THREE.Scene();
-
-    scene.add(new THREE.AmbientLight(0xffffff, 1));
-
-    // 测试几何体
-    const geo = new THREE.BoxGeometry(20, 20, 20);
-    const mat = new THREE.MeshNormalMaterial();
-    const box = new THREE.Mesh(geo, mat);
-    scene.add(box);
-    // :测试几何体
-
-    this.component.init({ camera, renderer, scene });
-    this.component.initOrbitControls();
-    this.updateCamera();
-    this.animate();
-  };
-
-  updateCamera = () => {
-    let { cameraConfig } = this.component.config.chart.visionConfig,
-      { fov, position, target } = cameraConfig;
-
-    this.component.setCameraFov(fov);
-    this.component.setCameraPosition(position.x, position.y, position.z);
-    this.component.setOrbitControlsPosition(target.x, target.y, target.z);
-    this.component.updateCamera();
-  };
-
-  // ========================== 3d渲染 ==========================
-  animate = () => {
-    this.component.render();
-    this.timer = requestAnimationFrame(this.animate);
-  };
-
-  // ========================== 组件生命周期 ==========================
-  componentDidMount() {
-    this.component.appendCanvasToDom(this.container);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!isEqual(this.props.configuration, nextProps.configuration)) {
-      let { config } = this.component,
-        { chart } = config,
-        { visionConfig } = chart,
-        { cameraConfig } = visionConfig;
-
-      this.component.setConfig(nextProps.configuration);
-
-      let { config: nextConfig } = this.component,
-        { chart: nextChart } = nextConfig,
-        { visionConfig: nextVisionConfig } = nextChart,
-        { cameraConfig: nextCameraConfig } = nextVisionConfig;
-
-      if (!isEqual(cameraConfig, nextCameraConfig)) {
-        this.updateCamera();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.timer && cancelAnimationFrame(this.timer);
-    this.timer = null;
-  }
-
-  render() {
-    const { configuration, id } = this.props;
-    const { chart } = reduceConfig(configuration);
-    const { dimension } = chart;
-
-    const styles = {
-      position: "absolute",
-      ...dimension.chartPosition,
-      ...dimension.chartDimension,
-    };
-
-    const containerStyle = {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-    };
-
-    /**
-     * 固定格式: 返回的div必须有className/id属性
-     */
-    return (
-      <div className="__easyv-component" style={styles} id={id}>
-        <div
-          ref={(elment) => (this.container = elment)}
-          style={containerStyle}
-        />
-      </div>
-    );
-  }
-}
+import React, { Component } from "react";
+import * as THREE from "three";
+import { isEqual } from "lodash";
+import { EasyVComponent3d } from "./utils/Component";
+import { reduceConfig } from "./utils/reduce-config";
+
+export default class MyComponent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.component = new EasyVComponent3d(props);
+    this.initStage();
+  }
+
+  initStage = () => {
+    let { width, height } = this.component.getDimension(),
+      { cameraConfig } = this.component.config.chart.visionConfig,
+      camera = new THREE.PerspectiveCamera(
+        cameraConfig.fov,
+        width / height,
+        0.01,
+        10000
+      ),
+      renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true,
+        logarithmicDepthBuffer: true,
+      }),
+      scene = new THREE.Scene();
+
+    scene.add(new THREE.AmbientLight(0xffffff, 1));
+
+    // 测试几何体
+    const geo = new THREE.BoxGeometry(20, 20, 20);
+    const mat = new THREE.MeshNormalMaterial();
+    const box = new THREE.Mesh(geo, mat);
+    scene.add(box);
+    // :测试几何体
+
+    this.component.init({ camera, renderer, scene });
+    this.component.initOrbitControls();
+    this.updateCamera();
+    this.animate();
+  };
+
+  updateCamera = () => {
+    let { cameraConfig } = this.component.config.chart.visionConfig,
+      { fov, position, target } = cameraConfig;
+
+    this.component.setCameraFov(fov);
+    this.component.setCameraPosition(position.x, position.y, position.z);
+    this.component.setOrbitControlsPosition(target.x, target.y, target.z);
+    this.component.updateCamera();
+  };
+
+  // ========================== 3d渲染 ==========================
+  animate = () => {
+    this.component.render();
+    this.timer = requestAnimationFrame(this.animate);
+  };
+
+  // ========================== 组件生命周期 ==========================
+  componentDidMount() {
+    this.component.appendCanvasToDom(this.container);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.configuration, nextProps.configuration)) {
+      let { config } = this.component,
+        { chart } = config,
+        { visionConfig } = chart,
+        { cameraConfig } = visionConfig;
+
+      this.component.setConfig(nextProps.configuration);
+
+      let { config: nextConfig } = this.component,
+        { chart: nextChart } = nextConfig,
+        { visionConfig: nextVisionConfig } = nextChart,
+        { cameraConfig: nextCameraConfig } = nextVisionConfig;
+
+      if (!isEqual(cameraConfig, nextCameraConfig)) {
+        this.updateCamera();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.timer && cancelAnimationFrame(this.timer);
+    this.timer = null;
+  }
+
+  render() {
+    const { configuration, id } = this.props;
+    const { chart } = reduceConfig(configuration);
+    const { dimension } = chart;
+
+    const styles = {
+      position: "absolute",
+      ...dimension.chartPosition,
+      ...dimension.chartDimension,
+    };
+
+    const containerStyle = {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+    };
+
+    /**
+     * 固定格式: 返回的div必须有className/id属性
+     */
+    return (
+      <div className="__easyv-component" style={styles} id={id}>
+        <div
+          ref={(elment) => (this.container = elment)}
+          style={containerStyle}
+        />
+      </div>
+    );
+  }
+}