figureone 1.0.6 → 1.0.7

package/index.js

@@ -8421,6 +8421,7 @@ var FigureFont = /*#__PURE__*/function () {
       this.loadColor = optionsIn.loadColor;
       this.atlasColor = optionsIn.atlasColor;
       this.atlasSize = optionsIn.atlasSize;
+      this.atlasId = optionsIn.atlasId;
       this.letterSpacing = optionsIn.letterSpacing;
       this.render = optionsIn.render;
       this.mods = (0,_glyphMeasures__WEBPACK_IMPORTED_MODULE_4__["default"])(this.family, this.style, this.maxAscent, this.midAscent, this.maxDescent, this.midDescent, this.descent, this.modifiers);
@@ -8451,6 +8452,7 @@ var FigureFont = /*#__PURE__*/function () {
       loadColor: [0, 0, 0, 0],
       atlasColor: false,
       atlasSize: null,
+      atlasId: '',
       render: '2d'
     };
     var options = (0,_tools_tools__WEBPACK_IMPORTED_MODULE_0__.joinObjects)({}, defaultOptions, optionsIn);
@@ -8504,6 +8506,7 @@ var FigureFont = /*#__PURE__*/function () {
     this.atlasSize = optionsIn.atlasSize || null;
     this.loadColor = options.loadColor;
     this.atlasColor = options.atlasColor;
+    this.atlasId = options.atlasId;
     this.glyphs = options.glyphs;
     this.id = options.id;
     this.timeout = options.timeout;
@@ -8553,6 +8556,9 @@ var FigureFont = /*#__PURE__*/function () {
   }, {
     key: "getTextureID",
     value: function getTextureID() {
+      if (this.atlasId && this.atlasId !== '') {
+        return this.atlasId;
+      }
       if (this.id && this.id !== '') {
         return this.id;
       }
@@ -33117,6 +33123,9 @@ var FIGURE1DEBUG = false;
   * @property {number} [length] default shape primary dimension
   * @property {TypeColor} [backgroundColor] background color for the figure.
   * Use [r, g, b, 1] for opaque and [0, 0, 0, 0] for transparent.
+  * @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`)
  * @interface
  * @group Figure
  */
@@ -33299,7 +33308,9 @@ var Figure = /*#__PURE__*/function () {
         glyphs: 'mathlatin',
         render: '2d'
       },
-      backgroundColor: [1, 1, 1, 1]
+      backgroundColor: [1, 1, 1, 1],
+      antialias: true,
+      atlasScale: 2
       // scene: {
       //   style: '2D',
       //   left: -1,
@@ -33397,14 +33408,14 @@ var Figure = /*#__PURE__*/function () {
         canvasStyle.innerHTML = "\n          .figureone__container {\n            position: relative;\n            pointer-events: none;\n          }\n          .figureone__canvas {\n            width: 100%;\n            height: 100%;\n            position: absolute;\n          }\n          .figureone__html {\n            pointer-events: auto;\n          }\n          .figureone__lostcontext {\n            display: table;\n            background-color: white;\n          }\n          .figureone__lostcontext_message {\n            text-align: center;\n            vertical-align: middle;\n            display: table-cell;\n            border: 1px solid #444;\n            color: #444;\n            padding: 2em;\n          }\n        ";
         document.getElementsByTagName('head')[0].appendChild(canvasStyle);
         this.backgroundColor = optionsToUse.backgroundColor;
-        var webglLow = new _webgl_webgl__WEBPACK_IMPORTED_MODULE_0__["default"](this.canvasLow, this.backgroundColor);
+        var webglLow = new _webgl_webgl__WEBPACK_IMPORTED_MODULE_0__["default"](this.canvasLow, this.backgroundColor, optionsToUse.antialias, optionsToUse.atlasScale);
         this.webglLow = webglLow;
         this.canvasLow.addEventListener('webglcontextlost', this.contextLost.bind(this), false);
         this.canvasLow.addEventListener('webglcontextrestored', this.contextRestored.bind(this), false);
         // TODO in future, if still using canvasOffScreen then need to have it
         // handle context lost and restored events
         if (this.canvasOffscreen) {
-          var webglOffscreen = new _webgl_webgl__WEBPACK_IMPORTED_MODULE_0__["default"](this.canvasOffscreen, this.backgroundColor);
+          var webglOffscreen = new _webgl_webgl__WEBPACK_IMPORTED_MODULE_0__["default"](this.canvasOffscreen, this.backgroundColor, optionsToUse.antialias, optionsToUse.atlasScale);
           this.webglOffscreen = webglOffscreen;
         }
         this.draw2DLow = new _DrawContext2D__WEBPACK_IMPORTED_MODULE_12__["default"](this.textCanvasLow);
@@ -63338,7 +63349,7 @@ var Atlas = /*#__PURE__*/function () {
       if (font.atlasSize != null) {
         fontSizePX = this.webgl.gl.canvas.height * font.atlasSize;
       } else {
-        fontSizePX = font.size / scene.heightNear * this.webgl.gl.canvas.height * 2;
+        fontSizePX = font.size / scene.heightNear * this.webgl.gl.canvas.height * this.webgl.atlasScale;
       }
       this.fontSize = fontSizePX;
       var glyphs = this.font.getGlyphs();
@@ -63355,14 +63366,17 @@ var Atlas = /*#__PURE__*/function () {
         fontSizePX *= mDim / dimension * 0.95;
         dimension = Math.floor(Math.ceil(Math.sqrt(glyphs.length) + 2) * fontSizePX * 1.5);
       }
-      var canvas;
+      var canvas = document.createElement('canvas');
       var ctx = null;
       for (var attempt = 0; attempt < 4; attempt += 1) {
-        canvas = document.createElement('canvas');
         canvas.width = dimension;
         canvas.height = dimension;
         ctx = canvas.getContext('2d');
         if (ctx != null) break;
+        // Free the failed canvas backing store before creating a new one
+        canvas.width = 0;
+        canvas.height = 0;
+        canvas = document.createElement('canvas');
         fontSizePX *= 0.5;
         this.fontSize = fontSizePX;
         dimension = Math.floor(Math.ceil(Math.sqrt(glyphs.length) + 2) * fontSizePX * 1.5);
@@ -63426,12 +63440,12 @@ var Atlas = /*#__PURE__*/function () {
       font.setColorInContext(ctx, underlineColor);
       ctx.fillRect(0, dimension - 5, 5, 5);
 
-      // Create a debug rectangle
-      ctx.rect(0, 0, dimension, dimension);
-      ctx.beginPath();
-      ctx.stroke();
+      // // Uncomment this to draw a debug border around the atlas
+      // ctx.beginPath();
+      // ctx.rect(0, 0, dimension, dimension);
+      // ctx.stroke();
 
-      // // Uncommnet this to debug atlas
+      // // Uncomment this to debug atlas
       // document.body.appendChild(canvas);
 
       // // Uncomment this to save atlas as image file
@@ -63439,6 +63453,10 @@ var Atlas = /*#__PURE__*/function () {
       // const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
       // window.location.href=image;
       this.webgl.addTexture(this.font.getTextureID(), ctx.canvas, [0, 0, 0, 0], false, null, true);
+      // Free the canvas backing store immediately since pixel data has already
+      // been uploaded to the GPU via texImage2D
+      ctx.canvas.width = 0;
+      ctx.canvas.height = 0;
     }
   }]);
 }();
@@ -64212,9 +64230,12 @@ var WebGLInstance = /*#__PURE__*/function () {
   // fragmentSource: string,
   // shaderLocations: Array<string>,
   backgroundColor) {
+    var antialias = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var atlasScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
     _classCallCheck(this, WebGLInstance);
+    this.atlasScale = atlasScale;
     var gl = canvas.getContext('webgl', {
-      antialias: true
+      antialias: antialias
       // premultipliedAlpha: false,
       // alpha: false
     });
@@ -79137,8 +79158,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.0.6",
-  gitHash: "0610a714a",
+  version: "1.0.7",
+  gitHash: "9c0a1c7fa",
   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.0.6",
+  "version": "1.0.7",
   "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/DrawingObjects/TextObject/TextObject.d.ts

@@ -9,6 +9,7 @@ declare class FigureFont {
     map: OBJ_AtlasMap;
     glyphs: string | 'greek' | 'math' | 'mathExt' | 'common' | 'latin' | 'all' | 'numbers' | 'mathlatin' | Array<string>;
     atlasSize: null | number;
+    atlasId: string;
     loadColor: TypeColor;
     size: number;
     underline: false | {

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

@@ -83,6 +83,9 @@ export type OBJ_FigureForElement = {
   * @property {number} [length] default shape primary dimension
   * @property {TypeColor} [backgroundColor] background color for the figure.
   * Use [r, g, b, 1] for opaque and [0, 0, 0, 0] for transparent.
+  * @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`)
  * @interface
  * @group Figure
  */
@@ -94,6 +97,8 @@ export type OBJ_Figure = {
     lineWidth?: number;
     length?: number;
     backgroundColor?: number;
+    antialias?: boolean;
+    atlasScale?: number;
 };
 /**
  * Primary Figure class.

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

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

package/types/js/tools/types.d.ts

@@ -284,6 +284,7 @@ export type OBJ_Font = {
     loadColor?: TypeColor;
     atlasColor?: boolean;
     atlasSize?: number | null;
+    atlasId?: string;
     timeout?: number;
     render?: 'gl' | '2d' | 'html';
 };