From e84beddc21c664b8e7ca25a3208ceae9f6fface7 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Tue, 28 May 2024 17:47:48 -0600 Subject: [PATCH] Add Open Canvas Drawer to Tldraw context menu (#265) * move openCanvasDraw to CanvasDrawer component * add Open Canvas Drawer to Tldraw contextMenu * 1.31.0 --- package-lock.json | 4 ++-- package.json | 2 +- src/components/CanvasDrawer.tsx | 30 ++++++++++++++++++++++++++-- src/components/TldrawCanvas.tsx | 31 +++++++++++++++++++++++++++++ src/index.ts | 35 +++------------------------------ 5 files changed, 65 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 55078802..babaad27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "query-builder", - "version": "1.30.2", + "version": "1.31.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "query-builder", - "version": "1.30.2", + "version": "1.31.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index e1a0fbbc..78025786 100644 --- 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 index ffd634cc..8f92644f 100644 --- 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; @@ -156,7 +159,30 @@ const CanvasDrawer = ({ ); -export const render = (props: Props) => - renderOverlay({ Overlay: CanvasDrawer, props }); +export const openCanvasDrawer = () => { + const pageUid = getCurrentPageUid(); + const props = getBlockProps(pageUid) as Record; + const rjsqb = props["roamjs-query-builder"] as Record; + const tldraw = (rjsqb?.tldraw as Record) || {}; + const shapes = Object.values(tldraw).filter((s) => { + const shape = s as TLBaseShape; + 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 index 9e080ad2..09a89a92 100644 --- 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 index a0af3b13..5e3b3750 100644 --- 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; - const rjsqb = props["roamjs-query-builder"] as Record; - const tldraw = (rjsqb?.tldraw as Record) || {}; - const shapes = Object.values(tldraw).filter((s) => { - const shape = s as TLBaseShape; - 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({