{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-bp2019/src/components/widgets/lively-paper.js"],"names":["Morph","paper","ContextMenu","CommandHistory","Path","Point","LivelyPaper","colours","getOffset","obj","getBoundingClientRect","initPaper","PaperScope","canvas","get","setup","initialize","canv_points","canv_points_current_stroke","undone_canv_points","lastPath","addEventListener","evt","onContextMenu","lively","e","onPointerDown","onPointerUp","strokes","registerButtons","adaptCanvasSize","window","setTimeout","load","console","log","bounds","style","width","setAttribute","height","view","viewSize","svg","querySelector","project","importSVG","clear","dispatchExecHandwritingRecognition","undoStroke","undo","length","push","pop","redoStroke","redo","onUndoStroke","onRedoStroke","activate","pointerType","button","stopPropagation","preventDefault","id","pointerId","offset","path","command","strokeColor","strokeWidth","x","clientX","left","y","clientY","top","moveTo","onPointerMove","p","lineTo","Date","now","lastPointerUp","activeLayer","getItems","class","filter","ea","intersects","forEach","type","stroke","container","execute","remove","unexecute","addChild","addCommand","simplify","removeEventListener","shiftKey","menu","openIn","document","body","save","innerHTML","appendChild","exportSVG","livelyPrepareSave","livelyMigrate","other","dispatchEvent","Event"],"mappings":"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","file":"lively-paper.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\nimport paper from \"src/external/paperjs/paper-core.js\";\n\nimport ContextMenu from 'src/client/contextmenu.js';\n\nimport CommandHistory  from \"src/client/command-history.js\";\n\nlet Path = paper.Path,\n\tPoint = paper.Point;\n\n\nexport default class LivelyPaper extends Morph {\n  \n  get colours() {\n    return ['red', 'green', 'blue', 'yellow', 'black'];\n  }\n  \n  getOffset(obj) {\n    return  obj.getBoundingClientRect();\n  } \n  \n  initPaper() {\n    if (this.paper) return this.paper;\n    this.paper = new paper.PaperScope();\n    this.canvas = this.get(\"#canvas\");\n    this.paper.setup(this.canvas);\n  }\n  \n  initialize() {\n    this.canv_points = [];\n    this.canv_points_current_stroke = [];\n    this.undone_canv_points = [];\n    this.lastPath = {};\n    this.initPaper();\n\n    this.addEventListener('contextmenu',  evt => this.onContextMenu(evt), false);\n\n    lively.addEventListener(\"drawboard\", this.canvas, \"pointerdown\", \n      (e) => this.onPointerDown(e));\n\n    lively.addEventListener(\"drawboard\", this.canvas, \"pointerup\", \n      (e) => this.onPointerUp(e));\n    \n    lively.addEventListener(\"drawboard\", this.canvas, \"pointerleave\",\n      (e) => this.onPointerUp(e));\n      \n    this.strokes = new CommandHistory();\n    \n    this.registerButtons();\n    \n    this.adaptCanvasSize()\n   \n    \n    // setTimeout(() => {\n    //  this.load(); // #Hack I don't get it when is paper.js ready? #Issue\n    // },10000)\n\n    var obj  =this\n    window.setTimeout(function()  {\n      try {\n        obj.load(); // #Hack I don't get it when is paper.js ready? #Issue\n      } catch(e) {\n        console.log(\"Load Paper error: \" + e)\n      }\n    },1000)\n\n  }\n  \n  adaptCanvasSize() {\n    var bounds = this.getBoundingClientRect()\n    this.canvas.style.width = bounds.width + \"px\"\n    this.canvas.setAttribute(\"width\", bounds.width + \"px\")\n    this.canvas.style.height = bounds.height + \"px\"\n    this.canvas.setAttribute(\"height\", bounds.height + \"px\")\n    this.paper.view.viewSize = { width: bounds.width, height: bounds.height }\n  }\n  \n  load() {\n    // #TODO we know that the state of the svg might diverge frome the state of paper\n    var svg = this.querySelector(\"svg\");\n    //if (!svg || !this.paper.project) {\n    //  setTimeout(() => this.load(), 100) // load later\n    //  return\n    // }\n    // lively.notify(\"[paper] loaded!\")\n    // console.log(\"project\", this.paper.project)\n    this.paper.project.importSVG(svg);\n  }\n\n  clear() {\n    this.canv_points = [];\n    this.canv_points_current_stroke = [];\n    this.undone_canv_points = [];\n    this.paper.project.clear();\n    this.dispatchExecHandwritingRecognition();\n  }\n  \n  undoStroke() {\n    this.strokes.undo();\n    \n    if (this.canv_points.length > 0) {\n      this.undone_canv_points.push(this.canv_points.pop());\n    }\n    this.dispatchExecHandwritingRecognition();\n  }\n\n  redoStroke() {\n    this.strokes.redo();\n    \n    if (this.undone_canv_points.length > 0) {\n      this.canv_points.push(this.undone_canv_points.pop())\n    }\n    this.dispatchExecHandwritingRecognition();\n  }\n  \n  onUndoStroke() {\n    this.undoStroke();\n  }\n  \n  onRedoStroke() {\n    this.redoStroke();\n  }\n  \n  onPointerDown(evt) {\n    this.paper.activate();\n    if (evt.pointerType == \"mouse\" && evt.button == 2) {\n      // context menu\n      return;\n    }\n    \n    if (evt.pointerType == \"pen\" && evt.button == 2) {\n       // context menu\n      // return\n    }\n    \n\n    evt.stopPropagation();\n    evt.preventDefault();\n    var id = evt.pointerId;   \n    this.offset  = this.getOffset(this.canvas);\n    var path = new Path();\n    \n    if (evt.pointerType == \"pen\" && evt.button == 2) {\n      path.command = \"delete\";\n      path.strokeColor = \"red\";\n    } else {\n      path.strokeColor = \"black\";\n      path.strokeWidth = 2;\n\n    }\n\n    this.lastPath[id] = path;\n    var x = evt.clientX - this.offset.left;\n    var y = evt.clientY - this.offset.top;\n\n    this.canv_points_current_stroke.push({\"x\": x, \"y\": y});\n    path.moveTo([x, y]); \n\n    lively.addEventListener(\"drawboard\", this.canvas, \"pointermove\", (e) => this.onPointerMove(e), false);\n  }  \n  \n  // Event handler called for each pointerdown event:\n  onPointerMove(evt) {\n    var id = evt.pointerId;   \n    var path = this.lastPath[id];\n    if (path) {\n      \n      var x = evt.clientX - this.offset.left;\n      var y = evt.clientY - this.offset.top;\n      \n      this.canv_points_current_stroke.push({\"x\": x, \"y\": y});\n      var p = {x:x, y:y};\n    \n      path.lineTo(p);\n    }\n  }\n\n  onPointerUp(evt) {\n    if (this.canv_points_current_stroke.length > 0) {\n      this.canv_points.push(this.canv_points_current_stroke);\n      this.canv_points_current_stroke = [];\n      this.dispatchExecHandwritingRecognition();\n    }\n    \n    this.setAttribute(\"last-changed\", Date.now())\n    this.lastPointerUp = Date.now(); // #Hack custom prevent default\n    evt.stopPropagation();\n    evt.preventDefault();\n    \n    var id = evt.pointerId;\n    var path = this.lastPath[id];\n    if (path) {\n      if (path.command == \"delete\") {\n        this.paper.project.activeLayer.getItems({class: Path})\n          .filter( ea => {\n            try { \n              return ea.intersects(path);  \n            } catch(e) { return false}\n          })\n          .forEach( ea => {\n            var command = {\n              type: \"delete\",\n              stroke: ea,\n              container: this.paper.project.activeLayer,\n              execute: function(){\n                this.stroke.remove();\n              },\n              unexecute: function(){\n                this.container.addChild(this.stroke);\n              }\n            };\n            this.strokes.addCommand(command);\n            command.execute();\n          });\n        path.remove();\n      } else {\n        path.simplify(1);\n\n        var command = {\n          type: \"stroke\",\n          stroke: path,\n          container: this.paper.project.activeLayer,\n          execute: function() {\n            this.container.addChild(this.stroke);\n          },\n          unexecute: function(){\n            this.stroke.remove();\n          }\n        }\n        this.strokes.addCommand(command)\n        \n      }\n      lively.removeEventListener(\"drawboard\", this.canvas, \"pointermove\");    \n      delete this.lastPath[id];\n\n    }\n  }\n  \n  onContextMenu(evt) {\n    // if (this.lastPointerUp && (this.lastPointerUp - Date.now() < 1000)) {\n    //     evt.stopPropagation();\n    //     evt.preventDefault();\n    //     return; // #HACK custom prevent default....\n    //   }\n      \n      if (!evt.shiftKey) {\n        evt.stopPropagation();\n        evt.preventDefault();\n\n        var menu = new ContextMenu(this, [\n              [\"clear\", () => this.clear()],\n              [\"undo stroke\", () => this.undoStroke()],\n            ]);\n        menu.openIn(document.body, evt, this);\n        return true;\n      }\n\n  }\n  \n  save() {\n    this.innerHTML = \"\";\n    this.appendChild(this.paper.project.exportSVG());\n  }\n  \n  livelyPrepareSave() {\n    this.save()\n  }\n  \n  livelyMigrate(other) {\n    var svg = other.paper.project.exportSVG();\n    this.initPaper();\n    this.paper.project.importSVG(svg);\n  }\n  \n  dispatchExecHandwritingRecognition() {\n    this.dispatchEvent(new Event(\"execHandwritingRecognition\"));\n  }\n  \n}\n      \n\n     \n      "]}