@blockly/plugin-workspace-search
Version:
A Blockly plugin that adds workspace search support.
3 lines • 9.34 kB
JavaScript
/*! For license information please see index.js.LICENSE.txt */
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("blockly/core"));else if("function"==typeof define&&define.amd)define(["blockly/core"],e);else{var s="object"==typeof exports?e(require("blockly/core")):e(t.Blockly);for(var i in s)("object"==typeof exports?exports:t)[i]=s[i]}}(this,(t=>(()=>{"use strict";var e={370:e=>{e.exports=t}},s={};function i(t){var n=s[t];if(void 0!==n)return n.exports;var o=s[t]={exports:{}};return e[t](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};i.r(n),i.d(n,{WorkspaceSearch:()=>h});var o=i(370);const l=function(){let t=!1;return function(){if(t)return;t=!0;const e=document.createElement("style");e.id="blockly-ws-search-style";const s=document.createTextNode("path.blocklyPath.blockly-ws-search-highlight {\n fill: #000;\n }\n path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {\n fill: grey;\n }\n .blockly-ws-search-close-btn {\n background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aCBkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) no-repeat top left;\n }\n .blockly-ws-search-next-btn {\n background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aCBkPSJNNy40MSA4LjU5TDEyIDEzLjE3bDQuNTktNC41OEwxOCAxMGwtNiA2LTYtNiAxLjQxLTEuNDF6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PC9zdmc+) no-repeat top left;\n }\n .blockly-ws-search-previous-btn {\n background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aCBkPSJNNy40MSAxNS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTRsLTYtNi02IDZ6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==) no-repeat top left;\n }\n .blockly-ws-search {\n background: #fff;\n border: solid lightgrey 0.5px;\n box-shadow: 0px 10px 20px grey;\n justify-content: center;\n padding: 0.25em;\n position: absolute;\n z-index: 70;\n }\n .blockly-ws-search-input input {\n border: none;\n }\n .blockly-ws-search button {\n border: none;\n padding-left: 6px;\n padding-right: 6px;\n }\n .blockly-ws-search-actions {\n display: flex;\n }\n .blockly-ws-search-container {\n display: flex;\n }\n .blockly-ws-search-content {\n display: flex;\n }");e.appendChild(s),document.head.insertBefore(e,document.head.firstChild)}}();class h{constructor(t){this.workspace=t,this.id="workspaceSearch",this.htmlDiv=null,this.actionDiv=null,this.inputElement=null,this.textInputPlaceholder="Search",this.blocks=[],this.currentBlockIndex=-1,this.searchText="",this.searchOnInput=!0,this.caseSensitive=!1,this.preserveSelected=!0,this.boundEvents=[]}init(){this.workspace.getComponentManager().addComponent({component:this,weight:0,capabilities:[o.ComponentManager.Capability.POSITIONABLE]}),l(),this.createDom(),this.setVisible(!1),this.workspace.resize()}dispose(){for(const t of this.boundEvents)o.browserEvents.unbind(t);this.boundEvents.length=0,this.htmlDiv&&(this.htmlDiv.remove(),this.htmlDiv=null),this.actionDiv=null,this.inputElement=null}createDom(){const t=this.workspace.getInjectionDiv();this.addEvent(t,"keydown",this,(t=>this.onWorkspaceKeyDown(t))),this.htmlDiv=document.createElement("div"),o.utils.dom.addClass(this.htmlDiv,"blockly-ws-search");const e=document.createElement("div");o.utils.dom.addClass(e,"blockly-ws-search-container");const s=document.createElement("div");o.utils.dom.addClass(s,"blockly-ws-search-content"),e.appendChild(s);const i=document.createElement("div");o.utils.dom.addClass(i,"blockly-ws-search-input"),this.inputElement=this.createTextInput(),this.addEvent(this.inputElement,"keydown",this,(t=>this.onKeyDown(t))),this.addEvent(this.inputElement,"input",this,(()=>this.onInput())),this.addEvent(this.inputElement,"click",this,(()=>{var t;this.searchAndHighlight(this.searchText,this.preserveSelected),null===(t=this.inputElement)||void 0===t||t.select()})),i.appendChild(this.inputElement),s.appendChild(i),this.actionDiv=document.createElement("div"),o.utils.dom.addClass(this.actionDiv,"blockly-ws-search-actions"),s.appendChild(this.actionDiv);const n=this.createNextBtn();n&&this.addActionBtn(n,(()=>this.next()));const l=this.createPreviousBtn();l&&this.addActionBtn(l,(()=>this.previous()));const h=this.createCloseBtn();h&&(this.addBtnListener(h,(()=>this.close())),e.appendChild(h)),this.htmlDiv.appendChild(e),t.insertBefore(this.htmlDiv,this.workspace.getParentSvg())}addEvent(t,e,s,i){const n=o.browserEvents.conditionalBind(t,e,s,i);this.boundEvents.push(n)}addActionBtn(t,e){var s;this.addBtnListener(t,e),null===(s=this.actionDiv)||void 0===s||s.appendChild(t)}createTextInput(){const t=document.createElement("input");return t.type="text",t.setAttribute("placeholder",this.textInputPlaceholder),t}createNextBtn(){return this.createBtn("blockly-ws-search-next-btn","Find next")}createPreviousBtn(){return this.createBtn("blockly-ws-search-previous-btn","Find previous")}createCloseBtn(){return this.createBtn("blockly-ws-search-close-btn","Close search bar")}createBtn(t,e){const s=document.createElement("button");return o.utils.dom.addClass(s,t),s.setAttribute("aria-label",e),s}addBtnListener(t,e){this.addEvent(t,"click",this,e),this.addEvent(t,"keydown",this,(t=>{"Enter"===t.key?(e(t),t.preventDefault()):"Escape"===t.key&&this.close(),t.stopPropagation()}))}getBoundingRectangle(){return null}position(t,e){this.htmlDiv&&(this.workspace.RTL?this.htmlDiv.style.left=t.absoluteMetrics.left+"px":t.toolboxMetrics.position===o.TOOLBOX_AT_RIGHT?this.htmlDiv.style.right=t.toolboxMetrics.width+"px":this.htmlDiv.style.right="0",this.htmlDiv.style.top=t.absoluteMetrics.top+"px")}onInput(){if(this.searchOnInput&&this.inputElement){const t=this.inputElement.value.trim();t!==this.searchText&&this.searchAndHighlight(t,this.preserveSelected)}}onKeyDown(t){if("Escape"===t.key)this.close();else if("Enter"===t.key)if(this.searchOnInput)t.shiftKey?this.previous():this.next();else{if(!this.inputElement)return;const t=this.inputElement.value.trim();t!==this.searchText&&this.searchAndHighlight(t,this.preserveSelected)}}onWorkspaceKeyDown(t){(t.ctrlKey||t.metaKey)&&"f"===t.key&&(this.open(),t.preventDefault(),t.stopPropagation())}previous(){this.setCurrentBlock(this.currentBlockIndex-1)}next(){this.setCurrentBlock(this.currentBlockIndex+1)}setSearchPlaceholder(t){this.textInputPlaceholder=t,this.inputElement&&this.inputElement.setAttribute("placeholder",this.textInputPlaceholder)}setCurrentBlock(t){if(!this.blocks.length)return;let e=this.blocks[this.currentBlockIndex];e&&this.unhighlightCurrentSelection(e),this.currentBlockIndex=(t%this.blocks.length+this.blocks.length)%this.blocks.length,e=this.blocks[this.currentBlockIndex],this.highlightCurrentSelection(e),this.workspace.centerOnBlock(e.id,!1)}open(){var t,e;this.setVisible(!0),null===(t=this.inputElement)||void 0===t||t.focus(),null===(e=this.inputElement)||void 0===e||e.select(),this.searchText&&this.searchAndHighlight(this.searchText)}close(){this.setVisible(!1),this.workspace.markFocused(),this.clearBlocks()}setVisible(t){this.htmlDiv&&(this.htmlDiv.style.display=t?"flex":"none")}searchAndHighlight(t,e){const s=this.blocks[this.currentBlockIndex];this.searchText=t.trim(),this.clearBlocks(),this.blocks=this.getMatchingBlocks(this.workspace,this.searchText,this.caseSensitive),this.highlightSearchGroup(this.blocks);let i=0;e&&(i=this.blocks.indexOf(s),i=i>-1?i:0),this.setCurrentBlock(i)}getSearchPool(t){return t.getAllBlocks(!0).filter((t=>{const e=t.getSurroundParent();return!e||!e.isCollapsed()}))}isBlockMatch(t,e,s){let i="";if(t.isCollapsed())i=t.toString();else{const e=[];t.inputList.forEach((t=>{t.fieldRow.forEach((t=>{e.push(t.getText())}))})),i=e.join(" ").trim()}return s||(i=i.toLowerCase()),i.indexOf(e)>-1}getMatchingBlocks(t,e,s){return e?(this.caseSensitive||(e=e.toLowerCase()),this.getSearchPool(t).filter((t=>this.isBlockMatch(t,e,s)))):[]}clearBlocks(){this.unhighlightSearchGroup(this.blocks);const t=this.blocks[this.currentBlockIndex];t&&this.unhighlightCurrentSelection(t),this.currentBlockIndex=-1,this.blocks=[]}highlightCurrentSelection(t){const e=t.pathObject.svgPath;o.utils.dom.addClass(e,"blockly-ws-search-current")}unhighlightCurrentSelection(t){const e=t.pathObject.svgPath;o.utils.dom.removeClass(e,"blockly-ws-search-current")}highlightSearchGroup(t){t.forEach((t=>{const e=t.pathObject.svgPath;o.utils.dom.addClass(e,"blockly-ws-search-highlight")}))}unhighlightSearchGroup(t){t.forEach((t=>{const e=t.pathObject.svgPath;o.utils.dom.removeClass(e,"blockly-ws-search-highlight")}))}}return n})()));
//# sourceMappingURL=index.js.map