{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-mpm-debugging/src/components/widgets/lively-separator.js"],"names":["Morph","pt","Separator","initialize","lively","addEventListener","evt","onPointerMoveStart","originalLengths","Map","originalFlexs","getPreviousElement","selector","getAttribute","parentElement","querySelector","previousElementSibling","getNextElement","nextElementSibling","isHorizontal","getWidth","getHeight","element","getBoundingClientRect","width","height","getOriginalLength","get","setOriginalLength","l","set","getOriginalFlex","setOriginalFlex","setHeight","h","flex","newFlex","setFlex","style","setWidth","w","Number","isNaN","newWidth","Math","abs","getFlex","parseFloat","getComputedStyle","flexGrow","f","getLength","setLength","value","getEventLength","clientY","clientX","lastPointerDown","Date","now","count","rememberOriginals","dragOffset","document","documentElement","onPointerMove","onPointerMoveEnd","stopPropagation","force","prev","next","undefined","onClick","toggleCollapse","prevLength","lastPrevLength","newPrevLength","lastNextLength","delta","newNext","newPrev","preventDefault","removeEventListener","clickTime","livelyExample","setAttribute","a","createElement","id","backgroundColor","textContent","b","c","appendChild","display","flexDirection"],"mappings":"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","file":"lively-separator.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\n\nimport {pt}  from 'src/client/graphics.js';\n\nexport default class Separator extends Morph {\n  initialize() {\n    // console.log(\"intialize separator \" )\n    lively.addEventListener('lively', this,'pointerdown', evt => this.onPointerMoveStart(evt));\n    \n    \n    // we have to synthesize our own click\n    // lively.addEventListener('lively', this,'click', evt => this.onClick(evt));\n    \n    this.originalLengths = new Map()\n    this.originalFlexs = new Map()\n  }\n\n  getPreviousElement() {\n    var selector = this.getAttribute(\"prev\")\n    if (selector) return this.parentElement.querySelector(selector);\n    return this.previousElementSibling\n  }\n  \n  getNextElement() {\n    var selector = this.getAttribute(\"next\") \n    if (selector) return this.parentElement.querySelector(selector);\n    return this.nextElementSibling\n  }\n  \n  isHorizontal() {\n    return this.getWidth(this) > this.getHeight(this)\n  }\n\n  getWidth(element) {\n    if (!element) return 0\n    return element.getBoundingClientRect().width\n  }\n\n  getHeight(element) {\n    if (!element) return 0\n    return element.getBoundingClientRect().height\n  }\n\n  getOriginalLength(element) {\n    if (!element) return 0\n    return this.originalLengths.get(element)\n  }\n\n  setOriginalLength(element, l) {\n    if (!element) return\n    return this.originalLengths.set(element, l)\n  }\n\n  getOriginalFlex(element) {\n    if (!element) return 0\n    return this.originalFlexs.get(element)\n  }\n\n  setOriginalFlex(element, l) {\n    if (!element) return\n    return this.originalFlexs.set(element, l)\n  }\n\n  setHeight(element, h) {\n    if (!element) return\n    var flex = this.getOriginalFlex(element)\n    if (flex > 0 ) {\n      var newFlex = h / this.getOriginalLength(element) * flex\n      // console.log(\"new flex \" + newFlex)\n      this.setFlex(element, newFlex)\n    } else {\n      element.style.height = h + \"px\";\n    }\n  }\n\n  setWidth(element, w) {\n    \n    if (!element) return\n    var flex = this.getOriginalFlex(element)\n\n    // console.log('set width ' +element.id + \" \" + w + \" flex: \" + flex)\n\n    if (w == 0) {\n      element.style.width = w + \"px\";\n      this.setFlex(element, 0)\n      return \n    }\n\n    if (flex > 0 ) {\n      var newFlex = w / this.getOriginalLength(element) * flex\n      if (Number.isNaN(newFlex)) {\n        this.setFlex(element, flex)\n      } else {\n        this.setFlex(element, newFlex)\n        var newWidth = element.getBoundingClientRect().width\n        if (Math.abs(w - newWidth) > 10) {\n            // try again...  \n            newFlex = w / newWidth * this.getFlex(element)\n            // console.log('TRY AGAIN ', w, newWidth , \" -> \" + newFlex + \"flex\")\n            \n            this.setFlex(element, newFlex)\n        }\n        \n        \n      }\n    } else {\n      element.style.width = w + \"px\";\n    }\n  }\n  \n  getFlex(element) {\n    if (!element) return 0\n    return parseFloat(getComputedStyle(element).flexGrow) \n  }\n\n  setFlex(element, f) {\n    // console.log(\"set flex \" + element.id + \" \" + f)\n    if (f == 0) {\n      f = 0.0001; // we cannot distinguish between flex and not flex otherwise...\n    }\n    if (!element) return\n    element.style.flex = f \n  }\n\n  getLength(element) {\n    if (this.isHorizontal()) {\n      return this.getHeight(element)\n    } else {\n      return this.getWidth(element)\n    }\n  }\n\n  setLength(element, value) {\n    if (this.isHorizontal()) {\n      this.setHeight(element, value)\n    } else {\n      this.setWidth(element, value)\n    }\n  }\n\n\n  getEventLength(evt) {\n    if (this.isHorizontal()) {\n      return evt.clientY;\n    } else {\n      return evt.clientX;\n    }\n  }\n  \n  onPointerMoveStart(evt) {\n    this.lastPointerDown = Date.now()\n    \n    this.count = 0;\n    this.rememberOriginals(true);\n    this.dragOffset = this.getEventLength(evt);\n    \n    lively.addEventListener('lively-separator-drag', document.documentElement, 'pointermove', evt => this.onPointerMove(evt));\n    lively.addEventListener('lively-separator-drag', document.documentElement, 'pointerup', evt => this.onPointerMoveEnd(evt));\n\n    \n    \n    evt.stopPropagation();\n  }\n  \n  /*\n   * (un-)collabses prev element on click\n   */\n   \n  rememberOriginals(force) {\n    var prev = this.getPreviousElement()\n    var next = this.getNextElement()\n    if (force || this.getOriginalFlex(prev) === undefined) {\n      this.setOriginalFlex(prev, this.getFlex(prev))\n    }\n    if (force || this.getOriginalFlex(next) === undefined) {\n      this.setOriginalFlex(next, this.getFlex(next))\n    }\n\n    if (force || this.getOriginalLength(prev) === undefined) {\n      this.setOriginalLength(prev, this.getLength(prev))\n    }\n    if (force || this.getOriginalLength(next) === undefined) {\n      this.setOriginalLength(next, this.getLength(next))\n    }\n  }\n   \n   \n  onClick(evt) {\n    this.toggleCollapse()  \n  }\n  \n  toggleCollapse() {\n    var prev = this.getPreviousElement()\n    var next = this.getNextElement()\n    \n    this.rememberOriginals()\n    \n    var prevLength = this.getLength(prev);\n    if (this.lastPrevLength || prevLength < 2) {\n      if (!this.lastPrevLength) {\n        var newPrevLength = 200\n        this.setLength(prev, newPrevLength);\n        this.setLength(next, this.getLength(next));                \n      } else {\n        this.setLength(prev, this.lastPrevLength);\n        this.setLength(next, this.lastNextLength);        \n      }\n      delete this.lastPrevLength\n      delete this.lastNextLength;\n    } else {\n      this.lastPrevLength = this.getLength(prev);\n      this.lastNextLength = this.getLength(next);\n      if (this.getAttribute('reverse')) {\n        this.setLength(prev, this.lastPrevLength + this.lastNextLength)\n        this.setLength(next, 0)                \n      } else {\n        this.setLength(prev, 0)\n        this.setLength(next, this.lastPrevLength + this.lastNextLength)        \n      }\n    }\n  }\n  \n\n  onPointerMove(evt) {\n    if (!evt.clientX) return\n    this.count++ \n    if (this.count == 1) return; // ignore the first event because it seems to be off\n    \n    // DEBUG with: \n    // lively.showPoint(pt(evt.clientX, evt.clientY)).innerHTML = \"\" + this.count\n\n    var prev = this.getPreviousElement()\n    var next = this.getNextElement()\n    \n    // 1. calculate values\n    var delta = this.getEventLength(evt) - this.dragOffset\n      \n    var newNext = this.getOriginalLength(next) - delta\n    var newPrev = this.getOriginalLength(prev) + delta\n    \n    // console.log(\"drag \",newNext, newPrev )\n    \n    \n    // 2. constrain new values\n    if (newPrev < 0) {\n      if (next) newNext += newPrev \n      newPrev = 0;\n    }\n    if (newNext < 0) {\n      if (prev) newPrev += newNext; // jump to the max\n      newNext = 0;\n    }\n    // 3. update new values\n    this.setLength(prev, newPrev)\n    this.setLength(next, newNext)\n      \n    evt.stopPropagation();\n    evt.preventDefault();\n  }\n  \n  \n  onPointerMoveEnd(evt) {\n    evt.stopPropagation();\n    evt.preventDefault();\n    lively.removeEventListener('lively-separator-drag',  document.documentElement)\n    \n    \n    var clickTime = Date.now() - this.lastPointerDown;\n    if (clickTime < 200) this.onClick(evt)\n    \n  }\n\n\n  // replace yourself with an example showing yourself working in context\n  livelyExample() {\n    this.setAttribute('reverse', \"true\")\n    var a = document.createElement(\"div\")\n    a.id = \"red\"\n    a.style.backgroundColor = \"red\"\n    a.textContent = \"a\"\n    a.style.flex = 20\n    var b = document.createElement(\"div\")\n    b.style.backgroundColor = \"blue\"\n    b.id = \"blue\"\n    b.textContent = \"b\"\n    b.style.flex = 80\n    var c = document.createElement(\"div\")\n    this.parentElement.appendChild(c)\n    c.style.display = \"flex\"\n    c.style.flexDirection = \"row\";\n    c.appendChild(a)\n    c.appendChild(this)\n    c.appendChild(b)\n  }\n  \n\n\n}\n"]}