Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

editing single element

Browse Source
This commit is contained in:
Ryan Di 2023-03-27 17:51:31 +08:00
parent 30743ec726
commit 3fc89b716a
2 changed files with 139 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Stats.scss
View File

@ -9,8 +9,33 @@
z-index: 10; z-index: 10;
pointer-events: all; pointer-events: all;
.section { .sectionContent {
padding: 12px; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.elementType {
font-size: 12px;
font-weight: 700;
margin-bottom: 8px;
}
.statsItem {
margin-bottom: 4px;
display: flex;
align-items: center;
// margin-right: 8px;
.label {
margin-right: 4px;
width: 10px;
}
.input {
width: 55px;
}
} }
h3 { h3 {

171
src/components/Stats.tsx
View File

@ -1,7 +1,12 @@
import React from "react"; import React from "react";
import { getCommonBounds } from "../element/bounds"; import { getCommonBounds } from "../element/bounds";
import { NonDeletedExcalidrawElement } from "../element/types"; import { mutateElement } from "../element/mutateElement";
import {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "../element/types";
import { t } from "../i18n"; import { t } from "../i18n";
import { KEYS } from "../keys";
import { getTargetElements } from "../scene"; import { getTargetElements } from "../scene";
import { AppState, ExcalidrawProps } from "../types"; import { AppState, ExcalidrawProps } from "../types";
import { CloseIcon } from "./icons"; import { CloseIcon } from "./icons";
@ -19,9 +24,45 @@ export const Stats = (props: {
const selectedElements = getTargetElements(props.elements, props.appState); const selectedElements = getTargetElements(props.elements, props.appState);
const selectedBoundingBox = getCommonBounds(selectedElements); const selectedBoundingBox = getCommonBounds(selectedElements);
const stats =
selectedElements.length === 1
? [
{
label: "X",
value: Math.round(selectedBoundingBox[0]),
element: selectedElements[0],
property: "x",
},
{
label: "Y",
value: Math.round(selectedBoundingBox[1]),
element: selectedElements[0],
property: "y",
},
{
label: "W",
value: Math.round(selectedBoundingBox[2] - selectedBoundingBox[0]),
element: selectedElements[0],
property: "width",
},
{
label: "H",
value: Math.round(selectedBoundingBox[3] - selectedBoundingBox[1]),
element: selectedElements[0],
property: "height",
},
{
label: "A",
value: selectedElements[0].angle,
element: selectedElements[0],
property: "angle",
},
]
: [];
return ( return (
<div className="Stats"> <div className="Stats">
<Island> <Island padding={3}>
<div className="section"> <div className="section">
<div className="close" onClick={props.onClose}> <div className="close" onClick={props.onClose}>
{CloseIcon} {CloseIcon}
@ -54,75 +95,79 @@ export const Stats = (props: {
</div> </div>
{selectedElements.length > 0 && ( {selectedElements.length > 0 && (
<>
<div className="divider"></div>
<div className="section"> <div className="section">
<h3>{t("stats.elementStats")}</h3> <h3>{t("stats.elementStats")}</h3>
<table> <div className="sectionContent">
<tbody>
{selectedElements.length === 1 && ( {selectedElements.length === 1 && (
<tr> <div className="elementType">
<th colSpan={2}>
{t(`element.${selectedElements[0].type}`)} {t(`element.${selectedElements[0].type}`)}
</th> </div>
</tr>
)} )}
{selectedElements.length > 1 && ( <div
<> style={{
<tr> display: "grid",
<th colSpan={2}>{t("stats.selected")}</th> gridTemplateColumns: "repeat(2, 1fr)",
</tr> gap: "4px 8px",
<tr> }}
<td>{t("stats.elements")}</td> >
<td>{selectedElements.length}</td> {stats.map((statsItem) => (
</tr> <label
</> className="color-input-container"
)} key={statsItem.property}
{selectedElements.length > 0 && ( >
<> <div
<tr> className="color-picker-hash"
<td>{"x"}</td> style={{
<td>{Math.round(selectedBoundingBox[0])}</td> width: "30px",
</tr> }}
<tr> >
<td>{"y"}</td> {statsItem.label}
<td>{Math.round(selectedBoundingBox[1])}</td> </div>
</tr> <input
<tr> id={statsItem.label}
<td>{t("stats.width")}</td> defaultValue={statsItem.value}
<td> className="color-picker-input"
{Math.round( style={{
selectedBoundingBox[2] - selectedBoundingBox[0], width: "55px",
)} }}
</td> autoComplete="off"
</tr> spellCheck="false"
<tr> onKeyDown={(event) => {
<td>{t("stats.height")}</td> const value = Number(event.target.value);
<td>
{Math.round( if (event.key === KEYS.ENTER) {
selectedBoundingBox[3] - selectedBoundingBox[1], if (!isNaN(value)) {
)} mutateElement(statsItem.element, {
</td> [statsItem.property]: value,
</tr> });
</> }
)}
{selectedElements.length === 1 && ( event.target.value = statsItem.element[
<tr> statsItem.property as keyof ExcalidrawElement
<td>{t("stats.angle")}</td> ] as string;
<td> }
{`${Math.round( }}
(selectedElements[0].angle * 180) / Math.PI, onBlur={(event) => {
)}°`} const value = Number(event.target.value);
</td>
</tr> if (!isNaN(value)) {
)} mutateElement(statsItem.element, {
</tbody> [statsItem.property]: value,
</table> });
}
event.target.value = statsItem.element[
statsItem.property as keyof ExcalidrawElement
] as string;
}}
></input>
</label>
))}
</div>
</div>
</div> </div>
</>
)} )}
</Island> </Island>
</div> </div>