this.dragHandle = dragHandle} onClick={this.onClickDragHandle.bind(this)}/>,
229 |
,
231 |
,
233 |
,
235 |
237 | ])
238 | }
239 | }
240 |
--------------------------------------------------------------------------------
/src/EventStore.ts:
--------------------------------------------------------------------------------
1 | import {SvgElementEnum} from './Constants'
2 |
3 |
4 | export type PointData = {
5 | x: number,
6 | y: number
7 | }
8 |
9 | export type ImageData = {
10 | x?: number,
11 | y?: number,
12 | width: number,
13 | height: number,
14 | dataUrl: string
15 | }
16 |
17 | export type MouseMoveData = {
18 | x: number,
19 | y: number
20 | }
21 |
22 | export type PointEvent = {
23 | type: typeof SvgElementEnum.LINE,
24 | layer: number,
25 | strokeWidth: number,
26 | strokeColor: string,
27 | point: PointData
28 | }
29 |
30 | export type ImageEvent = {
31 | type: typeof SvgElementEnum.IMAGE,
32 | layer: number,
33 | image: ImageData
34 | }
35 |
36 | export type StopEvent = {
37 | type: null
38 | }
39 |
40 | export type AnyEvent = PointEvent | ImageEvent | StopEvent
41 |
42 | export type ReducedLineEvent = {
43 | type: typeof SvgElementEnum.LINE,
44 | strokeWidth: number,
45 | strokeColor: string,
46 | values: Array
47 | }
48 |
49 | export type ReducedImageEvent = {
50 | type: typeof SvgElementEnum.IMAGE,
51 | image: ImageData
52 | }
53 |
54 | export type ReducedStopEvent = {
55 | type?: null
56 | }
57 |
58 | export type AnyReducedEvent = ReducedLineEvent | ReducedImageEvent | ReducedStopEvent
59 |
60 | export const isPointEvent = (arg: AnyEvent): arg is PointEvent => {
61 | return arg.type === SvgElementEnum.LINE
62 | }
63 |
64 | export const isImageEvent = (arg: AnyEvent): arg is ImageEvent => {
65 | return arg.type === SvgElementEnum.IMAGE
66 | }
67 |
68 | export const isReducedLineEvent = (arg: AnyReducedEvent): arg is ReducedLineEvent => {
69 | return arg.type === SvgElementEnum.LINE
70 | }
71 |
72 | export const isReducedImageEvent = (arg: AnyReducedEvent): arg is ReducedImageEvent => {
73 | return arg.type === SvgElementEnum.IMAGE
74 | }
75 |
76 | export interface EventStoreProtocol {
77 |
78 | lastImage(): ImageData | undefined
79 |
80 | reduceEvents(): Array
81 |
82 | selectLayer(layer: number): void
83 |
84 | addLayer(): void
85 |
86 | startDrawing(strokeWidth: number, strokeColor: string, point: PointData): void
87 |
88 | stopDrawing(): void
89 |
90 | pushPoint(strokeWidth: number, strokeColor: string, point: PointData): void
91 |
92 | pasteImage(image: ImageData): void
93 |
94 | dragImage(move: MouseMoveData): void
95 |
96 | nwResizeImage(move: MouseMoveData): void
97 |
98 | neResizeImage(move: MouseMoveData): void
99 |
100 | seResizeImage(move: MouseMoveData): void
101 |
102 | swResizeImage(move: MouseMoveData): void
103 |
104 | undo(): void
105 |
106 | redo(): void
107 |
108 | clear(): void
109 | }
110 |
111 |
112 | export class EventStore implements EventStoreProtocol {
113 |
114 | selectedLayer: number
115 | renderableLayers: Array
116 | goodEvents: Array
117 | undoEvents: Array
118 |
119 | constructor() {
120 | this.selectedLayer = 0
121 | this.renderableLayers = [true]
122 | this.goodEvents = []
123 | this.undoEvents = []
124 | }
125 |
126 | lastImage(): ImageData | undefined {
127 | const last = this.goodEvents[this.goodEvents.length - 1]
128 | if (last && isImageEvent(last)) {
129 | return last.image
130 | } else {
131 | return null
132 | }
133 | }
134 |
135 | reduceEvents(): Array {
136 | return this.goodEvents.reduce((prev: Array>, element: AnyEvent): Array> => {
137 | if (!element.type) {
138 | prev.forEach(p => {
139 | p.push({})
140 | })
141 | return prev
142 | }
143 |
144 | if (isPointEvent(element)) {
145 | let last = prev[element.layer][prev[element.layer].length - 1]
146 | if (last && isReducedLineEvent(last) && last.strokeWidth === element.strokeWidth && last.strokeColor === element.strokeColor) {
147 | last.values.push(element.point)
148 | } else {
149 | const event: ReducedLineEvent = {
150 | type: element.type,
151 | strokeWidth: element.strokeWidth,
152 | strokeColor: element.strokeColor,
153 | values: [element.point]
154 | }
155 | prev[element.layer].push(event)
156 | }
157 | return prev
158 |
159 | } else if (isImageEvent(element)) {
160 | const event: ReducedImageEvent = {
161 | type: element.type,
162 | image: element.image
163 | }
164 | prev[element.layer].push(event)
165 | return prev
166 |
167 | } else {
168 | return prev
169 | }
170 |
171 | }, this.renderableLayers.map(() => [])
172 | ).filter((element: Array, index: number): boolean => {
173 | return this.renderableLayers[index]
174 |
175 | }).reduce((prev: Array, element: Array): Array => {
176 | return prev.concat(element)
177 |
178 | }, []
179 | ).filter((element: AnyReducedEvent): boolean => {
180 | if (isReducedLineEvent(element)) {
181 | return element.values.length > 1
182 | } else if (isReducedImageEvent(element)) {
183 | return true
184 | } else {
185 | return true
186 | }
187 | })
188 | }
189 |
190 | selectLayer(layer: number) {
191 | this.goodEvents.push({type: null})
192 | this.selectedLayer = layer
193 | }
194 |
195 | addLayer() {
196 | this.renderableLayers.push(true)
197 | }
198 |
199 | startDrawing(strokeWidth: number, strokeColor: string, point: PointData) {
200 | this.goodEvents.push({
201 | type: SvgElementEnum.LINE,
202 | layer: this.selectedLayer,
203 | strokeWidth: strokeWidth,
204 | strokeColor: strokeColor,
205 | point: point
206 | })
207 | }
208 |
209 | stopDrawing() {
210 | this.goodEvents.push({type: null})
211 | }
212 |
213 | pushPoint(strokeWidth: number, strokeColor: string, point: PointData) {
214 | const event: PointEvent = {
215 | type: SvgElementEnum.LINE,
216 | layer: this.selectedLayer,
217 | strokeWidth: strokeWidth,
218 | strokeColor: strokeColor,
219 | point: point
220 | }
221 | this.goodEvents.push(event)
222 | this.undoEvents = []
223 | }
224 |
225 | pasteImage(image: ImageData) {
226 | const event: ImageEvent = {
227 | type: SvgElementEnum.IMAGE,
228 | layer: this.selectedLayer,
229 | image: image
230 | }
231 | this.goodEvents.push(event)
232 | this.undoEvents = []
233 | }
234 |
235 | dragImage(move: MouseMoveData) {
236 | const lastImage = this.lastImage()
237 | if (lastImage) {
238 | lastImage.x = lastImage.x + move.x
239 | lastImage.y = lastImage.y + move.y
240 | }
241 | }
242 |
243 | nwResizeImage(move: MouseMoveData) {
244 | const lastImage = this.lastImage()
245 | if (lastImage) {
246 | lastImage.x = lastImage.x + move.x
247 | lastImage.y = lastImage.y + move.y
248 | lastImage.width = lastImage.width - move.x
249 | lastImage.height = lastImage.height - move.y
250 | }
251 | }
252 |
253 | neResizeImage(move: MouseMoveData) {
254 | const lastImage = this.lastImage()
255 | if (lastImage) {
256 | // lastImage.x = lastImage.x + move.x;
257 | lastImage.y = lastImage.y + move.y
258 | lastImage.width = lastImage.width + move.x
259 | lastImage.height = lastImage.height - move.y
260 | }
261 | }
262 |
263 | seResizeImage(move: MouseMoveData) {
264 | const lastImage = this.lastImage()
265 | if (lastImage) {
266 | // lastImage.x = lastImage.x + move.x;
267 | // lastImage.y = lastImage.y + move.y;
268 | lastImage.width = lastImage.width + move.x
269 | lastImage.height = lastImage.height + move.y
270 | }
271 | }
272 |
273 | swResizeImage(move: MouseMoveData) {
274 | const lastImage = this.lastImage()
275 | if (lastImage) {
276 | lastImage.x = lastImage.x + move.x
277 | // lastImage.y = lastImage.y + move.y;
278 | lastImage.width = lastImage.width - move.x
279 | lastImage.height = lastImage.height + move.y
280 | }
281 | }
282 |
283 | undo() {
284 | if (this.goodEvents.length) {
285 | this.undoEvents.push(this.goodEvents.pop()) // {}
286 | this.undoEvents.push(this.goodEvents.pop()) // {type: 'line', point: [...], ...} or {type: 'image', image: {...}, ...}
287 | this.goodEvents.push({type: null})
288 | }
289 | }
290 |
291 | redo() {
292 | if (this.undoEvents.length) {
293 | this.goodEvents.pop()
294 | this.goodEvents.push(this.undoEvents.pop()) // {type: 'line', point: [...], ...} or {type: 'image', image: {...}, ...}
295 | this.goodEvents.push(this.undoEvents.pop()) // {}
296 | }
297 | }
298 |
299 | clear() {
300 | this.goodEvents = []
301 | this.undoEvents = []
302 | }
303 | }
304 |
--------------------------------------------------------------------------------
/src/EventStream.ts:
--------------------------------------------------------------------------------
1 | import EventEmitter from 'events'
2 |
3 | import {ResizeImageDirection} from './Constants'
4 | import {ImageData, MouseMoveData, PointData} from './EventStore'
5 |
6 |
7 | export type EventListener = (value: any) => void
8 |
9 | export type ChangeStrokeWidth = {
10 | key: 'strokeWidth',
11 | value: number
12 | }
13 |
14 | export type ChangeStrokeColor = {
15 | key: 'strokeColor',
16 | value: string
17 | }
18 |
19 | export enum EventNameEnum {
20 | SELECT_LAYER = 'selectLayer',
21 | ADD_LAYER = 'addLayer',
22 | START = 'start',
23 | STOP = 'stop',
24 | SET = 'set',
25 | PUSH = 'push',
26 | PASTE = 'paste',
27 | START_DRAGGING = 'startDragging',
28 | STOP_DRAGGING = 'stopDragging',
29 | DRAG = 'drag',
30 | START_RESIZING = 'startResizing',
31 | STOP_RESIZING = 'stopResizing',
32 | RESIZE = 'resize',
33 | UNDO = 'undo',
34 | REDO = 'redo',
35 | CLEAR = 'clear'
36 | }
37 |
38 | export interface EventStreamProtocol {
39 |
40 | on(name: EventNameEnum, listener: EventListener): void
41 |
42 | selectLayer(layer: number): void
43 |
44 | addLayer(): void
45 |
46 | startDrawing(x: number, y: number): void
47 |
48 | stopDrawing(): void
49 |
50 | changeStrokeWidth(width: number): void
51 |
52 | changeStrokeColor(color: string): void
53 |
54 | pushPoint(x: number, y: number): void
55 |
56 | pasteImage(x: number, y: number, width: number, height: number, dataUrl: string): void
57 |
58 | startDragging(): void
59 |
60 | stopDragging(): void
61 |
62 | dragImage(x: number, y: number): void
63 |
64 | startResizing(direction: ResizeImageDirection): void
65 |
66 | stopResizing(): void
67 |
68 | resizeImage(x: number, y: number): void
69 |
70 | undo(): void
71 |
72 | redo(): void
73 |
74 | clear(): void
75 |
76 | }
77 |
78 |
79 | export class EventStream implements EventStreamProtocol {
80 |
81 | emitter: EventEmitter
82 |
83 | constructor() {
84 | this.emitter = new EventEmitter()
85 | }
86 |
87 | on(name: EventNameEnum, listener: EventListener) {
88 | this.emitter.on(name, listener)
89 | }
90 |
91 | selectLayer(layer: number) {
92 | this.emitter.emit('selectLayer', layer)
93 | }
94 |
95 | addLayer() {
96 | this.emitter.emit('addLayer')
97 | }
98 |
99 | startDrawing(x: number, y: number) {
100 | this.emitter.emit('start', {x, y})
101 | }
102 |
103 | stopDrawing() {
104 | this.emitter.emit('stop')
105 | }
106 |
107 | changeStrokeWidth(width: number) {
108 | const change: ChangeStrokeWidth = {key: 'strokeWidth', value: width}
109 | this.emitter.emit('set', change)
110 | }
111 |
112 | changeStrokeColor(color: string) {
113 | const change: ChangeStrokeColor = {key: 'strokeColor', value: color}
114 | this.emitter.emit('set', change)
115 | }
116 |
117 | pushPoint(x: number, y: number) {
118 | const point: PointData = {x, y}
119 | this.emitter.emit('push', point)
120 | }
121 |
122 | pasteImage(x: number, y: number, width: number, height: number, dataUrl: string) {
123 | const image: ImageData = {x, y, width, height, dataUrl}
124 | this.emitter.emit('paste', image)
125 | }
126 |
127 | startDragging() {
128 | this.emitter.emit('startDragging')
129 | }
130 |
131 | stopDragging() {
132 | this.emitter.emit('stopDragging')
133 | }
134 |
135 | dragImage(x: number, y: number) {
136 | const move: MouseMoveData = {x, y}
137 | this.emitter.emit('drag', move)
138 | }
139 |
140 | startResizing(direction: ResizeImageDirection) {
141 | this.emitter.emit('startResizing', direction)
142 | }
143 |
144 | stopResizing() {
145 | this.emitter.emit('stopResizing')
146 | }
147 |
148 | resizeImage(x: number, y: number) {
149 | const move: MouseMoveData = {x, y}
150 | this.emitter.emit('resize', move)
151 | }
152 |
153 | undo() {
154 | this.emitter.emit('undo')
155 | }
156 |
157 | redo() {
158 | this.emitter.emit('redo')
159 | }
160 |
161 | clear() {
162 | this.emitter.emit('clear')
163 | }
164 | }
165 |
--------------------------------------------------------------------------------
/src/SvgConverter.ts:
--------------------------------------------------------------------------------
1 | import {ImageData} from './EventStore'
2 |
3 |
4 | export class SvgConverter {
5 |
6 | static toSvgData(sourceNode: SVGSVGElement): Promise {
7 | let htmlText = sourceNode.outerHTML
8 | let base64EncodedText = window.btoa(
9 | window.encodeURIComponent(htmlText)
10 | .replace(/%([0-9A-F]{2})/g, (match: string, p1: string): string => String.fromCharCode(window.parseInt('0x' + p1))))
11 |
12 | return new Promise(resolve => {
13 | resolve('data:image/svg+xml;charset=utf-8;base64,' + base64EncodedText)
14 | })
15 | }
16 |
17 | static toPngData(sourceNode: SVGSVGElement): Promise {
18 | return SvgConverter.toDataUrl(sourceNode, 'image/png')
19 | }
20 |
21 | static toJpegData(sourceNode: SVGSVGElement): Promise {
22 | return SvgConverter.toDataUrl(sourceNode, 'image/jpeg')
23 | }
24 |
25 | static toDataUrl(sourceNode: SVGSVGElement, imageType: string): Promise {
26 | return new Promise(resolve => {
27 | SvgConverter.toSvgData(sourceNode).then((svgdata: string) => {
28 | let {width, height} = sourceNode.getBoundingClientRect()
29 |
30 | let imageNode = new window.Image()
31 | imageNode.onload = () => {
32 | let canvasNode = document.createElement('canvas')
33 | canvasNode.width = width
34 | canvasNode.height = height
35 |
36 | let graphicsContext = canvasNode.getContext('2d')
37 | if (graphicsContext) {
38 | graphicsContext.drawImage(imageNode, 0, 0)
39 | } else {
40 | throw new Error('got no rendering context')
41 | }
42 |
43 | resolve(canvasNode.toDataURL(imageType))
44 | }
45 | imageNode.src = svgdata
46 | })
47 | })
48 | }
49 |
50 | static fromPngImage(imageUrl: string): Promise {
51 | return SvgConverter.fromImageUrl(imageUrl, 'image/png')
52 | }
53 |
54 | static fromJpegImage(imageUrl: string): Promise {
55 | return SvgConverter.fromImageUrl(imageUrl, 'image/jpeg')
56 | }
57 |
58 | static fromGifImage(imageUrl: string): Promise {
59 | return SvgConverter.fromImageUrl(imageUrl, 'image/gif')
60 | }
61 |
62 | static fromImageUrl(imageUrl: string, imageType: string): Promise {
63 | return new Promise(resolve => {
64 | let imageNode = new window.Image()
65 | imageNode.onload = () => {
66 | let canvasNode = document.createElement('canvas')
67 | canvasNode.width = imageNode.width
68 | canvasNode.height = imageNode.height
69 |
70 | let graphicsContext = canvasNode.getContext('2d')
71 | if (graphicsContext) {
72 | graphicsContext.drawImage(imageNode, 0, 0)
73 | } else {
74 | throw new Error('got no rendering context')
75 | }
76 |
77 | resolve({width: imageNode.width, height: imageNode.height, dataUrl: canvasNode.toDataURL(imageType)})
78 | }
79 | imageNode.crossOrigin = 'anonymous'
80 | imageNode.src = imageUrl
81 | })
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/Whiteboard.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import {ModeEnum, ResizeImageDirection} from './Constants'
4 | import {ChangeStrokeColor, ChangeStrokeWidth, EventNameEnum, EventStream} from './EventStream'
5 | import {EventStore, ImageData, MouseMoveData, PointData} from './EventStore'
6 | import {CursorPane} from './CursorPane'
7 | import {CanvasPane} from './CanvasPane'
8 |
9 |
10 | type Props = {
11 | events: EventStream,
12 | eventStore: EventStore,
13 | width: number,
14 | height: number,
15 | style: {
16 | backgroundColor: string
17 | }
18 | }
19 |
20 | type State = {
21 | eventStore: EventStore,
22 | mode: ModeEnum,
23 | layer: number,
24 | strokeWidth: number,
25 | strokeColor: string
26 | }
27 |
28 | export class Whiteboard extends React.Component {
29 |
30 | static defaultProps = {
31 | events: new EventStream(),
32 | eventStore: new EventStore(),
33 | width: 400,
34 | height: 400,
35 | style: {
36 | backgroundColor: 'none'
37 | }
38 | }
39 | props: Props
40 | state: State
41 |
42 | canvas?: CanvasPane
43 |
44 | constructor(props: Props) {
45 | super(props)
46 |
47 | this.state = {
48 | eventStore: props.eventStore,
49 | mode: ModeEnum.HAND,
50 | layer: 0,
51 | strokeWidth: 5,
52 | strokeColor: 'black'
53 | }
54 |
55 | this.canvas = null
56 | }
57 |
58 | getSvgElement(): SVGSVGElement | undefined {
59 | if (this.canvas) {
60 | return this.canvas.getSvgElement()
61 | }
62 | }
63 |
64 | componentDidMount() {
65 | this.setupEventHandler()
66 | }
67 |
68 | setupEventHandler() {
69 | this.props.events.on(EventNameEnum.SELECT_LAYER, this.selectLayer.bind(this))
70 | this.props.events.on(EventNameEnum.ADD_LAYER, this.addLayer.bind(this))
71 |
72 | this.props.events.on(EventNameEnum.START, this.startDrawing.bind(this))
73 | this.props.events.on(EventNameEnum.STOP, this.stopDrawing.bind(this))
74 |
75 | this.props.events.on(EventNameEnum.SET, (event: ChangeStrokeWidth | ChangeStrokeColor) => {
76 | if (event.key === 'strokeWidth') {
77 | this.changeStrokeWidth(event.value)
78 | }
79 | if (event.key === 'strokeColor') {
80 | this.changeStrokeColor(event.value)
81 | }
82 | })
83 |
84 | this.props.events.on(EventNameEnum.PUSH, this.pushPoint.bind(this))
85 |
86 | this.props.events.on(EventNameEnum.PASTE, this.pasteImage.bind(this))
87 | this.props.events.on(EventNameEnum.START_DRAGGING, this.startDragging.bind(this))
88 | this.props.events.on(EventNameEnum.STOP_DRAGGING, this.stopDragging.bind(this))
89 | this.props.events.on(EventNameEnum.DRAG, this.dragImage.bind(this))
90 | this.props.events.on(EventNameEnum.START_RESIZING, this.startResizing.bind(this))
91 | this.props.events.on(EventNameEnum.STOP_RESIZING, this.stopResizing.bind(this))
92 | this.props.events.on(EventNameEnum.RESIZE, this.resizeImage.bind(this))
93 |
94 | this.props.events.on(EventNameEnum.UNDO, this.undo.bind(this))
95 | this.props.events.on(EventNameEnum.REDO, this.redo.bind(this))
96 | this.props.events.on(EventNameEnum.CLEAR, this.clear.bind(this))
97 | }
98 |
99 | selectLayer(layer: number) {
100 | this.state.eventStore.selectLayer(layer)
101 | this.setState({
102 | layer: layer,
103 | eventStore: this.state.eventStore
104 | })
105 | }
106 |
107 | addLayer() {
108 | this.state.eventStore.addLayer()
109 | this.setState({eventStore: this.state.eventStore})
110 | }
111 |
112 | startDrawing(point: PointData) {
113 | this.state.eventStore.startDrawing(this.state.strokeWidth, this.state.strokeColor, point)
114 | this.setState({
115 | mode: ModeEnum.DRAW_LINE,
116 | eventStore: this.state.eventStore
117 | })
118 | }
119 |
120 | stopDrawing() {
121 | this.state.eventStore.stopDrawing()
122 | this.setState({
123 | mode: ModeEnum.HAND,
124 | eventStore: this.state.eventStore
125 | })
126 | }
127 |
128 | changeStrokeWidth(width: number) {
129 | this.state.eventStore.stopDrawing()
130 | this.setState({
131 | strokeWidth: width,
132 | eventStore: this.state.eventStore
133 | })
134 | }
135 |
136 | changeStrokeColor(color: string) {
137 | this.state.eventStore.stopDrawing()
138 | this.setState({
139 | strokeColor: color,
140 | eventStore: this.state.eventStore
141 | })
142 | }
143 |
144 | pushPoint(point: PointData) {
145 | this.state.eventStore.pushPoint(this.state.strokeWidth, this.state.strokeColor, point)
146 | this.setState({eventStore: this.state.eventStore})
147 | }
148 |
149 | pasteImage(image: ImageData) {
150 | this.state.eventStore.pasteImage(image)
151 | this.setState({eventStore: this.state.eventStore})
152 | }
153 |
154 | startDragging() {
155 | this.setState({mode: ModeEnum.DRAG_IMAGE})
156 | }
157 |
158 | stopDragging() {
159 | this.setState({mode: ModeEnum.HAND})
160 | }
161 |
162 | dragImage(move: MouseMoveData) {
163 | if (this.state.mode !== ModeEnum.DRAG_IMAGE) {
164 | return
165 | }
166 |
167 | this.state.eventStore.dragImage(move)
168 | this.setState({eventStore: this.state.eventStore})
169 | }
170 |
171 | startResizing(direction: ResizeImageDirection) {
172 | this.setState({mode: direction})
173 | }
174 |
175 | stopResizing() {
176 | this.setState({mode: ModeEnum.HAND})
177 | }
178 |
179 | resizeImage(move: MouseMoveData) {
180 | if (this.state.mode === ModeEnum.NW_RESIZE_IMAGE) {
181 | this.state.eventStore.nwResizeImage(move)
182 | this.setState({eventStore: this.state.eventStore})
183 | } else if (this.state.mode === ModeEnum.NE_RESIZE_IMAGE) {
184 | this.state.eventStore.neResizeImage(move)
185 | this.setState({eventStore: this.state.eventStore})
186 | } else if (this.state.mode === ModeEnum.SE_RESIZE_IMAGE) {
187 | this.state.eventStore.seResizeImage(move)
188 | this.setState({eventStore: this.state.eventStore})
189 | } else if (this.state.mode === ModeEnum.SW_RESIZE_IMAGE) {
190 | this.state.eventStore.swResizeImage(move)
191 | this.setState({eventStore: this.state.eventStore})
192 | }
193 | }
194 |
195 | undo() {
196 | this.state.eventStore.undo()
197 | this.setState({eventStore: this.state.eventStore})
198 | }
199 |
200 | redo() {
201 | this.state.eventStore.redo()
202 | this.setState({eventStore: this.state.eventStore})
203 | }
204 |
205 | clear() {
206 | this.state.eventStore.clear()
207 | this.setState({eventStore: this.state.eventStore})
208 | }
209 |
210 | render() {
211 | const wrapperStyle = {
212 | position: 'relative' as 'relative',
213 | width: this.props.width,
214 | height: this.props.height
215 | }
216 |
217 | const props = {...this.props, ...this.state}
218 |
219 | return (
220 |
221 |
222 | this.canvas = canvas} {...props}/>
223 |
224 | )
225 | }
226 | }
227 |
--------------------------------------------------------------------------------
/src/dummy.test.ts:
--------------------------------------------------------------------------------
1 | test('dummy', () => {
2 | expect(true).toBeTruthy()
3 | })
4 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import {ModeEnum, SvgElementEnum} from './Constants'
2 |
3 | export {Whiteboard} from './Whiteboard'
4 | export {ChangeStrokeColor, ChangeStrokeWidth, EventListener, EventNameEnum, EventStream, EventStreamProtocol} from './EventStream'
5 | export {
6 | EventStore,
7 | EventStoreProtocol,
8 | ImageData,
9 | ImageEvent,
10 | isPointEvent,
11 | isImageEvent,
12 | isReducedImageEvent,
13 | isReducedLineEvent,
14 | MouseMoveData,
15 | PointData,
16 | PointEvent,
17 | StopEvent
18 | } from './EventStore'
19 | export {SvgConverter} from './SvgConverter'
20 | export {ModeEnum, SvgElementEnum}
21 |
--------------------------------------------------------------------------------
/stories/Basic.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import {EventStore, EventStream, Whiteboard} from '../src/index'
5 |
6 |
7 | storiesOf('Basic', module)
8 | .add('plain', () => {
9 | const events = new EventStream()
10 | const eventStore = new EventStore()
11 |
12 | return (
13 |
14 | )
15 | })
16 | .add('background color', () => {
17 | const events = new EventStream()
18 | const eventStore = new EventStore()
19 | const style = {
20 | backgroundColor: 'lightyellow'
21 | }
22 |
23 | return (
24 |
25 | )
26 | })
27 | .add('container div', () => {
28 | const events = new EventStream()
29 | const eventStore = new EventStore()
30 | const style = {
31 | backgroundColor: 'lightyellow'
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 | )
39 | })
40 | .add('draw lines', () => {
41 | const events = new EventStream()
42 | const eventStore = new EventStore()
43 | const style = {
44 | backgroundColor: 'lightyellow'
45 | }
46 |
47 | requestAnimationFrame(() => {
48 | events.selectLayer(0)
49 |
50 | events.changeStrokeColor('blue')
51 | events.changeStrokeWidth(5)
52 | events.startDrawing(100, 100)
53 | events.pushPoint(100, 200)
54 | events.pushPoint(200, 200)
55 | events.stopDrawing()
56 |
57 | events.changeStrokeColor('green')
58 | events.changeStrokeWidth(7)
59 | events.startDrawing(200, 200)
60 | events.pushPoint(200, 100)
61 | events.pushPoint(100, 100)
62 | events.stopDrawing()
63 | })
64 |
65 | return (
66 |
67 |
68 |
69 | )
70 | })
71 |
--------------------------------------------------------------------------------
/stories/Image.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import {EventStore, EventStream, ModeEnum, SvgConverter, Whiteboard} from '../src/index'
5 |
6 |
7 | storiesOf('Image', module)
8 | .add('paste image', () => {
9 | const events = new EventStream()
10 | const eventStore = new EventStore()
11 | const style = {
12 | backgroundColor: 'lightyellow'
13 | }
14 |
15 | requestAnimationFrame(() => {
16 | SvgConverter.fromPngImage('https://4.bp.blogspot.com/-add9p_TiRII/V9PE77mE44I/AAAAAAAA9kk/1JeafQlm6-QFxt--xA5gMWrPl2EZyKTMgCLcB/s400/kjhou_board.png')
17 | .then(image => {
18 | events.pasteImage(50, 50, image.width, image.height, image.dataUrl)
19 | })
20 | })
21 |
22 | return (
23 |
24 |
25 |
26 | )
27 | })
28 | .add('resize image', () => {
29 | const events = new EventStream()
30 | const eventStore = new EventStore()
31 | const style = {
32 | backgroundColor: 'lightyellow'
33 | }
34 |
35 | requestAnimationFrame(() => {
36 | SvgConverter.fromPngImage('https://4.bp.blogspot.com/-add9p_TiRII/V9PE77mE44I/AAAAAAAA9kk/1JeafQlm6-QFxt--xA5gMWrPl2EZyKTMgCLcB/s400/kjhou_board.png')
37 | .then(image => {
38 | events.pasteImage(50, 50, image.width, image.height, image.dataUrl)
39 | events.startResizing(ModeEnum.NW_RESIZE_IMAGE)
40 | events.resizeImage(150, 150)
41 | events.stopResizing()
42 | })
43 | })
44 |
45 | return (
46 |
47 |
48 |
49 | )
50 | })
51 | .add('drag image', () => {
52 | const events = new EventStream()
53 | const eventStore = new EventStore()
54 | const style = {
55 | backgroundColor: 'lightyellow'
56 | }
57 |
58 | requestAnimationFrame(() => {
59 | SvgConverter.fromPngImage('https://4.bp.blogspot.com/-add9p_TiRII/V9PE77mE44I/AAAAAAAA9kk/1JeafQlm6-QFxt--xA5gMWrPl2EZyKTMgCLcB/s400/kjhou_board.png')
60 | .then(image => {
61 | events.pasteImage(50, 50, image.width, image.height, image.dataUrl)
62 | events.startResizing(ModeEnum.NW_RESIZE_IMAGE)
63 | events.resizeImage(150, 150)
64 | events.stopResizing()
65 | events.startDragging()
66 | events.dragImage(-150, -150)
67 | events.stopDragging()
68 | })
69 | })
70 |
71 | return (
72 |
73 |
74 |
75 | )
76 | })
77 | .add('download whiteboard', () => {
78 | const events = new EventStream()
79 | const eventStore = new EventStore()
80 | const style = {
81 | backgroundColor: 'lightyellow'
82 | }
83 |
84 | let whiteboardEl: Whiteboard, linkEl: HTMLAnchorElement
85 |
86 | requestAnimationFrame(() => {
87 | SvgConverter.fromPngImage('https://4.bp.blogspot.com/-add9p_TiRII/V9PE77mE44I/AAAAAAAA9kk/1JeafQlm6-QFxt--xA5gMWrPl2EZyKTMgCLcB/s400/kjhou_board.png')
88 | .then(image => {
89 | events.pasteImage(50, 50, image.width, image.height, image.dataUrl)
90 | events.startResizing(ModeEnum.NW_RESIZE_IMAGE)
91 | events.resizeImage(150, 150)
92 | events.stopResizing()
93 | events.startDragging()
94 | events.dragImage(-150, -150)
95 | events.stopDragging()
96 | events.stopDrawing()
97 |
98 | const svgEl = whiteboardEl.getSvgElement()
99 | SvgConverter.toPngData(svgEl)
100 | .then(data => {
101 | linkEl.href = data
102 | })
103 | })
104 | })
105 |
106 | return (
107 |
114 | )
115 | })
116 |
--------------------------------------------------------------------------------
/stories/Layer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import {EventStore, EventStream, Whiteboard} from '../src/index'
5 |
6 |
7 | storiesOf('Layer', module)
8 | .add('draw lines on an upper layer', () => {
9 | const events = new EventStream()
10 | const eventStore = new EventStore()
11 | const style = {
12 | backgroundColor: 'lightyellow'
13 | }
14 |
15 | requestAnimationFrame(() => {
16 | events.addLayer()
17 | events.selectLayer(1)
18 |
19 | events.changeStrokeColor('blue')
20 | events.changeStrokeWidth(10)
21 | events.startDrawing(100, 100)
22 | events.pushPoint(110, 200)
23 | events.pushPoint(120, 100)
24 | events.pushPoint(130, 200)
25 | events.pushPoint(140, 100)
26 | events.pushPoint(150, 200)
27 | events.pushPoint(160, 100)
28 | events.pushPoint(170, 200)
29 | events.pushPoint(180, 100)
30 | events.pushPoint(190, 200)
31 | events.pushPoint(200, 100)
32 | events.stopDrawing()
33 |
34 | events.changeStrokeColor('yellow')
35 | events.startDrawing(50, 130)
36 | events.pushPoint(250, 130)
37 | events.stopDrawing()
38 | events.startDrawing(50, 150)
39 | events.pushPoint(250, 150)
40 | events.stopDrawing()
41 | events.startDrawing(50, 170)
42 | events.pushPoint(250, 170)
43 | events.stopDrawing()
44 | })
45 |
46 | return (
47 |
48 |
49 |
50 | )
51 | })
52 | .add('draw lines on two layers', () => {
53 | const events = new EventStream()
54 | const eventStore = new EventStore()
55 | const style = {
56 | backgroundColor: 'lightyellow'
57 | }
58 |
59 | requestAnimationFrame(() => {
60 | events.addLayer()
61 | events.selectLayer(1)
62 |
63 | events.changeStrokeColor('blue')
64 | events.changeStrokeWidth(10)
65 | events.startDrawing(100, 100)
66 | events.pushPoint(110, 200)
67 | events.pushPoint(120, 100)
68 | events.pushPoint(130, 200)
69 | events.pushPoint(140, 100)
70 | events.pushPoint(150, 200)
71 | events.pushPoint(160, 100)
72 | events.pushPoint(170, 200)
73 | events.pushPoint(180, 100)
74 | events.pushPoint(190, 200)
75 | events.pushPoint(200, 100)
76 | events.stopDrawing()
77 |
78 | events.selectLayer(0)
79 |
80 | events.changeStrokeColor('yellow')
81 | events.startDrawing(50, 130)
82 | events.pushPoint(250, 130)
83 | events.stopDrawing()
84 | events.startDrawing(50, 150)
85 | events.pushPoint(250, 150)
86 | events.stopDrawing()
87 | events.startDrawing(50, 170)
88 | events.pushPoint(250, 170)
89 | events.stopDrawing()
90 | })
91 |
92 | return (
93 |
94 |
95 |
96 | )
97 | })
98 |
--------------------------------------------------------------------------------
/stories/UndoRedo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 |
4 | import {EventStore, EventStream, Whiteboard} from '../src/index'
5 |
6 |
7 | storiesOf('Undo & Redo', module)
8 | .add('draw lines', () => {
9 | const events = new EventStream()
10 | const eventStore = new EventStore()
11 | const style = {
12 | backgroundColor: 'lightyellow'
13 | }
14 |
15 | requestAnimationFrame(() => {
16 | events.selectLayer(0)
17 |
18 | events.changeStrokeColor('blue')
19 | events.changeStrokeWidth(5)
20 | events.startDrawing(100, 100)
21 | events.pushPoint(100, 200)
22 | events.pushPoint(200, 200)
23 | events.pushPoint(200, 100)
24 | events.pushPoint(110, 100)
25 | events.stopDrawing()
26 | })
27 |
28 | return (
29 |
30 |
31 |
32 | )
33 | })
34 | .add('undo', () => {
35 | const events = new EventStream()
36 | const eventStore = new EventStore()
37 | const style = {
38 | backgroundColor: 'lightyellow'
39 | }
40 |
41 | requestAnimationFrame(() => {
42 | events.selectLayer(0)
43 |
44 | events.changeStrokeColor('blue')
45 | events.changeStrokeWidth(5)
46 | events.startDrawing(100, 100)
47 | events.pushPoint(100, 200)
48 | events.pushPoint(200, 200)
49 | events.pushPoint(200, 100)
50 | events.pushPoint(110, 100)
51 | events.stopDrawing()
52 |
53 | events.undo()
54 | events.undo()
55 | })
56 |
57 | return (
58 |
59 |
60 |
61 | )
62 | })
63 | .add('redo', () => {
64 | const events = new EventStream()
65 | const eventStore = new EventStore()
66 | const style = {
67 | backgroundColor: 'lightyellow'
68 | }
69 |
70 | requestAnimationFrame(() => {
71 | events.selectLayer(0)
72 |
73 | events.changeStrokeColor('blue')
74 | events.changeStrokeWidth(5)
75 | events.startDrawing(100, 100)
76 | events.pushPoint(100, 200)
77 | events.pushPoint(200, 200)
78 | events.pushPoint(200, 100)
79 | events.pushPoint(110, 100)
80 | events.stopDrawing()
81 |
82 | events.undo()
83 | events.undo()
84 |
85 | events.redo()
86 | })
87 |
88 | return (
89 |
90 |
91 |
92 | )
93 | })
94 | .add('redo then draw line', () => {
95 | const events = new EventStream()
96 | const eventStore = new EventStore()
97 | const style = {
98 | backgroundColor: 'lightyellow'
99 | }
100 |
101 | requestAnimationFrame(() => {
102 | events.selectLayer(0)
103 |
104 | events.changeStrokeColor('blue')
105 | events.changeStrokeWidth(5)
106 | events.startDrawing(100, 100)
107 | events.pushPoint(100, 200)
108 | events.pushPoint(200, 200)
109 | events.pushPoint(200, 100)
110 | events.pushPoint(110, 100)
111 | events.stopDrawing()
112 |
113 | events.undo()
114 | events.undo()
115 |
116 | events.redo()
117 |
118 | events.startDrawing(200, 100) // then delete undo stack
119 | events.pushPoint(300, 100)
120 | events.stopDrawing()
121 |
122 | events.redo() // nothing to draw because undo stack is empty
123 | })
124 |
125 | return (
126 |
127 |
128 |
129 | )
130 | })
131 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist/",
4 | "sourceMap": true,
5 | "noImplicitAny": true,
6 | "module": "es6",
7 | "target": "es5",
8 | "jsx": "react",
9 | "moduleResolution": "node",
10 | "rootDirs": ["src", "stories"],
11 | "baseUrl": "src",
12 | "allowJs": true,
13 | "allowSyntheticDefaultImports": true
14 | },
15 | "include": [
16 | "./src/**/*"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: './src/index.ts',
5 | output: {
6 | path: path.resolve(__dirname + '/dist'),
7 | filename: 'index.js',
8 | library: 'ReactWhiteboard',
9 | libraryTarget: 'umd'
10 | },
11 | module: {
12 | rules: [{
13 | test: /\.tsx?$/,
14 | exclude: /node_modules/,
15 | use: {
16 | loader: 'ts-loader'
17 | }
18 | }]
19 | },
20 | resolve: {
21 | extensions: [ '.tsx', '.ts', '.js' ]
22 | },
23 | externals: {
24 | 'react': 'react',
25 | 'react-dom': 'react-dom'
26 | },
27 | mode: 'production',
28 | devtool: 'source-map'
29 | };
30 |
--------------------------------------------------------------------------------