@ifiwas/standard-view 2.0.0

package/lib/views/View3D.js

@@ -0,0 +1,289 @@
+"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;
+var React = _interopRequireWildcard(require("react"));
+var _fiber = require("@react-three/fiber");
+var _SetRenderer = _interopRequireDefault(require("./SetRenderer"));
+var _SetBackground = _interopRequireDefault(require("./SetBackground"));
+var _SetShadows = _interopRequireDefault(require("./SetShadows"));
+var _SetControls = _interopRequireWildcard(require("./SetControls"));
+var _ContextBridge = require("./ContextBridge");
+var _ViewContext = require("./ViewContext");
+var _util = require("../utils/util");
+var _constants = require("../utils/constants");
+var _package = require("../../package.json");
+var _excluded = ["trackballControls", "orbitControls", "mapControls", "backgroundColor", "backgroundTextureURL", "backgroundEquirectangularTextureURL", "backgroundEquirectangularRGBEURL", "shadowMapEnabled", "shadowType", "camera", "controls", "gl", "orthographic", "contexts", "children"],
+  _excluded2 = ["position", "target", "up", "rotation", "roll"],
+  _excluded3 = ["polarAngle", "azimuthAngle"]; // View3D.tsx
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _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 _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 _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 _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 _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 useRef = React.useRef,
+  useEffect = React.useEffect,
+  useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * View3D
+ *
+ * In Standard View, View3D creates the @react-three/fiber Canvas
+ * and also applies some extra features, such as setting the
+ * background color/texture/equirectangular texture.
+ * For @react-three/fiber, this is not possible since the background
+ * color or texture is not a THREE.WebGLRenderer parameter with a setter.
+ * Since @react-three/fiber does not provide an easy way to call methods
+ * of three.js objects, View3D provides the settings for the Canvas
+ * that @react-three/fiber does not.
+ *
+ * All other @react-three/fiber functionality for its Canvas properties
+ * are maintained and applied, since the View3D specific properties are
+ * stripped out.
+ *
+ * Camera controls may be enable by passing in true for either trackballControls
+ * orbitControls, or mapControls. Camera controls parameters may be passed with the controls
+ * prop in the form of an Object, similar to camera's props.
+ *
+ * SetCanvasProps is a small component that isolates the useThree hook.
+ * Unfortunately, @react-three/fiber hooks incur additional renders,
+ * hence those hooks have been encapsulated into small components to avoid
+ * re-rendering larger more complicated logic. Similarly, UpdateCameraControls
+ * isolates the useThree hook.
+ *
+ * SetBackground, SetShadows, and SetControls contain logic encapsulated in
+ * components because these changes cannot be applied through @react-three/fiber
+ * props on Canvas. Also, this logic cannot be applied in the body of View3D
+ * since background, shadows, and camera controls depends on the creation of
+ * Canvas and ultimately mutate the Canvas Properties, namely camera, gl,
+ * and scene. Thus this logic must execute in components after Canvas is created
+ * and within the Canvas component.
+ *
+ * Any number of React contexts may be passed into View3D. Since @react-three/fiber
+ * provides its own render method and reconciler, contexts must be maintained via
+ * a context bridge. In order to permeate contexts into View3D, pass an array of
+ * all contexts to the contexts prop.
+ * Also, ViewContext will always provide Canvas Props so that all components in a
+ * particular View3D has access to those particular @react-three/fiber
+ * Canvas Props (gl, scene, camera, etc)
+ *
+ * @param {View3DProps} props
+ */
+var View3D = function View3D(_ref) {
+  var trackballControls = _ref.trackballControls,
+    orbitControls = _ref.orbitControls,
+    mapControls = _ref.mapControls,
+    backgroundColor = _ref.backgroundColor,
+    backgroundTextureURL = _ref.backgroundTextureURL,
+    backgroundEquirectangularTextureURL = _ref.backgroundEquirectangularTextureURL,
+    backgroundEquirectangularRGBEURL = _ref.backgroundEquirectangularRGBEURL,
+    _ref$shadowMapEnabled = _ref.shadowMapEnabled,
+    shadowMapEnabled = _ref$shadowMapEnabled === void 0 ? false : _ref$shadowMapEnabled,
+    _ref$shadowType = _ref.shadowType,
+    shadowType = _ref$shadowType === void 0 ? 'pcfsoft' : _ref$shadowType,
+    camera = _ref.camera,
+    _ref$controls = _ref.controls,
+    controls = _ref$controls === void 0 ? {} : _ref$controls,
+    gl = _ref.gl,
+    orthographic = _ref.orthographic,
+    contexts = _ref.contexts,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Print Standard View Version
+  useEffect(function () {
+    /* eslint-disable-next-line no-console */
+    console.log("%cStandard View Core ".concat(_package.version), 'color: orange');
+  }, []);
+
+  // -----   Contexts   -----//
+  var _contexts = useMemo(function updateContexts() {
+    if (contexts) {
+      // Handle Single Context (non Array) or Multiple Contexts (Array)
+      return Array.isArray(contexts) ? contexts : [contexts];
+    } else {
+      return [];
+    }
+  }, [contexts]);
+
+  // -----   Canvas Props   -----//
+  var canvasProps = useRef(null);
+
+  // -----   gl Props   -----//
+  var _useMemo = useMemo(function updateGLProps() {
+      // WebGLRenderer Parameters on Initialization
+      var glParameterKeys = ['context', 'precision', 'alpha', 'premultipliedAlpha', 'antialias', 'stencil', 'preserveDrawingBuffer', 'powerPreference', 'failIfMajorPerformanceCaveat', 'depth', 'logarithmicDepthBuffer'];
+
+      /* eslint-disable no-shadow */
+      var glParameters = {
+        antialias: true,
+        preserveDrawingBuffer: true
+      };
+      var glProps = {
+        antialias: true,
+        preserveDrawingBuffer: true
+      };
+      /* eslint-enable no-shadow */
+
+      // Extract glParams and glProps
+      if (gl) {
+        Object.entries(gl).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            value = _ref3[1];
+          if (glParameterKeys.includes(key)) {
+            glParameters[key] = value;
+          } else {
+            glProps[key] = value;
+          }
+          return null;
+        });
+      }
+      return {
+        glParameters: glParameters,
+        glProps: glProps
+      };
+    }, [gl]),
+    glParameters = _useMemo.glParameters,
+    glProps = _useMemo.glProps;
+
+  // -----   Background   -----//
+  var backgroundProps = useMemo(function updateBackgroundProps() {
+    return {
+      backgroundColor: backgroundColor,
+      backgroundTextureURL: backgroundTextureURL,
+      backgroundEquirectangularTextureURL: backgroundEquirectangularTextureURL,
+      backgroundEquirectangularRGBEURL: backgroundEquirectangularRGBEURL
+    };
+  }, [backgroundColor, backgroundTextureURL, backgroundEquirectangularTextureURL, backgroundEquirectangularRGBEURL]);
+
+  // -----   Shadows   -----//
+  var shadowProps = useMemo(function updateShadowProps() {
+    return {
+      shadowMapEnabled: shadowMapEnabled || true,
+      shadowType: shadowType || 'type'
+    };
+  }, [shadowMapEnabled, shadowType]);
+
+  // -----   Camera Controls   ----- //
+  var cameraType = useMemo(function updateCameraType() {
+    return orthographic ? _constants.CAMERA_TYPES.ORTHOGRAPHIC : _constants.CAMERA_TYPES.PERSPECTIVE;
+  }, [orthographic]);
+  var controlsType = useMemo(function updateControlsType() {
+    if (orbitControls) {
+      return _constants.CONTROLS_TYPES.ORBIT_CONTROLS;
+    } else if (trackballControls) {
+      return _constants.CONTROLS_TYPES.TRACKBALL_CONTROLS;
+    } else if (mapControls) {
+      return _constants.CONTROLS_TYPES.MAP_CONTROLS;
+    }
+    return 'none';
+  }, [orbitControls, trackballControls, mapControls]);
+
+  // -----   Camera Props   -----//
+  var _useMemo2 = useMemo(function updateCameraProps() {
+      /* eslint-disable no-shadow */
+      var _ref4 = camera || {},
+        _ref4$position = _ref4.position,
+        position = _ref4$position === void 0 ? [0, 0, 5] : _ref4$position,
+        _ref4$target = _ref4.target,
+        target = _ref4$target === void 0 ? [0, 0, 0] : _ref4$target,
+        _ref4$up = _ref4.up,
+        up = _ref4$up === void 0 ? _constants.DEFAULT_UP : _ref4$up,
+        _ref4$rotation = _ref4.rotation,
+        rotation = _ref4$rotation === void 0 ? undefined : _ref4$rotation,
+        _ref4$roll = _ref4.roll,
+        roll = _ref4$roll === void 0 ? 0 : _ref4$roll,
+        cameraProps = _objectWithoutProperties(_ref4, _excluded2);
+      var cameraExtrinsics = {
+        position: position,
+        target: target,
+        up: up,
+        rotation: rotation,
+        roll: roll
+      };
+      /* eslint-enable no-shadow */
+
+      return {
+        cameraExtrinsics: cameraExtrinsics,
+        cameraProps: cameraProps
+      };
+    }, [camera]),
+    cameraExtrinsics = _useMemo2.cameraExtrinsics,
+    cameraProps = _useMemo2.cameraProps;
+
+  // -----   Controls Props   ----- //
+  var controlsProps = useMemo(function updateControlsProps() {
+    // Extract Angles of Rotation
+    var _controls$polarAngle = controls.polarAngle,
+      polarAngle = _controls$polarAngle === void 0 ? 0 : _controls$polarAngle,
+      _controls$azimuthAngl = controls.azimuthAngle,
+      azimuthAngle = _controls$azimuthAngl === void 0 ? 0 : _controls$azimuthAngl,
+      controlsProps = _objectWithoutProperties(controls, _excluded3);
+    controlsProps = controlsProps || {};
+
+    // Reconcile Control Props
+    if (controlsType !== 'none') {
+      (0, _util.reconcileSynonymousProps)(controlsProps, _constants.SYNONYMOUS_CONTROLS_PROPS, controlsType);
+      (0, _util.reconcileSynonymousProps)(controlsProps, _constants.ANTONYMOUS_CONTROLS_PROPS, controlsType, true);
+    }
+    (0, _util.reconcileSynonymousProps)(controlsProps, _constants.SYNONYMOUS_CAMERA_PROPS, cameraType);
+    return {
+      controlsType: controlsType,
+      polarAngle: polarAngle,
+      azimuthAngle: azimuthAngle,
+      cameraExtrinsics: cameraExtrinsics,
+      controlsProps: Object.keys(controlsProps).length > 0 ? controlsProps : undefined
+    };
+  }, [controlsType, cameraType, controls, cameraExtrinsics]);
+  var values = useRef([]);
+  /* eslint-disable react-hooks/exhaustive-deps */
+  var contextListeners = useMemo(function generateContextListeners() {
+    return (0, _ContextBridge.GenerateContextListeners)(_contexts, (values === null || values === void 0 ? void 0 : values.current) || []);
+  }, [_contexts]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contextListeners, /*#__PURE__*/React.createElement(_fiber.Canvas, _extends({
+    camera: cameraProps,
+    orthographic: orthographic
+    // updateDefaultCamera={updateDefaultCamera}
+    // @ts-ignore:TS2559 no properties in common with Partial<WebGLRenderer>
+    ,
+    gl: glParameters
+  }, otherProps), /*#__PURE__*/React.createElement(SetCanvasProps, {
+    canvasProps: canvasProps
+  }), /*#__PURE__*/React.createElement(_ViewContext.ViewContextProvider, {
+    canvasProps: canvasProps
+  }, /*#__PURE__*/React.createElement(_ContextBridge.ContextBridge, {
+    contexts: _contexts,
+    values: values.current
+  }, /*#__PURE__*/React.createElement(_SetRenderer["default"], glProps), /*#__PURE__*/React.createElement(_SetBackground["default"], backgroundProps), /*#__PURE__*/React.createElement(_SetShadows["default"], shadowProps), /*#__PURE__*/React.createElement(_SetControls["default"], controlsProps), (mapControls || trackballControls || controls && controls.autoRotate) && /*#__PURE__*/React.createElement(_SetControls.UpdateControls, null), children))));
+};
+var View3DMemo = memo(View3D);
+View3DMemo.displayName = 'View3D';
+var _default = exports["default"] = View3DMemo;
+/**
+ * SetCanvasProps
+ *
+ * Isolates the useThree hook to avoid larger components from
+ * re-rendering up to 3 times--this is a bug from @react-three/fiber.
+ * Any @react-three/fiber hook call incurs additional renders.
+ */
+var SetCanvasProps = memo(/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+function SetCanvasProps(_ref5) {
+  var canvasProps = _ref5.canvasProps;
+  /* eslint-disable-next-line no-param-reassign */
+  canvasProps.current = (0, _fiber.useThree)();
+  return null;
+}, function () {
+  return true;
+});
+SetCanvasProps.displayName = 'SetCanvasProps';

