@verygoodgraphics/vgg-wasm - npm Package Compare versions

Comparing version 0.1.21 to 0.1.22

dist/index.d.ts

@@ -27,3 +27,4 @@ declare type CallbackHandlers = {
     StateChange = "statechange",
-    Click = "click"
+    Click = "click",
+    Ready = "ready"
 }
@@ -160,5 +161,15 @@
     customFonts?: string[];
+    /**
+     * On vgg instance load
+     */
     onLoad?: EventCallback;
     onLoadError?: EventCallback;
+    /**
+     * On Daruma file load
+     */
+    onReady?: EventCallback;
     onStateChange?: EventCallback;
+    /**
+     * On first render
+     */
     onRendered?: EventCallback;
@@ -173,5 +184,2 @@ onSelect?: EventCallback;
     getDesignDocument(): string;
-    addAt(path: string, value: string): void;
-    deleteAt(path: string): void;
-    updateAt(path: string, value: string): void;
     addEventListener(path: string, type: string, code: string): void;
@@ -178,0 +186,0 @@ removeEventListener(path: string, type: string, code: string): void;

dist/vgg-wasm.iife.js

@@ -1,2 +0,2 @@
-var vggWasm=function(d){"use strict";var b=Object.defineProperty;var F=(d,o,c)=>o in d?b(d,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):d[o]=c;var a=(d,o,c)=>(F(d,typeof o!="symbol"?o+"":o,c),c);var o=(r=>(r.Load="load",r.FirstRender="firstrender",r.LoadError="loaderror",r.StateChange="statechange",r.Click="click",r))(o||{}),c=(r=>(r.Loading="loading",r.Ready="ready",r.Rendered="rendered",r.Error="error",r.Destroyed="destroyed",r))(c||{}),h=(r=>(r.StartLoading="Start loading",r.DownloadVGGRuntimeJS="Download VGG Runtime JS",r.CreateVGGWasmInstance="Create VGG Wasm Instance",r.VGGWasmInstanceReady="VGG Wasm Instance Ready",r.DownloadSourceFile="Download Source File",r.LoadSourceFile="Load Source File",r))(h||{});class v{constructor(e=[]){this.listeners=e}getListeners(e){return this.listeners.filter(t=>t.type===e)}add(e){this.listeners.includes(e)||this.listeners.push(e)}remove(e){for(let t=0;t<this.listeners.length;t++){const s=this.listeners[t];if(s.type===e.type&&s.callback===e.callback){this.listeners.splice(t,1);break}}}removeAll(e){e?this.listeners.filter(t=>t.type===e).forEach(t=>this.remove(t)):this.listeners.splice(0,this.listeners.length)}fire(e,t){this.getListeners(e.type).forEach(n=>n.callback(e,t))}}const w=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((e,t)=>e+=(t&=63)<36?t.toString(36):t<62?(t-26).toString(36).toUpperCase():t>62?"-":"_","");class S{constructor(e,t){a(this,"selector");a(this,"vggSdk");this.selector=e,this.vggSdk=t}on(e,t){return this.addEventListener(this.selector,e,t),this}update(e){if(!this.vggSdk)throw new Error("VGG SDK not ready");this.vggSdk.updateElement(this.selector,e)}addEventListener(e,t,s){if(!this.vggSdk)throw new Error("VGG SDK not ready");const n=m=>s(this,m),i=w(7),l=`export default (event, opts) => {
+var vggWasm=function(d){"use strict";var b=Object.defineProperty;var F=(d,o,c)=>o in d?b(d,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):d[o]=c;var a=(d,o,c)=>(F(d,typeof o!="symbol"?o+"":o,c),c);var o=(r=>(r.Load="load",r.FirstRender="firstrender",r.LoadError="loaderror",r.StateChange="statechange",r.Click="click",r.Ready="ready",r))(o||{}),c=(r=>(r.Loading="loading",r.Ready="ready",r.Rendered="rendered",r.Error="error",r.Destroyed="destroyed",r))(c||{}),h=(r=>(r.StartLoading="Start loading",r.DownloadVGGRuntimeJS="Download VGG Runtime JS",r.CreateVGGWasmInstance="Create VGG Wasm Instance",r.VGGWasmInstanceReady="VGG Wasm Instance Ready",r.DownloadSourceFile="Download Source File",r.LoadSourceFile="Load Source File",r))(h||{});class v{constructor(e=[]){this.listeners=e}getListeners(e){return this.listeners.filter(t=>t.type===e)}add(e){this.listeners.includes(e)||this.listeners.push(e)}remove(e){for(let t=0;t<this.listeners.length;t++){const s=this.listeners[t];if(s.type===e.type&&s.callback===e.callback){this.listeners.splice(t,1);break}}}removeAll(e){e?this.listeners.filter(t=>t.type===e).forEach(t=>this.remove(t)):this.listeners.splice(0,this.listeners.length)}fire(e,t){this.getListeners(e.type).forEach(n=>n.callback(e,t))}}const w=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((e,t)=>e+=(t&=63)<36?t.toString(36):t<62?(t-26).toString(36).toUpperCase():t>62?"-":"_","");class y{constructor(e,t){a(this,"selector");a(this,"vggSdk");this.selector=e,this.vggSdk=t}on(e,t){return this.addEventListener(this.selector,e,t),this}update(e){if(!this.vggSdk)throw new Error("VGG SDK not ready");this.vggSdk.updateElement(this.selector,e)}addEventListener(e,t,s){if(!this.vggSdk)throw new Error("VGG SDK not ready");const n=m=>s(this,m),i=w(7),l=`export default (event, opts) => {
       const sdk = new opts.instance.VggSdk()
@@ -25,2 +25,2 @@
       }
-    }`;this.vggSdk.addEventListener(e,t,l);const g=globalThis.vggInstances[this.vggSdk.getEnv()];if(g)try{g.listeners.set(i,n)}catch(m){console.error(m)}return{selector:e,removeEventListener:()=>{this.vggSdk.removeEventListener(e,t,l),g.listeners.delete(i)}}}}class y{constructor(e){this.debug=e}logEvent(e){this.debug&&console.log(`%cVGGEvent::${e.type}`,"background: #f59e0b; color: #78350f; font-weight: bold; border-radius: 2px; padding: 0 2.5px;",e.id?`${e.id} → ${e.path}`:"")}logLifeCycle(e){this.debug&&console.log(`%cVGGLifeCycle::${e.phase}`,"background: #f59e0b; color: #78350f; font-weight: bold; border-radius: 2px; padding: 0 2.5px;",e.status)}}const f=class f{constructor(e){a(this,"props");a(this,"defaultRuntime","https://s5.vgg.cool/runtime/latest");a(this,"canvas");a(this,"width",0);a(this,"height",0);a(this,"editMode",!1);a(this,"disableLoader",!1);a(this,"verbose");a(this,"src");a(this,"runtime");a(this,"vggInstanceKey","");a(this,"eventManager");a(this,"state",c.Loading);a(this,"onLoadingStateUpdate");a(this,"vggWasmInstance",null);a(this,"vggSdk",null);a(this,"customFonts",[]);a(this,"observables",new Map);a(this,"checkStateFrame",0);a(this,"logger");var t,s;this.props=e,this.canvas=e.canvas,this.src=e.src,this.runtime=e.runtime||this.defaultRuntime,this.width=((t=this.canvas)==null?void 0:t.width)??0,this.height=((s=this.canvas)==null?void 0:s.height)??0,this.customFonts=e.customFonts??[],this.editMode=e.editMode??!1,this.verbose=e.verbose??!1,this.logger=new y(this.verbose),this.disableLoader=e.disableLoader??!1,this.onLoadingStateUpdate=e.onLoadingStateUpdate??(()=>{}),this.eventManager=new v,e.onLoad&&this.on("load",e.onLoad),e.onLoadError&&this.on("loaderror",e.onLoadError),e.onRendered&&this.on("firstrender",e.onRendered),e.onStateChange&&this.on("statechange",e.onStateChange),e.onSelect&&this.on("click",e.onSelect)}async load(){try{this.updateLoader(h.StartLoading),await this.init({...this.props})}catch(e){this.eventManager.fire({type:"loaderror",data:e.message})}}updateLoader(e){var t;this.disableLoader||(t=this.onLoadingStateUpdate)==null||t.call(this,e)}async init({src:e}){if(this.updateLoader(h.DownloadVGGRuntimeJS),this.src=e,Array.from(document.scripts).some(s=>s.src.includes("vgg_runtime.js"))||await this.loadScript(this.runtime+"/vgg_runtime.js"),await new Promise(s=>{const n=setInterval(()=>{window._vgg_createWasmInstance&&(clearInterval(n),s(!0))},100)}),!this.canvas)throw new Error("Canvas element required");if(!this.src)throw new Error(f.missingErrorMessage);await new Promise(t=>{this.checkStateFrame=requestAnimationFrame(()=>this.checkState(t))}),console.log("VGG SDK ready",this.vggSdk),await this.loadFonts(),this.logger.logLifeCycle({phase:"init",status:"end"})}async createVggWasmInstance(){const e=this.runtime;try{const t=setTimeout(()=>{throw new Error("VGG Wasm instance creation timeout")},3e4),s=await window._vgg_createWasmInstance({noInitialRun:!0,canvas:this.canvas,locateFile:function(n,i){return n.endsWith(".data")?e+"/"+n:i+n}});return clearTimeout(t),s}catch(t){return console.error(t),null}}async checkState(e){if(this.updateLoader(h.CreateVGGWasmInstance),window._vgg_createWasmInstance){const t=await this.createVggWasmInstance();if(t){this.vggWasmInstance=t;try{this.vggWasmInstance.ccall("emscripten_main","void",["number","number","boolean"],[this.width,this.height,this.editMode])}catch(n){console.error(n)}this.vggSdk=new t.VggSdk;const s=globalThis.vggInstances??{};this.vggInstanceKey=this.vggSdk.getEnv(),this.editMode?Object.assign(s,{[this.vggInstanceKey]:{instance:t,listener:n=>{try{const i=JSON.parse(n);this.logger.logEvent(i),i.type==="select"?this.eventManager.fire({type:o.Click,data:i}):i.type==="firstRender"&&(this.state=c.Rendered,this.eventManager.fire({type:o.FirstRender}))}catch(i){console.error(i)}}}}):Object.assign(s,{[this.vggInstanceKey]:{instance:t,listeners:new Map,listener:n=>{try{JSON.parse(n).type==="firstRender"&&(this.state=c.Rendered,this.eventManager.fire({type:o.FirstRender}))}catch(i){console.error(i)}}}}),globalThis.vggInstances=s,this.state=c.Ready,this.eventManager.fire({type:o.Load})}else this.state=c.Error,this.eventManager.fire({type:o.LoadError});cancelAnimationFrame(this.checkStateFrame),e(!0),this.updateLoader(h.VGGWasmInstanceReady)}else this.checkStateFrame=requestAnimationFrame(()=>this.checkState(e))}async loadScript(e){const t=document.createElement("script");return t.src=e,document.head.appendChild(t),new Promise(s=>{t.onload=()=>{s(!0)}})}async loadFonts(){const e=this.customFonts;for(const t of e)await fetch(t).then(s=>{if(s.ok)return s.arrayBuffer();throw new Error(s.statusText)}).then(s=>{var l;const n=new Uint8Array(s),i=((l=t.split("/").pop())==null?void 0:l.split(".")[0])??"";this.loadFontFile(n,i)}).catch(s=>{console.error(`Failed to add font: ${s.message}`)})}loadFontFile(e,t){if(!this.vggSdk)throw new Error("VGG SDK not ready");if(!this.vggSdk.addFont(e,t))throw new Error("add font failed!")}on(e,t){return this.eventManager.add({type:e,callback:t}),this}async render(e,t){if(this.width=(t==null?void 0:t.width)??this.width,this.height=(t==null?void 0:t.height)??this.height,this.editMode=(t==null?void 0:t.editMode)??this.editMode,!this.vggWasmInstance)throw new Error("VGG Wasm instance not ready");const s=e??this.src;let n;if(typeof s=="string"){this.updateLoader(h.DownloadSourceFile);const l=await fetch(s);if(!l.ok)throw new Error("Failed to fetch Daruma file");const g=await l.arrayBuffer();n=new Int8Array(g)}else if(s instanceof Int8Array)n=s;else throw new Error("Invalid source file");if(this.updateLoader(h.LoadSourceFile),!this.vggWasmInstance)return;if(!this.vggWasmInstance.ccall("load_file_from_mem","boolean",["string","array","number"],["name",n,n.length]))throw new Error("Failed to load Daruma file")}$(e){if(!this.vggSdk)throw new Error("VGG SDK not ready");const t=this.observables.get(e);if(!t){const s=new S(String(e),this.vggSdk);return this.observables.set(e,s),s}return t}destroy(){var t;try{(t=this.vggWasmInstance)==null||t._vggExit()}catch{}const e=globalThis.vggInstances??{};return delete e[this.vggInstanceKey],this.eventManager.removeAll(),this.vggWasmInstance=null,this.src="",this.vggSdk=null,this.state=c.Destroyed,this.logger.logLifeCycle({phase:"destroy",status:"end"}),this.observables.clear(),this}getTextContent(){var t;return((t=this.vggSdk)==null?void 0:t.texts())??[]}snapshot(e={type:"png",quality:100}){var s;return(s=this.vggSdk)==null?void 0:s.makeImageSnapshot(e)}setContentMode(e="fit"){if(!this.vggSdk)throw new Error("VGG SDK not ready");if(e==="original")this.vggSdk.setContentMode("topLeft");else if(e==="fit")this.vggSdk.setContentMode("scaleAspectFit");else if(e==="fill")this.vggSdk.setContentMode("scaleAspectFill");else if(e==="autoFill")this.vggSdk.setContentMode("scaleAspectFillTopCenter");else throw new Error("Invalid content mode")}setFitToViewportEnabled(e){var t;(t=this.vggSdk)==null||t.setFitToViewportEnabled(e)}getAllFrames(){var t;const e=(t=this.vggSdk)==null?void 0:t.getFramesInfo();return e?JSON.parse(e):[]}setCurrentFrame(e,t=!0){var s;(s=this.vggSdk)==null||s.setCurrentFrameById(e,t)}nextFrame(){const e=this.getAllFrames(),s=(e.findIndex(n=>n.id===this.currentFrameId)+1)%e.length;this.setCurrentFrame(e[s].id)}prevFrame(){const e=this.getAllFrames(),s=(e.findIndex(n=>n.id===this.currentFrameId)-1+e.length)%e.length;this.setCurrentFrame(e[s].id)}get currentFrameId(){var e;return(e=this.vggSdk)==null?void 0:e.currentFrameId()}getFontsInUse(){var t;const e=(t=this.vggSdk)==null?void 0:t.requiredFonts();if(!e)return[];try{return JSON.parse(e)}catch(s){return console.error(s),[]}}};a(f,"missingErrorMessage","Daruma source file required");let u=f;return typeof globalThis<"u"&&(globalThis.VGG=u),d.EventType=o,d.State=c,d.VGG=u,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});
+    }`;this.vggSdk.addEventListener(e,t,l);const g=globalThis.vggInstances[this.vggSdk.getEnv()];if(g)try{g.listeners.set(i,n)}catch(m){console.error(m)}return{selector:e,removeEventListener:()=>{this.vggSdk.removeEventListener(e,t,l),g.listeners.delete(i)}}}}class S{constructor(e){this.debug=e}logEvent(e){this.debug&&console.log(`%cVGGEvent::${e.type}`,"background: #f59e0b; color: #78350f; font-weight: bold; border-radius: 2px; padding: 0 2.5px;",e.id?`${e.id} → ${e.path}`:"")}logLifeCycle(e){this.debug&&console.log(`%cVGGLifeCycle::${e.phase}`,"background: #f59e0b; color: #78350f; font-weight: bold; border-radius: 2px; padding: 0 2.5px;",e.status)}}const f=class f{constructor(e){a(this,"props");a(this,"defaultRuntime","https://s5.vgg.cool/runtime/latest");a(this,"canvas");a(this,"width",0);a(this,"height",0);a(this,"editMode",!1);a(this,"disableLoader",!1);a(this,"verbose");a(this,"src");a(this,"runtime");a(this,"vggInstanceKey","");a(this,"eventManager");a(this,"state",c.Loading);a(this,"onLoadingStateUpdate");a(this,"vggWasmInstance",null);a(this,"vggSdk",null);a(this,"customFonts",[]);a(this,"observables",new Map);a(this,"checkStateFrame",0);a(this,"logger");var t,s;this.props=e,this.canvas=e.canvas,this.src=e.src,this.runtime=e.runtime||this.defaultRuntime,this.width=((t=this.canvas)==null?void 0:t.width)??0,this.height=((s=this.canvas)==null?void 0:s.height)??0,this.customFonts=e.customFonts??[],this.editMode=e.editMode??!1,this.verbose=e.verbose??!1,this.logger=new S(this.verbose),this.disableLoader=e.disableLoader??!1,this.onLoadingStateUpdate=e.onLoadingStateUpdate??(()=>{}),this.eventManager=new v,e.onLoad&&this.on("load",e.onLoad),e.onLoadError&&this.on("loaderror",e.onLoadError),e.onReady&&this.on("ready",e.onReady),e.onRendered&&this.on("firstrender",e.onRendered),e.onStateChange&&this.on("statechange",e.onStateChange),e.onSelect&&this.on("click",e.onSelect)}async load(){try{this.updateLoader(h.StartLoading),await this.init({...this.props})}catch(e){this.eventManager.fire({type:"loaderror",data:e.message})}}updateLoader(e){var t;this.disableLoader||(t=this.onLoadingStateUpdate)==null||t.call(this,e)}async init({src:e}){if(this.updateLoader(h.DownloadVGGRuntimeJS),this.src=e,Array.from(document.scripts).some(s=>s.src.includes("vgg_runtime.js"))||await this.loadScript(this.runtime+"/vgg_runtime.js"),await new Promise(s=>{const n=setInterval(()=>{window._vgg_createWasmInstance&&(clearInterval(n),s(!0))},100)}),!this.canvas)throw new Error("Canvas element required");if(!this.src)throw new Error(f.missingErrorMessage);await new Promise(t=>{this.checkStateFrame=requestAnimationFrame(()=>this.checkState(t))}),console.log("VGG SDK ready",this.vggSdk),await this.loadFonts(),this.logger.logLifeCycle({phase:"init",status:"end"})}async createVggWasmInstance(){const e=this.runtime;try{const t=setTimeout(()=>{throw new Error("VGG Wasm instance creation timeout")},3e4),s=await window._vgg_createWasmInstance({noInitialRun:!0,canvas:this.canvas,locateFile:function(n,i){return n.endsWith(".data")?e+"/"+n:i+n}});return clearTimeout(t),s}catch(t){return console.error(t),null}}async checkState(e){if(this.updateLoader(h.CreateVGGWasmInstance),window._vgg_createWasmInstance){const t=await this.createVggWasmInstance();if(t){this.vggWasmInstance=t;try{this.vggWasmInstance.ccall("emscripten_main","void",["number","number","boolean"],[this.width,this.height,this.editMode])}catch(n){console.error(n)}this.vggSdk=new t.VggSdk;const s=globalThis.vggInstances??{};this.vggInstanceKey=this.vggSdk.getEnv(),this.editMode?Object.assign(s,{[this.vggInstanceKey]:{instance:t,listener:n=>{try{const i=JSON.parse(n);this.logger.logEvent(i),i.type==="select"?this.eventManager.fire({type:o.Click,data:i}):i.type==="firstRender"&&(this.state=c.Rendered,this.eventManager.fire({type:o.FirstRender}))}catch(i){console.error(i)}}}}):Object.assign(s,{[this.vggInstanceKey]:{instance:t,listeners:new Map,listener:n=>{try{JSON.parse(n).type==="firstRender"&&(this.state=c.Rendered,this.eventManager.fire({type:o.FirstRender}))}catch(i){console.error(i)}}}}),globalThis.vggInstances=s,this.state=c.Ready,this.eventManager.fire({type:o.Load})}else this.state=c.Error,this.eventManager.fire({type:o.LoadError});cancelAnimationFrame(this.checkStateFrame),e(!0),this.updateLoader(h.VGGWasmInstanceReady)}else this.checkStateFrame=requestAnimationFrame(()=>this.checkState(e))}async loadScript(e){const t=document.createElement("script");return t.src=e,document.head.appendChild(t),new Promise(s=>{t.onload=()=>{s(!0)}})}async loadFonts(){const e=this.customFonts;for(const t of e)await fetch(t).then(s=>{if(s.ok)return s.arrayBuffer();throw new Error(s.statusText)}).then(s=>{var l;const n=new Uint8Array(s),i=((l=t.split("/").pop())==null?void 0:l.split(".")[0])??"";this.loadFontFile(n,i)}).catch(s=>{console.error(`Failed to add font: ${s.message}`)})}loadFontFile(e,t){if(!this.vggSdk)throw new Error("VGG SDK not ready");if(!this.vggSdk.addFont(e,t))throw new Error("add font failed!")}on(e,t){return this.eventManager.add({type:e,callback:t}),this}async render(e,t){if(this.width=(t==null?void 0:t.width)??this.width,this.height=(t==null?void 0:t.height)??this.height,this.editMode=(t==null?void 0:t.editMode)??this.editMode,!this.vggWasmInstance)throw new Error("VGG Wasm instance not ready");const s=e??this.src;let n;if(typeof s=="string"){this.updateLoader(h.DownloadSourceFile);const l=await fetch(s);if(!l.ok)throw new Error("Failed to fetch Daruma file");const g=await l.arrayBuffer();n=new Int8Array(g)}else if(s instanceof Int8Array)n=s;else throw new Error("Invalid source file");if(this.updateLoader(h.LoadSourceFile),!this.vggWasmInstance)return;const i=this.vggWasmInstance.ccall("load_file_from_mem","boolean",["string","array","number"],["name",n,n.length]);if(this.eventManager.fire({type:o.Ready}),!i)throw new Error("Failed to load Daruma file")}$(e){if(!this.vggSdk)throw new Error("VGG SDK not ready");const t=this.observables.get(e);if(!t){const s=new y(String(e),this.vggSdk);return this.observables.set(e,s),s}return t}destroy(){var t;try{(t=this.vggWasmInstance)==null||t._vggExit()}catch{}const e=globalThis.vggInstances??{};return delete e[this.vggInstanceKey],this.eventManager.removeAll(),this.vggWasmInstance=null,this.src="",this.vggSdk=null,this.state=c.Destroyed,this.logger.logLifeCycle({phase:"destroy",status:"end"}),this.observables.clear(),this}getTextContent(){var t;return((t=this.vggSdk)==null?void 0:t.texts())??[]}snapshot(e={type:"png",quality:100}){var s;return(s=this.vggSdk)==null?void 0:s.makeImageSnapshot(e)}setContentMode(e="fit"){if(!this.vggSdk)throw new Error("VGG SDK not ready");if(e==="original")this.vggSdk.setContentMode("topLeft");else if(e==="fit")this.vggSdk.setContentMode("scaleAspectFit");else if(e==="fill")this.vggSdk.setContentMode("scaleAspectFill");else if(e==="autoFill")this.vggSdk.setContentMode("scaleAspectFillTopCenter");else throw new Error("Invalid content mode")}setFitToViewportEnabled(e){var t;(t=this.vggSdk)==null||t.setFitToViewportEnabled(e)}getAllFrames(){var t;const e=(t=this.vggSdk)==null?void 0:t.getFramesInfo();return e?JSON.parse(e):[]}setCurrentFrame(e,t=!0){var s;(s=this.vggSdk)==null||s.setCurrentFrameById(e,t)}nextFrame(){const e=this.getAllFrames(),s=(e.findIndex(n=>n.id===this.currentFrameId)+1)%e.length;this.setCurrentFrame(e[s].id)}prevFrame(){const e=this.getAllFrames(),s=(e.findIndex(n=>n.id===this.currentFrameId)-1+e.length)%e.length;this.setCurrentFrame(e[s].id)}get currentFrameId(){var e;return(e=this.vggSdk)==null?void 0:e.currentFrameId()}getFontsInUse(){var t;const e=(t=this.vggSdk)==null?void 0:t.requiredFonts();if(!e)return[];try{return JSON.parse(e)}catch(s){return console.error(s),[]}}};a(f,"missingErrorMessage","Daruma source file required");let u=f;return typeof globalThis<"u"&&(globalThis.VGG=u),d.EventType=o,d.State=c,d.VGG=u,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});

