Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 12:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

mod(whiteboard): close tool panel when select tool

Browse Source
This commit is contained in:
austaras
2022-08-23 12:04:32 +08:00
committed by Austaras
parent 7b4999225a
commit eedb4864df
9 changed files with 55 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/board-draw/src/components/tools-panel/LineTools.tsx
+5 -1
View File
@@ -35,6 +35,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
export const LineTools = ({ app }: { app: TldrawApp }) => {
const activeTool = app.useStore(activeToolSelector);
const [visible, setVisible] = useState(false);
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
TDShapeType.Line
@@ -51,8 +52,10 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
return (
<Popover
visible={visible}
placement="right-start"
trigger="click"
onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={
<ShapesContainer>
{shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -60,6 +63,7 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
<IconButton
onClick={() => {
app.selectTool(type);
setVisible(false);
setLastActiveTool(type);
}}
>
libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
+5 -1
View File
@@ -71,6 +71,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
export const ShapeTools = ({ app }: { app: TldrawApp }) => {
const activeTool = app.useStore(activeToolSelector);
const [visible, setVisible] = useState(false);
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
TDShapeType.Rectangle
@@ -87,8 +88,10 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
return (
<Popover
visible={visible}
placement="right-start"
trigger="click"
onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={
<ShapesContainer>
{shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -96,6 +99,7 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
<IconButton
onClick={() => {
app.selectTool(type);
setVisible(false);
setLastActiveTool(type);
}}
>
libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
+17 -19
View File
@@ -12,12 +12,12 @@ import {
import {
IconButton,
PopoverContainer,
styled,
// MuiIconButton as IconButton,
// MuiTooltip as Tooltip,
Tooltip,
useTheme,
} from '@toeverything/components/ui';
import style9 from 'style9';
import { TldrawApp } from '@toeverything/components/board-state';
import {
@@ -90,8 +90,8 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
}}
direction="none"
>
<div className={styles('container')}>
<div className={styles('toolBar')}>
<Container>
<ToolBar>
{tools.map(
({
type,
@@ -127,24 +127,22 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
</Tooltip>
)
)}
</div>
</div>
</ToolBar>
</Container>
</PopoverContainer>
);
};
const styles = style9.create({
container: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
height: '100%',
},
toolBar: {
display: 'flex',
flexDirection: 'column',
backgroundColor: '#ffffff',
borderRadius: '10px',
padding: '4px 4px',
},
const Container = styled('div')({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
height: '100%',
});
const ToolBar = styled('div')({
display: 'flex',
flexDirection: 'column',
backgroundColor: '#ffffff',
borderRadius: '10px',
padding: '4px 4px',
});
libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
+13 -4
View File
@@ -12,7 +12,7 @@ import {
styled,
Tooltip,
} from '@toeverything/components/ui';
import { ReactElement, type CSSProperties } from 'react';
import { useState, type CSSProperties, type ReactElement } from 'react';
import { Palette } from '../../palette';
import { Pen } from './Pen';
@@ -106,6 +106,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
export const PenTools = ({ app }: { app: TldrawApp }) => {
const appCurrentTool = app.useStore(state => state.appState.activeTool);
const [visible, setVisible] = useState(false);
const chosenPen =
PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
PENCIL_CONFIGS[0];
@@ -134,8 +135,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
return (
<Popover
visible={visible}
placement="right-start"
trigger="click"
onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={
<Container>
<PensContainer>
@@ -153,7 +156,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
name={title}
primaryColor={color_vars['--color-0']}
secondaryColor={color_vars['--color-1']}
onClick={() => setPen(key)}
onClick={() => {
setVisible(false);
setPen(key);
}}
/>
);
}
@@ -163,7 +169,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
<Palette
selected={chosenColor}
colors={PENCIL_CONFIGS_MAP[chosenPenKey].colors}
onSelect={color => setPenColor(color)}
onSelect={color => {
setVisible(false);
setPenColor(color);
}}
/>
<div />
</Container>