Feature/excali-files

docs/Komponentengalerie/files-and-folders.mdx

@@ -10,10 +10,14 @@ import Directory from '@tdev-components/documents/FileSystem/Directory';
 
 ## Installation
 
-:::info[Code-Ordner kopieren]
+::::info[Code-Ordner kopieren]
 - `src/models/documents/FileSystem`
 - `src/components/documents/FileSystem`
+
+:::warning[Abhängigkeiten]
+Standardmässig werden alle verfügbaren Dateitypen unterstützt. Ist ein Dokumententyp (bspw. `excalidoc`) nicht verfügbar, muss dieser entfernt werden.
 :::
+::::
 
 :::info[Models]
 

src/components/PermissionsPanel/index.tsx

@@ -3,7 +3,6 @@ import Popup from 'reactjs-popup';
 import styles from './styles.module.scss';
 import Button from '@tdev-components/shared/Button';
 import { mdiShieldLockOutline } from '@mdi/js';
-import DocumentRoot from '@tdev-models/DocumentRoot';
 import { observer } from 'mobx-react-lite';
 import { Access } from '@tdev-api/document';
 import { useStore } from '@tdev-hooks/useStore';
@@ -15,6 +14,7 @@ import DefinitionList from '../DefinitionList';
 import { action } from 'mobx';
 import UserPermission from '@tdev-components/PermissionsPanel/UserPermission';
 import { PopupPosition } from 'reactjs-popup/dist/types';
