mirror of https://github.com/logseq/logseq
feat: add geometry shapes tool
parent
d0ddbf19a2
commit
229e64a07b
|
@ -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 (
|
||||||
|
<div
|
||||||
|
className="tl-geometry-tools-pane-anchor"
|
||||||
|
onMouseEnter={() => setPaneActive(true)}
|
||||||
|
onMouseLeave={() => setPaneActive(false)}
|
||||||
|
>
|
||||||
|
{<ToolButton {...geometries.find(geo => geo.id === activeGeomId)!} />}
|
||||||
|
{paneActive && (
|
||||||
|
<div className="tl-geometry-tools-pane">
|
||||||
|
{geometries.map(props => (
|
||||||
|
<ToolButton key={props.id} {...props} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
export const PrimaryTools = observer(function PrimaryTools() {
|
export const PrimaryTools = observer(function PrimaryTools() {
|
||||||
const app = useApp()
|
const app = useApp()
|
||||||
|
|
||||||
|
@ -52,6 +102,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
|
||||||
<ToolButton title="Eraser" id="erase" icon="eraser" />
|
<ToolButton title="Eraser" id="erase" icon="eraser" />
|
||||||
<ToolButton title="Connector" id="line" icon="connector" />
|
<ToolButton title="Connector" id="line" icon="connector" />
|
||||||
<ToolButton title="Text" id="text" icon="text" />
|
<ToolButton title="Text" id="text" icon="text" />
|
||||||
|
<GeometryToolButtons />
|
||||||
<ToolButton title="Logseq Portal" id="logseq-portal" icon={<LogseqIcon />} />
|
<ToolButton title="Logseq Portal" id="logseq-portal" icon={<LogseqIcon />} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -212,7 +212,6 @@
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
||||||
.tl-button {
|
.tl-button {
|
||||||
|
@ -241,7 +240,6 @@
|
||||||
|
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
background-color: var(--color-panel);
|
background-color: var(--color-panel);
|
||||||
|
@ -249,6 +247,24 @@
|
||||||
pointer-events: all;
|
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 {
|
.floating-panel[data-tool-locked='true'] > .tl-button[data-selected='true']::after {
|
||||||
@apply block absolute;
|
@apply block absolute;
|
||||||
|
|
||||||
|
@ -496,7 +512,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
|
||||||
&[data-focused=true] {
|
&[data-focused='true'] {
|
||||||
background-color: var(--ls-menu-hover-color, #f4f5f7);
|
background-color: var(--ls-menu-hover-color, #f4f5f7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue