wip - made bottom sheet scrollable & add debugging info panels

gridaco · Oct 21, 2021 · 3e6ffef · 3e6ffef
1 parent ee13f59
commit 3e6ffef
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 32 deletions.
diff --git a/editor/layout/panel/workspace-bottom-panel-dock-layout.tsx b/editor/layout/panel/workspace-bottom-panel-dock-layout.tsx
@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import React from "react";
+import React, { useState } from "react";
+import { Resizable } from "re-resizable";
 
 /**
  * bottom docked layout. its content displays as row
@@ -9,12 +10,36 @@ import React from "react";
  */
 export function WorkspaceBottomPanelDockLayout(props: {
   children: JSX.Element | JSX.Element[];
+  resizable?: boolean;
 }) {
-  return <DockRootWrap>{props.children}</DockRootWrap>;
+  const [height, setHeight] = useState(300);
+
+  const body = props.children;
+  return props.resizable ? (
+    <Resizable
+      size={{
+        height: height,
+        width: "100%",
+      }}
+      enable={{
+        top: true,
+        bottom: false,
+        left: false,
+        right: false,
+      }}
+      defaultSize={{ height: height, width: "100%" }}
+      onResize={(e, direction, ref, d) => {
+        setHeight(height + d.height);
+      }}
+    >
+      <DockRootWrap>{body}</DockRootWrap>
+    </Resizable>
+  ) : (
+    <DockRootWrap>{body}</DockRootWrap>
+  );
 }
 
 const DockRootWrap = styled.div`
-  min-height: 100%;
   border: solid #d2d2d2;
   align-self: stretch;
   border-width: 1px;

diff --git a/editor/pages/to-code/index.tsx b/editor/pages/to-code/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { designToCode } from "@designto/code";
+import { designToCode, Result } from "@designto/code";
 import { useDesign } from "../../query-hooks";
 import styled from "@emotion/styled";
 import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
@@ -26,12 +26,13 @@ import {
 import LoadingLayout from "../../layout/loading-overlay";
 import { DesignInput } from "@designto/config/input";
 import { ClearRemoteDesignSessionCache } from "../../components/clear-remote-design-session-cache";
+import { WidgetTree } from "../../components/visualization/json-visualization/json-tree";
 
 export default function DesignToCodeUniversalPage() {
   const router = useRouter();
   const design = useDesign();
-  const [result, setResult] = useState<output.ICodeOutput>();
-  const [preview, setPreview] = useState<output.ICodeOutput>();
+  const [result, setResult] = useState<Result>();
+  const [preview, setPreview] = useState<Result>();
 
   const framework_config = get_framework_config_from_query(router.query);
   const preview_runner_framework = get_preview_runner_framework(router.query);
@@ -146,39 +147,42 @@ export default function DesignToCodeUniversalPage() {
               />
             </InspectionPanelContentWrap>
           </WorkspaceContentPanel>
-          <WorkspaceBottomPanelDockLayout>
+          <WorkspaceBottomPanelDockLayout resizable>
             <WorkspaceContentPanel>
               <div
                 style={{
                   display: "flex",
-                  flexDirection: "column",
-                  alignItems: "start",
+                  flexDirection: "row",
+                  alignItems: "stretch",
                 }}
               >
-                <ClearRemoteDesignSessionCache
-                  key={design.url}
-                  url={design.url}
-                />
-                <br />
-                {(design.reflect.origin === "INSTANCE" ||
-                  design.reflect.origin === "COMPONENT") && (
-                  <button
-                    onClick={() => {
-                      router.push({
-                        pathname: "/figma/inspect-component",
-                        query: router.query,
-                      });
-                    }}
-                  >
-                    inspect component
-                  </button>
-                )}
-                {/* <div style={{ flex: 1 }}>
-                  <WidgetTree data={reflectWidget} />
-                </div>
                 <div style={{ flex: 1 }}>
-                  <WidgetTree data={widgetTree} />
-                </div> */}
+                  <ClearRemoteDesignSessionCache
+                    key={design.url}
+                    url={design.url}
+                  />
+                  <br />
+                  {(design.reflect.origin === "INSTANCE" ||
+                    design.reflect.origin === "COMPONENT") && (
+                    <button
+                      onClick={() => {
+                        router.push({
+                          pathname: "/figma/inspect-component",
+                          query: router.query,
+                        });
+                      }}
+                    >
+                      inspect component
+                    </button>
+                  )}
+                </div>
+
+                <div style={{ flex: 2 }}>
+                  <WidgetTree data={design.reflect} />
+                </div>
+                <div style={{ flex: 2 }}>
+                  <WidgetTree data={result.widget} />
+                </div>
               </div>
             </WorkspaceContentPanel>
           </WorkspaceBottomPanelDockLayout>