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

package/templates/three-component/utils/Component.js

@@ -1,274 +1,274 @@
-// import OrbitControls from 'three-orbitcontrols';
-import OrbitControls from './OrbitControls';
-import { Scene, WebGLRenderer, PerspectiveCamera, OrthographicCamera, Vector3 } from 'three';
-import { dispatch } from 'd3-dispatch';
-import { reduceConfig } from './reduce-config';
-export class EasyVComponent {
-  constructor(props) {
-    let { configuration, data, id } = props;
-    this.id = id;
-    this.setConfig(configuration);
-    this.setProps(props);
-    this.setData(data);
-  }
-
-  getConfig() {
-    return this.config;
-  }
-
-  setConfig(configuration) {
-    this.config = reduceConfig(configuration);
-  }
-
-  setProps(props) {
-    this.props = props;
-  }
-
-  setData(data) {
-    this.data = data;
-  }
-
-  update(configuration, data) {
-    this.setConfig(configuration);
-    this.setData(data);
-  }
-
-  animate() { }
-
-  destroy() { }
-}
-export class EasyVComponent3d extends EasyVComponent {
-  devicePixelRatio = window.devicePixelRatio;
-
-  childrenComponent = {};
-
-  initChildren(childrenConfig, childrenData, children) {
-    this.setChildrenConfig(childrenConfig);
-    this.setChildrenData(childrenData);
-    this.setChildren(children);
-  }
-  setDispath = (...names) => {
-    this.dispatch = dispatch(...names);
-  };
-  setChildrenData(childrenData) {
-    this.childrenData = childrenData;
-  }
-  getTextPosition = (position) => {
-    let { width, height } = this.getDimension(),
-      { x, y } = position.clone().project(this.camera),
-      halfWidth = Number(width / 2),
-      halfHeight = Number(height / 2),
-      left = Math.round(x * halfWidth + halfWidth),
-      top = Math.round(-y * halfHeight + halfHeight);
-    return { left, top };
-  };
-  setChildrenConfig(childrenConfig) {
-    this.childrenConfig = childrenConfig;
-  }
-
-  getDimension = () => {
-    let { dimension } = this.config.chart,
-      { left, top } = dimension.chartPosition,
-      { width, height } = dimension.chartDimension;
-    return { width, height, left, top };
-  };
-
-  init = ({ camera, renderer, scene }) => {
-    this.initCamera(camera);
-    this.initRenderer(renderer);
-    this.initScene(scene);
-    this.setRenderSize(
-      (this.config.chart.shapeStyle && this.config.chart.shapeStyle.devicePixelRatio) || window.devicePixelRatio
-    );
-  };
-  initCamera = (camera, position, lookAt) => {
-    this.camera = camera;
-    if (position) {
-      this.setCameraPosition(position);
-    }
-    if (lookAt) {
-      this.setCameraLookAt(lookAt);
-    }
-    (position || lookAt) && this.updateCamera();
-  };
-  initRenderer = (renderer) => {
-    this.renderer = renderer;
-  };
-  initScene = (scene) => {
-    this.scene = scene;
-  };
-  setChildren = (childrenComponent) => {
-    childrenComponent.forEach((item) => {
-      var childrenProps = this.getChildren(item.name);
-      childrenProps &&
-        childrenProps.length > 0 &&
-        childrenProps.forEach((props) => {
-          this.initChild(props.id, item.child, props);
-        });
-    });
-  };
-
-  initChild = (id, Component, item) => {
-    var component = new Component(item, this);
-    this.childrenComponent['component_' + id] = component;
-    this.scene.add(component.getComponent());
-  };
-
-  getChildren = (type) => {
-    var config = this.getChildrenConfig(type);
-    return this.getChildrenProps(config);
-  };
-
-  getChildrenProps = (config) => {
-    return config
-      .map((item) => {
-        var currentData = this.childrenData.filter(
-          (data) => data.id !== undefined && item.id !== undefined && data.id === item.id
-        );
-        if (currentData && currentData.length > 0) {
-          return { ...item, data: currentData[0].data };
-        }
-      })
-      .filter((item) => !!item);
-  };
-
-  getChildrenConfig = (type = '') => {
-    var childrenConfig = this.reduceChildrenConfig();
-    return childrenConfig
-      .filter((item) => type === (item && item.base && item.base.module_name))
-      .filter((item) => !!item);
-  };
-
-  reduceChildrenConfig = () => {
-    return this.childrenConfig
-      ? this.childrenConfig.map((item) => {
-        return { ...item, config: reduceConfig(item.configuration) };
-      })
-      : [];
-  };
-
-  initCamera() {
-    var { type } = this.camera;
-    if (type === '') {
-    } else {
-    }
-  }
-
-  setCameraAspect = () => {
-    let { width, height } = this.getDimension();
-    this.camera.aspect = width / height;
-  };
-
-  setCameraFov(fov) {
-    this.camera.fov = fov;
-  }
-
-  setCameraPosition = (x, y, z) => {
-    this.camera.position.set(x, y, z);
-    this.cameraPosition = { x, y, z };
-  };
-
-  setOrbitControlsPosition = (x, y, z) => {
-    if (this.orbitControls) {
-      this.orbitControls.target = new Vector3(x, y, z);
-    }
-  };
-  setCameraLookAt = (x, y, z) => {
-    this.camera.lookAt(new Vector3(x, y, z));
-  };
-  updateCamera = () => {
-    this.camera.updateProjectionMatrix();
-    this.camera.updateMatrixWorld();
-    if (this.orbitControls) {
-      this.orbitControls.update();
-    }
-  };
-  initOrbitControls = () => {
-    this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
-  };
-  setOrbitControlsEnable = (enable) => {
-    this.orbitControls.enable = !!enable;
-  };
-  appendCanvasToDom = (wraper) => {
-    wraper.appendChild(this.renderer.domElement);
-  };
-  render = () => {
-    this.renderer.render(this.scene, this.camera);
-  };
-  setRenderSize = (devicePixelRatio) => {
-    var { width, height } = this.getDimension();
-    this.renderer.setSize(width, height);
-    if (devicePixelRatio) {
-      this.devicePixelRatio = devicePixelRatio;
-      this.renderer.setPixelRatio(this.devicePixelRatio);
-    } else {
-      this.renderer.setPixelRatio(this.devicePixelRatio);
-    }
-  };
-  cameraChanged = () => { };
-  setAttribute = (key, value) => {
-    this[key] = value;
-  };
-  updateChildren(props, nextProps) {
-    this.setProps(nextProps);
-
-    var { childrenConfig, childrenData } = props,
-      { childrenConfig: nextChildrenConfig, childrenData: nextChildrenData } = nextProps,
-      children = this.getChildrenId(childrenConfig), //props中children的ID组件数组
-      nextChildren = this.getChildrenId(nextChildrenConfig), //nextProps中children的ID组件数组
-      arr = this.differArr(children, nextChildren), //在children中有，在nextchildren中没有的元素
-      nextArr = this.differArr(nextChildren, children); //在nextChildren中有，在children中没有的元素
-
-    arr &&
-      arr.length > 0 &&
-      arr.forEach((id) => {
-        //如果老组件的ID未在新的组件列表中找到，说明已被删除，就从场景中删除
-        this.childrenComponent['component_' + id] && this.childrenComponent['component_' + id].remove(this.scene);
-      });
-    nextArr &&
-      nextArr.length > 0 &&
-      nextArr.forEach((id) => {
-        //如果组件的ID未在老的组件列表中找到，说明是新增组件
-        var currentNextProps = this.filterItem(nextChildrenConfig, 'id', id)[0],
-          currentNextData = this.filterItem(nextChildrenData, 'id', id)[0],
-          { base, configuration } = currentNextProps,
-          { child } = this.filterItem(props.children, 'name', base.module_name)[0];
-        this.initChild(
-          id,
-          child,
-          Object.assign({}, currentNextProps, { config: reduceConfig(configuration), data: currentNextData.data })
-        );
-      });
-    nextChildren &&
-      nextChildren.length > 0 &&
-      nextChildren.forEach((id) => {
-        if (
-          nextArr.indexOf(id) < 0 &&
-          children.indexOf(id) > -1 &&
-          nextChildren.indexOf(id) > -1 &&
-          this.childrenComponent['component_' + id]
-        ) {
-          let config = this.filterItem(nextProps.childrenConfig, 'id', id)[0].configuration,
-            data = this.filterItem(nextProps.childrenData, 'id', id)[0].data;
-          this.childrenComponent['component_' + id].update(config, data);
-        }
-      });
-  }
-  getChildrenId(children = []) {
-    return children.map((item) => item.id);
-  }
-  differArr(arr, comparedArr) {
-    var tmp = [];
-    for (var i = 0, j = arr.length; i < j; i++) {
-      if (comparedArr.indexOf(arr[i]) < 0) {
-        tmp.push(arr[i]);
-      }
-    }
-    return tmp;
-  }
-  filterItem(arr, name, value) {
-    return arr.filter((item) => {
-      return item[name] === value;
-    });
-  }
-}
+// import OrbitControls from 'three-orbitcontrols';
+import OrbitControls from './OrbitControls';
+import { Scene, WebGLRenderer, PerspectiveCamera, OrthographicCamera, Vector3 } from 'three';
+import { dispatch } from 'd3-dispatch';
+import { reduceConfig } from './reduce-config';
+export class EasyVComponent {
+  constructor(props) {
+    let { configuration, data, id } = props;
+    this.id = id;
+    this.setConfig(configuration);
+    this.setProps(props);
+    this.setData(data);
+  }
+
+  getConfig() {
+    return this.config;
+  }
+
+  setConfig(configuration) {
+    this.config = reduceConfig(configuration);
+  }
+
+  setProps(props) {
+    this.props = props;
+  }
+
+  setData(data) {
+    this.data = data;
+  }
+
+  update(configuration, data) {
+    this.setConfig(configuration);
+    this.setData(data);
+  }
+
+  animate() { }
+
+  destroy() { }
+}
+export class EasyVComponent3d extends EasyVComponent {
+  devicePixelRatio = window.devicePixelRatio;
+
+  childrenComponent = {};
+
+  initChildren(childrenConfig, childrenData, children) {
+    this.setChildrenConfig(childrenConfig);
+    this.setChildrenData(childrenData);
+    this.setChildren(children);
+  }
+  setDispath = (...names) => {
+    this.dispatch = dispatch(...names);
+  };
+  setChildrenData(childrenData) {
+    this.childrenData = childrenData;
+  }
+  getTextPosition = (position) => {
+    let { width, height } = this.getDimension(),
+      { x, y } = position.clone().project(this.camera),
+      halfWidth = Number(width / 2),
+      halfHeight = Number(height / 2),
+      left = Math.round(x * halfWidth + halfWidth),
+      top = Math.round(-y * halfHeight + halfHeight);
+    return { left, top };
+  };
+  setChildrenConfig(childrenConfig) {
+    this.childrenConfig = childrenConfig;
+  }
+
+  getDimension = () => {
+    let { dimension } = this.config.chart,
+      { left, top } = dimension.chartPosition,
+      { width, height } = dimension.chartDimension;
+    return { width, height, left, top };
+  };
+
+  init = ({ camera, renderer, scene }) => {
+    this.initCamera(camera);
+    this.initRenderer(renderer);
+    this.initScene(scene);
+    this.setRenderSize(
+      (this.config.chart.shapeStyle && this.config.chart.shapeStyle.devicePixelRatio) || window.devicePixelRatio
+    );
+  };
+  initCamera = (camera, position, lookAt) => {
+    this.camera = camera;
+    if (position) {
+      this.setCameraPosition(position);
+    }
+    if (lookAt) {
+      this.setCameraLookAt(lookAt);
+    }
+    (position || lookAt) && this.updateCamera();
+  };
+  initRenderer = (renderer) => {
+    this.renderer = renderer;
+  };
+  initScene = (scene) => {
+    this.scene = scene;
+  };
+  setChildren = (childrenComponent) => {
+    childrenComponent.forEach((item) => {
+      var childrenProps = this.getChildren(item.name);
+      childrenProps &&
+        childrenProps.length > 0 &&
+        childrenProps.forEach((props) => {
+          this.initChild(props.id, item.child, props);
+        });
+    });
+  };
+
+  initChild = (id, Component, item) => {
+    var component = new Component(item, this);
+    this.childrenComponent['component_' + id] = component;
+    this.scene.add(component.getComponent());
+  };
+
+  getChildren = (type) => {
+    var config = this.getChildrenConfig(type);
+    return this.getChildrenProps(config);
+  };
+
+  getChildrenProps = (config) => {
+    return config
+      .map((item) => {
+        var currentData = this.childrenData.filter(
+          (data) => data.id !== undefined && item.id !== undefined && data.id === item.id
+        );
+        if (currentData && currentData.length > 0) {
+          return { ...item, data: currentData[0].data };
+        }
+      })
+      .filter((item) => !!item);
+  };
+
+  getChildrenConfig = (type = '') => {
+    var childrenConfig = this.reduceChildrenConfig();
+    return childrenConfig
+      .filter((item) => type === (item && item.base && item.base.module_name))
+      .filter((item) => !!item);
+  };
+
+  reduceChildrenConfig = () => {
+    return this.childrenConfig
+      ? this.childrenConfig.map((item) => {
+        return { ...item, config: reduceConfig(item.configuration) };
+      })
+      : [];
+  };
+
+  initCamera() {
+    var { type } = this.camera;
+    if (type === '') {
+    } else {
+    }
+  }
+
+  setCameraAspect = () => {
+    let { width, height } = this.getDimension();
+    this.camera.aspect = width / height;
+  };
+
+  setCameraFov(fov) {
+    this.camera.fov = fov;
+  }
+
+  setCameraPosition = (x, y, z) => {
+    this.camera.position.set(x, y, z);
+    this.cameraPosition = { x, y, z };
+  };
+
+  setOrbitControlsPosition = (x, y, z) => {
+    if (this.orbitControls) {
+      this.orbitControls.target = new Vector3(x, y, z);
+    }
+  };
+  setCameraLookAt = (x, y, z) => {
+    this.camera.lookAt(new Vector3(x, y, z));
+  };
+  updateCamera = () => {
+    this.camera.updateProjectionMatrix();
+    this.camera.updateMatrixWorld();
+    if (this.orbitControls) {
+      this.orbitControls.update();
+    }
+  };
+  initOrbitControls = () => {
+    this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
+  };
+  setOrbitControlsEnable = (enable) => {
+    this.orbitControls.enable = !!enable;
+  };
+  appendCanvasToDom = (wraper) => {
+    wraper.appendChild(this.renderer.domElement);
+  };
+  render = () => {
+    this.renderer.render(this.scene, this.camera);
+  };
+  setRenderSize = (devicePixelRatio) => {
+    var { width, height } = this.getDimension();
+    this.renderer.setSize(width, height);
+    if (devicePixelRatio) {
+      this.devicePixelRatio = devicePixelRatio;
+      this.renderer.setPixelRatio(this.devicePixelRatio);
+    } else {
+      this.renderer.setPixelRatio(this.devicePixelRatio);
+    }
+  };
+  cameraChanged = () => { };
+  setAttribute = (key, value) => {
+    this[key] = value;
+  };
+  updateChildren(props, nextProps) {
+    this.setProps(nextProps);
+
+    var { childrenConfig, childrenData } = props,
+      { childrenConfig: nextChildrenConfig, childrenData: nextChildrenData } = nextProps,
+      children = this.getChildrenId(childrenConfig), //props中children的ID组件数组
+      nextChildren = this.getChildrenId(nextChildrenConfig), //nextProps中children的ID组件数组
+      arr = this.differArr(children, nextChildren), //在children中有，在nextchildren中没有的元素
+      nextArr = this.differArr(nextChildren, children); //在nextChildren中有，在children中没有的元素
+
+    arr &&
+      arr.length > 0 &&
+      arr.forEach((id) => {
+        //如果老组件的ID未在新的组件列表中找到，说明已被删除，就从场景中删除
+        this.childrenComponent['component_' + id] && this.childrenComponent['component_' + id].remove(this.scene);
+      });
+    nextArr &&
+      nextArr.length > 0 &&
+      nextArr.forEach((id) => {
+        //如果组件的ID未在老的组件列表中找到，说明是新增组件
+        var currentNextProps = this.filterItem(nextChildrenConfig, 'id', id)[0],
+          currentNextData = this.filterItem(nextChildrenData, 'id', id)[0],
+          { base, configuration } = currentNextProps,
+          { child } = this.filterItem(props.children, 'name', base.module_name)[0];
+        this.initChild(
+          id,
+          child,
+          Object.assign({}, currentNextProps, { config: reduceConfig(configuration), data: currentNextData.data })
+        );
+      });
+    nextChildren &&
+      nextChildren.length > 0 &&
+      nextChildren.forEach((id) => {
+        if (
+          nextArr.indexOf(id) < 0 &&
+          children.indexOf(id) > -1 &&
+          nextChildren.indexOf(id) > -1 &&
+          this.childrenComponent['component_' + id]
+        ) {
+          let config = this.filterItem(nextProps.childrenConfig, 'id', id)[0].configuration,
+            data = this.filterItem(nextProps.childrenData, 'id', id)[0].data;
+          this.childrenComponent['component_' + id].update(config, data);
+        }
+      });
+  }
+  getChildrenId(children = []) {
+    return children.map((item) => item.id);
+  }
+  differArr(arr, comparedArr) {
+    var tmp = [];
+    for (var i = 0, j = arr.length; i < j; i++) {
+      if (comparedArr.indexOf(arr[i]) < 0) {
+        tmp.push(arr[i]);
+      }
+    }
+    return tmp;
+  }
+  filterItem(arr, name, value) {
+    return arr.filter((item) => {
+      return item[name] === value;
+    });
+  }
+}