@ifiwas/standard-view 2.0.0

package/lib/groups/Group.js

@@ -0,0 +1,426 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.generateGroupProps = generateGroupProps;
+var React = _interopRequireWildcard(require("react"));
+var THREE = _interopRequireWildcard(require("three"));
+var _constants = require("../utils/constants");
+var _ViewContext = require("../views/ViewContext");
+var _math = require("../utils/math");
+var _events = require("../utils/events");
+var _util = require("../utils/util");
+var _excluded = ["position", "scale", "rotation", "eulerOrder", "roll", "quaternion", "normal", "materialType", "view3DEnvMap", "color", "hoverColor", "opacity", "transparent", "wireframe", "edges", "edgeColor", "edgeThresholdAngle", "side", "groupMember", "castShadow", "receiveShadow", "animation", "state", "onClick", "onDoubleClick", "onWheel", "onPointerUp", "onPointerDown", "onPointerOver", "onPointerOut", "onPointerMove", "hoverable", "mousePropagation", "clickSensitivity", "ignoreMouseEvents", "children"],
+  _excluded2 = ["position", "scale", "rotation", "normal", "roll", "quaternion", "animation", "state", "onClick", "onDoubleClick", "onWheel", "onPointerUp", "onPointerDown", "onPointerMove", "onPointerOver", "onPointerOut", "mousePropagation", "clickSensitivity", "ignoreMouseEvents"]; // Group.tsx
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var useState = React.useState,
+  useEffect = React.useEffect,
+  useRef = React.useRef,
+  useContext = React.useContext,
+  useCallback = React.useCallback,
+  useMemo = React.useMemo,
+  memo = React.memo,
+  forwardRef = React.forwardRef;
+/**
+ * Group
+ *
+ * In Standard View, Group is a wrapper of @react-three/fiber/three.js's group.
+ * This component allows composing children components into one large
+ * manipulatable mesh-like component. This is useful for creating 3D assets
+ * comprised of many pieces and then perform transformations and animations
+ * on the whole asset.
+ *
+ * Group will extract away the group properties for the group manipulations
+ * at a group level.
+ */
+var Group = forwardRef(function Group(_ref, ref) {
+  var _ref$position = _ref.position,
+    position = _ref$position === void 0 ? [0, 0, 0] : _ref$position,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? [1, 1, 1] : _ref$scale,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? [0, 0, 0] : _ref$rotation,
+    _ref$eulerOrder = _ref.eulerOrder,
+    eulerOrder = _ref$eulerOrder === void 0 ? _constants.EULER_ORDERS.XYZ : _ref$eulerOrder,
+    _ref$roll = _ref.roll,
+    roll = _ref$roll === void 0 ? 0 : _ref$roll,
+    quaternion = _ref.quaternion,
+    _ref$normal = _ref.normal,
+    normal = _ref$normal === void 0 ? _constants.DEFAULT_NORMAL : _ref$normal,
+    materialType = _ref.materialType,
+    view3DEnvMap = _ref.view3DEnvMap,
+    color = _ref.color,
+    hoverColor = _ref.hoverColor,
+    opacity = _ref.opacity,
+    transparent = _ref.transparent,
+    wireframe = _ref.wireframe,
+    edges = _ref.edges,
+    edgeColor = _ref.edgeColor,
+    edgeThresholdAngle = _ref.edgeThresholdAngle,
+    side = _ref.side,
+    _ref$groupMember = _ref.groupMember,
+    groupMember = _ref$groupMember === void 0 ? false : _ref$groupMember,
+    castShadow = _ref.castShadow,
+    receiveShadow = _ref.receiveShadow,
+    animation = _ref.animation,
+    state = _ref.state,
+    onClick = _ref.onClick,
+    onDoubleClick = _ref.onDoubleClick,
+    onWheel = _ref.onWheel,
+    onPointerUp = _ref.onPointerUp,
+    onPointerDown = _ref.onPointerDown,
+    onPointerOver = _ref.onPointerOver,
+    onPointerOut = _ref.onPointerOut,
+    onPointerMove = _ref.onPointerMove,
+    _ref$hoverable = _ref.hoverable,
+    hoverable = _ref$hoverable === void 0 ? true : _ref$hoverable,
+    _ref$mousePropagation = _ref.mousePropagation,
+    mousePropagation = _ref$mousePropagation === void 0 ? false : _ref$mousePropagation,
+    _ref$clickSensitivity = _ref.clickSensitivity,
+    clickSensitivity = _ref$clickSensitivity === void 0 ? 250 : _ref$clickSensitivity,
+    _ref$ignoreMouseEvent = _ref.ignoreMouseEvents,
+    ignoreMouseEvents = _ref$ignoreMouseEvent === void 0 ? false : _ref$ignoreMouseEvent,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Canvas Properties
+  var canvasProps = useContext(_ViewContext.ViewContext);
+
+  // Rotation
+  var _quaternion = useMemo(function updateQuaternion() {
+    // Normal
+    // @ts-ignore:T2345 // spread
+    var normalVec = _construct(THREE.Vector3, _toConsumableArray(normal)).normalize();
+    var normalQ = new THREE.Quaternion().setFromUnitVectors(_constants.DEFAULT_NORMAL_VEC3, normalVec);
+
+    // Rotation / Quaternion
+    var rotationQ = new THREE.Quaternion();
+    if (quaternion == null) {
+      // Convert Euler Rotation to Quaternion
+      // @ts-ignore:T2345 // spread
+      var _eulerOrder = eulerOrder.toUpperCase();
+      _eulerOrder = _constants.EULER_ORDERS[_eulerOrder] ? _eulerOrder : _constants.EULER_ORDERS.XYZ;
+      var euler = _construct(THREE.Euler, _toConsumableArray(rotation).concat([_eulerOrder]));
+      rotationQ = new THREE.Quaternion().setFromEuler(euler);
+    } else {
+      rotationQ = (0, _util.toQuaternion)(quaternion);
+    }
+
+    // Roll
+    var rollQ = new THREE.Quaternion().setFromAxisAngle(_constants.DEFAULT_NORMAL_VEC3, roll);
+
+    // q = normalQ * rotationQ * rollQ
+    var q = new THREE.Quaternion(); // Identity
+    q.premultiply(rollQ);
+    q.premultiply(rotationQ);
+    q.premultiply(normalQ);
+    return q;
+  }, [quaternion, rotation, eulerOrder, normal, roll]);
+
+  // Scale
+  var _scale = useMemo(function updateScale() {
+    // Invalid Scale  Warning
+    if (!Array.isArray(scale) || scale.length !== 3) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Mesh] scale must be a 3x1 array of numbers! scale: ".concat(scale));
+
+      // @ts-ignore:T2345 // spread
+      return [1, 1, 1];
+    }
+
+    // Handle Zero Scale Input
+    if (!scale[0] || !scale[1] || !scale[2] || Math.abs(scale[0]) < _math.EPS || Math.abs(scale[1]) < _math.EPS || Math.abs(scale[2]) < _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Mesh] scale elements must be non-zero! scale: ".concat(scale));
+      return scale.map(function (value) {
+        return Math.max(value, _math.EPS);
+      });
+    }
+    return scale;
+  }, [scale]);
+
+  // Color
+  var _useState = useState(color),
+    _useState2 = _slicedToArray(_useState, 2),
+    _color = _useState2[0],
+    setColor = _useState2[1];
+  useEffect(function updateColor() {
+    setColor(color);
+  }, [color]);
+
+  // Ref
+  var groupRef = useRef(null); // Hooks must be deterministic
+  var group = ref || groupRef;
+
+  // State
+  var _useState3 = useState(state != null ? _objectSpread({
+      lastClickTime: 0
+    }, state) : {
+      lastClickTime: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _state = _useState4[0],
+    setState = _useState4[1];
+
+  // ignoreMouseEvents
+  var _ignoreMouseEvents = useMemo(function updateIgnoreMouseEvents() {
+    return ignoreMouseEvents || groupMember && !hoverColor && !onClick && !onDoubleClick && !onPointerOver && !onPointerOut && !onPointerDown && !onPointerUp && !onPointerMove && !onWheel;
+  }, [ignoreMouseEvents, groupMember, hoverColor, onClick, onDoubleClick, onPointerOver, onPointerOut, onPointerDown, onPointerUp, onPointerMove, onWheel]);
+
+  // ---------------------- //
+  // -----   Events   ----- //
+  // ---------------------- //
+  // Event Props
+  var eventProps = useMemo(function updateEventProps() {
+    return _objectSpread({
+      mesh: group,
+      group: group,
+      state: _state,
+      setState: setState
+    }, canvasProps);
+  }, [group, _state, setState, canvasProps]);
+
+  // Click Props
+  var clickProps = useMemo(function updateClickProps() {
+    return {
+      mousePropagation: mousePropagation,
+      clickSensitivity: clickSensitivity,
+      group: group,
+      eventProps: eventProps,
+      onClick: onClick,
+      onDoubleClick: onDoubleClick
+    };
+  }, [mousePropagation, clickSensitivity, group, eventProps, onClick, onDoubleClick]);
+
+  // onPointerOver
+  var _onPointerOver = useCallback(function onHoverOver(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (hoverable) {
+      if (hoverColor != null) {
+        setColor(hoverColor);
+      }
+      if (onPointerOver) {
+        onPointerOver(eventProps);
+      }
+    }
+  }, [onPointerOver, hoverColor, hoverable, eventProps, mousePropagation]);
+
+  // onPointerOut
+  var _onPointerOut = useCallback(function onHoverOut(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (hoverable) {
+      if (hoverColor != null) {
+        setColor(color);
+      }
+      if (onPointerOut) {
+        onPointerOut(eventProps);
+      }
+    }
+  }, [onPointerOut, color, hoverColor, hoverable, eventProps, mousePropagation]);
+
+  // onPointerDown
+  var _onPointerDown = useCallback(function onMouseDown(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerDown) {
+      onPointerDown(eventProps);
+    }
+  }, [onPointerDown, mousePropagation, eventProps]);
+
+  // onPointerUp
+  var _onPointerUp = useCallback(function onMouseUp(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerUp) {
+      onPointerUp(eventProps);
+    }
+  }, [onPointerUp, mousePropagation, eventProps]);
+
+  // onPointerMove
+  var _onPointerMove = useCallback(function onMouseMove(e) {
+    //  Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onPointerMove) {
+      onPointerMove(eventProps);
+    }
+  }, [onPointerMove, mousePropagation, eventProps]);
+
+  // onWheel
+  var _onWheel = useCallback(function onScroll(e) {
+    // Mouse Propagation
+    (0, _events.checkPropagation)(e, mousePropagation);
+    if (onWheel) {
+      onWheel(eventProps);
+    }
+  }, [onWheel, mousePropagation, eventProps]);
+
+  // onClick + onDoubleClick
+  var _onClick = useCallback((0, _events.handleClick)(clickProps), [clickProps]);
+
+  // ------------------------- //
+  // -----   Animation   ----- //
+  // ------------------------- //
+  // Animation Function
+  var _animation = useCallback(function onAnimation() {
+    // @ts-ignore:TS2339 current does not exist for group
+    if (animation && group.current) {
+      animation(eventProps);
+    }
+  }, [group, animation, eventProps]);
+
+  // Child Props
+  var childProps = useMemo(function updateChildProps() {
+    var props = {
+      groupMember: true
+    };
+    var potentialChildProps = {
+      color: _color,
+      view3DEnvMap: view3DEnvMap,
+      materialType: materialType,
+      transparent: transparent,
+      opacity: opacity,
+      side: side,
+      wireframe: wireframe,
+      castShadow: castShadow,
+      receiveShadow: receiveShadow,
+      edges: edges,
+      edgeColor: edgeColor,
+      edgeThresholdAngle: edgeThresholdAngle
+    };
+    Object.entries(potentialChildProps).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (value != null) {
+        // check != null to catch 0
+        props[key] = value;
+      }
+      return null;
+    });
+    return props;
+  }, [_color, view3DEnvMap, materialType, side, transparent, opacity, castShadow, receiveShadow, wireframe, edges, edgeColor, edgeThresholdAngle]);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore:TS2322
+    React.createElement("group", _extends({
+      ref: group
+      // Geometry
+      ,
+      position: position,
+      scale: _scale,
+      quaternion: _quaternion
+      // Event Functions
+      ,
+      onPointerOver: _ignoreMouseEvents ? undefined : _onPointerOver,
+      onPointerOut: _ignoreMouseEvents ? undefined : _onPointerOut,
+      onPointerDown: _ignoreMouseEvents ? undefined : _onPointerDown,
+      onPointerUp: _ignoreMouseEvents ? undefined : _onPointerUp,
+      onPointerMove: _ignoreMouseEvents ? undefined : _onPointerMove,
+      onWheel: _ignoreMouseEvents ? undefined : _onWheel,
+      onClick: _ignoreMouseEvents ? undefined : _onClick
+    }, otherProps), animation && /*#__PURE__*/React.createElement(_events.AnimationComponent, {
+      animation: _animation
+    }), children && React.Children.map(children, function (child) {
+      if (!child) {
+        return null;
+      }
+      return /*#__PURE__*/React.cloneElement(child, childProps);
+    }))
+  );
+});
+var GroupMemo = memo(Group);
+GroupMemo.displayName = "Group";
+var _default = exports["default"] = GroupMemo;
+/**
+ * Generate Group Props
+ *
+ * For shapes composed of multiple primitives, like the Capsule,
+ * the meshes are grouped together. In order to rotate, scale,
+ * translate, and animate the entire group rather than each individual primitive,
+ * the group properties are extracted out and nulled for the primitives.
+ *
+ * Other properties, such as material related properties are passed down
+ * so the appearance of the group is uniform.
+ *
+ * @param {any} props
+ * @returns {GroupProps}
+ */
+function generateGroupProps(/* eslint-disable @typescript-eslint/no-explicit-any */
+props) {
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  var _props$position = props.position,
+    position = _props$position === void 0 ? [0, 0, 0] : _props$position,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? [1, 1, 1] : _props$scale,
+    _props$rotation = props.rotation,
+    rotation = _props$rotation === void 0 ? [0, 0, 0] : _props$rotation,
+    _props$normal = props.normal,
+    normal = _props$normal === void 0 ? _constants.DEFAULT_NORMAL : _props$normal,
+    _props$roll = props.roll,
+    roll = _props$roll === void 0 ? 0 : _props$roll,
+    quaternion = props.quaternion,
+    animation = props.animation,
+    state = props.state,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onWheel = props.onWheel,
+    onPointerUp = props.onPointerUp,
+    onPointerDown = props.onPointerDown,
+    onPointerMove = props.onPointerMove,
+    onPointerOver = props.onPointerOver,
+    onPointerOut = props.onPointerOut,
+    mousePropagation = props.mousePropagation,
+    clickSensitivity = props.clickSensitivity,
+    ignoreMouseEvents = props.ignoreMouseEvents,
+    cleanedProps = _objectWithoutProperties(props, _excluded2);
+  var groupProps = {
+    position: position,
+    scale: scale,
+    rotation: rotation,
+    normal: normal,
+    roll: roll,
+    quaternion: quaternion,
+    animation: animation,
+    state: state,
+    onClick: onClick,
+    onDoubleClick: onDoubleClick,
+    onWheel: onWheel,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerOver: onPointerOver,
+    onPointerOut: onPointerOut,
+    mousePropagation: mousePropagation,
+    clickSensitivity: clickSensitivity,
+    ignoreMouseEvents: ignoreMouseEvents
+  };
+  return {
+    cleanedProps: cleanedProps,
+    groupProps: groupProps
+  };
+}

package/lib/groups/OBJ.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { GroupProps } from "./Group";
+interface OBJProps extends GroupProps {
+    objPath: string;
+    objURL: string;
+    mtlPath?: string;
+    mtlURL?: string;
+    resourcePath?: string;
+}
+declare const OBJMemo: React.NamedExoticComponent<OBJProps>;
+export default OBJMemo;