+import useIsMobileView from '@tdev-hooks/useIsMobileView';
 
 interface Props {
     documentRootId: string;
@@ -25,6 +25,7 @@ const PermissionsPanel = observer(({ documentRootId, position }: Props) => {
     const userStore = useStore('userStore');
     const documentRootStore = useStore('documentRootStore');
     const permissionStore = useStore('permissionStore');
+    const isMobileView = useIsMobileView(470);
     const documentRoot = documentRootStore.find(documentRootId);
     const { viewedUser } = userStore;
 
@@ -67,8 +68,11 @@ const PermissionsPanel = observer(({ documentRootId, position }: Props) => {
             }
             on="click"
             closeOnDocumentClick
+            overlayStyle={{ background: isMobileView ? 'rgba(0,0,0,0.5)' : undefined }}
             closeOnEscape
             position={position}
+            keepTooltipInside=".markdown"
+            modal={isMobileView}
             onOpen={action(() => {
                 permissionStore.loadPermissions(documentRoot);
             })}

src/components/PermissionsPanel/styles.module.scss

@@ -1,6 +1,7 @@
 .wrapper {
-    max-height: 90vh;
+    max-height: 85vh;
     max-width: 95vw;
+    min-width: 20em;
     padding: 1em;
     overflow: auto;
     --ifm-global-shadow-lw: var(--ifm-global-shadow-tl);

src/components/Rooms/TextMessages/index.tsx

@@ -24,11 +24,7 @@ const TextMessages = observer((props: Props): JSX.Element => {
         <div className={clsx(styles.wrapper)}>
             <div className={clsx(styles.rooms)}>
                 <h1 className={clsx(styles.name)}>
-                    {dynamicDocumentRoot.name}{' '}
-                    <PermissionsPanel
-                        documentRootId={documentRoot.id}
-                        position={['top right', 'bottom right']}
-                    />
+                    {dynamicDocumentRoot.name} <PermissionsPanel documentRootId={documentRoot.id} />
                 </h1>
                 <Conversation group={documentRoot} />
                 <NewMessage group={documentRoot} />

src/components/Rooms/index.tsx

@@ -84,10 +84,7 @@ const RoomComponent = observer((props: Props): JSX.Element => {
         return (
             <>
                 <NoAccess header={dynamicRoot.name}>
-                    <PermissionsPanel
-                        documentRootId={roomProps.id}
-                        position={['top right', 'bottom right']}
-                    />
+                    <PermissionsPanel documentRootId={roomProps.id} />
                 </NoAccess>
             </>
         );

src/components/documents/DynamicDocumentRoots/DynamicDocumentRoot/index.tsx

@@ -119,7 +119,7 @@ const DynamicDocumentRoot = observer((props: Props) => {
                         />
                     </>
                 )}
-                <PermissionsPanel documentRootId={docRoot.id} position={['bottom right', 'top right']} />
+                <PermissionsPanel documentRootId={docRoot.id} />
             </div>
         </div>
     );

src/components/documents/DynamicDocumentRoots/index.tsx

@@ -44,7 +44,7 @@ const DynamicDocumentRoots = observer((props: Props) => {
         <div className={clsx('card', styles.docRoots)}>
             <div className={clsx(styles.header, 'card__header')}>
                 <h3>{props.name || 'Gruppe'}</h3>
-                <PermissionsPanel documentRootId={props.id} position={['top right', 'bottom right']} />
+                <PermissionsPanel documentRootId={props.id} />
             </div>
             <div className={clsx(styles.body, 'card__body')}>
                 <div className={clsx(styles.actions)}>

src/components/documents/Excalidoc/Editor/index.tsx

@@ -8,24 +8,26 @@ import { useColorMode } from '@docusaurus/theme-common';
 import type { default as ExcalidrawLib } from '@excalidraw/excalidraw';
 import _ from 'lodash';
 import { useFirstRealMainDocument } from '@tdev-hooks/useFirstRealMainDocument';
+import { useDocument } from '@tdev-hooks/useDocument';
+import { DocumentType } from '@tdev-api/document';
 
 export interface Props extends MetaInit {
     Lib: typeof ExcalidrawLib;
-    id: string;
-    meta: ModelMeta;
+    documentId: string;
     libraryItems?: LibraryItems;
     allowImageInsertion?: boolean;
     readonly?: boolean;
 }
 
 const Editor = observer((props: Props) => {
-    const { Lib, meta } = props;
-    const excalidoc = useFirstRealMainDocument(props.id, meta);
+    const { Lib, documentId } = props;
+    const excalidoc = useDocument<DocumentType.Excalidoc>(documentId);
     const renderedSceneVersion = React.useRef(0);
     const initialized = React.useRef<boolean>(false);
     const apiSceneVersion = React.useRef(0);
     const [excalidrawAPI, setExcalidrawAPI] = React.useState<ExcalidrawImperativeAPI>();
     const { colorMode } = useColorMode();
+
     React.useEffect(() => {
         if (excalidrawAPI && excalidoc && !initialized.current) {
             excalidrawAPI.scrollToContent(excalidoc.elements, { fitToViewport: true });
@@ -79,6 +81,26 @@ const Editor = observer((props: Props) => {
             };
         }
     }, [excalidrawAPI, excalidoc]);
+
+    /**
+     * ensure that excalidraw has a correct offset and scroll position
+     * for cursors.
+     * Reading the docs, this should not be needed: https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/excalidraw-api#refresh
+     * But somehow, this bug's for the viewMode...
+     */
+    React.useEffect(() => {
+        const onscroll = _.debounce(() => {
+            if (excalidrawAPI) {
+                excalidrawAPI.refresh();
+            }
+        }, 50);
+        document.addEventListener('scroll', onscroll);
+        return () => {
+            onscroll.cancel();
+            document.removeEventListener('scroll', onscroll);
+        };
+    }, [excalidrawAPI]);
+
     if (!excalidoc || !Lib) {
         return null;
     }
@@ -94,8 +116,8 @@ const Editor = observer((props: Props) => {
                 scrollToContent: true,
                 libraryItems: props.libraryItems
             }}
-            excalidrawAPI={(api) => setExcalidrawAPI(api)}
             objectsSnapModeEnabled
+            excalidrawAPI={(api) => setExcalidrawAPI(api)}
             langCode="de-DE"
             theme={colorMode === 'dark' ? 'dark' : 'light'}
             UIOptions={{

src/components/documents/Excalidoc/Preview/index.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import styles from './styles.module.scss';
-import { ModelMeta } from '@site/src/models/documents/Excalidoc';
 import _ from 'lodash';
-import clsx from 'clsx';
-import { useFirstRealMainDocument } from '@tdev-hooks/useFirstRealMainDocument';
 import Image from './Image';
+import { useDocument } from '@tdev-hooks/useDocument';
+import { DocumentType } from '@tdev-api/document';
 
 export interface Props {
-    id: string;
-    meta: ModelMeta;
+    documentId: string;
 }
 
 const Preview = observer((props: Props) => {
-    const { meta } = props;
-    const excalidoc = useFirstRealMainDocument(props.id, meta);
+    const excalidoc = useDocument<DocumentType.Excalidoc>(props.documentId);
     if (!excalidoc) {
         return null;
     }