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
+}