Designable 表单设计器

Github https://github.com/alibaba/designable
在线表单设计器 https://designable-antd.formilyjs.org
designable 在线案例 https://designable.netlify.app

• @designable/core
• @designable/react
• @designable/react-settings-form
• @designable/shared
• @designable/formily-antd
• @designable/formily-setters
• @designable/formily-transformer

https://juejin.cn/post/7080512202314088478

designable 和 formily的区别

• designable 可视化搭建配置，只专注于设计器引擎
  • designable 不负责包装产品，定位更像一个 library，尽可能的优化设计器的各种设计能力
  • 上层产品如何封装，是用户自己发挥的
• formily 表单引擎
  • jsx
  • json schema
  • jsx & schema，schema 与 field 并存
• designable 将 formily的 JSONSchema可视化，可以解析 designable拖拽生成的 JSON
• lowcode-engine 是打包型的产品，designable 是设计器引擎，聚焦点不一样

designable 的核心理念是将设计器搭建变成模块化组合，一切可替换，

• designable 本身是不会提供任何插槽 Plugin 相关的 API
• 如果用户对组件不满意，可以直接替换组件，从而实现最大化灵活定制
• designable二次开发表单设计器好用的原型；但没有任何说明文档，基于源码，而不是规范，你要去案例，和源码里面找相关的方法和属性
• 设计器内部不会对任何业务模块的依赖，开发自定义组件是表单设计器的核心工作

antd5

designable目前只支持 antd4.x，不支持 5x

• 基础框架用 umi4x，需要安装 antd4，不要安装 antd5
• antd5 less报错，@import ‘~antd/lib/style/themes/default.less’;
• antd4x https://antd.formilyjs.org/zh-CN/components
• antd5x https://antd5.formilyjs.org/zh-CN/components

只是 formily/antd 版本不一样

# antd4x 依赖 moment
yarn add antd moment
yarn add @formily/core @formily/react @formily/antd
# antd5x 依赖 dayjs
yarn add antd dayjs
yarn add @formily/core @formily/react @formily/antd-v5

@designable/core

63个方法

[
  "AddWorkspaceEvent",
  "AppendNodeEvent",
  "CloneNodeEvent",
  "ClosestPosition",
  "createBehavior",
  "createDesigner",
  "createLocales",
  "createResource",
  "Cursor",
  "CursorStatus",
  "CursorType",
  "DragMoveEvent",
  "DragNodeEvent",
  "Dragon",
  "DragStartEvent",
  "DragStopEvent",
  "DropNodeEvent",
  "Engine",
  "FromNodeEvent",
  "GlobalRegistry",
  "History",
  "HistoryGotoEvent",
  "HistoryPushEvent",
  "HistoryRedoEvent",
  "HistoryUndoEvent",
  "HoverNodeEvent",
  "InsertAfterEvent",
  "InsertBeforeEvent",
  "InsertChildrenEvent",
  "isBehavior",
  "isBehaviorHost",
  "isBehaviorList",
  "isResource",
  "isResourceHost",
  "isResourceList",
  "Keyboard",
  "KeyCode",
  "KeyDownEvent",
  "KeyUpEvent",
  "MouseClickEvent",
  "MouseDoubleClickEvent",
  "MouseMoveEvent",
  "Operation",
  "PrependNodeEvent",
  "RemoveNodeEvent",
  "RemoveWorkspaceEvent",
  "Screen",
  "ScreenStatus",
  "ScreenType",
  "Selection",
  "SelectNodeEvent",
  "Shortcut",
  "SwitchWorkspaceEvent",
  "TreeNode",
  "UnSelectNodeEvent",
  "UpdateChildrenEvent",
  "UpdateNodePropsEvent",
  "Viewport",
  "ViewportResizeEvent",
  "ViewportScrollEvent",
  "Workbench",
  "Workspace",
  "WrapNodeEvent"
]

@designable/react

63个方法

