diff --git a/src/backend/matrix.js b/src/backend/matrix.js index d102e62..8d7596d 100644 --- a/src/backend/matrix.js +++ b/src/backend/matrix.js @@ -126,7 +126,7 @@ export default class MatrixBackend { if (msg.isRedacted()) { return; } // skipp redacted events if (isBoardObjectEvent(msg.getType())) { let age = Date.now() - msg.getDate().getTime(); - console.log("age ", age) + // console.log("age ", age) let animated = Date.now() - msg.getDate().getTime() < 10000; let toBeginningOfTimeline = !animated; if (msg.event.room_id === appData.matrixClient.currentRoomId) { diff --git a/src/paper-canvas.js b/src/paper-canvas.js index c9107b7..fb9f44c 100644 --- a/src/paper-canvas.js +++ b/src/paper-canvas.js @@ -1,7 +1,33 @@ // import { Point, Rectangle } from 'paper/dist/paper-core'; import { isBoardObjectEvent } from './backend/filter'; -import { parsePath, parseBezierPath, parsePoint,parsePointDeprecated } from './helper'; +import { parsePath, parseBezierPath, parsePoint, parsePointDeprecated } from './helper'; export const paper = require('paper'); +export class DrawFilter { + constructor() { + // this.opacity = 1.0 + // this.fillColor = null + // this.strokeColor = null + // this.boudingBox = false + this.filterFunc = function (event) { return true } + this.trueModifiaction = function (item) { } + this.falseModifiaction = function (item) { } + } + apply(event, item) { + if (this.filterFunc(event)) { + this.trueModifiaction(item) + } else { + this.falseModifiaction(item) + } + } +} +export class UserFilter extends DrawFilter { + constructor(userId) { + super() + this.userId = userId + this.filterFunc = function (event) { return event.sender === this.userId } + this.falseModifiaction = function (item) { item.opacity *= 0.2 } + } +} export default class PaperCanvas { constructor() { this.css_id = "paper-canvas"; @@ -9,8 +35,17 @@ export default class PaperCanvas { this.toolLayer = null this.drawLayer = null; this.canvas = null; + this.drawFilter = [] + } + addFilter(f) { + this.drawFilter.push(f) + this.reload(false, false) } - drawEvent(event, animated, toBeginningOfTimeline = false) { + clearFilter() { + this.drawFilter = [] + this.reload(false, false) + } + drawEvent(event, animated, toBeginningOfTimeline = false, fade = true) { let drawC = appData.drawingCanvas; function pathV1() { if (event.content.objtype != "p.path") { return } @@ -78,13 +113,21 @@ export default class PaperCanvas { case "text": addedItem = evText(); break; case "image": addedItem = evImage(); break; } - if(addedItem){ + if (addedItem) { + addedItem.data.event = event if (toBeginningOfTimeline) { addedItem.sendToBack() } - }else{ + } else { console.log("no addedItem") } + //filter: + this.drawFilter.forEach(f => f.apply(event, addedItem)) + if (fade) { + addedItem.tween({ opacity: 0.0 }, { opacity: addedItem.opacity }, 800) + } else { + addedItem.tween({ opacity: 1.0 }, { opacity: addedItem.opacity }, 400) + } } activateToolLayer() { @@ -169,7 +212,7 @@ export default class PaperCanvas { }) return p; } - addPathV3(pathContent, id, noFade = false) { + addPathV3(pathContent, id) { let segments = pathContent.segments.map((seg) => { let s; if (seg.split) { s = seg.split(" ") } @@ -189,9 +232,6 @@ export default class PaperCanvas { if (id != "") { p.data.id = id } - if (!noFade) { - p.tween({ opacity: 0.0 }, { opacity: 1.0 }, 800) - } return p; } @@ -206,7 +246,6 @@ export default class PaperCanvas { if (id != "") { p.data.id = id } - p.tween({ opacity: 0.0 }, { opacity: 1.0 }, 800) return p; } addPathV1(points, color, [pos, size], id = "") { @@ -221,7 +260,6 @@ export default class PaperCanvas { for (let i = 1; i < points.length; i++) { p.lineTo(new paper.Point(points[i][1], points[i][2])); } - p.tween({ opacity: 0.0 }, { opacity: 1.0 }, 800) return p } @@ -237,7 +275,6 @@ export default class PaperCanvas { if (id != "") { text.data.id = id } - text.tween({ opacity: 0.0 }, { opacity: 1.0 }, 800) return text } addImage(imageContent, id) { @@ -253,9 +290,13 @@ export default class PaperCanvas { image.data.id = id } image.bounds = new Rectangle({ center: position, size: size }); - image.tween({ opacity: 0.0 }, { opacity: 1.0 }, 800) + let placeholder = new paper.Path.Rectangle({ center: position, size: size, strokeColor: '#777777ff', strokeWidth: 3, dashArray: [20, 40] }) + placeholder.tween({dashOffset:0},{dashOffset:5000}, 60000) + placeholder.sendToBack() image.onLoad = (e) => { + placeholder.remove() image.bounds = new Rectangle({ center: position, size: size }); + // image.tween({ opacity: 0.0 }, { opacity: image.opacity }, 800) } // image.source = url return image @@ -266,7 +307,7 @@ export default class PaperCanvas { this.displayPaths.push(this.dispPath); this.dispPath = null; } - // for(p of this.displayPaths){ + // for (let p of this.displayPaths){ // p.remove(); // } } @@ -281,13 +322,13 @@ export default class PaperCanvas { drawBoundingBox(box) { // console.log("drawBoundingBox not implemented for paper-canvas") } - reload(animated = false) { + reload(animated = false, fade = true) { this.clear(); let starttime = Date.now(); // console.log("!! Paper Canvas redraw START"); appData.objectStore.allSorted().forEach(obj => { if (isBoardObjectEvent(obj.type)) { - this.drawEvent(obj, animated); + this.drawEvent(obj, animated, false, fade); } }); console.log("!! Paper Canvas redraw DONE in", Date.now() - starttime); diff --git a/src/tools/tool-eraser.js b/src/tools/tool-eraser.js index 0f38b85..63e1238 100644 --- a/src/tools/tool-eraser.js +++ b/src/tools/tool-eraser.js @@ -3,7 +3,7 @@ // import { sleep } from './paper-canvas'; import { GetToolStrokeWidthIndex } from "./line-style-selector"; import { mousePathToString, paperPathToString, pathPosSizeCorrection, setAlpha } from "../helper"; - +import { UserFilter } from "../paper-canvas"; export default class ToolEraser { constructor() { @@ -103,8 +103,13 @@ export default class ToolEraser { if (this.previewItem) { this.previewItem.visible = true } + appData.drawingCanvas.addFilter(new UserFilter(appData.matrixClient.client.getUserId())) } deactivate() { - this.previewItem.visible = false + if (this.previewItem != null) { + this.previewItem.visible = false + } + appData.drawingCanvas.clearFilter() + } } \ No newline at end of file