[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\ndemo/zfont.*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n\n# next.js build output\n.next\n\n# nuxt.js build output\n.nuxt\n\n# vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless\n\n# FuseBox cache\n.fusebox/\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2019 james\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "\n


Zfont

\n\n

\nA text plugin for the Zdog 3D engine! Renders TrueType fonts via Typr.js | jaames.github.io/zfont\n\n

\n\n

\nFeatures | Caveats | Demo | Installation | Usage | API | Zdog.Font | Zdog.Text | Zdog.TextGroup | Todo | Building\n

\n\n
\n\n## Features\n\n* Built on top of [Typr.js](https://github.com/photopea/Typr.js), which supports a wide range of .ttf and .otf fonts with speed and grace\n* Less than 14kB minified and gzipped\n* No need to worry about waiting for fonts to load; text automatically pops into existence once the font is ready\n* Includes support for multiline text\n* Update font, text, color, alignment, etc at any time\n* Bonus utilities for measuring text, waiting for font load & more!\n\n## Caveats\n\n* You have to provide a .ttf to use yourself; it isn't possible to use system fonts\n* Character range is limited to whichever glyphs are supported by your chosen font, and font stacks/fallbacks aren't supported yet\n\n## Demo\n\nA live demo can be found [here](https://jaames.github.io/zfont/), there's also some more in-depth examples on [Codepen](https://codepen.io/collection/DPKGvY/)!\n\n## Installation\n\n### Install with NPM\n\n```bash\n$ npm install zfont --save\n```\n\nIf you are using a module bundler like Webpack or Rollup, import Zfont into your project: \n\n```javascript\n// Using ES6 module syntax\nimport Zfont from 'zfont';\n\n// Using CommonJS modules\nconst Zfont = require('zfont');\n```\n\n### Using the jsDelivr CDN\n\n```html\n\n```\n\nWhen manually including the library like this, it will be globally available on `window.Zfont`\n\n### Download and Host Yourself\n\n**[Development version](https://raw.githubusercontent.com/jaames/zfont/master/dist/zfont.js)**
\nUncompressed at around 75kB, with source comments included\n\n**[Production version](https://raw.githubusercontent.com/jaames/zfont/master/dist/zfont.min.js)**
\nMinified to 45kB\n\nThen add it to the `` of your page with a `\n \n \n\n```\n\n## Usage\n\n### Register Plugin\n\nAfter both Zdog and Zfont have been imported/downloaded, we need to initialize the Zfont plugin. Once it's initialized, the `Zdog.Font`, `Zdog.Text` and `Zdog.TextGroup` classes will be available:\n\n```js\nZfont.init(Zdog);\n```\n\n### Hello World\n\n(Pssst! If you prefer to dive in, check out the [basic demo over on Codepen](https://codepen.io/rakujira/pen/vqLBwz))\n\nTo draw some text in a Zdog scene, first we need to set up a new `Zdog.Font` object with the .ttf url for our desired font, then we can create a new `Zdog.Text` object and add it to the illustration like any other shape:\n\n```js\n// Initialize Zfont\nZfont.init(Zdog);\n\n\n// Create a Zdog illustration\nlet illo = new Zdog.Illustration({\n element: '.zdog-canvas'\n});\n\n// Set up a font to use\nlet myFont = new Zdog.Font({\n src: './path/to/font.ttf'\n});\n\n// Create a text object\n// This is just a Zdog.Shape object with a couple of extra parameters!\nnew Zdog.Text({\n addTo: illo,\n font: myFont,\n value: 'Hey, Zdog!',\n fontSize: 64,\n color: '#fff'\n});\n\n// Animation loop\nfunction animate() {\n illo.updateRenderGraph();\n requestAnimationFrame(animate);\n}\nanimate();\n```\n\n### Multiline Text\n\nBoth `Zdog.Text` and `Zdog.TextGroup` support multiline text, by inserting a newline character (`\\n`) wherever you wish to add a line break:\n\n```js\nnew Zdog.Text({\n ...\n value: 'The quick brown fox\\njumps over the\\nlazy zdog',\n});\n```\n\nFor better readability you may prefer to use an array of strings for the `value` option. In this case, each string in the array will be treated as a seperate line of text:\n\n```js\nnew Zdog.Text({\n ...\n value: [\n 'The quick brown fox'\n 'jumps over the',\n 'lazy zdog'\n ]\n});\n```\n\n### Waiting for Fonts to Load\n\nIn most cases you don't have to worry about waiting for fonts to load, as text objects will magically pop into existence once their font is ready to use. However, the plugin also provides a `Zdog.waitForFonts()` utility function if you need to delay anything until all the fonts in your scene have finished loading.\n\nFor example, let's modify the animation loop from the previous example so that it doesn't begin until the fonts are ready:\n\n```js\n// Animation loop\nfunction animate() {\n illo.updateRenderGraph();\n requestAnimationFrame(animate);\n}\n// Zdog.waitForFonts() returns a Promise which is resolved once all the fonts added to the scene so far have been loaded\nZdog.waitForFonts().then(() => {\n // Once the fonts are done, start the animation loop\n animate();\n})\n```\n\n## API\n\n### Zdog.Font\n\nRepresents a font that can be used by an instance of either [`Zdog.Text`](#zdogtext) or [`Zdog.TextGroup`](#zdogtextgroup).\n\n```js\nlet font = new Zdog.Font({\n src: './path/to/font.ttf'\n})\n```\n\n#### Options\n\n| Param | Details | Default |\n|:-----------|:--------|:--------|\n| `src` | Font URL path. This can be a `.ttf` or `.otf` font, check out the [Typr.js repo](https://github.com/photopea/Typr.js) for more details about font support | `''` |\n\n#### Methods\n\n##### `measureText(text, fontSize)`\n\nGet the measurements for the specified string `text` when rendered at `fontSize` (measured in pixels), similar to [`Canvas​Rendering​Context2D.measure​Text()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText). \n\nReturns an object with `width`, `height`, `descender`, `ascender`.\n\n##### `getTextPath(text, fontSize, x=0, y=0, z=0, alignX='left', alignY='bottom')`\n\nReturns an array of [Zdog path commands](https://zzz.dog/shapes#shape-path-commands) for the specified string `text`, when rendered at `fontSize` (measured in pixels).\n\n* (`x`, `y`, `z`) is the origin point of the path\n* `alignX` is the horizontal text alignment (equivalent to the CSS `text-align` property); either `\"left\"`, `\"center\"` or `\"right\"`. \n* `alignY` is the vertical text alignment; either `\"top\"`, `\"middle\"` or `\"bottom\".`\n\n##### `waitForLoad()`\n\nReturns a Promise which resolves once this font has finished loading.\n\n### Zdog.Text\n\nAn object used for rendering text. It inherits everything from the [`Zdog.Shape`](https://zzz.dog/api#shape) class.\n\n```js\nnew Zdog.Text({\n addTo: illo,\n font: font,\n value: 'Hey, Zdog!',\n textAlign: 'center',\n textBaseline: 'middle',\n color: '#5222ee',\n stroke: 1,\n})\n```\n\n#### Options\n\n`Zdog.Text` inherits all the options from the [`Zdog.Shape`](https://zzz.dog/api#shape) class, plus a couple of extras:\n\n| Param | Details | Default |\n|:-----------|:--------|:--------|\n| `font` | [`Zdog.Font`](#zdog-font) to use for this text. This is required. | `null` |\n| `value` | Text string | `''` |\n| `fontSize` | Text size, measured in pixels | `64` |\n| `textAlign`| Horizontal text alignment, equivalent to the CSS `text-align` property. This can be either `'left'`, `'center'` or `'right'` | `'left'` |\n| `textBaseline`| Vertical text alignment, equivalent to the HTML5 canvas' [`textBaseline`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline) property. This can be either `'top'`, `'middle'` or `'bottom'` | `'bottom'` |\n\n#### Properties\n\n`Zdog.Text` inherits all the properties from the [`Zdog.Shape`](https://zzz.dog/api#shape) class, as well as some extras. All of these properties can be updated at any time and the rendered text will update automatically. \n\n##### `font`\n\nThe [`Zdog.Font`](#zdog-font) instance being used for this text.\n\n##### `value`\n\nText value as a string.\n\n##### `fontSize`\n\nFont size, measured in pixels.\n\n##### `textAlign`\n\nHorizontal text alignment, equivalent to the CSS `text-align` property. This can be either `'left'`, `'center'` or `'right'`\n\n##### `textBaseline`\n\nVertical text alignment, equivalent to the HTML5 canvas' [`textBaseline`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline) property. This can be either `'top'`, `'middle'` or `'bottom'`\n\n### Zdog.TextGroup\n\nThis class is very similar to [`Zdog.Text`](#zdog-text), except it acts as a [`Zdog.Group`](https://zzz.dog/api#group) instead, and each text glyph is rendered as its own shape. This is helpful for more advanced use-cases where you need control over each character.\n\n```js\nnew Zdog.TextGroup({\n addTo: illo,\n font: font,\n value: 'Hey, Zdog!',\n textAlign: 'center',\n color: '#5222ee',\n stroke: 2,\n})\n```\n\n#### Options\n\n`Zdog.TextGroup` inherits all the options from the [`Zdog.Group`](https://zzz.dog/api#group) class, plus a few extras:\n\n| Param | Details | Default |\n|:-----------|:--------|:--------|\n| `font` | [`Zdog.Font`](#zdog-font) to use for this text. This is required. | `null` |\n| `value` | Text string | `''` |\n| `fontSize` | Text size, measured in pixels | `64` |\n| `textAlign`| Horizontal text alignment, equivalent to the CSS `text-align` property. This can be either `'left'`, `'center'` or `'right'` | `'left'` |\n| `textBaseline`| Vertical text alignment, equivalent to the HTML5 canvas' [`textBaseline`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline) property. This can be either `'top'`, `'middle'` or `'bottom'` | `'bottom'` |\n| `color` | Text color | `#333` |\n| `fill` | Text fill | `false` |\n| `stroke` | Text stroke | `stroke` |\n\n#### Properties\n\n`Zdog.TextGroup` inherits all the properties from the [`Zdog.Group`](https://zzz.dog/api#group) class, as well as some extras. All of these properties can be updated at any time and the rendered text will update automatically. \n\n##### `font`\n\nThe [`Zdog.Font`](#zdog-font) instance being used for this text.\n\n##### `value`\n\nText value as a string.\n\n##### `fontSize`\n\nFont size, measured in pixels.\n\n##### `textAlign`\n\nHorizontal text alignment, equivalent to the CSS `text-align` property. This can be either `'left'`, `'center'` or `'right'`\n\n##### `textBaseline`\n\nVertical text alignment, equivalent to the HTML5 canvas' [`textBaseline`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline) property. This can be either `'top'`, `'middle'` or `'bottom'`\n\n##### `color`\n\nText color, equivalent to [`Shape.color`](https://zzz.dog/api#shape-color). Setting this will update the color for all of the group's children.\n\n##### `fill`\n\nText fill, equivalent to [`Shape.fill`](https://zzz.dog/api#shape-fill). Setting this will update the fill for all of the group's children.\n\n##### `stroke`\n\nText stroke, equivalent to [`Shape.stroke`](https://zzz.dog/api#shape-stroke). Setting this will update the stroke for all of the group's children.\n\n### Zdog.waitForFonts\n\nReturns a Promise which resolves as soon as all the fonts currently added to the scene are loaded and ready for use.\n\n```js\nZdog.waitForFonts().then(function() {\n // Do something once the font is ready\n}\n```\n\n## Todo\n\n* Google Fonts & Typekit integration?\n* Support for different text directions, e.g. right-to-left\n* Support for fallback fonts\n* Support for color (SVG) fonts\n\n## Building\n\n### Install Dependencies with NPM\n\n```bash\n$ npm install\n```\n\n### Run Devserver\n\n```bash\n$ npm start\n```\n\n### Build production files\n\n```bash\n$ npm run build\n```\n\n----\n\n2019 [James Daniel](//github.com/jaames)\n" }, { "path": "demo/demo.css", "content": "@import url('https://simbo.codes/css-reset-and-normalize/reset-and-normalize.min.css');\n@import url('https://fonts.googleapis.com/css?family=Fredoka+One');\n\nbody {\n color: #000032;\n background: #eef;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: .015em;\n font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -webkit-text-rendering: optimizeLegibility;\n -moz-font-smoothing: antialiased;\n -moz-text-rendering: optimizeLegibility;\n}\n\nh1, h2, h3, h4, h5, h6, .Button {\n font-family: \"Fredoka One\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\nh1 {\n font-size: 3.5rem;\n font-weight: bold;\n}\n\nh2 {\n font-size: 1.25rem;\n}\n\nh3 {\n font-size: 1.25rem;\n}\n\na {\n color: #645bdf;\n cursor: pointer;\n text-decoration: none;\n border-bottom: .08em dashed currentColor;\n}\n\na:hover {\n color: #5222ee;\n}\n\n.Page {\n width: 100%;\n max-width: 728px;\n margin: 0 auto;\n padding: 3rem 12px;\n}\n\n.Header {\n text-align: center;\n margin: 4rem 0;\n}\n\n.Section {\n margin: 2rem 0;\n}\n\n.Section h3 {\n margin-bottom: 1em;\n}\n\n.Button {\n display: inline-block;\n background: #000032;\n box-shadow: 0 5px 0 -2px #adadc0;\n color: #fff;\n padding: 0.5em 1.5em;\n border-radius: 12px;\n margin: 0 6px;\n border: 0;\n font-size: 1.2rem; \n transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;\n}\n\n.Button:hover {\n color: #6e66e2;\n transform: scale(1.025);\n box-shadow: 0 8px 0 -5px #adadc0;\n}\n\n.ButtonGroup {\n margin: 2rem 0;\n display: flex;\n justify-content: center;\n}\n\n.ButtonGroup .Button {\n /* flex: 1 */\n}\n\n.FeatureList {\n padding: 0;\n list-style-type: none;\n}\n\n.FeatureList .FeatureItem {\n padding: 8px 0;\n}\n\n@media screen and (min-width: 700px) {\n .FeatureList {\n display: flex;\n margin: 0 -8px;\n }\n .FeatureList .FeatureItem {\n padding: 0 8px;\n flex: 1;\n }\n}\n\n.FeatureList .FeatureItem p {\n /* font-family: */\n}\n\n.Canvas {\n width: 100%;\n border-radius: 12px;\n background: #5222ee;\n box-shadow: 0 5px 0 -2px #8d88d6;\n cursor: pointer;\n}\n\n.Textarea {\n /* font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"; */\n border: 2px solid #dde;\n box-shadow: 0 5px 0 -2px #c3c3dd;\n border-radius: 12px;\n display: block;\n width: 100%;\n margin-top: 12px;\n padding: 16px;\n resize: vertical;\n}\n\n.Footer {\n text-align: right;\n margin: 2rem 0;\n}\n\n.GithubCorner {\n z-index: 10;\n border: 0;\n display: block;\n position: fixed;\n top: -5px;\n right: -5px;\n background: transparent;\n}\n\n.GithubCorner__svg {\n width: 100px;\n height: 100px;\n fill: #000032;\n transition: transform 0.2s;\n}\n\n.GithubCorner:hover .GithubCorner__svg {\n -webkit-transform: translate(-5px,5px);\n transform: translate(-5px,5px);\n}\n\n.GithubCorner .octo-arm, \n.GithubCorner .octo-body {\n fill: #eef;\n}" }, { "path": "demo/demo.js", "content": "// Register Zfont plugin\nZfont.init(Zdog);\n\nconst textarea = document.getElementById('textarea');\n\n// create illo\nlet illo = new Zdog.Illustration({\n element: '.Canvas',\n dragRotate: true,\n resize: true,\n rotate: {x: -0.32, y: 0.64, z: 0}\n});\n\n// create font\nlet font = new Zdog.Font({\n\tsrc: './fredokaone.ttf'\n});\n\nlet text = new Zdog.Text({\n addTo: illo,\n font: font,\n value: textarea.value,\n fontSize: 48,\n textAlign: 'center',\n textBaseline: 'middle',\n color: '#fff',\n fill: true,\n});\n\n// text \"shadow\"\nlet shadow1 = text.copy({\n addTo: illo,\n translate: {z: -3},\n color: '#aab',\n});\nlet shadow2 = text.copy({\n addTo: illo,\n translate: {z: -6},\n color: '#aab',\n});\n\ntextarea.addEventListener('input', function() {\n text.value = textarea.value;\n shadow1.value = textarea.value;\n shadow2.value = textarea.value;\n});\n\n// animation loop\nfunction animate() {\n illo.updateRenderGraph();\n requestAnimationFrame(animate);\n}\n\nanimate();" }, { "path": "demo/index.html", "content": "\n \n \n \n Zfont\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n

Zfont

\n

\n A text plugin for the Zdog 3D engine\n

\n
\n \n Codepen Demos\n \n \n Get Started →\n \n
\n
\n
\n

Features

\n \n
\n
\n

Demo

\n \n \n
\n \n
\n \n \n" }, { "path": "deploy.sh", "content": "#!/usr/bin/env sh\n\n# abort on errors\nset -e\n\n# copy dist code into demo\ncp -a dist/. demo/\n\n# navigate into the build output directory\ncd demo\n\n# create commit\ngit init\ngit add -A\ngit commit -m 'deploy demo page'\n\n# force push commit to gh-pages branch\ngit push -f git@github.com:jaames/zfont.git master:gh-pages\n\n# navigate to last directory\ncd -" }, { "path": "dist/zfont.es.js", "content": "/*!\n * Zfont v1.2.8\n * Text plugin for Zdog\n * 2019 James Daniel\n * MIT Licensed \n * github.com/jaames/zfont\n */\n\nvar Typr={};Typr.parse=function(buff){var bin=Typr._bin;var data=new Uint8Array(buff);var offset=0;var sfnt_version=bin.readFixed(data,offset);offset+=4;var numTables=bin.readUshort(data,offset);offset+=2;var searchRange=bin.readUshort(data,offset);offset+=2;var entrySelector=bin.readUshort(data,offset);offset+=2;var rangeShift=bin.readUshort(data,offset);offset+=2;var tags=[\"cmap\",\"head\",\"hhea\",\"maxp\",\"hmtx\",\"name\",\"OS/2\",\"post\",\"loca\",\"glyf\",\"kern\",\"CFF \",\"GPOS\",\"GSUB\",\"SVG \"];var obj={_data:data};var tabs={};for(var i=0;i>>i&1)!=0){ num++; } }return num};Typr._lctf.readClassDef=function(data,offset){var bin=Typr._bin;var obj=[];var format=bin.readUshort(data,offset);offset+=2;if(format==1){var startGlyph=bin.readUshort(data,offset);offset+=2;var glyphCount=bin.readUshort(data,offset);offset+=2;for(var i=0;i255){ return -1; }return Typr.CFF.glyphByUnicode(cff,Typr.CFF.tableSE[charcode])};Typr.CFF.readEncoding=function(data,offset,num){var bin=Typr._bin;var array=[\".notdef\"];var format=data[offset];offset++;if(format==0){var nCodes=data[offset];offset++;for(var i=0;i>4,nib1=b&15;if(nib0!=15){ nibs.push(nib0); }if(nib1!=15){ nibs.push(nib1); }if(nib1==15){ break }}var s=\"\";var chars=[0,1,2,3,4,5,6,7,8,9,\".\",\"e\",\"e-\",\"reserved\",\"-\",\"endOfNumber\"];for(var i=0;i=gl.xMax||gl.yMin>=gl.yMax){ return null; }if(gl.noc>0){gl.endPts=[];for(var i=0;i>>8;format&=15;if(format==0){ offset=Typr.kern.readFormat0(data,offset,map); }else { throw \"unknown kern table format: \"+format }}return map};Typr.kern.parseV1=function(data,offset,length,font){var bin=Typr._bin;var version=bin.readFixed(data,offset);offset+=4;var nTables=bin.readUint(data,offset);offset+=4;var map={glyph1:[],rval:[]};for(var i=0;i>>8;format&=15;if(format==0){ offset=Typr.kern.readFormat0(data,offset,map); }else { throw \"unknown kern table format: \"+format }}return map};Typr.kern.readFormat0=function(data,offset,map){var bin=Typr._bin;var pleft=-1;var nPairs=bin.readUshort(data,offset);offset+=2;var searchRange=bin.readUshort(data,offset);offset+=2;var entrySelector=bin.readUshort(data,offset);offset+=2;var rangeShift=bin.readUshort(data,offset);offset+=2;for(var j=0;j=tab.map.length){ return 0; }return tab.map[code]}else if(tab.format==4){var sind=-1;for(var i=0;icode){ return 0; }var gli=0;if(tab.idRangeOffset[sind]!=0){ gli=tab.glyphIdArray[code-tab.startCount[sind]+(tab.idRangeOffset[sind]>>1)-(tab.idRangeOffset.length-sind)]; }else { gli=code+tab.idDelta[sind]; }return gli&65535}else if(tab.format==12){if(code>tab.groups[tab.groups.length-1][1]){ return 0; }for(var i=0;i-1){ Typr.U._simpleGlyph(gl,path); }else { Typr.U._compoGlyph(gl,font,path); }}};Typr.U._simpleGlyph=function(gl,p){for(var c=0;c65535){ i++; }gls.push(Typr.U.codeToGlyph(font,cc));}var gsub=font[\"GSUB\"];if(gsub==null){ return gls; }var llist=gsub.lookupList,flist=gsub.featureList;var wsep='\\n\\t\" ,.:;!?() ،';var R=\"آأؤإاةدذرزوٱٲٳٵٶٷڈډڊڋڌڍڎڏڐڑڒړڔڕږڗژڙۀۃۄۅۆۇۈۉۊۋۍۏےۓەۮۯܐܕܖܗܘܙܞܨܪܬܯݍݙݚݛݫݬݱݳݴݸݹࡀࡆࡇࡉࡔࡧࡩࡪࢪࢫࢬࢮࢱࢲࢹૅેૉ૊૎૏ૐ૑૒૝ૡ૤૯஁ஃ஄அஉ஌எஏ஑னப஫஬\";var L=\"ꡲ્૗\";for(var ci=0;cirlim){ continue; }var good=true;for(var l=0;lrlim){ continue; }var good=true;for(var l=0;l>1;stack.length=0;haveWidth=true;}else if(v==\"o3\"||v==\"o23\"){var hasWidthArg;hasWidthArg=stack.length%2!==0;if(hasWidthArg&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;}nStems+=stack.length>>1;stack.length=0;haveWidth=true;}else if(v==\"o4\"){if(stack.length>1&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}if(open){ Typr.U.P.closePath(p); }y+=stack.pop();Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o5\"){while(stack.length>0){x+=stack.shift();y+=stack.shift();Typr.U.P.lineTo(p,x,y);}}else if(v==\"o6\"||v==\"o7\"){var count=stack.length;var isX=v==\"o6\";for(var j=0;jMath.abs(c4y-y)){x=c4x+stack.shift();}else {y=c4y+stack.shift();}Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,jpx,jpy);Typr.U.P.curveTo(p,c3x,c3y,c4x,c4y,x,y);}}else if(v==\"o14\"){if(stack.length>0&&!haveWidth){width=stack.shift()+font.nominalWidthX;haveWidth=true;}if(stack.length==4){var adx=stack.shift();var ady=stack.shift();var bchar=stack.shift();var achar=stack.shift();var bind=Typr.CFF.glyphBySE(font,bchar);var aind=Typr.CFF.glyphBySE(font,achar);Typr.U._drawCFF(font.CharStrings[bind],state,font,p);state.x=adx;state.y=ady;Typr.U._drawCFF(font.CharStrings[aind],state,font,p);}if(open){Typr.U.P.closePath(p);open=false;}}else if(v==\"o19\"||v==\"o20\"){var hasWidthArg;hasWidthArg=stack.length%2!==0;if(hasWidthArg&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;}nStems+=stack.length>>1;stack.length=0;haveWidth=true;i+=nStems+7>>3;}else if(v==\"o21\"){if(stack.length>2&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}y+=stack.pop();x+=stack.pop();if(open){ Typr.U.P.closePath(p); }Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o22\"){if(stack.length>1&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}x+=stack.pop();if(open){ Typr.U.P.closePath(p); }Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o25\"){while(stack.length>6){x+=stack.shift();y+=stack.shift();Typr.U.P.lineTo(p,x,y);}c1x=x+stack.shift();c1y=y+stack.shift();c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x+stack.shift();y=c2y+stack.shift();Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}else if(v==\"o26\"){if(stack.length%2){x+=stack.shift();}while(stack.length>0){c1x=x;c1y=y+stack.shift();c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x;y=c2y+stack.shift();Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}}else if(v==\"o27\"){if(stack.length%2){y+=stack.shift();}while(stack.length>0){c1x=x+stack.shift();c1y=y;c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x+stack.shift();y=c2y;Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}}else if(v==\"o10\"||v==\"o29\"){var obj=v==\"o10\"?font.Private:font;if(stack.length==0){console.log(\"error: empty stack\");}else {var ind=stack.pop();var subr=obj.Subrs[ind+obj.Bias];state.x=x;state.y=y;state.nStems=nStems;state.haveWidth=haveWidth;state.width=width;state.open=open;Typr.U._drawCFF(subr,state,font,p);x=state.x;y=state.y;nStems=state.nStems;haveWidth=state.haveWidth;width=state.width;open=state.open;}}else if(v==\"o30\"||v==\"o31\"){var count,count1=stack.length;var index=0;var alternate=v==\"o31\";count=count1&~2;index+=count1-count;while(index -1 && glyphId < advanceWidthTable.length) {\n advanceWidth += advanceWidthTable[glyphId];\n }\n return advanceWidth;\n }, 0);\n });\n var width = Math.max.apply(Math, lineWidths);\n var lineHeight = (0 - descender) + ascender;\n var height = lineHeight * lines.length;\n \n // Multiply by fontScale to convert from font units to pixels\n return {\n width: width * fontScale,\n height: height * fontScale,\n lineHeight: lineHeight * fontScale,\n lineWidths: lineWidths.map(function (width) { return width * fontScale; }),\n descender: descender * fontScale,\n ascender: ascender * fontScale,\n };\n };\n\n ZdogFont.prototype.getTextPath = function getTextPath (text, fontSize, x, y, z, alignX, alignY) {\n var this$1 = this;\n if ( fontSize === void 0 ) fontSize=64;\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n if (!this._hasLoaded) {\n return [];\n }\n var lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n var measurements = this.measureText(text, fontSize);\n var lineWidths = measurements.lineWidths;\n var lineHeight = measurements.lineHeight;\n return lines.map(function (line, lineIndex) {\n var ref = this$1.getTextOrigin(Object.assign({}, measurements,\n {width: lineWidths[lineIndex]}), x, y, z, alignX, alignY);\n var _x = ref[0];\n var _y = ref[1];\n var _z = ref[2];\n y += lineHeight;\n var glyphs = typr_js.U.stringToGlyphs(this$1.font, line);\n var path = typr_js.U.glyphsToPath(this$1.font, glyphs);\n return this$1._convertPathCommands(path, fontSize, _x, _y, z);\n }).flat();\n };\n\n ZdogFont.prototype.getTextGlyphs = function getTextGlyphs (text, fontSize, x, y, z, alignX, alignY) {\n var this$1 = this;\n if ( fontSize === void 0 ) fontSize=64;\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n if (!this._hasLoaded) {\n return [];\n }\n var measurements = this.measureText(text, fontSize);\n var advanceWidthTable = this.font.hmtx.aWidth;\n var fontScale = this.getFontScale(fontSize);\n var lineWidths = measurements.lineWidths;\n var lineHeight = measurements.lineHeight;\n var lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n return lines.map(function (line, lineIndex) {\n var glyphs = typr_js.U.stringToGlyphs(this$1.font, line);\n var ref = this$1.getTextOrigin(Object.assign({}, measurements,\n {width: lineWidths[lineIndex]}), x, y, z, alignX, alignY);\n var _x = ref[0];\n var _y = ref[1];\n var _z = ref[2];\n y += lineHeight;\n return glyphs.filter(function (glyph) { return glyph !== -1; }).map(function (glyphId) {\n var path = typr_js.U.glyphToPath(this$1.font, glyphId);\n var shape = {\n translate: {x:_x, y: _y, z:_z},\n path: this$1._convertPathCommands(path, fontSize, 0, 0, 0)\n };\n _x += advanceWidthTable[glyphId] * fontScale;\n return shape;\n });\n }).flat(); \n };\n\n ZdogFont.prototype.getTextOrigin = function getTextOrigin (measuement, x, y, z, alignX, alignY) {\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n var width = measuement.width;\n var height = measuement.height;\n var lineHeight = measuement.lineHeight;\n switch (alignX) {\n case 'right':\n x -= width;\n break;\n case 'center':\n x -= width / 2;\n break;\n }\n switch (alignY) {\n case 'middle':\n y -= (height / 2)- lineHeight;\n break;\n case 'bottom':\n default:\n y -= height - lineHeight;\n break;\n }\n return [x, y, z];\n };\n\n // Convert Typr.js path commands to Zdog commands\n // Also apply font size scaling and coordinate adjustment\n // https://github.com/photopea/Typr.js\n // https://zzz.dog/shapes#shape-path-commands\n ZdogFont.prototype._convertPathCommands = function _convertPathCommands (path, fontSize, x, y, z) {\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n\n var yDir = -1;\n var xDir = 1;\n var fontScale = this.getFontScale(fontSize);\n var commands = path.cmds;\n // Apply font scale to all coords\n var coords = path.crds.map(function (coord) { return coord * fontScale; });\n // Convert coords to Zdog commands\n var startCoord = null;\n var coordOffset = 0;\n return commands.map(function (cmd) {\n var result = null;\n if (!startCoord) {\n startCoord = {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z};\n }\n switch (cmd) {\n case 'M': // moveTo command\n result = {\n move: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z}\n };\n coordOffset += 2;\n return result;\n case 'L': // lineTo command\n result = {\n line: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z}\n };\n coordOffset += 2;\n return result;\n case 'C': // curveTo command\n result = {\n bezier: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z: z},\n {x: x + coords[coordOffset + 4] * xDir, y: y + coords[coordOffset + 5] * yDir, z: z} ]\n };\n coordOffset += 6;\n return result;\n case 'Q': // arcTo command\n result = {\n arc: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z: z} ]\n };\n coordOffset += 4;\n return result;\n case 'Z': // close path\n if (startCoord) {\n result = {\n line: startCoord\n };\n startCoord = null;\n }\n return result;\n // unhandled type\n // currently, #rrggbb and X types (used in multicolor fonts) aren't supported\n default:\n return result;\n }\n }).filter(function (cmd) { return cmd !== null; }); // filter out null commands\n };\n\n ZdogFont.prototype._fetchFontResource = function _fetchFontResource (source) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n // Fetch as an arrayBuffer for Typr.parse\n request.responseType = 'arraybuffer'; \n request.open('GET', source, true);\n request.onreadystatechange = function (e) {\n if (request.readyState === 4) {\n if (request.status >= 200 && request.status < 300) {\n resolve(request.response);\n } else {\n reject((\"HTTP error \" + (request.status) + \": \" + (request.statusText)));\n }\n }\n };\n request.send(null);\n });\n };\n\n Zdog.Font = ZdogFont;\n return Zdog;\n}\n\nfunction objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }\nfunction registerTextClass(Zdog) {\n\n // Zdog.Text class\n var ZdogText = /*@__PURE__*/(function (superclass) {\n function ZdogText(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n }, props);\n // Split props\n var font = props.font;\n var value = props.value;\n var fontSize = props.fontSize;\n var textAlign = props.textAlign;\n var textBaseline = props.textBaseline;\n var rest = objectWithoutProperties( props, [\"font\", \"value\", \"fontSize\", \"textAlign\", \"textBaseline\"] );\n var shapeProps = rest;\n // Create shape object\n superclass.call(this, Object.assign({}, shapeProps,\n {closed: true,\n visible: false, // hide until font is loaded\n path: [{}]}));\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this.font = font;\n }\n\n if ( superclass ) ZdogText.__proto__ = superclass;\n ZdogText.prototype = Object.create( superclass && superclass.prototype );\n ZdogText.prototype.constructor = ZdogText;\n\n var prototypeAccessors = { font: { configurable: true },value: { configurable: true },fontSize: { configurable: true },textAlign: { configurable: true },textBaseline: { configurable: true } };\n\n ZdogText.prototype.updateText = function updateText () {\n var path = this.font.getTextPath(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n if (path.length == 0) { // zdog doesn't know what to do with empty path arrays\n this.path = [{}];\n this.visible = false;\n } else {\n this.path = path;\n this.visible = true;\n }\n this.updatePath();\n };\n\n prototypeAccessors.font.set = function (newFont) {\n var this$1 = this;\n\n this._font = newFont;\n this.font.waitForLoad().then(function () {\n this$1.updateText();\n this$1.visible = true;\n // Find root Zdog.Illustration instance\n var root = this$1.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n };\n\n prototypeAccessors.font.get = function () {\n return this._font;\n };\n\n prototypeAccessors.value.set = function (newValue) {\n this._value = newValue;\n this.updateText();\n };\n \n prototypeAccessors.value.get = function () {\n return this._value;\n };\n\n prototypeAccessors.fontSize.set = function (newSize) {\n this._fontSize = newSize;\n this.updateText();\n };\n\n prototypeAccessors.fontSize.get = function () {\n return this._fontSize;\n };\n\n prototypeAccessors.textAlign.set = function (newValue) {\n this._textAlign = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textAlign.get = function () {\n return this._textAlign;\n };\n\n prototypeAccessors.textBaseline.set = function (newValue) {\n this._textBaseline = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textBaseline.get = function () {\n return this._textBaseline;\n };\n\n Object.defineProperties( ZdogText.prototype, prototypeAccessors );\n\n return ZdogText;\n }(Zdog.Shape));\n\n ZdogText.optionKeys = ZdogText.optionKeys.concat(['font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.Text = ZdogText;\n return Zdog;\n}\n\nfunction objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }\nfunction registerTextGroupClass(Zdog) {\n\n // Zdog.TextGroup class\n var ZdogTextGroup = /*@__PURE__*/(function (superclass) {\n function ZdogTextGroup(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n color: '#333',\n fill: false,\n stroke: 1,\n }, props);\n // Split props\n var font = props.font;\n var value = props.value;\n var fontSize = props.fontSize;\n var textAlign = props.textAlign;\n var textBaseline = props.textBaseline;\n var color = props.color;\n var fill = props.fill;\n var stroke = props.stroke;\n var rest = objectWithoutProperties$1( props, [\"font\", \"value\", \"fontSize\", \"textAlign\", \"textBaseline\", \"color\", \"fill\", \"stroke\"] );\n var groupProps = rest;\n // Create group object\n superclass.call(this, Object.assign({}, groupProps,\n {visible: false}));\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this._color = color;\n this._fill = fill;\n this._stroke = stroke;\n this.font = font;\n }\n\n if ( superclass ) ZdogTextGroup.__proto__ = superclass;\n ZdogTextGroup.prototype = Object.create( superclass && superclass.prototype );\n ZdogTextGroup.prototype.constructor = ZdogTextGroup;\n\n var prototypeAccessors = { font: { configurable: true },value: { configurable: true },fontSize: { configurable: true },textAlign: { configurable: true },textBaseline: { configurable: true },color: { configurable: true },fill: { configurable: true },stroke: { configurable: true } };\n\n ZdogTextGroup.prototype.updateText = function updateText () {\n var this$1 = this;\n\n // Remove old children\n while (this.children.length > 0) {\n this.removeChild(this.children[0]);\n }\n // Get text paths for each glyph\n var glyphs = this.font.getTextGlyphs(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n // Convert glyphs to new shapes\n glyphs.filter(function (shape) { return shape.path.length > 0; }).forEach(function (shape) {\n this$1.addChild(new Zdog.Shape({\n translate: shape.translate,\n path: shape.path,\n color: this$1.color,\n fill: this$1.fill,\n stroke: this$1.stroke,\n closed: true,\n }));\n });\n this.updateFlatGraph();\n };\n\n prototypeAccessors.font.set = function (newFont) {\n var this$1 = this;\n\n this._font = newFont;\n this._font.waitForLoad().then(function () {\n this$1.updateText();\n this$1.visible = true;\n // Find root Zdog.Illustration instance\n var root = this$1.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n };\n\n prototypeAccessors.font.get = function () {\n return this._font;\n };\n\n prototypeAccessors.value.set = function (newValue) {\n this._value = newValue;\n this.updateText();\n };\n \n prototypeAccessors.value.get = function () {\n return this._value;\n };\n\n prototypeAccessors.fontSize.set = function (newSize) {\n this._fontSize = newSize;\n this.updateText();\n };\n\n prototypeAccessors.fontSize.get = function () {\n return this._fontSize;\n };\n\n prototypeAccessors.textAlign.set = function (newValue) {\n this._textAlign = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textAlign.get = function () {\n return this._textAlign;\n };\n\n prototypeAccessors.textBaseline.set = function (newValue) {\n this._textBaseline = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textBaseline.get = function () {\n return this._textBaseline;\n };\n\n prototypeAccessors.color.set = function (newColor) {\n this._color = newColor;\n this.children.forEach(function (child) { return child.color = newColor; });\n };\n\n prototypeAccessors.color.get = function () {\n return this._color;\n };\n\n prototypeAccessors.fill.set = function (newFill) {\n this._fill = newFill;\n this.children.forEach(function (child) { return child.fill = newFill; });\n };\n\n prototypeAccessors.fill.get = function () {\n return this._fill;\n };\n\n prototypeAccessors.stroke.set = function (newStroke) {\n this._stroke = newStroke;\n this.children.forEach(function (child) { return child.stroke = newStroke; });\n };\n\n prototypeAccessors.stroke.get = function () {\n return this._stroke;\n };\n\n Object.defineProperties( ZdogTextGroup.prototype, prototypeAccessors );\n\n return ZdogTextGroup;\n }(Zdog.Group));\n\n ZdogTextGroup.optionKeys = ZdogTextGroup.optionKeys.concat(['color', 'fill', 'stroke', 'font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.TextGroup = ZdogTextGroup;\n return Zdog;\n}\n\nvar index = {\n init: function init(Zdog) {\n // Global font list to keep track of all fonts\n Zdog.FontList = [];\n\n // Helper to wait for all fonts to load\n Zdog.waitForFonts = function() {\n return Promise.all(Zdog.FontList.map(function (font) { return font.waitForLoad(); }));\n };\n \n // Register Zfont classes onto the Zdog object\n registerFontClass(Zdog);\n registerTextClass(Zdog);\n registerTextGroupClass(Zdog);\n\n return Zdog;\n },\n version: \"1.2.8\",\n};\n\nexport default index;\n//# sourceMappingURL=zfont.es.js.map\n" }, { "path": "dist/zfont.js", "content": "/*!\n * Zfont v1.2.8\n * Text plugin for Zdog\n * 2019 James Daniel\n * MIT Licensed \n * github.com/jaames/zfont\n */\n\n(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = global || self, global.Zfont = factory());\n}(this, (function () { 'use strict';\n\n var Typr={};Typr.parse=function(buff){var bin=Typr._bin;var data=new Uint8Array(buff);var offset=0;var sfnt_version=bin.readFixed(data,offset);offset+=4;var numTables=bin.readUshort(data,offset);offset+=2;var searchRange=bin.readUshort(data,offset);offset+=2;var entrySelector=bin.readUshort(data,offset);offset+=2;var rangeShift=bin.readUshort(data,offset);offset+=2;var tags=[\"cmap\",\"head\",\"hhea\",\"maxp\",\"hmtx\",\"name\",\"OS/2\",\"post\",\"loca\",\"glyf\",\"kern\",\"CFF \",\"GPOS\",\"GSUB\",\"SVG \"];var obj={_data:data};var tabs={};for(var i=0;i>>i&1)!=0){ num++; } }return num};Typr._lctf.readClassDef=function(data,offset){var bin=Typr._bin;var obj=[];var format=bin.readUshort(data,offset);offset+=2;if(format==1){var startGlyph=bin.readUshort(data,offset);offset+=2;var glyphCount=bin.readUshort(data,offset);offset+=2;for(var i=0;i255){ return -1; }return Typr.CFF.glyphByUnicode(cff,Typr.CFF.tableSE[charcode])};Typr.CFF.readEncoding=function(data,offset,num){var bin=Typr._bin;var array=[\".notdef\"];var format=data[offset];offset++;if(format==0){var nCodes=data[offset];offset++;for(var i=0;i>4,nib1=b&15;if(nib0!=15){ nibs.push(nib0); }if(nib1!=15){ nibs.push(nib1); }if(nib1==15){ break }}var s=\"\";var chars=[0,1,2,3,4,5,6,7,8,9,\".\",\"e\",\"e-\",\"reserved\",\"-\",\"endOfNumber\"];for(var i=0;i=gl.xMax||gl.yMin>=gl.yMax){ return null; }if(gl.noc>0){gl.endPts=[];for(var i=0;i>>8;format&=15;if(format==0){ offset=Typr.kern.readFormat0(data,offset,map); }else { throw \"unknown kern table format: \"+format }}return map};Typr.kern.parseV1=function(data,offset,length,font){var bin=Typr._bin;var version=bin.readFixed(data,offset);offset+=4;var nTables=bin.readUint(data,offset);offset+=4;var map={glyph1:[],rval:[]};for(var i=0;i>>8;format&=15;if(format==0){ offset=Typr.kern.readFormat0(data,offset,map); }else { throw \"unknown kern table format: \"+format }}return map};Typr.kern.readFormat0=function(data,offset,map){var bin=Typr._bin;var pleft=-1;var nPairs=bin.readUshort(data,offset);offset+=2;var searchRange=bin.readUshort(data,offset);offset+=2;var entrySelector=bin.readUshort(data,offset);offset+=2;var rangeShift=bin.readUshort(data,offset);offset+=2;for(var j=0;j=tab.map.length){ return 0; }return tab.map[code]}else if(tab.format==4){var sind=-1;for(var i=0;icode){ return 0; }var gli=0;if(tab.idRangeOffset[sind]!=0){ gli=tab.glyphIdArray[code-tab.startCount[sind]+(tab.idRangeOffset[sind]>>1)-(tab.idRangeOffset.length-sind)]; }else { gli=code+tab.idDelta[sind]; }return gli&65535}else if(tab.format==12){if(code>tab.groups[tab.groups.length-1][1]){ return 0; }for(var i=0;i-1){ Typr.U._simpleGlyph(gl,path); }else { Typr.U._compoGlyph(gl,font,path); }}};Typr.U._simpleGlyph=function(gl,p){for(var c=0;c65535){ i++; }gls.push(Typr.U.codeToGlyph(font,cc));}var gsub=font[\"GSUB\"];if(gsub==null){ return gls; }var llist=gsub.lookupList,flist=gsub.featureList;var wsep='\\n\\t\" ,.:;!?() ،';var R=\"آأؤإاةدذرزوٱٲٳٵٶٷڈډڊڋڌڍڎڏڐڑڒړڔڕږڗژڙۀۃۄۅۆۇۈۉۊۋۍۏےۓەۮۯܐܕܖܗܘܙܞܨܪܬܯݍݙݚݛݫݬݱݳݴݸݹࡀࡆࡇࡉࡔࡧࡩࡪࢪࢫࢬࢮࢱࢲࢹૅેૉ૊૎૏ૐ૑૒૝ૡ૤૯஁ஃ஄அஉ஌எஏ஑னப஫஬\";var L=\"ꡲ્૗\";for(var ci=0;cirlim){ continue; }var good=true;for(var l=0;lrlim){ continue; }var good=true;for(var l=0;l>1;stack.length=0;haveWidth=true;}else if(v==\"o3\"||v==\"o23\"){var hasWidthArg;hasWidthArg=stack.length%2!==0;if(hasWidthArg&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;}nStems+=stack.length>>1;stack.length=0;haveWidth=true;}else if(v==\"o4\"){if(stack.length>1&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}if(open){ Typr.U.P.closePath(p); }y+=stack.pop();Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o5\"){while(stack.length>0){x+=stack.shift();y+=stack.shift();Typr.U.P.lineTo(p,x,y);}}else if(v==\"o6\"||v==\"o7\"){var count=stack.length;var isX=v==\"o6\";for(var j=0;jMath.abs(c4y-y)){x=c4x+stack.shift();}else {y=c4y+stack.shift();}Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,jpx,jpy);Typr.U.P.curveTo(p,c3x,c3y,c4x,c4y,x,y);}}else if(v==\"o14\"){if(stack.length>0&&!haveWidth){width=stack.shift()+font.nominalWidthX;haveWidth=true;}if(stack.length==4){var adx=stack.shift();var ady=stack.shift();var bchar=stack.shift();var achar=stack.shift();var bind=Typr.CFF.glyphBySE(font,bchar);var aind=Typr.CFF.glyphBySE(font,achar);Typr.U._drawCFF(font.CharStrings[bind],state,font,p);state.x=adx;state.y=ady;Typr.U._drawCFF(font.CharStrings[aind],state,font,p);}if(open){Typr.U.P.closePath(p);open=false;}}else if(v==\"o19\"||v==\"o20\"){var hasWidthArg;hasWidthArg=stack.length%2!==0;if(hasWidthArg&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;}nStems+=stack.length>>1;stack.length=0;haveWidth=true;i+=nStems+7>>3;}else if(v==\"o21\"){if(stack.length>2&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}y+=stack.pop();x+=stack.pop();if(open){ Typr.U.P.closePath(p); }Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o22\"){if(stack.length>1&&!haveWidth){width=stack.shift()+font.Private.nominalWidthX;haveWidth=true;}x+=stack.pop();if(open){ Typr.U.P.closePath(p); }Typr.U.P.moveTo(p,x,y);open=true;}else if(v==\"o25\"){while(stack.length>6){x+=stack.shift();y+=stack.shift();Typr.U.P.lineTo(p,x,y);}c1x=x+stack.shift();c1y=y+stack.shift();c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x+stack.shift();y=c2y+stack.shift();Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}else if(v==\"o26\"){if(stack.length%2){x+=stack.shift();}while(stack.length>0){c1x=x;c1y=y+stack.shift();c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x;y=c2y+stack.shift();Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}}else if(v==\"o27\"){if(stack.length%2){y+=stack.shift();}while(stack.length>0){c1x=x+stack.shift();c1y=y;c2x=c1x+stack.shift();c2y=c1y+stack.shift();x=c2x+stack.shift();y=c2y;Typr.U.P.curveTo(p,c1x,c1y,c2x,c2y,x,y);}}else if(v==\"o10\"||v==\"o29\"){var obj=v==\"o10\"?font.Private:font;if(stack.length==0){console.log(\"error: empty stack\");}else {var ind=stack.pop();var subr=obj.Subrs[ind+obj.Bias];state.x=x;state.y=y;state.nStems=nStems;state.haveWidth=haveWidth;state.width=width;state.open=open;Typr.U._drawCFF(subr,state,font,p);x=state.x;y=state.y;nStems=state.nStems;haveWidth=state.haveWidth;width=state.width;open=state.open;}}else if(v==\"o30\"||v==\"o31\"){var count,count1=stack.length;var index=0;var alternate=v==\"o31\";count=count1&~2;index+=count1-count;while(index -1 && glyphId < advanceWidthTable.length) {\n advanceWidth += advanceWidthTable[glyphId];\n }\n return advanceWidth;\n }, 0);\n });\n var width = Math.max.apply(Math, lineWidths);\n var lineHeight = (0 - descender) + ascender;\n var height = lineHeight * lines.length;\n \n // Multiply by fontScale to convert from font units to pixels\n return {\n width: width * fontScale,\n height: height * fontScale,\n lineHeight: lineHeight * fontScale,\n lineWidths: lineWidths.map(function (width) { return width * fontScale; }),\n descender: descender * fontScale,\n ascender: ascender * fontScale,\n };\n };\n\n ZdogFont.prototype.getTextPath = function getTextPath (text, fontSize, x, y, z, alignX, alignY) {\n var this$1 = this;\n if ( fontSize === void 0 ) fontSize=64;\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n if (!this._hasLoaded) {\n return [];\n }\n var lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n var measurements = this.measureText(text, fontSize);\n var lineWidths = measurements.lineWidths;\n var lineHeight = measurements.lineHeight;\n return lines.map(function (line, lineIndex) {\n var ref = this$1.getTextOrigin(Object.assign({}, measurements,\n {width: lineWidths[lineIndex]}), x, y, z, alignX, alignY);\n var _x = ref[0];\n var _y = ref[1];\n var _z = ref[2];\n y += lineHeight;\n var glyphs = typr_js.U.stringToGlyphs(this$1.font, line);\n var path = typr_js.U.glyphsToPath(this$1.font, glyphs);\n return this$1._convertPathCommands(path, fontSize, _x, _y, z);\n }).flat();\n };\n\n ZdogFont.prototype.getTextGlyphs = function getTextGlyphs (text, fontSize, x, y, z, alignX, alignY) {\n var this$1 = this;\n if ( fontSize === void 0 ) fontSize=64;\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n if (!this._hasLoaded) {\n return [];\n }\n var measurements = this.measureText(text, fontSize);\n var advanceWidthTable = this.font.hmtx.aWidth;\n var fontScale = this.getFontScale(fontSize);\n var lineWidths = measurements.lineWidths;\n var lineHeight = measurements.lineHeight;\n var lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n return lines.map(function (line, lineIndex) {\n var glyphs = typr_js.U.stringToGlyphs(this$1.font, line);\n var ref = this$1.getTextOrigin(Object.assign({}, measurements,\n {width: lineWidths[lineIndex]}), x, y, z, alignX, alignY);\n var _x = ref[0];\n var _y = ref[1];\n var _z = ref[2];\n y += lineHeight;\n return glyphs.filter(function (glyph) { return glyph !== -1; }).map(function (glyphId) {\n var path = typr_js.U.glyphToPath(this$1.font, glyphId);\n var shape = {\n translate: {x:_x, y: _y, z:_z},\n path: this$1._convertPathCommands(path, fontSize, 0, 0, 0)\n };\n _x += advanceWidthTable[glyphId] * fontScale;\n return shape;\n });\n }).flat(); \n };\n\n ZdogFont.prototype.getTextOrigin = function getTextOrigin (measuement, x, y, z, alignX, alignY) {\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n if ( alignX === void 0 ) alignX='left';\n if ( alignY === void 0 ) alignY='bottom';\n\n var width = measuement.width;\n var height = measuement.height;\n var lineHeight = measuement.lineHeight;\n switch (alignX) {\n case 'right':\n x -= width;\n break;\n case 'center':\n x -= width / 2;\n break;\n }\n switch (alignY) {\n case 'middle':\n y -= (height / 2)- lineHeight;\n break;\n case 'bottom':\n default:\n y -= height - lineHeight;\n break;\n }\n return [x, y, z];\n };\n\n // Convert Typr.js path commands to Zdog commands\n // Also apply font size scaling and coordinate adjustment\n // https://github.com/photopea/Typr.js\n // https://zzz.dog/shapes#shape-path-commands\n ZdogFont.prototype._convertPathCommands = function _convertPathCommands (path, fontSize, x, y, z) {\n if ( x === void 0 ) x=0;\n if ( y === void 0 ) y=0;\n if ( z === void 0 ) z=0;\n\n var yDir = -1;\n var xDir = 1;\n var fontScale = this.getFontScale(fontSize);\n var commands = path.cmds;\n // Apply font scale to all coords\n var coords = path.crds.map(function (coord) { return coord * fontScale; });\n // Convert coords to Zdog commands\n var startCoord = null;\n var coordOffset = 0;\n return commands.map(function (cmd) {\n var result = null;\n if (!startCoord) {\n startCoord = {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z};\n }\n switch (cmd) {\n case 'M': // moveTo command\n result = {\n move: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z}\n };\n coordOffset += 2;\n return result;\n case 'L': // lineTo command\n result = {\n line: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z}\n };\n coordOffset += 2;\n return result;\n case 'C': // curveTo command\n result = {\n bezier: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z: z},\n {x: x + coords[coordOffset + 4] * xDir, y: y + coords[coordOffset + 5] * yDir, z: z} ]\n };\n coordOffset += 6;\n return result;\n case 'Q': // arcTo command\n result = {\n arc: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z: z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z: z} ]\n };\n coordOffset += 4;\n return result;\n case 'Z': // close path\n if (startCoord) {\n result = {\n line: startCoord\n };\n startCoord = null;\n }\n return result;\n // unhandled type\n // currently, #rrggbb and X types (used in multicolor fonts) aren't supported\n default:\n return result;\n }\n }).filter(function (cmd) { return cmd !== null; }); // filter out null commands\n };\n\n ZdogFont.prototype._fetchFontResource = function _fetchFontResource (source) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n // Fetch as an arrayBuffer for Typr.parse\n request.responseType = 'arraybuffer'; \n request.open('GET', source, true);\n request.onreadystatechange = function (e) {\n if (request.readyState === 4) {\n if (request.status >= 200 && request.status < 300) {\n resolve(request.response);\n } else {\n reject((\"HTTP error \" + (request.status) + \": \" + (request.statusText)));\n }\n }\n };\n request.send(null);\n });\n };\n\n Zdog.Font = ZdogFont;\n return Zdog;\n }\n\n function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }\n function registerTextClass(Zdog) {\n\n // Zdog.Text class\n var ZdogText = /*@__PURE__*/(function (superclass) {\n function ZdogText(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n }, props);\n // Split props\n var font = props.font;\n var value = props.value;\n var fontSize = props.fontSize;\n var textAlign = props.textAlign;\n var textBaseline = props.textBaseline;\n var rest = objectWithoutProperties( props, [\"font\", \"value\", \"fontSize\", \"textAlign\", \"textBaseline\"] );\n var shapeProps = rest;\n // Create shape object\n superclass.call(this, Object.assign({}, shapeProps,\n {closed: true,\n visible: false, // hide until font is loaded\n path: [{}]}));\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this.font = font;\n }\n\n if ( superclass ) ZdogText.__proto__ = superclass;\n ZdogText.prototype = Object.create( superclass && superclass.prototype );\n ZdogText.prototype.constructor = ZdogText;\n\n var prototypeAccessors = { font: { configurable: true },value: { configurable: true },fontSize: { configurable: true },textAlign: { configurable: true },textBaseline: { configurable: true } };\n\n ZdogText.prototype.updateText = function updateText () {\n var path = this.font.getTextPath(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n if (path.length == 0) { // zdog doesn't know what to do with empty path arrays\n this.path = [{}];\n this.visible = false;\n } else {\n this.path = path;\n this.visible = true;\n }\n this.updatePath();\n };\n\n prototypeAccessors.font.set = function (newFont) {\n var this$1 = this;\n\n this._font = newFont;\n this.font.waitForLoad().then(function () {\n this$1.updateText();\n this$1.visible = true;\n // Find root Zdog.Illustration instance\n var root = this$1.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n };\n\n prototypeAccessors.font.get = function () {\n return this._font;\n };\n\n prototypeAccessors.value.set = function (newValue) {\n this._value = newValue;\n this.updateText();\n };\n \n prototypeAccessors.value.get = function () {\n return this._value;\n };\n\n prototypeAccessors.fontSize.set = function (newSize) {\n this._fontSize = newSize;\n this.updateText();\n };\n\n prototypeAccessors.fontSize.get = function () {\n return this._fontSize;\n };\n\n prototypeAccessors.textAlign.set = function (newValue) {\n this._textAlign = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textAlign.get = function () {\n return this._textAlign;\n };\n\n prototypeAccessors.textBaseline.set = function (newValue) {\n this._textBaseline = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textBaseline.get = function () {\n return this._textBaseline;\n };\n\n Object.defineProperties( ZdogText.prototype, prototypeAccessors );\n\n return ZdogText;\n }(Zdog.Shape));\n\n ZdogText.optionKeys = ZdogText.optionKeys.concat(['font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.Text = ZdogText;\n return Zdog;\n }\n\n function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }\n function registerTextGroupClass(Zdog) {\n\n // Zdog.TextGroup class\n var ZdogTextGroup = /*@__PURE__*/(function (superclass) {\n function ZdogTextGroup(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n color: '#333',\n fill: false,\n stroke: 1,\n }, props);\n // Split props\n var font = props.font;\n var value = props.value;\n var fontSize = props.fontSize;\n var textAlign = props.textAlign;\n var textBaseline = props.textBaseline;\n var color = props.color;\n var fill = props.fill;\n var stroke = props.stroke;\n var rest = objectWithoutProperties$1( props, [\"font\", \"value\", \"fontSize\", \"textAlign\", \"textBaseline\", \"color\", \"fill\", \"stroke\"] );\n var groupProps = rest;\n // Create group object\n superclass.call(this, Object.assign({}, groupProps,\n {visible: false}));\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this._color = color;\n this._fill = fill;\n this._stroke = stroke;\n this.font = font;\n }\n\n if ( superclass ) ZdogTextGroup.__proto__ = superclass;\n ZdogTextGroup.prototype = Object.create( superclass && superclass.prototype );\n ZdogTextGroup.prototype.constructor = ZdogTextGroup;\n\n var prototypeAccessors = { font: { configurable: true },value: { configurable: true },fontSize: { configurable: true },textAlign: { configurable: true },textBaseline: { configurable: true },color: { configurable: true },fill: { configurable: true },stroke: { configurable: true } };\n\n ZdogTextGroup.prototype.updateText = function updateText () {\n var this$1 = this;\n\n // Remove old children\n while (this.children.length > 0) {\n this.removeChild(this.children[0]);\n }\n // Get text paths for each glyph\n var glyphs = this.font.getTextGlyphs(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n // Convert glyphs to new shapes\n glyphs.filter(function (shape) { return shape.path.length > 0; }).forEach(function (shape) {\n this$1.addChild(new Zdog.Shape({\n translate: shape.translate,\n path: shape.path,\n color: this$1.color,\n fill: this$1.fill,\n stroke: this$1.stroke,\n closed: true,\n }));\n });\n this.updateFlatGraph();\n };\n\n prototypeAccessors.font.set = function (newFont) {\n var this$1 = this;\n\n this._font = newFont;\n this._font.waitForLoad().then(function () {\n this$1.updateText();\n this$1.visible = true;\n // Find root Zdog.Illustration instance\n var root = this$1.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n };\n\n prototypeAccessors.font.get = function () {\n return this._font;\n };\n\n prototypeAccessors.value.set = function (newValue) {\n this._value = newValue;\n this.updateText();\n };\n \n prototypeAccessors.value.get = function () {\n return this._value;\n };\n\n prototypeAccessors.fontSize.set = function (newSize) {\n this._fontSize = newSize;\n this.updateText();\n };\n\n prototypeAccessors.fontSize.get = function () {\n return this._fontSize;\n };\n\n prototypeAccessors.textAlign.set = function (newValue) {\n this._textAlign = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textAlign.get = function () {\n return this._textAlign;\n };\n\n prototypeAccessors.textBaseline.set = function (newValue) {\n this._textBaseline = newValue;\n this.updateText();\n };\n\n prototypeAccessors.textBaseline.get = function () {\n return this._textBaseline;\n };\n\n prototypeAccessors.color.set = function (newColor) {\n this._color = newColor;\n this.children.forEach(function (child) { return child.color = newColor; });\n };\n\n prototypeAccessors.color.get = function () {\n return this._color;\n };\n\n prototypeAccessors.fill.set = function (newFill) {\n this._fill = newFill;\n this.children.forEach(function (child) { return child.fill = newFill; });\n };\n\n prototypeAccessors.fill.get = function () {\n return this._fill;\n };\n\n prototypeAccessors.stroke.set = function (newStroke) {\n this._stroke = newStroke;\n this.children.forEach(function (child) { return child.stroke = newStroke; });\n };\n\n prototypeAccessors.stroke.get = function () {\n return this._stroke;\n };\n\n Object.defineProperties( ZdogTextGroup.prototype, prototypeAccessors );\n\n return ZdogTextGroup;\n }(Zdog.Group));\n\n ZdogTextGroup.optionKeys = ZdogTextGroup.optionKeys.concat(['color', 'fill', 'stroke', 'font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.TextGroup = ZdogTextGroup;\n return Zdog;\n }\n\n var index = {\n init: function init(Zdog) {\n // Global font list to keep track of all fonts\n Zdog.FontList = [];\n\n // Helper to wait for all fonts to load\n Zdog.waitForFonts = function() {\n return Promise.all(Zdog.FontList.map(function (font) { return font.waitForLoad(); }));\n };\n \n // Register Zfont classes onto the Zdog object\n registerFontClass(Zdog);\n registerTextClass(Zdog);\n registerTextGroupClass(Zdog);\n\n return Zdog;\n },\n version: \"1.2.8\",\n };\n\n return index;\n\n})));\n//# sourceMappingURL=zfont.js.map\n" }, { "path": "package.json", "content": "{\n \"name\": \"zfont\",\n \"version\": \"1.2.8\",\n \"description\": \"Text plugin for Zdog\",\n \"module\": \"dist/zfont.es.js\",\n \"main\": \"dist/zfont.js\",\n \"files\": [\n \"dist/zfont.min.js\",\n \"dist/zfont.js\",\n \"dist/zfont.es.js\"\n ],\n \"scripts\": {\n \"start\": \"rollup -c --watch --environment DEV_SERVER,BUILD:development\",\n \"dev\": \"rollup -c --environment BUILD:development\",\n \"build\": \"npm run dev && npm run build:es && npm run build:min\",\n \"build:min\": \"rollup -c --environment BUILD:production\",\n \"build:es\": \"rollup -c --environment ES_MODULE,BUILD:production\"\n },\n \"dependencies\": {\n \"typr.js\": \"^1.0.0\"\n },\n \"devDependencies\": {\n \"rollup\": \"^1.13.0\",\n \"rollup-plugin-alias\": \"^1.5.1\",\n \"rollup-plugin-buble\": \"^0.19.6\",\n \"rollup-plugin-commonjs\": \"^10.0.0\",\n \"rollup-plugin-filesize\": \"^6.1.0\",\n \"rollup-plugin-livereload\": \"^1.0.4\",\n \"rollup-plugin-node-resolve\": \"^5.0.1\",\n \"rollup-plugin-replace\": \"^2.2.0\",\n \"rollup-plugin-serve\": \"^1.0.1\",\n \"rollup-plugin-uglify\": \"^6.0.2\"\n },\n \"keywords\": [\n \"zdog\",\n \"3d\",\n \"font\",\n \"text\",\n \"truetype\",\n \"ttf\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jaames/zfont.git\"\n },\n \"author\": \"James Daniel \",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jaames/zfont/issues\"\n },\n \"homepage\": \"https://github.com/jaames/zfont\"\n}\n" }, { "path": "rollup.config.js", "content": "import { version, description } from './package.json';\nimport filesize from 'rollup-plugin-filesize';\nimport buble from 'rollup-plugin-buble';\nimport alias from 'rollup-plugin-alias';\nimport commonjs from 'rollup-plugin-commonjs';\nimport nodeResolve from 'rollup-plugin-node-resolve';\nimport replace from 'rollup-plugin-replace';\nimport { uglify } from 'rollup-plugin-uglify';\nimport serve from 'rollup-plugin-serve';\nimport livereload from 'rollup-plugin-livereload';\n\nconst build = process.env.BUILD || \"development\";\nconst devserver = process.env.DEV_SERVER || false;\nconst esmodule = process.env.ES_MODULE || false;\nconst prod = build === \"production\";\n\nconst banner = `/*!\n * Zfont v${version}\n * ${description}\n * 2019 James Daniel\n * MIT Licensed \n * github.com/jaames/zfont\n */\n`\n\nmodule.exports = {\n input: 'src/index.js',\n output: [\n esmodule ? {\n file: 'dist/zfont.es.js',\n format: 'es',\n name: 'Zfont',\n banner: banner,\n sourcemap: true,\n sourcemapFile: 'dist/zfont.es.map'\n } : {\n file: prod ? 'dist/zfont.min.js' : 'dist/zfont.js',\n format: 'umd',\n name: 'Zfont',\n banner: banner,\n sourcemap: true,\n sourcemapFile: prod ? 'dist/zfont.min.js.map' : 'dist/zfont.js.map'\n }\n ].filter(Boolean),\n plugins: [\n alias({\n resolve: ['.jsx', '.js']\n }),\n replace({\n VERSION: JSON.stringify(version),\n PROD: prod ? 'true' : 'false',\n DEV_SERVER: devserver ? 'true' : 'false'\n }),\n buble({\n jsx: 'h',\n objectAssign: 'Object.assign',\n transforms: {\n }\n }),\n nodeResolve(),\n commonjs(),\n !prod && devserver ? serve({\n contentBase: ['dist', 'demo']\n }) : false,\n !prod && devserver ? livereload() : false,\n // show filesize stats when building dist files\n !devserver ? filesize() : false,\n // only minify if we're producing a non-es production build\n prod && !esmodule ? uglify({\n output: {\n comments: function(node, comment) {\n if (comment.type === 'comment2') {\n // preserve banner comment\n return /\\!/i.test(comment.value);\n }\n return false;\n }\n }\n }) : false,\n ].filter(Boolean)\n};" }, { "path": "src/ZdogFont.js", "content": "import Typr from 'typr.js';\n\nconst TEXT_NEWLINE_REGEXP = /\\r?\\n/;\n\nexport function registerFontClass(Zdog) {\n // Zdog.Font class\n class ZdogFont {\n constructor(props) {\n // Set missing props to default values\n props = Zdog.extend({\n src: '',\n }, props);\n this.src = props.src;\n this.font = null;\n this._hasLoaded = false;\n this._loadCallbacks = [];\n // Add this font instance to the internal font list\n Zdog.FontList.push(this);\n // Begin loading font file\n this._fetchFontResource(this.src)\n .then(buffer => {\n const font = Typr.parse(buffer);\n // check font fields to see if the font was parsed correctly\n if ((!font.head) || (!font.hmtx) || (!font.hhea) || (!font.glyf)) {\n // get a list of missing font fields (only checks for ones that zfont uses)\n const missingFields = ['head', 'hmtx', 'hhea', 'glyf'].filter(field => !font[field]);\n throw new Error(`Typr.js could not parse this font (unable to find ${ missingFields.join(', ') })`);\n }\n return font;\n })\n .then(font => {\n this.font = font;\n this._hasLoaded = true;\n this._loadCallbacks.forEach(callback => callback());\n })\n .catch(err => {\n throw new Error(`Unable to load font from ${this.src}:\\n${err}`);\n })\n }\n\n waitForLoad() {\n return new Promise((resolve, reject) => {\n // If the font is loaded, we can resolve right away\n if (this._hasLoaded && this._hasLoaded) {\n resolve();\n }\n // Otherwise, wait for it to load\n else {\n this._loadCallbacks.push(resolve);\n }\n });\n }\n\n getFontScale(fontSize) {\n if (!this._hasLoaded) {\n return null;\n } else {\n return 1 / this.font.head.unitsPerEm * fontSize;\n }\n }\n\n measureText(text, fontSize=64) {\n if (!this._hasLoaded) {\n return null;\n }\n const lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n const font = this.font;\n const advanceWidthTable = font.hmtx.aWidth;\n const fontScale = this.getFontScale(fontSize);\n const descender = font.hhea.descender;\n const ascender = font.hhea.ascender;\n const lineGap = font.hhea.lineGap;\n const lineWidths = lines.map(line => {\n const glyphs = Typr.U.stringToGlyphs(this.font, line);\n return glyphs.reduce((advanceWidth, glyphId) => {\n // stringToGlyphs returns an array on glyph IDs that is the same length as the text string\n // an ID can sometimes be -1 in cases where multiple characters are merged into a single ligature\n if (glyphId > -1 && glyphId < advanceWidthTable.length) {\n advanceWidth += advanceWidthTable[glyphId];\n }\n return advanceWidth;\n }, 0);\n });\n const width = Math.max(...lineWidths);\n const lineHeight = (0 - descender) + ascender;\n const height = lineHeight * lines.length;\n \n // Multiply by fontScale to convert from font units to pixels\n return {\n width: width * fontScale,\n height: height * fontScale,\n lineHeight: lineHeight * fontScale,\n lineWidths: lineWidths.map(width => width * fontScale),\n descender: descender * fontScale,\n ascender: ascender * fontScale,\n };\n }\n\n getTextPath(text, fontSize=64, x=0, y=0, z=0, alignX='left', alignY='bottom') {\n if (!this._hasLoaded) {\n return [];\n }\n const lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n const measurements = this.measureText(text, fontSize);\n const lineWidths = measurements.lineWidths;\n const lineHeight = measurements.lineHeight;\n return lines.map((line, lineIndex) => {\n const [_x, _y, _z] = this.getTextOrigin({\n ...measurements,\n width: lineWidths[lineIndex],\n }, x, y, z, alignX, alignY);\n y += lineHeight;\n const glyphs = Typr.U.stringToGlyphs(this.font, line);\n const path = Typr.U.glyphsToPath(this.font, glyphs);\n return this._convertPathCommands(path, fontSize, _x, _y, z);\n }).flat();\n }\n\n getTextGlyphs(text, fontSize=64, x=0, y=0, z=0, alignX='left', alignY='bottom') {\n if (!this._hasLoaded) {\n return [];\n }\n const measurements = this.measureText(text, fontSize);\n const advanceWidthTable = this.font.hmtx.aWidth;\n const fontScale = this.getFontScale(fontSize);\n const lineWidths = measurements.lineWidths;\n const lineHeight = measurements.lineHeight;\n const lines = Array.isArray(text) ? text : text.split(TEXT_NEWLINE_REGEXP);\n return lines.map((line, lineIndex) => {\n const glyphs = Typr.U.stringToGlyphs(this.font, line);\n let [_x, _y, _z] = this.getTextOrigin({\n ...measurements,\n width: lineWidths[lineIndex]\n }, x, y, z, alignX, alignY);\n y += lineHeight;\n return glyphs.filter(glyph => glyph !== -1).map(glyphId => {\n const path = Typr.U.glyphToPath(this.font, glyphId);\n const shape = {\n translate: {x:_x, y: _y, z:_z},\n path: this._convertPathCommands(path, fontSize, 0, 0, 0)\n };\n _x += advanceWidthTable[glyphId] * fontScale;\n return shape;\n });\n }).flat(); \n }\n\n getTextOrigin(measuement, x=0, y=0, z=0, alignX='left', alignY='bottom') {\n let { width, height, lineHeight } = measuement;\n switch (alignX) {\n case 'right':\n x -= width;\n break;\n case 'center':\n x -= width / 2;\n break;\n default:\n break;\n }\n switch (alignY) {\n case 'middle':\n y -= (height / 2) - lineHeight;\n break;\n case 'bottom':\n default:\n y -= height - lineHeight;\n break;\n }\n return [x, y, z];\n }\n\n // Convert Typr.js path commands to Zdog commands\n // Also apply font size scaling and coordinate adjustment\n // https://github.com/photopea/Typr.js\n // https://zzz.dog/shapes#shape-path-commands\n _convertPathCommands(path, fontSize, x=0, y=0, z=0) {\n const yDir = -1;\n const xDir = 1;\n const fontScale = this.getFontScale(fontSize);\n const commands = path.cmds;\n // Apply font scale to all coords\n const coords = path.crds.map(coord => coord * fontScale);\n // Convert coords to Zdog commands\n let startCoord = null;\n let coordOffset = 0;\n return commands.map((cmd) => {\n let result = null;\n if (!startCoord) {\n startCoord = {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z};\n }\n switch (cmd) {\n case 'M': // moveTo command\n result = {\n move: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z}\n };\n coordOffset += 2;\n return result;\n case 'L': // lineTo command\n result = {\n line: {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z}\n };\n coordOffset += 2;\n return result;\n case 'C': // curveTo command\n result = {\n bezier: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z},\n {x: x + coords[coordOffset + 4] * xDir, y: y + coords[coordOffset + 5] * yDir, z},\n ]\n };\n coordOffset += 6;\n return result;\n case 'Q': // arcTo command\n result = {\n arc: [\n {x: x + coords[coordOffset] * xDir, y: y + coords[coordOffset + 1] * yDir, z},\n {x: x + coords[coordOffset + 2] * xDir, y: y + coords[coordOffset + 3] * yDir, z},\n ]\n };\n coordOffset += 4;\n return result;\n case 'Z': // close path\n if (startCoord) {\n result = {\n line: startCoord\n };\n startCoord = null;\n }\n return result;\n // unhandled type\n // currently, #rrggbb and X types (used in multicolor fonts) aren't supported\n default:\n return result;\n }\n }).filter(cmd => cmd !== null); // filter out null commands\n }\n\n _fetchFontResource(source) {\n return new Promise((resolve, reject) => {\n const request = new XMLHttpRequest();\n // Fetch as an arrayBuffer for Typr.parse\n request.responseType = 'arraybuffer'; \n request.open('GET', source, true);\n request.onreadystatechange = e => {\n if (request.readyState === 4) {\n if (request.status >= 200 && request.status < 300) {\n resolve(request.response);\n } else {\n reject(`HTTP error ${request.status}: ${request.statusText}`);\n }\n }\n };\n request.send(null);\n });\n }\n }\n\n Zdog.Font = ZdogFont;\n return Zdog;\n}" }, { "path": "src/ZdogText.js", "content": "export function registerTextClass(Zdog) {\n\n // Zdog.Text class\n class ZdogText extends Zdog.Shape {\n constructor(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n }, props);\n // Split props\n const {\n font,\n value,\n fontSize,\n textAlign,\n textBaseline,\n ...shapeProps\n } = props;\n // Create shape object\n super({\n ...shapeProps,\n closed: true,\n visible: false, // hide until font is loaded\n path: [{}]\n });\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this.font = font;\n }\n\n updateText() {\n let path = this.font.getTextPath(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n if (path.length == 0) { // zdog doesn't know what to do with empty path arrays\n this.path = [{}];\n this.visible = false;\n } else {\n this.path = path;\n this.visible = true;\n }\n this.updatePath();\n }\n\n set font(newFont) {\n this._font = newFont;\n this.font.waitForLoad().then(() => {\n this.updateText();\n this.visible = true;\n // Find root Zdog.Illustration instance\n let root = this.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n }\n\n get font() {\n return this._font;\n }\n\n set value(newValue) {\n this._value = newValue;\n this.updateText();\n }\n \n get value() {\n return this._value;\n }\n\n set fontSize(newSize) {\n this._fontSize = newSize;\n this.updateText();\n }\n\n get fontSize() {\n return this._fontSize;\n }\n\n set textAlign(newValue) {\n this._textAlign = newValue;\n this.updateText();\n }\n\n get textAlign() {\n return this._textAlign;\n }\n\n set textBaseline(newValue) {\n this._textBaseline = newValue;\n this.updateText();\n }\n\n get textBaseline() {\n return this._textBaseline;\n }\n }\n\n ZdogText.optionKeys = ZdogText.optionKeys.concat(['font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.Text = ZdogText;\n return Zdog;\n}" }, { "path": "src/ZdogTextGroup.js", "content": "export function registerTextGroupClass(Zdog) {\n\n // Zdog.TextGroup class\n class ZdogTextGroup extends Zdog.Group {\n \n constructor(props) {\n // Set missing props to default values\n props = Zdog.extend({\n font: null,\n value: '',\n fontSize: 64,\n textAlign: 'left',\n textBaseline: 'bottom',\n color: '#333',\n fill: false,\n stroke: 1,\n }, props);\n // Split props\n const {\n font,\n value,\n fontSize,\n textAlign,\n textBaseline,\n color,\n fill,\n stroke,\n ...groupProps\n } = props;\n // Create group object\n super({\n ...groupProps,\n visible: false, // hide until font is loaded\n });\n this._font = null;\n this._value = value;\n this._fontSize = fontSize;\n this._textAlign = textAlign;\n this._textBaseline = textBaseline;\n this._color = color;\n this._fill = fill;\n this._stroke = stroke;\n this.font = font;\n }\n\n updateText() {\n // Remove old children\n while (this.children.length > 0) {\n this.removeChild(this.children[0]);\n }\n // Get text paths for each glyph\n const glyphs = this.font.getTextGlyphs(this.value, this.fontSize, 0, 0, 0, this.textAlign, this.textBaseline);\n // Convert glyphs to new shapes\n glyphs.filter(shape => shape.path.length > 0).forEach(shape => {\n this.addChild(new Zdog.Shape({\n translate: shape.translate,\n path: shape.path,\n color: this.color,\n fill: this.fill,\n stroke: this.stroke,\n closed: true,\n }));\n });\n this.updateFlatGraph();\n }\n\n set font(newFont) {\n this._font = newFont;\n this._font.waitForLoad().then(() => {\n this.updateText();\n this.visible = true;\n // Find root Zdog.Illustration instance\n let root = this.addTo;\n while (root.addTo !== undefined) {\n root = root.addTo;\n }\n // Update render graph\n if (root && typeof root.updateRenderGraph === 'function') {\n root.updateRenderGraph();\n }\n });\n }\n\n get font() {\n return this._font;\n }\n\n set value(newValue) {\n this._value = newValue;\n this.updateText();\n }\n \n get value() {\n return this._value;\n }\n\n set fontSize(newSize) {\n this._fontSize = newSize;\n this.updateText();\n }\n\n get fontSize() {\n return this._fontSize;\n }\n\n set textAlign(newValue) {\n this._textAlign = newValue;\n this.updateText();\n }\n\n get textAlign() {\n return this._textAlign;\n }\n\n set textBaseline(newValue) {\n this._textBaseline = newValue;\n this.updateText();\n }\n\n get textBaseline() {\n return this._textBaseline;\n }\n\n set color(newColor) {\n this._color = newColor;\n this.children.forEach(child => child.color = newColor);\n }\n\n get color() {\n return this._color;\n }\n\n set fill(newFill) {\n this._fill = newFill;\n this.children.forEach(child => child.fill = newFill);\n }\n\n get fill() {\n return this._fill;\n }\n\n set stroke(newStroke) {\n this._stroke = newStroke;\n this.children.forEach(child => child.stroke = newStroke);\n }\n\n get stroke() {\n return this._stroke;\n }\n }\n\n ZdogTextGroup.optionKeys = ZdogTextGroup.optionKeys.concat(['color', 'fill', 'stroke', 'font', 'fontSize', 'value', 'textAlign', 'textBaseline']);\n Zdog.TextGroup = ZdogTextGroup;\n return Zdog;\n}" }, { "path": "src/index.js", "content": "import { registerFontClass } from './ZdogFont';\nimport { registerTextClass } from './ZdogText';\nimport { registerTextGroupClass } from './ZdogTextGroup';\n\nexport default {\n init(Zdog) {\n // Global font list to keep track of all fonts\n Zdog.FontList = [];\n\n // Helper to wait for all fonts to load\n Zdog.waitForFonts = function() {\n return Promise.all(Zdog.FontList.map(font => font.waitForLoad()));\n };\n \n // Register Zfont classes onto the Zdog object\n registerFontClass(Zdog);\n registerTextClass(Zdog);\n registerTextGroupClass(Zdog);\n\n return Zdog;\n },\n version: VERSION,\n}\n\n// add dev server flag to the window object\n// this will be stripped in production builds\nif (DEV_SERVER) {\n window.isDevServer = true;\n}" } ]