@formily-design/react 1.0.0

package/esm/containers/Designer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IDesignerProps } from '../types';
+export declare const Designer: React.FC<IDesignerProps>;

package/esm/containers/Designer.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+import { GlobalRegistry } from '@formily-design/core';
+import { DesignerEngineContext } from '../context';
+import { GhostWidget } from '../widgets';
+import { useDesigner } from '../hooks';
+import { Layout } from './Layout';
+import * as icons from '../icons';
+GlobalRegistry.registerDesignerIcons(icons);
+export const Designer = (props) => {
+    const engine = useDesigner();
+    const ref = useRef();
+    useEffect(() => {
+        if (props.engine) {
+            if (props.engine && ref.current) {
+                if (props.engine !== ref.current) {
+                    ref.current.unmount();
+                }
+            }
+            props.engine.mount();
+            ref.current = props.engine;
+        }
+        return () => {
+            if (props.engine) {
+                props.engine.unmount();
+            }
+        };
+    }, [props.engine]);
+    if (engine)
+        throw new Error('There can only be one Designable Engine Context in the React Tree');
+    return (React.createElement(Layout, { ...props },
+        React.createElement(DesignerEngineContext.Provider, { value: props.engine },
+            props.children,
+            React.createElement(GhostWidget, null))));
+};
+Designer.defaultProps = {
+    prefixCls: 'dn-',
+    theme: 'light',
+};

package/esm/containers/Layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IDesignerLayoutProps } from '../types';
+export declare const Layout: React.FC<IDesignerLayoutProps>;

package/esm/containers/Layout.js

@@ -0,0 +1,32 @@
+import React, { useContext, Fragment, useRef, useLayoutEffect } from 'react';
+import { each } from '@formily-design/shared';
+import { DesignerLayoutContext } from '../context';
+import cls from 'classnames';
+export const Layout = (props) => {
+    const layout = useContext(DesignerLayoutContext);
+    const ref = useRef();
+    useLayoutEffect(() => {
+        if (ref.current) {
+            each(props.variables, (value, key) => {
+                ref.current.style.setProperty(`--${key}`, value);
+            });
+        }
+    }, []);
+    if (layout) {
+        return React.createElement(Fragment, null, props.children);
+    }
+    return (React.createElement("div", { ref: ref, className: cls({
+            [`${props.prefixCls}app`]: true,
+            [`${props.prefixCls}${props.theme}`]: props.theme,
+        }, props.className), style: props.style },
+        React.createElement(DesignerLayoutContext.Provider, { value: {
+                theme: props.theme,
+                prefixCls: props.prefixCls,
+                position: props.position,
+            } }, props.children)));
+};
+Layout.defaultProps = {
+    theme: 'light',
+    prefixCls: 'dn-',
+    position: 'fixed',
+};

package/esm/containers/Simulator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type ISimulatorProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Simulator: React.FC<ISimulatorProps>;

package/esm/containers/Simulator.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ScreenType } from '@formily-design/core';
+import { requestIdle } from '@formily-design/shared';
+import { observer } from '@formily/reactive-react';
+import { useScreen } from '../hooks';
+import { MobileSimulator, PCSimulator, ResponsiveSimulator, } from '../simulators';
+export const Simulator = observer((props) => {
+    const screen = useScreen();
+    if (screen.type === ScreenType.PC)
+        return React.createElement(PCSimulator, { ...props }, props.children);
+    if (screen.type === ScreenType.Mobile)
+        return React.createElement(MobileSimulator, { ...props }, props.children);
+    if (screen.type === ScreenType.Responsive)
+        return (React.createElement(ResponsiveSimulator, { ...props }, props.children));
+    return React.createElement(PCSimulator, { ...props }, props.children);
+}, {
+    scheduler: requestIdle,
+});

package/esm/containers/Viewport.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IViewportProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder'> {
+    placeholder?: React.ReactNode;
+    dragTipsDirection?: 'left' | 'right';
+}
+export declare const Viewport: React.FC<IViewportProps>;

package/esm/containers/Viewport.js

