UI changes (#382)

* Added subcomponent indicator.

* fixed: resizable surface got interrupted by iframe

* removed messy typings

* removed italic

* reverted pretier changes

* reduce complexity accessing the body

* revorked icons

* chore: refactor to use css

* chore: style tweaks

* chore: nits

* docs(changeset): Imported components now show a "link" icon in the element tree to more easily find them against local components / elements.

* docs(changeset): Resizing the element tree panel no longer gets stuck on the editor when moving very fast.

---------

Co-authored-by: Michael Dougall <6801309+itsdouges@users.noreply.github.com>

Author: Bellian

.changeset/flat-rivers-move.md

@@ -0,0 +1,5 @@
+---
+"@triplex/editor-next": patch
+---
+
+Resizing the element tree panel no longer gets stuck on the editor when moving very fast.

.changeset/twelve-papayas-laugh.md

@@ -0,0 +1,5 @@
+---
+"@triplex/editor-next": patch
+---
+
+Imported components now show a "link" icon in the element tree to more easily find them against local components / elements.

packages/@triplex/editor-next/src/components/resizable-surface.tsx

@@ -79,6 +79,7 @@ export function ResizableSurface({
           "--local-resizing-width",
           `${getProposedWidth({ initialWidth, location, splitterPosition })}px`,
         );
+        document.body.style.setProperty("--canvas-pointer-events", `none`);
       },
       onDragStart() {
         telemetry.event(actionId.resizeStart);
@@ -94,6 +95,7 @@ export function ResizableSurface({
           getProposedWidth({ initialWidth, location, splitterPosition }),
         );
         containerRef.current?.style.removeProperty("--local-resizing-width");
+        document.body.style.removeProperty("--canvas-pointer-events");
       },
       onGenerateDragPreview({ nativeSetDragImage }) {
         disableNativeDragPreview({ nativeSetDragImage });
@@ -133,7 +135,7 @@ export function ResizableSurface({
             state === "drag" && "opacity-100",
             splitterPosition === "end" && "-right-1.5 border-l-4",
             splitterPosition === "start" && "-left-1.5 border-r-4",
-            "absolute bottom-0 top-0 z-10 w-2 cursor-col-resize border-[var(--vscode-sash-hoverBorder)] opacity-0 delay-0 duration-100 hover:opacity-100 hover:transition-opacity hover:delay-200 hover:duration-150",
+            "group absolute bottom-0 top-0 z-10 w-2 cursor-col-resize border-[var(--vscode-sash-hoverBorder)] opacity-0 delay-0 duration-100 hover:opacity-100 hover:transition-opacity hover:delay-200 hover:duration-150",
           ])}
           data-testid="panel-drag-handle"
           ref={ref}

packages/@triplex/editor-next/src/features/app-root/index.tsx

@@ -31,6 +31,7 @@ export function AppRoot() {
           data-testid="scene"
           id="scene"
           src={`http://localhost:${window.triplex.env.ports.client}/scene`}
+          style={{ pointerEvents: "var(--canvas-pointer-events, auto)" /* can be used to disable pointer events on iframe */ }}
         />
       </div>
       {fg("ai_chat") && <AIChat />}

packages/@triplex/editor-next/src/features/panels/element-children-button.tsx

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2022—present Michael Dougall. All rights reserved.
+ *
+ * This repository utilizes multiple licenses across different directories. To
+ * see this files license find the nearest LICENSE file up the source tree.
+ */
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Link2Icon,
+} from "@radix-ui/react-icons";
+import { cn } from "@triplex/lib";
+import { Pressable } from "../../components/pressable";
+
+export function ShowElementChildrenButton({
+  hasChildren,
+  id,
+  isCustomComponent,
+  isExpanded,
+  isImportedComponent,
+  setExpanded,
+}: {
+  hasChildren: boolean;
+  id: string;
+  isCustomComponent: boolean;
+  isExpanded: boolean;
+  isImportedComponent: boolean;
+  setExpanded: (value: (prev: boolean) => boolean) => void;
+}) {
+  const shouldShow = isCustomComponent || hasChildren;
+  const shouldShowExternalComponentIcon =
+    isCustomComponent && isImportedComponent;
+
+  if (!shouldShow) {
+    return <div className="w-[0.5px]" />;
+  }
+
+  return (
+    <Pressable
+      actionId={
+        isExpanded ? "scenepanel_element_collapse" : "scenepanel_element_expand"
+      }
+      className="z-10 -ml-[5px] grid grid-cols-1 grid-rows-1 items-center justify-center px-0.5"
+      describedBy={id}
+      onClick={() => setExpanded((state) => !state)}
+    >
+      {shouldShowExternalComponentIcon && (
+        <Link2Icon className="col-start-1 row-start-1 opacity-100 transition-opacity group-focus-within:opacity-0 group-hover:opacity-0" />
+      )}
+
+      {isExpanded ? (
+        <ChevronDownIcon
+          aria-label="Hide Children"
+          className={cn([
+            "col-start-1 row-start-1",
+            shouldShowExternalComponentIcon &&
+              "opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
+          ])}
+        />
+      ) : (
+        <ChevronRightIcon
+          aria-label="Show Children"
+          className={cn([
+            "col-start-1 row-start-1",
+            shouldShowExternalComponentIcon &&
+              "opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
+          ])}
+        />
+      )}
+    </Pressable>
+  );
+}

packages/@triplex/editor-next/src/features/panels/element.tsx

@@ -9,11 +9,6 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ComponentInstanceIcon,
-} from "@radix-ui/react-icons";
 import { compose, on, send } from "@triplex/bridge/host";
 import { cn } from "@triplex/lib";
 import { fg } from "@triplex/lib/fg";
@@ -43,6 +38,7 @@ import {
 } from "../../util/dnd";
 import { useSceneEvents, useSceneSelected } from "../app-root/context";
 import { ChildSelectedContext } from "./context";
+import { ShowElementChildrenButton } from "./element-children-button";
 
 const blockAll: InstructionType[] = [
   "make-child",
@@ -82,7 +78,7 @@ export function SceneElement(
   const [_isActive, setIsActive] = useState(false);
   const [isForciblyHovered, setForciblyHovered] = useState(false);
   const isCustomComponent =
-    props.type === "custom" && props.exportName && props.path;
+    props.type === "custom" && !!props.exportName && !!props.path;
   const hasChildren = props.children.length > 0;
   const [isUserExpanded, setExpanded] = useState(
     !isCustomComponent && hasChildren,
@@ -105,6 +101,12 @@ export function SceneElement(
   const isExpanded = isUserExpanded || !!filter;
   const notifyParentSelected = use(ChildSelectedContext);
 
+  // a component is considered "imported" if it is a custom type but its children do not include the components own AST path OR its path is different from its parent's path
+  const isImportedComponent =
+    props.type === "custom" &&
+    ((props.path && props.path !== props.parentPath) ||
+      !props.children.some((child) => child.astPath.includes(props.astPath)));
+
   interface DragData {
     astPath: string;
     column: number;
@@ -291,7 +293,12 @@ export function SceneElement(
   }, [dropState]);
 
   return (
-    <li className="relative">
+    <li
+      className={cn([
+        "relative",
+        isExpanded && isImportedComponent && "bg-overlay",
+      ])}
+    >
       {(hasChildren || isCustomComponent) && (
         <div
           className={cn([
@@ -332,29 +339,14 @@ export function SceneElement(
             ])}
           />
         )}
-        {(isCustomComponent || hasChildren) && (
-          <Pressable
-            actionId={
-              isExpanded
-                ? "scenepanel_element_collapse"
-                : "scenepanel_element_expand"
-            }
-            className="z-10 -ml-[5px] px-0.5"
-            describedBy={id}
-            onClick={() => setExpanded((state) => !state)}
-          >
-            {isExpanded ? (
-              <ChevronDownIcon aria-label="Hide Children" />
-            ) : (
-              <ChevronRightIcon aria-label="Show Children" />
-            )}
-          </Pressable>
-        )}
-        {!isCustomComponent && !hasChildren && (
-          <div className="-ml-[5px] flex flex-shrink-0 items-center px-0.5 opacity-0">
-            <ComponentInstanceIcon />
-          </div>
-        )}
+        <ShowElementChildrenButton
+          hasChildren={hasChildren}
+          id={id}
+          isCustomComponent={isCustomComponent}
+          isExpanded={isExpanded}
+          isImportedComponent={isImportedComponent}
+          setExpanded={setExpanded}
+        />
         <Pressable
           actionId="scenepanel_element_focus"
           className="outline-offset-inset absolute inset-0"

packages/@triplex/editor-next/src/globals.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2022—present Michael Dougall. All rights reserved.
+ *
+ * This repository utilizes multiple licenses across different directories. To
+ * see this files license find the nearest LICENSE file up the source tree.
+ */
+import "react";
+
+declare module "react" {
+
+    interface HTMLAttributes {
+        inert?: boolean;
+    }
+
+    interface CSSProperties {
+        [key: `--${string}`]: string | number | null | undefined;
+        pointerEvents?: string;
+    }
+}