sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: d2c tweaks (#7336)

Browse Source
This commit is contained in:
David Luzar
2023-11-24 14:02:11 +01:00
committed by GitHub
parent c7ee46e7f8
commit 3d1631f375
14 changed files with 168 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Actions.tsx
View File

@ -339,7 +339,7 @@ export const ShapesSwitcher = ({
Generate
</div>
<DropdownMenu.Item
onSelect={() => app.setOpenDialog("mermaid")}
onSelect={() => app.setOpenDialog({ name: "mermaid" })}
icon={mermaidLogoIcon}
data-testid="toolbar-embeddable"
>
@ -349,14 +349,20 @@ export const ShapesSwitcher = ({
{app.props.aiEnabled !== false && (
<>
<DropdownMenu.Item
onSelect={() => app.onMagicButtonSelect()}
onSelect={() => app.onMagicframeToolSelect()}
icon={MagicIcon}
data-testid="toolbar-magicframe"
>
{t("toolBar.magicframe")}
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => app.setOpenDialog("magicSettings")}
onSelect={() => {
trackEvent("ai", "d2c-settings", "settings");
app.setOpenDialog({
name: "magicSettings",
source: "settings",
});
}}
icon={OpenAIIcon}
data-testid="toolbar-magicSettings"
>

116
src/components/App.tsx
View File

@ -1435,7 +1435,7 @@ class App extends React.Component<AppProps, AppState> {
onMagicSettingsConfirm={this.onMagicSettingsConfirm}
>
{this.props.children}
{this.state.openDialog === "mermaid" && (
{this.state.openDialog?.name === "mermaid" && (
<MermaidToExcalidraw />
)}
</LayerUI>
@ -1467,6 +1467,7 @@ class App extends React.Component<AppProps, AppState> {
onChange={() =>
this.onMagicFrameGenerate(
firstSelectedElement,
"button",
)
}
/>
@ -1697,11 +1698,15 @@ class App extends React.Component<AppProps, AppState> {
return text;
}
private async onMagicFrameGenerate(magicFrame: ExcalidrawMagicFrameElement) {
private async onMagicFrameGenerate(
magicFrame: ExcalidrawMagicFrameElement,
source: "button" | "upstream",
) {
if (!this.OPENAI_KEY) {
this.setState({
openDialog: "magicSettings",
openDialog: { name: "magicSettings", source: "generation" },
});
trackEvent("ai", "d2c-generate", "missing-key");
return;
}
@ -1712,7 +1717,12 @@ class App extends React.Component<AppProps, AppState> {
}).filter((el) => !isMagicFrameElement(el));
if (!magicFrameChildren.length) {
this.setState({ errorMessage: "Cannot generate from an empty frame" });
if (source === "button") {
this.setState({ errorMessage: "Cannot generate from an empty frame" });
trackEvent("ai", "d2c-generate", "no-children");
} else {
this.setActiveTool({ type: "magicframe" });
}
return;
}
@ -1751,6 +1761,8 @@ class App extends React.Component<AppProps, AppState> {
const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);
trackEvent("ai", "d2c-generate", "generating");
const result = await diagramToHTML({
image: dataURL,
apiKey: this.OPENAI_KEY,
@ -1759,6 +1771,7 @@ class App extends React.Component<AppProps, AppState> {
});
if (!result.ok) {
trackEvent("ai", "d2c-generate", "generating-failed");
console.error(result.error);
this.updateMagicGeneration({
frameElement,
@ -1770,6 +1783,7 @@ class App extends React.Component<AppProps, AppState> {
});
return;
}
trackEvent("ai", "d2c-generate", "generating-done");
if (result.choices[0].message.content == null) {
this.updateMagicGeneration({
@ -1813,7 +1827,10 @@ class App extends React.Component<AppProps, AppState> {
private OPENAI_KEY_IS_PERSISTED: boolean =
EditorLocalStorage.has(EDITOR_LS_KEYS.OAI_API_KEY) || false;
private onOpenAIKeyChange = (openAIKey: string, shouldPersist: boolean) => {
private onOpenAIKeyChange = (
openAIKey: string | null,
shouldPersist: boolean,
) => {
this.OPENAI_KEY = openAIKey || null;
if (shouldPersist) {
const didPersist = EditorLocalStorage.set(
@ -1826,26 +1843,41 @@ class App extends React.Component<AppProps, AppState> {
}
};
private onMagicSettingsConfirm = (apiKey: string, shouldPersist: boolean) => {
this.onOpenAIKeyChange(apiKey, shouldPersist);
private onMagicSettingsConfirm = (
apiKey: string,
shouldPersist: boolean,
source: "tool" | "generation" | "settings",
) => {
this.OPENAI_KEY = apiKey || null;
this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);
if (source === "settings") {
return;
}
const selectedElements = this.scene.getSelectedElements({
selectedElementIds: this.state.selectedElementIds,
});
if (apiKey) {
const selectedElements = this.scene.getSelectedElements({
selectedElementIds: this.state.selectedElementIds,
});
if (selectedElements.length) {
this.onMagicButtonSelect();
this.onMagicframeToolSelect();
} else {
this.setActiveTool({ type: "magicframe" });
}
} else {
this.OPENAI_KEY = null;
} else if (!isMagicFrameElement(selectedElements[0])) {
// even if user didn't end up setting api key, let's pick the tool
// so they can draw up a frame and move forward
this.setActiveTool({ type: "magicframe" });
}
};
public onMagicButtonSelect = () => {
public onMagicframeToolSelect = () => {
if (!this.OPENAI_KEY) {
this.setState({
openDialog: "magicSettings",
openDialog: { name: "magicSettings", source: "tool" },
});
trackEvent("ai", "d2c-tool", "missing-key");
return;
}
@ -1855,19 +1887,33 @@ class App extends React.Component<AppProps, AppState> {
if (selectedElements.length === 0) {
this.setActiveTool({ type: TOOL_TYPE.magicframe });
trackEvent("ai", "d2c-tool", "empty-selection");
} else {
if (selectedElements.some((el) => isFrameLikeElement(el))) {
const selectedMagicFrame: ExcalidrawMagicFrameElement | false =
selectedElements.length === 1 &&
isMagicFrameElement(selectedElements[0]) &&
selectedElements[0];
// case: user selected elements containing frame-like(s) or are frame
// members, we don't want to wrap into another magicframe
// (unless the only selected element is a magic frame which we reuse)
if (
!selectedMagicFrame &&
selectedElements.some((el) => isFrameLikeElement(el) || el.frameId)
) {
this.setActiveTool({ type: TOOL_TYPE.magicframe });
return;
}
let frame: ExcalidrawMagicFrameElement | null = null;
if (
selectedElements.length === 1 &&
isMagicFrameElement(selectedElements[0])
) {
frame = selectedElements[0];
trackEvent("ai", "d2c-tool", "existing-selection");
let frame: ExcalidrawMagicFrameElement;
if (selectedMagicFrame) {
// a single magicframe already selected -> use it
frame = selectedMagicFrame;
} else {
// selected elements aren't wrapped in magic frame yet -> wrap now
const [minX, minY, maxX, maxY] = getCommonBounds(selectedElements);
const padding = 50;
@ -1880,19 +1926,19 @@ class App extends React.Component<AppProps, AppState> {
opacity: 100,
locked: false,
});
this.scene.addNewElement(frame);
for (const child of selectedElements) {
mutateElement(child, { frameId: frame.id });
}
this.setState({
selectedElementIds: { [frame.id]: true },
});
}
this.scene.addNewElement(frame);
for (const child of selectedElements) {
mutateElement(child, { frameId: frame.id });
}
this.setState({
selectedElementIds: { [frame.id]: true },
});
this.onMagicFrameGenerate(frame);
this.onMagicFrameGenerate(frame, "upstream");
}
};
@ -3551,7 +3597,7 @@ class App extends React.Component<AppProps, AppState> {
if (event.key === KEYS.QUESTION_MARK) {
this.setState({
openDialog: "help",
openDialog: { name: "help" },
});
return;
} else if (
@ -3560,7 +3606,7 @@ class App extends React.Component<AppProps, AppState> {
event[KEYS.CTRL_OR_CMD]
) {
event.preventDefault();
this.setState({ openDialog: "imageExport" });
this.setState({ openDialog: { name: "imageExport" } });
return;
}

2
src/components/JSONExportDialog.tsx
View File

@ -117,7 +117,7 @@ export const JSONExportDialog = ({
return (
<>
{appState.openDialog === "jsonExport" && (
{appState.openDialog?.name === "jsonExport" && (
<Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
<JSONExportModal
elements={elements}

21
src/components/LayerUI.tsx
View File

@ -86,7 +86,11 @@ interface LayerUIProps {
openAIKey: string | null;
isOpenAIKeyPersisted: boolean;
onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
onMagicSettingsConfirm: (apiKey: string, shouldPersist: boolean) => void;
onMagicSettingsConfirm: (
apiKey: string,
shouldPersist: boolean,
source: "tool" | "generation" | "settings",
) => void;
}
const DefaultMainMenu: React.FC<{
@ -177,7 +181,7 @@ const LayerUI = ({
const renderImageExportDialog = () => {
if (
!UIOptions.canvasActions.saveAsImage ||
appState.openDialog !== "imageExport"
appState.openDialog?.name !== "imageExport"
) {
return null;
}
@ -448,21 +452,26 @@ const LayerUI = ({
}}
/>
)}
{appState.openDialog === "help" && (
{appState.openDialog?.name === "help" && (
<HelpDialog
onClose={() => {
setAppState({ openDialog: null });
}}
/>
)}
{appState.openDialog === "magicSettings" && (
{appState.openDialog?.name === "magicSettings" && (
<MagicSettings
openAIKey={openAIKey}
isPersisted={isOpenAIKeyPersisted}
onChange={onOpenAIAPIKeyChange}
onConfirm={(apiKey, shouldPersist) => {
setAppState({ openDialog: null });
onMagicSettingsConfirm(apiKey, shouldPersist);
const source =
appState.openDialog?.name === "magicSettings"
? appState.openDialog?.source
: "settings";
setAppState({ openDialog: null }, () => {
onMagicSettingsConfirm(apiKey, shouldPersist, source);
});
}}
onClose={() => {
setAppState({ openDialog: null });

2
src/components/MagicSettings.tsx
View File

@ -106,7 +106,7 @@ export const MagicSettings = (props: {
own limit in your OpenAI account dashboard if needed.
</p>
<TextField
isPassword
isRedacted
value={keyInputValue}
placeholder="Paste your API key here"
label="OpenAI API key"

2
src/components/OverwriteConfirm/OverwriteConfirmActions.tsx
View File

@ -47,7 +47,7 @@ export const ExportToImage = () => {
actionLabel={t("overwriteConfirm.action.exportToImage.button")}
onClick={() => {
actionManager.executeAction(actionChangeExportEmbedScene, "ui", true);
setAppState({ openDialog: "imageExport" });
setAppState({ openDialog: { name: "imageExport" } });
}}
>
{t("overwriteConfirm.action.exportToImage.description")}

21
src/components/TextField.tsx
View File

@ -25,7 +25,7 @@ type TextFieldProps = {
label?: string;
placeholder?: string;
isPassword?: boolean;
isRedacted?: boolean;
};
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@ -39,7 +39,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
readonly,
selectOnRender,
onKeyDown,
isPassword = false,
isRedacted = false,
},
ref,
) => {
@ -53,7 +53,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
}
}, [selectOnRender]);
const [isVisible, setIsVisible] = useState<boolean>(true);
const [isTemporarilyUnredacted, setIsTemporarilyUnredacted] =
useState<boolean>(false);
return (
<div
@ -71,7 +72,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
})}
>
<input
type={isPassword && isVisible ? "password" : undefined}
className={clsx({
"is-redacted": value && isRedacted && !isTemporarilyUnredacted,
})}
readOnly={readonly}
value={value}
placeholder={placeholder}
@ -79,12 +82,14 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
onChange={(event) => onChange?.(event.target.value)}
onKeyDown={onKeyDown}
/>
{isPassword && (
{isRedacted && (
<Button
onSelect={() => setIsVisible(!isVisible)}
style={{ border: 0 }}
onSelect={() =>
setIsTemporarilyUnredacted(!isTemporarilyUnredacted)
}
style={{ border: 0, userSelect: "none" }}
>
{isVisible ? eyeIcon : eyeClosedIcon}
{isTemporarilyUnredacted ? eyeClosedIcon : eyeIcon}
</Button>
)}
</div>

4
src/components/main-menu/DefaultItems.tsx
View File

@ -107,7 +107,7 @@ export const SaveAsImage = () => {
<DropdownMenuItem
icon={ExportImageIcon}
data-testid="image-export-button"
onSelect={() => setAppState({ openDialog: "imageExport" })}
onSelect={() => setAppState({ openDialog: { name: "imageExport" } })}
shortcut={getShortcutFromShortcutName("imageExport")}
aria-label={t("buttons.exportImage")}
>
@ -230,7 +230,7 @@ export const Export = () => {
<DropdownMenuItem
icon={ExportIcon}
onSelect={() => {
setAppState({ openDialog: "jsonExport" });
setAppState({ openDialog: { name: "jsonExport" } });
}}
data-testid="json-export-button"
aria-label={t("buttons.export")}