From 22363f5b741d14ce5337b0e3d8bd0ee192eea2b0 Mon Sep 17 00:00:00 2001 From: thfrei <7283497+thfrei@users.noreply.github.com> Date: Mon, 9 Nov 2020 23:04:46 +0100 Subject: [PATCH] working trilium canvas note --- .../infinite-drawing-canvas.js | 98 +++++++++++++++---- .../app/widgets/type_widgets/canvas_note.js | 24 +++-- 2 files changed, 95 insertions(+), 27 deletions(-) diff --git a/src/public/app/widgets/type_widgets/canvas-note-utils/infinite-drawing-canvas.js b/src/public/app/widgets/type_widgets/canvas-note-utils/infinite-drawing-canvas.js index cccba8200..72392e3af 100644 --- a/src/public/app/widgets/type_widgets/canvas-note-utils/infinite-drawing-canvas.js +++ b/src/public/app/widgets/type_widgets/canvas-note-utils/infinite-drawing-canvas.js @@ -13,11 +13,12 @@ img.src = deleteIcon; * const canvasState = new CanvasState(); * canvasState.on('selecting', ()=>{}); * canvasState.activate('selecting'); -Inspiration: https://stackoverflow.com/a/53917410 -https://developer.mozilla.org/en-US/docs/Web/API/EventTarget + Inspiration: https://stackoverflow.com/a/53917410 + https://developer.mozilla.org/en-US/docs/Web/API/EventTarget */ class CanvasState extends EventTarget { constructor(initialState) { + super(); this.states = { IDLE: 'idle', INTERACTING: 'interacting', @@ -99,6 +100,9 @@ class InfiniteCanvas { this.resetZoom = this.resetZoom.bind(this); this.cropCanvas = this.cropCanvas.bind(this); this.placeTextBox = this.placeTextBox.bind(this); + this.getInfiniteCanvas = this.getInfiniteCanvas.bind(this); + this.setInfiniteCanvas = this.setInfiniteCanvas.bind(this); + this.overrideFabric = this.overrideFabric.bind(this); } overrideFabric() { @@ -178,6 +182,55 @@ class InfiniteCanvas { return self; } + /** + * prepares object that has width, scale and height of current view + * @returns {{canvas: *, width: *, lastScale: number, height: *}} + */ + getInfiniteCanvas() { + const canvas = this.$canvas; + const canvasContent = canvas.toJSON(); + console.log('Canvas JSON', canvasContent); + const payload = { + width: this.width, + height: this.height, + lastScale: this.lastScale, + canvas: canvasContent, + }; + return payload; + } + + /** + * load infinite canvas json into canvas + * @param infiniteCanvasState + */ + async setInfiniteCanvas(infiniteCanvasState) { + const self = this; + const canvasContainer = this.$canvasContainer; + const {lastScale, width, height, canvas} = infiniteCanvasState; + + // console.log('sICJSON', payload, canvasContainer); + + return new Promise((resolve, reject) => { + const savedCanvas = canvas; + if (savedCanvas) { + this.$canvas.loadFromJSON(savedCanvas, function() { + console.log('loaded?'); + self.width = self.scaledWidth = parseInt(width, 10); + self.height = self.scaledHeight = parseInt(height, 10); + self.lastScale = lastScale; + self.$canvas.setWidth(self.width); + self.$canvas.setHeight(self.height); + self.$canvasContainer.width(self.width).height(self.height); + self.$canvas.renderAll(); + resolve(); + }); + } else { + console.log('payload empty?'); + reject('payload empty?'); + } + }); + } + /** * * @param {string} direction [top, left, right, bottom] @@ -205,7 +258,7 @@ class InfiniteCanvas { } let newWidth = this.scaledWidth, - newHeight = this.scaledHeight; + newHeight = this.scaledHeight; if (direction === 'top' || direction === 'bottom') { newHeight = this.scaledHeight + distance; @@ -246,7 +299,10 @@ class InfiniteCanvas { // place text box independent of touch type if (this.activatePlaceTextBox) { if (fabricEvent && fabricEvent.absolutePointer) { - this.placeTextBox(fabricEvent.absolutePointer.x, fabricEvent.absolutePointer.y); + this.placeTextBox( + fabricEvent.absolutePointer.x, + fabricEvent.absolutePointer.y, + ); this.activatePlaceTextBox = false; return; } @@ -284,13 +340,13 @@ class InfiniteCanvas { placeTextBox(x, y) { const canvas = this.$canvas; canvas.add( - new fabric.IText('Tap and Type', { - fontFamily: 'Arial', - // fontWeith: '200', - fontSize: 15, - left: x, - top: y, - }), + new fabric.IText('Tap and Type', { + fontFamily: 'Arial', + // fontWeith: '200', + fontSize: 15, + left: x, + top: y, + }), ); canvas.isDrawingMode = false; } @@ -333,8 +389,8 @@ class InfiniteCanvas { console.log('panstart', e); if ( - e.pointerType === 'touch' && - !this.drawWithTouch // pointertype mouse and canvas state mouse-drag + e.pointerType === 'touch' && + !this.drawWithTouch // pointertype mouse and canvas state mouse-drag ) { canvas.isDrawingMode = false; canvas.isDragging = true; @@ -454,14 +510,14 @@ class InfiniteCanvas { /** * Crop the canvas to the surrounding box of all elements on the canvas * - Learnings: we must NOT use fabric.Group, since this messes with items and then - SVG export is scwed. Items coordinates are not set correctly! - fabric.Group(items).aCoords does NOT work. - Therefore we need to get bounding box ourselves - Note: Or maybe we can use group, destroy and readd everything afterwards: - http://fabricjs.com/manage-selection - https://gist.github.com/msievers/6069778#gistcomment-2030151 - https://stackoverflow.com/a/31828460 + Learnings: we must NOT use fabric.Group, since this messes with items and then + SVG export is scwed. Items coordinates are not set correctly! + fabric.Group(items).aCoords does NOT work. + Therefore we need to get bounding box ourselves + Note: Or maybe we can use group, destroy and readd everything afterwards: + http://fabricjs.com/manage-selection + https://gist.github.com/msievers/6069778#gistcomment-2030151 + https://stackoverflow.com/a/31828460 */ async cropCanvas() { console.log('cropCanvas'); diff --git a/src/public/app/widgets/type_widgets/canvas_note.js b/src/public/app/widgets/type_widgets/canvas_note.js index 64f3dbbb4..c46dd1370 100644 --- a/src/public/app/widgets/type_widgets/canvas_note.js +++ b/src/public/app/widgets/type_widgets/canvas_note.js @@ -9,7 +9,7 @@ import _debounce from './canvas-note-utils/lib/lodash.debounce.js'; const TPL = `
+ overflow:auto; width: 100%; height: 70%; background-color: rgba(255,248,230,0.58); border: 1px double #efefef;">
@@ -25,7 +25,6 @@ const TPL = ` -