optimize canvas_note share to make it more clear about view mode and excalidraw

This commit is contained in:
Tom 2022-05-03 22:44:52 +02:00
parent 1a4bc0b989
commit dc35df9f63
2 changed files with 24 additions and 21 deletions

View File

@ -45,19 +45,7 @@ const App = () => {
{ {
className: "excalidraw-wrapper", className: "excalidraw-wrapper",
ref: excalidrawWrapperRef ref: excalidrawWrapperRef
}, },
React.createElement(
"label",
null,
React.createElement("input", {
type: "checkbox",
checked: viewModeEnabled,
onChange: () => setViewModeEnabled(!viewModeEnabled)
}),
" Edit mode "
),
React.createElement("br"),
React.createElement(Excalidraw.default, { React.createElement(Excalidraw.default, {
ref: excalidrawRef, ref: excalidrawRef,
width: dimensions.width, width: dimensions.width,
@ -72,16 +60,32 @@ const App = () => {
detectScroll: false, detectScroll: false,
handleKeyboardGlobally: false, handleKeyboardGlobally: false,
autoFocus: true, autoFocus: true,
renderTopRightUI: () => { renderFooter: () => {
return React.createElement( return React.createElement(
React.Fragment, React.Fragment,
null, null,
React.createElement( React.createElement(
"div", "div",
{ {
className: "excalidraw-top-right-ui", className: "excalidraw-top-right-ui excalidraw Island",
}, },
"view mode" React.createElement(
"label",
{
style: {
padding: "5px",
},
className: "excalidraw Stack",
},
React.createElement(
"button",
{
onClick: () => setViewModeEnabled(!viewModeEnabled)
},
viewModeEnabled ? " Enter simple view mode " : " Enter extended view mode "
),
""
),
)); ));
}, },
}) })

View File

@ -105,13 +105,12 @@ document.addEventListener("DOMContentLoaded", function() {
content = `<div> content = `<div>
<script> <script>
const {elements, appState, files} = JSON.parse(${JSON.stringify(content)}); const {elements, appState, files} = JSON.parse(${JSON.stringify(content)});
window.triliumExcalidraw = {elements, appState, files} window.triliumExcalidraw = {elements, appState, files}
</script> </script>
<div id="excalidraw-app"> <div id="excalidraw-app"></div>
</div>
<hr> <hr>
<a href="api/images/${note.noteId}/${note.title}?${note.utcDateModified}">Download SVG</a> <a href="api/images/${note.noteId}/${note.title}?utc=${note.utcDateModified}">Get Image Link</a>
<script src="../../libraries/excalidraw/canvas_note_share.js"></script> <script src="../../libraries/excalidraw/canvas_note_share.js"></script>
</div>`; </div>`;
} }