package/lib/views/ViewContext.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export declare const ViewContext: React.Context<any>;
+type ViewContextProviderProps = {
+    canvasProps: React.MutableRefObject<any>;
+    children?: any;
+};
+/**
+ * ViewContextProvider
+ *
+ * Placing <ViewContext.Provider value={canvasProps.current}>
+ * directly into the return statement of View3D does not wait for
+ * canvasProps to be set by SetCanvasProps, and instead the
+ * context value is set to null.
+ *
+ * Encapsulating <ViewContext.Provider> in a component delays the
+ * creation of the provider, hence delays setting value until
+ * after SetCanvasProps has been created.
+ *
+ * Cannot add ViewContext to contextListeners and apply in GenerateContexts
+ * because canvasProps do not exist at that time.
+ */
+export declare const ViewContextProvider: React.NamedExoticComponent<ViewContextProviderProps>;
+export {};

package/lib/views/ViewContext.js

@@ -0,0 +1,55 @@
+"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.ViewContextProvider = exports.ViewContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+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 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 _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 _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 _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; } // ViewContext.tsx
+var useState = React.useState,
+  createContext = React.createContext,
+  memo = React.memo;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+var ViewContext = exports.ViewContext = createContext([]);
+/**
+ * ViewContextProvider
+ *
+ * Placing <ViewContext.Provider value={canvasProps.current}>
+ * directly into the return statement of View3D does not wait for
+ * canvasProps to be set by SetCanvasProps, and instead the
+ * context value is set to null.
+ *
+ * Encapsulating <ViewContext.Provider> in a component delays the
+ * creation of the provider, hence delays setting value until
+ * after SetCanvasProps has been created.
+ *
+ * Cannot add ViewContext to contextListeners and apply in GenerateContexts
+ * because canvasProps do not exist at that time.
+ */
+var ViewContextProvider = exports.ViewContextProvider = memo(function ViewContextProvider(_ref) {
+  var canvasProps = _ref.canvasProps,
+    children = _ref.children;
+  var _useState = useState(canvasProps.current),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewContextValue = _useState2[0],
+    setViewContextValue = _useState2[1];
+  var value = _objectSpread({
+    setViewContextValue: setViewContextValue
+  }, viewContextValue);
+  return /*#__PURE__*/React.createElement(ViewContext.Provider, {
+    value: value
+  }, children);
+});
+ViewContextProvider.displayName = "ViewContextProvider";

