feat: 通过 ref 获取 Editor 的 api 对象

limaofeng · Jul 20, 2022 · 7fbb406 · 7fbb406
1 parent a558ad5
commit 7fbb406
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/AsanyEditor.tsx b/src/AsanyEditor.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useImperativeHandle, useState } from 'react';
 import React, { ComponentType, useCallback, useEffect, useReducer } from 'react';
 
 import { isElement, isValidElementType } from 'react-is';
@@ -12,9 +12,9 @@ import { AsanyProvider } from './AsanyContext';
 import { ActionType } from './reducers/actions';
 import RuntimeContainer from './RuntimeContainer';
 import Toolbar from './components/toolbar/Toolbar';
-import { useDispatch, useSelector } from './hooks';
+import { useDispatch, useEditor, useSelector } from './hooks';
 import DefaultLoadingComponent, { LoadingComponentProps } from './components/scena/LoadingComponent';
-import { AsanyProject, EditorPlugin, WorkspaceProps } from './typings';
+import { AsanyProject, EditorPlugin, IAsanyEditor, WorkspaceProps } from './typings';
 import './icons';
 
 import './style/tailwind.css';
@@ -29,14 +29,10 @@ interface AsanyProps {
   children?: React.ReactNode;
 }
 
-function Editor({
-  className,
-  onSave,
-  container,
-  loading: LoadingComponent = DefaultLoadingComponent,
-  children,
-  ...props
-}: AsanyProps) {
+const Editor = React.forwardRef(function Editor(
+  { className, onSave, container, loading: LoadingComponent = DefaultLoadingComponent, children, ...props }: AsanyProps,
+  ref?: React.ForwardedRef<IAsanyEditor>
+) {
   const dispatch = useDispatch();
 
   const [offsetLeft, setOffsetLeft] = useState(0);
@@ -73,6 +69,10 @@ function Editor({
     setOffsetLeft(x);
   }, []);
 
+  const api = useEditor();
+
+  useImperativeHandle(ref, () => api);
+
   return (
     <div className={classnames('asany-editor sketch-container', className)}>
       <Toolbar {...props} />
@@ -100,7 +100,7 @@ function Editor({
       </div>
     </div>
   );
-}
+});
 
 interface AsanyWarpperProps {
   className?: string;
@@ -114,7 +114,7 @@ interface AsanyWarpperProps {
   children?: React.ReactNode;
 }
 
-export default function AsanyEditor(props: AsanyWarpperProps) {
+function AsanyEditor(props: AsanyWarpperProps, ref?: React.ForwardedRef<IAsanyEditor>) {
   const { children, project, onSave, onBack, container = RuntimeContainer, plugins = [], loading, className } = props;
   const [version, forceRender] = useReducer((s) => s + 1, 0);
   useEffect(() => {
@@ -123,11 +123,14 @@ export default function AsanyEditor(props: AsanyWarpperProps) {
     }
     forceRender();
   }, [project]);
+
   return (
     <AsanyProvider version={version} plugins={[...plugins]} value={project}>
-      <Editor className={className} onSave={onSave} loading={loading} container={container} onBack={onBack}>
+      <Editor ref={ref} className={className} onSave={onSave} loading={loading} container={container} onBack={onBack}>
         {children}
       </Editor>
     </AsanyProvider>
   );
 }
+
+export default React.forwardRef(AsanyEditor);
diff --git a/stories/Layout.stories.tsx b/stories/Layout.stories.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Meta, Story } from '@storybook/react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import AsanyEditor from '../src';
+import AsanyEditor, { IAsanyEditor } from '../src';
 
 import DemoPlugin from './editors/demo';
 
@@ -18,18 +18,23 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<any> = (_args) => {
+  const api = useRef<IAsanyEditor>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      api.current?.features.ruler(false);
+    }, 5000);
+  }, []);
+
   return (
     <DndProvider backend={HTML5Backend}>
       <AsanyEditor
+        ref={api}
         plugins={[DemoPlugin]}
         onSave={(data) => console.log(data)}
         project={{
           id: 'test',
-          name: (
-            <div style={{ color: '#727d83', fontSize: 16 }}>
-              项目名称展示区域
-            </div>
-          ) as any,
+          name: (<div style={{ color: '#727d83', fontSize: 16 }}>项目名称展示区域</div>) as any,
           type: 'demo',
           data: {
             id: '111',