basic share view render (css wrong)

2025-11-02 11:26:15 +01:00 · 2022-04-17 23:56:09 +02:00
parent e19ddc10d3
commit cb88f316db
3 changed files with 110 additions and 439 deletions
--- a/libraries/excalidraw/canvas_note_share.js
+++ b/libraries/excalidraw/canvas_note_share.js
@@ -0,0 +1,78 @@
+// const {elements, appState, files} = window.triliumExcalidraw;
+document.getElementById("excalidraw-app").style.height = appState.height+"px";
+
+const App = () => {
+    const excalidrawRef = React.useRef(null);
+    const excalidrawWrapperRef = React.useRef(null);
+    const [dimensions, setDimensions] = React.useState({
+        width: undefined,
+        height: appState.height,
+    });
+    console.log("no render?");
+    
+    /**
+     * resizing
+     */
+    React.useEffect(() => {
+        const dimensions = {
+            width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+            height: excalidrawWrapperRef.current.getBoundingClientRect().height
+        };
+        setDimensions(dimensions);
+
+        const onResize = () => {
+            const dimensions = {
+                width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+                height: excalidrawWrapperRef.current.getBoundingClientRect().height
+            };
+            setDimensions(dimensions);
+        };
+        
+        window.addEventListener("resize", onResize);
+        // ensure that resize is also called for split creation and deletion
+        // not really the problem. problem is saved appState!
+        // self.$renderElement.addEventListener("resize", onResize);
+        
+        return () => window.removeEventListener("resize", onResize);
+    }, [excalidrawWrapperRef]);
+
+    return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+            "div",
+            {
+                className: "excalidraw-wrapper",
+                ref: excalidrawWrapperRef
+            },
+            React.createElement(Excalidraw.default, {
+                ref: excalidrawRef,
+                width: dimensions.width,
+                height: dimensions.height,
+                initialData: {
+                    elements, appState, files
+                },
+                viewModeEnabled: true,
+                zenModeEnabled: false,
+                gridModeEnabled: false,
+                isCollaborating: false,
+                detectScroll: false,
+                handleKeyboardGlobally: false,
+                autoFocus: true,
+                renderTopRightUI: () => {
+                    return React.createElement(
+                        React.Fragment,
+                        null,
+                        React.createElement(
+                            "div",
+                            {
+                                className: "excalidraw-top-right-ui",
+                            },
+                            "view mode"
+                        ));
+                },
+            })
+        )
+    );
+};
+ReactDOM.render(React.createElement(App), document.getElementById("excalidraw-app"));