regl-worldview - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

package.json

 {
   "name": "regl-worldview",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A reusable component for rendering 2D and 3D views using regl",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

src/camera/CameraStore.js

@@ -10,3 +10,2 @@ // @flow
 import { vec3, quat } from "gl-matrix";
-import isEqual from "lodash/isEqual";
 
@@ -60,19 +59,14 @@ import type { Vec2, Vec3, Vec4 } from "../types";
 
-  _setStateAndNotify(cameraState: CameraState) {
-    // we only want to call onChange when cameraState values actually changes, as each
-    // onChange will trigger Worldview to rerender by forceUpdate or onCameraStateChange
-    if (!isEqual(this.state, cameraState)) {
-      this.state = cameraState;
-      this._onChange(this.state);
+  cameraRotate = ([x, y]: Vec2) => {
+    // This can happen in 2D mode, when both e.movementX and e.movementY are evaluated as negative and mouseX move is 0
+    if (x === 0 && y === 0) {
+      return;
     }
-  }
-
-  cameraRotate = ([x, y]: Vec2) => {
     const { thetaOffset, phi } = this.state;
-
-    this._setStateAndNotify({
+    this.state = {
       ...this.state,
       thetaOffset: thetaOffset - x,
       phi: Math.max(0, Math.min(phi + y, Math.PI)),
-    });
+    };
+    this._onChange(this.state);
   };
@@ -82,2 +76,7 @@
   cameraMove = ([x, y]: Vec2) => {
+    // moveX and moveY both be 0 sometimes
+    if (x === 0 && y === 0) {
+      return;
+    }
+
     const { targetOffset, thetaOffset } = this.state;
@@ -89,6 +88,7 @@
 
-    this._setStateAndNotify({
+    this.state = {
       ...this.state,
       targetOffset: vec3.add(offset, targetOffset, offset),
-    });
+    };
+    this._onChange(this.state);
   };
@@ -99,9 +99,13 @@
     const newDistance: number = distanceAfterZoom(distance, zoomPercent);
-    this._setStateAndNotify({
+    if (distance === newDistance) {
+      return;
+    }
+
+    this.state = {
       ...this.state,
       distance: newDistance,
-    });
+    };
+    this._onChange(this.state);
   };
 }
-
 export { selectors };

src/commands/Command.js

@@ -121,12 +121,10 @@ //  Copyright (c) 2018-present, GM Cruise LLC
   const cmd = (props: Props<T>) => {
-    return (
-      <Command
-        reglCommand={command}
-        drawProps={props.children}
-        hitmapProps={getHitmapProps(props.getHitmapId, props.children)}
-      />
-    );
+    const hitmapProps = props.getHitmapProps
+      ? props.getHitmapProps()
+      : getHitmapProps(props.getHitmapId, props.children);
+    return <Command reglCommand={command} drawProps={props.children} hitmapProps={hitmapProps} />;
   };
   cmd.displayName = name;
+  cmd.reglCommand = command;
   return cmd;
 }

src/index.js

@@ -19,4 +19,5 @@ // @flow
 export * from "./types/index";
+export { default as WorldviewReactContext } from "./WorldviewReactContext";
 
 export { Worldview };
 export default Worldview;

src/stories/Cubes.stories.js

@@ -6,2 +6,3 @@ // @flow
 
+import { intToRGB } from "../utils/commandUtils";
 import Container from "./Container";
@@ -47,2 +48,48 @@ import { cube, p, UNIT_QUATERNION, buildMatrix, rng } from "./util";
 
+class DynamicCubes extends React.Component<any, any> {
+  state = { cubeCount: 1, cubeId: -1 };
+  onContainerClick = (e, args) => {
+    this.setState({ cubeId: args.clickedObjectId || -1 });
+  };
+
+  render() {
+    const { range } = this.props;
+    const { cubeCount } = this.state;
+    const cubes = new Array(cubeCount).fill(0).map((_, i) => {
+      const marker = cube(range, i + 1);
+      const { position } = marker.pose;
+      const { x, y, z } = position;
+      return {
+        ...marker,
+        color: marker.id % 2 ? [1, 1, 0, 1] : [1, 0, 0, 1],
+        pose: {
+          orientation: { x: 0, y: 0, z: 0, w: 1 },
+          position: { x: x + i * 4, y: y + i * 4, z: z + i * 4 },
+        },
+      };
+    });
+
+    function getHitmapProps() {
+      const result = cubes
+        .filter((cube) => cube.id % 2)
+        .map((cube) => ({
+          ...cube,
+          color: intToRGB(cube.id),
+        }));
+      return result;
+    }
+
+    return (
+      <Container cameraState={DEFAULT_CAMERA_STATE} onClick={this.onContainerClick}>
+        <div style={{ position: "absolute", top: 30, left: 30 }}>
+          <div>Only the yellow cubes should be clickable</div>
+          <div>you clicked on cube: {this.state.cubeId} </div>
+          <button onClick={() => this.setState({ cubeCount: cubeCount + 1 })}>Add Cube</button>
+        </div>
+        <Cubes getHitmapProps={getHitmapProps}>{cubes}</Cubes>
+      </Container>
+    );
+  }
+}
+
 storiesOf("Worldview", module)
@@ -61,2 +108,8 @@ .add(
   .add(
+    "<Cubes> - dynamic hitmap",
+    withRange((range) => {
+      return <DynamicCubes range={range} />;
+    })
+  )
+  .add(
     "<Cubes> - instanced",
@@ -63,0 +116,0 @@ withRange((range) => {

src/WorldviewContext.js

@@ -105,3 +105,3 @@ // @flow
         canvas,
-        extensions: ["angle_instanced_arrays", "oes_texture_float"],
+        extensions: ["angle_instanced_arrays", "oes_texture_float", "oes_element_index_uint"],
         profile: process.env.NODE_ENV !== "production",
@@ -108,0 +108,0 @@ })

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2040654

increased by0.2%

Number of package files

51

increased by2%

Lines of code

10686

increased by0.8%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes