【aux】使用油猴腳本改進sketch measure

實現選中某個元素後右擊顯示元素顏色

適用於版本2.4

獲取inspector當前選中信息

sketch measure 叫這個側邊欄為inspector

每次選中時就會觸發一次內部dom更新

function createDetectInspector() {var contentNodes = {};// Select the node that will be observed for mutationsvar targetNode = document.getElementById(inspector);// Options for the observer (which mutations to observe)var config = { attributes: true, childList: true };// Callback function to execute when mutations are observedvar callback = function(mutationsList) { for(var mutation of mutationsList) { if (mutation.type == childList) { contentNodes = mutation.addedNodes; } else if (mutation.type == attributes) { } }};// Create an observer instance linked to the callback functionvar observer = new MutationObserver(callback);// Start observing the target node for configured mutationsobserver.observe(targetNode, config); var ret = {}; ret.getContentNodes = function() { return contentNodes; }; return ret;}

我們通過在頁面使用MutationObserver就可以輕鬆觀測到inspector的內容改變

let inspectorDetector = createDetectInspector();

這樣每次獲取其中內容就可以通過inspectorDetector.getContentNodes();獲取修改的代碼

解析文字屬性面板

sketch measure 2.x版本是放在第二section里

不過並非每次都會出現 所以要檢測一下

通過分析dom可知 是放在input里 但是2.4版有個bug color就是沒說

function getInspectorFontinfo(contentNodes) { var ret = { }; if (contentNodes.length > 2) { var section = contentNodes[2]; Array.prototype.slice.call(section.querySelectorAll(input)).map(ele=> {return { type: ele.id ? ele.id : color, value: ele.value};}).forEach(v=> { console.log(v);ret[v.type] = v.value;}); }return ret;}

不過有個問題 這個顏色不知道為什麼加了100%這個屬性

if (v.type === color) { v.value = v.value.replace(/[^ ]+%/g, ); } ret[v.type] = v.value;

最好去掉反正沒用

不過其實還是有問題的

但是至少我們拿到了內容

檢測右鍵點擊 快速獲取當前信息

我們可以在獲取當前選中監聽右擊事件 獲取元素信息

document.addEventListener(contextmenu, function(e) { e.preventDefault(); console.log(e); console.log(getInspectorFontinfo(inspectorDetector.getContentNodes())); });

使用ContextMenu來展示內容

使用webcomponent自定義一個元素

class ContextMenu extends HTMLElement { constructor() { super(); } connectedCallback() { var self = this; this.style.position = "absolute"; this.textContent = "context menu"; this.style.left = 0; this.style.top = 0; this.style.display = "none"; this.style.zIndex = 1000; this.style.backgroundColor = "#000"; this.style.color = "#fff"; this.style.padding = "10px"; this.addEventListener(click, function() { copyToClipboard(self.textContent); }); } showAtPos(left, top) { var self = this; this.style.display = "flex"; this.style.left = left; this.style.top = top; this.$event = onDocClick(self); document.body.addEventListener(click, self.$event); } hide() { this.style.display = "none"; }}customElements.define(context-menu, ContextMenu);

我們現在實例化一個元素 放在screen元素里

var contextMenu = document.createElement(context-menu);document.getElementById(screen).appendChild(contextMenu);

這樣在攔截contextmenu事件時就可以就近顯示

document.addEventListener(contextmenu, function(e) { e.preventDefault(); let fontInfo = getInspectorFontinfo(inspectorDetector.getContentNodes()); let { offsetLeft, offsetTop, clientWidth, clientHeight, style } = e.target; contextMenu.innerHTML = fontInfo.color; contextMenu.showAtPos((offsetLeft + clientWidth) + "px", (offsetTop + 10) + "px"); });

最後再次點擊外部消失

function onDocClick(self) { return function(e) { if (e.target === self || self.contains(e.target)) { } else { self.hide(); document.body.removeEventListener(click, self.$event); } }; }

實現點擊粘貼到剪貼板

const copyToClipboard = str => { const el = document.createElement(textarea); el.value = str; el.setAttribute(readonly, ); el.style.position = absolute; el.style.left = -9999px; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand(copy); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); }};

這樣一個sketch measure 自定義油猴腳本就ok了