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

feat: zigzag fill easter egg (#6439)

Browse source
This commit is contained in:
David Luzar 2023-04-10 15:38:50 +02:00 • committed by GitHub
parent ec215362a1
commit e4d8ba226f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 120 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/actions/actionProperties.tsx
View file

@ -1,4 +1,5 @@
import { AppState } from "../../src/types";
import { trackEvent } from "../analytics";
import { ButtonIconSelect } from "../components/ButtonIconSelect";
import { ColorPicker } from "../components/ColorPicker";
import { IconPicker } from "../components/IconPicker";
@ -37,6 +38,7 @@ import {
TextAlignLeftIcon,
TextAlignCenterIcon,
TextAlignRightIcon,
FillZigZagIcon,
} from "../components/icons";
import {
DEFAULT_FONT_FAMILY,
@ -294,7 +296,12 @@ export const actionChangeBackgroundColor = register({
export const actionChangeFillStyle = register({
name: "changeFillStyle",
trackEvent: false,
perform: (elements, appState, value) => {
perform: (elements, appState, value, app) => {
trackEvent(
"element",
"changeFillStyle",
`${value} (${app.device.isMobile ? "mobile" : "desktop"})`,
);
return {
elements: changeProperty(elements, appState, (el) =>
newElementWith(el, {
@ -305,40 +312,55 @@ export const actionChangeFillStyle = register({
commitToHistory: true,
};
},
PanelComponent: ({ elements, appState, updateData }) => (
<fieldset>
<legend>{t("labels.fill")}</legend>
<ButtonIconSelect
options={[
{
value: "hachure",
text: t("labels.hachure"),
icon: FillHachureIcon,
},
{
value: "cross-hatch",
text: t("labels.crossHatch"),
icon: FillCrossHatchIcon,
},
{
value: "solid",
text: t("labels.solid"),
icon: FillSolidIcon,
},
]}
group="fill"
value={getFormValue(
elements,
appState,
(element) => element.fillStyle,
appState.currentItemFillStyle,
)}
onChange={(value) => {
updateData(value);
}}
/>
</fieldset>
),
PanelComponent: ({ elements, appState, updateData }) => {
const selectedElements = getSelectedElements(elements, appState);
const allElementsZigZag = selectedElements.every(
(el) => el.fillStyle === "zigzag",
);
return (
<fieldset>
<legend>{t("labels.fill")}</legend>
<ButtonIconSelect
type="button"
options={[
{
value: "hachure",
text: t("labels.hachure"),
icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
active: allElementsZigZag ? true : undefined,
},
{
value: "cross-hatch",
text: t("labels.crossHatch"),
icon: FillCrossHatchIcon,
},
{
value: "solid",
text: t("labels.solid"),
icon: FillSolidIcon,
},
]}
value={getFormValue(
elements,
appState,
(element) => element.fillStyle,
appState.currentItemFillStyle,
)}
onClick={(value, event) => {
const nextValue =
event.altKey &&
value === "hachure" &&
selectedElements.every((el) => el.fillStyle === "hachure")
? "zigzag"
: value;
updateData(nextValue);
}}
/>
</fieldset>
);
},
});
export const actionChangeStrokeWidth = register({