From 27dfa81f9260f7942b358ad612cc28c86878f18b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Dec 2021 19:17:02 +0900 Subject: [PATCH 1/6] add vanilla hover inspection --- .../app-runner/vanilla-app-runner.tsx | 63 ++++++++++++++++--- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx index 2c8b7b2f..a5a10b15 100644 --- a/editor/components/app-runner/vanilla-app-runner.tsx +++ b/editor/components/app-runner/vanilla-app-runner.tsx @@ -1,24 +1,69 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; export function VanillaRunner({ width, height, source, + enableInspector = true, }: { width: string; height: string; source: string; componentName: string; + enableInspector?: boolean; }) { + const ref = useRef(); + + useEffect(() => { + if (ref.current && enableInspector) { + ref.current.onload = () => { + const matches = ref.current.contentDocument.querySelectorAll( + "div, span, button, img, image, svg" + ); + matches.forEach((el) => { + const tint = "rgba(20, 0, 255, 0.2)"; + const tintl = "rgba(20, 0, 255, 0.5)"; + const originstyle = { + //@ts-ignore + ...el.style, + }; + + if (el.id.includes("RootWrapper")) { + } else { + el.addEventListener("mouseenter", (e) => { + //@ts-ignore + e.target.style.background = tint; + //@ts-ignore + e.target.style.color = tint; + //@ts-ignore + e.target.style.outline = `${tintl} solid 1px`; + }); + el.addEventListener("mouseleave", (e) => { + //@ts-ignore + e.target.style.background = originstyle.background; + //@ts-ignore + e.target.style.color = originstyle.color; + //@ts-ignore + e.target.style.outline = originstyle.outline; + }); + } + }); + + ref.current.contentWindow.addEventListener("click", (e) => { + console.log("click", e); + }); + }; + } + }, [ref.current, enableInspector]); + const inlinesource = source || `
`; return ( - <> -