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

More Arrowheads: dot, bar (#2486)

Browse source 
Co-authored-by: Jed Fox <git@jedfox.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
Steve Ruiz 2020-12-11 17:17:28 +00:00 • committed by GitHub
parent 7c7fb4903b
commit c742225f43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 550 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

190
src/actions/actionProperties.tsx
View file

@ -1,4 +1,5 @@
import React from "react";
import { getLanguage } from "../i18n";
import {
ExcalidrawElement,
ExcalidrawTextElement,
@ -16,7 +17,7 @@ import {
} from "../scene";
import { ButtonSelect } from "../components/ButtonSelect";
import { ButtonIconSelect } from "../components/ButtonIconSelect";
import { ButtonIconCycle } from "../components/ButtonIconCycle";
import { IconPicker } from "../components/IconPicker";
import {
isTextElement,
redrawTextBoundingBox,
@ -43,7 +44,10 @@ import {
SloppinessArchitectIcon,
SloppinessArtistIcon,
SloppinessCartoonistIcon,
ArrowArrowheadIcon,
ArrowheadArrowIcon,
ArrowheadBarIcon,
ArrowheadDotIcon,
ArrowheadNoneIcon,
} from "../components/icons";
import { EVENT_CHANGE, trackEvent } from "../analytics";
import colors from "../colors";
@ -671,66 +675,124 @@ export const actionChangeArrowhead = register({
commitToHistory: true,
};
},
PanelComponent: ({ elements, appState, updateData }) => (
<fieldset>
<legend>{t("labels.arrowheads")}</legend>
<div className="buttonList buttonListIcon">
<ButtonIconCycle
group="arrowhead_start"
options={[
{
value: null,
text: t("labels.arrowhead_none"),
icon: <StrokeStyleSolidIcon appearance={appState.appearance} />,
},
{
value: "arrow",
text: t("labels.arrowhead_arrow"),
icon: (
<ArrowArrowheadIcon
appearance={appState.appearance}
flip={true}
/>
),
},
]}
value={getFormValue<Arrowhead | null>(
elements,
appState,
(element) =>
isLinearElement(element) && canHaveArrowheads(element.type)
? element.startArrowhead
: appState.currentItemArrowheads.start,
appState.currentItemArrowheads.start,
)}
onChange={(value) => updateData({ position: "start", type: value })}
/>
<ButtonIconCycle
group="arrowhead_end"
options={[
{
value: null,
text: t("labels.arrowhead_none"),
icon: <StrokeStyleSolidIcon appearance={appState.appearance} />,
},
{
value: "arrow",
text: t("labels.arrowhead_arrow"),
icon: <ArrowArrowheadIcon appearance={appState.appearance} />,
},
]}
value={getFormValue<Arrowhead | null>(
elements,
appState,
(element) =>
isLinearElement(element) && canHaveArrowheads(element.type)
? element.endArrowhead
: appState.currentItemArrowheads.end,
appState.currentItemArrowheads.end,
)}
onChange={(value) => updateData({ position: "end", type: value })}
/>
</div>
</fieldset>
),
PanelComponent: ({ elements, appState, updateData }) => {
const isRTL = getLanguage().rtl;
return (
<fieldset>
<legend>{t("labels.arrowheads")}</legend>
<div className="iconSelectList">
<IconPicker
label="arrowhead_start"
options={[
{
value: null,
text: t("labels.arrowhead_none"),
icon: <ArrowheadNoneIcon appearance={appState.appearance} />,
keyBinding: "q",
},
{
value: "arrow",
text: t("labels.arrowhead_arrow"),
icon: (
<ArrowheadArrowIcon
appearance={appState.appearance}
flip={!isRTL}
/>
),
keyBinding: "w",
},
{
value: "bar",
text: t("labels.arrowhead_bar"),
icon: (
<ArrowheadBarIcon
appearance={appState.appearance}
flip={!isRTL}
/>
),
keyBinding: "e",
},
{
value: "dot",
text: t("labels.arrowhead_dot"),
icon: (
<ArrowheadDotIcon
appearance={appState.appearance}
flip={!isRTL}
/>
),
keyBinding: "r",
},
]}
value={getFormValue<Arrowhead | null>(
elements,
appState,
(element) =>
isLinearElement(element) && canHaveArrowheads(element.type)
? element.startArrowhead
: appState.currentItemArrowheads.start,
appState.currentItemArrowheads.start,
)}
onChange={(value) => updateData({ position: "start", type: value })}
/>
<IconPicker
label="arrowhead_end"
group="arrowheads"
options={[
{
value: null,
text: t("labels.arrowhead_none"),
keyBinding: "q",
icon: <ArrowheadNoneIcon appearance={appState.appearance} />,
},
{
value: "arrow",
text: t("labels.arrowhead_arrow"),
keyBinding: "w",
icon: (
<ArrowheadArrowIcon
appearance={appState.appearance}
flip={isRTL}
/>
),
},
{
value: "bar",
text: t("labels.arrowhead_bar"),
keyBinding: "e",
icon: (
<ArrowheadBarIcon
appearance={appState.appearance}
flip={isRTL}
/>
),
},
{
value: "dot",
text: t("labels.arrowhead_dot"),
keyBinding: "r",
icon: (
<ArrowheadDotIcon
appearance={appState.appearance}
flip={isRTL}
/>
),
},
]}
value={getFormValue<Arrowhead | null>(
elements,
appState,
(element) =>
isLinearElement(element) && canHaveArrowheads(element.type)
? element.endArrowhead
: appState.currentItemArrowheads.end,
appState.currentItemArrowheads.end,
)}
onChange={(value) => updateData({ position: "end", type: value })}
/>
</div>
</fieldset>
);
},
});