135 lines
3.7 KiB
JavaScript
135 lines
3.7 KiB
JavaScript
/* global Y, d3 */
|
|
|
|
const hooks = {
|
|
'magic-drawing': {
|
|
fillType: function (dom, type) {
|
|
initDrawingBindings(type, dom)
|
|
},
|
|
createDom: function (type) {
|
|
const dom = document.createElement('magic-drawing')
|
|
initDrawingBindings(type, dom)
|
|
return dom
|
|
}
|
|
}
|
|
}
|
|
|
|
window.onload = function () {
|
|
window.domBinding = new Y.DomBinding(window.yXmlType, document.body, { hooks })
|
|
}
|
|
|
|
window.addMagicDrawing = function addMagicDrawing () {
|
|
let mt = document.createElement('magic-drawing')
|
|
mt.setAttribute('data-yjs-hook', 'magic-drawing')
|
|
document.body.append(mt)
|
|
}
|
|
|
|
var renderPath = d3.svg.line()
|
|
.x(function (d) { return d[0] })
|
|
.y(function (d) { return d[1] })
|
|
.interpolate('basic')
|
|
|
|
function initDrawingBindings (type, dom) {
|
|
dom.contentEditable = 'false'
|
|
dom.setAttribute('data-yjs-hook', 'magic-drawing')
|
|
var drawing = type.get('drawing')
|
|
if (drawing === undefined) {
|
|
drawing = type.set('drawing', new Y.Array())
|
|
}
|
|
var canvas = dom.querySelector('.drawingCanvas')
|
|
if (canvas == null) {
|
|
canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
|
canvas.setAttribute('class', 'drawingCanvas')
|
|
canvas.setAttribute('viewbox', '0 0 100 100')
|
|
dom.insertBefore(canvas, null)
|
|
}
|
|
var clearDrawingButton = dom.querySelector('.clearDrawingButton')
|
|
if (clearDrawingButton == null) {
|
|
clearDrawingButton = document.createElement('button')
|
|
clearDrawingButton.setAttribute('type', 'button')
|
|
clearDrawingButton.setAttribute('class', 'clearDrawingButton')
|
|
clearDrawingButton.innerText = 'Clear Drawing'
|
|
dom.insertBefore(clearDrawingButton, null)
|
|
}
|
|
var svg = d3.select(canvas)
|
|
.call(d3.behavior.drag()
|
|
.on('dragstart', dragstart)
|
|
.on('drag', drag)
|
|
.on('dragend', dragend))
|
|
// create line from a shared array object and update the line when the array changes
|
|
function drawLine (yarray, svg) {
|
|
var line = svg.append('path').datum(yarray.toArray())
|
|
line.attr('d', renderPath)
|
|
yarray.observe(function (event) {
|
|
line.remove()
|
|
line = svg.append('path').datum(yarray.toArray())
|
|
line.attr('d', renderPath)
|
|
})
|
|
}
|
|
// call drawLine every time an array is appended
|
|
drawing.observe(function (event) {
|
|
event.removedElements.forEach(function () {
|
|
// if one is deleted, all will be deleted!!
|
|
svg.selectAll('path').remove()
|
|
})
|
|
event.addedElements.forEach(function (path) {
|
|
drawLine(path, svg)
|
|
})
|
|
})
|
|
// draw all existing content
|
|
for (var i = 0; i < drawing.length; i++) {
|
|
drawLine(drawing.get(i), svg)
|
|
}
|
|
|
|
// clear canvas on request
|
|
clearDrawingButton.onclick = function () {
|
|
drawing.delete(0, drawing.length)
|
|
}
|
|
|
|
var sharedLine = null
|
|
function dragstart () {
|
|
drawing.insert(drawing.length, [Y.Array])
|
|
sharedLine = drawing.get(drawing.length - 1)
|
|
}
|
|
|
|
// After one dragged event is recognized, we ignore them for 33ms.
|
|
var ignoreDrag = null
|
|
function drag () {
|
|
if (sharedLine != null && ignoreDrag == null) {
|
|
ignoreDrag = window.setTimeout(function () {
|
|
ignoreDrag = null
|
|
}, 10)
|
|
sharedLine.push([d3.mouse(this)])
|
|
}
|
|
}
|
|
|
|
function dragend () {
|
|
sharedLine = null
|
|
window.clearTimeout(ignoreDrag)
|
|
ignoreDrag = null
|
|
}
|
|
}
|
|
|
|
let y = new Y('html-editor-drawing-hook-example', {
|
|
connector: {
|
|
name: 'websockets-client',
|
|
url: 'http://127.0.0.1:1234'
|
|
}
|
|
})
|
|
|
|
window.yXml = y
|
|
window.yXmlType = y.define('xml', Y.XmlFragment)
|
|
window.undoManager = new Y.utils.UndoManager(window.yXmlType, {
|
|
captureTimeout: 500
|
|
})
|
|
|
|
document.onkeydown = function interceptUndoRedo (e) {
|
|
if (e.keyCode === 90 && e.metaKey) {
|
|
if (!e.shiftKey) {
|
|
window.undoManager.undo()
|
|
} else {
|
|
window.undoManager.redo()
|
|
}
|
|
e.preventDefault()
|
|
}
|
|
}
|