Add Open Canvas Drawer to Tldraw context menu (#265)

* move openCanvasDraw to CanvasDrawer component * add Open Canvas Drawer to Tldraw contextMenu * 1.31.0
RoamJS · May 28, 2024 · e84bedd · e84bedd
1 parent 5e4c561
commit e84bedd
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.30.2",
+  "version": "1.31.0",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {

diff --git a/src/components/CanvasDrawer.tsx b/src/components/CanvasDrawer.tsx
@@ -6,6 +6,9 @@ import { Button, Collapse, Checkbox } from "@blueprintjs/core";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import getDiscourseNodes from "../utils/getDiscourseNodes";
+import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
+import getBlockProps from "../utils/getBlockProps";
+import { TLBaseShape } from "@tldraw/tldraw";
 
 export type GroupedShapes = Record<string, DiscourseNodeShape[]>;
 
@@ -156,7 +159,30 @@ const CanvasDrawer = ({
   </ResizableDrawer>
 );
 
-export const render = (props: Props) =>
-  renderOverlay({ Overlay: CanvasDrawer, props });
+export const openCanvasDrawer = () => {
+  const pageUid = getCurrentPageUid();
+  const props = getBlockProps(pageUid) as Record<string, unknown>;
+  const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
+  const tldraw = (rjsqb?.tldraw as Record<string, unknown>) || {};
+  const shapes = Object.values(tldraw).filter((s) => {
+    const shape = s as TLBaseShape<string, { uid: string }>;
+    const uid = shape.props?.uid;
+    return !!uid;
+  }) as DiscourseNodeShape[];
+
+  const groupShapesByUid = (shapes: DiscourseNodeShape[]) => {
+    const groupedShapes = shapes.reduce((acc: GroupedShapes, shape) => {
+      const uid = shape.props.uid;
+      if (!acc[uid]) acc[uid] = [];
+      acc[uid].push(shape);
+      return acc;
+    }, {});
+
+    return groupedShapes;
+  };
+
+  const groupedShapes = groupShapesByUid(shapes);
+  renderOverlay({ Overlay: CanvasDrawer, props: { groupedShapes, pageUid } });
+};
 
 export default CanvasDrawer;
diff --git a/src/components/TldrawCanvas.tsx b/src/components/TldrawCanvas.tsx
@@ -85,6 +85,7 @@ import calcCanvasNodeSizeAndImg from "../utils/calcCanvasNodeSizeAndImg";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { formatHexColor } from "./DiscourseNodeCanvasSettings";
 import { getNewDiscourseNodeText } from "../utils/formatUtils";
+import { openCanvasDrawer } from "./CanvasDrawer";
 
 declare global {
   interface Window {
@@ -1866,6 +1867,7 @@ const TldrawCanvas = ({ title }: Props) => {
                 ),
                 "action.toggle-full-screen": "Toggle Full Screen",
                 "action.convert-to": "Convert to",
+                "action.open-canvas-drawer": "Open Canvas Drawer",
                 ...Object.fromEntries(
                   allNodes.map((node) => [
                     `action.convert-to-${node.type}`,
@@ -1875,6 +1877,35 @@ const TldrawCanvas = ({ title }: Props) => {
               },
             },
             contextMenu(app, schema, helpers) {
+              // Open Canvas Drawer
+              if (!app.selectedIds.length) {
+                const openCanvasDrawerGroup: MenuGroup = {
+                  id: "open-canvas-drawer-group",
+                  type: "group",
+                  checkbox: false,
+                  disabled: false,
+                  readonlyOk: true,
+                  children: [
+                    {
+                      checked: false,
+                      disabled: false,
+                      readonlyOk: true,
+                      id: "open-canvas-drawer",
+                      type: "item",
+                      actionItem: {
+                        id: "open-canvas-drawer",
+                        label: "action.open-canvas-drawer" as TLTranslationKey,
+                        onSelect: openCanvasDrawer,
+                        readonlyOk: true,
+                      },
+                    },
+                  ],
+                };
+                schema.push(openCanvasDrawerGroup);
+              }
+
+              // Convert To
+              // convert image/text to Discourse Node
               if (helpers.oneSelected) {
                 const shape = app.getShapeById(app.selectedIds[0]);
                 if (!shape) return schema;

diff --git a/src/index.ts b/src/index.ts
@@ -29,14 +29,10 @@ import initializeDiscourseGraphsMode, {
 } from "./discourseGraphsMode";
 import getPageMetadata from "./utils/getPageMetadata";
 import { render as queryRender } from "./components/QueryDrawer";
-import { render as canvasDrawerRender } from "./components/CanvasDrawer";
 import createPage from "roamjs-components/writes/createPage";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
-import {
-  DiscourseNodeShape,
-  renderTldrawCanvas,
-} from "./components/TldrawCanvas";
+import { renderTldrawCanvas } from "./components/TldrawCanvas";
 import { QBGlobalRefs } from "./utils/types";
 import localStorageSet from "roamjs-components/util/localStorageSet";
 import localStorageGet from "roamjs-components/util/localStorageGet";
@@ -50,8 +46,7 @@ import resolveQueryBuilderRef from "./utils/resolveQueryBuilderRef";
 import getBlockUidFromTarget from "roamjs-components/dom/getBlockUidFromTarget";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
-import { TLBaseShape, TLStore } from "@tldraw/tldraw";
-import { GroupedShapes } from "./components/CanvasDrawer";
+import { openCanvasDrawer } from "./components/CanvasDrawer";
 import isDiscourseNode from "./utils/isDiscourseNode";
 import { fireQuerySync } from "./utils/fireQuery";
 import parseQuery from "./utils/parseQuery";
@@ -614,31 +609,7 @@ svg.rs-svg-container {
 
   extensionAPI.ui.commandPalette.addCommand({
     label: "Open Canvas Drawer",
-    callback: () => {
-      const pageUid = getCurrentPageUid();
-      const props = getBlockProps(pageUid) as Record<string, unknown>;
-      const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
-      const tldraw = (rjsqb?.tldraw as Record<string, unknown>) || {};
-      const shapes = Object.values(tldraw).filter((s) => {
-        const shape = s as TLBaseShape<string, { uid: string }>;
-        const uid = shape.props?.uid;
-        return !!uid;
-      }) as DiscourseNodeShape[];
-
-      const groupShapesByUid = (shapes: DiscourseNodeShape[]) => {
-        const groupedShapes = shapes.reduce((acc: GroupedShapes, shape) => {
-          const uid = shape.props.uid;
-          if (!acc[uid]) acc[uid] = [];
-          acc[uid].push(shape);
-          return acc;
-        }, {});
-
-        return groupedShapes;
-      };
-
-      const groupedShapes = groupShapesByUid(shapes);
-      canvasDrawerRender({ groupedShapes, pageUid });
-    },
+    callback: openCanvasDrawer,
   });
 
   extensionAPI.ui.commandPalette.addCommand({