figureone 1.1.5 → 1.2.0

package/index.js

@@ -20406,7 +20406,7 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
         layout: optionsToUse.formDefaults.layout,
         ignoreColor: optionsToUse.formDefaults.ignoreColor
       },
-      functions: new _EquationFunctions__WEBPACK_IMPORTED_MODULE_9__.EquationFunctions(_this.elements, _this.addElementFromKey.bind(_this), _this.getExistingOrAddSymbol.bind(_this)),
+      functions: new _EquationFunctions__WEBPACK_IMPORTED_MODULE_9__.EquationFunctions(_this.elements, _this.addElementFromKey.bind(_this), _this.getExistingOrAddSymbol.bind(_this), _this.makeInlineElement.bind(_this)),
       symbols: new _EquationSymbols__WEBPACK_IMPORTED_MODULE_8__["default"](_this.shapes, _this.color),
       font: optionsToUse.font,
       textFont: optionsToUse.textFont,
@@ -20944,6 +20944,29 @@ var Equation = /*#__PURE__*/function (_FigureElementCollect) {
     //   this.add(key, element);
     //   return element;
     // }
+  }, {
+    key: "makeInlineElement",
+    value: function makeInlineElement(options) {
+      var name = options.name || (0,_tools_tools__WEBPACK_IMPORTED_MODULE_1__.generateUniqueId)('eqn_');
+      var existing = this.getElement(name);
+      if (existing != null) {
+        return existing;
+      }
+      var make = options.make;
+      var method = this.shapes[make];
+      if (typeof method !== 'function') {
+        return null;
+      }
+      var element = method.call(this.shapes, options);
+      if (element == null) {
+        return null;
+      }
+      if (options.mods != null) {
+        element.setProperties(options.mods);
+      }
+      this.add(name, element);
+      return element;
+    }
   }, {
     key: "makeSymbolElem",
     value: function makeSymbolElem(options) {
@@ -22769,6 +22792,9 @@ function getFigureElement(elementsObject, name) {
  *  - `{ prodOf: `{@link EQN_ProdOf} `}`
  *  - `{ topStrike: `{@link EQN_StrikeComment} `}`
  *  - `{ bottomStrike: `{@link EQN_StrikeComment} `}`
+ *  - `{ make: string, name?: string, ... }` (inline element — creates any
+ *    element type directly in a form using the same `make` values as
+ *    {@link Figure.add}. If `name` is omitted, one is auto-generated.)
  *  - `Array<TypeEquationPhrase>`
  *
  *
@@ -22796,6 +22822,18 @@ function getFigureElement(elementsObject, name) {
  *   .goToForm({ target: 'form3', animate: 'move', delay: 1 })
  *   .goToForm({ target: 'form4', animate: 'move', delay: 1 })
  *   .start();
+ *
+ * @example
+ * // Inline element creation in forms
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     // Create a text element inline with a name
+ *     form1: ['a', { make: 'text', name: 'B', text: { text: 'B' } }, 'c'],
+ *     // Create any element type inline (e.g., polygon)
+ *     form2: ['a', { make: 'polygon', name: 'p', radius: 0.05, sides: 4 }],
+ *   },
+ * });
  * @group Equations
  */
 
@@ -25328,7 +25366,7 @@ var EquationFunctions = /*#__PURE__*/function () {
    * @hideconstructor
    */
   // eslint-disable-next-line no-use-before-define
-  function EquationFunctions(elements, addElementFromKey, getExistingOrAddSymbol) {
+  function EquationFunctions(elements, addElementFromKey, getExistingOrAddSymbol, makeElement) {
     _classCallCheck(this, EquationFunctions);
     this.elements = elements;
     this.phrases = {};
@@ -25336,6 +25374,7 @@ var EquationFunctions = /*#__PURE__*/function () {
     this.fullLineHeightPrimitive = null;
     this.addElementFromKey = addElementFromKey;
     this.getExistingOrAddSymbol = getExistingOrAddSymbol;
+    this.makeElement = makeElement;
     this.phraseElements = {};
   }
 
@@ -25416,6 +25455,13 @@ var EquationFunctions = /*#__PURE__*/function () {
         return elementArray;
       }
       // Otherwise its an object
+      // If it has a 'make' property, create the element inline
+      if (content.make != null) {
+        var _elem = this.makeElement(content);
+        if (_elem != null) {
+          return new _Elements_Element__WEBPACK_IMPORTED_MODULE_3__.Element(_elem);
+        }
+      }
       var _Object$entries$ = _slicedToArray(Object.entries(content)[0], 2),
         method = _Object$entries$[0],
         params = _Object$entries$[1];
@@ -34330,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
  */
@@ -34401,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
@@ -34411,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
@@ -34454,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] : {};
@@ -34615,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);
@@ -34847,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();
@@ -35500,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');
@@ -35512,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!');
@@ -65404,6 +65479,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,
@@ -65414,8 +65490,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,
@@ -65428,6 +65506,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() {},
@@ -65442,7 +65529,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() {},
@@ -65470,6 +65559,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 '';
@@ -65594,10 +65704,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",
@@ -80537,8 +80648,8 @@ var tools = {
  */
 
 var Fig = {
-  version: "1.1.5",
-  gitHash: "8c6ecd2ed",
+  version: "1.2.0",
+  gitHash: "b3f17c9ba",
   tools: tools,
   Figure: _js_figure_Figure__WEBPACK_IMPORTED_MODULE_5__["default"],
   Recorder: _js_figure_Recorder_Recorder__WEBPACK_IMPORTED_MODULE_7__.Recorder,

package/llms-full.txt

@@ -2315,6 +2315,20 @@ Symbols can be created inline in forms without pre-declaring in elements:
 { frac: ['a', 'v1_vinculum', { frac: ['c', 'v2_vinculum', 'd'] }] }
 ```
 
+### Inline Element Creation with `make`
+Any element type can be created inline in forms using `make` (same values as `figure.add`):
+```js
+forms: {
+  // Text element with custom styling
+  1: ['a', { make: 'text', name: 'B', text: { text: 'B' }, style: 'normal' }],
+  // Any primitive (polygon, line, rectangle, etc.)
+  2: ['a', { make: 'polygon', name: 'p', radius: 0.05, sides: 4 }],
+  // name is optional — auto-generated if omitted
+  3: ['a', { make: 'text', text: { text: 'X' } }],
+}
+```
+Named elements are reused across forms if the same name appears again.
+
 ### Coordinate Spaces
 - `'draw'` — Drawing canvas coordinates (element's own draw space)
 - `'local'` — Element's local space (after element's transform)

package/llms.txt

@@ -223,6 +223,13 @@ Elements not defined in `elements` are auto-created from form strings. Use `_` p
 
 Duplicate elements: append `_N` to create copies — `'b_1'`, `'b_2'` display as `b`.
 
+Any element type can be created inline in forms using `make`:
+```js
+{ make: 'text', name: 'B', text: { text: 'B' }, style: 'normal' }
+{ make: 'polygon', name: 'p', radius: 0.05, sides: 4 }
+```
+`name` is optional (auto-generated if omitted). Named elements are reused if already created.
+
 ### Layout Functions
 
 | Function | Syntax | Description |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figureone",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "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/Equation/Equation.d.ts

@@ -883,6 +883,7 @@ export declare class Equation extends FigureElementCollection {
     getExistingOrAddSymbol(symbol: string | Record<string, any>): any;
     getExistingOrAddSymbolFromKey(key: string, options?: Record<string, any>): any;
     addElementFromKey(key: string, options?: Record<string, any>): any;
+    makeInlineElement(options: Record<string, any>): any;
     makeSymbolElem(options: any): import("./Symbols/Bracket").default | import("./Symbols/Box").default | import("./Symbols/Sum").default | import("./Symbols/Product").default | import("./Symbols/Integral").default | import("./Symbols/Vinculum").default | import("./Symbols/Strike").default | import("./Symbols/Radical").default | import("./Symbols/Division").default | import("./Symbols/Line").default | null;
     /**
      * Add elements to equation.

package/types/js/figure/Equation/EquationFunctions.d.ts

@@ -46,6 +46,9 @@ export declare function getFigureElement(elementsObject: {
  *  - `{ prodOf: `{@link EQN_ProdOf} `}`
  *  - `{ topStrike: `{@link EQN_StrikeComment} `}`
  *  - `{ bottomStrike: `{@link EQN_StrikeComment} `}`
+ *  - `{ make: string, name?: string, ... }` (inline element — creates any
+ *    element type directly in a form using the same `make` values as
+ *    {@link Figure.add}. If `name` is omitted, one is auto-generated.)
  *  - `Array<TypeEquationPhrase>`
  *
  *
@@ -73,6 +76,18 @@ export declare function getFigureElement(elementsObject: {
  *   .goToForm({ target: 'form3', animate: 'move', delay: 1 })
  *   .goToForm({ target: 'form4', animate: 'move', delay: 1 })
  *   .start();
+ *
+ * @example
+ * // Inline element creation in forms
+ * figure.add({
+ *   make: 'equation',
+ *   forms: {
+ *     // Create a text element inline with a name
+ *     form1: ['a', { make: 'text', name: 'B', text: { text: 'B' } }, 'c'],
+ *     // Create any element type inline (e.g., polygon)
+ *     form2: ['a', { make: 'polygon', name: 'p', radius: 0.05, sides: 4 }],
+ *   },
+ * });
  * @group Equations
  */
 export type TypeEquationPhrase = string | number | {
@@ -127,6 +142,10 @@ export type TypeEquationPhrase = string | number | {
     topStrike: EQN_StrikeComment;
 } | {
     bottomStrike: EQN_StrikeComment;
+} | {
+    make: string;
+    name?: string;
+    [key: string]: any;
 } | Array<TypeEquationPhrase> | FigureElementPrimitive | FigureElementCollection | Elements | Element | BaseAnnotationFunction;
 /**
  * Equation container options
@@ -3217,12 +3236,13 @@ export declare class EquationFunctions {
     fullLineHeightPrimitive: FigureElementPrimitive | null;
     addElementFromKey: (key: string, params: Record<string, any>) => FigureElementPrimitive | null | undefined;
     getExistingOrAddSymbol: (keyOrObj: string | Record<string, any>) => FigureElementPrimitive | null | undefined;
+    makeElement: (options: Record<string, any>) => FigureElementPrimitive | FigureElementCollection | null;
     /**
      * @hideconstructor
      */
     constructor(elements: {
         [name: string]: FigureElementCollection | FigureElementPrimitive;
-    }, addElementFromKey: (key: string) => FigureElementPrimitive | null | undefined, getExistingOrAddSymbol: (keyOrObj: string | Record<string, any>) => FigureElementPrimitive | null | undefined);
+    }, addElementFromKey: (key: string) => FigureElementPrimitive | null | undefined, getExistingOrAddSymbol: (keyOrObj: string | Record<string, any>) => FigureElementPrimitive | null | undefined, makeElement: (options: Record<string, any>) => FigureElementPrimitive | FigureElementCollection | null);
     stringToElement(content: string): any;
     parseContent(content: TypeEquationPhrase | null | undefined): any;
     contentToElement(content: TypeEquationPhrase | Elements | FigureElementPrimitive | FigureElementCollection): Elements;

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;