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

Refactor (#862)

Browse source 
* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Jed Fox 2020-03-07 10:20:38 -05:00 • committed by GitHub
parent 1a6431a04a
commit c6a0cfc2b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 3498 additions and 3372 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/actions/actionZindex.tsx
View file

@ -1,5 +1,4 @@
import React from "react";
import { Action } from "./types";
import {
moveOneLeft,
moveOneRight,
@ -9,73 +8,15 @@ import {
import { getSelectedIndices } from "../scene";
import { KEYS } from "../keys";
import { t } from "../i18n";
import { register } from "./register";
import {
sendBackward,
bringToFront,
sendToBack,
bringForward,
} from "../components/icons";
const ACTIVE_ELEM_COLOR = "#ffa94d"; // OC ORANGE 4
const ICONS = {
bringForward: (
<svg viewBox="0 0 24 24">
<path
d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
stroke="#000"
strokeWidth="2"
/>
<path
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
</svg>
),
sendBackward: (
<svg viewBox="0 0 24 24">
<path
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
<path
d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
stroke="#000"
strokeWidth="2"
/>
</svg>
),
bringToFront: (
<svg viewBox="0 0 24 24">
<path
d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
stroke="#000"
strokeWidth="2"
/>
<path
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
</svg>
),
sendToBack: (
<svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">
<path
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
fill={ACTIVE_ELEM_COLOR}
stroke={ACTIVE_ELEM_COLOR}
strokeWidth="2"
/>
<path
d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
stroke="#000"
strokeWidth="2"
/>
</svg>
),
};
export const actionSendBackward: Action = {
export const actionSendBackward = register({
name: "sendBackward",
perform: (elements, appState) => {
return {
@ -91,15 +32,15 @@ export const actionSendBackward: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.sendBackward")}
>
{ICONS.sendBackward}
{sendBackward}
</button>
),
};
});
export const actionBringForward: Action = {
export const actionBringForward = register({
name: "bringForward",
perform: (elements, appState) => {
return {
@ -115,15 +56,15 @@ export const actionBringForward: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.bringForward")}
>
{ICONS.bringForward}
{bringForward}
</button>
),
};
});
export const actionSendToBack: Action = {
export const actionSendToBack = register({
name: "sendToBack",
perform: (elements, appState) => {
return {
@ -138,15 +79,15 @@ export const actionSendToBack: Action = {
<button
type="button"
className="zIndexButton"
onClick={event => updateData(null)}
onClick={() => updateData(null)}
title={t("labels.sendToBack")}
>
{ICONS.sendToBack}
{sendToBack}
</button>
),
};
});
export const actionBringToFront: Action = {
export const actionBringToFront = register({
name: "bringToFront",
perform: (elements, appState) => {
return {
@ -164,7 +105,7 @@ export const actionBringToFront: Action = {
onClick={event => updateData(null)}
title={t("labels.bringToFront")}
>
{ICONS.bringToFront}
{bringToFront}
</button>
),
};
});