opal-js_wrap-three 0.1.1 → 0.1.2

data/lib-opal/js_wrap/three/interactive/HTMLMesh.js

@@ -0,0 +1,307 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "three"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("three"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.three);
+    global.HTMLMesh = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _three) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.HTMLMesh = void 0;
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+  function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+  var HTMLMesh = /*#__PURE__*/function (_Mesh) {
+    _inherits(HTMLMesh, _Mesh);
+
+    var _super = _createSuper(HTMLMesh);
+
+    function HTMLMesh(dom) {
+      var _this;
+
+      _classCallCheck(this, HTMLMesh);
+
+      var texture = new HTMLTexture(dom);
+      var geometry = new _three.PlaneGeometry(texture.image.width * 0.001, texture.image.height * 0.001);
+      var material = new _three.MeshBasicMaterial({
+        map: texture,
+        toneMapped: false
+      });
+      _this = _super.call(this, geometry, material);
+
+      function onEvent(event) {
+        material.map.dispatchEvent(event);
+      }
+
+      _this.addEventListener('mousedown', onEvent);
+
+      _this.addEventListener('mousemove', onEvent);
+
+      _this.addEventListener('mouseup', onEvent);
+
+      _this.addEventListener('click', onEvent);
+
+      return _this;
+    }
+
+    return _createClass(HTMLMesh);
+  }(_three.Mesh);
+
+  _exports.HTMLMesh = HTMLMesh;
+
+  var HTMLTexture = /*#__PURE__*/function (_CanvasTexture) {
+    _inherits(HTMLTexture, _CanvasTexture);
+
+    var _super2 = _createSuper(HTMLTexture);
+
+    function HTMLTexture(dom) {
+      var _this2;
+
+      _classCallCheck(this, HTMLTexture);
+
+      _this2 = _super2.call(this, html2canvas(dom));
+      _this2.dom = dom;
+      _this2.anisotropy = 16;
+      _this2.encoding = _three.sRGBEncoding;
+      _this2.minFilter = _three.LinearFilter;
+      _this2.magFilter = _three.LinearFilter;
+      return _this2;
+    }
+
+    _createClass(HTMLTexture, [{
+      key: "dispatchEvent",
+      value: function dispatchEvent(event) {
+        htmlevent(this.dom, event.type, event.data.x, event.data.y);
+        this.update();
+      }
+    }, {
+      key: "update",
+      value: function update() {
+        this.image = html2canvas(this.dom);
+        this.needsUpdate = true;
+      }
+    }]);
+
+    return HTMLTexture;
+  }(_three.CanvasTexture); //
+
+
+  var canvases = new WeakMap();
+
+  function html2canvas(element) {
+    var range = document.createRange();
+
+    function Clipper(context) {
+      var clips = [];
+      var isClipping = false;
+
+      function doClip() {
+        if (isClipping) {
+          isClipping = false;
+          context.restore();
+        }
+
+        if (clips.length === 0) return;
+        var minX = -Infinity,
+            minY = -Infinity;
+        var maxX = Infinity,
+            maxY = Infinity;
+
+        for (var i = 0; i < clips.length; i++) {
+          var clip = clips[i];
+          minX = Math.max(minX, clip.x);
+          minY = Math.max(minY, clip.y);
+          maxX = Math.min(maxX, clip.x + clip.width);
+          maxY = Math.min(maxY, clip.y + clip.height);
+        }
+
+        context.save();
+        context.beginPath();
+        context.rect(minX, minY, maxX - minX, maxY - minY);
+        context.clip();
+        isClipping = true;
+      }
+
+      return {
+        add: function add(clip) {
+          clips.push(clip);
+          doClip();
+        },
+        remove: function remove() {
+          clips.pop();
+          doClip();
+        }
+      };
+    }
+
+    function drawText(style, x, y, string) {
+      if (string !== '') {
+        if (style.textTransform === 'uppercase') {
+          string = string.toUpperCase();
+        }
+
+        context.font = style.fontSize + ' ' + style.fontFamily;
+        context.textBaseline = 'top';
+        context.fillStyle = style.color;
+        context.fillText(string, x, y);
+      }
+    }
+
+    function drawBorder(style, which, x, y, width, height) {
+      var borderWidth = style[which + 'Width'];
+      var borderStyle = style[which + 'Style'];
+      var borderColor = style[which + 'Color'];
+
+      if (borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)') {
+        context.strokeStyle = borderColor;
+        context.beginPath();
+        context.moveTo(x, y);
+        context.lineTo(x + width, y + height);
+        context.stroke();
+      }
+    }
+
+    function drawElement(element, style) {
+      var x = 0,
+          y = 0,
+          width = 0,
+          height = 0;
+
+      if (element.nodeType === 3) {
+        // text
+        range.selectNode(element);
+        var rect = range.getBoundingClientRect();
+        x = rect.left - offset.left - 0.5;
+        y = rect.top - offset.top - 0.5;
+        width = rect.width;
+        height = rect.height;
+        drawText(style, x, y, element.nodeValue.trim());
+      } else {
+        if (element.style.display === 'none') return;
+        var rect = element.getBoundingClientRect();
+        x = rect.left - offset.left - 0.5;
+        y = rect.top - offset.top - 0.5;
+        width = rect.width;
+        height = rect.height;
+        style = window.getComputedStyle(element);
+        var backgroundColor = style.backgroundColor;
+
+        if (backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)') {
+          context.fillStyle = backgroundColor;
+          context.fillRect(x, y, width, height);
+        }
+
+        drawBorder(style, 'borderTop', x, y, width, 0);
+        drawBorder(style, 'borderLeft', x, y, 0, height);
+        drawBorder(style, 'borderBottom', x, y + height, width, 0);
+        drawBorder(style, 'borderRight', x + width, y, 0, height);
+
+        if (element.type === 'color' || element.type === 'text') {
+          clipper.add({
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          });
+          drawText(style, x + parseInt(style.paddingLeft), y + parseInt(style.paddingTop), element.value);
+          clipper.remove();
+        }
+      }
+      /*
+      // debug
+      context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
+      context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
+      */
+
+
+      var isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
+      if (isClipping) clipper.add({
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      });
+
+      for (var i = 0; i < element.childNodes.length; i++) {
+        drawElement(element.childNodes[i], style);
+      }
+
+      if (isClipping) clipper.remove();
+    }
+
+    var offset = element.getBoundingClientRect();
+    var canvas;
+
+    if (canvases.has(element)) {
+      canvas = canvases.get(element);
+    } else {
+      canvas = document.createElement('canvas');
+      canvas.width = offset.width;
+      canvas.height = offset.height;
+    }
+
+    var context = canvas.getContext('2d'
+    /*, { alpha: false }*/
+    );
+    var clipper = new Clipper(context); // console.time( 'drawElement' );
+
+    drawElement(element); // console.timeEnd( 'drawElement' );
+
+    return canvas;
+  }
+
+  function htmlevent(element, event, x, y) {
+    var mouseEventInit = {
+      clientX: x * element.offsetWidth + element.offsetLeft,
+      clientY: y * element.offsetHeight + element.offsetTop,
+      view: element.ownerDocument.defaultView
+    };
+    window.dispatchEvent(new MouseEvent(event, mouseEventInit));
+    var rect = element.getBoundingClientRect();
+    x = x * rect.width + rect.left;
+    y = y * rect.height + rect.top;
+
+    function traverse(element) {
+      if (element.nodeType !== 3) {
+        var _rect = element.getBoundingClientRect();
+
+        if (x > _rect.left && x < _rect.right && y > _rect.top && y < _rect.bottom) {
+          element.dispatchEvent(new MouseEvent(event, mouseEventInit));
+        }
+
+        for (var i = 0; i < element.childNodes.length; i++) {
+          traverse(element.childNodes[i]);
+        }
+      }
+    }
+
+    traverse(element);
+  }
+});

