figureone 1.1.6 → 1.2.1

package/index.js

@@ -34376,6 +34376,11 @@ var FIGURE1DEBUG = false;
   * @property {boolean} [antialias] enable WebGL anti-aliasing (`true`)
   * @property {number} [atlasScale] scale factor for GL text atlas texture
   * resolution relative to 1:1 pixel mapping (`2`)
+ * @property {() => void} [onWebGLUnavailable] callback fired once during
+ * construction if the browser cannot provide a WebGL context (e.g. context
+ * limit reached on resource-constrained hardware). The figure will still be
+ * created but nothing will render. For runtime context loss, subscribe to
+ * the `contextLost` / `contextRestored` notifications instead.
  * @interface
  * @group Figure
  */
@@ -34447,6 +34452,8 @@ var FIGURE1DEBUG = false;
  * - `beforeDraw`: published before a frame is drawn
  * - `afterDraw`: published after a frame is drawn
  * - `resize`: published after a resize event, but before frame drawing
+ * - `contextLost`: published when the browser removes the WebGL context
+ * - `contextRestored`: published when the browser returns the WebGL context
  *
  * @class
  * @param {OBJ_Figure} options
@@ -34457,6 +34464,10 @@ var FIGURE1DEBUG = false;
  * @property {NotificationManager} notifications notification manager for
  * element
  * @property {FontManager} fonts watches and reports on font availability
+ * @property {boolean} webglAvailable `true` when a live WebGL context is
+ * attached to the figure. `false` if the browser could not provide a
+ * context at construction time or if the context has since been lost (see
+ * the `contextLost` / `contextRestored` notifications)
  *
  * @example
  * // Simple html and javascript example to create a figure, and add a
