v0.5.0: Animations!

Wisc-HCI · Sep 11, 2021 · 136bb17 · 136bb17
1 parent 4bc72e1
commit 136bb17
Show file tree

Hide file tree

Showing 32 changed files with 335 additions and 367 deletions.
diff --git a/dist/Content.js b/dist/Content.js
@@ -167,12 +167,12 @@ function Content(props) {
       var _hullToGroupAndRef = (0, _MeshConvert.hullToGroupAndRef)(hull),
           _hullToGroupAndRef2 = _slicedToArray(_hullToGroupAndRef, 2),
           node = _hullToGroupAndRef2[0],
-          ref = _hullToGroupAndRef2[1];
+          childrenRefs = _hullToGroupAndRef2[1];
 
       return {
         hullKey: hullKey,
         node: node,
-        ref: ref,
+        childrenRefs: childrenRefs,
         frame: hull.frame,
         highlighted: hull.highlighted
       };
@@ -190,11 +190,11 @@ function Content(props) {
   }).map(function (item) {
     return item.childrenRefs;
   }));
-  var highlightedHullRefs = hulls.filter(function (hull) {
+  var highlightedHullRefs = [].concat.apply([], hulls.filter(function (hull) {
     return hull.highlighted;
   }).map(function (hull) {
-    return hull.ref;
-  });
+    return hull.childrenRefs;
+  }));
   var highlightedRefs = [].concat(_toConsumableArray(highlightedItemRefs), _toConsumableArray(highlightedHullRefs));
   var movableItems = items.filter(function (item) {
     return ['translate', 'rotate', 'scale'].indexOf(item.transformMode) > -1;
@@ -204,6 +204,45 @@ function Content(props) {
   var orbitControls = (0, _react.useRef)();
   var planeRGB = (0, _ColorConversion.hexToRgb)(planeColor ? planeColor : "a8a8a8");
   var planeRGBA = [planeRGB.r, planeRGB.g, planeRGB.b, 0.5];
+  (0, _fiber.useFrame)((0, _react.useCallback)(function (_ref) {
+    var clock = _ref.clock;
+    var time = clock.getElapsedTime() * 1000;
+    items.forEach(function (item) {
+      var colorInstruction = store.getState().items[item.itemKey].color;
+
+      if (colorInstruction) {
+        var r = typeof colorInstruction.r === 'function' ? colorInstruction.r(time) / 255 : colorInstruction.r / 255;
+        var g = typeof colorInstruction.g === 'function' ? colorInstruction.g(time) / 255 : colorInstruction.g / 255;
+        var b = typeof colorInstruction.b === 'function' ? colorInstruction.b(time) / 255 : colorInstruction.b / 255;
+        var opacity = typeof colorInstruction.a === 'function' ? colorInstruction.a(time) : colorInstruction.a;
+        item.childrenRefs.forEach(function (ref) {
+          if (ref.current && ref.current.material) {
+            ref.current.material.color.setRGB(r, g, b);
+            ref.current.material.opacity = opacity;
+            ref.current.material.transparent = opacity === 1 ? false : true;
+          }
+        });
+      } // Ignore if no colorInstruction
+
+    });
+    hulls.forEach(function (hull) {
+      var colorInstruction = store.getState().hulls[hull.hullKey].color;
+
+      if (colorInstruction) {
+        var r = typeof colorInstruction.r === 'function' ? colorInstruction.r(time) / 255 : colorInstruction.r / 255;
+        var g = typeof colorInstruction.g === 'function' ? colorInstruction.g(time) / 255 : colorInstruction.g / 255;
+        var b = typeof colorInstruction.b === 'function' ? colorInstruction.b(time) / 255 : colorInstruction.b / 255;
+        var opacity = typeof colorInstruction.a === 'function' ? colorInstruction.a(time) : colorInstruction.a;
+        hull.childrenRefs.forEach(function (ref) {
+          if (ref.current && ref.current.material) {
+            ref.current.material.color.setRGB(r, g, b);
+            ref.current.material.opacity = opacity;
+            ref.current.material.transparent = opacity === 1 ? false : true;
+          }
+        });
+      }
+    });
+  }, [items, hulls]));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
     ref: orbitControls
   }), /*#__PURE__*/_react.default.createElement("pointLight", {

diff --git a/dist/GhostItem.js b/dist/GhostItem.js
@@ -43,6 +43,14 @@ var GhostItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       scale = _store2[2],
       shape = _store2[3];
 
+  if ([position === null || position === void 0 ? void 0 : position.x, position === null || position === void 0 ? void 0 : position.y, position === null || position === void 0 ? void 0 : position.z, rotation === null || rotation === void 0 ? void 0 : rotation.x, rotation === null || rotation === void 0 ? void 0 : rotation.y, rotation === null || rotation === void 0 ? void 0 : rotation.z, rotation === null || rotation === void 0 ? void 0 : rotation.w, scale === null || scale === void 0 ? void 0 : scale.x, scale === null || scale === void 0 ? void 0 : scale.y, scale === null || scale === void 0 ? void 0 : scale.z].map(function (value) {
+    return typeof value === 'function';
+  }).filter(function (value) {
+    return value === true;
+  }).length > 0) {
+    return null;
+  }
+
   (0, _react.useLayoutEffect)(function () {
     var _ref$current, _ref$current2, _ref$current3;
 

diff --git a/dist/Item.js b/dist/Item.js
@@ -49,14 +49,16 @@ function Item(_ref) {
       onPointerOut = _store2[4];
 
   var ref = (0, _react.useRef)();
-  (0, _fiber.useFrame)((0, _react.useCallback)(function () {
+  (0, _fiber.useFrame)((0, _react.useCallback)(function (_ref2) {
+    var clock = _ref2.clock;
     // Outside of react rendering, adjust the positions of all tfs.
     var item = store.getState().items[itemKey];
+    var time = clock.getElapsedTime() * 1000;
 
     if (ref.current) {
-      ref.current.position.set(item.position.x, item.position.y, item.position.z);
-      ref.current.quaternion.set(item.rotation.x, item.rotation.y, item.rotation.z, item.rotation.w);
-      ref.current.scale.set(item.scale.x, item.scale.y, item.scale.z);
+      ref.current.position.set(typeof item.position.x === 'function' ? item.position.x(time) : item.position.x, typeof item.position.y === 'function' ? item.position.y(time) : item.position.y, typeof item.position.z === 'function' ? item.position.z(time) : item.position.z);
+      ref.current.quaternion.set(typeof item.rotation.x === 'function' ? item.rotation.x(time) : item.rotation.x, typeof item.rotation.y === 'function' ? item.rotation.y(time) : item.rotation.y, typeof item.rotation.z === 'function' ? item.rotation.z(time) : item.rotation.z, typeof item.rotation.w === 'function' ? item.rotation.w(time) : item.rotation.w);
+      ref.current.scale.set(typeof item.scale.x === 'function' ? item.scale.x(time) : item.scale.x, typeof item.scale.y === 'function' ? item.scale.y(time) : item.scale.y, typeof item.scale.z === 'function' ? item.scale.z(time) : item.scale.z);
     }
   }, [itemKey, ref]));
   return /*#__PURE__*/_react.default.createElement("group", {

diff --git a/dist/Line.js b/dist/Line.js
@@ -15,7 +15,6 @@ 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; }
 
-// import useSceneStore from './SceneStore';
 function SceneLine(props) {
   var lineKey = props.lineKey,
       store = props.store;

diff --git a/dist/Scene.js b/dist/Scene.js
@@ -23,6 +23,8 @@ var _Content = _interopRequireDefault(require("./Content"));
 
 var THREE = _interopRequireWildcard(require("three"));
 
+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); }
@@ -60,6 +62,6 @@ function Scene(props) {
   }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement(Loading, null)
   }, /*#__PURE__*/_react.default.createElement(_Content.default, _extends({}, props, {
-    store: store
+    store: store ? store : _SceneStore.default
   }))));
 }
diff --git a/dist/SceneStore.js b/dist/SceneStore.js
@@ -22,69 +22,5 @@ var immer = function immer(config) {
 };
 
 var useSceneStore = (0, _zustand.default)(immer(_SceneSlice.SceneSlice));
-var _default = useSceneStore; // const immer = (config) => (set, get, api) =>
-//   config((fn) => set(produce(fn)), get, api);
-// const store = (set) => ({
-//   items: {},
-//   lines: {},
-//   tfs: {},
-//   hulls: {},
-//   // Clearing Contents
-//   clearItems: () => set(_=>({items: {}})),
-//   clearLines: () => set(_=>({lines: {}})),
-//   clearTfs: () => set(_=>({tfs: {}})),
-//   clearHulls: () => set(_=>({hulls: {}})),
-//   // Bulk Setting (This causes an entire re-render of the scene)
-//   setItems: (items) => set(_=>({items:items})),
-//   setLines: (lines) => set(_=>({lines:lines})),
-//   setTfs: (tfs) => set(_=>({tfs:tfs})),
-//   setHulls: (hulls) => set(_=>({hulls:hulls})),
-//   // Removal by key
-//   removeItem: (key) => set(state => {delete state.items[key]}),
-//   removeLine: (key) => set(state => {delete state.lines[key]}),
-//   removeTf: (key) => set(state => {delete state.tfs[key]}),
-//   removeHull: (key) => set(state => {delete state.hulls[key]}),
-//   // Adding items
-//   setItem: (key, item) => set(state=>{state.items[key]=item}),
-//   setLine: (key, line) => set(state=>{state.lines[key]=line}),
-//   setTf: (key, tf) => set(state=>{state.tfs[key]=tf}),
-//   setHull: (key, hull) => set(state=>{state.hulls[key]=hull}),
-//   // Item mutation
-//   setItemName: (key, name) => set(state => {state.items[key].name = name}),
-//   setItemShowName: (key, showName) => set(state => {state.items[key].showName = showName}),
-//   setItemPosition: (key, position) => set(state => {state.items[key].position = position}),
-//   setItemRotation: (key, rotation) => set(state => {state.items[key].rotation = rotation}),
-//   setItemScale: (key, scale) => set(state => {state.items[key].scale = scale}),
-//   setItemColor: (key, color) => set(state => {state.items[key].color = color}),
-//   setItemWireframe: (key, wireframe) => set(state => {state.items[key].wireframe = wireframe}),
-//   setItemHighlighted: (key, value) => set(state => {state.items[key].highlighted = value}),
-//   setItemOnClick: (key, fn) => set(state => {state.items[key].onClick = fn}),
-//   setItemOnPointerOver: (key, fn) => set(state => {state.items[key].onPointerOver = fn}),
-//   setItemOnPointerOut: (key, fn) => set(state => {state.items[key].onPointerOut = fn}),
-//   setItemTransformMode: (key, mode) => set(state => {state.items[key].transformMode = mode}),
-//   setItemOnMove: (key, fn) => set(state => {state.items[key].onMove = fn}),
-//   // Line mutation
-//   setLineName: (key, name) => set(state => {state.lines[key].name = name}),
-//   setLineWidth: (key, width) => set(state => {state.lines[key].width = width}),
-//   setLineVertices: (key, vertices) => set(state => {state.items.vertices = vertices}),
-//   addLineVertex: (key, vertex) => set(state => {state.lines[key].vertices.push(vertex)}),
-//   setLineVertex: (key, index, vertex) => set(state => {state.lines[key].vertices[index] = vertex}),
-//   removeLineVertex: (key, index) => set(state => {state.lines[key].vertices.splice(index, 1)}),
-//   // TF mutation
-//   setTfTranslation: (key, translation) => set(state => {state.tfs[key].translation = translation}),
-//   setTfRotation: (key, rotation) => set(state => {state.tfs[key].rotation = rotation}),
-//   // Hull mutation
-//   setHullName: (key, name) => set(state => {state.hulls[key].name = name}),
-//   setHullVertices: (key, vertices) => set(state => {state.hulls[key].vertices = vertices}),
-//   addHullVertex: (key, vertex) => set(state => {state.hulls[key].vertices.push(vertex)}),
-//   setHullVertex: (key, index, vertex) => set(state => {state.hulls[key].vertices[index] = vertex}),
-//   removeHullVertex: (key, index) => set(state => {state.hulls[key].vertices.splice(index, 1)}),
-//   setHullColor: (key, color) => set(state => {state.hulls[key].scale = color}),
-//   setHullWireframe: (key, wireframe) => set(state => {state.hulls[key].wireframe = wireframe}),
-//   setHullHighlighted: (key, value) => set(state => {state.hulls[key].highlighted = value}),
-//   setHullOnClick: (key, fn) => set(state => {state.hulls[key].onClick = fn}),
-//   setHullOnPointerOver: (key, fn) => set(state => {state.hulls[key].onPointerOver = fn}),
-//   setHullOnPointerOut: (key, fn) => set(state => {state.hulls[key].onPointerOut = fn}),
-// });
-
+var _default = useSceneStore;
 exports.default = _default;
diff --git a/dist/TF.js b/dist/TF.js
@@ -31,14 +31,16 @@ function TF(_ref) {
       children = _ref.children,
       store = _ref.store;
   var ref = (0, _react.useRef)();
-  (0, _fiber.useFrame)((0, _react.useCallback)(function () {
+  (0, _fiber.useFrame)((0, _react.useCallback)(function (_ref2) {
+    var clock = _ref2.clock;
     // Outside of react rendering, adjust the positions of all tfs.
     var tf = store.getState().tfs[tfKey];
+    var time = clock.getElapsedTime() * 1000;
 
     if (ref.current) {
       // console.log(ref.current)
-      ref.current.position.set(tf.translation.x, tf.translation.y, tf.translation.z);
-      ref.current.quaternion.set(tf.rotation.x, tf.rotation.y, tf.rotation.z, tf.rotation.w);
+      ref.current.position.set(typeof tf.translation.x === 'function' ? tf.translation.x(time) : tf.translation.x, typeof tf.translation.y === 'function' ? tf.translation.y(time) : tf.translation.y, typeof tf.translation.z === 'function' ? tf.translation.z(time) : tf.translation.z);
+      ref.current.quaternion.set(typeof tf.rotation.x === 'function' ? tf.rotation.x(time) : tf.rotation.x, typeof tf.rotation.y === 'function' ? tf.rotation.y(time) : tf.rotation.y, typeof tf.rotation.z === 'function' ? tf.rotation.z(time) : tf.rotation.z, typeof tf.rotation.w === 'function' ? tf.rotation.w(time) : tf.rotation.w);
     }
   }, [tfKey, ref]));
   var arrow = (0, _StandardMeshes.ARROW_GEOM)();
@@ -71,9 +73,9 @@ function TF(_ref) {
 
 ;
 
-function WorldTF(_ref2) {
-  var displayTfs = _ref2.displayTfs,
-      children = _ref2.children;
+function WorldTF(_ref3) {
+  var displayTfs = _ref3.displayTfs,
+      children = _ref3.children;
   var arrow = (0, _StandardMeshes.ARROW_GEOM)();
   return /*#__PURE__*/_react.default.createElement("group", {
     dispose: null,
@@ -103,10 +105,10 @@ function WorldTF(_ref2) {
 
 ;
 
-function GhostTF(_ref3) {
-  var transforms = _ref3.transforms,
-      children = _ref3.children,
-      store = _ref3.store;
+function GhostTF(_ref4) {
+  var transforms = _ref4.transforms,
+      children = _ref4.children,
+      store = _ref4.store;
 
   if (transforms.length > 0) {
     var pos = [transforms[0].position.x, transforms[0].position.y, transforms[0].position.z];