commit

src/datav/core/externals.ts

@@ -116,7 +116,7 @@ export const createWidgetNode = (config: ICreateWidgetConfig): IWidgetProps => {
   return {
     id: generateUUID(),
     info: { name: config.name, type: config.type, ver: config.ver },
-    attr: { x: config.x, y: config.y, w: config.w, h: config.h },
+    attr: { x: config.x, y: config.y, w: config.w, h: config.h, deg: 0, opacity: 1 },
     events: eventsFields,
     options: config.options || null,
     data: createSettingData(config),

src/datav/react/containers/Designer.tsx

@@ -18,18 +18,14 @@ export const Designer: React.FC<IDesignerProps> = ({ components, engine, materia
 
   useEffect(() => {
     if (engine) {
-      if (engine && ref.current) {
-        if (engine !== ref.current) {
-          ref.current.unmount();
-        }
+      if (ref.current && engine !== ref.current) {
+        ref.current.unmount();
       }
       engine.mount();
       ref.current = engine;
     }
     return () => {
-      if (engine) {
-        engine.unmount();
-      }
+      engine && engine.unmount();
     };
   }, [engine]);
   if (pEngine) throw new Error('There can only be one Designable Engine Context in the React Tree');

src/datav/react/containers/Layout.tsx

@@ -15,7 +15,6 @@ export const Layout: React.FC<IDesignerLayoutProps & { children: React.ReactNode
       });
     }
   }, []);
-
   if (layout) {
     return <Fragment>{props.children}</Fragment>;
   }

src/datav/react/settings-form/SettingsForm.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
-import { observer } from '@formily/react';
+import { Observer } from '@formily/react';
 import { useToolbar, useScreen } from '../hooks';
-import { cancelIdle, requestIdle } from '../../shared';
 import { createForm } from '@formily/core';
 import { Form } from '@formily/antd';
 import { ISettingFormProps } from './types';
@@ -12,74 +11,60 @@ import { SettingsFormContext } from './context';
 import { SettingsTable } from './SettingsTable';
 import { WidgetNode } from '@/datav/core';
 import { SettingsPage } from './SettingsPage';
-import './styles.less';
 import { observable } from '@formily/reactive';
+import './styles.less';
 
-const GlobalState = {
-  idleRequest: null,
-};
-
-export const SettingsForm: React.FC<ISettingFormProps> = observer(
-  (props) => {
-    const toolbar = useToolbar();
-    const screen = useScreen();
-    const form = useMemo(() => {
-      return createForm<{
-        component: WidgetNode;
-        pages: IScreenProps;
-      }>({
-        values: observable({
-          component: null,
-          pages: screen,
-        }),
-        effects(form) {
-          props.effects?.(form);
-        },
-      });
-    }, []);
+export const SettingsForm: React.FC<ISettingFormProps> = (props) => {
+  const toolbar = useToolbar();
+  const screen = useScreen();
+  const form = useMemo(() => {
+    return createForm<{
+      component: WidgetNode;
+      pages: IScreenProps;
+    }>({
+      values: observable({
+        component: null,
+        pages: screen,
+      }),
+      effects(form) {
+        props.effects?.(form);
+      },
+    });
+  }, []);
 
-    const scope = {
+  const scope = useMemo(() => {
+    return {
       ...props.scope,
       icon(name: string) {
         return <IconWidget infer={name} style={{ paddingLeft: 6 }} />;
       },
     };
+  }, []);
 
-    const settingsStyle: React.CSSProperties = useMemo(() => {
-      return {
-        width: toolbar.config.show ? 310 : 0,
-      };
-    }, [toolbar.config.show]);
-
-    return (
-      <div onKeyDown={(e) => e.stopPropagation()} style={settingsStyle} className="dv-settings-form">
-        <div style={{ width: 310, height: '100%' }}>
-          <SettingsFormContext.Provider value={props}>
-            <Form
-              form={form}
-              colon={false}
-              labelWidth={84}
-              labelAlign="left"
-              wrapperAlign="right"
-              feedbackLayout="none"
-              tooltipLayout="text"
-            >
-              <SchemaField scope={scope} components={{ SettingsTable, SettingsPage, ...props.components }}>
-                <SchemaField.Object name="component" x-component="SettingsTable" />
-                <SchemaField.Object name="pages" x-component="SettingsPage" />
-              </SchemaField>
-            </Form>
-          </SettingsFormContext.Provider>
+  return (
+    <Observer>
+      {() => (
+        <div onKeyDown={(e) => e.stopPropagation()} style={{ width: toolbar.config.show ? 310 : 0 }} className="dv-settings-form">
+          <div style={{ width: 310, height: '100%' }}>
+            <SettingsFormContext.Provider value={props}>
+              <Form
+                form={form}
+                colon={false}
+                labelWidth={84}
+                labelAlign="left"
+                wrapperAlign="right"
+                feedbackLayout="none"
+                tooltipLayout="text"
+              >
+                <SchemaField scope={scope} components={{ SettingsTable, SettingsPage, ...props.components }}>
+                  <SchemaField.Object name="component" x-component="SettingsTable" />
+                  <SchemaField.Object name="pages" x-component="SettingsPage" />
+                </SchemaField>
+              </Form>
+            </SettingsFormContext.Provider>
+          </div>
         </div>
-      </div>
-    );
-  },
-  {
-    scheduler: (update) => {
-      cancelIdle(GlobalState.idleRequest);
-      GlobalState.idleRequest = requestIdle(update, {
-        timeout: 500,
-      });
-    },
-  }
-);
+      )}
+    </Observer>
+  );
+};

src/datav/react/settings-form/SettingsTable/index.tsx

@@ -9,75 +9,90 @@ import { EventFields } from './EventsFields';
 import { StatusFields } from './StatusFields';
 import { DataFields } from './DataFields';
 import './index.less';
+import { cancelIdle, requestIdle } from '@/datav/shared';
 
 type SettingsTableProps = {
   schema?: ISchema;
 };
 
-export const SettingsTable: React.FC<SettingsTableProps> = observer((props) => {
-  const [schema, setSchema] = useState(null);
-  const oldSelectedRef = useRef<string>('');
-  const currentNode = useCurrentNode();
-  const widgets = useWidgets();
-  const field = useField();
-  const selected = useSelected();
-  const form = useForm();
+const GlobalState = {
+  idleRequest: null,
+};
+
+export const SettingsTable: React.FC<SettingsTableProps> = observer(
+  (props) => {
+    const [schema, setSchema] = useState(null);
+    const oldSelectedRef = useRef<string>('');
+    const currentNode = useCurrentNode();
+    const widgets = useWidgets();
+    const field = useField();
+    const selected = useSelected();
+    const form = useForm();
 
-  useEffect(() => {
-    if (selected.length !== 1 || selected[0] === oldSelectedRef.current) return;
-    oldSelectedRef.current = selected[0];
-    form.deleteValuesIn('component');
-    form.clearFormGraph(`component.*`); // 回收字段模型
-    const comp = currentNode ? widgets[currentNode.info.type]?.DnConfig : null;
-    form.setValuesIn('component', currentNode);
-    setSchema(comp?.schema ?? null);
-  }, [selected]);
+    useEffect(() => {
+      if (selected.length !== 1 || selected[0] === oldSelectedRef.current) return;
+      oldSelectedRef.current = selected[0];
+      form.deleteValuesIn('component');
+      form.clearFormGraph(`component.*`); // 回收字段模型
+      const comp = currentNode ? widgets[currentNode.info.type]?.DnConfig : null;
+      form.setValuesIn('component', currentNode);
+      setSchema(comp?.schema ?? null);
+    }, [selected]);
 
-  const tabBarStyle: React.CSSProperties = useMemo(() => {
-    return {
-      height: 30,
-      marginBottom: 44,
-      backgroundColor: '#2e343c',
-    };
-  }, []);
-  if (!schema) return <></>;
+    const tabBarStyle: React.CSSProperties = useMemo(() => {
+      return {
+        height: 30,
+        marginBottom: 44,
+        backgroundColor: '#2e343c',
+      };
+    }, []);
+    if (!schema) return <></>;
 
-  return (
-    <div style={{ height: '100%' }}>
-      <Field basePath={field.address} name="info" component={[WidgetInfo]} />
-      <Tabs
-        className="my-form-tab"
-        animated={false}
-        centered
-        tabBarStyle={tabBarStyle}
-        items={[
-          {
-            label: '属性',
-            key: 'item-1',
-            children: (
-              <>
-                <RecursionField basePath={field.address} name="attr" schema={baseAttrSchema} />
-                <RecursionField key={`${oldSelectedRef.current}_options`} basePath={field.address} name="options" schema={schema} />
-              </>
-            ),
-          },
-          {
-            label: '数据',
-            key: 'item-2',
-            children: <ObjectField key={`${oldSelectedRef.current}_data`} name="data" component={[DataFields]} />,
-          },
-          {
-            label: '事件',
-            key: 'item-3',
-            children: (
-              <>
-                <ObjectField key={`${oldSelectedRef.current}_events`} name="events" component={[EventFields]} />
-                <ObjectField key={`${oldSelectedRef.current}_visible`} name="visible" component={[StatusFields]} />
-              </>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-});
+    return (
+      <div style={{ height: '100%' }}>
+        <Field basePath={field.address} name="info" component={[WidgetInfo]} />
+        <Tabs
+          className="my-form-tab"
+          animated={false}
+          centered
+          tabBarStyle={tabBarStyle}
+          items={[
+            {
+              label: '属性',
+              key: 'item-1',
+              children: (
+                <>
+                  <RecursionField basePath={field.address} name="attr" schema={baseAttrSchema} />
+                  <RecursionField key={`${oldSelectedRef.current}_options`} basePath={field.address} name="options" schema={schema} />
+                </>
+              ),
+            },
+            {
+              label: '数据',
+              key: 'item-2',
+              children: <ObjectField key={`${oldSelectedRef.current}_data`} name="data" component={[DataFields]} />,
+            },
+            {
+              label: '事件',
+              key: 'item-3',
+              children: (
+                <>
+                  <ObjectField key={`${oldSelectedRef.current}_events`} name="events" component={[EventFields]} />
+                  <ObjectField key={`${oldSelectedRef.current}_visible`} name="visible" component={[StatusFields]} />
+                </>
+              ),
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+  {
+    scheduler: (update) => {
+      cancelIdle(GlobalState.idleRequest);
+      GlobalState.idleRequest = requestIdle(update, {
+        timeout: 500,
+      });
+    },
+  }
+);

src/datav/react/settings-form/schema/baseAttrSchema.ts

@@ -21,7 +21,6 @@ export const baseAttrSchema: ISchema = {
             placeholder: '宽度',
             min: 0,
           },
-          default: 200,
         },
         h: {
           type: 'number',
@@ -31,7 +30,6 @@ export const baseAttrSchema: ISchema = {
             placeholder: '高度',
             min: 0,
           },
-          default: 100,
         },
       },
     },
@@ -52,7 +50,6 @@ export const baseAttrSchema: ISchema = {
           'x-component-props': {
             placeholder: '左侧距离',
           },
-          default: 0,
         },
         y: {
           type: 'number',
@@ -61,7 +58,6 @@ export const baseAttrSchema: ISchema = {
           'x-component-props': {
             placeholder: '顶部距离',
           },
-          default: 0,
         },
       },
     },
@@ -75,7 +71,6 @@ export const baseAttrSchema: ISchema = {
         min: 0,
         max: 360,
       },
-      default: 0,
     },
     opacity: {
       type: 'number',
@@ -92,7 +87,6 @@ export const baseAttrSchema: ISchema = {
       'x-component-props': {
         placeholder: '透明度',
       },
-      default: 1,
     },
   },
 };