Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 23:56:36 +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
README.md
+1 -1
View File
@@ -141,7 +141,7 @@ Our latest news can be found on [Twitter](https://twitter.com/AffineOfficial), [
# 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
libs/components/affine-board/src/Board.tsx
+2 -5
View File
@@ -134,17 +134,14 @@ const AffineBoard = ({
}
})
);
let pageBindingsString = (
const pageBindingsString = (
await services.api.editorBlock.get({
workspace: workspace,
ids: [rootBlockId],
})
)?.[0].properties.bindings?.value;
console.log(123123123);
let pageBindings = JSON.parse(pageBindingsString ?? '{}');
console.log(pageBindings, 3333, bindings);
const pageBindings = JSON.parse(pageBindingsString ?? '{}');
Object.keys(bindings).forEach(bindingsKey => {
console.log(345345345345345);
if (!bindings[bindingsKey]) {
delete pageBindings[bindingsKey];
} else {
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>
libs/components/ui/src/cascader/Cascader.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { ArrowRightIcon } from '@toeverything/components/icons';
import { ReactElement, useRef, useState } from 'react';
import { useRef, useState, type ReactElement } from 'react';
import { Divider } from '../divider';
import {
MuiGrow as Grow,
libs/components/ui/src/popper/Popper.tsx
+9 -2
View File
@@ -35,6 +35,8 @@ export const Popper = ({
offset = [0, 5],
showArrow = false,
popperHandlerRef,
onClick,
onClickAway,
...popperProps
}: PopperProps) => {
const [anchorEl, setAnchorEl] = useState<VirtualElement>(null);
@@ -97,15 +99,20 @@ export const Popper = ({
return (
<ClickAwayListener
onClickAway={() => {
setVisible(false);
if (visibleControlledByParent) {
onClickAway?.();
} else {
setVisible(false);
}
}}
>
<Container>
{isAnchorCustom ? null : (
<div
ref={(dom: HTMLDivElement) => setAnchorEl(dom)}
onClick={() => {
onClick={e => {
if (!hasClickTrigger || visibleControlledByParent) {
onClick?.(e);
return;
}
setVisible(!visible);
libs/components/ui/src/popper/interface.ts
+2
View File
@@ -62,4 +62,6 @@ export type PopperProps = {
showArrow?: boolean;
popperHandlerRef?: Ref<PopperHandler>;
onClickAway?: () => void;
} & Omit<PopperUnstyledProps, 'open' | 'ref'>;