901c9547fe
- Refactoring (minor): Add favicon to canvas demo
- Linting (ESLint Markdown JavaScript): Add `eslint-plugin-markdown` with
slightly loosened config (`no-undef` and `padded-blocks` off and
`no-unused-vars` as a warning)
- Linting (ESLint JSDoc code comments): Add `eslint-plugin-jsdoc` and apply to
JSDoc code comments
- Linting (ESLint): Completely avoid unescaped tabs in files
- Docs (Linting): Add linting info file
- npm: Rename `copy-deps` script to `copy`
- Refactoring: Add stackblur-canvas as a dependency and copy it in (until such time as we can do so for canvg)
56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Minimal demo of SvgCanvas</title>
|
|
<script src="../editor/jquery.min.js"></script>
|
|
<script src="../editor/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
|
<style> #svgroot { overflow: hidden; } </style>
|
|
<link rel="shortcut icon" type="image/x-icon" href="../editor/images/logo.png" />
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Minimal demo of SvgCanvas</h1>
|
|
|
|
<div id="editorContainer"></div>
|
|
|
|
<div>
|
|
[<button onclick="canvas.setMode('select')">Select</button>
|
|
<button onclick="canvas.setMode('circle')">Circle</button>
|
|
<button onclick="canvas.setMode('rect')">Rect</button>]
|
|
<button onclick="fill('#ff0000')">Fill Red</button>
|
|
<button onclick="canvas.deleteSelectedElements()">Delete Selected</button>
|
|
<button onclick="canvas.clear(); canvas.updateCanvas(width, height);">Clear All</button>
|
|
<button onclick="alert(canvas.getSvgString())">Get SVG</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import Canvas from '../editor/svgcanvas.js';
|
|
|
|
const container = document.querySelector('#editorContainer');
|
|
const {width, height} = {width: 500, height: 300};
|
|
window.width = width;
|
|
window.height = height;
|
|
|
|
const config = {
|
|
initFill: {color: 'FFFFFF', opacity: 1},
|
|
initStroke: {color: '000000', opacity: 1, width: 1},
|
|
text: {stroke_width: 0, font_size: 24, font_family: 'serif'},
|
|
initOpacity: 1,
|
|
imgPath: 'editor/images/',
|
|
dimensions: [width, height],
|
|
baseUnit: 'px',
|
|
};
|
|
|
|
window.canvas = new Canvas(container, config);
|
|
canvas.updateCanvas(width, height);
|
|
|
|
window.fill = function (colour) {
|
|
canvas.getSelectedElems().forEach((el) => {
|
|
el.setAttribute('fill', colour);
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|