@ifiwas/standard-view 2.0.0

package/lib/primitives/Circle.js

@@ -0,0 +1,85 @@
+"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 THREE = _interopRequireWildcard(require("three"));
+var _Mesh = _interopRequireDefault(require("./Mesh"));
+var _math = require("../utils/math");
+var _excluded = ["radius", "scale", "segments", "thetaStart", "thetaLength", "side", "children"]; // Circle.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 _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 useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * Circle
+ *
+ * A Circle's radius property is used to scale the Mesh to the desired
+ * size. The geometry is constructed with the default radius of 1.
+ * The number of segments, however is passed into the geometry's constructor.
+ * More segments make the circle look smoother, but also result in more
+ * triangles to render.
+ *
+ * @param {CircleProps} props
+ */
+var Circle = function Circle(_ref) {
+  var _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? 1 : _ref$radius,
+    scale = _ref.scale,
+    _ref$segments = _ref.segments,
+    segments = _ref$segments === void 0 ? 32 : _ref$segments,
+    _ref$thetaStart = _ref.thetaStart,
+    thetaStart = _ref$thetaStart === void 0 ? 0 : _ref$thetaStart,
+    _ref$thetaLength = _ref.thetaLength,
+    thetaLength = _ref$thetaLength === void 0 ? Math.PI * 2 : _ref$thetaLength,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "double" : _ref$side,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Radius
+  var _scale = useMemo(function updateScale() {
+    var r = Math.max(radius, _math.EPS);
+
+    // Zero Radius Warning
+    if (r === _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Circle] Zero radius!");
+    }
+    return scale || [r, r, 1];
+  }, [scale, radius]);
+
+  // Cirle Arguments
+  var circleArgs = useMemo(function updateCircleArgs() {
+    return [1,
+    // radius at scale 1
+    segments, thetaStart, thetaLength];
+  }, [segments, thetaStart, thetaLength]);
+
+  // Circle Buffer Geometry
+  var geometry = useMemo(function initGeometry() {
+    return _construct(THREE.CircleGeometry, _toConsumableArray(circleArgs));
+  }, [circleArgs]);
+  return /*#__PURE__*/React.createElement(_Mesh["default"], _extends({
+    scale: _scale,
+    side: side,
+    geometry: geometry
+  }, otherProps), children);
+};
+var CircleMemo = memo(Circle);
+CircleMemo.displayName = "Circle";
+var _default = exports["default"] = CircleMemo;

package/lib/primitives/Cylinder.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { MeshProps } from './Mesh';
+interface CylinderProps extends MeshProps {
+    start?: Array<number>;
+    end?: Array<number>;
+    radius?: number;
+    height?: number;
+    radiusTop?: number;
+    radiusBottom?: number;
+    radialSegments?: number;
+    heightSegments?: number;
+    openEnded?: boolean;
+}
+declare const CylinderMemo: React.NamedExoticComponent<CylinderProps>;
+export default CylinderMemo;

package/lib/primitives/Cylinder.js

