diff --git a/manifest.ts b/manifest.ts index f9a96b7..f23eb19 100755 --- a/manifest.ts +++ b/manifest.ts @@ -8,6 +8,7 @@ const manifest: chrome.runtime.ManifestV3 = { name: "KonvaJS Devtools", version: packageJson.version, description: packageJson.description, + permissions: ["storage"], // options_page: "src/pages/options/index.html", background: { service_worker: "src/pages/background/index.js", diff --git a/package.json b/package.json index c14126d..f53a15f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "konva-inspector", - "version": "0.0.4", + "version": "0.0.6", "description": "Devtools for your Konva App", "license": "MIT", "repository": { diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts index 5b29209..89c9ded 100644 --- a/src/pages/content/index.ts +++ b/src/pages/content/index.ts @@ -1,9 +1,7 @@ -let lastResult = false; - detect(); const interval = setInterval(detect, 5000); -function detect() { +function detect(requestDetectionCallback?: (data: any) => void) { try { const s = document.createElement("script"); s.src = chrome.runtime.getURL("src/pages/detector/index.js"); @@ -12,13 +10,12 @@ function detect() { document.addEventListener( "__KONVA_DEVTOOLS__DETECTION_RESULT", function (e: CustomEvent) { - lastResult = e.detail; - chrome.runtime.sendMessage({ type: "__KONVA_DEVTOOLS__BROADCAST_RESULT", - result: lastResult, + result: e.detail, }); s.remove(); + requestDetectionCallback && requestDetectionCallback(e.detail); } ); @@ -32,7 +29,7 @@ function detect() { chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request["type"] == "__KONVA_DEVTOOLS__REQUEST_DETECTION") { - sendResponse(lastResult); + detect(sendResponse); } return true; // this make sure sendResponse will work asynchronously }); diff --git a/src/pages/panel/components/Element.tsx b/src/pages/panel/components/Element.tsx index ab932f8..86a80f9 100644 --- a/src/pages/panel/components/Element.tsx +++ b/src/pages/panel/components/Element.tsx @@ -7,6 +7,7 @@ import { bridge } from ".."; interface IProps { searchText: string; selectedNode: OutlineNode | null; + activeNode: OutlineNode | null; stageIndex: number; indent: number; node: OutlineNode; @@ -16,6 +17,7 @@ interface IProps { export default function Element({ searchText, selectedNode, + activeNode, stageIndex, indent, node, @@ -41,20 +43,21 @@ export default function Element({ return ( <>
{ const data = await bridge( - `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.select(${node._id}, ${stageIndex})` + `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.select(${node._id}, ${stageIndex})` ); onSelectNode(data); }} onMouseEnter={() => { bridge( - `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.activate(${node._id}, ${stageIndex})` + `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.activate(${node._id}, ${stageIndex})` ); }} > @@ -78,6 +81,7 @@ export default function Element({ key={item._id} searchText={searchText} selectedNode={selectedNode} + activeNode={activeNode} stageIndex={stageIndex} indent={indent + 1} node={item} diff --git a/src/pages/panel/components/InspectedElement.tsx b/src/pages/panel/components/InspectedElement.tsx index 6ab5c23..53306e4 100644 --- a/src/pages/panel/components/InspectedElement.tsx +++ b/src/pages/panel/components/InspectedElement.tsx @@ -26,9 +26,11 @@ export default function InspectedElement({ selectedNode }: IProps) { const updateAttr = async (attrName: string, val: any) => { await bridge( - `__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.updateAttrs(${JSON.stringify({ - [attrName]: val, - })})` + `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.updateAttrs(${JSON.stringify( + { + [attrName]: val, + } + )})` ); setNodeAttrs((current) => ({ ...current, @@ -38,6 +40,12 @@ export default function InspectedElement({ selectedNode }: IProps) { const attrs = selectedNode?.isShape ? SHAPE_ATTRS : ATTRS; + const copyToClipBoard = () => { + bridge( + `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)` + ); + }; + return ( <>
@@ -54,7 +62,11 @@ export default function InspectedElement({ selectedNode }: IProps) {
Attributes
-
+
+
{trees.map((item, index) => (
+ + + + + + + + ); +} diff --git a/src/pages/panel/components/icons/Sun.tsx b/src/pages/panel/components/icons/Sun.tsx new file mode 100644 index 0000000..88817ee --- /dev/null +++ b/src/pages/panel/components/icons/Sun.tsx @@ -0,0 +1,14 @@ +export default function Sun() { + return ( + + + + ); +} diff --git a/src/pages/panel/devtools/konvaDevtoolsOutline.ts b/src/pages/panel/devtools/konvaDevtoolsOutline.ts index 657f379..3112506 100644 --- a/src/pages/panel/devtools/konvaDevtoolsOutline.ts +++ b/src/pages/panel/devtools/konvaDevtoolsOutline.ts @@ -75,6 +75,8 @@ export default function konvaDevtoolsOutline(devtools: KonvaDevtools) { return results; }, select(_id: number, stageIndex = 0, serialize = true) { + if (!devtools.Konva()) return undefined; + const stage = devtools.Konva().stages[stageIndex]; if (stage._id === _id) return serialize ? toObject(stage) : stage; const item = stage.findOne((n) => n._id === _id); diff --git a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts index 4c232fe..0109928 100644 --- a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts +++ b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts @@ -1,3 +1,4 @@ +import type Konva from "konva"; import { KonvaDevtools } from "../types"; export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) { @@ -43,7 +44,7 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) { function updateHighlight() { raf = requestAnimationFrame(updateHighlight); - const node = devtools.selection.active(); + const node = devtools.selection.active() as Konva.Node; if (!node) return; const rect = node.getClientRect(); overlayEl.style.top = rect.y.toString() + "px"; diff --git a/src/pages/panel/devtools/konvaDevtoolsSelection.ts b/src/pages/panel/devtools/konvaDevtoolsSelection.ts index 384dcaf..56548d4 100644 --- a/src/pages/panel/devtools/konvaDevtoolsSelection.ts +++ b/src/pages/panel/devtools/konvaDevtoolsSelection.ts @@ -6,8 +6,9 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) { let selectedNode: Konva.Container; return { - active(): Konva.Node | undefined { - return activeNode; + active(serialize = false): Konva.Node | OutlineNode | undefined { + if (!activeNode) return undefined; + return serialize ? devtools.outline.toObject(activeNode) : activeNode; }, selected(serialize = false): Konva.Node | OutlineNode | undefined { if (!selectedNode) return undefined; @@ -40,6 +41,7 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) { selectedNode.setAttrs(attrs); }, selectShapeAtCursor() { + // TODO: handle multi stages const stage = devtools.Konva().stages[0]; const pointerPosition = stage.getPointerPosition(); if (pointerPosition) { @@ -51,5 +53,18 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) { } } }, + removeHoverToSelectListeners() { + if (!devtools) return; + devtools + .Konva() + .stages[0].off("mouseover", devtools.selection.selectShapeAtCursor); + devtools + .Konva() + .stages[0].off( + "click", + devtools.selection.removeHoverToSelectListeners + ); + devtools.selection.deactivate(); + }, }; }