luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 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

2
README.md
View File

@@ -141,7 +141,7 @@ Our latest news can be found on [Twitter](https://twitter.com/AffineOfficial), [
# Contact Us # Contact Us
You may contact us by emailing to: contact@toeverything.info You may contact us by emailing to: contact@toeverything.info
# The Philosophy of AFFiNE # The Philosophy of AFFiNE

7
libs/components/affine-board/src/Board.tsx
View File

@@ -134,17 +134,14 @@ const AffineBoard = ({
} }
}) })
); );
let pageBindingsString = ( const pageBindingsString = (
await services.api.editorBlock.get({ await services.api.editorBlock.get({
workspace: workspace, workspace: workspace,
ids: [rootBlockId], ids: [rootBlockId],
}) })
)?.[0].properties.bindings?.value; )?.[0].properties.bindings?.value;
console.log(123123123); const pageBindings = JSON.parse(pageBindingsString ?? '{}');
let pageBindings = JSON.parse(pageBindingsString ?? '{}');
console.log(pageBindings, 3333, bindings);
Object.keys(bindings).forEach(bindingsKey => { Object.keys(bindings).forEach(bindingsKey => {
console.log(345345345345345);
if (!bindings[bindingsKey]) { if (!bindings[bindingsKey]) {
delete pageBindings[bindingsKey]; delete pageBindings[bindingsKey];
} else { } else {

6
libs/components/board-draw/src/components/tools-panel/LineTools.tsx
View File

@@ -35,6 +35,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
export const LineTools = ({ app }: { app: TldrawApp }) => { export const LineTools = ({ app }: { app: TldrawApp }) => {
const activeTool = app.useStore(activeToolSelector); const activeTool = app.useStore(activeToolSelector);
const [visible, setVisible] = useState(false);
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>( const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
TDShapeType.Line TDShapeType.Line
@@ -51,8 +52,10 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
return ( return (
<Popover <Popover
visible={visible}
placement="right-start" placement="right-start"
trigger="click" onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={ content={
<ShapesContainer> <ShapesContainer>
{shapes.map(({ type, label, tooltip, icon: Icon }) => ( {shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -60,6 +63,7 @@ export const LineTools = ({ app }: { app: TldrawApp }) => {
<IconButton <IconButton
onClick={() => { onClick={() => {
app.selectTool(type); app.selectTool(type);
setVisible(false);
setLastActiveTool(type); setLastActiveTool(type);
}} }}
> >

6
libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx
View File

@@ -71,6 +71,7 @@ const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
export const ShapeTools = ({ app }: { app: TldrawApp }) => { export const ShapeTools = ({ app }: { app: TldrawApp }) => {
const activeTool = app.useStore(activeToolSelector); const activeTool = app.useStore(activeToolSelector);
const [visible, setVisible] = useState(false);
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>( const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
TDShapeType.Rectangle TDShapeType.Rectangle
@@ -87,8 +88,10 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
return ( return (
<Popover <Popover
visible={visible}
placement="right-start" placement="right-start"
trigger="click" onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={ content={
<ShapesContainer> <ShapesContainer>
{shapes.map(({ type, label, tooltip, icon: Icon }) => ( {shapes.map(({ type, label, tooltip, icon: Icon }) => (
@@ -96,6 +99,7 @@ export const ShapeTools = ({ app }: { app: TldrawApp }) => {
<IconButton <IconButton
onClick={() => { onClick={() => {
app.selectTool(type); app.selectTool(type);
setVisible(false);
setLastActiveTool(type); setLastActiveTool(type);
}} }}
> >

36
libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx
View File

@@ -12,12 +12,12 @@ import {
import { import {
IconButton, IconButton,
PopoverContainer, PopoverContainer,
styled,
// MuiIconButton as IconButton, // MuiIconButton as IconButton,
// MuiTooltip as Tooltip, // MuiTooltip as Tooltip,
Tooltip, Tooltip,
useTheme, useTheme,
} from '@toeverything/components/ui'; } from '@toeverything/components/ui';
import style9 from 'style9';
import { TldrawApp } from '@toeverything/components/board-state'; import { TldrawApp } from '@toeverything/components/board-state';
import { import {
@@ -90,8 +90,8 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
}} }}
direction="none" direction="none"
> >
<div className={styles('container')}> <Container>
<div className={styles('toolBar')}> <ToolBar>
{tools.map( {tools.map(
({ ({
type, type,
@@ -127,24 +127,22 @@ export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
</Tooltip> </Tooltip>
) )
)} )}
</div> </ToolBar>
</div> </Container>
</PopoverContainer> </PopoverContainer>
); );
}; };
const styles = style9.create({ const Container = styled('div')({
container: { display: 'flex',
display: 'flex', flexDirection: 'column',
flexDirection: 'column', justifyContent: 'center',
justifyContent: 'center', height: '100%',
height: '100%', });
}, const ToolBar = styled('div')({
toolBar: { display: 'flex',
display: 'flex', flexDirection: 'column',
flexDirection: 'column', backgroundColor: '#ffffff',
backgroundColor: '#ffffff', borderRadius: '10px',
borderRadius: '10px', padding: '4px 4px',
padding: '4px 4px',
},
}); });

17
libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx
View File

@@ -12,7 +12,7 @@ import {
styled, styled,
Tooltip, Tooltip,
} from '@toeverything/components/ui'; } from '@toeverything/components/ui';
import { ReactElement, type CSSProperties } from 'react'; import { useState, type CSSProperties, type ReactElement } from 'react';
import { Palette } from '../../palette'; import { Palette } from '../../palette';
import { Pen } from './Pen'; import { Pen } from './Pen';
@@ -106,6 +106,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
export const PenTools = ({ app }: { app: TldrawApp }) => { export const PenTools = ({ app }: { app: TldrawApp }) => {
const appCurrentTool = app.useStore(state => state.appState.activeTool); const appCurrentTool = app.useStore(state => state.appState.activeTool);
const [visible, setVisible] = useState(false);
const chosenPen = const chosenPen =
PENCIL_CONFIGS.find(config => config.key === appCurrentTool) || PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
PENCIL_CONFIGS[0]; PENCIL_CONFIGS[0];
@@ -134,8 +135,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
return ( return (
<Popover <Popover
visible={visible}
placement="right-start" placement="right-start"
trigger="click" onClick={() => setVisible(prev => !prev)}
onClickAway={() => setVisible(false)}
content={ content={
<Container> <Container>
<PensContainer> <PensContainer>
@@ -153,7 +156,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
name={title} name={title}
primaryColor={color_vars['--color-0']} primaryColor={color_vars['--color-0']}
secondaryColor={color_vars['--color-1']} secondaryColor={color_vars['--color-1']}
onClick={() => setPen(key)} onClick={() => {
setVisible(false);
setPen(key);
}}
/> />
); );
} }
@@ -163,7 +169,10 @@ export const PenTools = ({ app }: { app: TldrawApp }) => {
<Palette <Palette
selected={chosenColor} selected={chosenColor}
colors={PENCIL_CONFIGS_MAP[chosenPenKey].colors} colors={PENCIL_CONFIGS_MAP[chosenPenKey].colors}
onSelect={color => setPenColor(color)} onSelect={color => {
setVisible(false);
setPenColor(color);
}}
/> />
<div /> <div />
</Container> </Container>

2
libs/components/ui/src/cascader/Cascader.tsx
View File

@@ -1,5 +1,5 @@
import { ArrowRightIcon } from '@toeverything/components/icons'; import { ArrowRightIcon } from '@toeverything/components/icons';
import { ReactElement, useRef, useState } from 'react'; import { useRef, useState, type ReactElement } from 'react';
import { Divider } from '../divider'; import { Divider } from '../divider';
import { import {
MuiGrow as Grow, MuiGrow as Grow,

11
libs/components/ui/src/popper/Popper.tsx
View File

@@ -35,6 +35,8 @@ export const Popper = ({
offset = [0, 5], offset = [0, 5],
showArrow = false, showArrow = false,
popperHandlerRef, popperHandlerRef,
onClick,
onClickAway,
...popperProps ...popperProps
}: PopperProps) => { }: PopperProps) => {
const [anchorEl, setAnchorEl] = useState<VirtualElement>(null); const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
@@ -97,15 +99,20 @@ export const Popper = ({
return ( return (
<ClickAwayListener <ClickAwayListener
onClickAway={() => { onClickAway={() => {
setVisible(false); if (visibleControlledByParent) {
onClickAway?.();
} else {
setVisible(false);
}
}} }}
> >
<Container> <Container>
{isAnchorCustom ? null : ( {isAnchorCustom ? null : (
<div <div
ref={(dom: HTMLDivElement) => setAnchorEl(dom)} ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
onClick={() => { onClick={e => {
if (!hasClickTrigger || visibleControlledByParent) { if (!hasClickTrigger || visibleControlledByParent) {
onClick?.(e);
return; return;
} }
setVisible(!visible); setVisible(!visible);

2
libs/components/ui/src/popper/interface.ts
View File

@@ -62,4 +62,6 @@ export type PopperProps = {
showArrow?: boolean; showArrow?: boolean;
popperHandlerRef?: Ref<PopperHandler>; popperHandlerRef?: Ref<PopperHandler>;
onClickAway?: () => void;
} & Omit<PopperUnstyledProps, 'open' | 'ref'>; } & Omit<PopperUnstyledProps, 'open' | 'ref'>;