[ { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nAn SVG snippet that is not sketched correctly or creates an unexpected result.\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: enhancement\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".gitignore", "content": "node_modules\nsample-application/dist\nsvg2roughjs-*.tgz\n.idea\ndist\ndebug.log\nout-tsc\ncoverage\n/nodejs-cli/*.svg" }, { "path": ".prettierignore", "content": "bundled/*\ndist/*\nout-tsc/*" }, { "path": ".prettierrc", "content": "{\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"semi\": false,\n \"singleQuote\": true,\n \"printWidth\": 100,\n \"endOfLine\": \"auto\",\n \"arrowParens\": \"avoid\",\n \"trailingComma\": \"none\"\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"type\": \"chrome\",\n \"request\": \"launch\",\n \"name\": \"Launch Chrome against localhost\",\n \"url\": \"http://localhost:8080\",\n \"webRoot\": \"${workspaceFolder}\"\n }\n ]\n}" }, { "path": ".vscode/settings.json", "content": "{\n \"eslint.validate\": [\"typescript\"]\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, caste, color, religion, or sexual\nidentity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n- Demonstrating empathy and kindness toward other people\n- Being respectful of differing opinions, viewpoints, and experiences\n- Giving and gracefully accepting constructive feedback\n- Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n- Focusing on what is best not just for us as individuals, but for the overall\n community\n\nExamples of unacceptable behavior include:\n\n- The use of sexualized language or imagery, and sexual attention or advances of\n any kind\n- Trolling, insulting or derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or email address,\n without their explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nfskopf@gmail.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.1, available at\n[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder][mozilla coc].\n\nFor answers to common questions about this code of conduct, see the FAQ at\n[https://www.contributor-covenant.org/faq][faq]. Translations are available at\n[https://www.contributor-covenant.org/translations][translations].\n\n[homepage]: https://www.contributor-covenant.org\n[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html\n[mozilla coc]: https://github.com/mozilla/diversity\n[faq]: https://www.contributor-covenant.org/faq\n[translations]: https://www.contributor-covenant.org/translations\n" }, { "path": "LICENSE.md", "content": "Copyright 2022 Fabian Schwarzkopf, Johannes Rössel\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "# svg2rough.js\n\n

\n \"hero-image\"\n

\n\n

\n \"npm\"\n \"github\"\n \"npm\"\n \"npm\"\n

\n\nUtilizes [Rough.js](https://github.com/pshihn/rough) to convert an SVG to a hand-drawn visualization.\n\nTry the sample application [here](https://fskpf.github.io/).\n\n## NPM\n\nInstall from the NPM registry with\n\n```shell\nnpm install --save svg2roughjs\n```\n\n## Usage\n\nJust import `Svg2Roughjs` and instantiate it with an output div in which the\nSVG sketch should be created. Calling `sketch()` outputs the current `svg` to the given element\nas hand-drawn sketch.\n\nFor reference, a [sample application](https://fskpf.github.io/) is provided in\n[`/sample-application/`](https://github.com/fskpf/svg2roughjs/tree/master/sample-application).\n\n### ES Module\n\n```javascript\nimport { Svg2Roughjs } from 'svg2roughjs'\n\nconst svg2roughjs = new Svg2Roughjs('#output-div')\nsvg2roughjs.svg = document.getElementById('input-svg')\nsvg2roughjs.sketch()\n```\n\n### UMD Bundle\n\nAn UMD bundle that ca be loaded via script tags or a module loader e.g.\n[RequireJS](https://requirejs.org/) is included in the NPM package or can\nbe loaded from [unpkg](https://unpkg.com/):\n\n```\nhttps://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js\n```\n\n```javascript\n\n\n\n```\n\n```javascript\n\n\n\n```\n\n## API\n\n### Module Exports\n\n- `Svg2Roughjs`: The main class for the conversion.\n- `OutputType`: An enum that is used to switch between `SVG` and `CANVAS` output when targetting an `HTMLDivElement` as output container.\n\n### Methods\n\n- `constructor(target, outputType?, roughConfig?)`\n\n Creates a new Svg2Rough.js instance.\n\n `target` may either be a container `HTMLDivElement` (or a selector for the container) into which a new sketch should be created, or directly an `SVGSVGElement` or `HTMLCanvasElement` that should be used for the output.\n\n The optional `outputType` defaults to the respective mode if `target` is either `SVGSVGElement` or `HTMLCanvasElement`. If targetting an HTML container element, then `OutputType.SVG` is used by default.\n\n- `sketch(sourceSvgChanged = false): Promise`\n\n Clears the configured `target` element and converts the current `svg2roughj.svg` to a hand-drawn sketch.\n\n Setting `sourceSvgChanged` to `true` re-evaluates the given `svg2roughj.svg` as it was set anew. May be used to re-use the same Svg2Rough.js instance and the same SVG element as source container.\n\n### Properties\n\n| Property | Description | Default |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| `svg` | The given `SVGSVGElement` that should be converted. | `undefined` |\n| `outputType` | Switch between canvas or SVG output. | `OutputType.SVG` |\n| `roughConfig` | [Rough.js options](https://github.com/rough-stuff/rough/wiki#options) object, e.g. to change the fill-style, roughness or bowing. | `{}` |\n| `fontFamily` | Font with which text elements should be drawn.
If set to `null`, the text element's original font-family is used. | `'Comic Sans MS, cursive'` |\n| `backgroundColor` | Sets a background color onto which the sketch is drawn. | `transparent` |\n| `randomize` | Randomize Rough.js' fillWeight, hachureAngle and hachureGap. | `true` |\n| `seed` | Optional, numerical seed for the randomness when creating the sketch. | `null` |\n| `sketchPatterns` | Whether to sketch pattern fills/strokes or just copy them to the output | `true` |\n| `pencilFilter` | Applies a pencil effect on the SVG rendering. | `false` |\n\n## Sample Images\n\nSome sample images with different Svg2rough.js settings. Try it yourself [here](https://fskpf.github.io/).\n\n| SVG | Sketch |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n|
(created with [yEd Live](https://www.yworks.com/yed-live)) |
  |\n|   |   |\n|
(created with [yEd Live](https://www.yworks.com/yed-live)) |
  |\n|   |   |\n|
(created with [yEd Live](https://www.yworks.com/yed-live)) |
  |\n|   |   |\n| | |\n|   |   |\n| | |\n|   |   |\n| | |\n\n## Local Build\n\nTo build the project locally, make sure to have [Node.js](https://nodejs.org/en) installed and run\n\n```\n> npm install\n> npm run build\n```\n\nThis creates a local `/dist/` folder containing both, the ES module and UMD build of `svg2roughjs`.\n\n### Tests\n\nTo perform all tests on the current build, run\n\n```\nnpm run test-all\n```\n\nThis converts all given tests in [`/test/`](https://github.com/fskpf/svg2roughjs/tree/master/test) and\ncompares the output SVG with the expected string. Each test contains a configuration file with different\nsettings and a fixed seed to account for the randomness in the sketched output.\n\n## Credits\n\n- [Rough.js](https://github.com/pshihn/rough) – Draws the hand-drawn elements\n- [svg-pathdata](https://github.com/nfroidure/svg-pathdata) – Parses SVGPathElements\n- [TinyColor](https://github.com/bgrins/TinyColor) – Color manipulation\n\n## License\n\n[MIT License](https://github.com/fskpf/svg2roughjs/blob/master/LICENSE.md) © Fabian Schwarzkopf and Johannes Rössel\n" }, { "path": "eslint.config.js", "content": "import js from '@eslint/js'\nimport tseslint from 'typescript-eslint'\nimport prettier from 'eslint-plugin-prettier/recommended'\n\nexport default [\n js.configs.recommended,\n ...tseslint.configs.recommended,\n prettier,\n {\n rules: {\n '@typescript-eslint/no-non-null-assertion': 'off',\n '@typescript-eslint/no-inferrable-types': 'off',\n '@typescript-eslint/ban-ts-comment': 'off',\n '@typescript-eslint/no-var-requires': 'off',\n // note you must disable the base rule\n // as it can report incorrect errors\n 'no-unused-vars': 'off',\n '@typescript-eslint/no-unused-vars': [\n 'error',\n {\n argsIgnorePattern: '_',\n varsIgnorePattern: '_',\n caughtErrorsIgnorePattern: '_'\n }\n ]\n },\n ignores: ['test/**'],\n files: ['**/*.ts']\n }\n]\n" }, { "path": "nodejs-cli/README.md", "content": "# CLI\n\nCreate sketchs of an SVG on the command-line with [Node.js](https://nodejs.org/)\nand [Puppeteer](https://pptr.dev/).\n\n## Usage\n\nIn `/nodejs-cli/`\n\n```\n> npm install\n> node src/svg2roughjs ../test/complex/bpmn-diagram/test.svg -o ./test.svg\n```\n\n## CLI Parameters\n\nPass the SVG file that should be converted as first parameter.\n\nAdditionally, the following optional options are available:\n\n| Parameter | Description | Default |\n| -------------------------------- | ------------------------------------------ | ------------------------------------------ |\n| `-o`
`--output` | Output path for the resulting sketch. | `'./sketch.svg'` |\n| `--roughConfig.ROUGHJS_PROPERTY` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--fontFamily` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--backgroundColor` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--randomize` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--seed` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--sketchPatterns` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n| `--pencilFilter` | see [svg2roughjs](../README.md#properties) | see [svg2roughjs](../README.md#properties) |\n\nFor example:\n\n```\nnode src/svg2roughjs ../test/complex/bpmn-diagram/test.svg -o ./test.svg --roughConfig.roughness 1.5 --roughConfig.bowing 2 --backgroundColor white --fontFamily null\n```\n\n## Credits\n\n- [Puppeteer](https://pptr.dev/) - Headless browser for Node.js in which the conversion is done\n" }, { "path": "nodejs-cli/package.json", "content": "{\n \"name\": \"svg2roughjs-nodejs\",\n \"version\": \"1.0.0\",\n \"description\": \"An svg2roughjs CLI that runs in Nodejs with a headless browser\",\n \"main\": \"svg2roughjs.js\",\n \"type\": \"module\",\n \"scripts\": {\n \"test\": \"node src/svg2roughjs ../test/complex/bpmn-diagram/test.svg -o ./test.svg --roughConfig.roughness 1.5 --roughConfig.bowing 2 --backgroundColor white\"\n },\n \"author\": \"Fabian Schwarzkopf\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"minimist\": \"^1.2.8\",\n \"puppeteer\": \"^24.37.5\"\n }\n}\n" }, { "path": "nodejs-cli/src/svg2roughjs-page.js", "content": "/**\n * @param {string} inputSvg The SVG that should be converted\n * @param {Record} svg2roughjsArgs The SVG that should be converted\n * @returns {string} HTML content of the converter page\n */\nexport function svg2roughjsPage(inputSvg, svg2roughjsArgs) {\n return `\n\n\n\n \n svg2roughjs\n \n\n\n
${inputSvg}
\n
\n \n\n\n`\n}\n\n/**\n * @param {Record} args\n * @returns {string}\n */\nfunction createSvg2RoughjsInstance(args) {\n let instance = \"const svgConverter = new Svg2Roughjs('#output-container', OutputType.SVG)\"\n for (const [key, value] of Object.entries(args)) {\n if (typeof value === 'string') {\n instance += `\\nsvgConverter.${key} = '${value}'`\n } else if (typeof value === 'object') {\n instance += `\\nsvgConverter.${key} = ${JSON.stringify(value)}`\n } else {\n instance += `\\nsvgConverter.${key} = ${value}`\n }\n }\n return instance\n}\n" }, { "path": "nodejs-cli/src/svg2roughjs.js", "content": "import puppeteer from 'puppeteer'\nimport minimist from 'minimist'\nimport fs from 'fs'\nimport { svg2roughjsPage } from './svg2roughjs-page.js'\n;(async () => {\n const argv = minimist(process.argv.slice(2), {\n string: ['backgroundColor', 'fontFamily'],\n boolean: ['randomize', 'sketchPatterns', 'pencilFilter'],\n alias: {\n o: 'output'\n }\n })\n\n const inputSvg = loadInputSvg(argv)\n\n const browser = await puppeteer.launch({ headless: 'new' })\n const page = await browser.newPage()\n\n // load the input SVG as part of the HTML file and run svg2roughjs on the input\n const svg2roughjsArgs = getSvg2RoughjsArgs(argv)\n await page.setContent(svg2roughjsPage(inputSvg, svg2roughjsArgs))\n\n // get the sketch from the DOM\n const sketch = await page.$eval('#output-container > svg', el => el.outerHTML)\n\n const outputFilePath = argv.output\n saveSketch(sketch, outputFilePath)\n\n // for debugging, disable close and use headless: false\n await browser.close()\n})()\n\n/**\n * Loads the input SVG from the CLI.\n * @param {object} argv The CLI arguments\n * @returns {string} The content of the input file\n */\nfunction loadInputSvg(argv) {\n const inputFile = argv._[0]\n if (!inputFile) {\n throw new Error('No input file provided. Please pass the input SVG as first parameter.')\n }\n\n if (!fs.existsSync(inputFile)) {\n throw new Error(`File \"${inputFile}\" does not exist.`)\n }\n\n const content = fs.readFileSync(inputFile, 'utf8')\n\n // TODO validate as SVG?\n\n return content\n}\n\n/**\n * Downloads the sketch as file.\n * @param {string} content The SVG string of the sketch\n * @param {string?} outputFilePath The file path to save the output to.\n */\nfunction saveSketch(content, outputFilePath) {\n if (!content) {\n throw new Error('Could not save file, no sketch given.')\n }\n // TODO validate SVG?\n\n fs.writeFileSync(outputFilePath ?? './sketch.svg', content)\n}\n\nfunction getSvg2RoughjsArgs(argv) {\n const args = { ...argv }\n // remove arguments for the CLI\n delete args._\n delete args.o\n delete args.output\n\n return Object.fromEntries(\n Object.entries(args).map(([key, value]) => {\n // replace null arguments with the actual null value\n if (value === 'null') {\n return [key, null]\n }\n return [key, value]\n })\n )\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"svg2roughjs\",\n \"version\": \"3.2.3\",\n \"description\": \"Leverages Rough.js to convert SVGs to a hand-drawn, sketchy representation\",\n \"author\": \"Fabian Schwarzkopf\",\n \"contributors\": [\n \"Johannes Rössel\"\n ],\n \"type\": \"module\",\n \"main\": \"dist/svg2roughjs.umd.min.js\",\n \"browser\": \"dist/svg2roughjs.es.min.js\",\n \"module\": \"dist/svg2roughjs.es.min.js\",\n \"types\": \"dist/index.d.ts\",\n \"homepage\": \"https://github.com/fskpf/svg2roughjs#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/fskpf/svg2roughjs.git\"\n },\n \"keywords\": [\n \"svg\",\n \"roughjs\",\n \"javascript\",\n \"hand-drawn\",\n \"sketch\"\n ],\n \"license\": \"MIT\",\n \"scripts\": {\n \"prepare\": \"npm run lint && npm run build\",\n \"build\": \"npm run clean && tsc && rollup -c rollup.config.js\",\n \"clean\": \"rimraf -g *.tgz && rimraf dist/ && rimraf out-tsc/\",\n \"lint\": \"eslint ./src\",\n \"tsc\": \"tsc --noEmit\",\n \"test-all\": \"npm run clean && tsc && wtr\"\n },\n \"files\": [\n \"dist/*\",\n \"LICENSE.md\",\n \"README.md\"\n ],\n \"dependencies\": {\n \"roughjs\": \"^4.6.6\",\n \"svg-pathdata\": \"^8.0.0\",\n \"tinycolor2\": \"^1.6.0\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^10.0.1\",\n \"@open-wc/testing\": \"4.0.0\",\n \"@rollup/plugin-commonjs\": \"^29.0.0\",\n \"@rollup/plugin-node-resolve\": \"^16.0.3\",\n \"@rollup/plugin-terser\": \"^1.0.0\",\n \"@types/node\": \"^25.3.2\",\n \"@types/tinycolor2\": \"^1.4.6\",\n \"@web/dev-server-rollup\": \"0.6.4\",\n \"@web/test-runner\": \"0.18.3\",\n \"eslint\": \"^10.0.2\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-plugin-prettier\": \"^5.5.5\",\n \"prettier\": \"3.8.1\",\n \"rimraf\": \"^6.1.3\",\n \"rollup\": \"^4.59.0\",\n \"rollup-plugin-dts\": \"^6.3.0\",\n \"typescript\": \"^5.9.3\",\n \"typescript-eslint\": \"^8.56.1\"\n }\n}\n" }, { "path": "rollup.config.js", "content": "import commonjs from '@rollup/plugin-commonjs'\nimport resolve from '@rollup/plugin-node-resolve'\nimport dts from 'rollup-plugin-dts'\nimport terser from '@rollup/plugin-terser'\nimport fs from 'fs'\n\nconst pkg = JSON.parse(fs.readFileSync('./package.json'))\n\nfunction matchSubmodules(externals) {\n return externals.map(e => new RegExp(`^${e}(?:[/\\\\\\\\]|$)`))\n}\n\nconst externalsUmd = matchSubmodules([\n ...Object.keys(pkg.peerDependencies || {}),\n ...Object.keys(pkg.optionalDependencies || {})\n])\nconst externals = matchSubmodules([...Object.keys(pkg.dependencies || {}), ...externalsUmd])\n\nconst es = {\n input: 'out-tsc/index.js',\n output: [\n {\n file: pkg.module.replace('.min', ''),\n format: 'es',\n name: 'svg2roughjs',\n sourcemap: true,\n plugins: []\n },\n {\n file: pkg.module,\n format: 'es',\n name: 'svg2roughjs',\n sourcemap: true,\n plugins: [terser({})]\n }\n ],\n external: externals,\n plugins: []\n}\n\nconst umd = {\n input: 'out-tsc/index.js',\n output: [\n {\n file: pkg.browser.replace('.es.min.', '.umd.'),\n format: 'umd',\n name: 'svg2roughjs',\n sourcemap: true,\n plugins: []\n },\n {\n file: pkg.browser.replace('.es.', '.umd.'),\n format: 'umd',\n name: 'svg2roughjs',\n sourcemap: true,\n plugins: [terser({})]\n }\n ],\n external: externalsUmd,\n plugins: [commonjs(), resolve()]\n}\n\nconst typings = {\n input: 'out-tsc/index.d.ts',\n output: [{ file: 'dist/index.d.ts', format: 'es' }],\n plugins: [dts()]\n}\n\nexport default [es, umd, typings]\n" }, { "path": "sample-application/index.html", "content": "\n\n\n\n \n \n \n \n\n Svg2Rough.js - Convert Your SVG to a Hand Drawn Image\n\n\n\n\n
\n \"W3C\n
\n

Svg2Rough.js

\n on GitHub\n
\n \"Sketchy\n
\n\n
\n
\n

Drawing Options

\n\n
\n\n \n \n
\n\n \n \n
\n\n \n \n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n\n
\n\n
\n\n \n \n\n \n \n \n \n \n
\n \n \n \n \n
\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n \n\n\n\n" }, { "path": "sample-application/package.json", "content": "{\n \"name\": \"svg2roughjs-sample\",\n \"description\": \"A simple sample application to test and try svg2roughjs\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\"\n },\n \"author\": \"Fabian Schwarzkopf\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@codemirror/lang-xml\": \"^6.1.0\",\n \"codemirror\": \"^6.0.2\"\n },\n \"devDependencies\": {\n \"@types/codemirror\": \"^5.60.17\",\n \"prettier\": \"3.8.1\",\n \"typescript\": \"^5.9.3\",\n \"vite\": \"^7.3.1\"\n }\n}\n" }, { "path": "sample-application/src/assets/styles.css", "content": "body * {\n box-sizing: border-box;\n}\n\nbody {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n color: #2a333d;\n}\n\n#preview {\n display: flex;\n flex-direction: column;\n overflow: auto;\n width: 100%;\n}\n\n#input {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n background-color: white;\n}\n\n.header {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px 0;\n width: 100%;\n background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);\n}\n\n.header-img {\n width: 100px;\n height: 100px;\n margin: 0 40px;\n}\n\n.title {\n text-align: center;\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.title h1 {\n margin-bottom: 5px;\n font-weight: bold;\n letter-spacing: 5px;\n font-size: 35px;\n}\n\na:link,\na:visited,\na:hover,\na:active {\n color: #fff;\n text-decoration: none;\n}\n\n.sidebar {\n border-right: 1px solid rgba(0, 0, 0, 0.14);\n display: flex;\n flex-direction: column;\n padding: 0 15px;\n flex: 0 0 200px;\n}\n\n.sidebar h2 {\n margin: 10px 0;\n font-size: 18px;\n text-align: center;\n letter-spacing: 1px;\n}\n\n.toolbar {\n display: flex;\n justify-items: center;\n align-items: center;\n flex-wrap: wrap;\n padding: 5px 10px;\n}\n\n.toolbar > * {\n margin: 2px 5px;\n}\n\n.toolbar input.toggle-btn:checked:hover + label {\n background-color: #b2b2b2;\n}\n\n.toolbar label.toggle-btn:hover,\n.toolbar input.toggle-btn:checked + label {\n background-color: #dedede;\n}\n\nlabel {\n user-select: none;\n}\n\n.icon {\n display: block;\n width: 32px;\n height: 32px;\n background-repeat: no-repeat;\n background-position: center;\n border: none;\n cursor: pointer;\n background-size: 24px;\n border-radius: 5px;\n}\n\n.icon-raw {\n background-image: url('./raw-source.svg');\n}\n\n.icon-flask {\n background-image: url('./flask.svg');\n}\n\n.icon-chevron-left {\n background-image: url('./chevron-left.svg');\n}\n\n.icon-chevron-right {\n background-image: url('./chevron-right.svg');\n}\n\n.toggle-btn {\n display: none;\n}\n\n.main {\n position: absolute;\n top: 140px;\n right: 0;\n left: 0;\n bottom: 0;\n overflow: hidden;\n display: flex;\n}\n\n.content-container {\n overflow: hidden;\n height: 100%;\n position: relative;\n display: flex;\n}\n\n.raw-svg-container {\n flex: 0 0 40%;\n overflow: auto;\n border-right: 1px solid rgba(0, 0, 0, 0.14);\n transition: flex-basis 0.2s ease-in-out;\n}\n\n.raw-svg-container.hidden {\n flex-basis: 0;\n}\n\n.raw-svg-container .CodeMirror {\n height: 100%;\n}\n\n.image-container {\n flex: 1 1 auto;\n overflow: auto;\n position: relative;\n}\n\n.separator {\n border-top: 1px solid rgba(0, 0, 0, 0.14);\n margin: 15px 20px;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n}\n\n.checkbox input {\n margin: 8px;\n}\n\n.checkbox * {\n cursor: pointer;\n}\n\nlabel[for='opacity'] {\n cursor: pointer;\n}\n\n.icon-button {\n width: 24px;\n height: 24px;\n padding: 3px;\n margin: 0 6px;\n}\n\n.icon-button .icon {\n width: 100%;\n height: 100%;\n background-size: contain;\n}\n\n#local-testing {\n margin: 0 0 0 auto;\n display: flex;\n align-items: center;\n}\n" }, { "path": "sample-application/src/index.ts", "content": "import './assets/styles.css'\nimport { EditorView } from 'codemirror'\nimport { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'\nimport { lineNumbers } from '@codemirror/view'\nimport { xml } from '@codemirror/lang-xml'\n\nimport SAMPLE_BPMN from './samples/bpmn1.svg?raw'\nimport SAMPLE_COMPUTER_NETWORK from './samples/computer-network.svg?raw'\nimport SAMPLE_FLOWCHART from './samples/flowchart4.svg?raw'\nimport SAMPLE_HIERARCHICAL1 from './samples/hierarchical1.svg?raw'\nimport SAMPLE_HIERARCHICAL2 from './samples/hierarchical2.svg?raw'\nimport SAMPLE_MINDMAP from './samples/mindmap.svg?raw'\nimport SAMPLE_MOVIES from './samples/movies.svg?raw'\nimport SAMPLE_ORGANIC1 from './samples/organic1.svg?raw'\nimport SAMPLE_ORGANIC2 from './samples/organic2.svg?raw'\nimport SAMPLE_TREE from './samples/tree1.svg?raw'\nimport SAMPLE_VENN from './samples/venn.svg?raw'\n\n// debug lib import for better debugging...\nimport { OutputType, Svg2Roughjs } from '../../src/index'\nimport { initializeTestUI } from './testing'\n\nlet svg2roughjs: Svg2Roughjs\nlet loadingSvg = false\nlet scheduledLoad: string | null = null\nlet debouncedTimer: ReturnType | null = null\nlet codeMirror: EditorView\nlet silentCodeMirrorChange = false\n\n// just for easier access, it's a debug project, so who cares...\nconst patternsCheckbox = document.getElementById('sketchPatterns') as HTMLInputElement\nconst pencilCheckbox = document.getElementById('pencilFilter') as HTMLInputElement\nconst sampleSelect = document.getElementById('sample-select') as HTMLSelectElement\nconst codeContainer = document.querySelector('.raw-svg-container') as HTMLDivElement\nconst fillStyleSelect = document.getElementById('fill-style') as HTMLSelectElement\nconst outputFormatSelect = document.getElementById('output-format') as HTMLSelectElement\nconst roughnessInput = document.getElementById('roughness-input') as HTMLInputElement\nconst bowingInput = document.getElementById('bowing-input') as HTMLInputElement\nconst opacityInput = document.getElementById('opacity') as HTMLInputElement\nconst fileInput = document.getElementById('file-chooser') as HTMLInputElement\nconst originalFontCheckbox = document.getElementById('original-font') as HTMLInputElement\nconst randomizeCheckbox = document.getElementById('randomize') as HTMLInputElement\n\nconst onCodeMirrorChange = (newCode: string) => {\n if (debouncedTimer) {\n clearTimeout(debouncedTimer)\n }\n debouncedTimer = setTimeout(() => {\n debouncedTimer = null\n try {\n loadSvgString(newCode)\n } catch (_) {\n /* do nothing */\n }\n }, 500)\n}\n\n/**\n * Sets CodeMirror content without triggering the change listener\n */\nfunction setCodeMirrorValue(value: string) {\n silentCodeMirrorChange = true\n codeMirror.dispatch({\n changes: { from: 0, to: codeMirror.state.doc.length, insert: value }\n })\n}\n\nfunction getSvgSize(svg: SVGSVGElement): { width: number; height: number } {\n let width, height\n const hasViewbox = svg.hasAttribute('viewBox')\n if (svg.hasAttribute('width')) {\n // percantage sizes for the root SVG are unclear, thus use viewBox if available\n if (svg.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE && hasViewbox) {\n width = svg.viewBox.baseVal.width\n } else {\n width = svg.width.baseVal.value\n }\n } else if (hasViewbox) {\n width = svg.viewBox.baseVal.width\n } else {\n width = 300\n }\n\n if (svg.hasAttribute('height')) {\n // percantage sizes for the root SVG are unclear, thus use viewBox if available\n if (svg.height.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE && hasViewbox) {\n height = svg.viewBox.baseVal.height\n } else {\n height = svg.height.baseVal.value\n }\n } else if (hasViewbox) {\n height = svg.viewBox.baseVal.height\n } else {\n height = 150\n }\n\n return { width, height }\n}\n\nexport function loadSvgString(fileContent: string) {\n if (loadingSvg) {\n scheduledLoad = fileContent\n return\n }\n setUIState(false)\n\n loadingSvg = true\n\n const inputElement = document.getElementById('input')!\n const outputElement = document.getElementById('output')!\n const canvas = outputElement.querySelector('canvas')\n\n const parser = new DOMParser()\n const doc = parser.parseFromString(fileContent, 'image/svg+xml')\n const svg = doc.querySelector('svg')\n\n while (inputElement.childElementCount > 0) {\n inputElement.removeChild(inputElement.firstChild!)\n }\n\n if (!svg) {\n console.error('Could not load SVG file')\n setUIState(true)\n loadingSvg = false\n return\n }\n\n const svgSize = getSvgSize(svg)\n if (svgSize) {\n inputElement.style.width = `${svgSize.width}px`\n inputElement.style.height = `${svgSize.height}px`\n }\n inputElement.appendChild(svg)\n\n // make sure the SVG is part of the DOM and rendered, before it is converted by\n // Svg2Rough.js. Otherwise, CSS percentaged width/height might not be applied yet\n setTimeout(async () => {\n if (svg.tagName === 'HTML') {\n console.error('Error parsing XML')\n inputElement.style.opacity = '1'\n inputElement.style.width = '100%'\n inputElement.style.height = '100%'\n if (canvas) {\n canvas.style.opacity = '0'\n }\n } else {\n const opacityInput = document.getElementById('opacity') as HTMLInputElement\n inputElement.style.opacity = opacityInput.value\n if (canvas) {\n canvas.style.opacity = '1'\n }\n try {\n svg2roughjs.svg = svg\n await svg2roughjs.sketch()\n } catch (e) {\n console.error(\"Couldn't sketch content\")\n throw e // re-throw to show error on console\n } finally {\n setUIState(true)\n loadingSvg = false\n }\n\n // maybe there was a load during the rendering.. so load this instead\n if (scheduledLoad) {\n loadSvgString(scheduledLoad)\n scheduledLoad = null\n }\n }\n }, 0)\n}\n\nfunction loadSample(sample: string) {\n let sampleString = ''\n switch (sample) {\n case 'bpmn1':\n sampleString = SAMPLE_BPMN\n break\n case 'computer-network':\n sampleString = SAMPLE_COMPUTER_NETWORK\n break\n case 'flowchart4':\n sampleString = SAMPLE_FLOWCHART\n break\n case 'hierarchical1':\n sampleString = SAMPLE_HIERARCHICAL1\n break\n case 'hierarchical2':\n sampleString = SAMPLE_HIERARCHICAL2\n break\n case 'mindmap':\n sampleString = SAMPLE_MINDMAP\n break\n case 'movies':\n sampleString = SAMPLE_MOVIES\n break\n case 'organic1':\n sampleString = SAMPLE_ORGANIC1\n break\n case 'organic2':\n sampleString = SAMPLE_ORGANIC2\n break\n case 'tree1':\n sampleString = SAMPLE_TREE\n break\n case 'venn':\n sampleString = SAMPLE_VENN\n break\n }\n\n setCodeMirrorValue(sampleString)\n\n loadSvgString(sampleString)\n}\n\nfunction updateOpacity(inputContainerOpacity: number) {\n const inputContainer = document.getElementById('input')!\n const outputContainer = document.getElementById('output')!\n inputContainer.style.opacity = `${inputContainerOpacity}`\n outputContainer.style.opacity = `${1 - inputContainerOpacity}`\n}\n\nfunction run() {\n svg2roughjs = new Svg2Roughjs('#output', OutputType.SVG)\n svg2roughjs.backgroundColor = 'white'\n svg2roughjs.pencilFilter = !!pencilCheckbox.checked\n svg2roughjs.sketchPatterns = !!patternsCheckbox.checked\n svg2roughjs.roughConfig = {\n bowing: parseInt(bowingInput.value),\n roughness: parseInt(roughnessInput.value),\n fillStyle: fillStyleSelect.value\n }\n sampleSelect.addEventListener('change', () => {\n loadSample(sampleSelect.value)\n })\n\n const toggleSourceBtn = document.getElementById('source-toggle') as HTMLInputElement\n toggleSourceBtn.addEventListener('change', () => {\n if (toggleSourceBtn.checked) {\n codeContainer.classList.remove('hidden')\n setTimeout(() => {\n codeMirror.requestMeasure()\n codeMirror.focus()\n }, 20)\n } else {\n codeContainer.classList.add('hidden')\n }\n })\n\n codeMirror = new EditorView({\n parent: codeContainer,\n extensions: [\n lineNumbers(),\n xml(),\n syntaxHighlighting(defaultHighlightStyle),\n EditorView.updateListener.of(e => {\n if (e.docChanged && !silentCodeMirrorChange) {\n onCodeMirrorChange(e.state.doc.toString())\n }\n silentCodeMirrorChange = false\n })\n ]\n })\n\n // codeMirrorInstance = CodeMirror(codeContainer, {\n // mode: 'xml',\n // lineNumbers: true\n // })\n\n // make sure codemirror is rendered when the expand animation has finished\n codeContainer.addEventListener('transitionend', () => {\n if (toggleSourceBtn.checked) {\n codeMirror.requestMeasure()\n codeMirror.focus()\n }\n })\n\n // pre-select a sample\n sampleSelect.selectedIndex = 0\n loadSample(sampleSelect.value)\n\n outputFormatSelect.addEventListener('change', async () => {\n setUIState(false)\n svg2roughjs.outputType = outputFormatSelect.value === 'svg' ? OutputType.SVG : OutputType.CANVAS\n await svg2roughjs.sketch()\n setUIState(true)\n })\n fillStyleSelect.addEventListener('change', async () => {\n svg2roughjs.roughConfig = {\n bowing: parseInt(bowingInput.value),\n roughness: parseInt(roughnessInput.value),\n fillStyle: fillStyleSelect.value\n }\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n roughnessInput.addEventListener('change', async () => {\n svg2roughjs.roughConfig = {\n bowing: parseInt(bowingInput.value),\n roughness: parseInt(roughnessInput.value),\n fillStyle: fillStyleSelect.value\n }\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n bowingInput.addEventListener('change', async () => {\n svg2roughjs.roughConfig = {\n bowing: parseInt(bowingInput.value),\n roughness: parseInt(roughnessInput.value),\n fillStyle: fillStyleSelect.value\n }\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n\n opacityInput.addEventListener('change', () => {\n updateOpacity(parseFloat(opacityInput.value))\n })\n const opacityLabel = document.querySelector('label[for=opacity]') as HTMLLabelElement\n opacityLabel.addEventListener('click', () => {\n const currentOpacity = parseFloat(opacityInput.value)\n const newOpacity = currentOpacity < 1 ? 1 : 0\n opacityInput.value = `${newOpacity}`\n updateOpacity(newOpacity)\n })\n\n function loadFile(file: File) {\n const reader = new FileReader()\n reader.readAsText(file)\n reader.addEventListener('load', () => {\n const fileContent = reader.result as string\n setCodeMirrorValue(fileContent)\n loadSvgString(fileContent)\n })\n }\n\n fileInput.addEventListener('change', () => {\n const files = fileInput.files\n if (files && files.length > 0) {\n loadFile(files[0])\n }\n })\n\n const body = document.getElementsByTagName('body')[0]\n body.addEventListener('dragover', e => {\n e.preventDefault()\n })\n body.addEventListener('drop', e => {\n e.preventDefault()\n if (e.dataTransfer && e.dataTransfer.items) {\n for (let i = 0; i < e.dataTransfer.items.length; i++) {\n if (e.dataTransfer.items[i].kind === 'file') {\n const file = e.dataTransfer.items[i].getAsFile()\n if (file) {\n loadFile(file)\n }\n return\n }\n }\n } else if (e.dataTransfer) {\n // Use DataTransfer interface to access the file(s)\n for (let i = 0; i < e.dataTransfer.files.length; i++) {\n loadFile(e.dataTransfer.files[i])\n return\n }\n }\n })\n\n const downloadBtn = document.getElementById('download-btn') as HTMLButtonElement\n downloadBtn.addEventListener('click', () => {\n const link = document.createElement('a')\n\n if (svg2roughjs.outputType === OutputType.CANVAS) {\n const canvas = document.querySelector('#output canvas') as HTMLCanvasElement\n const image = canvas.toDataURL('image/png', 1.0).replace('image/png', 'image/octet-stream')\n link.download = 'svg2roughjs.png'\n link.href = image\n } else {\n const serializer = new XMLSerializer()\n const svg = document.querySelector('#output svg') as SVGSVGElement\n let svgString = serializer.serializeToString(svg)\n svgString = '\\r\\n' + svgString\n const svgBlob = new Blob([svgString], { type: 'image/svg+xml' })\n link.download = 'svg2roughjs.svg'\n link.href = URL.createObjectURL(svgBlob)\n }\n\n link.click()\n })\n\n initializeTestUI(svg2roughjs)\n\n originalFontCheckbox.addEventListener('change', async () => {\n if (originalFontCheckbox.checked) {\n svg2roughjs.fontFamily = null\n } else {\n svg2roughjs.fontFamily = 'Comic Sans MS, cursive'\n }\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n\n randomizeCheckbox.addEventListener('change', async () => {\n svg2roughjs.randomize = !!randomizeCheckbox.checked\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n pencilCheckbox.addEventListener('change', async () => {\n svg2roughjs.pencilFilter = !!pencilCheckbox.checked\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n patternsCheckbox.addEventListener('change', async () => {\n svg2roughjs.sketchPatterns = !!patternsCheckbox.checked\n setUIState(false)\n await svg2roughjs.sketch()\n setUIState(true)\n })\n}\n\nfunction setUIState(enabled: boolean) {\n const elements = [\n patternsCheckbox,\n pencilCheckbox,\n sampleSelect,\n fillStyleSelect,\n outputFormatSelect,\n roughnessInput,\n bowingInput,\n opacityInput,\n fileInput,\n originalFontCheckbox,\n randomizeCheckbox\n ]\n\n for (const ele of elements) {\n ele.disabled = !enabled\n }\n}\n\nrun()\n" }, { "path": "sample-application/src/testing.ts", "content": "import { OutputType, Svg2Roughjs } from '../../src/index'\nimport { downloadFile } from './utils'\nimport { specTests } from '../../test/tests.js'\nimport { loadSvgString } from './index'\n\nconst localTestsContainer = document.getElementById('local-testing') as HTMLDivElement\nconst downloadTestcaseBtn = document.getElementById('download-testcase') as HTMLButtonElement\nconst testcaseSelect = document.getElementById('select-testcase') as HTMLSelectElement\nconst prevTestcaseBtn = document.getElementById('prev-testcase') as HTMLButtonElement\nconst nextTestcaseBtn = document.getElementById('next-testcase') as HTMLButtonElement\n\nexport function initializeTestUI(svg2roughjs: Svg2Roughjs) {\n if (location.hostname !== 'localhost') {\n localTestsContainer.style.display = 'none'\n }\n\n for (const testName of specTests) {\n const option = document.createElement('option')\n option.value = testName\n option.text = testName\n testcaseSelect.appendChild(option)\n }\n\n testcaseSelect.addEventListener('change', e =>\n onTestcaseChange((e.target as HTMLOptionElement).value)\n )\n prevTestcaseBtn.addEventListener('click', () => {\n const idx = testcaseSelect.selectedIndex\n if (idx > 1) {\n testcaseSelect.selectedIndex = idx - 1\n }\n onTestcaseChange(testcaseSelect.options[testcaseSelect.selectedIndex].value)\n })\n nextTestcaseBtn.addEventListener('click', () => {\n const idx = testcaseSelect.selectedIndex\n if (idx < testcaseSelect.childElementCount - 1) {\n testcaseSelect.selectedIndex = idx + 1\n }\n onTestcaseChange(testcaseSelect.options[testcaseSelect.selectedIndex].value)\n })\n downloadTestcaseBtn.addEventListener('click', () => downloadTestcase(svg2roughjs))\n}\n\nasync function onTestcaseChange(testName: string) {\n const svgString = loadSvg(`/specs/${testName}/test.svg`)\n loadSvgString(svgString)\n}\n\nfunction loadSvg(url: string) {\n const request = new XMLHttpRequest()\n request.open('GET', url, false)\n request.overrideMimeType('text/plain; charset=utf-8')\n request.send()\n if (request.status !== 200) {\n throw new Error(`Unable to fetch ${url}, status code: ${request.status}`)\n }\n return request.responseText\n}\n\nfunction isExistingTestcase(testcase: string): boolean {\n return specTests.indexOf(testcase) !== -1\n}\n\n/**\n * Creates a reproducible testcase\n */\nasync function downloadTestcase(svg2roughjs: Svg2Roughjs) {\n const prevRandomize = svg2roughjs.randomize\n const prevPencilFilter = svg2roughjs.pencilFilter\n const prevOutputType = svg2roughjs.outputType\n const prevSketchPatters = svg2roughjs.sketchPatterns\n const prevConfig = Object.assign({}, svg2roughjs.roughConfig)\n svg2roughjs.randomize = false\n svg2roughjs.pencilFilter = false\n svg2roughjs.sketchPatterns = true\n svg2roughjs.outputType = OutputType.SVG\n svg2roughjs.backgroundColor = 'white'\n svg2roughjs.roughConfig = {\n ...svg2roughjs.roughConfig,\n fixedDecimalPlaceDigits: 3,\n fillStyle: 'solid', // just use solid for tests, to make the more stable on lib changes\n seed: 4242\n }\n await svg2roughjs.sketch()\n const serializer = new XMLSerializer()\n\n const testcaseName = testcaseSelect.options[testcaseSelect.selectedIndex].value\n if (!isExistingTestcase(testcaseName)) {\n const test = document.querySelector('#input svg') as SVGSVGElement\n let inputSvg = serializer.serializeToString(test)\n inputSvg = '\\r\\n' + inputSvg\n downloadFile(inputSvg, 'image/svg+xml', 'test.svg')\n }\n\n const spec = document.querySelector('#output svg') as SVGSVGElement\n let sketchedSvg = serializer.serializeToString(spec)\n sketchedSvg = '\\r\\n' + sketchedSvg\n downloadFile(sketchedSvg, 'image/svg+xml', 'expect.svg')\n const config = {\n roughConfig: svg2roughjs.roughConfig,\n outputType: svg2roughjs.outputType,\n pencilFilter: svg2roughjs.pencilFilter,\n sketchPatterns: svg2roughjs.sketchPatterns,\n backgroundColor: 'white'\n }\n downloadFile(JSON.stringify(config), 'text/json', 'config.json')\n // reset state to before testcase creation\n svg2roughjs.randomize = prevRandomize\n svg2roughjs.pencilFilter = prevPencilFilter\n svg2roughjs.outputType = prevOutputType\n svg2roughjs.sketchPatterns = prevSketchPatters\n svg2roughjs.roughConfig = prevConfig\n await svg2roughjs.sketch()\n}\n" }, { "path": "sample-application/src/types.d.ts", "content": "declare module '*.svg' {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const content: any\n export default content\n}\n" }, { "path": "sample-application/src/utils.ts", "content": "export function downloadFile(content: string, mime: string, fileName: string) {\n const link = document.createElement('a')\n const configBlob = new Blob([content], { type: mime })\n link.download = fileName\n link.href = URL.createObjectURL(configBlob)\n link.click()\n}\n" }, { "path": "sample-application/src/vite-env.d.ts", "content": "/// \n" }, { "path": "sample-application/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"module\": \"ESNext\",\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noImplicitAny\": false\n },\n \"include\": [\"../dist/index.d.ts\", \"src/types.d.ts\", \"src/**/*.ts\"]\n}\n" }, { "path": "sample-application/vite.config.js", "content": "import { defineConfig } from 'vite'\n\nexport default defineConfig({\n publicDir: '../test/'\n})\n" }, { "path": "src/OutputType.ts", "content": "export enum OutputType {\n SVG,\n CANVAS\n}\n" }, { "path": "src/RandomNumberGenerator.ts", "content": "import { Random } from 'roughjs/bin/math'\n\n/**\n * A simple random number generator that allows for seeding.\n */\nexport class RandomNumberGenerator {\n private readonly rng: Random | null\n constructor(seed: number | null) {\n // since we already depend on Rough.js, we may just use its seedable RNG implementation\n this.rng = seed ? new Random(seed) : null\n }\n\n /**\n * Returns a random number in the given range.\n */\n next(range?: [number, number]): number {\n const rnd = this.rng?.next() ?? Math.random()\n if (range) {\n const min = range[0]\n const max = range[1]\n return rnd * (max - min) + min\n }\n return rnd\n }\n}\n" }, { "path": "src/Svg2Roughjs.ts", "content": "import { Options } from 'roughjs/bin/core'\nimport rough from 'roughjs/bin/rough'\nimport { OutputType } from './OutputType'\nimport { processRoot } from './processor'\nimport { createPencilFilter } from './styles/textures'\nimport { RenderContext } from './types'\nimport { getDefsElement } from './utils'\nimport { RandomNumberGenerator } from './RandomNumberGenerator'\n\n/**\n * Svg2Roughjs parses an SVG and converts it to a hand-drawn sketch.\n */\nexport class Svg2Roughjs {\n /**\n * Optional solid background color with which the canvas should be initialized.\n * It is drawn on a transparent canvas by default.\n */\n backgroundColor: string | null = null\n\n /**\n * Set a font-family for the rendering of text elements.\n * If set to `null`, then the font-family of the SVGTextElement is used.\n * By default, 'Comic Sans MS, cursive' is used.\n */\n fontFamily: string | null = 'Comic Sans MS, cursive'\n\n /**\n * Whether to randomize Rough.js' fillWeight, hachureAngle and hachureGap.\n * Also randomizes the disableMultiStroke option of Rough.js.\n * The randomness may be seeded with the `seed` property.\n * By default `true`.\n */\n randomize: boolean = true\n\n /**\n * Optional seed for the randomness when creating the sketch.\n * Providing a value implicitly seeds Rough.js which may be overwritten\n * by provding a different seed with the optional `roughConfig` property.\n * By default `null`.\n */\n seed: number | null = null\n\n /**\n * Whether pattern elements should be sketched or just copied to the output.\n * For smaller pattern base sizes, it's often beneficial to just copy it over\n * as the sketch will be too smalle to actually look sketched at all.\n */\n sketchPatterns: boolean = true\n\n /**\n * Whether to apply a pencil filter.\n */\n pencilFilter: boolean = false\n\n private $svg?: SVGSVGElement\n private width: number = 0\n private height: number = 0\n private $outputType: OutputType\n private $roughConfig: Options = {}\n private idElements: Record = {}\n\n private outputElement: Element\n private lastResult: SVGSVGElement | HTMLCanvasElement | null = null\n\n /**\n * Set the SVG that should be sketched.\n */\n set svg(svg: SVGSVGElement) {\n if (this.$svg !== svg) {\n this.$svg = svg\n this.sourceSvgChanged()\n }\n }\n\n /**\n * Returns the SVG that should be sketched.\n */\n get svg(): SVGSVGElement | undefined {\n return this.$svg\n }\n\n /**\n * Sets the output format of the sketch.\n *\n * Applies only to instances that have been created with a\n * container as output element instead of an actual SVG or canvas\n * element.\n *\n * Throws when the given mode does not match the output element\n * with which this instance was created.\n */\n set outputType(type: OutputType) {\n if (this.$outputType === type) {\n return\n }\n\n const incompatible =\n (type === OutputType.CANVAS && this.outputElement instanceof SVGSVGElement) ||\n (type === OutputType.SVG && this.outputElement instanceof HTMLCanvasElement)\n if (incompatible) {\n throw new Error(\n `Output format ${type} incompatible with given output element ${this.outputElement.tagName}`\n )\n }\n\n this.$outputType = type\n }\n\n /**\n * Returns the currently configured output type.\n */\n get outputType(): OutputType {\n return this.$outputType\n }\n\n /**\n * Sets the config object that is passed to Rough.js and considered\n * during rendering of the `SVGElement`s.\n *\n * Sets `fixedDecimalPlaceDigits` to `3` if not specified otherwise.\n */\n set roughConfig(config: Options) {\n if (typeof config.fixedDecimalPlaceDigits === 'undefined') {\n config.fixedDecimalPlaceDigits = 3\n }\n this.$roughConfig = config\n }\n\n /**\n * Returns the currently configured rendering configuration.\n */\n get roughConfig(): Options {\n return this.$roughConfig\n }\n\n /**\n * Creates a new instance of Svg2roughjs.\n * @param target Either a container `HTMLDivElement` (or a selector for the container) to which a sketch should be added\n * or an `HTMLCanvasElement` or `SVGSVGElement` that should be used as output target.\n * @param outputType Whether the output should be an SVG or drawn to an HTML canvas.\n * Defaults to SVG or CANVAS depending if the given target is of type `HTMLCanvasElement` or `SVGSVGElement`,\n * otherwise it defaults to SVG.\n * @param roughConfig Config object that is passed to Rough.js and considered during\n * rendering of the `SVGElement`s.\n */\n constructor(\n target: string | HTMLDivElement | HTMLCanvasElement | SVGSVGElement,\n outputType: OutputType = OutputType.SVG,\n roughConfig: Options = {}\n ) {\n if (!target) {\n throw new Error('No target provided')\n }\n\n const targetElement = typeof target === 'string' ? document.querySelector(target) : target\n if (!targetElement) {\n throw new Error('Could not find target in document')\n }\n\n this.roughConfig = roughConfig\n\n this.outputElement = targetElement\n if (targetElement instanceof HTMLCanvasElement) {\n this.$outputType = OutputType.CANVAS\n } else if (targetElement instanceof SVGSVGElement) {\n this.$outputType = OutputType.SVG\n } else {\n this.$outputType = outputType\n }\n }\n\n /**\n * Triggers an entire redraw of the SVG which\n * processes the input element anew.\n * @param sourceSvgChanged When `true`, the given {@link svg} is re-evaluated as if it was set anew.\n * This allows the Svg2Rough.js instance to be used mutliple times with the same source SVG container but different contents.\n * @returns A promise that resolves with the sketched output element or null if no {@link svg} is set.\n */\n sketch(sourceSvgChanged = false): Promise {\n if (!this.svg) {\n return Promise.resolve(null)\n }\n\n if (sourceSvgChanged) {\n this.sourceSvgChanged()\n }\n\n const sketchContainer = this.prepareRenderContainer()\n const renderContext = this.createRenderContext(sketchContainer)\n\n // prepare filter effects\n if (this.pencilFilter) {\n const defs = getDefsElement(renderContext)\n defs.appendChild(createPencilFilter())\n }\n\n // sketchify the SVG\n renderContext.processElement(renderContext, this.svg, null, this.width, this.height)\n\n if (this.outputElement instanceof SVGSVGElement) {\n // sketch already in the outputElement\n return Promise.resolve(this.outputElement)\n } else if (this.outputElement instanceof HTMLCanvasElement) {\n return this.drawToCanvas(renderContext, this.outputElement)\n }\n\n // remove the previous attached result\n this.lastResult?.parentNode?.removeChild(this.lastResult)\n // assume that the given output element is a container, thus append the sketch to it\n if (this.outputType === OutputType.SVG) {\n const svgSketch = renderContext.svgSketch\n this.outputElement.appendChild(svgSketch)\n this.lastResult = svgSketch\n return Promise.resolve(svgSketch)\n } else {\n // canvas output type\n const canvas = document.createElement('canvas')\n this.outputElement.appendChild(canvas)\n this.lastResult = canvas\n return this.drawToCanvas(renderContext, canvas)\n }\n }\n\n /**\n * Creates a new context which contains the current state of the\n * Svg2Roughs instance for rendering.\n */\n private createRenderContext(sketchContainer: SVGSVGElement): RenderContext {\n if (!this.svg) {\n throw new Error('No source SVG set yet.')\n }\n let roughConfig = this.roughConfig\n if (this.seed !== null) {\n roughConfig = { seed: this.seed, ...roughConfig }\n }\n return {\n rc: rough.svg(sketchContainer, { options: roughConfig }),\n roughConfig: this.roughConfig,\n fontFamily: this.fontFamily,\n pencilFilter: this.pencilFilter,\n randomize: this.randomize,\n rng: new RandomNumberGenerator(this.seed),\n sketchPatterns: this.sketchPatterns,\n idElements: this.idElements,\n sourceSvg: this.svg,\n svgSketch: sketchContainer,\n svgSketchIsInDOM: document.body.contains(sketchContainer),\n styleSheets: Array.from(this.svg.querySelectorAll('style'))\n .map(s => s.sheet)\n .filter(s => s !== null) as CSSStyleSheet[],\n processElement: processRoot\n }\n }\n\n /**\n * Helper method to draw the sketched SVG to a HTMLCanvasElement.\n */\n private drawToCanvas(\n renderContext: RenderContext,\n canvas: HTMLCanvasElement\n ): Promise {\n canvas.width = this.width\n canvas.height = this.height\n const canvasCtx = canvas.getContext('2d') as CanvasRenderingContext2D\n canvasCtx.clearRect(0, 0, this.width, this.height)\n return new Promise(resolve => {\n const svgString = new XMLSerializer().serializeToString(renderContext.svgSketch)\n const img = new Image()\n img.onload = function () {\n canvasCtx.drawImage(this as HTMLImageElement, 0, 0)\n resolve(canvas)\n }\n img.src = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svgString)}`\n })\n }\n\n /**\n * Prepares the given SVG element depending on the set properties.\n */\n private prepareRenderContainer(): SVGSVGElement {\n let svgElement: SVGSVGElement\n\n if (this.outputElement instanceof SVGSVGElement) {\n // just use the user given outputElement directly as sketch-container\n svgElement = this.outputElement\n } else {\n // we need a separate svgElement as output element\n svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n }\n\n // make sure it has all the proper namespaces\n svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n svgElement.setAttributeNS(\n 'http://www.w3.org/2000/xmlns/',\n 'xmlns:xlink',\n 'http://www.w3.org/1999/xlink'\n )\n\n // clear SVG element\n while (svgElement.firstChild) {\n svgElement.removeChild(svgElement.firstChild)\n }\n\n // set size\n svgElement.setAttribute('width', this.width.toString())\n svgElement.setAttribute('height', this.height.toString())\n\n // apply backgroundColor\n let backgroundElement\n if (this.backgroundColor) {\n backgroundElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n backgroundElement.width.baseVal.value = this.width\n backgroundElement.height.baseVal.value = this.height\n backgroundElement.setAttribute('fill', this.backgroundColor)\n svgElement.appendChild(backgroundElement)\n }\n\n // use round linecap to emphasize a ballpoint pen like drawing\n svgElement.setAttribute('stroke-linecap', 'round')\n\n return svgElement\n }\n\n /**\n * Initializes the size based on the currently set SVG and collects elements\n * with an ID property that may be referenced in the SVG.\n */\n private sourceSvgChanged() {\n const svg = this.$svg\n if (svg) {\n const precision = this.roughConfig.fixedDecimalPlaceDigits\n this.width = parseFloat(this.coerceSize(svg, 'width', 300).toFixed(precision))\n this.height = parseFloat(this.coerceSize(svg, 'height', 150).toFixed(precision))\n\n // pre-process defs for subsequent references\n this.collectElementsWithID()\n }\n }\n\n /**\n * Stores elements with IDs for later use.\n */\n private collectElementsWithID() {\n this.idElements = {}\n const elementsWithID: SVGElement[] = Array.prototype.slice.apply(\n this.svg!.querySelectorAll('*[id]')\n )\n for (const elt of elementsWithID) {\n const id = elt.getAttribute('id')\n if (id) {\n this.idElements[id] = elt\n }\n }\n }\n\n /**\n * Helper to handle percentage values for width / height of the input SVG.\n */\n private coerceSize(svg: SVGSVGElement, property: 'width' | 'height', fallback: number): number {\n let size = fallback\n const hasViewbox = svg.hasAttribute('viewBox')\n if (svg.hasAttribute(property)) {\n // percentage sizes for the root SVG are unclear, thus use viewBox if available\n if (svg[property].baseVal.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE && hasViewbox) {\n size = svg.viewBox.baseVal[property]\n } else {\n size = svg[property].baseVal.value\n }\n } else if (hasViewbox) {\n size = svg.viewBox.baseVal[property]\n }\n return size\n }\n}\n" }, { "path": "src/clipping.ts", "content": "import { getIdFromUrl, getNodeChildren } from './dom-helpers'\nimport { applyCircleClip } from './geom/circle'\nimport { applyEllipseClip } from './geom/ellipse'\nimport { applyPathClip } from './geom/path'\nimport { applyPolygonClip } from './geom/polygon'\nimport { applyRectClip } from './geom/rect'\nimport { getCombinedTransform } from './transformation'\nimport { RenderContext } from './types'\nimport { getDefsElement, SKETCH_CLIP_ATTRIBUTE } from './utils'\n\n/**\n * Applies the clip-path to the CanvasContext.\n */\nexport function applyClipPath(\n context: RenderContext,\n owner: SVGElement,\n clipPathAttr: string,\n svgTransform: SVGTransform | null\n): void {\n const id = getIdFromUrl(clipPathAttr)\n if (!id) {\n return\n }\n\n const clipPath = context.idElements[id] as SVGElement\n if (!clipPath) {\n return\n }\n\n // TODO clipPath: consider clipPathUnits\n // create clipPath defs\n const targetDefs = getDefsElement(context)\n // unfortunately, we cannot reuse clip-paths due to the 'global transform' approach\n const sketchClipPathId = `${id}_${targetDefs.childElementCount}`\n const clipContainer = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath')\n clipContainer.id = sketchClipPathId\n storeSketchClipId(owner, sketchClipPathId)\n\n // traverse clip-path elements in DFS\n const stack: { element: SVGElement; transform: SVGTransform | null }[] = []\n const children = getNodeChildren(clipPath)\n for (let i = children.length - 1; i >= 0; i--) {\n const childElement = children[i] as SVGGraphicsElement\n const childTransform = getCombinedTransform(context, childElement, svgTransform)\n stack.push({ element: childElement, transform: childTransform })\n }\n\n while (stack.length > 0) {\n const { element, transform } = stack.pop()!\n\n try {\n applyElementClip(context, element, clipContainer, transform)\n } catch (e) {\n console.error(e)\n }\n\n if (\n element.tagName === 'defs' ||\n element.tagName === 'svg' ||\n element.tagName === 'clipPath' ||\n element.tagName === 'text'\n ) {\n // some elements are ignored on clippaths\n continue\n }\n // process children\n const children = getNodeChildren(element)\n for (let i = children.length - 1; i >= 0; i--) {\n const childElement = children[i] as SVGGraphicsElement\n const childTransform = getCombinedTransform(context, childElement, transform)\n stack.push({ element: childElement, transform: childTransform })\n }\n }\n\n if (clipContainer.childNodes.length > 0) {\n // add the clip-path only if it contains converted elements\n // some elements are not yet supported\n targetDefs.appendChild(clipContainer)\n }\n}\n\n/**\n * Creates a clip element and appends it to the given container.\n */\nfunction applyElementClip(\n context: RenderContext,\n element: SVGElement,\n container: SVGClipPathElement,\n svgTransform: SVGTransform | null\n) {\n switch (element.tagName) {\n case 'rect':\n applyRectClip(context, element as SVGRectElement, container, svgTransform)\n break\n case 'circle':\n applyCircleClip(context, element as SVGCircleElement, container, svgTransform)\n break\n case 'ellipse':\n applyEllipseClip(context, element as SVGEllipseElement, container, svgTransform)\n break\n case 'polygon':\n applyPolygonClip(context, element as SVGPolygonElement, container, svgTransform)\n break\n case 'path':\n applyPathClip(context, element as SVGPathElement, container, svgTransform)\n break\n }\n}\n\n/**\n * Store clippath-id on each child for elements, or on the owner itself for other\n * elements.\n *\n * elements are skipped in the processing loop, thus the clip-path id must be stored\n * on the child elements.\n */\nfunction storeSketchClipId(element: SVGElement, id: string): void {\n if (element.tagName !== 'g') {\n element.setAttribute(SKETCH_CLIP_ATTRIBUTE, id)\n return\n }\n\n const stack: SVGElement[] = []\n const children = getNodeChildren(element)\n for (let i = children.length - 1; i >= 0; i--) {\n stack.push(children[i] as SVGElement)\n }\n\n while (stack.length > 0) {\n const element = stack.pop()!\n element.setAttribute(SKETCH_CLIP_ATTRIBUTE, id)\n\n const children = getNodeChildren(element)\n for (let i = children.length - 1; i >= 0; i--) {\n stack.push(children[i] as SVGElement)\n }\n }\n}\n" }, { "path": "src/dom-helpers.ts", "content": "import { RenderContext } from './types'\n\n/**\n * Returns the Node's children, since Node.prototype.children is not available on all browsers.\n * https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children\n */\nexport function getNodeChildren(element: Element): Element[] {\n if (typeof element.children !== 'undefined') {\n return element.children as unknown as Element[]\n }\n let i = 0\n let node\n const nodes = element.childNodes\n const children: Element[] = []\n while ((node = nodes[i++])) {\n if (node.nodeType === 1) {\n children.push(node as Element)\n }\n }\n return children\n}\n\n/**\n * IE doesn't support `element.parentElement` in SVG documents.\n * This helper utilizes `parentNode` and checks for the `nodeType`.\n */\nexport function getParentElement(node: Node): Element | null {\n const parentNode = node.parentNode\n if (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {\n return parentNode as Element\n }\n return null\n}\n\n/**\n * Returns the CSS rules that apply to the given element (ignoring inheritance).\n *\n * Based on https://stackoverflow.com/a/22638396\n */\nexport function getMatchedCssRules(context: RenderContext, el: Element): CSSStyleRule[] {\n const ret: CSSStyleRule[] = []\n el.matches =\n el.matches ||\n el.webkitMatchesSelector ||\n // @ts-expect-error: legacy browser support\n el.mozMatchesSelector ||\n // @ts-expect-error: legacy browser support\n el.msMatchesSelector ||\n // @ts-expect-error: legacy browser support\n el.oMatchesSelector\n\n context.styleSheets.forEach(sheet => {\n const rules = sheet.rules || sheet.cssRules\n for (const r in rules) {\n const rule = rules[r] as CSSStyleRule\n if (el.matches(rule.selectorText)) {\n ret.push(rule)\n }\n }\n })\n return ret\n}\n\n/**\n * Moves the child-nodes from the source to a new parent.\n */\nexport function reparentNodes(newParent: T, source: SVGElement): T {\n while (source.firstChild) {\n newParent.append(source.firstChild)\n }\n return newParent\n}\n\n/**\n * Returns the id from the url string\n */\nexport function getIdFromUrl(url: string | null): string | null {\n if (url === null) {\n return null\n }\n const result =\n /url\\('#?(.*?)'\\)/.exec(url) || /url\\(\"#?(.*?)\"\\)/.exec(url) || /url\\(#?(.*?)\\)/.exec(url)\n if (result && result.length > 1) {\n return result[1]\n }\n return null\n}\n" }, { "path": "src/geom/circle.ts", "content": "import { appendPatternPaint } from '../styles/pattern'\nimport { parseStyleConfig } from '../styles/styles'\nimport {\n applyTransform,\n applyMatrix,\n isIdentityTransform,\n isTranslationTransform\n} from '../transformation'\nimport { RenderContext } from '../types'\nimport { appendSketchElement, sketchPath } from '../utils'\nimport { str } from './primitives'\n\nexport function drawCircle(\n context: RenderContext,\n circle: SVGCircleElement,\n svgTransform: SVGTransform | null\n): void {\n const cx = circle.cx.baseVal.value\n const cy = circle.cy.baseVal.value\n const r = circle.r.baseVal.value\n\n if (r === 0) {\n // zero-radius circle is not rendered\n return\n }\n\n const center = applyMatrix({ x: cx, y: cy }, svgTransform)\n const radiusPoint = applyMatrix({ x: cx + r, y: cy + r }, svgTransform)\n const transformedRadius = radiusPoint.x - center.x\n\n let result\n if (isIdentityTransform(svgTransform) || isTranslationTransform(svgTransform)) {\n // transform a point on the ellipse to get the transformed radius\n result = context.rc.circle(center.x, center.y, 2 * transformedRadius, {\n ...parseStyleConfig(context, circle, svgTransform),\n preserveVertices: true\n })\n } else {\n // in other cases we need to construct the path manually.\n const factor = (4 / 3) * (Math.sqrt(2) - 1)\n const p1 = applyMatrix({ x: cx + r, y: cy }, svgTransform)\n const p2 = applyMatrix({ x: cx, y: cy + r }, svgTransform)\n const p3 = applyMatrix({ x: cx - r, y: cy }, svgTransform)\n const p4 = applyMatrix({ x: cx, y: cy - r }, svgTransform)\n const c1 = applyMatrix({ x: cx + r, y: cy + factor * r }, svgTransform)\n const c2 = applyMatrix({ x: cx + factor * r, y: cy + r }, svgTransform)\n const c4 = applyMatrix({ x: cx - r, y: cy + factor * r }, svgTransform)\n const c6 = applyMatrix({ x: cx - factor * r, y: cy - r }, svgTransform)\n const c8 = applyMatrix({ x: cx + r, y: cy - factor * r }, svgTransform)\n const path = `M ${str(p1)} C ${str(c1)} ${str(c2)} ${str(p2)} S ${str(c4)} ${str(p3)} S ${str(\n c6\n )} ${str(p4)} S ${str(c8)} ${str(p1)}z`\n result = sketchPath(context, path, parseStyleConfig(context, circle, svgTransform))\n }\n\n appendPatternPaint(context, circle, () => {\n const proxy = document.createElementNS('http://www.w3.org/2000/svg', 'circle')\n proxy.cx.baseVal.value = center.x\n proxy.cy.baseVal.value = center.y\n proxy.r.baseVal.value = transformedRadius\n return proxy\n })\n appendSketchElement(context, circle, result)\n}\n\nexport function applyCircleClip(\n context: RenderContext,\n circle: SVGCircleElement,\n container: SVGClipPathElement,\n svgTransform: SVGTransform | null\n): void {\n const cx = circle.cx.baseVal.value\n const cy = circle.cy.baseVal.value\n const r = circle.r.baseVal.value\n\n if (r === 0) {\n // zero-radius circle is not rendered\n return\n }\n\n const clip = document.createElementNS('http://www.w3.org/2000/svg', 'circle')\n clip.cx.baseVal.value = cx\n clip.cy.baseVal.value = cy\n clip.r.baseVal.value = r\n applyTransform(context, svgTransform, clip)\n container.appendChild(clip)\n}\n" }, { "path": "src/geom/ellipse.ts", "content": "import { appendPatternPaint } from '../styles/pattern'\nimport { parseStyleConfig } from '../styles/styles'\nimport {\n applyTransform,\n applyMatrix,\n isIdentityTransform,\n isTranslationTransform\n} from '../transformation'\nimport { RenderContext } from '../types'\nimport { appendSketchElement, sketchPath } from '../utils'\nimport { str } from './primitives'\n\nexport function drawEllipse(\n context: RenderContext,\n ellipse: SVGEllipseElement,\n svgTransform: SVGTransform | null\n): void {\n const cx = ellipse.cx.baseVal.value\n const cy = ellipse.cy.baseVal.value\n const rx = ellipse.rx.baseVal.value\n const ry = ellipse.ry.baseVal.value\n\n if (rx === 0 || ry === 0) {\n // zero-radius ellipse is not rendered\n return\n }\n\n const center = applyMatrix({ x: cx, y: cy }, svgTransform)\n // transform a point on the ellipse to get the transformed radius\n const radiusPoint = applyMatrix({ x: cx + rx, y: cy + ry }, svgTransform)\n const transformedRx = radiusPoint.x - center.x\n const transformedRy = radiusPoint.y - center.y\n\n let result\n if (isIdentityTransform(svgTransform) || isTranslationTransform(svgTransform)) {\n // Simple case, there's no transform and we can use the ellipse command\n result = context.rc.ellipse(center.x, center.y, 2 * transformedRx, 2 * transformedRy, {\n ...parseStyleConfig(context, ellipse, svgTransform),\n preserveVertices: true\n })\n } else {\n // in other cases we need to construct the path manually.\n const factor = (4 / 3) * (Math.sqrt(2) - 1)\n const p1 = applyMatrix({ x: cx + rx, y: cy }, svgTransform)\n const p2 = applyMatrix({ x: cx, y: cy + ry }, svgTransform)\n const p3 = applyMatrix({ x: cx - rx, y: cy }, svgTransform)\n const p4 = applyMatrix({ x: cx, y: cy - ry }, svgTransform)\n const c1 = applyMatrix({ x: cx + rx, y: cy + factor * ry }, svgTransform)\n const c2 = applyMatrix({ x: cx + factor * rx, y: cy + ry }, svgTransform)\n const c4 = applyMatrix({ x: cx - rx, y: cy + factor * ry }, svgTransform)\n const c6 = applyMatrix({ x: cx - factor * rx, y: cy - ry }, svgTransform)\n const c8 = applyMatrix({ x: cx + rx, y: cy - factor * ry }, svgTransform)\n const path = `M ${str(p1)} C ${str(c1)} ${str(c2)} ${str(p2)} S ${str(c4)} ${str(p3)} S ${str(\n c6\n )} ${str(p4)} S ${str(c8)} ${str(p1)}z`\n result = sketchPath(context, path, parseStyleConfig(context, ellipse, svgTransform))\n }\n\n appendPatternPaint(context, ellipse, () => {\n const proxy = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')\n proxy.cx.baseVal.value = center.x\n proxy.cy.baseVal.value = center.y\n proxy.rx.baseVal.value = transformedRx\n proxy.ry.baseVal.value = transformedRy\n return proxy\n })\n appendSketchElement(context, ellipse, result)\n}\n\nexport function applyEllipseClip(\n context: RenderContext,\n ellipse: SVGEllipseElement,\n container: SVGClipPathElement,\n svgTransform: SVGTransform | null\n): void {\n const cx = ellipse.cx.baseVal.value\n const cy = ellipse.cy.baseVal.value\n const rx = ellipse.rx.baseVal.value\n const ry = ellipse.ry.baseVal.value\n\n if (rx === 0 || ry === 0) {\n // zero-radius ellipse is not rendered\n return\n }\n\n const clip = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')\n clip.cx.baseVal.value = cx\n clip.cy.baseVal.value = cy\n clip.rx.baseVal.value = rx\n clip.ry.baseVal.value = ry\n applyTransform(context, svgTransform, clip)\n container.appendChild(clip)\n}\n" }, { "path": "src/geom/foreign-object.ts", "content": "import { applyTransform } from '../transformation'\nimport { RenderContext } from '../types'\nimport { appendSketchElement } from '../utils'\n\nexport function drawForeignObject(\n context: RenderContext,\n foreignObject: SVGForeignObjectElement,\n svgTransform: SVGTransform | null\n): void {\n const foreignObjectClone = foreignObject.cloneNode(true) as SVGForeignObjectElement\n const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\n // foreignObject often relies on CSS styling, and just copying the \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Applicant\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Enterprise\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Application\n \n \n \n Confirmation\n of Receipt\n \n \n \n Invitation\n \n \n \n Employment\n Contract\n \n \n \n \n Signed\n Employment\n Contract\n \n \n \n Question\n \n \n Answer\n \n \n \n Write Job\n Application\n \n \n \n \n Receive\n Confirmation\n of Receipt\n \n \n \n \n Receive \n Invitation to\n Interview\n \n \n \n \n Take Part in\n Interview\n \n \n \n \n Receive\n Employment\n Contract\n \n \n \n \n Sign Contract\n and Send It\n Back\n \n \n \n \n Receive\n Application\n \n \n \n \n Confirm\n Receipt\n \n \n \n \n Invite to\n Interview\n \n \n \n \n Carry Out\n Interview\n \n \n \n \n Send\n Employment\n Contract\n \n \n \n \n Receive\n Signed\n Employment\n Contract\n \n \n \n \n
\n \n\n \n\n\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"es6\",\n \"target\": \"es2015\",\n \"allowJs\": true,\n \"allowSyntheticDefaultImports\": true,\n \"moduleResolution\": \"node\",\n \"lib\": [\"dom\", \"es2015\"],\n \"outDir\": \"out-tsc\",\n \"declaration\": true,\n\n /* Linting */\n \"strict\": true,\n \"noImplicitAny\": false,\n \"noUnusedLocals\": true,\n \"noFallthroughCasesInSwitch\": true\n },\n \"include\": [\"src/**/*.ts\"]\n}\n" }, { "path": "web-test-runner.config.mjs", "content": "import { defaultReporter, summaryReporter } from '@web/test-runner'\nimport { rollupBundlePlugin } from '@web/dev-server-rollup'\nimport { nodeResolve } from '@rollup/plugin-node-resolve'\nimport commonjs from '@rollup/plugin-commonjs'\n\nconst filteredLogs = ['Running in dev mode', 'lit-html is in dev mode', 'Lit is in dev mode']\n\n// https://modern-web.dev/docs/test-runner/cli-and-configuration/\nexport default /** @type {import(\"@web/test-runner\").TestRunnerConfig} */ ({\n /** Test files to run */\n files: ['test/runner/spec.test.js', 'test/runner/complex.test.js'],\n\n plugins: [\n // We need to use rollup here unfortunately, because esbuild in the open-wc test-runner\n // only works on esbuild's single file transform API that doesn't bundle dependencies\n // automatically. This does not work for the external dependencies here (e.g. rough,\n // etc.), which cannot be resolved then.\n //\n // So use rollup with a configuration that creates one big-fat bundle without external deps.\n rollupBundlePlugin({\n rollupConfig: {\n input: 'out-tsc/index.js',\n plugins: [nodeResolve(), commonjs()]\n }\n })\n ],\n\n reporters: [\n // use the default reporter only for reporting test progress\n // enable reportTestResults to see the actual diff of the results\n defaultReporter({ reportTestResults: false, reportTestProgress: true }),\n summaryReporter()\n ],\n\n /** Whether to analyze code coverage */\n coverage: false,\n\n /** Run tests manually in the browser (e.g. useful for debugging) */\n manual: false,\n\n /** Resolve bare module imports */\n nodeResolve: {\n exportConditions: ['browser', 'development']\n },\n\n rootDir: './',\n\n /** Filter out lit dev mode logs */\n filterBrowserLogs(log) {\n for (const arg of log.args) {\n if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {\n return false\n }\n }\n return true\n },\n\n /** Amount of browsers to run concurrently */\n // concurrentBrowsers: 2,\n\n /** Amount of test files per browser to test concurrently */\n concurrency: 1\n\n /** Browsers to run tests on */\n // browsers: [\n // playwrightLauncher({ product: 'chromium' }),\n // playwrightLauncher({ product: 'firefox' }),\n // playwrightLauncher({ product: 'webkit' }),\n // ],\n\n // See documentation for all available options\n})\n" } ]