@@ -0,0 +1,180 @@
+"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 THREE = _interopRequireWildcard(require("three"));
+var _Mesh = _interopRequireDefault(require("./Mesh"));
+var _constants = require("../utils/constants");
+var _math = require("../utils/math");
+var _excluded = ["position", "start", "end", "quaternion", "rotation", "scale", "radius", "radiusTop", "radiusBottom", "height", "radialSegments", "heightSegments", "openEnded", "children"]; // Cylinder.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 _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 useMemo = React.useMemo,
+  memo = React.memo;
+/**
+ * Cylinder
+ *
+ * A Cylinder's start and end points are used to determine the height,
+ * and rotation of the mesh to represent a cylinder along the start to end
+ * vector. The radius is used to scale the mesh for the appropriate thickness.
+ * Cylinder's may also have radiusBottom and radiusTop which correspond to the
+ * start and end faces respectively. The scale parameter takes least priority if
+ * start, end, and radius are provided.
+ *
+ * @param {CylinderProps} props
+ */
+var Cylinder = function Cylinder(_ref) {
+  var position = _ref.position,
+    start = _ref.start,
+    end = _ref.end,
+    quaternion = _ref.quaternion,
+    rotation = _ref.rotation,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? [1, 1, 1] : _ref$scale,
+    radius = _ref.radius,
+    _ref$radiusTop = _ref.radiusTop,
+    radiusTop = _ref$radiusTop === void 0 ? 1 : _ref$radiusTop,
+    _ref$radiusBottom = _ref.radiusBottom,
+    radiusBottom = _ref$radiusBottom === void 0 ? 1 : _ref$radiusBottom,
+    height = _ref.height,
+    _ref$radialSegments = _ref.radialSegments,
+    radialSegments = _ref$radialSegments === void 0 ? 32 : _ref$radialSegments,
+    _ref$heightSegments = _ref.heightSegments,
+    heightSegments = _ref$heightSegments === void 0 ? 1 : _ref$heightSegments,
+    _ref$openEnded = _ref.openEnded,
+    openEnded = _ref$openEnded === void 0 ? false : _ref$openEnded,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  // Start and End Determine Position (Center), Quaternion, and Height of Cylinder
+  var _useMemo = useMemo(function updateDispAndPosition() {
+      var _start = start;
+      var _end = end;
+
+      // Generate Start and End if not provided
+      if (_start == null || _end == null) {
+        if (position) {
+          _start = [position[0], position[1] - 0.5, position[2]];
+          _end = [position[0], position[1] + 0.5, position[2]];
+        } else {
+          _start = [0, -0.5, 0];
+          _end = [0, 0.5, 0];
+        }
+      }
+      var startV = _construct(THREE.Vector3, _toConsumableArray(_start));
+      var endV = _construct(THREE.Vector3, _toConsumableArray(_end));
+
+      // Displacement
+      var dispV = endV.clone().sub(startV);
+
+      // Center is at the mid-point between start and end
+      var posVec = startV.clone().add(endV).multiplyScalar(0.5);
+      return {
+        dispVec: dispV,
+        _position: [posVec.x, posVec.y, posVec.z]
+      };
+    }, [start, end, position]),
+    dispVec = _useMemo.dispVec,
+    _position = _useMemo._position;
+
+  // Quaternion
+  var _quaternion = useMemo(function updateQuaternion() {
+    if (quaternion) {
+      return quaternion;
+    }
+
+    // Cylinder's rotation should line up along start to end direction
+    // by default the cylinder is parallel to y-axis
+    var normal = dispVec.clone().normalize();
+    var q = new THREE.Quaternion().setFromUnitVectors(_constants.Y_AXIS, normal);
+
+    // Apply additional rotation
+    if (rotation) {
+      var rot = new THREE.Quaternion().setFromEuler(// @ts-ignore:T2345 // spread
+      _construct(THREE.Euler, _toConsumableArray(rotation).concat(['XYZ'])));
+      q.premultiply(rot);
+    }
+    return q;
+  }, [dispVec, quaternion, rotation]);
+
+  // Scale
+  var _scale = useMemo(function updateScale() {
+    var s = scale;
+    if (!Array.isArray(scale) || scale.length !== 3) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Cylinder] scale must be a 3x1 array of numbers! scale: ".concat(scale));
+      s = [1, 1, 1];
+    }
+
+    // Scale Cylinder height to match distance between start and end
+    s[1] = Math.max(dispVec.length(), _math.EPS);
+
+    // Scale Cylinder to match height
+    if (height != null) {
+      s[1] = Math.max(height, _math.EPS);
+    }
+
+    // Scale Cylinder to match radius
+    if (radius != null) {
+      var r = Math.max(radius, _math.EPS);
+      s[0] = r;
+      s[2] = r;
+    }
+
+    // Zero Radius Warning
+    if (s[0] <= _math.EPS && s[2] <= _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Cylinder] Zero radius!");
+    }
+
+    // Zero Height Warning
+    if (s[1] <= _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Cylinder] Zero height!");
+    }
+    return s;
+  }, [dispVec, scale, radius, height]);
+
+  // Cylinder Arguments
+  var cylinderArgs = useMemo(function updateCylinderArgs() {
+    // Zero Radius Warning
+    if (radiusTop <= _math.EPS && radiusBottom <= _math.EPS) {
+      /* eslint-disable-next-line no-console */
+      console.warn("[Cylinder] Both top and bottom radius are zero!");
+    }
+    return [radiusTop, radiusBottom, 1,
+    // height at scale 1
+    radialSegments, heightSegments, openEnded];
+  }, [radiusTop, radiusBottom, radialSegments, heightSegments, openEnded]);
+
+  // Cylinder Buffer Geometry
+  var geometry = useMemo(function initGeometry() {
+    // @ts-ignore:T2345 // spread
+    return _construct(THREE.CylinderGeometry, _toConsumableArray(cylinderArgs));
+  }, [cylinderArgs]);
+  return /*#__PURE__*/React.createElement(_Mesh["default"], _extends({
+    position: _position,
+    scale: _scale,
+    quaternion: _quaternion,
+    rotation: rotation,
+    geometry: geometry
+  }, otherProps), children);
+};
+var CylinderMemo = memo(Cylinder);
+CylinderMemo.displayName = 'Cylinder';
+var _default = exports["default"] = CylinderMemo;