@@ -0,0 +1,49 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { usePrefix, useViewport } from '../hooks';
+import { AuxToolWidget, EmptyWidget } from '../widgets';
+import { requestIdle, globalThisPolyfill } from '@formily-design/shared';
+import cls from 'classnames';
+export const Viewport = ({ placeholder, dragTipsDirection, ...props }) => {
+    const [loaded, setLoaded] = useState(false);
+    const prefix = usePrefix('viewport');
+    const viewport = useViewport();
+    const ref = useRef();
+    const viewportRef = useRef();
+    const isFrameRef = useRef(false);
+    useLayoutEffect(() => {
+        const frameElement = ref.current.querySelector('iframe');
+        if (!viewport)
+            return;
+        if (viewportRef.current && viewportRef.current !== viewport) {
+            viewportRef.current.onUnmount();
+        }
+        if (frameElement) {
+            frameElement.addEventListener('load', () => {
+                viewport.onMount(frameElement, frameElement.contentWindow);
+                requestIdle(() => {
+                    isFrameRef.current = true;
+                    setLoaded(true);
+                });
+            });
+        }
+        else {
+            viewport.onMount(ref.current, globalThisPolyfill);
+            requestIdle(() => {
+                isFrameRef.current = false;
+                setLoaded(true);
+            });
+        }
+        viewportRef.current = viewport;
+        return () => {
+            viewport.onUnmount();
+        };
+    }, [viewport]);
+    return (React.createElement("div", { ...props, ref: ref, className: cls(prefix, props.className), style: {
+            opacity: !loaded ? 0 : 1,
+            overflow: isFrameRef.current ? 'hidden' : 'overlay',
+            ...props.style,
+        } },
+        props.children,
+        React.createElement(AuxToolWidget, null),
+        React.createElement(EmptyWidget, { dragTipsDirection: dragTipsDirection }, placeholder)));
+};

package/esm/containers/Workbench.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Workbench: React.FC<{
+    children?: React.ReactNode;
+}>;

