From b041c50cd4f9d2d63fbd2613659d2f2d5b427bd8 Mon Sep 17 00:00:00 2001 From: Mai Trung Duc Date: Mon, 18 Dec 2023 11:28:13 +0700 Subject: [PATCH] feat: add button tooltips, double click to scroll to element --- .eslintrc | 7 +- package.json | 4 +- src/pages/panel/components/Attributes.tsx | 115 +- src/pages/panel/components/Element.tsx | 60 +- .../panel/components/InspectedElement.tsx | 56 +- src/pages/panel/components/Panel.scss | 46 +- src/pages/panel/components/Panel.tsx | 32 +- src/pages/panel/components/RenderedBy.tsx | 90 + src/pages/panel/devtools/konvaDevtools.ts | 8 +- .../panel/devtools/konvaDevtoolsOutline.ts | 22 +- .../panel/devtools/konvaDevtoolsOverlay.ts | 91 +- .../panel/devtools/konvaDevtoolsSelection.ts | 224 +- yarn.lock | 6108 +++++++++++++++++ 13 files changed, 6533 insertions(+), 330 deletions(-) create mode 100644 src/pages/panel/components/RenderedBy.tsx create mode 100644 yarn.lock diff --git a/.eslintrc b/.eslintrc index 835eed6..7149dd5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,7 +10,6 @@ "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "plugin:import/recommended", - "plugin:jsx-a11y/recommended", "prettier" ], "parser": "@typescript-eslint/parser", @@ -21,7 +20,7 @@ "ecmaVersion": "latest", "sourceType": "module" }, - "plugins": ["react", "@typescript-eslint", "react-hooks", "import", "jsx-a11y", "prettier"], + "plugins": ["react", "@typescript-eslint", "react-hooks", "import", "prettier"], "settings": { "react": { "version": "detect" @@ -29,7 +28,9 @@ }, "rules": { "react/react-in-jsx-scope": "off", - "import/no-unresolved": "off" + "import/no-unresolved": "off", + "@typescript-eslint/no-explicit-any": "off", + "react-hooks/exhaustive-deps": "off" }, "globals": { "chrome": "readonly" diff --git a/package.json b/package.json index 3b95b6e..e22fd65 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "konva-inspector", - "version": "0.0.17", + "version": "0.0.18", "description": "Devtools for your Konva App", "license": "MIT", "repository": { @@ -31,6 +31,7 @@ "lodash-es": "^4.17.21", "react": "18.2.0", "react-dom": "18.2.0", + "react-tooltip": "^5.25.0", "webextension-polyfill": "0.10.0" }, "devDependencies": { @@ -54,7 +55,6 @@ "eslint-config-airbnb-typescript": "17.1.0", "eslint-config-prettier": "9.0.0", "eslint-plugin-import": "2.29.0", - "eslint-plugin-jsx-a11y": "6.8.0", "eslint-plugin-prettier": "5.0.1", "eslint-plugin-react": "7.33.2", "eslint-plugin-react-hooks": "4.6.0", diff --git a/src/pages/panel/components/Attributes.tsx b/src/pages/panel/components/Attributes.tsx index 5046d3f..a75e0dd 100644 --- a/src/pages/panel/components/Attributes.tsx +++ b/src/pages/panel/components/Attributes.tsx @@ -1,10 +1,11 @@ -import { useState } from "react"; -import { bridge } from ".."; -import CopyToClipboard from "./icons/CopyToClipboard"; -import { IAttr } from "./constants"; -import DownArrow from "./icons/DownArrow"; -import RightArrow from "./icons/RightArrow"; -import Delete from "./icons/Delete"; +import { useState } from 'react'; +import { bridge } from '..'; +import CopyToClipboard from './icons/CopyToClipboard'; +import { IAttr } from './constants'; +import DownArrow from './icons/DownArrow'; +import RightArrow from './icons/RightArrow'; +import Delete from './icons/Delete'; +import { Tooltip } from 'react-tooltip'; interface IProps { attrSearch?: string; @@ -16,7 +17,7 @@ interface IProps { showCopyToClipboard?: boolean; showDelete?: boolean; showExpandIcon?: boolean; - updateAttr: (attrName: string, val: any) => Promise; + updateAttr: (attrName: string, val: string | boolean | number) => Promise; onRemove?: () => void; } @@ -37,49 +38,43 @@ export default function Attributes({ const copyToClipBoard = () => { bridge( - `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)` + `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)`, ); }; const renderArrow = () => { return ( -
setExpanded((v) => !v)} - > +
setExpanded(v => !v)}> {expanded ? : }
); }; const filteredAttrs = attrSearch - ? attrs.filter((item) => - item.name.toLowerCase().startsWith(attrSearch.toLowerCase()) - ) + ? attrs.filter(item => item.name.toLowerCase().startsWith(attrSearch.toLowerCase())) : attrs; return ( -
+
{renderArrow()}
{title}
{showCopyToClipboard && ( - + <> + + + )} {showDelete && ( -
{expanded && (
- {filteredAttrs.map((item) => { + {filteredAttrs.map(item => { let input; switch (item.type) { - case "boolean": { + case 'boolean': { input = ( updateAttr(item.name, e.target.checked)} + onChange={e => updateAttr(item.name, e.target.checked)} /> ); break; } - case "number": { + case 'number': { input = ( + onChange={e => updateAttr( item.name, isNaN(e.target.valueAsNumber) ? null // JSON.stringify will not preserve undefined, so we have to use null here - : e.target.valueAsNumber + : e.target.valueAsNumber, ) } min={item.min} @@ -133,32 +124,21 @@ export default function Attributes({ ); break; } - case "json": { + case 'json': { input = (