awv3/core/canvas.js

⚡ AWV3 embedded CAD

import v4 from 'uuid-v4';
import { queryDom, url } from './helpers';
import Parser from './parser';
import Events from './events';
import Renderer from './renderer';
/** Global awv3 version */

export var version = '9.2.52';
/** last created canvas */

export var lastCreated = undefined;
/** The Canvas class holds the webGL context and maps the underlying views.
 It initializes it's own renderer, event system and parser. */

var Canvas =
/*#__PURE__*/
function () {
  /** Construct a new Canvas
        @param {Object} [options={}] - Options to initialize the Canvas with
        @param {HTMLElement} [options.dom] - The HTML element in which the canvas will live. If this is empty a detached div element will be created that needs to be appended to the DOM manually. This may be the best option for viewmodel driven frameworks since the state can be exported out and held separtely to the 3d-control.
        @param {Number} [options.debugLevel=0] - Console debugging levels
        @param {Number} [options.resolution=1] - GL Canvas rasolution
        @param {String} [options.place='first'] - Where to place the render-element, options are 'first' and 'last'
        @param {Boolean} [options.startImmediately=true] - If true will run a requestAnimationFrame going into a loop. If false, it can be called manually (canvas,renderer.start();)
        @param {THREE.Color} [options.clearColor=new THREE.Color(0)] - WebGL option
        @param {String} [options.precision='highp'] - WebGL option
        @param {Boolean} [options.premultipliedAlpha=true] - WebGL option
        @param {Boolean} [options.stencil=true] - WebGL option
        @param {Boolean} [options.depth=true] - WebGL option, depth buffer
        @param {Boolean} [options.preserveDrawingBuffer=true] - WebGL option, retains draw calls, critical for multiple views
        @param {Boolean} [options.alpha=true] - WebGL option, enables alpha cannel
        @param {Boolean} [options.antialias=true] - WebGL option, enables aleasing
        @param {Boolean} [options.logarithmicDepthBuffer=false] - WebGL option
        @example
        import Canvas from 'canvas';
        // Create new canvas inside #main
        const canvas = new Canvas({ dom: '#main' });
        // Parse meshes
        let context = await canvas.parser.stream('meshes.txt');
        @returns {Object} The constructed Canvas */
  function Canvas(options) {
    var _this = this;

    if (options === void 0) {
      options = {};
    }

    /** awv3 version */
    this.version = version;
    /** GUID to help identify the canvas */

    this.id = v4();
    /** List of managed views */

    this.views = [];

    if (!options.dom) {
      options.dom = document.createElement('div');
      options.dom.style.cssText = 'position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;';
    }
    /** The dom node in which the canvas lives */


    this.dom = queryDom(options.dom);
    this.dom.addEventListener('contextmenu', function (event) {
      return event.preventDefault();
    }, false);
    /** Debug level for this canvas */

    this.debugLevel = options.debugLevel || parseInt(url('debugLevel')) || 0;

    if (!lastCreated) {
      var tag = "%c AWV3 %c " + version + " %c Resolution:" + (options.resolution || parseFloat(url('resolution')) || 1) + " %c Cores:" + (navigator.hardwareConcurrency || 4) + " ";
      console.log(tag, 'background: #373737; color: white;', 'background: #c23369; color: white;', 'background: #28d79f; color: white;', 'background: #28b4d7; color: white;');
    }
    /** Global events using the {@link Events} class */


    this.events = new Events();
    /** GL {@link Renderer} via three.js */

    this.renderer = new Renderer(this, options);
    /** {@link Parser} using webworkers to unpack and optimize compressed packages */

    this.parser = new Parser();
    this.observer = new MutationObserver(function (records) {
      for (var _iterator = records, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
        var _ref;

        if (_isArray) {
          if (_i >= _iterator.length) break;
          _ref = _iterator[_i++];
        } else {
          _i = _iterator.next();
          if (_i.done) break;
          _ref = _i.value;
        }

        var _record = _ref;

        if (_record.target === _this.dom) {
          _this.renderer.invalidateCanvas(30);
        } else {
          // Invalidate views (means they'll have x frames to test for changes)
          _this.renderer.invalidateViews(30);
        }
      }
    });
    this.observer.observe(this.dom, {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: false,
      attributeOldValue: false,
      characterDataOldValue: false
    });
    lastCreated = this;
  }

  var _proto = Canvas.prototype;

  _proto.destroy = function destroy() {
    this.observer.disconnect();
    this.views.forEach(function (view) {
      return view.destroy();
    });
    this.renderer.destroy();
    this.events.removeListeners();
    this.events.removeInspectors();
    this.renderer = undefined;
    this.observer = undefined;
    this.parser = undefined;
    this.events = undefined;
  };

  return Canvas;
}();

export { Canvas as default };