package/lib/views/index.d.ts

@@ -0,0 +1,2 @@
+export { default as View3D } from './View3D';
+export { ViewContext } from './ViewContext';

package/lib/views/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "View3D", {
+  enumerable: true,
+  get: function get() {
+    return _View3D["default"];
+  }
+});
+Object.defineProperty(exports, "ViewContext", {
+  enumerable: true,
+  get: function get() {
+    return _ViewContext.ViewContext;
+  }
+});
+var _View3D = _interopRequireDefault(require("./View3D"));
+var _ViewContext = require("./ViewContext");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/netlify.toml

@@ -0,0 +1,15 @@
+[build.environment]
+  NODE_OPTIONS = "--openssl-legacy-provider"
+
+[build]
+  # Directory to change to before starting a build.
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = ""
+
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "./storybook-static/"
+
+  # Default build command.
+  command = "yarn test && yarn build-storybook"

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@ifiwas/standard-view",
+  "version": "2.0.0",
+  "description": "3D Graphics Library for React Apps",
+  "repository": "ifiwas/standard-view",
+  "license": "MIT",
+  "contributors": [
+    "If I Was (https://ifiwaslabs.com/)",
+    "Wasif Islam"
+  ],
+  "main": "./index.js",
+  "scripts": {
+    "build": "vite build && yarn build-babel && yarn build-tsc",
+    "build-dev": "vite build --mode development",
+    "dev": "vite",
+    "build-babel": "babel --extensions '.ts,.tsx,.js,.jsx' src/ -d lib/ --copy-files",
+    "build-storybook": "storybook build",
+    "build-tsc": "tsc",
+    "build-flow": "flow-copy-source src lib",
+    "flow": "flow",
+    "lint": "eslint --cache --format codeframe --ext ts,tsx,mjs,jsx,js src stories",
+    "lint-fix": "eslint --cache --format codeframe --ext mjs,jsx,js src stories --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json}\" \"stories/**/*.{ts,tsx,js,jsx,json}\"",
+    "format-check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json}\" \"stories/**/*.{ts,tsx,js,jsx,json}\"",
+    "test": "jest",
+    "prepublish": "yarn build",
+    "storybook": "storybook dev -p 5001"
+  },
+  "keywords": [
+    "ifiwas",
+    "ifiwaslabs",
+    "ifiwas-standard-view",
+    "standard-view",
+    "standard-view-core",
+    "standard",
+    "view",
+    "core",
+    "@react-three/fiber",
+    "three",
+    "three.js",
+    "visualization",
+    "tool",
+    "package",
+    "3D",
+    "graphics"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@react-three/drei": "^10.5.1",
+    "@react-three/fiber": "^9.2.0",
+    "@storybook/addon-docs": "9.0.16",
+    "@storybook/addon-links": "9.0.16",
+    "@storybook/cli": "^9.0.16",
+    "@storybook/react-vite": "9.0.16",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.13",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/three": "^0.178.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "assert": "^2.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^10.0.0",
+    "eslint": "^9.31.0",
+    "eslint-config-airbnb": "^19.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "9.0.16",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
+    "mousetrap": "^1.6.3",
+    "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.16",
+    "three": "^0.178.0",
+    "ts-jest": "^29.0.0",
+    "tslib": "^2.6.0",
+    "typescript": "^5",
+    "vite": "^7.0.4",
+    "webpack": "^5.100.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "three": "^0.178.0"
+  },
+  "dependencies": {}
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "src",
+    "paths": {},
+    "outDir": "lib",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": false,
+    // "allowJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "moduleResolution": "node",
+    // "noEmit": true,
+    "strict": true,
+    // "isolatedModules": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": false,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+
+  },
+  "include": ["src", "src/types"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts"
+  ]
+}

package/tsconfig.prod.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}

package/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

package/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'StandardView',
+      formats: ['es', 'umd'],
+      fileName: (format) => `standard-view.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'three', '@react-three/fiber'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          three: 'THREE',
+          '@react-three/fiber': 'ReactThreeFiber',
+        },
+      },
+    },
+    sourcemap: true,
+    outDir: 'dist',
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});