support selecting blocks with plugins

reearth · Jan 21, 2022 · ca21eb4 · ca21eb4
1 parent 1054287
commit ca21eb4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/src/components/atoms/Plugin/IFrame/hooks.ts b/src/components/atoms/Plugin/IFrame/hooks.ts
@@ -23,6 +23,7 @@ export default function useHook({
   iFrameProps,
   onLoad,
   onMessage,
+  onClick,
 }: {
   autoResizeMessageKey?: string;
   html?: string;
@@ -32,6 +33,7 @@ export default function useHook({
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
   onMessage?: (message: any) => void;
+  onClick?: () => void;
 } = {}): {
   ref: RefObject<HTMLIFrameElement>;
   props: IframeHTMLAttributes<HTMLIFrameElement>;
@@ -145,6 +147,18 @@ export default function useHook({
     [autoResize, iFrameProps, iFrameSize, visible],
   );
 
+  useEffect(() => {
+    const handleBlur = () => {
+      if (iFrameRef.current && iFrameRef.current === document.activeElement) {
+        onClick?.();
+      }
+    };
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [onClick]);
+
   return {
     ref: iFrameRef,
     props,

diff --git a/src/components/atoms/Plugin/IFrame/index.tsx b/src/components/atoms/Plugin/IFrame/index.tsx
@@ -12,10 +12,11 @@ export type Props = {
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
   onMessage?: (message: any) => void;
+  onClick?: () => void;
 };
 
 const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
-  { autoResize, className, html, visible, iFrameProps, onLoad, onMessage },
+  { autoResize, className, html, visible, iFrameProps, onLoad, onMessage, onClick },
   ref,
 ) => {
   const {
@@ -30,6 +31,7 @@ const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
     ref,
     onLoad,
     onMessage,
+    onClick,
   });
 
   return html ? (

diff --git a/src/components/atoms/Plugin/index.tsx b/src/components/atoms/Plugin/index.tsx
@@ -21,6 +21,7 @@ export type Props = {
   onPreInit?: () => void;
   onError?: (err: any) => void;
   onDispose?: () => void;
+  onClick?: () => void;
 };
 
 const Plugin: React.FC<Props> = ({
@@ -38,6 +39,7 @@ const Plugin: React.FC<Props> = ({
   onPreInit,
   onError,
   onDispose,
+  onClick,
 }) => {
   const { iFrameRef, iFrameHtml, iFrameVisible } = useHook({
     iframeCanBeVisible: canBeVisible,
@@ -60,6 +62,7 @@ const Plugin: React.FC<Props> = ({
       visible={iFrameVisible}
       onMessage={onMessage}
       iFrameProps={iFrameProps}
+      onClick={onClick}
     />
   ) : renderPlaceholder ? (
     <>{renderPlaceholder}</>

diff --git a/src/components/molecules/Visualizer/Block/index.tsx b/src/components/molecules/Visualizer/Block/index.tsx
@@ -54,6 +54,7 @@ export default function BlockComponent<P = any, PP = any>({
         pluginProperty={props.pluginProperty}
         layer={props.layer}
         block={props.block}
+        onClick={props.onClick}
       />
     </Wrapper>
   );
@@ -62,7 +63,7 @@ export default function BlockComponent<P = any, PP = any>({
 const Wrapper = styled.div<{ editable?: boolean; selected?: boolean }>`
   border: 1px solid
     ${({ selected, editable, theme }) =>
-      editable && selected ? theme.infoBox.accent2 : "transparent"};
+    editable && selected ? theme.infoBox.accent2 : "transparent"};
   border-radius: 6px;
 
   &:hover {

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -31,6 +31,7 @@ export type Props = {
   layer?: Layer;
   widget?: Widget;
   block?: Block;
+  onClick?: () => void;
 };
 
 export default function Plugin({
@@ -46,6 +47,7 @@ export default function Plugin({
   widget,
   block,
   pluginProperty,
+  onClick,
 }: Props): JSX.Element | null {
   const { skip, src, isMarshalable, onPreInit, onDispose, exposed, onError, onMessage } = useHooks({
     pluginId,
@@ -72,6 +74,7 @@ export default function Plugin({
       onMessage={onMessage}
       onPreInit={onPreInit}
       onDispose={onDispose}
+      onClick={onClick}
     />
   ) : null;
 }