@svgedit/svgcanvas 7.1.4 → 7.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demos/canvas.html +70 -0
- package/dist/svgcanvas.js +33 -33
- package/dist/svgcanvas.js.map +1 -1
- package/elem-get-set.js +1 -1
- package/event.js +1 -1
- package/package.json +4 -4
- package/path-actions.js +1 -1
- package/path.js +1 -1
- package/recalculate.js +1 -1
- package/rollup.config.js +0 -2
- package/svg-exec.js +1 -1
- package/svgcanvas.js +6 -2
- package/units.js +260 -0
- package/utilities.js +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Minimal demo of SvgCanvas</title>
|
|
6
|
+
<script src="../src/editor/jquery.min.js"></script>
|
|
7
|
+
<style> #svgroot { overflow: hidden; } </style>
|
|
8
|
+
<link rel="shortcut icon" type="image/x-icon" href="../src/editor/images/logo.svg" />
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<h1>Minimal demo of SvgCanvas</h1>
|
|
13
|
+
|
|
14
|
+
<div id="editorContainer"></div>
|
|
15
|
+
|
|
16
|
+
<div>
|
|
17
|
+
[<button onclick="canvas.setMode('select')">Select</button>
|
|
18
|
+
<button onclick="canvas.setMode('circle')">Circle</button>
|
|
19
|
+
<button onclick="canvas.setMode('rect')">Rect</button>
|
|
20
|
+
<button onclick="canvas.setMode('text')">Text</button>]
|
|
21
|
+
<button onclick="fill('#ff0000')">Fill Red</button>
|
|
22
|
+
<button onclick="canvas.deleteSelectedElements()">Delete Selected</button>
|
|
23
|
+
<button onclick="canvas.clear(); canvas.updateCanvas(width, height);">Clear All</button>
|
|
24
|
+
<button onclick="alert(canvas.getSvgString())">Get SVG</button>
|
|
25
|
+
</div>
|
|
26
|
+
<!-- Not visible, but useful -->
|
|
27
|
+
<input id="text" style="width:0;height:0;opacity: 0"/>
|
|
28
|
+
<script type="module">
|
|
29
|
+
/* globals canvas */
|
|
30
|
+
import SvgCanvas from '@svgedit/svgcanvas'
|
|
31
|
+
|
|
32
|
+
const container = document.querySelector('#editorContainer')
|
|
33
|
+
const { width, height } = { width: 500, height: 300 }
|
|
34
|
+
window.width = width
|
|
35
|
+
window.height = height
|
|
36
|
+
|
|
37
|
+
const hiddenTextTagId = 'text'
|
|
38
|
+
|
|
39
|
+
const config = {
|
|
40
|
+
initFill: { color: 'FFFFFF', opacity: 1 },
|
|
41
|
+
initStroke: { color: '000000', opacity: 1, width: 1 },
|
|
42
|
+
text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
|
|
43
|
+
initOpacity: 1,
|
|
44
|
+
imgPath: '../src/editor/images',
|
|
45
|
+
dimensions: [ width, height ],
|
|
46
|
+
baseUnit: 'px'
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
window.canvas = new SvgCanvas(container, config)
|
|
50
|
+
canvas.updateCanvas(width, height)
|
|
51
|
+
|
|
52
|
+
window.fill = function (colour) {
|
|
53
|
+
canvas.getSelectedElements().forEach((el) => {
|
|
54
|
+
el.setAttribute('fill', colour)
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const hiddenTextTag = window.canvas.$id(hiddenTextTagId)
|
|
59
|
+
window.canvas.textActions.setInputElem(hiddenTextTag)
|
|
60
|
+
|
|
61
|
+
const addListenerMulti = (element, eventNames, listener) => {
|
|
62
|
+
eventNames.split(' ').forEach((eventName) => element.addEventListener(eventName, listener, false))
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
addListenerMulti(hiddenTextTag, 'keyup input', (evt) => {
|
|
66
|
+
window.canvas.setTextContent(evt.currentTarget.value)
|
|
67
|
+
})
|
|
68
|
+
</script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|