github-forks
/
success
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Extract Side Panel from App component (#295)

Browse Source 
* Extract Side Panel from App component

* Refactor SidePanel component

- Remove unnecessary props (we are already passing appState as a prop)
- Remove unnecessary allback (we are already passing setState)
pull/301/head
Gasim Gasimzada 5 years ago committed by GitHub
parent 35b5f6dd0d
commit f2346275ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 312 additions and 252 deletions
Show Stats Download Patch File Download Diff File

272
src/components/SidePanel.tsx
Unescape Escape View File

@ -0,0 +1,272 @@
import React from "react";
import { PanelTools } from "./panels/PanelTools";
import { Panel } from "./Panel";
import { PanelSelection } from "./panels/PanelSelection";
import { PanelColor } from "./panels/PanelColor";
import {
hasBackground,
someElementIsSelected,
getSelectedAttribute,
hasStroke,
hasText,
loadFromJSON,
saveAsJSON,
exportCanvas,
deleteSelectedElements
} from "../scene";
import { ButtonSelect } from "./ButtonSelect";
import { ExcalidrawElement } from "../element/types";
import { redrawTextBoundingBox, isTextElement } from "../element";
import { PanelCanvas } from "./panels/PanelCanvas";
import { PanelExport } from "./panels/PanelExport";
import { ExportType } from "../scene/types";
import { AppState } from "../types";
interface SidePanelProps {
elements: readonly ExcalidrawElement[];
onToolChange: (elementType: string) => void;
changeProperty: (
callback: (element: ExcalidrawElement) => ExcalidrawElement
) => void;
moveAllLeft: () => void;
moveOneLeft: () => void;
moveAllRight: () => void;
moveOneRight: () => void;
onClearCanvas: React.MouseEventHandler;
onUpdateAppState: (name: string, value: any) => void;
appState: AppState;
onUpdateElements: (elements: readonly ExcalidrawElement[]) => void;
canvas: HTMLCanvasElement;
}
export const SidePanel: React.FC<SidePanelProps> = ({
elements,
onToolChange,
changeProperty,
moveAllLeft,
moveOneLeft,
moveAllRight,
moveOneRight,
onClearCanvas,
onUpdateAppState,
appState,
onUpdateElements,
canvas
}) => {
return (
<div className="sidePanel">
<PanelTools
activeTool={appState.elementType}
onToolChange={value => {
onToolChange(value);
}}
/>
<Panel title="Selection" hide={!someElementIsSelected(elements)}>
<PanelSelection
onBringForward={moveOneRight}
onBringToFront={moveAllRight}
onSendBackward={moveOneLeft}
onSendToBack={moveAllLeft}
/>
<PanelColor
title="Stroke Color"
onColorChange={(color: string) => {
changeProperty(element => ({
...element,
strokeColor: color
}));
onUpdateAppState("currentItemStrokeColor", color);
}}
colorValue={getSelectedAttribute(
elements,
element => element.strokeColor
)}
/>
{hasBackground(elements) && (
<>
<PanelColor
title="Background Color"
onColorChange={(color: string) => {
changeProperty(element => ({
...element,
backgroundColor: color
}));
onUpdateAppState("currentItemBackgroundColor", color);
}}
colorValue={getSelectedAttribute(
elements,
element => element.backgroundColor
)}
/>
<h5>Fill</h5>
<ButtonSelect
options={[
{ value: "solid", text: "Solid" },
{ value: "hachure", text: "Hachure" },
{ value: "cross-hatch", text: "Cross-hatch" }
]}
value={getSelectedAttribute(
elements,
element => element.fillStyle
)}
onChange={value => {
changeProperty(element => ({
...element,
fillStyle: value
}));
}}
/>
</>
)}
{hasStroke(elements) && (
<>
<h5>Stroke Width</h5>
<ButtonSelect
options={[
{ value: 1, text: "Thin" },
{ value: 2, text: "Bold" },
{ value: 4, text: "Extra Bold" }
]}
value={getSelectedAttribute(
elements,
element => element.strokeWidth
)}
onChange={value => {
changeProperty(element => ({
...element,
strokeWidth: value
}));
}}
/>
<h5>Sloppiness</h5>
<ButtonSelect
options={[
{ value: 0, text: "Draftsman" },
{ value: 1, text: "Artist" },
{ value: 3, text: "Cartoonist" }
]}
value={getSelectedAttribute(
elements,
element => element.roughness
)}
onChange={value =>
changeProperty(element => ({
...element,
roughness: value
}))
}
/>
</>
)}
{hasText(elements) && (
<>
<h5>Font size</h5>
<ButtonSelect
options={[
{ value: 16, text: "Small" },
{ value: 20, text: "Medium" },
{ value: 28, text: "Large" },
{ value: 36, text: "Very Large" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && +element.font.split("px ")[0]
)}
onChange={value =>
changeProperty(element => {
if (isTextElement(element)) {
element.font = `${value}px ${element.font.split("px ")[1]}`;
redrawTextBoundingBox(element);
}
return element;
})
}
/>
<h5>Font familly</h5>
<ButtonSelect
options={[
{ value: "Virgil", text: "Virgil" },
{ value: "Helvetica", text: "Helvetica" },
{ value: "Courier", text: "Courier" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && element.font.split("px ")[1]
)}
onChange={value =>
changeProperty(element => {
if (isTextElement(element)) {
element.font = `${element.font.split("px ")[0]}px ${value}`;
redrawTextBoundingBox(element);
}
return element;
})
}
/>
</>
)}
<h5>Opacity</h5>
<input
type="range"
min="0"
max="100"
onChange={event => {
changeProperty(element => ({
...element,
opacity: +event.target.value
}));
}}
value={
getSelectedAttribute(elements, element => element.opacity) ||
0 /* Put the opacity at 0 if there are two conflicting ones */
}
/>
<button
onClick={() => {
onUpdateElements(deleteSelectedElements(elements));
}}
>
Delete selected
</button>
</Panel>
<PanelCanvas
onClearCanvas={onClearCanvas}
onViewBackgroundColorChange={value => {
onUpdateAppState("viewBackgroundColor", value);
}}
viewBackgroundColor={appState.viewBackgroundColor}
/>
<PanelExport
projectName={appState.name}
onProjectNameChange={name => {
onUpdateAppState("name", name);
}}
onExportCanvas={(type: ExportType) =>
exportCanvas(type, elements, canvas, appState)
}
exportBackground={appState.exportBackground}
onExportBackgroundChange={value => {
onUpdateAppState("exportBackground", value);
}}
onSaveScene={() => saveAsJSON(elements, appState.name)}
onLoadScene={() =>
loadFromJSON().then(({ elements }) => {
onUpdateElements(elements);
})
}
/>
</div>
);
};

1
src/element/index.ts
Unescape Escape View File

@ -10,3 +10,4 @@ export { hitTest } from "./collision";
export { resizeTest } from "./resizeTest"; export { resizeTest } from "./resizeTest";
export { isTextElement } from "./typeChecks"; export { isTextElement } from "./typeChecks";
export { textWysiwyg } from "./textWysiwyg"; export { textWysiwyg } from "./textWysiwyg";
export { redrawTextBoundingBox } from "./textElement";

9
src/element/textElement.ts
Unescape Escape View File

@ -0,0 +1,9 @@
import { measureText } from "../utils";
import { ExcalidrawTextElement } from "./types";
export const redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
const metrics = measureText(element.text, element.font);
element.width = metrics.width;
element.height = metrics.height;
element.baseline = metrics.baseline;
};

282
src/index.tsx
Unescape Escape View File

@ -11,7 +11,8 @@ import {
resizeTest, resizeTest,
isTextElement, isTextElement,
textWysiwyg, textWysiwyg,
getElementAbsoluteCoords getElementAbsoluteCoords,
redrawTextBoundingBox
} from "./element"; } from "./element";
import { import {
clearSelection, clearSelection,
@ -20,42 +21,28 @@ import {
setSelection, setSelection,
isOverScrollBars, isOverScrollBars,
someElementIsSelected, someElementIsSelected,
getSelectedAttribute,
loadFromJSON,
saveAsJSON,
exportCanvas,
restoreFromLocalStorage, restoreFromLocalStorage,
saveToLocalStorage, saveToLocalStorage,
hasBackground,
hasStroke,
getElementAtPosition, getElementAtPosition,
createScene, createScene,
getElementContainingPosition, getElementContainingPosition
hasText
} from "./scene"; } from "./scene";
import { renderScene } from "./renderer"; import { renderScene } from "./renderer";
import { AppState } from "./types"; import { AppState } from "./types";
import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types"; import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types";
import { ExportType } from "./scene/types";
import { getDateTime, isInputLike, measureText } from "./utils"; import { getDateTime, isInputLike, measureText } from "./utils";
import { KEYS, META_KEY, isArrowKey } from "./keys"; import { KEYS, META_KEY, isArrowKey } from "./keys";
import { ButtonSelect } from "./components/ButtonSelect";
import { findShapeByKey, shapesShortcutKeys } from "./shapes"; import { findShapeByKey, shapesShortcutKeys } from "./shapes";
import { createHistory } from "./history"; import { createHistory } from "./history";
import ContextMenu from "./components/ContextMenu"; import ContextMenu from "./components/ContextMenu";
import { PanelTools } from "./components/panels/PanelTools";
import { PanelSelection } from "./components/panels/PanelSelection";
import { PanelColor } from "./components/panels/PanelColor";
import { PanelExport } from "./components/panels/PanelExport";
import { PanelCanvas } from "./components/panels/PanelCanvas";
import { Panel } from "./components/Panel";
import "./styles.scss"; import "./styles.scss";
import { getElementWithResizeHandler } from "./element/resizeTest"; import { getElementWithResizeHandler } from "./element/resizeTest";
import { SidePanel } from "./components/SidePanel";
let { elements } = createScene(); let { elements } = createScene();
const { history } = createHistory(); const { history } = createHistory();
@ -307,7 +294,7 @@ export class App extends React.Component<{}, AppState> {
}; };
if (isTextElement(newElement)) { if (isTextElement(newElement)) {
newElement.font = pastedElement?.font; newElement.font = pastedElement?.font;
this.redrawTextBoundingBox(newElement); redrawTextBoundingBox(newElement);
} }
return newElement; return newElement;
} }
@ -338,10 +325,6 @@ export class App extends React.Component<{}, AppState> {
private removeWheelEventListener: (() => void) | undefined; private removeWheelEventListener: (() => void) | undefined;
private updateProjectName(name: string): void {
this.setState({ name });
}
private changeProperty = ( private changeProperty = (
callback: (element: ExcalidrawElement) => ExcalidrawElement callback: (element: ExcalidrawElement) => ExcalidrawElement
) => { ) => {
@ -355,29 +338,6 @@ export class App extends React.Component<{}, AppState> {
this.forceUpdate(); this.forceUpdate();
}; };
private changeOpacity = (event: React.ChangeEvent<HTMLInputElement>) => {
this.changeProperty(element => ({
...element,
opacity: +event.target.value
}));
};
private changeStrokeColor = (color: string) => {
this.changeProperty(element => ({
...element,
strokeColor: color
}));
this.setState({ currentItemStrokeColor: color });
};
private changeBackgroundColor = (color: string) => {
this.changeProperty(element => ({
...element,
backgroundColor: color
}));
this.setState({ currentItemBackgroundColor: color });
};
private copyToClipboard = () => { private copyToClipboard = () => {
if (navigator.clipboard) { if (navigator.clipboard) {
const text = JSON.stringify( const text = JSON.stringify(
@ -395,13 +355,6 @@ export class App extends React.Component<{}, AppState> {
} }
}; };
private redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
const metrics = measureText(element.text, element.font);
element.width = metrics.width;
element.height = metrics.height;
element.baseline = metrics.baseline;
};
public render() { public render() {
const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT; const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP; const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
@ -431,206 +384,31 @@ export class App extends React.Component<{}, AppState> {
e.preventDefault(); e.preventDefault();
}} }}
> >
<div className="sidePanel"> <SidePanel
<PanelTools elements={elements}
activeTool={this.state.elementType} onToolChange={value => {
onToolChange={value => { this.setState({ elementType: value });
this.setState({ elementType: value }); elements = clearSelection(elements);
elements = clearSelection(elements); document.documentElement.style.cursor =
document.documentElement.style.cursor = value === "text" ? "text" : "crosshair";
value === "text" ? "text" : "crosshair"; this.forceUpdate();
this.forceUpdate(); }}
}} moveAllLeft={this.moveAllLeft}
/> moveAllRight={this.moveAllRight}
<Panel title="Selection" hide={!someElementIsSelected(elements)}> moveOneLeft={this.moveOneLeft}
<PanelSelection moveOneRight={this.moveOneRight}
onBringForward={this.moveOneRight} onClearCanvas={this.clearCanvas}
onBringToFront={this.moveAllRight} changeProperty={this.changeProperty}
onSendBackward={this.moveOneLeft} onUpdateAppState={(name, value) => {
onSendToBack={this.moveAllLeft} this.setState({ [name]: value } as any);
/> }}
onUpdateElements={newElements => {
<PanelColor elements = newElements;
title="Stroke Color" this.forceUpdate();
onColorChange={this.changeStrokeColor} }}
colorValue={getSelectedAttribute( appState={{ ...this.state }}
elements, canvas={this.canvas!}
element => element.strokeColor />
)}
/>
{hasBackground(elements) && (
<>
<PanelColor
title="Background Color"
onColorChange={this.changeBackgroundColor}
colorValue={getSelectedAttribute(
elements,
element => element.backgroundColor
)}
/>
<h5>Fill</h5>
<ButtonSelect
options={[
{ value: "solid", text: "Solid" },
{ value: "hachure", text: "Hachure" },
{ value: "cross-hatch", text: "Cross-hatch" }
]}
value={getSelectedAttribute(
elements,
element => element.fillStyle
)}
onChange={value => {
this.changeProperty(element => ({
...element,
fillStyle: value
}));
}}
/>
</>
)}
{hasStroke(elements) && (
<>
<h5>Stroke Width</h5>
<ButtonSelect
options={[
{ value: 1, text: "Thin" },
{ value: 2, text: "Bold" },
{ value: 4, text: "Extra Bold" }
]}
value={getSelectedAttribute(
elements,
element => element.strokeWidth
)}
onChange={value => {
this.changeProperty(element => ({
...element,
strokeWidth: value
}));
}}
/>
<h5>Sloppiness</h5>
<ButtonSelect
options={[
{ value: 0, text: "Draftsman" },
{ value: 1, text: "Artist" },
{ value: 3, text: "Cartoonist" }
]}
value={getSelectedAttribute(
elements,
element => element.roughness
)}
onChange={value =>
this.changeProperty(element => ({
...element,
roughness: value
}))
}
/>
</>
)}
{hasText(elements) && (
<>
<h5>Font size</h5>
<ButtonSelect
options={[
{ value: 16, text: "Small" },
{ value: 20, text: "Medium" },
{ value: 28, text: "Large" },
{ value: 36, text: "Very Large" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && +element.font.split("px ")[0]
)}
onChange={value =>
this.changeProperty(element => {
if (isTextElement(element)) {
element.font = `${value}px ${
element.font.split("px ")[1]
}`;
this.redrawTextBoundingBox(element);
}
return element;
})
}
/>
<h5>Font familly</h5>
<ButtonSelect
options={[
{ value: "Virgil", text: "Virgil" },
{ value: "Helvetica", text: "Helvetica" },
{ value: "Courier", text: "Courier" }
]}
value={getSelectedAttribute(
elements,
element =>
isTextElement(element) && element.font.split("px ")[1]
)}
onChange={value =>
this.changeProperty(element => {
if (isTextElement(element)) {
element.font = `${
element.font.split("px ")[0]
}px ${value}`;
this.redrawTextBoundingBox(element);
}
return element;
})
}
/>
</>
)}
<h5>Opacity</h5>
<input
type="range"
min="0"
max="100"
onChange={this.changeOpacity}
value={
getSelectedAttribute(elements, element => element.opacity) ||
0 /* Put the opacity at 0 if there are two conflicting ones */
}
/>
<button onClick={this.deleteSelectedElements}>
Delete selected
</button>
</Panel>
<PanelCanvas
onClearCanvas={this.clearCanvas}
onViewBackgroundColorChange={val =>
this.setState({ viewBackgroundColor: val })
}
viewBackgroundColor={this.state.viewBackgroundColor}
/>
<PanelExport
projectName={this.state.name}
onProjectNameChange={this.updateProjectName}
onExportCanvas={(type: ExportType) =>
exportCanvas(type, elements, this.canvas!, this.state)
}
exportBackground={this.state.exportBackground}
onExportBackgroundChange={val =>
this.setState({ exportBackground: val })
}
onSaveScene={() => saveAsJSON(elements, this.state.name)}
onLoadScene={() =>
loadFromJSON().then(({ elements: newElements }) => {
elements = newElements;
this.forceUpdate();
})
}
/>
</div>
<canvas <canvas
id="canvas" id="canvas"
style={{ style={{

Write Preview
Loading…
Cancel
Save