feat: 添加工作区组件配置

limaofeng · Jul 15, 2021 · aad9660 · aad9660
1 parent bbd9a12
commit aad9660
Show file tree

Hide file tree

Showing 21 changed files with 239 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@types/lodash": "^4.14.170",
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
+    "@types/react-is": "^17.0.2",
     "@types/react-transition-group": "^4.4.1",
     "@types/styled-components": "^5.1.11",
     "autoprefixer": "^10.2.6",

diff --git a/src/AsanyEditor.tsx b/src/AsanyEditor.tsx
@@ -43,22 +43,23 @@ function NotFound() {
 }
 
 function useComponent(
-  RootContainer: React.ComponentType<any>,
-  children?: React.ReactNode
+  _RootContainer: React.ComponentType<any>,
+  _children?: React.ReactNode
 ): React.ComponentType<any> {
   const project = useSelector((state) => state.project);
   const ReactComponent = useRef<ComponentType<any>>(NotFound);
-  const [, forceRender] = useReducer((s) => s + 1, 0);
+  // const [, forceRender] = useReducer((s) => s + 1, 0);
 
   if (!project || !project.type) {
     console.warn('project is null !');
   }
   // const data = project.data as IComponentData;
-  const Component: any = () => <></>;
+  // const Component: any = () => <></>;
   // const Component = useReactComponent(data ? data.id : 'notFound', {
   //   linkElement: LinkRender,
   // });
-  console.log(Component, forceRender, RootContainer, children);
+  // TODO: 需要修补
+  // console.log(Component, forceRender, RootContainer, children);
   // useEffect(() => {
   //   if (project.type !== 'component') {
   //     ReactComponent.current = () => <>{children}</>;

diff --git a/src/components/aside/Aside.tsx b/src/components/aside/Aside.tsx
@@ -1,5 +1,5 @@
 // import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-// import { Tabs } from 'antd';
+import { Tabs } from 'antd';
 import classnames from 'classnames';
 import React, {
   CSSProperties,
@@ -91,9 +91,9 @@ function Aside(props: AsideProps, ref: React.ForwardedRef<ISettings>) {
     state.current.panels = [];
   }, [tabs.map((item) => item.id || item.title)]);
 
-  // const handleChange = (activeKey: string) => {
-  //   setActiveKey(activeKey);
-  // };
+  const handleChange = (activeKey: string) => {
+    setActiveKey(activeKey);
+  };
 
   const handleCloseNextAside = async () => {
     if (state.current.nextIndex == -1) {
@@ -149,28 +149,26 @@ function Aside(props: AsideProps, ref: React.ForwardedRef<ISettings>) {
           })}
         >
           {!!tabs.length ? (
-            <div>
-              {' '}
-              {/**
             <Tabs
               className="settings-menu-tabs"
               activeKey={activeKey}
               onChange={handleChange}
               tabBarExtraContent={
                 <button type="button" className="close" onClick={onClose}>
-                  <CloseOutlined />
+                  {/* <CloseOutlined /> */}
                 </button>
               }
             >
               {tabs.map((item) => (
-                <Tabs.TabPane animated={false} tab={item.title} key={item.id || item.title}>
+                <Tabs.TabPane
+                  animated={false}
+                  tab={item.title}
+                  key={item.id || item.title}
+                >
                   {item.content}
                 </Tabs.TabPane>
               ))}
             </Tabs>
-             */}
-              sdfsdfsdfsdf
-            </div>
           ) : (
             <>
               <div className="settings-menu-header">

diff --git a/src/components/resizer/Resizer.tsx b/src/components/resizer/Resizer.tsx
@@ -8,6 +8,8 @@ import React, {
 
 import classnames from 'classnames';
 
+import './style/index.less';
+
 type ResizeFunc = (e: React.MouseEvent) => void;
 
 export type ResizerProps = {

diff --git a/src/components/scena/Screen.tsx b/src/components/scena/Screen.tsx
@@ -128,23 +128,25 @@ function Screen({ children }: ScreenProps) {
           height: `${zoom * 100}%`,
         }}
       >
-        <div
-          ref={screenHeader}
-          onClick={handleClick}
-          className={classnames('screen-info', {
-            'is-active': activeKey === root?.key,
-          })}
-        >
-          <span>{root?.title}</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="svg-icon icon attribute-setting"
-            viewBox="0 0 14 14"
-            aria-hidden="true"
+        {root?.title && (
+          <div
+            ref={screenHeader}
+            onClick={handleClick}
+            className={classnames('screen-info', {
+              'is-active': activeKey === root?.key,
+            })}
           >
-            <path d="M7.512.295l5.039 2.91c.316.182.511.52.511.886v5.818c0 .366-.195.704-.511.886l-5.04 2.91a1.023 1.023 0 0 1-1.023 0l-5.039-2.91a1.023 1.023 0 0 1-.511-.886V4.091c0-.366.195-.704.511-.886L6.49.295a1.023 1.023 0 0 1 1.023 0zM7 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
-          </svg>
-        </div>
+            <span>{root?.title}</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="svg-icon icon attribute-setting"
+              viewBox="0 0 14 14"
+              aria-hidden="true"
+            >
+              <path d="M7.512.295l5.039 2.91c.316.182.511.52.511.886v5.818c0 .366-.195.704-.511.886l-5.04 2.91a1.023 1.023 0 0 1-1.023 0l-5.039-2.91a1.023 1.023 0 0 1-.511-.886V4.091c0-.366.195-.704.511-.886L6.49.295a1.023 1.023 0 0 1 1.023 0zM7 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+            </svg>
+          </div>
+        )}
         <div className="canvas-bg-area" />
       </div>
       <div

diff --git a/src/components/scena/Toolbar.tsx b/src/components/scena/Toolbar.tsx
@@ -5,6 +5,16 @@ import Icon from '../../icon';
 import { useSelector } from '../../hooks';
 import useTools from '../../hooks/useTools';
 
+function iconRender(icon: any) {
+  if (!icon) {
+    return;
+  }
+  if (typeof icon === 'string') {
+    return <Icon name={icon} />;
+  }
+  return React.createElement(icon);
+}
+
 function Toolbar() {
   const tools = useTools((state) => state.ui.scena.toolbar.tools);
   const focus = useSelector(
@@ -32,12 +42,13 @@ function Toolbar() {
               <a
                 key={`${item.id}-${index}`}
                 onClick={item.onClick as any}
-                className={classnames('toolbar-icon', {
+                className={classnames('toolbar-icon', item.className, {
                   disabled: item.isDisabled!(focus[item.id]),
                   active: item.isSelected!(focus[item.id]),
                 })}
+                style={item.style}
               >
-                <Icon name={item.icon} />
+                {iconRender(item.icon)}
                 {item.name && (
                   <span className="toolbar-icon-tip">{item.name}</span>
                 )}
@@ -58,12 +69,13 @@ function Toolbar() {
               <a
                 key={`${item.id}-${index}`}
                 onClick={item.onClick as any}
-                className={classnames('toolbar-icon', {
+                className={classnames('toolbar-icon', item.className, {
                   disabled: item.isDisabled!(focus[item.id]),
                   active: item.isSelected!(focus[item.id]),
                 })}
+                style={item.style}
               >
-                <Icon name={item.icon} />
+                {iconRender(item.icon)}
                 {item.name && (
                   <span className="toolbar-icon-tip">{item.name}</span>
                 )}

diff --git a/src/components/scena/index.tsx b/src/components/scena/index.tsx
@@ -2,6 +2,9 @@ import classnames from 'classnames';
 import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 
 import { useDispatch, useEditor, useSelector } from '../../hooks';
+
+import { isElement, isValidElementType } from 'react-is';
+
 import {
   ActionType,
   UIActionType,
@@ -12,6 +15,7 @@ import Ruler, { RulerGuides } from '../Ruler';
 import SelectoMananger from './SelectoMananger';
 import Toolbar from './Toolbar';
 import ScreenViewport from './viewport/ScreenViewport';
+import { WorkspaceProps } from '../../typings';
 
 export interface ScenaStatus {
   dragStatus: boolean;
@@ -33,6 +37,18 @@ interface ScenaState {
   isOpenConfig: boolean;
 }
 
+function Workspace(props: WorkspaceProps) {
+  const workspace = useSelector((state) => state.ui.scena.workspace);
+  if (isElement(workspace)) {
+    return React.cloneElement(workspace, props);
+  }
+  if (isValidElementType(workspace)) {
+    const { children, ...otherProps } = props;
+    return React.createElement(workspace, otherProps, children);
+  }
+  return props.children as any;
+}
+
 function Scena(props: ScenaProps) {
   const ref = useRef<HTMLDivElement>(null);
   const dispatch = useDispatch();
@@ -169,7 +185,7 @@ function Scena(props: ScenaProps) {
         onZoom={handleZoom}
       >
         <ScreenViewport width={width} height={height}>
-          {props.children}
+          <Workspace>{props.children}</Workspace>
         </ScreenViewport>
       </InfiniteViewer>
       {selecto && <SelectoMananger />}

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -17,6 +17,9 @@ function SiderBar(props: SiderBarProps) {
   const dispatch = useDispatch();
   const visible = useSelector((state) => state.ui.sidebar.visible);
   const [collapsed, setCollapsed] = useState(true);
+  const scenaToolbarVisible = useSelector(
+    (state) => state.ui.scena.toolbar.visible
+  );
 
   const Content = useSelector((state) => state.ui.sidebar.content);
 
@@ -31,6 +34,7 @@ function SiderBar(props: SiderBarProps) {
       className={classnames('sketch-sidebar', 'asany-editor-sidebar', {
         collapsed: collapsed,
         'sidebar-out': !visible,
+        falling: scenaToolbarVisible,
       })}
     >
       <Toolbar />

diff --git a/src/components/sidebar/Toolbar.tsx b/src/components/sidebar/Toolbar.tsx
@@ -7,6 +7,13 @@ import { useSelector } from '../../hooks';
 import useTools from '../../hooks/useTools';
 import { AsanyTool } from '../../typings';
 
+function iconRender(icon: any) {
+  if (typeof icon === 'string') {
+    return <Icon name={icon} />;
+  }
+  return React.createElement(icon);
+}
+
 function Toolbar() {
   const toolboardKey = useSelector((state) => state.ui.sidebar.toolboardKey);
 
@@ -36,13 +43,18 @@ function Toolbar() {
           .map((item, index: number) => (
             <li
               key={`${item.id}-${index}`}
-              className={classnames('panel-switcher-list-item', {
-                'tools-extra': toolboardKey !== item.id,
-                selected: item.isSelected!(focus[item.id]),
-              })}
+              className={classnames(
+                'panel-switcher-list-item',
+                item.className,
+                {
+                  'tools-extra': toolboardKey !== item.id,
+                  selected: item.isSelected!(focus[item.id]),
+                }
+              )}
+              style={item.style}
               onClick={buildClick(item)}
             >
-              <Icon name={item.icon} />
+              {iconRender(item.icon)}
             </li>
           ))}
       </ul>
@@ -55,12 +67,17 @@ function Toolbar() {
           .map((item) => (
             <li
               key={`${item.id}`}
-              className={classnames('panel-switcher-list-item', {
-                selected: item.isSelected!(focus[item.id]),
-              })}
+              className={classnames(
+                'panel-switcher-list-item',
+                item.className,
+                {
+                  selected: item.isSelected!(focus[item.id]),
+                }
+              )}
               onClick={buildClick(item)}
+              style={item.style}
             >
-              <Icon name={item.icon} />
+              {iconRender(item.icon)}
             </li>
           ))}
       </ul>

diff --git a/src/components/sidebar/Toolboard.tsx b/src/components/sidebar/Toolboard.tsx
@@ -260,13 +260,15 @@ function Toolboard(props: ToolboardProps, ref: React.ForwardedRef<IToolboard>) {
     }
   }, [minWidth, state.current.offset]);
 
+  console.log('children', children);
+
   return (
     <Resizer
       className={classnames('sidebar-resizer', {
         disabled: !keepOpen,
         minimizable,
       })}
-      style={{ width: minimizable ? 3 : vw }}
+      style={{ width: !children ? 0 : minimizable ? 3 : vw }}
       onResize={handleResize}
       onResizeEnd={handleResizeEnd}
     >