{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-markus/src/components/tools/lively-connection-editor.js"],"names":["Morph","Connection","Rasterize","CloneDeepHTML","LivelyConnectionEditor","initialize","registerAttributes","registerButtons","activeChanged","findConnection","setConnection","saveConnection","sourceElement","elementByID","allConnectionsFor","ea","Error","drawArrowToSource","from","to","showElement","removeArrowToSource","target","registerHighlight","element","addEventListener","attacheCallback","updateConnectorHighlight","detachedCallback","updateEditors","get","connection","updateView","elementToCSSName","addPictureForElement","container","copiedSource","deepCopyAsHTML","setGlobalPosition","pt","appendChild","chooseNewElement","isSource","document","e","onPointerMove","capture","onPointerUp","saveNewElement","object","elementUnderHand","evt","path","composedPath","getClassName","toString","activityCheckbox","trackingCodeField","modifyingCodeField","removeEventListener","morph","onNewSourceButton","onNewTargetButton","onDestroyButton","remove","onSaveButton","onEditButton","onCopyButton","copiedConnection","openEditorForConnection","editor","openComponentInWindow","onToggleDirectionButton","livelyPrepareSave","livelyPreMigrate","livelyMigrate","other","livelyInspect","contentNode","inspector","livelyExample"],"mappings":"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","file":"lively-connection-editor.js","sourcesContent":["\"enable aexpr\";\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport Connection from \"src/components/halo/Connection.js\";\nimport Rasterize, { CloneDeepHTML } from 'src/client/rasterize.js';\n\nexport default class LivelyConnectionEditor extends Morph {\n  async initialize() {\n    this.registerAttributes([\"sourceId\", \"connectionId\"])\n    \n    this.windowTitle = \"LivelyConnectionEditor\";\n    this.registerButtons();\n    this.activityCheckbox.addEventListener(\"click\", () => this.activeChanged());\n    \n    this.findConnection()\n    if (this.connection) {\n      this.setConnection(this.connection)\n    }\n    \n    // this.get(\"#labelField\").value = this.getAttribute(\"data-mydata-label\") || 0;\n\n    this.trackingCodeField.editorLoaded().then(() => {this.trackingCodeField.doSave = () => this.saveConnection()})\n    this.modifyingCodeField.editorLoaded().then(() => {this.modifyingCodeField.doSave = () => this.saveConnection()})\n  }\n  \n  findConnection() {\n    if (this.sourceId && this.connectionId) {\n      var sourceElement = lively.elementByID(this.sourceId)\n      this.connection = Connection.allConnectionsFor(sourceElement).find(ea => ea.id == this.connectionId)\n      if (!this.connection) throw new Error(\"Could not find Connection \" + this.connectionId)\n    } \n  }\n  \n  /*MD ## UI MD*/\n  \n  drawArrowToSource(from, to) {\n    \n    if (from.pathHightlight) {\n      from.pathHightlight.remove()\n    }\n    // let line = [lively.getGlobalCenter(from), lively.getGlobalCenter(to)];\n    // from.pathHightlight = lively.showPath(line, \"rgba(80,180,80,1)\", true, false);\n\n    \n    from.pathHightlight = lively.showElement(to, false)\n    from.pathHightlight.innerHTML = \"\"\n    from.pathHightlight.style.border = \"3px dashed orange\"\n  }\n  \n  removeArrowToSource(from, target) {\n    if (from.pathHightlight) {\n      from.pathHightlight.remove()\n    }\n  }\n  \n  \n  \n  registerHighlight(element, target) {\n    element.addEventListener('mouseenter', () =>\n      this.drawArrowToSource(element, target))\n    element.addEventListener('mouseleave', () =>\n      this.removeArrowToSource(element, target))\n\n  }\n  \n  attacheCallback() {\n    this.updateConnectorHighlight()\n  }\n  \n  detachedCallback() {\n    if (this.connection) this.connection.removeConnectionLine()\n  }\n  \n  async updateConnectorHighlight() {\n    if (!this.connection) return\n    \n    this.connection.drawConnectionLine();\n  }\n  \n  updateEditors() {\n    this.get(\"#trackingCodeField\").editorLoaded().then(() => \n      this.get('#trackingCodeField').value = this.connection.getTrackingCode())\n    this.get(\"#modifyingCodeField\").editorLoaded().then(() => \n      this.get('#modifyingCodeField').value = this.connection.getModifyingCode())\n  }\n  \n  \n  setConnection(connection) {\n    \n    this.connection = connection;\n    if (this.connection) {\n      this.sourceId = this.connection.sourceId\n      this.connectionId = this.connection.id\n    }\n    this.updateView()\n  }\n\n  updateView() {\n    if (!this.connection) return\n    \n    this.get(\"#sourceLabel\").innerHTML = lively.elementToCSSName(this.connection.getSource());\n    this.get(\"#sourceProperty\").innerHTML = this.connection.sourceProperty;\n    \n    this.get(\"#targetLabel\").innerHTML = lively.elementToCSSName(this.connection.getTarget());\n    this.get(\"#targetProperty\").innerHTML = this.connection.targetProperty;\n    \n    this.activityCheckbox.checked = this.connection.isActive;\n    this.updateEditors()\n    this.registerHighlight(this.get(\"#sourceLabel\"), this.connection.getSource())\n    this.registerHighlight(this.get(\"#targetLabel\"), this.connection.getTarget())      \n    this.updateConnectorHighlight()    \n  }\n\n  addPictureForElement(element, container) {\n    let copiedSource = CloneDeepHTML.deepCopyAsHTML(element);\n    document.body.appendChild(copiedSource);\n    lively.setGlobalPosition(copiedSource, lively.pt(0, 0));\n    container.innerHTML = '';\n    container.appendChild(copiedSource);\n    copiedSource.style.position = 'relative';\n    copiedSource.style.top = '0px';\n    copiedSource.style.left = '0px';\n  }\n\n  chooseNewElement(isSource) {\n    this._toBeChangedElementIsSource = isSource;\n    \n     lively.addEventListener(\"Connectors\", document.body.parentElement, \"pointermove\",\n      e => this.onPointerMove(e), { capture: true });\n    lively.addEventListener(\"Connectors\", document.body.parentElement, \"pointerup\",\n      e => this.onPointerUp(e), { capture: true });\n  }\n  \n  saveNewElement(object) {\n    if(this._toBeChangedElementIsSource) {\n      this.connection.setSource(object);\n    } else {\n      this.connection.setTarget(object);\n    }\n    this.setConnection(this.connection);\n  }\n  \n  elementUnderHand(evt) {\n    var path = evt.composedPath().slice(evt.composedPath().indexOf(evt.srcElement))\n    return path[0]\n  }\n  \n  getClassName(object){\n    return (object.constructor&&object.constructor.name) || object.toString()\n  }\n  \n  activeChanged() {\n    this.connection.setActive(this.activityCheckbox.checked);\n  }\n\n  get activityCheckbox() {\n    return this.get(\"#activityCheckbox\");\n  }\n  \n  saveConnection() {\n    // this.connection.setLabel(this.get(\"#labelField\").value);\n    this.trackingCodeField.editorLoaded().then(() => this.connection.setTrackingCode(this.trackingCodeField.value))\n    this.modifyingCodeField.editorLoaded().then(() => this.connection.setModifyingCode(this.modifyingCodeField.value))\n  }\n  \n  get trackingCodeField() {\n    return this.get(\"#trackingCodeField\")\n  }\n  \n  get modifyingCodeField() {\n    return this.get(\"#modifyingCodeField\")\n  }\n  /*MD ## Events MD*/\n  \n  onPointerMove(evt) {\n    if (this.dropIndicator) this.dropIndicator.remove()\n    this.dropTarget = this.elementUnderHand(evt)\n    if (this.dropTarget) {\n      this.dropIndicator = lively.showElement(this.dropTarget)\n      this.dropIndicator.style.border = \"3px dashed rgba(0,100,0,0.5)\"\n      this.dropIndicator.innerHTML = \"\"\n    }\n  }\n  \n  onPointerUp(evt) {\n    lively.removeEventListener(\"Connectors\")\n    \n    if (this.dropIndicator) this.dropIndicator.remove()\n    var morph = this.elementUnderHand(evt)\n    \n    this.saveNewElement(morph);\n  }\n    \n  \n  onNewSourceButton() {\n    this.chooseNewElement(true)\n  }\n  \n  onNewTargetButton() {\n    this.chooseNewElement(false)\n  }\n \n  onDestroyButton() {\n    this.connection.destroy();\n    if (this.parentElement && this.parentElement.localName === 'lively-window') {\n      this.parentElement.remove();\n    } else {\n      this.remove();\n    }\n  }\n\n  onSaveButton() {\n    this.saveConnection();\n  }\n  \n  onEditButton() {\n    if (this.get(\"#editors\").style.display == \"block\") {\n      this.get(\"#editors\").style.display = \"none\"\n      // #TODO how windows and components.... haggle out their size... lässt zu wünschen übrig\n      this.parentElement.style.height = \"50px\" \n    } else {\n      this.get(\"#editors\").style.display = \"block\"\n      for (let ea of this.shadowRoot.querySelectorAll('lively-code-mirror')) {\n        ea.value = ea.value // force update\n      }\n      this.parentElement.style.height = \"250px\"\n    }\n    \n  }\n    \n  onCopyButton() {\n    let copiedConnection = this.connection.copyAndActivate();\n    this.openEditorForConnection(copiedConnection);\n  }\n  \n  async openEditorForConnection(connection) {\n    let editor = await lively.openComponentInWindow('lively-connection-editor')\n    editor.setConnection(connection)\n  }\n  \n  onToggleDirectionButton() {\n    this.connection.toggleDirection();\n    this.setConnection(this.connection);\n  }\n\n  /*MD ## Lively-specific API MD*/\n\n  // store something that would be lost\n  livelyPrepareSave() {\n    // this.setAttribute(\"data-mydata-label\", this.get(\"#labelField\").value)\n  }\n\n  livelyPreMigrate() {\n    // is called on the old object before the migration\n  }\n\n  livelyMigrate(other) {\n    // this.setConnection(other.connection);\n  }\n\n  livelyInspect(contentNode, inspector) {\n    // do nothing\n  }\n\n  async livelyExample() {\n    // this customizes a default instance to a pretty example\n    this.setConnection(new Connection(1, 'value', 2, 'value', false));\n  }\n\n}"]}