package/lib/primitives/Label.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { MeshProps } from "./Mesh";
+interface LabelProps extends MeshProps {
+    text?: string;
+    fontName?: string;
+    fontStyle?: string;
+    backgroundColor?: string;
+    noBackground?: boolean;
+    borderColor?: string;
+    borderThickness?: number;
+    noBorder?: boolean;
+    textColor?: string;
+    resolution?: number;
+    align?: string;
+    billboard?: boolean;
+}
+declare const LabelMemo: React.NamedExoticComponent<LabelProps>;
+export default LabelMemo;

package/lib/primitives/Label.js

@@ -0,0 +1,189 @@
+"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 THREE = _interopRequireWildcard(require("three"));
+var _Plane = _interopRequireDefault(require("./Plane"));
+var _math = require("../utils/math");
+var _util = require("../utils/util");
+var _excluded = ["text", "fontName", "fontStyle", "color", "backgroundColor", "noBackground", "borderColor", "borderThickness", "noBorder", "transparent", "opacity", "textColor", "anisotropy", "resolution", "align", "billboard", "children"]; // Label.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 _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 _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 _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;
+/**
+ * Label
+ *
+ * Label is composed within a Plane. The text is drawn on a canvas element
+ * which is then converted to a texture for a plane. Unlike Text, the
+ * geometric complexity of Label does not increase with the number of
+ * letters in the text, since there is always just a plane segment rendered.
+ * There is a slight overhead for creating the canvas and applying it as
+ * a texture. Label may accept any HTML canvas fontName and fontStyle.
+ * The resolution of the texture may also be controlled. Keep in mind that
+ * higher resolution does look crisp even at high zooms, but requires more memory
+ * for storing the texture.
+ *
+ * The Label's position may be aligned to a specific anchor point of the label
+ * with the align prop. The anchor point of the label is what the position refers to.
+ *
+ * The ◼'s represent the anchor points.
+ *
+ *    ◼----◼----◼
+ *    |         |
+ *    ◼    ◼    ◼
+ *    |         |
+ *    ◼----◼----◼
+ *
+ * @param {LabelProps} props
+ */
+var Label = function Label(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "Label" : _ref$text,
+    _ref$fontName = _ref.fontName,
+    fontName = _ref$fontName === void 0 ? "san-serif" : _ref$fontName,
+    _ref$fontStyle = _ref.fontStyle,
+    fontStyle = _ref$fontStyle === void 0 ? "" : _ref$fontStyle,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "white" : _ref$color,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? "black" : _ref$backgroundColor,
+    _ref$noBackground = _ref.noBackground,
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? "white" : _ref$borderColor,
+    _ref$borderThickness = _ref.borderThickness,
+    borderThickness = _ref$borderThickness === void 0 ? 10 : _ref$borderThickness,
+    _ref$noBorder = _ref.noBorder,
+    noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
+    transparent = _ref.transparent,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? "white" : _ref$textColor,
+    _ref$anisotropy = _ref.anisotropy,
+    anisotropy = _ref$anisotropy === void 0 ? 16 : _ref$anisotropy,
+    _ref$resolution = _ref.resolution,
+    resolution = _ref$resolution === void 0 ? 32 : _ref$resolution,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$billboard = _ref.billboard,
+    billboard = _ref$billboard === void 0 ? false : _ref$billboard,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _transparent = transparent != null ? transparent : opacity < 1 - _math.EPS;
+  _transparent = noBackground ? true : _transparent;
+
+  // Font
+  var font = useMemo(function updateFont() {
+    return "".concat(fontStyle, " ").concat(resolution, "px ").concat(fontName);
+  }, [fontStyle, resolution, fontName]);
+  var _useMemo = useMemo(function updateTexture() {
+      // Init Canvas
+      var canvas = document.createElement("canvas");
+      var ctx = canvas.getContext("2d");
+      if (!ctx) {
+        /* eslint-disable-next-line no-console */
+        console.warn('[Label] Failed to getContext("2d") of canvas');
+        return [undefined, 1];
+      }
+      canvas.width = 2;
+      canvas.height = 2;
+
+      // Label Width
+      ctx.font = font;
+      var textWidth = ctx.measureText(text).width;
+      var width = (0, _math.nextPowerOfTwo)(textWidth);
+      var height = (0, _math.nextPowerOfTwo)(resolution) * 2;
+      var asp = width / height;
+
+      // Resize Canvas to Fit Label
+      canvas.width = width;
+      canvas.height = height;
+      ctx.font = font; // Reset font
+
+      // Clear
+      ctx.clearRect(0, 0, width, height);
+
+      // Background
+      if (!noBackground) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, width, height);
+      }
+
+      // Border
+      if (!noBorder) {
+        ctx.strokeStyle = borderColor;
+        ctx.lineWidth = borderThickness;
+        ctx.strokeRect(0, 0, width, height);
+      }
+
+      // Fill Text
+      ctx.fillStyle = textColor;
+      ctx.fillText(text, (width - textWidth) / 2, height * 0.666);
+
+      // Label Texture
+      var tex = new THREE.CanvasTexture(canvas);
+      tex.anisotropy = anisotropy;
+      return [tex, asp];
+    }, [text, resolution, font, backgroundColor, noBackground, borderColor, borderThickness, noBorder, textColor, anisotropy]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    texture = _useMemo2[0],
+    aspect = _useMemo2[1];
+
+  // Label Geometry
+  var labelGeometry = useRef(new THREE.PlaneGeometry());
+
+  // Align
+  var prevAspect = useRef(1);
+  var prevAlign = useRef("center");
+  useEffect(function updateAlign() {
+    var _labelGeometry$curren;
+    // Align
+    var diagonal = [prevAspect.current, 1, 1];
+    var alignmentOffset = (0, _util.getAlignmentOffset)(prevAlign.current, align, diagonal);
+    // @ts-ignore:TS2556 // spread
+    (_labelGeometry$curren = labelGeometry.current).translate.apply(_labelGeometry$curren, _toConsumableArray(alignmentOffset));
+    prevAlign.current = align;
+  }, [labelGeometry, align]);
+
+  // Aspect
+  useEffect(function updateScale() {
+    // Scale Plane to Label Text Width (textwidth x 1 x 1)
+    // Reset
+    labelGeometry.current.scale(1 / prevAspect.current, 1, 1);
+    // Aspect
+    labelGeometry.current.scale(aspect, 1, 1);
+    prevAspect.current = aspect;
+  }, [labelGeometry, aspect]);
+  return /*#__PURE__*/React.createElement(_Plane["default"], _extends({
+    map: texture,
+    transparent: _transparent,
+    opacity: opacity,
+    color: color,
+    geometry: labelGeometry.current,
+    animation: billboard ? _util.billboard : undefined
+  }, otherProps), children);
+};
+var LabelMemo = memo(Label);
+LabelMemo.displayName = "Label";
+var _default = exports["default"] = LabelMemo;

package/lib/primitives/Line.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as THREE from 'three';
+export interface LineProps {
+    start?: Array<number>;
+    end?: Array<number>;
+    points?: Array<Array<number>>;
+    color?: string | THREE.Color;
+    hoverColor?: string;
+    hoverable?: boolean;
+    opacity?: number;
+    transparent?: boolean;
+    groupMember?: boolean;
+    castShadow?: boolean;
+    geometry?: THREE.BufferGeometry;
+    material?: THREE.Material;
+    children?: any;
+}
+declare const LineMemo: React.NamedExoticComponent<LineProps>;
+export default LineMemo;