package.json

@@ -9,3 +9,3 @@ {
   "license": "MIT",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "files": [
@@ -12,0 +12,0 @@ "dist"

README.md

@@ -48,15 +48,42 @@ # VGG WASM
 
-### Options
+### Props for creating a new instance
 
-| Option        | Type                                     | Required | Default                            |
-| ------------- | ---------------------------------------- | -------- | ---------------------------------- |
-| canvas        | `HTMLCanvasElement` \| `OffscreenCanvas` | ✅       | -                                  |
-| runtime       | `string`                                 | -        | https://s5.vgg.cool/runtime/latest |
-| editMode      | `boolean`                                | -        | false                              |
-| verbose       | `boolean`                                | -        | false                              |
-| onLoad        | `EventCallback`                          | -        | -                                  |
-| onLoadError   | `EventCallback`                          | -        | -                                  |
-| onStateChange | `EventCallback`                          | -        | -                                  |
-| onSelect      | `EventCallback`                          | -        | -                                  |
+| Option               | Type                                     | Required | Default                            |
+| -------------------- | ---------------------------------------- | -------- | ---------------------------------- |
+| canvas               | `HTMLCanvasElement` \| `OffscreenCanvas` | ✅       | -                                  |
+| runtime              | `string`                                 | -        | https://s5.vgg.cool/runtime/latest |
+| editMode             | `boolean`                                | -        | `false`                            |
+| verbose              | `boolean`                                | -        | `false`                            |
+| disableLoader        | `boolean`                                | -        | `false`                            |
+| customFonts          | `string[]`                               | -        | `[]`                               |
+| onLoad               | `EventCallback`                          | -        | -                                  |
+| onLoadError          | `EventCallback`                          | -        | -                                  |
+| onStateChange        | `EventCallback`                          | -        | -                                  |
+| onRendered           | `EventCallback`                          | -        | -                                  |
+| onSelect             | `EventCallback`                          | -        | -                                  |
+| onLoadingStateUpdate | `(state: LoadingState) => void`          | -        | -                                  |
 
+### VGG instance methods and properties
+
+| Method                  | Description                            | Return          | Arguments                                                                                                     |
+| ----------------------- | -------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------- |
+| vggInstanceKey          | The unique key of current instance     | `string`        | -                                                                                                             |
+| state                   | Current state of the rendering process | `State`         | -                                                                                                             |
+| load                    | Initialize the render                  | `Promise<void>` | -                                                                                                             |
+| loadFontFile            | Load fonts                             | `void`          | `(font: Uint8Array, name: string): void`                                                                      |
+| on                      | Subscribe to VGG-generated events      | `VGG`           | `(type: VGGEventType, callback: EventCallback): VGG<T>`                                                       |
+| render                  | Render the Daruma file                 | `Promise<void>` | `(darumaSource: string &#124; Int8Array, opts?: {width: number, height: number, editMode?: boolean}): VGG<T>` |
+| $                       | Element selector                       | `Observable`    | `(selector: T): Observable`                                                                                   |
+| destroy                 | Destroy VGG instance                   | `VGG`           | -                                                                                                             |
+| getTextContent          | Extract all the text content           | `string[]`      | -                                                                                                             |
+| snapshot                | Export current frame as image          | `Uint8Array`    | `(opts: {type: "png" &#124; "jpg" &#124; "webp", quality: number}): Uint8Array`                               |
+| setContentMode          | Render Mode                            | `void`          | `(mode: "fig" &#124; "fill" &#124; "original" &#124; "autoFill"): void`                                       |
+| setFitToViewportEnabled | Turn on/off the breakpoint mode        | `void`          | `(bool: boolean): void`                                                                                       |
+| getAllFrames            | Get all the frames's data              | `Frame[]`       | -                                                                                                             |
+| setCurrentFrame         | Update render frame                    | `void`          | `(id: string, preserveScrollHeight: boolean): void`                                                           |
+| nextFrame               | Render the next frame                  | `void`          | -                                                                                                             |
+| prevFrame               | Render the previous frame              | `void`          | -                                                                                                             |
+| currentFrameId          | Get current frame id                   | `string`        | -                                                                                                             |
+| getFontsInUse           | Get the fonts used in the file         | `Font[]`        | -                                                                                                             |
+
 ### `.load()`
@@ -63,0 +90,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61177

increased by9.03%

Lines of code

796

increased by1.53%

Number of lines in readme file

104

increased by35.06%

No dependency changes