Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create mermaid to excal dialog

Browse Source
This commit is contained in:
Aakansha Doshi 2023-08-17 14:12:57 +05:30
parent 6a04ebc6db
commit c5514974b7
2 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/MermaidToExcalidraw.scss Normal file
View File

@ -0,0 +1,50 @@
@import "../css/variables.module";
.mermaid-to-excalidraw-wrapper {
display: flex;
width: 100%;
justify-content: space-between;
label {
font-size: 14px;
font-style: normal;
font-weight: 600;
}
&-text {
display: flex;
flex-direction: column;
textarea {
width: 20rem;
height: 22rem;
resize: none;
}
}
&-preview-canvas {
width: 20rem;
height: 23.5rem;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
left center;
border: 1px solid var(--ImageExportModal-preview-border);
border-radius: 12px;
}
&-preview-insert.excalidraw-button {
height: 2.5rem;
margin-top: 1em;
margin-bottom: 0.3em;
width: 5rem;
background-color: var(--color-primary);
&:hover {
background-color: var(--color-primary-darke);
}
&:active {
background-color: var(--color-primary-darkest);
}
color: $oc-white;
}
}

19
src/components/MermaidToExcalidraw.tsx
View File

@ -1,8 +1,10 @@
import { AppState } from "../types"; import { AppState } from "../types";
import { updateActiveTool } from "../utils"; import { updateActiveTool } from "../utils";
import { useExcalidrawSetAppState } from "./App"; import { useExcalidrawSetAppState } from "./App";
import { Button } from "./Button";
import { Dialog } from "./Dialog"; import { Dialog } from "./Dialog";
import "./MermaidToExcalidraw.scss";
const MermaidToExcalidraw = ({ appState }: { appState: AppState }) => { const MermaidToExcalidraw = ({ appState }: { appState: AppState }) => {
const setAppState = useExcalidrawSetAppState(); const setAppState = useExcalidrawSetAppState();
if (appState?.activeTool?.type !== "mermaid") { if (appState?.activeTool?.type !== "mermaid") {
@ -16,7 +18,22 @@ const MermaidToExcalidraw = ({ appState }: { appState: AppState }) => {
}} }}
title="Mermaid to Excalidraw" title="Mermaid to Excalidraw"
> >
<div>Hello</div> <div className="mermaid-to-excalidraw-wrapper">
<div className="mermaid-to-excalidraw-wrapper-text">
<label>Describe</label>
<textarea />
</div>
<div className="mermaid-to-excalidraw-wrapper-preview">
<label>Preview</label>
<div className="mermaid-to-excalidraw-wrapper-preview-canvas"></div>
<Button
className="mermaid-to-excalidraw-wrapper-preview-insert"
onSelect={() => console.log("hey")}
>
Insert
</Button>
</div>
</div>
</Dialog> </Dialog>
); );
}; };