v0.4.0 publish

Wisc-HCI · Sep 6, 2021 · 1fa08df · 1fa08df
1 parent d1bb6d0
commit 1fa08df
Show file tree

Hide file tree

Showing 18 changed files with 439 additions and 357 deletions.
diff --git a/dist/Content.js b/dist/Content.js
@@ -23,8 +23,6 @@ var _Hull = _interopRequireDefault(require("./Hull"));
 
 var _Line = _interopRequireDefault(require("./Line"));
 
-var _SceneStore = _interopRequireDefault(require("./SceneStore"));
-
 var _Light = require("./Util/Light");
 
 var _MaterialMaker = require("./Util/MaterialMaker");
@@ -61,38 +59,42 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var renderTree = function renderTree(activeTf, displayTfs, allTfs, allItems, allLines, allHulls) {
+var renderTree = function renderTree(activeTf, displayTfs, allTfs, allItems, allLines, allHulls, store) {
   var TFComponent = activeTf === 'world' ? _TF.WorldTF : _TF.default;
   return /*#__PURE__*/_react.default.createElement(TFComponent, {
     key: activeTf,
     tfKey: activeTf,
-    displayTfs: displayTfs
+    displayTfs: displayTfs,
+    store: store
   }, allTfs.filter(function (v) {
     return v.frame === activeTf || activeTf === 'world' && !v.frame;
   }).map(function (tf) {
-    return renderTree(tf.tfKey, displayTfs, allTfs, allItems, allLines, allHulls);
+    return renderTree(tf.tfKey, displayTfs, allTfs, allItems, allLines, allHulls, store);
   }), allItems.filter(function (v) {
     return v.frame === activeTf || activeTf === 'world' && !v.frame;
   }).map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_Item.default, {
       key: item.itemKey,
       itemKey: item.itemKey,
-      node: item.node
+      node: item.node,
+      store: store
     });
   }), allLines.filter(function (v) {
     return v.frame === activeTf || activeTf === 'world' && !v.frame;
   }).map(function (line) {
     return /*#__PURE__*/_react.default.createElement(_Line.default, {
       key: line.lineKey,
-      lineKey: line.lineKey
+      lineKey: line.lineKey,
+      store: store
     });
   }), allHulls.filter(function (v) {
     return v.frame === activeTf || activeTf === 'world' && !v.frame;
   }).map(function (hull) {
     return /*#__PURE__*/_react.default.createElement(_Hull.default, {
       key: hull.hullKey,
       hullKey: hull.hullKey,
-      node: hull.node
+      node: hull.node,
+      store: store
     });
   }));
 };
