\n\n## scss-global\n// Element name based on current path, BPIC/Decoration/Group/Default.sf\nsf-space[blackprint] .nodes bpic-decoration-group-default .node {\n\tbackground: #b8b8ff6e;\n\tpointer-events: none;\n\t&.highlighted {\n\t\tbox-shadow: 0 0 20px 3px #fbff00;\n\t\toutline: 2px solid yellow;\n\t}\n\t.text-content{\n\t\tpadding: 5px;\n\t\tfont-size: 12px;\n\t\twhite-space: pre-wrap;\n\t\toverflow: hidden;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n\t.header{\n\t\tbackground: #b8b8ff91;\n\t\tfont-weight: bold;\n\t\tfont-size: 14px;\n\t\tpointer-events: all;\n\t\twhite-space: pre-line;\n\t}\n\t.other{\n\t\tcolor: white;\n\t}\n\n\t.sides {\n\t\tpointer-events: all;\n\t\tdiv{ position: absolute; opacity: 0.01;}\n\n\t\t// n= north, s= south, w= west, e= east\n\t\t.nw{cursor: nw-resize; top: 0; left: 0; width: 5px; height: 5px;}\n\t\t.ne{cursor: ne-resize; top: 0; right: 0; width: 5px; height: 5px;}\n\t\t.se{cursor: se-resize; bottom: 0; right: 0; width: 5px; height: 5px;}\n\t\t.sw{cursor: sw-resize; bottom: 0; left: 0; width: 5px; height: 5px;}\n\n\t\t.n{cursor: n-resize; top: 0; left: 0; margin-left: 5px; width: calc(100% - 10px); height: 5px;}\n\t\t.w{cursor: w-resize; top: 0; left: 0; margin-top: 5px; width: 5px; height: calc(100% - 10px);}\n\t\t.s{cursor: s-resize; bottom: 0; left: 0; margin-left: 5px; width: calc(100% - 10px); height: 5px;}\n\t\t.e{cursor: e-resize; top: 0; right: 0; margin-top: 5px; width: 5px; height: calc(100% - 10px);}\n\t}\n}\n\n\n## js-global\nBlackprint.Sketch.registerInterface('BPIC/Decoration/Group/Default',\nclass extends Blackprint.Interface{\n\tconstructor(node){\n\t\tsuper(node);\n\n\t\tthis._groups = []; // Other decoration group references\n\t\tthis._ifaces = []; // Object references\n\t\tthis._cables = []; // Object references\n\t\tthis.data = new DecorationGroupDefaultData(this);\n\n\t\tthis._listenSelection = ev => {\n\t\t\t// ToDo\n\t\t}\n\t}\n\n\tinit(){\n\t\tthis.node.instance.on('container.selection', this._listenSelection);\n\t}\n\n\texportData(){\n\t\treturn {\n\t\t\twidth: Math.round(this.data.width),\n\t\t\theight: Math.round(this.data.height),\n\t\t\ttitle: this.data.title,\n\t\t\ttextContent: this.data.textContent,\n\t\t\tcolor: this.data.color,\n\t\t\tfontColor: this.data.fontColor,\n\t\t};\n\t}\n\n\tresize(compass){\n\t\tlet containerScale = this.$space('container').scale;\n\n\t\tconst onMove = ev => {\n\t\t\tlet mX = ev.movementX / containerScale;\n\t\t\tlet mY = ev.movementY / containerScale;\n\n\t\t\tif(compass === 'n'){\n\t\t\t\tthis.y += mY;\n\t\t\t\tthis.data.height -= mY;\n\t\t\t}\n\t\t\telse if(compass === 's') this.data.height += mY;\n\t\t\telse if(compass === 'w'){\n\t\t\t\tthis.x += mX;\n\t\t\t\tthis.data.width -= mX;\n\t\t\t}\n\t\t\telse if(compass === 'e') this.data.width += mX;\n\n\t\t\tif(compass === 'nw'){\n\t\t\t\tthis.x += mX;\n\t\t\t\tthis.y += mY;\n\t\t\t\tthis.data.width -= mX;\n\t\t\t\tthis.data.height -= mY;\n\t\t\t}\n\t\t\telse if(compass === 'ne'){\n\t\t\t\tthis.y += mY;\n\t\t\t\tthis.data.width += mX;\n\t\t\t\tthis.data.height -= mY;\n\t\t\t}\n\t\t\telse if(compass === 'sw'){\n\t\t\t\tthis.x += mX;\n\t\t\t\tthis.data.width -= mX;\n\t\t\t\tthis.data.height += mY;\n\t\t\t}\n\t\t\telse if(compass === 'se'){\n\t\t\t\tthis.data.width += mX;\n\t\t\t\tthis.data.height += mY;\n\t\t\t}\n\n\t\t\tif(this.data.width < 100) this.data.width = 100;\n\t\t\tif(this.data.height < 100) this.data.height = 100;\n\t\t}\n\n\t\tlet temp = $(window)\n\t\t\t.once('pointerup', ev => {\n\t\t\t\ttemp.off('pointermove', onMove);\n\t\t\t\tthis.refreshContent(ev);\n\t\t\t})\n\t\t\t.on('pointermove', onMove);\n\t}\n\n\tdoubleClick(){\n\t\t// Force open properties panel and focus to edit panel's title\n\t\tthis.$space.sketch.emit('editor.properties.open');\n\t\tsetTimeout(() => {\n\t\t\t$('bppc-decoration-group-default .title textarea').focus();\n\t\t}, 50);\n\t}\n\n\t// Disable selection for this node\n\tonSelect(){ return false; }\n\n\t// Refresh content when pointerup\n\tmoveNode(ev){\n\t\tsuper.moveNode(ev);\n\t\tif(ev.ctrlKey) return;\n\n\t\tlet { _ifaces, _cables } = this;\n\n\t\tfor (var i = 0; i < _cables.length; i++)\n\t\t\t_cables[i].moveCableHead(ev, true);\n\n\t\tfor (var i = 0; i < _ifaces.length; i++){\n\t\t\tlet temp = _ifaces[i];\n\n\t\t\t// Avoid maximum call stack\n\t\t\t// if(temp.namespace === \"Decoration/Group/Default\") continue;\n\n\t\t\ttemp.moveNode(ev, true);\n\t\t}\n\t}\n\n\trefreshContent(ev, _isSync){\n\t\tlet { ifaceList } = this.node.instance;\n\t\tlet modelIfaceList = this.$space('nodes').list;\n\t\tlet cableList = this.$space('cables').list;\n\n\t\t// s = start, e = end; (X, Y position)\n\t\tlet sx = this.x;\n\t\tlet sy = this.y;\n\t\tlet ex = this.x + this.data.width;\n\t\tlet ey = this.y + this.data.height;\n\n\t\tlet { _groups, _ifaces, _cables } = this;\n\t\t_groups.length = _ifaces.length = _cables.length = 0;\n\n\t\tfor (var i = 0, n = cableList.length; i < n; i++) {\n\t\t\tlet temp = cableList[i];\n\t\t\tif(!(temp.hasBranch !== false || !temp.connected)) continue;\n\n\t\t\tlet [x, y] = temp.head2;\n\t\t\tif(x >= sx && x <= ex\n\t\t\t&& y >= sy && y <= ey){\n\t\t\t\t_cables.push(temp);\n\t\t\t}\n\t\t}\n\n\t\tlet lowestIndex = -1;\n\t\tfor (var i = 0, n = ifaceList.length; i < n; i++) {\n\t\t\tlet temp = ifaceList[i];\n\n\t\t\t// Skip this node\n\t\t\tif(temp === this) continue;\n\n\t\t\tlet {x, y} = temp;\n\t\t\tlet elChild = (_isSync ? temp.$el[0] : sf.Window.source(temp.$el, ev)).firstElementChild;\n\t\t\tlet {offsetWidth, offsetHeight} = elChild;\n\n\t\t\tlet ox = offsetWidth + x;\n\t\t\tlet oy = offsetHeight + y;\n\n\t\t\tif(ox >= sx && x <= ex\n\t\t\t&& oy >= sy && y <= ey){\n\t\t\t\tlet indexInModel = modelIfaceList.indexOf(temp);\n\n\t\t\t\tif(lowestIndex == -1 || lowestIndex > indexInModel){\n\t\t\t\t\tif(temp.namespace === \"Decoration/Group/Default\"){\n\t\t\t\t\t\tlet isInnerGroup = (temp.x > this.x && temp.w < this.w) || (temp.y > this.y && temp.h < this.h);\n\t\t\t\t\t\tif(isInnerGroup) lowestIndex = indexInModel;\n\t\t\t\t\t}\n\t\t\t\t\telse lowestIndex = indexInModel;\n\t\t\t\t}\n\n\t\t\t\tif(temp.namespace === \"Decoration/Group/Default\") {\n\t\t\t\t\t// Skip outer group\n\t\t\t\t\tlet isInnerGroup = (temp.x > this.x && temp.w < this.w) || (temp.y > this.y && temp.h < this.h);\n\t\t\t\t\tif(!isInnerGroup) continue;\n\n\t\t\t\t\t_groups.push(temp);\n\t\t\t\t}\n\t\t\t\t_ifaces.push(temp);\n\t\t\t}\n\t\t}\n\n\t\tif(lowestIndex !== -1) {\n\t\t\tlet thisIndex = modelIfaceList.indexOf(this);\n\n\t\t\tif(lowestIndex < thisIndex)\n\t\t\t\tmodelIfaceList.move(thisIndex, lowestIndex);\n\t\t}\n\n\t\tif(!_isSync)\n\t\t\tthis.node.syncOut('trigger', 'refreshContent');\n\n\t\t// Remove any node/cable that contained on inner group\n\t\tfor (let i=0; i < _groups.length; i++) {\n\t\t\tlet temp = _groups[i];\n\n\t\t\tlet { _ifaces: A, _cables: B } = temp;\n\t\t\tfor (let i=_cables.length-1; i >= 0; i--) {\n\t\t\t\tif(B.includes(_cables[i])) _cables.splice(i, 1);\n\t\t\t}\n\t\t\tfor (let i=_ifaces.length-1; i >= 0; i--) {\n\t\t\t\tif(A.includes(_ifaces[i])) _ifaces.splice(i, 1);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Refresh content and disable changing index\n\tswapZIndex(ev){\n\t\tthis.refreshContent(ev);\n\t\tsuper.swapZIndex(ev, true);\n\t\tColoris.close(); // Close color picker if exist\n\n\t\t// Clear any selections\n\t\tlet container = this.$space('container');\n\t\tcontainer.nodeScope.deselectAll();\n\t\tcontainer.cableScope.deselectAll();\n\t}\n\n\tdestroy(){\n\t\tthis.node.instance.off('container.selection', this._listenSelection);\n\t}\n});\n\nclass DecorationGroupDefaultData {\n\t#iface = null;\n\n\tconstructor(iface){\n\t\tthis.#iface = iface;\n\n\t\tthis.title = 'No title';\n\t\tthis.textContent = '';\n\t\tthis.color = '';\n\t\tthis.fontColor = '';\n\t\tthis.width = 100;\n\t\tthis.height = 100;\n\t}\n\n\tdataChanged(name, val){\n\t\tlet node = this.#iface.node;\n\t\tif(window.event?.isTrusted) node.syncOut(name, val);\n\n\t\t// Let editor know if this iface changed and unsaved\n\t\tnode.notifyEditorDataChanged();\n\t}\n\n\t// Triggered when the value was changed from view (by user interaction on the UI)\n\ton$title(val){ this.dataChanged('title', val) }\n\ton$textContent(val){ this.dataChanged('textContent', val) }\n\tv2m$color(val){ this.dataChanged('color', val) }\n\tv2m$fontColor(val){ this.dataChanged('fontColor', val) }\n\ton$width(val){ this.dataChanged('width', val) }\n\ton$height(val){ this.dataChanged('height', val) }\n}","## html\n
\n \n\n
\n \n
\n
\n\n## scss-global\n// Element name based on current path, BPIC/Decoration/Text/Notes.sf\nsf-space[blackprint] bpic-decoration-text-notes .node {\n\ttextarea{\n\t\twidth: 249px;\n\t\theight: 87px;\n\t\tmargin-left: 5px;\n\t}\n}\n\n\n## js-global\nBlackprint.Sketch.registerInterface('BPIC/Decoration/Text/Notes',\nclass extends Blackprint.Interface{\n\tconstructor(node){\n\t\tsuper(node);\n\t\tthis.data = new DecorationTextNotesData(this);\n\t}\n\n\tinit(){\n\t\t // Refresh size\n\t\tsetTimeout(()=> this.data.on$value(), 1000);\n\t}\n});\n\nclass DecorationTextNotesData {\n\t#iface = null;\n\t#waitRepaint = false;\n\n\tconstructor(iface){\n\t\tthis.#iface = iface;\n\t\tthis.value = '';\n\t}\n\n\t// Triggered when 'value' was changed from view/model\n\t// For refreshing texbox's height when user typing\n\ton$value(now){\n\t\tif(this.#waitRepaint) return;\n\t\tlet iface = this.#iface;\n\t\tlet node = iface.node;\n\n\t\tiface.$el('textarea').css('height', \"5px\");\n\n\t\tthis.#waitRepaint = true;\n\t\t$.afterRepaint().then(()=>{\n\t\t\tvar el = iface.$el('textarea');\n\t\t\tel.css('height', (el[0].scrollHeight)+\"px\");\n\t\t\tthis.#waitRepaint = false;\n\n\t\t\tnode.syncOut('value', now);\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}"]}