README.md
1# SketchCanvas
2A simple HTML5 figure editor and viewer
3
4
5## Objectives
6
7Create a simple figure format that can replace Microsoft Word figures in
8web documents.
9
10It aims to have following features:
11
12* Easily editable in-place by GUI.
13* Easily embeddable into Wiki pages, blogs and design documents.
14* Can be easily copy & pasted to another document.
15* Unlike SVG, no complex graphics features are supported
16* Has a text format that is easily examined and edited by human.
17* Can also be saved as a separate text file.
18* Can be easily compared with text-wise diff.
19* Has extensible format.
20
21
22## DokuWiki plugin
23
24The SketchCanvas figure is a file format and a JS library to render/edit.
25However, this project also implements a DokuWiki plugin that you can embed this document into a wiki text, and it is the most common way to use it.
26
27See the [plugin page](https://www.dokuwiki.org/plugin:sketchcanvas) for more.
28
29
30## Current implementation
31
32Current implementation uses YAML as format.
33It enables easy inspection and editing by humans.
34
35It can be edited by a static HTML document with JavaScript.
36It's so easy to setup a server that accepts and shows uploaded figures.
37
38It's very easy to create a figure or a diagram like this one:
39
40
41
42
43
44
45The source looks like this:
46
47~~~ yaml
48- type: line
49 points: '485,569:233,536'
50- type: line
51 points: '605,546:478,421'
52- type: line
53 points: '382,147:264,303'
54 color: blue
55- type: line
56 points: '630,139:639,272'
57 color: green
58- type: line
59 points: '763,153:492,244'
60 color: green
61 width: 2
62- type: line
63 points: '720,142:435,209'
64 color: green
65 width: 3
66- type: arrow
67 points: '134,115:372,269'
68 color: green
69 width: 3
70- type: text
71 points: '583,343'
72 text: Normal Text
73- type: text
74 points: '583,369'
75 width: 2
76 text: Bold Text
77- type: text
78 points: '588,392'
79 width: 3
80 text: Extra Bold Text
81- type: text
82 points: '589,424'
83 color: red
84 width: 3
85 text: Red Extra Bold Text
86- type: arcarrow
87 points: '577,364:264,390:583,387'
88 color: green
89 width: 2
90- type: ellipse
91 points: '567,399:784,435'
92 color: blue
93 width: 2
94
95~~~
96
97## Server-side SketchCanvas renderer
98
99SketchCanvas documents can be rendered in the server if the server
100has a PHP running with GD extension.
101You have to download a file named "NotoSansCJKjp-Regular.otf" from
102the URL below and place it under "phplib" directory in the server
103in order to enable this feature.
104
105https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip
106
107This feature can be used to embed sketches into a PDF in conjunction with
108DokuWiki's dw2pdf plugin.
109
110
111## How to build
112
113As a PHP application, it does not need build the server side, but the frontend needs to bundle.
114
115Prerequisite:
116
117* [deno](https://deno.com/)
118
119Run the following command to build the bundled script.
120
121 deno run --allow-read --allow-write --allow-net=deno.land,registry.npmjs.org --allow-env --allow-run --unstable bundle.ts
122
123This will produce a directory and a source file `bundle/SketchCanvas.js` and its source map file `bundle/SketchCanvas.js.map`.
124
125Make the zip file to install as a package (please run it on a Unix like shell):
126
127 ./makezip.sh
128
129`sketchcanvas.zip` will be produced in the directory.
130This file can be installed from manual install or be linked from [plugin page](https://www.dokuwiki.org/plugin:sketchcanvas).
131