@@ -107,15 +109,16 @@ function Content(props) {
       planeColor = props.planeColor,
       highlightColor = props.highlightColor,
       plane = props.plane,
-      fov = props.fov;
+      fov = props.fov,
+      store = props.store;
   var camera = (0, _fiber.useThree)(function (state) {
     return state.camera;
   });
   camera.up.set(0, 0, 1);
   camera.fov = fov ? fov : 60;
   camera.updateProjectionMatrix();
 
-  var _useSceneStore = (0, _SceneStore.default)(function (state) {
+  var _store = store(function (state) {
     var reducedTfs = Object.entries(state.tfs).map(function (pair) {
       var _pair = _slicedToArray(pair, 2),
           tfKey = _pair[0],
@@ -176,11 +179,11 @@ function Content(props) {
     });
     return [reducedTfs, reducedItems, reducedLines, reducedHulls];
   }),
-      _useSceneStore2 = _slicedToArray(_useSceneStore, 4),
-      tfs = _useSceneStore2[0],
-      items = _useSceneStore2[1],
-      lines = _useSceneStore2[2],
-      hulls = _useSceneStore2[3];
+      _store2 = _slicedToArray(_store, 4),
+      tfs = _store2[0],
+      items = _store2[1],
+      lines = _store2[2],
+      hulls = _store2[3];
 
   var highlightedItemRefs = [].concat.apply([], items.filter(function (item) {
     return item.highlighted;
@@ -234,7 +237,7 @@ function Content(props) {
     scale: 1000,
     position: [0, 0, plane ? plane - 0.01 : -0.01],
     material: _MaterialMaker.MaterialMaker.apply(void 0, planeRGBA)
-  }), renderTree('world', displayTfs, tfs, items, lines, hulls), /*#__PURE__*/_react.default.createElement("group", {
+  }), renderTree('world', displayTfs, tfs, items, lines, hulls, store), /*#__PURE__*/_react.default.createElement("group", {
     position: [0, 0, plane ? plane : 0],
     rotation: [Math.PI / 2, 0, 0],
     up: [0, 0, 1]
@@ -257,7 +260,8 @@ function Content(props) {
           orbitControls.current.enabled = false;
         }
       },
-      onMove: movableItem.onMove
+      onMove: movableItem.onMove,
+      store: store
     });
   }), /*#__PURE__*/_react.default.createElement(_postprocessing.EffectComposer, {
     autoClear: false,

diff --git a/dist/GhostItem.js b/dist/GhostItem.js
@@ -9,12 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SceneStore = _interopRequireDefault(require("./SceneStore"));
-
 var _MeshConvert = require("./Util/MeshConvert");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,18 +29,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var GhostItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var itemKey = _ref.itemKey,
-      highlightColor = _ref.highlightColor;
+      highlightColor = _ref.highlightColor,
+      store = _ref.store;
 
-  var _useSceneStore = (0, _SceneStore.default)((0, _react.useCallback)(function (state) {
+  var _store = store((0, _react.useCallback)(function (state) {
     var _state$items$itemKey, _state$items$itemKey2, _state$items$itemKey3, _state$items$itemKey4;
 
     return [(_state$items$itemKey = state.items[itemKey]) === null || _state$items$itemKey === void 0 ? void 0 : _state$items$itemKey.position, (_state$items$itemKey2 = state.items[itemKey]) === null || _state$items$itemKey2 === void 0 ? void 0 : _state$items$itemKey2.rotation, (_state$items$itemKey3 = state.items[itemKey]) === null || _state$items$itemKey3 === void 0 ? void 0 : _state$items$itemKey3.scale, (_state$items$itemKey4 = state.items[itemKey]) === null || _state$items$itemKey4 === void 0 ? void 0 : _state$items$itemKey4.shape];
   }, [itemKey])),
-      _useSceneStore2 = _slicedToArray(_useSceneStore, 4),
-      position = _useSceneStore2[0],
-      rotation = _useSceneStore2[1],
-      scale = _useSceneStore2[2],
-      shape = _useSceneStore2[3];
+      _store2 = _slicedToArray(_store, 4),
+      position = _store2[0],
+      rotation = _store2[1],
+      scale = _store2[2],
+      shape = _store2[3];
 
   (0, _react.useLayoutEffect)(function () {
     var _ref$current, _ref$current2, _ref$current3;

diff --git a/dist/Hull.js b/dist/Hull.js
@@ -11,12 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _drei = require("@react-three/drei");
 
-var _SceneStore = _interopRequireDefault(require("./SceneStore"));
-
 var _antd = require("antd");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,19 +31,20 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function Hull(_ref) {
   var hullKey = _ref.hullKey,
-      node = _ref.node;
+      node = _ref.node,
+      store = _ref.store;
 
-  var _useSceneStore = (0, _SceneStore.default)((0, _react.useCallback)(function (state) {
+  var _store = store((0, _react.useCallback)(function (state) {
     var _state$items$hullKey, _state$items$hullKey2, _state$items$hullKey3, _state$items$hullKey4, _state$items$hullKey5;
 
     return [(_state$items$hullKey = state.items[hullKey]) === null || _state$items$hullKey === void 0 ? void 0 : _state$items$hullKey.name, (_state$items$hullKey2 = state.items[hullKey]) === null || _state$items$hullKey2 === void 0 ? void 0 : _state$items$hullKey2.showName, (_state$items$hullKey3 = state.items[hullKey]) === null || _state$items$hullKey3 === void 0 ? void 0 : _state$items$hullKey3.onClick, (_state$items$hullKey4 = state.items[hullKey]) === null || _state$items$hullKey4 === void 0 ? void 0 : _state$items$hullKey4.onPointerOver, (_state$items$hullKey5 = state.items[hullKey]) === null || _state$items$hullKey5 === void 0 ? void 0 : _state$items$hullKey5.onPointerOut];
   }, [hullKey])),
-      _useSceneStore2 = _slicedToArray(_useSceneStore, 5),
-      name = _useSceneStore2[0],
-      showName = _useSceneStore2[1],
-      onClick = _useSceneStore2[2],
-      onPointerOver = _useSceneStore2[3],
-      onPointerOut = _useSceneStore2[4];
+      _store2 = _slicedToArray(_store, 5),
+      name = _store2[0],
+      showName = _store2[1],
+      onClick = _store2[2],
+      onPointerOver = _store2[3],
+      onPointerOut = _store2[4];
 
   var ref = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement("group", {

diff --git a/dist/Item.js b/dist/Item.js
@@ -13,12 +13,8 @@ var _fiber = require("@react-three/fiber");
 
 var _drei = require("@react-three/drei");
 
-var _SceneStore = _interopRequireDefault(require("./SceneStore"));
-
 var _antd = require("antd");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -37,24 +33,26 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function Item(_ref) {
   var itemKey = _ref.itemKey,
-      node = _ref.node;
+      node = _ref.node,
+      store = _ref.store;
 
-  var _useSceneStore = (0, _SceneStore.default)((0, _react.useCallback)(function (state) {
+  var _store = store((0, _react.useCallback)(function (state) {
     var _state$items$itemKey, _state$items$itemKey2, _state$items$itemKey3, _state$items$itemKey4, _state$items$itemKey5;
 
     return [(_state$items$itemKey = state.items[itemKey]) === null || _state$items$itemKey === void 0 ? void 0 : _state$items$itemKey.name, (_state$items$itemKey2 = state.items[itemKey]) === null || _state$items$itemKey2 === void 0 ? void 0 : _state$items$itemKey2.showName, (_state$items$itemKey3 = state.items[itemKey]) === null || _state$items$itemKey3 === void 0 ? void 0 : _state$items$itemKey3.onClick, (_state$items$itemKey4 = state.items[itemKey]) === null || _state$items$itemKey4 === void 0 ? void 0 : _state$items$itemKey4.onPointerOver, (_state$items$itemKey5 = state.items[itemKey]) === null || _state$items$itemKey5 === void 0 ? void 0 : _state$items$itemKey5.onPointerOut];
   }, [itemKey])),
-      _useSceneStore2 = _slicedToArray(_useSceneStore, 5),
-      name = _useSceneStore2[0],
-      showName = _useSceneStore2[1],
-      onClick = _useSceneStore2[2],
-      onPointerOver = _useSceneStore2[3],
-      onPointerOut = _useSceneStore2[4];
+      _store2 = _slicedToArray(_store, 5),
+      name = _store2[0],
+      showName = _store2[1],
+      onClick = _store2[2],
+      onPointerOver = _store2[3],
+      onPointerOut = _store2[4];
 
   var ref = (0, _react.useRef)();
   (0, _fiber.useFrame)((0, _react.useCallback)(function () {
     // Outside of react rendering, adjust the positions of all tfs.
-    var item = _SceneStore.default.getState().items[itemKey];
+    var item = store.getState().items[itemKey];
+    console.log(item);
 
     if (ref.current) {
       ref.current.position.set(item.position.x, item.position.y, item.position.z);

diff --git a/dist/Line.js b/dist/Line.js
@@ -11,25 +11,23 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _drei = require("@react-three/drei");
 
-var _SceneStore = _interopRequireDefault(require("./SceneStore"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// import useSceneStore from './SceneStore';
 function SceneLine(props) {
-  var lineKey = props.lineKey;
+  var lineKey = props.lineKey,
+      store = props.store;
 
-  var _useSceneStore = (0, _SceneStore.default)((0, _react.useCallback)(function (state) {
+  var _store = store((0, _react.useCallback)(function (state) {
     return {
       vertices: state.lines[lineKey].vertices,
       width: state.lines[lineKey].width
     };
   }, [lineKey])),
-      vertices = _useSceneStore.vertices,
-      width = _useSceneStore.width;
+      vertices = _store.vertices,
+      width = _store.width;
 
   return /*#__PURE__*/_react.default.createElement(_drei.Line, {
     points: vertices.map(function (vertex) {

diff --git a/dist/Scene.js b/dist/Scene.js
@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);
 
 function Loading() {
@@ -44,7 +46,8 @@ function Loading() {
 function Scene(props) {
   // For the objects in props.content, render the objects.
   // Those should be in the suspense element.
-  var backgroundColor = props.backgroundColor;
+  var backgroundColor = props.backgroundColor,
+      store = props.store;
   return /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
     shadows: true,
     style: {
@@ -56,5 +59,7 @@ function Scene(props) {
     onPointerMissed: props.onPointerMissed ? props.onPointerMissed : function () {}
   }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement(Loading, null)
-  }, /*#__PURE__*/_react.default.createElement(_Content.default, props)));
+  }, /*#__PURE__*/_react.default.createElement(_Content.default, _extends({}, props, {
+    store: store
+  }))));
 }