smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separating shapes

Browse source
This commit is contained in:
Marcel Mraz 2025-03-14 12:33:58 +01:00
parent a0c16d9bc1
commit de0598287c
No known key found for this signature in database
GPG key ID: 4EBD6E62DC830CD2
2 changed files with 100 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

99
packages/excalidraw/shapes.tsx → packages/element/shapes.ts
View file

@ -18,18 +18,6 @@ import {
type GeometricShape, type GeometricShape,
} from "@excalidraw/utils/geometry/shape"; } from "@excalidraw/utils/geometry/shape";
import {
ArrowIcon,
DiamondIcon,
EllipseIcon,
EraserIcon,
FreedrawIcon,
ImageIcon,
LineIcon,
RectangleIcon,
SelectionIcon,
TextIcon,
} from "./components/icons";
import { import {
DEFAULT_ADAPTIVE_RADIUS, DEFAULT_ADAPTIVE_RADIUS,
DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_PROPORTIONAL_RADIUS,
@ -40,7 +28,6 @@ import { getElementAbsoluteCoords } from "./element";
import { shouldTestInside } from "./element/collision"; import { shouldTestInside } from "./element/collision";
import { LinearElementEditor } from "./element/linearElementEditor"; import { LinearElementEditor } from "./element/linearElementEditor";
import { getBoundTextElement } from "./element/textElement"; import { getBoundTextElement } from "./element/textElement";
import { KEYS } from "./keys";
import { ShapeCache } from "./scene/ShapeCache"; import { ShapeCache } from "./scene/ShapeCache";
import { invariant } from "./utils"; import { invariant } from "./utils";
@ -53,92 +40,6 @@ import type {
} from "./element/types"; } from "./element/types";
import type { NormalizedZoomValue, Zoom } from "./types"; import type { NormalizedZoomValue, Zoom } from "./types";
export const SHAPES = [
{
icon: SelectionIcon,
value: "selection",
key: KEYS.V,
numericKey: KEYS["1"],
fillable: true,
},
{
icon: RectangleIcon,
value: "rectangle",
key: KEYS.R,
numericKey: KEYS["2"],
fillable: true,
},
{
icon: DiamondIcon,
value: "diamond",
key: KEYS.D,
numericKey: KEYS["3"],
fillable: true,
},
{
icon: EllipseIcon,
value: "ellipse",
key: KEYS.O,
numericKey: KEYS["4"],
fillable: true,
},
{
icon: ArrowIcon,
value: "arrow",
key: KEYS.A,
numericKey: KEYS["5"],
fillable: true,
},
{
icon: LineIcon,
value: "line",
key: KEYS.L,
numericKey: KEYS["6"],
fillable: true,
},
{
icon: FreedrawIcon,
value: "freedraw",
key: [KEYS.P, KEYS.X],
numericKey: KEYS["7"],
fillable: false,
},
{
icon: TextIcon,
value: "text",
key: KEYS.T,
numericKey: KEYS["8"],
fillable: false,
},
{
icon: ImageIcon,
value: "image",
key: null,
numericKey: KEYS["9"],
fillable: false,
},
{
icon: EraserIcon,
value: "eraser",
key: KEYS.E,
numericKey: KEYS["0"],
fillable: false,
},
] as const;
export const findShapeByKey = (key: string) => {
const shape = SHAPES.find((shape, index) => {
return (
(shape.numericKey != null && key === shape.numericKey.toString()) ||
(shape.key &&
(typeof shape.key === "string"
? shape.key === key
: (shape.key as readonly string[]).includes(key)))
);
});
return shape?.value || null;
};
/** /**
* get the pure geometric shape of an excalidraw element * get the pure geometric shape of an excalidraw element
* which is then used for hit detection * which is then used for hit detection

100
packages/excalidraw/components/shapes.tsx Normal file
View file

@ -0,0 +1,100 @@
import { KEYS } from "../keys";
import {
SelectionIcon,
RectangleIcon,
DiamondIcon,
EllipseIcon,
ArrowIcon,
LineIcon,
FreedrawIcon,
TextIcon,
ImageIcon,
EraserIcon,
} from "./icons";
export const SHAPES = [
{
icon: SelectionIcon,
value: "selection",
key: KEYS.V,
numericKey: KEYS["1"],
fillable: true,
},
{
icon: RectangleIcon,
value: "rectangle",
key: KEYS.R,
numericKey: KEYS["2"],
fillable: true,
},
{
icon: DiamondIcon,
value: "diamond",
key: KEYS.D,
numericKey: KEYS["3"],
fillable: true,
},
{
icon: EllipseIcon,
value: "ellipse",
key: KEYS.O,
numericKey: KEYS["4"],
fillable: true,
},
{
icon: ArrowIcon,
value: "arrow",
key: KEYS.A,
numericKey: KEYS["5"],
fillable: true,
},
{
icon: LineIcon,
value: "line",
key: KEYS.L,
numericKey: KEYS["6"],
fillable: true,
},
{
icon: FreedrawIcon,
value: "freedraw",
key: [KEYS.P, KEYS.X],
numericKey: KEYS["7"],
fillable: false,
},
{
icon: TextIcon,
value: "text",
key: KEYS.T,
numericKey: KEYS["8"],
fillable: false,
},
{
icon: ImageIcon,
value: "image",
key: null,
numericKey: KEYS["9"],
fillable: false,
},
{
icon: EraserIcon,
value: "eraser",
key: KEYS.E,
numericKey: KEYS["0"],
fillable: false,
},
] as const;
export const findShapeByKey = (key: string) => {
const shape = SHAPES.find((shape, index) => {
return (
(shape.numericKey != null && key === shape.numericKey.toString()) ||
(shape.key &&
(typeof shape.key === "string"
? shape.key === key
: (shape.key as readonly string[]).includes(key)))
);
});
return shape?.value || null;
};