{"version":3,"names":["window","templates","_$_","sf","dom","$","__tmplt","_sf_internal","body_map","_replace","path","html","h","this","remove","reinitViews","append","document","body","apply","arguments","prepend","imports","task","Blackprint","loadScope","url","Context","getContext","Sketch","registerInterface","IFace","Button","init","clicked","ev","log","node","Input","constructor","super","iface","waitRepaint","data","on$value","now","afterRepaint","then","el","$el","offsetWidth","offsetHeight","length","attr","notifyEditorDataChanged","textChanged","Logger","m2v$log"],"sources":["nodes/Example/_init.sf","nodes/Example/Button.sf","nodes/Example/Input.sf","nodes/Example/Logger.sf"],"sourcesContent":[".js will run first before .sf\n\n## js-global\n// This script will run first, and then the other .sf files\n// depends on blackprint.config.js configuration\n\n// Wait until all dependencies ready\nawait imports.task();\n\n// Because .js and .sf is separated\n// we also need to call loadScope just like _init.js\nlet Blackprint = window.Blackprint.loadScope({\n\t// You can find the URL on Blackprint menu -> Modules\n\t// This will also be exported to JSON if this module's nodes is being used\n\turl: import.meta.url,\n});\n\n// Use sQuery\nlet $ = sf.$;\n\n// Global shared context (wait it to avoid race condition)\nlet Context = await Blackprint.getContext('Example');","## html\n<div class=\"node event\" style=\"transform: translate({{ x }}px, {{ y }}px)\">\n  <sf-template path=\"Blackprint/nodes/template/header.sf\"></sf-template>\n\n  <div class=\"content\">\n    <!-- Element event binding-> https://github.com/ScarletsFiction/ScarletsFrame/wiki/Element-Event -->\n    <div class=\"button\" @click=\"clicked(event)\">\n      <a>Trigger</a>\n    </div>\n\n    <div class=\"right-port\">\n      <sf-template path=\"Blackprint/nodes/template/output-port.sf\"></sf-template>\n    </div>\n  </div>\n\n  <sf-template path=\"Blackprint/nodes/template/other.sf\"></sf-template>\n</div>\n\n## scss-global\nbpic-example-button{\n  .button {\n    display: inline-flex;\n    background: #ffffff1c;\n    height: 30px;\n    box-shadow: 0 0 8px white;\n    width: 100px;\n    border: 2px solid #BFC0C0;\n    margin: 5px 5px 10px 10px;\n    color: #BFC0C0;\n    text-transform: uppercase;\n    text-decoration: none;\n    font-size: 14px;\n    letter-spacing: 1.5px;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    cursor: pointer;\n    a {\n      position: relative;\n    }\n    &:hover {\n      background: #ffffff3c;\n    }\n  }\n}\n\n## js-global\n// Register Sketch Interface\n// This Interface will extends Interface from Button.js\n// and add additional feature to control the User Interface for Sketch Editor\nBlackprint.Sketch.registerInterface('BPIC/Example/Button',\nclass ButtonIFace extends Context.IFace.Button {\n  // Life cycle: this will run after the element was attached on DOM\n  init(){\n    // To get the button element\n    // this.$el('.button')\n  }\n\n  // Override clicked function from Button.js\n  clicked(ev){\n    Context.log('BPIC/Example/Button (HTML Element)', \"'Trigger' button clicked, going to run the handler\");\n    this.node.clicked?.(ev);\n\n    // You can also\n    // super.clicked(ev);\n  }\n});","## html\n<div class=\"node input\" style=\"transform: translate({{ x }}px, {{ y }}px)\">\n  <sf-template path=\"Blackprint/nodes/template/routes.sf\"></sf-template>\n  <sf-template path=\"Blackprint/nodes/template/header.sf\"></sf-template>\n\n  <div class=\"content\">\n    <textarea sf-bind=\"data.value\" @input=\"textChanged(event)\"></textarea>\n\n    <div class=\"right-port\">\n      <sf-template path=\"Blackprint/nodes/template/output-port.sf\"></sf-template>\n    </div>\n  </div>\n\n  <sf-template path=\"Blackprint/nodes/template/other.sf\"></sf-template>\n</div>\n\n## scss-global\nbpic-example-input{\n\ttextarea{\n\t\twidth: 100px;\n\t}\n}\n\n## js-global\n// Register Sketch Interface\n// This Interface will extends Interface from Button.js\n// and add additional feature to control the User Interface for Sketch Editor\nBlackprint.Sketch.registerInterface('BPIC/Example/Input',\nclass InputIFace extends Context.IFace.Input {\n\tconstructor(node){\n\t\tsuper(node);\n\n\t\tlet iface = this;\n\t\tlet waitRepaint = false;\n\n\t\t// iface.data already being constructed fro Input.js\n\t\t// Let's just attach an two way binding event listener\n\t\t// Two way binding-> https://github.com/ScarletsFiction/ScarletsFrame/wiki/Input-Binding\n\n\t\t// Listener for two way binding when value from HTML input element is being received by the framework\n\t\t// I'm using this for auto scale the width/height of the textarea\n\t\tiface.data.on$value = function(now){\n\t\t\tif(waitRepaint) return;\n\n\t\t\twaitRepaint = true;\n\t\t\t$.afterRepaint().then(function(){\n\t\t\t\twaitRepaint = false;\n\n\t\t\t\t// Scale the input box depend on character length\n\t\t\t\tvar el = iface.$el('textarea');\n\n\t\t\t\t// Skip if textarea was larger than our auto control\n\t\t\t\t// I mean, if user have change the size manually\n\t\t\t\tif(el[0].offsetWidth > 150 || el[0].offsetHeight > 60)\n\t\t\t\t\treturn;\n\n\t\t\t\tif(now.length < 8)\n\t\t\t\t\tel.attr('style', '');\n\t\t\t\telse if(now.length >= 8 && now.length < 14)\n\t\t\t\t\tel.attr('style', 'width:'+(10*now.length)+'px');\n\t\t\t\telse if(now.length >= 14)\n\t\t\t\t\tel.attr('style', 'width:140px;height:50px');\n\t\t\t});\n\n\t\t\t// Let editor know if this iface changed and unsaved\n\t\t\tnode.notifyEditorDataChanged();\n\t\t}\n\t}\n\n\t// Event callback from @input\n\ttextChanged(ev){\n\t\t// Do nothing, this is just an example\n\t\t// console.log(\"Got Input:\", ev);\n\t}\n});","## html\n<div class=\"node\" style=\"transform: translate({{ x }}px, {{ y }}px)\">\n  <sf-template path=\"Blackprint/nodes/template/routes.sf\"></sf-template>\n  <sf-template path=\"Blackprint/nodes/template/header.sf\"></sf-template>\n\n  <div class=\"content\">\n    <textarea value=\"{{ log }}\"></textarea>\n\n    <div class=\"left-port\">\n      <sf-template path=\"Blackprint/nodes/template/input-port.sf\"></sf-template>\n    </div>\n  </div>\n\n  <sf-template path=\"Blackprint/nodes/template/other.sf\"></sf-template>\n</div>\n\n## scss-global\nbpic-example-logger{\n\ttextarea{\n\t\twidth: 100px;\n\t}\n}\n\n## js-global\nBlackprint.Sketch.registerInterface('BPIC/Example/Logger',\nclass extends Context.IFace.Logger {\n\t// This implementation can be changed into a function\n\n\t// Property of this scope\n\t/* iface == {\n\t\tx: 0,\n\t\ty: 0,\n\t\tinput: [],\n\t\toutput: [],\n\t\tproperty: [],\n\t} */\n\n\t// Listener when log value is being send to HTML input element by the framework\n\t// I'm using this for auto scale the width/height of the textarea\n\tm2v$log(now){\n\t\t// Scale the input box depend on character length\n\t\tvar el = this.$el('textarea');\n\n\t\t// Skip if textarea was larger than our auto control\n\t\t// I mean, if user have change the size manually\n\t\tif(el[0] == null || el[0].offsetWidth > 150 || el[0].offsetHeight > 60)\n\t\t\treturn;\n\n\t\tif(now.length < 8)\n\t\t\tel.attr('style', '');\n\t\telse if(now.length >= 8 && now.length < 14)\n\t\t\tel.attr('style', 'width:'+(10*now.length)+'px');\n\t\telse if(now.length >= 14)\n\t\t\tel.attr('style', 'width:140px;height:50px');\n\t}\n});"],"mappings":"mVAEAA,EAAAC,YAAAD,EAAAC,UAAA,QAAAC,EAAAC,GAAAC,KAAAD,GAAAE,EAAAC,EAAAN,EAAAC,UAAAD,EAAAO,aAAAP,EAAAO,cAAA,CAAAC,SAAA,GAAAC,SAAAC,EAAAC,GAAA,IAAAC,EAAAV,EAAAS,GAAA,OAAAE,KAAAL,SAAAE,IAAAG,KAAAL,SAAAE,GAAAI,SAAAD,KAAAE,aAAAF,KAAAE,YAAAH,GAAAC,KAAAL,SAAAE,GAAAE,CAAA,EAAAI,OAAAN,EAAAC,GAAAT,EAAAe,SAAAC,MAAAF,OAAAH,KAAAJ,SAAAU,MAAAN,KAAAO,WAAA,EAAAC,QAAAX,EAAAC,GAAAT,EAAAe,SAAAC,MAAAG,QAAAR,KAAAJ,SAAAU,MAAAN,KAAAO,WAAA,SAIAE,EAAAC,OAIA,IAAAC,EAAAxB,EAAAwB,WAAAC,UAAA,CAGAC,sBAIArB,EAAAF,GAAAE,EAGAsB,QAAAH,EAAAI,WAAA,W,qiBC+BAJ,EAAAK,OAAAC,kBAAA,sBACA,cAAAH,EAAAI,MAAAC,OAEAC,OAEA,CAIAC,QAAAC,GACAR,EAAAS,IAAA,2FACAvB,KAAAwB,KAAAH,UAAAC,EAIA,I,sgBCvCAX,EAAAK,OAAAC,kBAAA,qBACA,cAAAH,EAAAI,MAAAO,MACAC,YAAAF,GACAG,MAAAH,GAEA,IAAAI,EAAA5B,KACA6B,GAAA,EAQAD,EAAAE,KAAAC,SAAA,SAAAC,GACAH,IAEAA,GAAA,EACArC,EAAAyC,eAAAC,KAAA,WACAL,GAAA,EAGA,IAAAM,EAAAP,EAAAQ,IAAA,YAIAD,EAAA,GAAAE,YAAA,KAAAF,EAAA,GAAAG,aAAA,KAGAN,EAAAO,OAAA,EACAJ,EAAAK,KAAA,YACAR,EAAAO,QAAA,GAAAP,EAAAO,OAAA,GACAJ,EAAAK,KAAA,oBAAAR,EAAAO,OAAA,MACAP,EAAAO,QAAA,IACAJ,EAAAK,KAAA,mCACA,GAGAhB,EAAAiB,0BACA,CACA,CAGAC,YAAApB,GAEA,I,8dChDAX,EAAAK,OAAAC,kBAAA,sBACA,cAAAH,EAAAI,MAAAyB,OAcAC,QAAAZ,GAEA,IAAAG,EAAAnC,KAAAoC,IAAA,YAIA,MAAAD,EAAA,IAAAA,EAAA,GAAAE,YAAA,KAAAF,EAAA,GAAAG,aAAA,KAGAN,EAAAO,OAAA,EACAJ,EAAAK,KAAA,YACAR,EAAAO,QAAA,GAAAP,EAAAO,OAAA,GACAJ,EAAAK,KAAA,oBAAAR,EAAAO,OAAA,MACAP,EAAAO,QAAA,IACAJ,EAAAK,KAAA,mCACA,G","ignoreList":[]}