{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-function-completion/src/components/tools/lively-style-editor.js"],"names":["Morph","onStyleChange","HTMLElementStyleProxy","constructor","target","setupAccessors","toString","name","createAttributeAccessor","v","styleName","map","Object","defineProperty","get","style","set","newValue","enumerable","configurable","proxyFor","SVGElement","SVGElementStyleProxy","tagName","SelectionStyleProxy","t","ea","Number","getAttribute","setAttribute","proxies","nodes","filter","isMetaNode","lively","notify","forEach","LivelyStyleEditor","initialize","windowTitle","choosers","Map","addEventListener","evt","onUpdateTarget","detail","register","e","c","value","shadowRoot","querySelectorAll","useAlwaysCustom","setTarget","elementSelector","eventName","element","isInitializing","proxy","paths","length","hideTargetButton","display","chooser","styleObserver","disconnect","updateStyles","styles","innerHTML","cssText","split","item","draggable","dataTransfer","setData","stopPropagation","classList","toggle","appendChild","livelyMigrate","other"],"mappings":";;;;;;;;;;;;;;;AAIOA,W;;AACEC,mB,UAAAA,a;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAET,YAAMC,qBAAN,CAA4B;AAC1BC,oBAAYC,MAAZ,EAAoB;AAClB,eAAKA,MAAL,GAAcA,MAAd;AACA,eAAKC,cAAL;AAED;;AAEDC,mBAAW;AACT,iBAAO,MAAI,KAAKH,WAAL,CAAiBI,IAArB,GAA4B,OAA5B,GAAsC,KAAKH,MAA3C,GAAkD,GAAzD;AACD;;AAEDC,yBAAiB;AACf,eAAKG,uBAAL,CAA6B,MAA7B,EAAqC,iBAArC;AACA,eAAKA,uBAAL,CAA6B,aAA7B,EAA4C,aAA5C;AACA,eAAKA,uBAAL,CAA6B,aAA7B,EAA4C,aAA5C,EAA2DC,KAAKA,IAAI,IAApE;AACA,eAAKD,uBAAL,CAA6B,aAA7B,EAA4C,aAA5C;AACD;;AAEDA,gCAAwBD,IAAxB,EAA8BG,SAA9B,EAAyCC,MAAKF,KAAKA,CAAnD,EAAsD;AACpDG,iBAAOC,cAAP,CAAsB,IAAtB,EAA4BN,IAA5B,EAAkC;AAChCO,kBAAM;AACJ,qBAAO,KAAKV,MAAL,CAAYW,KAAZ,CAAkBL,SAAlB,CAAP;AACD,aAH+B;AAIhCM,gBAAIC,QAAJ,EAAc;AACZ,mBAAKb,MAAL,CAAYW,KAAZ,CAAkBL,SAAlB,IAA+BC,IAAIM,QAAJ,CAA/B;AACD,aAN+B;AAOhCC,wBAAY,IAPoB;AAQhCC,0BAAc;AARkB,WAAlC;AAUD;;AAED,eAAOC,QAAP,CAAgBhB,MAAhB,EAAwB;AACtB,cAAIA,kBAAkBiB,UAAtB,EAAkC;AAChC,mBAAO,IAAIC,oBAAJ,CAAyBlB,MAAzB,CAAP;AACD,WAFD,MAEO,IAAIA,OAAOmB,OAAP,IAAkB,kBAAtB,EAA0C;AAC/C,mBAAO,IAAIC,mBAAJ,CAAwBpB,MAAxB,CAAP;AACD,WAFM,MAEA;AACL,mBAAO,IAAIF,qBAAJ,CAA0BE,MAA1B,CAAP;AACD;AACF;AAvCyB;;;;;;;;;;;;;;;AA0C5B,YAAMkB,oBAAN,SAAmCpB,qBAAnC,CAAyD;;AAEvDG,yBAAiB;AACf,eAAKG,uBAAL,CAA6B,MAA7B,EAAqC,MAArC;AACA,eAAKA,uBAAL,CAA6B,aAA7B,EAA4C,QAA5C;AACA,eAAKA,uBAAL,CAA6B,aAA7B,EAA4C,cAA5C;AACA,eAAKA,uBAAL,CAA6B,aAA7B,EAA4C,kBAA5C,EAAgE,CAACC,CAAD,EAAGgB,CAAH,KAAS;AACvE,gBAAIhB,KAAK,QAAT,EAAmB;AACjB,qBAAO,CAAC,CAAD,EAAG,CAAH,EAAME,GAAN,CAAUe,MAAOC,OAAOF,EAAEG,YAAF,CAAe,cAAf,KAAkC,CAAzC,IAA8CF,EAA/D,CAAP;AACD,aAFD,MAEO;AACL,qBAAO,EAAP;AACD;AACF,WAND;AAOD;;AAEDlB,gCAAwBD,IAAxB,EAA8BG,SAA9B,EAAyCC,MAAKF,KAAKA,CAAnD,EAAsD;AACpDG,iBAAOC,cAAP,CAAsB,IAAtB,EAA4BN,IAA5B,EAAkC;AAChCO,kBAAM;AACJ,qBAAO,KAAKV,MAAL,CAAYwB,YAAZ,CAAyBlB,SAAzB,CAAP;AACD,aAH+B;AAIhCM,gBAAIC,QAAJ,EAAc;AACX,mBAAKb,MAAL,CAAYyB,YAAZ,CAAyBnB,SAAzB,EAAoCC,IAAIM,QAAJ,EAAc,KAAKb,MAAnB,CAApC;AACF,aAN+B;AAOhCc,wBAAY,IAPoB;AAQhCC,0BAAc;AARkB,WAAlC;AAUD;;AA1BsD;;;;;;;;;;;;;;;AAgCzD,YAAMK,mBAAN,SAAkCtB,qBAAlC,CAAwD;;AAEtDC,oBAAYC,MAAZ,EAAoB;AAClB,gBAAMA,MAAN;AACA,eAAK0B,OAAL,GAAe1B,OAAO2B,KAAP,CAAaC,MAAb,CAAoBN,MAAM;AACvC,mBAAO,CAACA,GAAGO,UAAX;AACD,WAFc,EAEZtB,GAFY,CAERe,MAAMxB,sBAAsBkB,QAAtB,CAA+BM,EAA/B,CAFE,CAAf;AAGD;;AAEDrB,yBAAiB;AACf,eAAKG,uBAAL,CAA6B,MAA7B;AACA,eAAKA,uBAAL,CAA6B,aAA7B;AACA,eAAKA,uBAAL,CAA6B,aAA7B;AACA,eAAKA,uBAAL,CAA6B,aAA7B;AACD;;AAEDA,gCAAwBD,IAAxB,EAA8BG,SAA9B,EAAyCC,MAAKF,KAAKA,CAAnD,EAAsD;AACpDG,iBAAOC,cAAP,CAAsB,IAAtB,EAA4BN,IAA5B,EAAkC;AAChCO,kBAAM;AACJ,qBAAO,KAAKgB,OAAL,CAAa,CAAb,KAAmB,KAAKA,OAAL,CAAa,CAAb,EAAgBvB,IAAhB,CAA1B;AACD,aAH+B;AAIhCS,gBAAIC,QAAJ,EAAc;AACZiB,qBAAOC,MAAP,CAAc,SAASlB,QAAvB;AACA,mBAAKa,OAAL,CAAaM,OAAb,CAAqBV,MAAMA,GAAGnB,IAAH,IAAWU,QAAtC;AACD,aAP+B;AAQhCC,wBAAY,IARoB;AAShCC,0BAAc;AATkB,WAAlC;AAWD;AA5BqD;;;;;;;;;;;;;;;AA+BzC,YAAMkB,iBAAN,SAAgCrC,KAAhC,CAAsC;AACnD,cAAMsC,UAAN,GAAmB;AACjB,eAAKC,WAAL,GAAmB,mBAAnB;AACA,eAAKC,QAAL,GAAgB,IAAIC,GAAJ,EAAhB;AACA,eAAK3B,GAAL,CAAS,gBAAT,EAA2B4B,gBAA3B,CAA4C,gBAA5C,EAA+DC,GAAD,IAAS;AACrE,iBAAKC,cAAL,CAAoBD,IAAIE,MAAJ,CAAWzC,MAA/B;AACD,WAFD;;AAIA,eAAK0C,QAAL,CAAc,cAAd,EAA8B,MAA9B;AACA,eAAKA,QAAL,CAAc,qBAAd,EAAqC,aAArC;AACA,eAAKA,QAAL,CAAc,qBAAd,EAAqC,aAArC;AACA,eAAKA,QAAL,CAAc,qBAAd,EAAqC,aAArC,EAAoD,QAApD,EAA8D,CAACC,CAAD,EAAGC,CAAH,KAASA,EAAEC,KAAzE;;AAEA,eAAKC,UAAL,CAAgBC,gBAAhB,CAAiC,qBAAjC,EAAwDf,OAAxD,CAAgEV,MAAM;AACpEA,eAAG0B,eAAH;AACD,WAFD;;AAIA,cAAI,KAAKhD,MAAT,EAAiB;AACf,iBAAKiD,SAAL,CAAe,KAAKjD,MAApB;AACD;AAEF;;AAED0C,iBAASQ,eAAT,EAA0B5C,SAA1B,EAAqC6C,YAAU,eAA/C,EAAgE5C,MAAK,CAACoC,CAAD,EAAGC,CAAH,KAASD,EAAEF,MAAF,CAASI,KAAvF,EAA8F;AAC5F,cAAIO,UAAU,KAAK1C,GAAL,CAASwC,eAAT,CAAd;AACA,eAAKd,QAAL,CAAcxB,GAAd,CAAkBwC,OAAlB,EAA2B9C,SAA3B;;AAEA8C,kBAAQd,gBAAR,CAAyBa,SAAzB,EAAoCR,KAAK;AACvC,gBAAI,CAAC,KAAK3C,MAAN,IAAgB,KAAKqD,cAAzB,EAAyC;AACzC;AACA,iBAAKC,KAAL,CAAWhD,SAAX,IAAwBC,IAAIoC,CAAJ,EAAOS,OAAP,CAAxB;AACD,WAJD;AAKD;;AAEDH,kBAAUjD,MAAV,EAAkB;AAChB,cAAIA,OAAOmB,OAAP,IAAkB,KAAtB,EAA6B;AAC1B,gBAAIoC,QAAQvD,OAAO+C,gBAAP,CAAwB,qBAAxB,CAAZ;AACA,gBAAIQ,MAAMC,MAAN,IAAgB,CAApB,EAAuB;AACrB;AACAxD,uBAASuD,MAAM,CAAN,CAAT;AACA;AACA;AACA;AACA;AACD;AACH;;AAED,eAAKf,cAAL,CAAoBxC,MAApB;AACD;;AAIDyD,2BAAmB;AACjB,eAAK/C,GAAL,CAAS,sBAAT,EAAiCC,KAAjC,CAAuC+C,OAAvC,GAAiD,MAAjD;AACD;;AAEDlB,uBAAexC,MAAf,EAAuB;AACrB,eAAKA,MAAL,GAAcA,MAAd;AACA,cAAI,CAAC,KAAKA,MAAV,EAAkB;AAClB;AACA,eAAKsD,KAAL,GAAaxD,sBAAsBkB,QAAtB,CAA+BhB,MAA/B,CAAb;AACA,eAAKqD,cAAL,GAAsB,IAAtB,CALqB,CAKO;AAC5B;AACA,eAAKjB,QAAL,CAAcJ,OAAd,CAAsB,CAACrB,KAAD,EAAQgD,OAAR,KAAoB;AACxCA,oBAAQd,KAAR,GAAgB,KAAKS,KAAL,CAAW3C,KAAX,CAAhB;AACD,WAFD;;AAIA,cAAI,KAAKiD,aAAT,EAAwB,KAAKA,aAAL,CAAmBC,UAAnB;AACxB,eAAKD,aAAL,GAAqB/D,cAAc,KAAKG,MAAnB,EAA2B,MAAM,KAAK8D,YAAL,EAAjC,CAArB;;AAEA,eAAKA,YAAL;;AAEA,eAAKT,cAAL,GAAsB,KAAtB;AAID;;AAGDS,uBAAe;AACb,cAAIC,SAAS,KAAKrD,GAAL,CAAS,SAAT,CAAb;AACAqD,iBAAOC,SAAP,GAAmB,EAAnB;AACA,eAAKhE,MAAL,CAAYW,KAAZ,CAAkBsD,OAAlB,CAA0BC,KAA1B,CAAgC,GAAhC,EAAqClC,OAArC,CAA6CV,MAAM;AACjD,gBAAInB,IAAJ,EAAU0C,KAAV;AACA,aAAC1C,IAAD,EAAO0C,KAAP,IAAgBvB,GAAG4C,KAAH,CAAS,IAAT,CAAhB;AACA,gBAAI/D,QAAQ0C,KAAZ,EAAmB;AACjB,kBAAIsB,oEAAkB,WAAlB,oFAAkChE,IAAlC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qDAA6C0C,KAA7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAJ;AACAsB,mBAAKC,SAAL,GAAiB,IAAjB;AACAD,mBAAK7B,gBAAL,CAAsB,WAAtB,EAAmCC,OAAO;AACxCA,oBAAI8B,YAAJ,CAAiBC,OAAjB,CAAyB,gBAAzB,EAA4C,GAAEnE,IAAK,KAAI0C,KAAM,EAA7D;AACAN,oBAAIgC,eAAJ;AACD,eAHD;AAIAJ,mBAAK7B,gBAAL,CAAsB,OAAtB,EAA+BC,OAAO;AACpC4B,qBAAKK,SAAL,CAAeC,MAAf,CAAsB,UAAtB;AACD,eAFD;AAGAV,qBAAOW,WAAP,CAAmBP,IAAnB;AAED;AACF,WAhBD;AAkBD;;AAGDQ,sBAAcC,KAAd,EAAqB;AACnB,eAAK5E,MAAL,GAAe4E,MAAM5E,MAArB;AAED;AA1GkD;;yBAAhCiC,iB","file":"lively-style-editor.js","sourcesContent":["/*\n * Style Editor\n *\n */\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport { onStyleChange } from 'utils';\n\nclass HTMLElementStyleProxy {\n constructor(target) {\n this.target = target\n this.setupAccessors()\n \n }\n \n toString() {\n return \"[\"+this.constructor.name + \" on: \" + this.target+\"]\"\n }\n \n setupAccessors() { \n this.createAttributeAccessor(\"fill\", \"backgroundColor\")\n this.createAttributeAccessor(\"strokeColor\", \"borderColor\")\n this.createAttributeAccessor(\"strokeWidth\", \"borderWidth\", v => v + \"px\")\n this.createAttributeAccessor(\"strokeStyle\", \"borderStyle\")\n }\n \n createAttributeAccessor(name, styleName, map= v => v) {\n Object.defineProperty(this, name, {\n get() { \n return this.target.style[styleName]; \n },\n set(newValue) { \n this.target.style[styleName] = map(newValue) \n },\n enumerable: true,\n configurable: true\n });\n }\n \n static proxyFor(target) {\n if (target instanceof SVGElement) {\n return new SVGElementStyleProxy(target)\n } else if (target.tagName == \"LIVELY-SELECTION\") {\n return new SelectionStyleProxy(target)\n } else {\n return new HTMLElementStyleProxy(target) \n }\n }\n}\n\nclass SVGElementStyleProxy extends HTMLElementStyleProxy {\n \n setupAccessors() { \n this.createAttributeAccessor(\"fill\", \"fill\")\n this.createAttributeAccessor(\"strokeColor\", \"stroke\")\n this.createAttributeAccessor(\"strokeWidth\", \"stroke-width\")\n this.createAttributeAccessor(\"strokeStyle\", \"stroke-dasharray\", (v,t) => {\n if (v == \"dashed\") {\n return [3,1].map(ea => (Number(t.getAttribute(\"stroke-width\") || 1) * ea)) \n } else {\n return \"\"\n }\n })\n }\n \n createAttributeAccessor(name, styleName, map= v => v) {\n Object.defineProperty(this, name, {\n get() { \n return this.target.getAttribute(styleName); \n },\n set(newValue) { \n this.target.setAttribute(styleName, map(newValue, this.target)); \n },\n enumerable: true,\n configurable: true\n });\n }\n\n}\n\n\n\nclass SelectionStyleProxy extends HTMLElementStyleProxy {\n \n constructor(target) {\n super(target)\n this.proxies = target.nodes.filter(ea => {\n return !ea.isMetaNode\n }).map(ea => HTMLElementStyleProxy.proxyFor(ea)) \n }\n\n setupAccessors() { \n this.createAttributeAccessor(\"fill\")\n this.createAttributeAccessor(\"strokeColor\")\n this.createAttributeAccessor(\"strokeWidth\")\n this.createAttributeAccessor(\"strokeStyle\")\n }\n \n createAttributeAccessor(name, styleName, map= v => v) {\n Object.defineProperty(this, name, {\n get() { \n return this.proxies[0] && this.proxies[0][name]; \n },\n set(newValue) { \n lively.notify(\"set \" + newValue)\n this.proxies.forEach(ea => ea[name] = newValue); \n },\n enumerable: true,\n configurable: true\n });\n }\n}\n\nexport default class LivelyStyleEditor extends Morph {\n async initialize() {\n this.windowTitle = \"LivelyStyleEditor\"; \n this.choosers = new Map()\n this.get(\"#target-button\").addEventListener(\"target-changed\", (evt) => {\n this.onUpdateTarget(evt.detail.target)\n })\n \n this.register('#fillChooser', 'fill')\n this.register('#strokeColorChooser', 'strokeColor')\n this.register('#strokeWidthChooser', 'strokeWidth')\n this.register('#strokeStyleChooser', 'strokeStyle', \"change\", (e,c) => c.value)\n \n this.shadowRoot.querySelectorAll(\"lively-crayoncolors\").forEach(ea => {\n ea.useAlwaysCustom();\n })\n \n if (this.target) {\n this.setTarget(this.target)\n }\n \n }\n \n register(elementSelector, styleName, eventName=\"value-changed\", map= (e,c) => e.detail.value) {\n var element = this.get(elementSelector)\n this.choosers.set(element, styleName)\n \n element.addEventListener(eventName, e => {\n if (!this.target || this.isInitializing) return;\n // lively.notify(\"set \" + styleName + \" \" + map(e, this.target))\n this.proxy[styleName] = map(e, element)\n }); \n }\n \n setTarget(target) {\n if (target.tagName == \"svg\") {\n var paths = target.querySelectorAll(\":not(marker) > path\")\n if (paths.length == 1) {\n // we are a single path... the user wan's to style it!\n target = paths[0]\n // either we do this... or we do the magic in the proxies? \n // e.g. modifying all paths when editing an svg... \n // part of the problem is that we currently have problems selecting \n // the contents of the svg...\n }\n }\n \n this.onUpdateTarget(target)\n }\n\n \n \n hideTargetButton() {\n this.get(\"lively-target-button\").style.display = \"none\"\n }\n \n onUpdateTarget(target) {\n this.target = target\n if (!this.target) return\n // dispatch to a proxy that does the translation work \n this.proxy = HTMLElementStyleProxy.proxyFor(target)\n this.isInitializing = true; // cheap #COP\n // fill the style editor with values found in the target\n this.choosers.forEach((style, chooser) => {\n chooser.value = this.proxy[style] \n })\n\n if (this.styleObserver) this.styleObserver.disconnect();\n this.styleObserver = onStyleChange(this.target, () => this.updateStyles());\n \n this.updateStyles()\n \n this.isInitializing = false;\n \n \n \n } \n \n \n updateStyles() {\n var styles = this.get(\"#styles\")\n styles.innerHTML = \"\"\n this.target.style.cssText.split(\";\").forEach(ea => {\n let name, value;\n [name, value] = ea.split(/: /)\n if (name && value) {\n var item =
{name} {value}
\n item.draggable = true\n item.addEventListener(\"dragstart\", evt => { \n evt.dataTransfer.setData(\"lively/cssText\", `${name}: ${value}`)\n evt.stopPropagation();\n })\n item.addEventListener(\"click\", evt => {\n item.classList.toggle(\"selected\")\n })\n styles.appendChild(item)\n \n }\n })\n\n }\n \n \n livelyMigrate(other) {\n this.target = other.target\n \n }\n}"]}