@@ -34500,46 +34511,6 @@ var FIGURE1DEBUG = false;
  * @group Figure
  */
 var Figure = /*#__PURE__*/function () {
-  // canvasHigh: HTMLCanvasElement;
-
-  // textCanvasHigh: HTMLCanvasElement;
-
-  // draw2DHigh: DrawContext2D;
-
-  // webglHigh: WebGLInstance;
-
-  // gestureElement: HTMLElement;
-
-  // shapesHigh: Object;
-  // equation: Object;
-  // equationLow: Object;
-  // equationHigh: Object;
-
-  // objectsHigh: FigureCollections;
-
-  // used for drawing debug only
-
-  // zoom: {
-  //   last: {
-  //     mag: number,
-  //     position: Point,
-  //     angle: number,
-  //     distance: number,
-  //   },
-  //   current: {
-  //     position: Point,
-  //     angle: number,
-  //     distance: number,
-  //   },
-  //   max: null | number,
-  //   min: null | number,
-  //   scale: number,
-  //   mag: number,
-  //   cumOffset: Point,
-  //   cumAngle: number,
-  //   pinching: boolean,
-  // }
-
   function Figure() {
     var _this = this;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -34661,6 +34632,9 @@ var Figure = /*#__PURE__*/function () {
         this.backgroundColor = optionsToUse.backgroundColor;
         var webglLow = new _webgl_webgl__WEBPACK_IMPORTED_MODULE_0__["default"](this.canvasLow, this.backgroundColor, optionsToUse.antialias, optionsToUse.atlasScale);
         this.webglLow = webglLow;
+        if (!webglLow.webglAvailable && optionsToUse.onWebGLUnavailable) {
+          optionsToUse.onWebGLUnavailable();
+        }
         this._boundContextLost = this.contextLost.bind(this);
         this._boundContextRestored = this.contextRestored.bind(this);
         this.canvasLow.addEventListener('webglcontextlost', this._boundContextLost, false);
@@ -34893,6 +34867,59 @@ var Figure = /*#__PURE__*/function () {
     this.originalScalePoint = null;
   }
   return _createClass(Figure, [{
+    key: "webglAvailable",
+    get:
+    // canvasHigh: HTMLCanvasElement;
+
+    // textCanvasHigh: HTMLCanvasElement;
+
+    // draw2DHigh: DrawContext2D;
+
+    // webglHigh: WebGLInstance;
+
+    // gestureElement: HTMLElement;
+
+    // shapesHigh: Object;
+    // equation: Object;
+    // equationLow: Object;
+    // equationHigh: Object;
+
+    // objectsHigh: FigureCollections;
+
+    // used for drawing debug only
+
+    // zoom: {
+    //   last: {
+    //     mag: number,
+    //     position: Point,
+    //     angle: number,
+    //     distance: number,
+    //   },
+    //   current: {
+    //     position: Point,
+    //     angle: number,
+    //     distance: number,
+    //   },
+    //   max: null | number,
+    //   min: null | number,
+    //   scale: number,
+    //   mag: number,
+    //   cumOffset: Point,
+    //   cumAngle: number,
+    //   pinching: boolean,
+    // }
+
+    /**
+     * `true` when a live WebGL context is attached to the figure. `false` if
+     * the browser could not provide a context at construction time, or if the
+     * context has since been lost. Transitions back to `true` when the
+     * context is restored. Subscribe to the `contextLost` and
+     * `contextRestored` notifications to react to runtime transitions.
+     */
+    function get() {
+      return this.webglLow.webglAvailable;
+    }
+  }, {
     key: "fontsLoaded",
     value: function fontsLoaded() {
       this.elements.fontUpdated();
@@ -35546,6 +35573,7 @@ var Figure = /*#__PURE__*/function () {
       event.preventDefault();
       this.lostContextMessage.innerHTML = '<div class="figureone__lostcontext_message"><p>Browser removed WebGL context from FigureOne and has yet to return it.</p> <p>Reload page to restore.</p></div>';
       this.lostContextMessage.style.display = 'table';
+      this.webglLow.webglAvailable = false;
       this.elements.contextLost();
       this.webglLow.contextLost();
       this.notifications.publish('contextLost');
@@ -35558,6 +35586,7 @@ var Figure = /*#__PURE__*/function () {
       this.webglLow.init(this.webglLow.gl);
       this.webglLow.recreateAtlases();
       this.init(this.webglLow);
+      this.webglLow.webglAvailable = true;
       this.lostContextMessage.style.display = 'none';
       this.notifications.publish('contextRestored');
       (0,_tools_tools__WEBPACK_IMPORTED_MODULE_7__.Console)('FigureOne context restored!');
@@ -64738,6 +64767,7 @@ var Atlas = /*#__PURE__*/function () {
       if (Math.pow(dimension, 2) > 16777216 && isIOS()) {
         var mDim = Math.sqrt(16777216);
         fontSizePX *= mDim / dimension * 0.95;
+        this.fontSize = fontSizePX;
         dimension = Math.floor(Math.ceil(Math.sqrt(glyphs.length) + 2) * fontSizePX * 1.5);
       }
       var canvas = document.createElement('canvas');
@@ -65450,6 +65480,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 var glMock = {
+  // Constants
   TRIANGLES: 1,
   TRIANGLE_STRIP: 2,
   TRIANGLE_FAN: 3,
@@ -65460,8 +65491,10 @@ var glMock = {
   FRAGMENT_SHADER: 1,
   SRC_ALPHA: 1,
   ONE_MINUS_SRC_ALPHA: 1,
+  ONE: 1,
   BLEND: 1,
   COLOR_BUFFER_BIT: 1,
+  DEPTH_TEST: 1,
   TEXTURE_2D: 1,
   RGBA: 1,
   UNSIGNED_BYTE: 1,
@@ -65474,6 +65507,15 @@ var glMock = {
   STATIC_DRAW: 1,
   FLOAT: 1,
   UNPACK_PREMULTIPLY_ALPHA_WEBGL: 1,
+  UNPACK_FLIP_Y_WEBGL: 1,
+  REPEAT: 1,
+  TEXTURE0: 1,
+  RENDERBUFFER: 1,
+  FRAMEBUFFER: 1,
+  COLOR_ATTACHMENT0: 1,
+  DEPTH_ATTACHMENT: 1,
+  DEPTH_COMPONENT16: 1,
+  // Methods
   createBuffer: function createBuffer() {},
   bindBuffer: function bindBuffer() {},
   bufferData: function bufferData() {},
@@ -65488,7 +65530,9 @@ var glMock = {
   drawArrays: function drawArrays() {},
   clearColor: function clearColor() {},
   clear: function clear() {},
-  createTexture: function createTexture() {},
+  createTexture: function createTexture() {
+    return null;
+  },
   activeTexture: function activeTexture() {},
   bindTexture: function bindTexture() {},
   pixelStorei: function pixelStorei() {},
@@ -65516,6 +65560,27 @@ var glMock = {
   deleteShader: function deleteShader() {},
   useProgram: function useProgram() {},
   viewport: function viewport() {},
+  generateMipmap: function generateMipmap() {},
+  deleteTexture: function deleteTexture() {},
+  getProgramInfoLog: function getProgramInfoLog() {
+    return '';
+  },
+  // Framebuffer/renderbuffer methods (used by TargetTexture)
+  createRenderbuffer: function createRenderbuffer() {
+    return null;
+  },
+  bindRenderbuffer: function bindRenderbuffer() {},
+  renderbufferStorage: function renderbufferStorage() {},
+  createFramebuffer: function createFramebuffer() {
+    return null;
+  },
+  bindFramebuffer: function bindFramebuffer() {},
+  framebufferTexture2D: function framebufferTexture2D() {},
+  framebufferRenderbuffer: function framebufferRenderbuffer() {},
+  deleteRenderbuffer: function deleteRenderbuffer() {},
+  deleteFramebuffer: function deleteFramebuffer() {},
+  drawingBufferWidth: 100,
+  drawingBufferHeight: 100,
   canvas: {
     toDataURL: function toDataURL() {
       return '';
@@ -65640,10 +65705,11 @@ var WebGLInstance = /*#__PURE__*/function () {
     this.atlases = {};
     if (gl == null) {
       gl = glMock;
+      this.webglAvailable = false;
+    } else {
+      this.webglAvailable = true;
     }
-    if (gl != null) {
-      this.init(gl);
-    }
+    this.init(gl);
   }
   return _createClass(WebGLInstance, [{
     key: "addTexture",
@@ -80583,8 +80649,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.1.6",
-  gitHash: "3c65fcdeb",
+  version: "1.2.1",
+  gitHash: "40843fa58",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figureone",
-  "version": "1.1.6",
+  "version": "1.2.1",
   "description": "Draw, animate and interact with shapes, text, plots and equations in Javascript. Create interactive slide shows, and interactive videos.",
   "main": "index.js",
   "types": "types/index.d.ts",

package/types/js/figure/Figure.d.ts

@@ -86,6 +86,11 @@ export type OBJ_FigureForElement = {
   * @property {boolean} [antialias] enable WebGL anti-aliasing (`true`)
   * @property {number} [atlasScale] scale factor for GL text atlas texture
   * resolution relative to 1:1 pixel mapping (`2`)
+ * @property {() => void} [onWebGLUnavailable] callback fired once during
+ * construction if the browser cannot provide a WebGL context (e.g. context
+ * limit reached on resource-constrained hardware). The figure will still be
+ * created but nothing will render. For runtime context loss, subscribe to
+ * the `contextLost` / `contextRestored` notifications instead.
  * @interface
  * @group Figure
  */
@@ -100,6 +105,7 @@ export type OBJ_Figure = {
     backgroundColor?: number;
     antialias?: boolean;
     atlasScale?: number;
+    onWebGLUnavailable?: () => void;
 };
 /**
  * Primary Figure class.
@@ -129,6 +135,8 @@ export type OBJ_Figure = {
  * - `beforeDraw`: published before a frame is drawn
  * - `afterDraw`: published after a frame is drawn
  * - `resize`: published after a resize event, but before frame drawing
+ * - `contextLost`: published when the browser removes the WebGL context
+ * - `contextRestored`: published when the browser returns the WebGL context
  *
  * @class
  * @param {OBJ_Figure} options
@@ -139,6 +147,10 @@ export type OBJ_Figure = {
  * @property {NotificationManager} notifications notification manager for
  * element
  * @property {FontManager} fonts watches and reports on font availability
+ * @property {boolean} webglAvailable `true` when a live WebGL context is
+ * attached to the figure. `false` if the browser could not provide a
+ * context at construction time or if the context has since been lost (see
+ * the `contextLost` / `contextRestored` notifications)
  *
  * @example
  * // Simple html and javascript example to create a figure, and add a
@@ -266,6 +278,14 @@ declare class Figure {
     lostContextMessage: HTMLElement;
     scene: Scene;
     fonts: FontManager;
+    /**
+     * `true` when a live WebGL context is attached to the figure. `false` if
+     * the browser could not provide a context at construction time, or if the
+     * context has since been lost. Transitions back to `true` when the
+     * context is restored. Subscribe to the `contextLost` and
+     * `contextRestored` notifications to react to runtime transitions.
+     */
+    get webglAvailable(): boolean;
     animations: AnimationManager;
     state: {
         pause: 'paused' | 'preparingToPause' | 'preparingToUnpause' | 'unpaused';

package/types/js/figure/webgl/webgl.d.ts

@@ -49,6 +49,7 @@ declare class WebGLInstance {
     getProgram(vertexShader: TypeVertexShader, fragmentShader: TypeFragmentShader): number;
     useProgram(programIndex: number): Record<string, any> | null;
     atlasScale: number;
+    webglAvailable: boolean;
     constructor(canvas: HTMLCanvasElement, backgroundColor: Array<number>, antialias?: boolean, atlasScale?: number);
     init(gl: WebGLRenderingContext): void;
     resize(): void;