feat: 默认支持移动编辑区

limaofeng · Jul 20, 2022 · 1809706 · 1809706
1 parent be0858c
commit 1809706
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 34 deletions.
diff --git a/src/assets/devices.ts b/src/assets/devices.ts
@@ -59,4 +59,10 @@ export default [
     size: [794, 1123],
     device: ['Responsive Web', 'Desktop'],
   },
+  {
+    id: 'fullscreen',
+    name: '全屏',
+    size: [0, 0],
+    device: ['Responsive Web', 'Desktop'],
+  },
 ];
diff --git a/src/components/InfiniteViewer.tsx b/src/components/InfiniteViewer.tsx
@@ -47,7 +47,7 @@ interface DustbinDropResult {
 }
 
 function InfiniteViewer(props: InfiniteViewerProps) {
-  const { className, onZoom, onScroll, style, drag: isDrag, isZoom, children } = props;
+  const { className, onZoom, onScroll, style, drag: isDrag, children } = props;
 
   const dustbin = useSelector((state) => state.ui.scena.viewer.dustbin);
 
@@ -146,7 +146,7 @@ function InfiniteViewer(props: InfiniteViewerProps) {
   }, []);
 
   useEffect(() => {
-    if (!isZoom || !ref.current) {
+    if (!ref.current) {
       return;
     }
     const ele = ref.current;
@@ -156,8 +156,7 @@ function InfiniteViewer(props: InfiniteViewerProps) {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       cancelAnimationFrame(store.current.animationFrame);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isZoom]);
+  }, [handleWheel]);
 
   useEffect(() => {
     if (!isDrag) {

diff --git a/src/components/scena/Screen.tsx b/src/components/scena/Screen.tsx
@@ -16,7 +16,6 @@ function Screen({ children }: ScreenProps) {
   const screenHeader = useRef<HTMLDivElement>(null);
   const moveableContainer = useRef<HTMLDivElement>(null);
 
-  const isZoom = useSelector((state) => state.features.zoom);
   const zoom = useSelector((state) => state.ui.scena.zoom);
   const [width, height] = useSelector((state) => state.ui.scena.screen.size);
   const dustbin = useSelector((state) => state.ui.scena.viewer.dustbin);
@@ -48,7 +47,7 @@ function Screen({ children }: ScreenProps) {
     window.dispatchEvent(new Event('resize'));
   }, [width, height]);
 
-  const style = (isZoom && { width, height }) || { height: '100%' };
+  const style = { width, height };
   return (
     <>
       <div
@@ -78,11 +77,7 @@ function Screen({ children }: ScreenProps) {
         </div>
         <div className="canvas-bg-area" />
       </div>
-      <div
-        className={classnames('zoom-area', { 'no-zoom': !isZoom })}
-        ref={moveableContainer}
-        style={{ transform: `scale(${zoom})` }}
-      >
+      <div className={classnames('zoom-area')} ref={moveableContainer} style={{ transform: `scale(${zoom})` }}>
         <div className="canvas" style={style}>
           {children}
         </div>

diff --git a/src/components/scena/viewport/ScreenViewport.tsx b/src/components/scena/viewport/ScreenViewport.tsx
@@ -154,13 +154,13 @@ interface ScreenViewportProps {
 function ScreenViewport(props: ScreenViewportProps) {
   const { children, scrollX = 0, scrollY = 0, width, height } = props;
 
-  const isZoom = useSelector((state) => state.features.zoom);
   const sidebarWidth = useSelector((state) => state.ui.sidebar.width);
   const sidebarMinWidth = useSelector((state) => state.ui.sidebar.minWidth);
   const sidebarMinimizable = useSelector((state) => state.ui.sidebar.minimizable);
+  const screenId = useSelector((state) => state.ui.scena.screen.id);
 
   const style = useMemo(() => {
-    if (isZoom) {
+    if (screenId !== 'fullscreen') {
       return {
         width,
         height,
@@ -174,7 +174,7 @@ function ScreenViewport(props: ScreenViewportProps) {
       _sidebarWidth = Math.max(sidebarMinWidth, _sidebarWidth);
     }
     return { marginLeft: _sidebarWidth, display: 'flex', width: `calc(100% - ${_sidebarWidth}px)`, minHeight: `100%` };
-  }, [isZoom, width, height, scrollX, scrollY, sidebarWidth, sidebarMinimizable, sidebarMinWidth]);
+  }, [screenId, width, height, scrollX, scrollY, sidebarWidth, sidebarMinimizable, sidebarMinWidth]);
 
   return (
     <div className="screen-viewport" style={style}>

diff --git a/stories/Workspace.stories.tsx b/stories/Workspace.stories.tsx
@@ -29,33 +29,17 @@ const client = new ApolloClient({
 export default meta;
 
 const Template: Story<any> = (_args) => {
-  DemoPlugin.scena.workspace = () => {
-    const store = useStore();
-    const [lib, setLib] = useState<IconLibraryDefinition | undefined>();
-    useEffect(() => {
-      store.local('AsanyEditor').then((lib) => {
-        setLib(lib);
-      });
-    }, []);
-
-    if (!lib) {
-      return <></>;
-    }
-
+  DemoPlugin.scena!.workspace = () => {
     return (
       <div
         style={{
           width: '100%',
           padding: 20,
         }}
       >
-        <h3>{lib.description}</h3>
+        <h3>xxxxx</h3>
         <hr />
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          {lib.icons.map((item) => (
-            <Icon key={item.id} style={{ padding: 16 }} name={`AsanyEditor/${item.name}`} />
-          ))}
-        </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>sdfsdfsdfsdfsfd</div>
       </div>
     );
   };

diff --git a/stories/editors/demo/index.tsx b/stories/editors/demo/index.tsx
@@ -148,5 +148,5 @@ export default {
       );
     }, */
   },
-  features: [],
+  features: ['ruler'],
 } as EditorPlugin;