{"version":3,"sources":["nodes-example.sf.css","nodes/Example/Button.sf","nodes/Example/Input.sf"],"names":[],"mappings":"AAEA,2B,CCmBE,mB,CACE,wC,CACA,W,CACA,uB,CACA,W,CACA,wB,CACA,wB,CACA,a,CACA,wB,CACA,oB,CACA,c,CACA,oB,CACA,kB,CACA,sB,CACA,e,CACA,iB,CACA,c,CDhBJ,6B,CCkBI,iB,CDfJ,iC,CCkBI,wC,CDfJ,2B,CAGA,4B,CEXC,W","file":"nodes-example.sf.css","sourcesContent":["/* Blackprint \n MIT Licensed */\nbpic-example-button .button {\n  display: inline-flex;\n  background: rgba(255, 255, 255, 0.1098039216);\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}\nbpic-example-button .button a {\n  position: relative;\n}\nbpic-example-button .button:hover {\n  background: rgba(255, 255, 255, 0.2352941176);\n}\nbpic-example-input textarea {\n  width: 100px;\n}\nbpic-example-logger textarea {\n  width: 100px;\n}\n\n/*# sourceMappingURL=nodes-example.sf.css.map */","## 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});"]}