[
  "AuxToolWidget",
  "ComponentTreeWidget",
  "CompositePanel",
  "Designer",
  "DesignerComponentsContext",
  "DesignerEngineContext",
  "DesignerLayoutContext",
  "DesignerToolsWidget",
  "DroppableWidget",
  "EmptyWidget",
  "GhostWidget",
  "HistoryWidget",
  "IconWidget",
  "Layout",
  "MobileSimulator",
  "NodeActionsWidget",
  "NodePathWidget",
  "NodeTitleWidget",
  "OutlineTreeWidget",
  "PCSimulator",
  "ResourceWidget",
  "ResponsiveSimulator",
  "SettingsPanel",
  "Simulator",
  "StudioPanel",
  "TextWidget",
  "ToolbarPanel",
  "TreeNodeContext",
  "TreeNodeWidget",
  "useComponents",
  "useCurrentNode",
  "useCurrentNodeSelected",
  "useCursor",
  "useDesigner",
  "useDragon",
  "useHistory",
  "useHover",
  "useLayout",
  "useNodeIdProps",
  "useOperation",
  "useOutline",
  "useOutlineDragon",
  "usePosition",
  "usePrefix",
  "useRegistry",
  "useScreen",
  "useSelected",
  "useSelection",
  "useTheme",
  "useTree",
  "useTreeNode",
  "useValidNodeOffsetRect",
  "useViewport",
  "useWorkbench",
  "useWorkspace",
  "ViewPanel",
  "Viewport",
  "ViewportPanel",
  "ViewToolsWidget",
  "Workbench",
  "Workspace",
  "WorkspaceContext",
  "WorkspacePanel"
]

@designable/shared

[
  "calcAutoScrollBasicInfo",
  "calcBoundingRect",
  "calcDistanceOfPointToRect",
  "calcDistancePointToEdge",
  "calcElementLayout",
  "calcElementOuterWidth",
  "calcQuadrantOfPointToRect",
  "calcRectByStartEndPoint",
  "calcRelativeOfPointToRect",
  "calcSpeedFactor",
  "cancelIdle",
  "clone",
  "compose",
  "createUniformSpeedAnimation",
  "each",
  "Event",
  "EventDriver",
  "every",
  "find",
  "findIndex",
  "flat",
  "getKeyCodeFromEvent",
  "getRectPoints",
  "getType",
  "globalThisPolyfill",
  "includes",
  "includesWith",
  "instOf",
  "isArr",
  "isBool",
  "isCrossRectInRect",
  "isFn",
  "isHTMLElement",
  "isNearAfter",
  "isNum",
  "isObj",
  "isPlainObj",
  "isPointInRect",
  "isRectInRect",
  "isRegExp",
  "isStr",
  "isValid",
  "isWindow",
  "KeyCode",
  "LRUMap",
  "map",
  "Point",
  "RectQuadrant",
  "reduce",
  "requestIdle",
  "scrollAnimate",
  "shallowClone",
  "some",
  "Subscribable",
  "toArr",
  "uid",
  "updateScrollValue"
]

@designable/react-settings-form

26个方法

[
  "BackgroundImageInput",
  "BackgroundSizeInput",
  "BackgroundStyleSetter",
  "BorderRadiusStyleSetter",
  "BorderStyleSetter",
  "BoxShadowStyleSetter",
  "BoxStyleSetter",
  "CollapseItem",
  "ColorInput",
  "CornerInput",
  "createPolyInput",
  "DisplayStyleSetter",
  "DrawerSetter",
  "FlexStyleSetter",
  "FoldItem",
  "FontStyleSetter",
  "getNpmCDNRegistry",
  "ImageInput",
  "InputItems",
  "MonacoInput",
  "PositionInput",
  "SchemaField",
  "setNpmCDNRegistry",
  "SettingsForm",
  "SizeInput",
  "ValueInput"
]

@designable/formily-antd

32个方法

[
  "AllLocales",
  "AllSchemas",
  "ArrayCards",
  "ArrayTable",
  "Card",
  "Cascader",
  "Checkbox",
  "createComponentSchema",
  "createFieldSchema",
  "createVoidFieldSchema",
  "DatePicker",
  "Field",
  "Form",
  "FormCollapse",
  "FormGrid",
  "FormLayout",
  "FormTab",
  "Input",
  "NumberPicker",
  "ObjectContainer",
  "Password",
  "Radio",
  "Rate",
  "Select",
  "Slider",
  "Space",
  "Switch",
  "Text",
  "TimePicker",
  "Transfer",
  "TreeSelect",
  "Upload"
]

@designable/formily-transformer

[
  "transformToSchema",
  "transformToTreeNode"
]

@designable/formily-setters

[
  "DataSourceSetter",
  "ReactionsSetter",
  "ValidatorSetter"
]