Temp

mydraft-cc · Sep 28, 2023 · c80dd68 · c80dd68
1 parent 2b21267
commit c80dd68
Show file tree

Hide file tree

Showing 24 changed files with 170 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "reselect": "4.1.5",
     "tslib": "2.3.1",
     "y-webrtc": "^10.2.5",
-    "yjs-redux": "^0.6.0"
+    "yjs-redux": "^0.7.0"
   },
   "scripts": {
     "start": "node --max_old_space_size=6096 node_modules/webpack/bin/webpack.js serve --config config/webpack.config.js --port 3002 --hot --server-type https --server-options-pfx dev/squidex-dev.pfx --server-options-passphrase password",

diff --git a/src/App.tsx b/src/App.tsx
@@ -40,9 +40,11 @@ export const App = () => {
     ] = usePrinter();
 
     React.useEffect(() => {
-        const token = routeTokenSnapshot.current;
+        const token = routeTokenSnapshot.current as string;
 
-        if (token && token.length > 0) {
+        if (token?.indexOf('c:') === 0) {
+            dispatch(newDiagram(false, token.substring(2)));
+        } else if (token?.length > 0) {
             dispatch(loadDiagramFromServer({ tokenToRead: token, navigate: false }));
         } else {
             dispatch(newDiagram(false));

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -10,7 +10,7 @@ export * from './react/ColorPicker';
 export * from './react/Clipboard';
 export * from './react/Grid';
 export * from './react/hooks';
-export * from './react/MarkerButton';
+export * from './react/marker';
 export * from './react/Shortcut';
 export * from './react/Title';
 export * from './react/UserReport';

diff --git a/src/core/react/MarkerButton.tsx → src/core/react/marker.ts b/src/core/react/MarkerButton.tsx → src/core/react/marker.ts
@@ -5,12 +5,10 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-import { SmileOutlined } from '@ant-design/icons';
 import markerSDK, { MarkerSdk } from '@marker.io/browser';
-import { Button } from 'antd';
 import * as React from 'react';
 
-export const MarkerButton = () => {
+export function useMarker() {
     const [widget, setWidget] = React.useState<MarkerSdk>();
 
     React.useEffect(() => {
@@ -26,10 +24,10 @@ export const MarkerButton = () => {
 
         loadMarker();
     }, []);
-    
-    return (
-        <Button className='menu-item' onClick={() => widget?.capture('advanced')}>
-            <SmileOutlined />
-        </Button>
-    );
-};
+
+    const open = React.useCallback(() => {
+        widget?.capture('advanced');
+    }, [widget]);
+
+    return { open };
+}
diff --git a/src/core/utils/helpers.ts b/src/core/utils/helpers.ts
@@ -23,10 +23,10 @@ export function isModKey(key: KeyboardEvent | MouseEvent) {
 const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
 const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
 const escapeReplacements = {
-    '&' : '&amp;',
-    '<' : '&lt;',
-    '>' : '&gt;',
-    '"' : '&quot;',
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
     '\'': '&#39;',
 };
 
@@ -40,6 +40,14 @@ export function escapeHTML(html: string) {
     return html;
 }
 
+export async function copyTextToClipboard(text: string) {
+    if ('clipboard' in navigator) {
+        return await navigator.clipboard.writeText(text);
+    } else {
+        return document.execCommand('copy', true, text);
+    }
+}
+
 export module Keys {
     const ALT = 18;
     const COMMA = 188;

diff --git a/src/style/_common.scss b/src/style/_common.scss
@@ -110,6 +110,18 @@ ul {
     padding-bottom: 10px;
 }
 
+.share {
+    padding: 10px;
+
+    .ant-input-group {
+        display: flex;
+        line-height: 1rem;
+        flex-flow: row;
+        flex-wrap: nowrap;
+        margin-top: 5px;
+    }
+}
+
 //
 // Sidebars
 //

diff --git a/src/texts/en.ts b/src/texts/en.ts
@@ -20,7 +20,9 @@ export const texts = {
         backgroundColor: 'Background Color',
         bringForwards: 'Bring Forwards',
         bringToFront: 'Bring to Front',
+        bug: 'Report a Bug',
         colors: 'Colors',
+        copied: 'Link copied to clipboard',
         copy: 'Copy',
         copyTooltip: 'Copy Items',
         custom: 'Custom',
@@ -37,6 +39,7 @@ export const texts = {
         findShape: 'Find Shape',
         fontSize: 'Font Size',
         foregroundColor: 'Foreground Color',
+        github: 'Github & Source Code',
         group: 'Group',
         groupTooltip: 'Group Items',
         height: 'Height',
@@ -83,6 +86,7 @@ export const texts = {
         savingDiagramDoneUrl: (fullUrl: string) => `Saving diagram completed under ${fullUrl}.`,
         sendBackwards: 'Send Backwards',
         sendToBack: 'Send to Back',
+        shareText: 'Share the following link to work together on this wireframe',
         shapes: 'Shapes',
         strokeColor: 'Stroke Color',
         strokeThickness: 'Stroke Thickness',

diff --git a/src/wireframes/collaboration/components/Presence.tsx b/src/wireframes/collaboration/components/Presence.tsx
@@ -1,9 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Avatar } from 'antd';
+import { CopyOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { Avatar, Button, Dropdown, Input, message } from 'antd';
 import * as React from 'react';
-import { usePresence } from '../hooks';
+import { copyTextToClipboard } from '@app/core';
+import { texts } from '@app/texts';
+import { useStore } from '@app/wireframes/model';
+import { usePresence } from './../hooks';
 
 export const Presence = () => {
+    const editor = useStore(x => x.editor);
+    const editorId = editor.id;
     const presence = usePresence();
 
     const sortedUsers = React.useMemo(() => {
@@ -17,12 +23,46 @@ export const Presence = () => {
     }, [presence]);
 
     return (
-        <Avatar.Group>
-            {sortedUsers.map(user =>
-                <Avatar key={user.id} style={{ backgroundColor: user.color }}>
-                    {user.initial}
-                </Avatar>,
-            )}
-        </Avatar.Group>
+        <>
+            {sortedUsers.length > 1 &&
+                <Avatar.Group>
+                    {sortedUsers.map(user =>
+                        <Avatar key={user.id} style={{ backgroundColor: user.color }}>
+                            {user.initial}
+                        </Avatar>,
+                    )}
+                </Avatar.Group>
+            }
+
+            <Dropdown overlay={<ShareMenu id={editorId} />}>
+                <Button className='menu-item' size='large'>
+                    <ShareAltOutlined />
+                </Button>
+            </Dropdown>
+        </>
+    );
+};
+
+export const ShareMenu = ({ id }: { id: string }) => {
+    const link = `${window.location.protocol}//${window.location.host}/c:${id}`;
+
+    const doCopy = () => {
+        copyTextToClipboard(link);
+
+        message.open({ content: texts.common.copied, key: 'clipboard', type: 'info' });
+    };
+
+    return (
+        <div className='share ant-menu ant-menu-root'>
+            {texts.common.shareText}
+
+            <Input.Group compact>
+                <Input value={link} />
+
+                <Button onClick={doCopy}>
+                    <CopyOutlined />
+                </Button>
+            </Input.Group>
+        </div>
     );
 };
diff --git a/src/wireframes/collaboration/components/Provider.tsx b/src/wireframes/collaboration/components/Provider.tsx
@@ -16,8 +16,9 @@ import { CollaborationContext, CollaborationState } from './../hooks';
 
 export const CollaborationProvider = (props: { children: React.ReactNode }) => {
     const [state, setState] = React.useState<CollaborationState>({});
-    const editorId = useStore(x => x.editor.id);
-    const editorBinder = useYjsReduxBinder();
+    const binder = useYjsReduxBinder();
+    const editor = useStore(x => x.editor);
+    const editorId = editor.id;
 
     useAsyncEffect(async cancellation => {
         const clientDoc = new Y.Doc();
@@ -47,7 +48,7 @@ export const CollaborationProvider = (props: { children: React.ReactNode }) => {
             return undefined;
         }
 
-        const unbind = editorBinder.connectSlice(clientDoc, 'editor',
+        const unbind = binder.connectSlice(clientDoc, 'editor',
             root => {
                 setState(state => ({
                     ...state,
@@ -66,7 +67,7 @@ export const CollaborationProvider = (props: { children: React.ReactNode }) => {
 
             unbind();
         };
-    }, [editorId, editorBinder]);
+    }, [editorId, binder]);
 
     return (
         <CollaborationContext.Provider value={state}>

diff --git a/src/wireframes/components/CustomDragLayer.tsx b/src/wireframes/components/CustomDragLayer.tsx
@@ -7,8 +7,8 @@
 
 import * as React from 'react';
 import { useDragLayer, XYCoord } from 'react-dnd';
-import { ShapePlugin } from '../interface';
-import { getViewBox, ShapeRenderer } from '../shapes/ShapeRenderer';
+import { ShapePlugin } from '@app/wireframes/interface';
+import { getViewBox, ShapeRenderer } from '@app/wireframes/shapes/ShapeRenderer';
 import './CustomDragLayer.scss';
 
 export const CustomDragLayer = () => {

diff --git a/src/wireframes/components/EditorView.tsx b/src/wireframes/components/EditorView.tsx
@@ -12,9 +12,8 @@ import { NativeTypes } from 'react-dnd-html5-backend';
 import { findDOMNode } from 'react-dom';
 import { useDispatch } from 'react-redux';
 import { loadImagesToClipboardItems, sizeInPx, useClipboard, useEventCallback } from '@app/core';
-import { addShape, changeItemsAppearance, Diagram, getDiagram, getDiagramId, getEditor, getMasterDiagram, getSelectedItems, RendererService, selectItems, Transform, transformItems, useStore } from '@app/wireframes/model';
+import { addShape, changeItemsAppearance, Diagram, DiagramRef, getDiagram, getDiagramId, getEditor, getMasterDiagram, getSelectedItems, ItemsRef, RendererService, selectItems, Transform, transformItems, useStore } from '@app/wireframes/model';
 import { Editor } from '@app/wireframes/renderer/Editor';
-import { DiagramRef, ItemsRef } from '../model/actions/utils';
 import { ShapeSource } from './../interface';
 import { ContextMenu } from './context-menu/ContextMenu';
 import './EditorView.scss';

diff --git a/src/wireframes/components/actions/Components.tsx b/src/wireframes/components/actions/Components.tsx
@@ -12,7 +12,7 @@ import * as React from 'react';
 import { isMac, Shortcut, Types } from '@app/core';
 import { UIAction } from './shared';
 
-type ActionDisplayMode = 'Icon' | 'IconLabel' | 'Label';
+type ActionDisplayMode = 'IconOnly' | 'IconLabel' | 'Label';
 
 type ActionProps = {
     // The action to show.
@@ -46,7 +46,7 @@ export const ActionMenuButton = React.memo((props: ActionProps & ButtonProps) =>
         <>
             <Tooltip mouseEnterDelay={1} title={title}>
                 <Button {...other} type={type} className={!type ? 'menu-item' : undefined} size='large' disabled={disabled} onClick={onAction}>
-                    <ButtonContent icon={icon} label={label} displayMode={displayMode || 'Icon'} />
+                    <ButtonContent icon={icon} label={label} displayMode={displayMode || 'IconOnly'} />
                 </Button>
             </Tooltip>
 
@@ -83,7 +83,7 @@ export const ActionDropdownButton = React.memo((props: ActionProps & DropdownBut
                     </Tooltip>,
                     React.cloneElement(rightButton as React.ReactElement<any, string>),
                 ]}>
-                <ButtonContent icon={icon} label={label} displayMode={displayMode || 'Icon'} />
+                <ButtonContent icon={icon} label={label} displayMode={displayMode || 'IconOnly'} />
             </Dropdown.Button>
 
             {shortcut &&
@@ -114,7 +114,7 @@ export const ActionButton = React.memo((props: ActionProps & ButtonProps) => {
         <>
             <Tooltip mouseEnterDelay={1} title={title}>
                 <Button {...other} disabled={disabled} onClick={onAction}>
-                    <ButtonContent icon={icon} label={label} displayMode={displayMode || 'Icon'} />
+                    <ButtonContent icon={icon} label={label} displayMode={displayMode || 'IconOnly'} />
                 </Button>
             </Tooltip>
         </>
@@ -138,7 +138,7 @@ export const ActionMenuItem = React.memo((props: ActionProps & MenuItemProps) =>
 
     return (
         <Menu.Item {...other} key={label} className='force-color' disabled={disabled} onClick={onAction}
-            icon={(actualDisplayMode === 'Icon' || actualDisplayMode === 'IconLabel') ? (
+            icon={(actualDisplayMode === 'IconOnly' || actualDisplayMode === 'IconLabel') ? (
                 <>
                     {Types.isString(icon) ? (
                         <span className='anticon'>
@@ -158,7 +158,7 @@ export const ActionMenuItem = React.memo((props: ActionProps & MenuItemProps) =>
 const ButtonContent = ({ displayMode, label, icon }: { icon: string | JSX.Element; label: string; displayMode: ActionDisplayMode }) => {
     return (
         <>
-            {(displayMode === 'Icon' || displayMode === 'IconLabel') &&
+            {(displayMode === 'IconOnly' || displayMode === 'IconLabel') &&
                 <>
                     {Types.isString(icon) ? (
                         <i className={icon} />

diff --git a/src/wireframes/components/context-menu/ContextMenu.tsx b/src/wireframes/components/context-menu/ContextMenu.tsx
@@ -8,7 +8,7 @@
 import { Menu } from 'antd';
 import * as React from 'react';
 import { texts } from '@app/texts';
-import { ActionMenuItem, useAlignment, useClipboard, useGrouping, useRemove } from '../actions';
+import { ActionMenuItem, useAlignment, useClipboard, useGrouping, useRemove } from './../actions';
 
 export interface ContextMenuProps {
     onClick?: () => void;

diff --git a/src/wireframes/components/menu/ClipboardMenu.tsx b/src/wireframes/components/menu/ClipboardMenu.tsx
@@ -6,7 +6,7 @@
 */
 
 import * as React from 'react';
-import { ActionMenuButton, useClipboard } from '../actions';
+import { ActionMenuButton, useClipboard } from './../actions';
 
 export const ClipboardMenu = React.memo(() => {
     const forClipboard = useClipboard();