data/lib-opal/js_wrap/three/interactive/InteractiveGroup.js

@@ -0,0 +1,138 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "three"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("three"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.three);
+    global.InteractiveGroup = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _three) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.InteractiveGroup = void 0;
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+  function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+  var _pointer = new _three.Vector2();
+
+  var _event = {
+    type: '',
+    data: _pointer
+  };
+
+  var InteractiveGroup = /*#__PURE__*/function (_Group) {
+    _inherits(InteractiveGroup, _Group);
+
+    var _super = _createSuper(InteractiveGroup);
+
+    function InteractiveGroup(renderer, camera) {
+      var _this;
+
+      _classCallCheck(this, InteractiveGroup);
+
+      _this = _super.call(this);
+
+      var scope = _assertThisInitialized(_this);
+
+      var raycaster = new _three.Raycaster();
+      var tempMatrix = new _three.Matrix4(); // Pointer Events
+
+      var element = renderer.domElement;
+
+      function onPointerEvent(event) {
+        event.stopPropagation();
+        _pointer.x = event.clientX / element.clientWidth * 2 - 1;
+        _pointer.y = -(event.clientY / element.clientHeight) * 2 + 1;
+        raycaster.setFromCamera(_pointer, camera);
+        var intersects = raycaster.intersectObjects(scope.children, false);
+
+        if (intersects.length > 0) {
+          var intersection = intersects[0];
+          var object = intersection.object;
+          var uv = intersection.uv;
+          _event.type = event.type;
+
+          _event.data.set(uv.x, 1 - uv.y);
+
+          object.dispatchEvent(_event);
+        }
+      }
+
+      element.addEventListener('pointerdown', onPointerEvent);
+      element.addEventListener('pointerup', onPointerEvent);
+      element.addEventListener('pointermove', onPointerEvent);
+      element.addEventListener('mousedown', onPointerEvent);
+      element.addEventListener('mouseup', onPointerEvent);
+      element.addEventListener('mousemove', onPointerEvent);
+      element.addEventListener('click', onPointerEvent); // WebXR Controller Events
+      // TODO: Dispatch pointerevents too
+
+      var events = {
+        'move': 'mousemove',
+        'select': 'click',
+        'selectstart': 'mousedown',
+        'selectend': 'mouseup'
+      };
+
+      function onXRControllerEvent(event) {
+        var controller = event.target;
+        tempMatrix.identity().extractRotation(controller.matrixWorld);
+        raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
+        raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
+        var intersections = raycaster.intersectObjects(scope.children, false);
+
+        if (intersections.length > 0) {
+          var intersection = intersections[0];
+          var object = intersection.object;
+          var uv = intersection.uv;
+          _event.type = events[event.type];
+
+          _event.data.set(uv.x, 1 - uv.y);
+
+          object.dispatchEvent(_event);
+        }
+      }
+
+      var controller1 = renderer.xr.getController(0);
+      controller1.addEventListener('move', onXRControllerEvent);
+      controller1.addEventListener('select', onXRControllerEvent);
+      controller1.addEventListener('selectstart', onXRControllerEvent);
+      controller1.addEventListener('selectend', onXRControllerEvent);
+      var controller2 = renderer.xr.getController(1);
+      controller2.addEventListener('move', onXRControllerEvent);
+      controller2.addEventListener('select', onXRControllerEvent);
+      controller2.addEventListener('selectstart', onXRControllerEvent);
+      controller2.addEventListener('selectend', onXRControllerEvent);
+      return _this;
+    }
+
+    return _createClass(InteractiveGroup);
+  }(_three.Group);
+
+  _exports.InteractiveGroup = InteractiveGroup;
+});