diff --git a/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx b/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx index a15daa420..ea19f23b4 100644 --- a/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx @@ -40,6 +40,56 @@ const ToolButton = observer(({ id, icon, title, ...props }: ToolButtonProps) => ) }) +const GeometryToolButtons = observer(() => { + const geometries = [ + { + id: 'box', + icon: 'rectangle', + title: 'Rectangle', + }, + { + id: 'ellipse', + icon: 'circle', + title: 'Circle', + }, + { + id: 'polygon', + icon: 'triangle', + title: 'Triangle', + }, + ] + + const app = useApp() + const [activeGeomId, setActiveGeomId] = React.useState( + () => (geometries.find(geo => geo.id === app.selectedTool.id) ?? geometries[0]).id + ) + + const [paneActive, setPaneActive] = React.useState(false) + + React.useEffect(() => { + setActiveGeomId(prevId => { + return geometries.find(geo => geo.id === app.selectedTool.id)?.id ?? prevId + }) + }, [app.selectedTool.id]) + + return ( +
setPaneActive(true)} + onMouseLeave={() => setPaneActive(false)} + > + { geo.id === activeGeomId)!} />} + {paneActive && ( +
+ {geometries.map(props => ( + + ))} +
+ )} +
+ ) +}) + export const PrimaryTools = observer(function PrimaryTools() { const app = useApp() @@ -52,6 +102,7 @@ export const PrimaryTools = observer(function PrimaryTools() { + } /> diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index a96fc24d1..2739d3dbe 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -212,7 +212,6 @@ z-index: 10000; flex-flow: column; border-radius: 8px; - overflow: hidden; padding: 8px; .tl-button { @@ -241,7 +240,6 @@ flex-flow: column; border-radius: 8px; - overflow: hidden; padding: 4px; gap: 8px; background-color: var(--color-panel); @@ -249,6 +247,24 @@ pointer-events: all; } +.tl-geometry-tools-pane-anchor { + @apply relative; +} + +.tl-geometry-tools-pane { + @apply absolute flex flex-col items-center justify-center; + right: 100%; + top: calc(50% - 52px); + background-color: var(--ls-secondary-background-color); + border-radius: 8px; + padding: 4px; + gap: 8px; + + .tl-button:hover { + background-color: var(--ls-tertiary-background-color); + } +} + .floating-panel[data-tool-locked='true'] > .tl-button[data-selected='true']::after { @apply block absolute; @@ -496,7 +512,7 @@ cursor: pointer; gap: 0.5em; - &[data-focused=true] { + &[data-focused='true'] { background-color: var(--ls-menu-hover-color, #f4f5f7); } } @@ -546,7 +562,7 @@ .page-ref { color: var(--ls-title-text-color); - } + } } .tl-type-tag { @@ -616,4 +632,4 @@ html[data-theme='dark'] { .tl-logseq-portal-header { backdrop-filter: brightness(1.2); } -} \ No newline at end of file +}