package/esm/containers/Workbench.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { useWorkbench } from '../hooks';
+import { Workspace } from './Workspace';
+export const Workbench = observer((props) => {
+    var _a;
+    const workbench = useWorkbench();
+    return (React.createElement(Workspace, { id: (_a = workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.id }, props.children));
+});

package/esm/containers/Workspace.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IWorkspaceProps {
+    children?: React.ReactNode;
+    id?: string;
+    title?: string;
+    description?: string;
+}
+export declare const Workspace: React.FC<IWorkspaceProps>;

package/esm/containers/Workspace.js

@@ -0,0 +1,26 @@
+import React, { useMemo, useRef, Fragment } from 'react';
+import { useDesigner } from '../hooks';
+import { WorkspaceContext } from '../context';
+export const Workspace = ({ id, title, description, ...props }) => {
+    const oldId = useRef();
+    const designer = useDesigner();
+    const workspace = useMemo(() => {
+        if (!designer)
+            return;
+        if (oldId.current && oldId.current !== id) {
+            const old = designer.workbench.findWorkspaceById(oldId.current);
+            if (old)
+                old.viewport.detachEvents();
+        }
+        const workspace = {
+            id: id || 'index',
+            title,
+            description,
+        };
+        designer.workbench.ensureWorkspace(workspace);
+        oldId.current = workspace.id;
+        return workspace;
+    }, [id, designer]);
+    return (React.createElement(Fragment, null,
+        React.createElement(WorkspaceContext.Provider, { value: workspace }, props.children)));
+};

package/esm/containers/index.d.ts

@@ -0,0 +1,7 @@
+import './styles.less';
+export * from './Layout';
+export * from './Designer';
+export * from './Workspace';
+export * from './Simulator';
+export * from './Viewport';
+export * from './Workbench';

package/esm/containers/index.js

@@ -0,0 +1,7 @@
+import './styles.less';
+export * from './Layout';
+export * from './Designer';
+export * from './Workspace';
+export * from './Simulator';
+export * from './Viewport';
+export * from './Workbench';

package/esm/containers/styles.less

@@ -0,0 +1,19 @@
+@import '../variables.less';
+
+.@{prefix-cls}-viewport {
+  height: 100%;
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  outline: none;
+  box-sizing: border-box;
+  user-select: none;
+  overflow: overlay;
+
+  // & > * {
+  //   width: fit-content;
+  //   height: fit-content;
+  //   min-width: 100%;
+  //   min-height: 100%;
+  // }
+}

package/esm/context.d.ts

@@ -0,0 +1,7 @@
+import { TreeNode, Engine } from '@formily-design/core';
+import { IDesignerLayoutContext, IWorkspaceContext, IDesignerComponents } from './types';
+export declare const DesignerComponentsContext: import("react").Context<IDesignerComponents>;
+export declare const DesignerLayoutContext: import("react").Context<IDesignerLayoutContext>;
+export declare const DesignerEngineContext: import("react").Context<Engine>;
+export declare const TreeNodeContext: import("react").Context<TreeNode>;
+export declare const WorkspaceContext: import("react").Context<IWorkspaceContext>;

package/esm/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export const DesignerComponentsContext = createContext({});
+export const DesignerLayoutContext = createContext(null);
+export const DesignerEngineContext = createContext(null);
+export const TreeNodeContext = createContext(null);
+export const WorkspaceContext = createContext(null);

package/esm/hooks/index.d.ts

@@ -0,0 +1,25 @@
+export * from './useDesigner';
+export * from './useCursor';
+export * from './useScreen';
+export * from './useTree';
+export * from './useTheme';
+export * from './usePosition';
+export * from './useTreeNode';
+export * from './useHover';
+export * from './useViewport';
+export * from './useOutline';
+export * from './useSelection';
+export * from './useOperation';
+export * from './useWorkbench';
+export * from './useWorkspace';
+export * from './useLayout';
+export * from './useHistory';
+export * from './usePrefix';
+export * from './useRegistry';
+export * from './useValidNodeOffsetRect';
+export * from './useMoveHelper';
+export * from './useNodeIdProps';
+export * from './useTransformHelper';
+export * from './useSelectedNode';
+export * from './useSelected';
+export * from './useComponents';

package/esm/hooks/index.js

@@ -0,0 +1,25 @@
+export * from './useDesigner';
+export * from './useCursor';
+export * from './useScreen';
+export * from './useTree';
+export * from './useTheme';
+export * from './usePosition';
+export * from './useTreeNode';
+export * from './useHover';
+export * from './useViewport';
+export * from './useOutline';
+export * from './useSelection';
+export * from './useOperation';
+export * from './useWorkbench';
+export * from './useWorkspace';
+export * from './useLayout';
+export * from './useHistory';
+export * from './usePrefix';
+export * from './useRegistry';
+export * from './useValidNodeOffsetRect';
+export * from './useMoveHelper';
+export * from './useNodeIdProps';
+export * from './useTransformHelper';
+export * from './useSelectedNode';
+export * from './useSelected';
+export * from './useComponents';

package/esm/hooks/useComponents.d.ts

@@ -0,0 +1 @@
+export declare const useComponents: () => import("..").IDesignerComponents;

package/esm/hooks/useComponents.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { DesignerComponentsContext } from '../context';
+export const useComponents = () => useContext(DesignerComponentsContext);

package/esm/hooks/useCursor.d.ts

@@ -0,0 +1 @@
+export declare const useCursor: () => import("packages/core/lib").Cursor;

package/esm/hooks/useCursor.js

@@ -0,0 +1,5 @@
+import { useDesigner } from './useDesigner';
+export const useCursor = () => {
+    const designer = useDesigner();
+    return designer.cursor;
+};

package/esm/hooks/useDesigner.d.ts

@@ -0,0 +1,5 @@
+import { Engine } from '@formily-design/core';
+export interface IEffects {
+    (engine: Engine): void;
+}
+export declare const useDesigner: (effects?: IEffects) => Engine;

package/esm/hooks/useDesigner.js

@@ -0,0 +1,13 @@
+import { useContext, useEffect } from 'react';
+import { DesignerEngineContext } from '../context';
+import { isFn, globalThisPolyfill } from '@formily-design/shared';
+export const useDesigner = (effects) => {
+    const designer = globalThisPolyfill['__DESIGNABLE_ENGINE__'] ||
+        useContext(DesignerEngineContext);
+    useEffect(() => {
+        if (isFn(effects)) {
+            return effects(designer);
+        }
+    }, []);
+    return designer;
+};

package/esm/hooks/useHistory.d.ts

@@ -0,0 +1 @@
+export declare const useHistory: (workspaceId?: string) => import("packages/core/lib").History<import("packages/core/lib").Workspace>;

package/esm/hooks/useHistory.js

@@ -0,0 +1,5 @@
+import { useWorkspace } from './useWorkspace';
+export const useHistory = (workspaceId) => {
+    const workspace = useWorkspace(workspaceId);
+    return workspace === null || workspace === void 0 ? void 0 : workspace.history;
+};

package/esm/hooks/useHover.d.ts

@@ -0,0 +1 @@
+export declare const useHover: (workspaceId?: string) => import("packages/core/lib/models/Hover").Hover;

package/esm/hooks/useHover.js

@@ -0,0 +1,5 @@
+import { useOperation } from './useOperation';
+export const useHover = (workspaceId) => {
+    const operation = useOperation(workspaceId);
+    return operation === null || operation === void 0 ? void 0 : operation.hover;
+};

package/esm/hooks/useLayout.d.ts

@@ -0,0 +1,2 @@
+import { IDesignerLayoutContext } from '../types';
+export declare const useLayout: () => IDesignerLayoutContext;

package/esm/hooks/useLayout.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { DesignerLayoutContext } from '../context';
+import { globalThisPolyfill } from '@formily-design/shared';
+export const useLayout = () => {
+    return (globalThisPolyfill['__DESIGNABLE_LAYOUT__'] ||
+        useContext(DesignerLayoutContext));
+};

package/esm/hooks/useMoveHelper.d.ts

@@ -0,0 +1 @@
+export declare const useMoveHelper: (workspaceId?: string) => import("packages/core/lib").MoveHelper;

package/esm/hooks/useMoveHelper.js

@@ -0,0 +1,5 @@
+import { useOperation } from './useOperation';
+export const useMoveHelper = (workspaceId) => {
+    const operation = useOperation(workspaceId);
+    return operation === null || operation === void 0 ? void 0 : operation.moveHelper;
+};

package/esm/hooks/useNodeIdProps.d.ts

@@ -0,0 +1,4 @@
+import { TreeNode } from '@formily-design/core';
+export declare const useNodeIdProps: (node?: TreeNode) => {
+    [x: string]: string;
+};

package/esm/hooks/useNodeIdProps.js

@@ -0,0 +1,9 @@
+import { useDesigner } from './useDesigner';
+import { useTreeNode } from './useTreeNode';
+export const useNodeIdProps = (node) => {
+    const target = useTreeNode();
+    const designer = useDesigner();
+    return {
+        [designer.props.nodeIdAttrName]: node ? node.id : target.id,
+    };
+};

package/esm/hooks/useOperation.d.ts

@@ -0,0 +1 @@
+export declare const useOperation: (workspaceId?: string) => import("packages/core/lib").Operation;

package/esm/hooks/useOperation.js

@@ -0,0 +1,5 @@
+import { useWorkspace } from './useWorkspace';
+export const useOperation = (workspaceId) => {
+    const workspace = useWorkspace(workspaceId);
+    return workspace === null || workspace === void 0 ? void 0 : workspace.operation;
+};

package/esm/hooks/useOutline.d.ts

@@ -0,0 +1 @@
+export declare const useOutline: (workspaceId?: string) => import("packages/core/lib").Viewport;

package/esm/hooks/useOutline.js

@@ -0,0 +1,5 @@
+import { useWorkspace } from './useWorkspace';
+export const useOutline = (workspaceId) => {
+    const workspace = useWorkspace(workspaceId);
+    return workspace === null || workspace === void 0 ? void 0 : workspace.outline;
+};

package/esm/hooks/usePosition.d.ts

@@ -0,0 +1 @@
+export declare const usePosition: () => "fixed" | "absolute" | "relative";

package/esm/hooks/usePosition.js

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout';
+export const usePosition = () => {
+    var _a;
+    return (_a = useLayout()) === null || _a === void 0 ? void 0 : _a.position;
+};

package/esm/hooks/usePrefix.d.ts

@@ -0,0 +1 @@
+export declare const usePrefix: (after?: string) => string;

package/esm/hooks/usePrefix.js

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout';
+export const usePrefix = (after = '') => {
+    var _a;
+    return ((_a = useLayout()) === null || _a === void 0 ? void 0 : _a.prefixCls) + after;
+};

package/esm/hooks/useRegistry.d.ts

@@ -0,0 +1,2 @@
+import { IDesignerRegistry } from '@formily-design/core';
+export declare const useRegistry: () => IDesignerRegistry;

package/esm/hooks/useRegistry.js

@@ -0,0 +1,5 @@
+import { GlobalRegistry } from '@formily-design/core';
+import { globalThisPolyfill } from '@formily-design/shared';
+export const useRegistry = () => {
+    return globalThisPolyfill['__DESIGNER_REGISTRY__'] || GlobalRegistry;
+};

package/esm/hooks/useScreen.d.ts

@@ -0,0 +1 @@
+export declare const useScreen: () => import("packages/core/lib").Screen;

package/esm/hooks/useScreen.js

@@ -0,0 +1,4 @@
+import { useDesigner } from './useDesigner';
+export const useScreen = () => {
+    return useDesigner().screen;
+};

package/esm/hooks/useSelected.d.ts

@@ -0,0 +1 @@
+export declare const useSelected: (workspaceId?: string) => string[];

package/esm/hooks/useSelected.js

@@ -0,0 +1,5 @@
+import { useSelection } from './useSelection';
+export const useSelected = (workspaceId) => {
+    const selection = useSelection(workspaceId);
+    return (selection === null || selection === void 0 ? void 0 : selection.selected) || [];
+};

package/esm/hooks/useSelectedNode.d.ts

@@ -0,0 +1,6 @@
+export declare const useSelectedNode: (workspaceId?: string) => import("packages/core/lib").TreeNode;
+/**
+ * @deprecated
+ * please use useSelectedNode
+ */
+export declare const useCurrentNode: (workspaceId?: string) => import("packages/core/lib").TreeNode;

package/esm/hooks/useSelectedNode.js

@@ -0,0 +1,13 @@
+import { useSelected } from './useSelected';
+import { useTree } from './useTree';
+export const useSelectedNode = (workspaceId) => {
+    var _a;
+    const selected = useSelected(workspaceId);
+    const tree = useTree(workspaceId);
+    return (_a = tree === null || tree === void 0 ? void 0 : tree.findById) === null || _a === void 0 ? void 0 : _a.call(tree, selected[0]);
+};
+/**
+ * @deprecated
+ * please use useSelectedNode
+ */
+export const useCurrentNode = useSelectedNode;

package/esm/hooks/useSelection.d.ts

@@ -0,0 +1 @@
+export declare const useSelection: (workspaceId?: string) => import("packages/core/lib").Selection;

package/esm/hooks/useSelection.js

@@ -0,0 +1,5 @@
+import { useOperation } from './useOperation';
+export const useSelection = (workspaceId) => {
+    const operation = useOperation(workspaceId);
+    return operation === null || operation === void 0 ? void 0 : operation.selection;
+};

package/esm/hooks/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => (string & {}) | "dark" | "light";

package/esm/hooks/useTheme.js

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout';
+export const useTheme = () => {
+    var _a;
+    return (_a = useLayout()) === null || _a === void 0 ? void 0 : _a.theme;
+};

package/esm/hooks/useTransformHelper.d.ts

@@ -0,0 +1 @@
+export declare const useTransformHelper: (workspaceId?: string) => import("packages/core/lib/models/TransformHelper").TransformHelper;

package/esm/hooks/useTransformHelper.js

@@ -0,0 +1,5 @@
+import { useOperation } from './useOperation';
+export const useTransformHelper = (workspaceId) => {
+    const operation = useOperation(workspaceId);
+    return operation === null || operation === void 0 ? void 0 : operation.transformHelper;
+};

package/esm/hooks/useTree.d.ts

@@ -0,0 +1 @@
+export declare const useTree: (workspaceId?: string) => import("packages/core/lib").TreeNode;

package/esm/hooks/useTree.js

@@ -0,0 +1,5 @@
+import { useOperation } from './useOperation';
+export const useTree = (workspaceId) => {
+    const operation = useOperation(workspaceId);
+    return operation === null || operation === void 0 ? void 0 : operation.tree;
+};

package/esm/hooks/useTreeNode.d.ts

@@ -0,0 +1 @@
+export declare const useTreeNode: () => import("packages/core/lib").TreeNode;

package/esm/hooks/useTreeNode.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { TreeNodeContext } from '../context';
+export const useTreeNode = () => {
+    return useContext(TreeNodeContext);
+};

package/esm/hooks/useValidNodeOffsetRect.d.ts

@@ -0,0 +1,2 @@
+import { TreeNode } from '@formily-design/core';
+export declare const useValidNodeOffsetRect: (node: TreeNode) => any;

package/esm/hooks/useValidNodeOffsetRect.js

@@ -0,0 +1,37 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { CursorStatus, CursorDragType } from '@formily-design/core';
+import { LayoutObserver } from '@formily-design/shared';
+import { useViewport } from './useViewport';
+import { useDesigner } from './useDesigner';
+const isEqualRect = (rect1, rect2) => {
+    return ((rect1 === null || rect1 === void 0 ? void 0 : rect1.x) === (rect2 === null || rect2 === void 0 ? void 0 : rect2.x) &&
+        (rect1 === null || rect1 === void 0 ? void 0 : rect1.y) === (rect2 === null || rect2 === void 0 ? void 0 : rect2.y) &&
+        (rect1 === null || rect1 === void 0 ? void 0 : rect1.width) === (rect2 === null || rect2 === void 0 ? void 0 : rect2.width) &&
+        (rect1 === null || rect1 === void 0 ? void 0 : rect1.height) === (rect2 === null || rect2 === void 0 ? void 0 : rect2.height));
+};
+export const useValidNodeOffsetRect = (node) => {
+    const engine = useDesigner();
+    const viewport = useViewport();
+    const [, forceUpdate] = useState(null);
+    const rectRef = useMemo(() => ({ current: viewport.getValidNodeOffsetRect(node) }), [viewport]);
+    const element = viewport.findElementById(node === null || node === void 0 ? void 0 : node.id);
+    const compute = useCallback(() => {
+        if (engine.cursor.status !== CursorStatus.Normal &&
+            engine.cursor.dragType === CursorDragType.Move)
+            return;
+        const nextRect = viewport.getValidNodeOffsetRect(node);
+        if (!isEqualRect(rectRef.current, nextRect) && nextRect) {
+            rectRef.current = nextRect;
+            forceUpdate([]);
+        }
+    }, [viewport, node]);
+    useEffect(() => {
+        const layoutObserver = new LayoutObserver(compute);
+        if (element)
+            layoutObserver.observe(element);
+        return () => {
+            layoutObserver.disconnect();
+        };
+    }, [node, viewport, element]);
+    return rectRef.current;
+};

package/esm/hooks/useViewport.d.ts

@@ -0,0 +1 @@
+export declare const useViewport: (workspaceId?: string) => import("packages/core/lib").Viewport;

package/esm/hooks/useViewport.js

@@ -0,0 +1,5 @@
+import { useWorkspace } from './useWorkspace';
+export const useViewport = (workspaceId) => {
+    const workspace = useWorkspace(workspaceId);
+    return workspace === null || workspace === void 0 ? void 0 : workspace.viewport;
+};