feat(editor): ERD arrowheads and diagrams (#10940)
This commit is contained in:
David Luzar
@@ -3703,7 +3703,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
if (!isPlainPaste && isMaybeMermaidDefinition(data.text)) {
|
||||
const api = await import("@excalidraw/mermaid-to-excalidraw");
|
||||
try {
|
||||
const { elements: skeletonElements, files } =
|
||||
const { elements: skeletonElements, files = {} } =
|
||||
await api.parseMermaidToExcalidraw(data.text);
|
||||
|
||||
const elements = convertToExcalidrawElements(skeletonElements, {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
padding: 0.5rem;
|
||||
background: var(--popup-bg-color);
|
||||
border: 0 solid color.adjust(#fff, $alpha: -0.75);
|
||||
box-shadow: var(--shadow-island);
|
||||
box-shadow: var(--shadow-island-stronger);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
:root[dir="rtl"] & {
|
||||
@@ -14,6 +14,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.picker-sections,
|
||||
.picker-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.picker-container button,
|
||||
.picker button {
|
||||
position: relative;
|
||||
@@ -62,7 +69,13 @@
|
||||
|
||||
.picker-collapsible {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0;
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
|
||||
.picker-section-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
|
||||
.picker-keybinding {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Popover } from "radix-ui";
|
||||
import clsx from "clsx";
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
|
||||
import { isArrowKey, KEYS } from "@excalidraw/common";
|
||||
|
||||
@@ -15,6 +15,8 @@ import "./IconPicker.scss";
|
||||
import type { JSX } from "react";
|
||||
|
||||
const moreOptionsAtom = atom(false);
|
||||
const PICKER_COLUMNS = 4;
|
||||
const DEFAULT_SECTION_NAME = "default";
|
||||
|
||||
type Option<T> = {
|
||||
value: T;
|
||||
@@ -23,28 +25,74 @@ type Option<T> = {
|
||||
keyBinding: string | null;
|
||||
};
|
||||
|
||||
type PickerSection<T> = {
|
||||
name: string;
|
||||
options: readonly Option<T>[];
|
||||
};
|
||||
|
||||
const flattenOptions = <T,>(sections: readonly PickerSection<T>[]) =>
|
||||
sections.flatMap((section) => section.options);
|
||||
|
||||
const findOption = <T,>(
|
||||
sections: readonly PickerSection<T>[],
|
||||
predicate: (option: Option<T>) => boolean,
|
||||
) => {
|
||||
for (const section of sections) {
|
||||
const option = section.options.find(predicate);
|
||||
if (option) {
|
||||
return option;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const hasOption = <T,>(
|
||||
sections: readonly PickerSection<T>[],
|
||||
predicate: (option: Option<T>) => boolean,
|
||||
) => sections.some((section) => section.options.some(predicate));
|
||||
|
||||
const getNavigationRows = <T,>(sections: readonly PickerSection<T>[]) =>
|
||||
sections.flatMap((section) =>
|
||||
Array.from(
|
||||
{ length: Math.ceil(section.options.length / PICKER_COLUMNS) },
|
||||
(_, index) =>
|
||||
section.options.slice(
|
||||
index * PICKER_COLUMNS,
|
||||
index * PICKER_COLUMNS + PICKER_COLUMNS,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
function Picker<T>({
|
||||
options,
|
||||
visibleSections,
|
||||
hiddenSections = [],
|
||||
value,
|
||||
label,
|
||||
onChange,
|
||||
onClose,
|
||||
numberOfOptionsToAlwaysShow = options.length,
|
||||
}: {
|
||||
label: string;
|
||||
value: T;
|
||||
options: readonly Option<T>[];
|
||||
visibleSections: readonly PickerSection<T>[];
|
||||
hiddenSections?: readonly PickerSection<T>[];
|
||||
onChange: (value: T) => void;
|
||||
onClose: () => void;
|
||||
numberOfOptionsToAlwaysShow?: number;
|
||||
}) {
|
||||
const editorInterface = useEditorInterface();
|
||||
const { container } = useExcalidrawContainer();
|
||||
const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
|
||||
const allSections = [...visibleSections, ...hiddenSections];
|
||||
const allOptions = flattenOptions(allSections);
|
||||
const navigationRows = getNavigationRows([
|
||||
...visibleSections,
|
||||
...(showMoreOptions ? hiddenSections : []),
|
||||
]);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
const pressedOption = options.find(
|
||||
const pressedOption = allOptions.find(
|
||||
(option) => option.keyBinding === event.key.toLowerCase(),
|
||||
)!;
|
||||
);
|
||||
|
||||
if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
|
||||
// Keybinding navigation
|
||||
@@ -52,17 +100,17 @@ function Picker<T>({
|
||||
|
||||
event.preventDefault();
|
||||
} else if (event.key === KEYS.TAB) {
|
||||
const index = options.findIndex((option) => option.value === value);
|
||||
const index = allOptions.findIndex((option) => option.value === value);
|
||||
const nextIndex = event.shiftKey
|
||||
? (options.length + index - 1) % options.length
|
||||
: (index + 1) % options.length;
|
||||
onChange(options[nextIndex].value);
|
||||
? (allOptions.length + index - 1) % allOptions.length
|
||||
: (index + 1) % allOptions.length;
|
||||
onChange(allOptions[nextIndex].value);
|
||||
} else if (isArrowKey(event.key)) {
|
||||
// Arrow navigation
|
||||
const isRTL = getLanguage().rtl;
|
||||
const index = options.findIndex((option) => option.value === value);
|
||||
const index = allOptions.findIndex((option) => option.value === value);
|
||||
if (index !== -1) {
|
||||
const length = options.length;
|
||||
const length = allOptions.length;
|
||||
let nextIndex = index;
|
||||
|
||||
switch (event.key) {
|
||||
@@ -76,18 +124,60 @@ function Picker<T>({
|
||||
break;
|
||||
// Go the next row
|
||||
case KEYS.ARROW_DOWN: {
|
||||
nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length;
|
||||
const currentRowIndex = navigationRows.findIndex((row) =>
|
||||
row.some((option) => option.value === value),
|
||||
);
|
||||
const currentRow = navigationRows[currentRowIndex];
|
||||
|
||||
if (currentRowIndex !== -1 && currentRow) {
|
||||
const column = currentRow.findIndex(
|
||||
(option) => option.value === value,
|
||||
);
|
||||
const nextRow =
|
||||
navigationRows[(currentRowIndex + 1) % navigationRows.length];
|
||||
const nextOption =
|
||||
nextRow[Math.min(column, nextRow.length - 1)] ??
|
||||
allOptions[index];
|
||||
|
||||
onChange(nextOption.value);
|
||||
event.preventDefault();
|
||||
event.nativeEvent.stopImmediatePropagation();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
// Go the previous row
|
||||
case KEYS.ARROW_UP: {
|
||||
nextIndex =
|
||||
(length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length;
|
||||
const currentRowIndex = navigationRows.findIndex((row) =>
|
||||
row.some((option) => option.value === value),
|
||||
);
|
||||
const currentRow = navigationRows[currentRowIndex];
|
||||
|
||||
if (currentRowIndex !== -1 && currentRow) {
|
||||
const column = currentRow.findIndex(
|
||||
(option) => option.value === value,
|
||||
);
|
||||
const previousRow =
|
||||
navigationRows[
|
||||
(navigationRows.length + currentRowIndex - 1) %
|
||||
navigationRows.length
|
||||
];
|
||||
const previousOption =
|
||||
previousRow[Math.min(column, previousRow.length - 1)] ??
|
||||
allOptions[index];
|
||||
|
||||
onChange(previousOption.value);
|
||||
event.preventDefault();
|
||||
event.nativeEvent.stopImmediatePropagation();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onChange(options[nextIndex].value);
|
||||
onChange(allOptions[nextIndex].value);
|
||||
}
|
||||
event.preventDefault();
|
||||
} else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
|
||||
@@ -99,38 +189,29 @@ function Picker<T>({
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
|
||||
|
||||
const alwaysVisibleOptions = React.useMemo(
|
||||
() => options.slice(0, numberOfOptionsToAlwaysShow),
|
||||
[options, numberOfOptionsToAlwaysShow],
|
||||
);
|
||||
const moreOptions = React.useMemo(
|
||||
() => options.slice(numberOfOptionsToAlwaysShow),
|
||||
[options, numberOfOptionsToAlwaysShow],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!alwaysVisibleOptions.some((option) => option.value === value)) {
|
||||
if (hasOption(hiddenSections, (option) => option.value === value)) {
|
||||
setShowMoreOptions(true);
|
||||
}
|
||||
}, [value, alwaysVisibleOptions, setShowMoreOptions]);
|
||||
}, [value, hiddenSections, setShowMoreOptions]);
|
||||
|
||||
const renderOptions = (options: Option<T>[]) => {
|
||||
const renderOptions = (options: readonly Option<T>[]) => {
|
||||
return (
|
||||
<div className="picker-content">
|
||||
{options.map((option, i) => (
|
||||
{options.map((option) => (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx("picker-option", {
|
||||
active: value === option.value,
|
||||
})}
|
||||
onClick={(event) => {
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
}}
|
||||
title={`${option.text} ${
|
||||
option.keyBinding && `— ${option.keyBinding.toUpperCase()}`
|
||||
}`}
|
||||
title={
|
||||
option.keyBinding
|
||||
? `${option.text} — ${option.keyBinding.toUpperCase()}`
|
||||
: option.text
|
||||
}
|
||||
aria-label={option.text || "none"}
|
||||
aria-keyshortcuts={option.keyBinding || undefined}
|
||||
key={option.text}
|
||||
@@ -153,6 +234,20 @@ function Picker<T>({
|
||||
);
|
||||
};
|
||||
|
||||
const renderSections = (sections: readonly PickerSection<T>[]) =>
|
||||
sections.map((section, index) =>
|
||||
section.name === DEFAULT_SECTION_NAME ? (
|
||||
<React.Fragment key={`${section.name}-${index}`}>
|
||||
{renderOptions(section.options)}
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<div className="picker-section" key={`${section.name}-${index}`}>
|
||||
<div className="picker-section-label">{section.name}</div>
|
||||
{renderOptions(section.options)}
|
||||
</div>
|
||||
),
|
||||
);
|
||||
|
||||
const isMobile = editorInterface.formFactor === "phone";
|
||||
|
||||
return (
|
||||
@@ -170,20 +265,24 @@ function Picker<T>({
|
||||
aria-modal="true"
|
||||
aria-label={label}
|
||||
>
|
||||
{renderOptions(alwaysVisibleOptions)}
|
||||
<div className="picker-sections">
|
||||
{renderSections(visibleSections)}
|
||||
|
||||
{moreOptions.length > 0 && (
|
||||
<Collapsible
|
||||
label={t("labels.more_options")}
|
||||
open={showMoreOptions}
|
||||
openTrigger={() => {
|
||||
setShowMoreOptions((value) => !value);
|
||||
}}
|
||||
className="picker-collapsible"
|
||||
>
|
||||
{renderOptions(moreOptions)}
|
||||
</Collapsible>
|
||||
)}
|
||||
{hiddenSections.length > 0 && (
|
||||
<Collapsible
|
||||
label={t("labels.more_options")}
|
||||
open={showMoreOptions}
|
||||
openTrigger={() => {
|
||||
setShowMoreOptions((value) => !value);
|
||||
}}
|
||||
className="picker-collapsible"
|
||||
>
|
||||
<div className="picker-sections">
|
||||
{renderSections(hiddenSections)}
|
||||
</div>
|
||||
</Collapsible>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
);
|
||||
@@ -192,49 +291,45 @@ function Picker<T>({
|
||||
export function IconPicker<T>({
|
||||
value,
|
||||
label,
|
||||
options,
|
||||
visibleSections,
|
||||
hiddenSections,
|
||||
onChange,
|
||||
group = "",
|
||||
numberOfOptionsToAlwaysShow,
|
||||
}: {
|
||||
label: string;
|
||||
value: T;
|
||||
options: readonly {
|
||||
value: T;
|
||||
text: string;
|
||||
icon: JSX.Element;
|
||||
keyBinding: string | null;
|
||||
}[];
|
||||
visibleSections: readonly PickerSection<T>[];
|
||||
hiddenSections?: readonly PickerSection<T>[];
|
||||
onChange: (value: T) => void;
|
||||
numberOfOptionsToAlwaysShow?: number;
|
||||
group?: string;
|
||||
}) {
|
||||
const [isActive, setActive] = React.useState(false);
|
||||
const rPickerButton = React.useRef<any>(null);
|
||||
const selectedOption = useMemo(
|
||||
() =>
|
||||
findOption(visibleSections, (option) => option.value === value) ??
|
||||
findOption(hiddenSections ?? [], (option) => option.value === value),
|
||||
[visibleSections, hiddenSections, value],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Popover.Root open={isActive} onOpenChange={(open) => setActive(open)}>
|
||||
<Popover.Trigger
|
||||
name={group}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
onClick={() => setActive(!isActive)}
|
||||
ref={rPickerButton}
|
||||
className={isActive ? "active" : ""}
|
||||
>
|
||||
{options.find((option) => option.value === value)?.icon}
|
||||
{selectedOption?.icon}
|
||||
</Popover.Trigger>
|
||||
{isActive && (
|
||||
<Picker
|
||||
options={options}
|
||||
visibleSections={visibleSections}
|
||||
hiddenSections={hiddenSections}
|
||||
value={value}
|
||||
label={label}
|
||||
onChange={onChange}
|
||||
onClose={() => {
|
||||
setActive(false);
|
||||
}}
|
||||
numberOfOptionsToAlwaysShow={numberOfOptionsToAlwaysShow}
|
||||
/>
|
||||
)}
|
||||
</Popover.Root>
|
||||
|
||||
@@ -236,15 +236,40 @@ const MermaidToExcalidraw = ({
|
||||
<Trans
|
||||
i18nKey="mermaid.description"
|
||||
flowchartLink={(el) => (
|
||||
<a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
|
||||
<a
|
||||
href="https://mermaid.js.org/syntax/flowchart.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{el}
|
||||
</a>
|
||||
)}
|
||||
sequenceLink={(el) => (
|
||||
<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">
|
||||
<a
|
||||
href="https://mermaid.js.org/syntax/sequenceDiagram.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{el}
|
||||
</a>
|
||||
)}
|
||||
classLink={(el) => (
|
||||
<a href="https://mermaid.js.org/syntax/classDiagram.html">{el}</a>
|
||||
<a
|
||||
href="https://mermaid.js.org/syntax/classDiagram.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{el}
|
||||
</a>
|
||||
)}
|
||||
erdLink={(el) => (
|
||||
<a
|
||||
href="https://mermaid.js.org/syntax/entityRelationshipDiagram.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{el}
|
||||
</a>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@ export const convertMermaidToExcalidraw = async ({
|
||||
}
|
||||
}
|
||||
|
||||
const { elements, files } = ret;
|
||||
const { elements, files = {} } = ret;
|
||||
setError(null);
|
||||
|
||||
data.current = {
|
||||
|
||||
@@ -69,6 +69,11 @@ const modifiedTablerIconProps: Opts = {
|
||||
strokeLinejoin: "round",
|
||||
} as const;
|
||||
|
||||
const arrowheadPreviewIconProps: Opts = {
|
||||
width: 40,
|
||||
height: 20,
|
||||
} as const;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// tabler-icons: present
|
||||
@@ -1291,16 +1296,17 @@ export const ArrowheadNoneIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
transform={flip ? "translate(24, 0) scale(-1, 1)" : ""}
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
stroke="currentColor"
|
||||
opacity={0.3}
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M12 12l-9 0" />
|
||||
<path d="M21 9l-6 6" />
|
||||
<path d="M21 15l-6 -6" />
|
||||
<path d="M7,11 H19" />
|
||||
<path d="M25,6 L33,16 M33,6 L25,16" />
|
||||
</g>,
|
||||
tablerIconProps,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1312,57 +1318,12 @@ export const ArrowheadArrowIcon = React.memo(
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M34 10H6M34 10L27 5M34 10L27 15" />
|
||||
<path d="M27.5 5L34.5 10L27.5 15" />
|
||||
<path d="M7,11 H33 M23,5 L33,11 L23,17" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCircleIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
>
|
||||
<path d="M32 10L6 10" strokeWidth={2} />
|
||||
<circle r="4" transform="matrix(-1 0 0 1 30 10)" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCircleOutlineIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M26 10L6 10" />
|
||||
<circle r="4" transform="matrix(-1 0 0 1 30 10)" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadBarIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}>
|
||||
<path
|
||||
d="M34 10H5.99996M34 10L34 5M34 10L34 15"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
/>
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1373,11 +1334,12 @@ export const ArrowheadTriangleIcon = React.memo(
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M32 10L6 10" strokeWidth={2} />
|
||||
<path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
|
||||
<path d="M7,11 H23" strokeWidth={2} strokeLinecap="round" />
|
||||
<path d="M23,5 L35,11 L23,17 Z" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1390,12 +1352,43 @@ export const ArrowheadTriangleOutlineIcon = React.memo(
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeWidth={2}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M6,9.5H27" />
|
||||
<path d="M27,5L34,10L27,14Z" fill="none" />
|
||||
<path d="M7,11 H23" />
|
||||
<path d="M23,5 L35,11 L23,17 Z" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
{ width: 40, height: 20 },
|
||||
export const ArrowheadCircleIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
>
|
||||
<path d="M7,11 H25" strokeWidth={2} strokeLinecap="round" />
|
||||
<circle cx="29" cy="11" r="4" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCircleOutlineIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M7,11 H25" strokeLinecap="round" />
|
||||
<circle cx="29" cy="11" r="4" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1407,12 +1400,11 @@ export const ArrowheadDiamondIcon = React.memo(
|
||||
fill="currentColor"
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M6,9.5H20" />
|
||||
<path d="M27,5L34,10L27,14L20,9.5Z" />
|
||||
<path d="M7,11 H21" strokeWidth={2} strokeLinecap="round" />
|
||||
<path d="M21,11 L28,5 L35,11 L28,17 Z" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1425,15 +1417,32 @@ export const ArrowheadDiamondOutlineIcon = React.memo(
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M6,9.5H20" />
|
||||
<path d="M27,5L34,10L27,14L20,9.5Z" />
|
||||
<path d="M7,11 H21" />
|
||||
<path d="M21,11 L28,5 L35,11 L28,17 Z" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCrowfootIcon = React.memo(
|
||||
export const ArrowheadBarIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<path d="M11,11 H31 M31,5 V17" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCardinalityOneIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
@@ -1443,13 +1452,13 @@ export const ArrowheadCrowfootIcon = React.memo(
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M34,10 H6 M15,10 L7,5 M15,10 L7,15" />
|
||||
<path d="M35,11 H7 M15,5 V17" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCrowfootOneIcon = React.memo(
|
||||
export const ArrowheadCardinalityManyIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
@@ -1459,13 +1468,13 @@ export const ArrowheadCrowfootOneIcon = React.memo(
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M34,10 H6 M15,10 L15,15 L15,5" />
|
||||
<path d="M35,11 H7 M15,11 L7,5 M15,11 L7,17" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCrowfootOneOrManyIcon = React.memo(
|
||||
export const ArrowheadCardinalityOneOrManyIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
@@ -1475,9 +1484,59 @@ export const ArrowheadCrowfootOneOrManyIcon = React.memo(
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M34,10 H6 M15,10 L15,16 L15,4 M15,10 L7,5 M15,10 L7,15" />
|
||||
<path d="M35,11 H7 M23,5 V17 M15,11 L7,5 M15,11 L7,17" />
|
||||
</g>,
|
||||
{ width: 40, height: 20 },
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCardinalityExactlyOneIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M35,11 H7 M15,5 V17 M7,5 V17" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCardinalityZeroOrOneIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M35,11 H19 M11,11 H7 M7,5 V17" />
|
||||
<circle cx="15" cy="11" r="4" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
export const ArrowheadCardinalityZeroOrManyIcon = React.memo(
|
||||
({ flip = false }: { flip?: boolean }) =>
|
||||
createIcon(
|
||||
<g
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M35,11 H27 M19,11 H7 M15,11 L7,5 M15,11 L7,17" />
|
||||
<circle cx="23" cy="11" r="4" />
|
||||
</g>,
|
||||
arrowheadPreviewIconProps,
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user