Skip to content

Commit 64dd540

Browse files
zboMazboMa
committed
Merge branch 'feat/input'
2 parents 92af6b4 + f4ab840 commit 64dd540

File tree

34 files changed

+231
-190
lines changed

34 files changed

+231
-190
lines changed

‎docs/docs/api/setters.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ registerSetter(
7373

7474
```typescript
7575
import { setters, skeleton } from '@felce/lowcode-engine';
76-
import { setterMap, pluginMap } from '@alilc/lowcode-engine-ext';
76+
import { setterMap, pluginMap } from '@felce/lowcode-engine-ext';
7777
import { IPublicModelPluginContext } from '@felce/lowcode-types';
7878

7979
const SetterRegistry = (ctx: IPublicModelPluginContext) => {

‎docs/docs/guide/create/useEditor.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ sidebar_position: 0
1313
1. 确保本地安装了 Node.js 和 npm，如果没有，[您可以通过 nvm 进行快捷的安装](https://github.com/nvm-sh/nvm)
1414
2. 确保为 npm [设置了可以访问的 npm 源，保证安装过程无网络问题](https://npmmirror.com/)
1515
3. 安装官方命令行工具
16+
1617
```bash
1718
npm install -g @alilc/create-element@latest
1819
```
20+
1921
4. 通过命令行工具创建
2022

2123
```bash
@@ -31,17 +33,23 @@ sidebar_position: 0
3133
> 注 @alilc/create-element 版本需 >= 1.0.4，若看不到`编辑器`选项，请重新执行步骤 3
3234
3335
5. 进入创建后的目录
36+
3437
```bash
3538
cd editor-project-name
3639
```
40+
3741
6. 安装依赖
42+
3843
```bash
3944
npm install
4045
```
46+
4147
7. 安装依赖成功后，启动项目 (注意观察上一步的输出，如有 error 等失败信息，请先进行排查)
48+
4249
```bash
4350
npm start
4451
```
52+
4553
执行后如果看到这个界面，说明项目启动成功。您可以继续看后续章节了。本章节后续内容均为高级配置方式。
4654

4755
![image.png](https://img.alicdn.com/imgextra/i4/O1CN013qJVoV1OAcFNKFrIQ_!!6000000001665-2-tps-3060-1634.png)
@@ -60,7 +68,7 @@ sidebar_position: 0
6068
<!-- 低代码引擎的页面框架样式 -->
6169
<link
6270
rel="stylesheet"
63-
href="https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/1.0.18/dist/css/engine-core.css"
71+
href="https://unpkg.com/@felce/lowcode-engine@1.4.0/dist/css/engine-core.css"
6472
/>
6573
<!-- Fusion Next 控件样式 -->
6674
<link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css" />
@@ -72,7 +80,7 @@ sidebar_position: 0
7280
<!-- 低代码引擎官方扩展的样式 -->
7381
<link
7482
rel="stylesheet"
75-
href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css"
83+
href="https://unpkg.com/@felce/lowcode-engine-ext@1.1.0/dist/css/engine-ext.css"
7684
/>
7785

7886
<!-- React，可替换为 production 包 -->
@@ -91,18 +99,18 @@ sidebar_position: 0
9199
<!-- 低代码引擎的主包 -->
92100
<script
93101
crossorigin="anonymous"
94-
src="https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/1.0.18/dist/js/engine-core.js"
102+
src="https://unpkg.com/@felce/lowcode-engine@1.4.0/dist/js/engine-core.js"
95103
></script>
96104
<!-- 低代码引擎官方扩展的主包 -->
97105
<script
98106
crossorigin="anonymous"
99-
src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"
107+
src="https://unpkg.com/@felce/lowcode-engine-ext@1.1.0/dist/js/engine-ext.js"
100108
></script>
101109
```
102110

103-
> 注：如果 unpkg 的服务比较缓慢，您可以使用官方 CDN 来获得确定版本的低代码引擎，如对于引擎的 1.0.18 版本，可用以下官方 CDN 替代
111+
> 注：如果 unpkg 的服务比较缓慢，您可以使用官方 cnpm CDN 来获得确定版本的低代码引擎，如对于引擎的 1.4.0 版本，可用以下cnpm CDN 替代
104112
>
105-
> - [https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/1.0.18/dist/js/engine-core.js](https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/1.0.18/dist/js/engine-core.js)
113+
> - [https://registry.npmmirror.com/@felce/lowcode-engine/1.4.0/files/dist/js/engine-core.js](https://registry.npmmirror.com/@felce/lowcode-engine/1.4.0/files/dist/js/engine-core.js)
106114
107115
### 配置打包
108116

@@ -116,7 +124,7 @@ sidebar_position: 0
116124
"prop-types": "var window.PropTypes",
117125
"@alifd/next": "var window.Next",
118126
"@felce/lowcode-engine": "var window.AliLowCodeEngine",
119-
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
127+
"@felce/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
120128
"moment": "var window.moment",
121129
"lodash": "var window._"
122130
}

‎docs/docs/guide/design/setter.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ sidebar_position: 6
1818

1919
## npm 包与仓库信息
2020

21-
- npm 包：@alilc/lowcode-engine-ext
21+
- npm 包：@felce/lowcode-engine-ext
2222
- 仓库：[https://github.com/fe-lce/lowcode-engine-ext](https://github.com/fe-lce/lowcode-engine-ext)
2323

2424
## 设置器模块原理

‎docs/docs/participate/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@ npm install && npm run setup
3434
{
3535
"proxy": [
3636
[
37-
"https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/(.*)/dist/js/engine-core.js",
37+
"https://registry.npmmirror.com/@felce/lowcode-engine/(.*)/dist/js/engine-core.js",
3838
"http://localhost:5555/js/AliLowCodeEngine.js"
3939
],
4040
[
41-
"https://uipaas-assets.com/prod/npm/@felce/lowcode-engine/(.*)/dist/css/engine-core.css",
41+
"https://registry.npmmirror.com/@felce/lowcode-engine/(.*)/dist/css/engine-core.css",
4242
"http://localhost:5555/css/AliLowCodeEngine.css"
4343
],
4444
[
45-
"https?://uipaas-assets.com/prod/npm/@felce/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
45+
"https://registry.npmmirror.com/@felce/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
4646
"http://localhost:5555/js/ReactSimulatorRenderer.js"
4747
],
4848
[
49-
"https?://uipaas-assets.com/prod/npm/@felce/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
49+
"https://registry.npmmirror.com/@felce/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
5050
"http://localhost:5555/css/ReactSimulatorRenderer.css"
5151
]
5252
]

‎packages/designer/src/context-menu-actions.ts‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import './context-menu-actions.scss';
1919
export interface IContextMenuActions {
2020
actions: IPublicTypeContextMenuAction[];
2121

22-
adjustMenuLayoutFn: (actions: IPublicTypeContextMenuItem[]) => IPublicTypeContextMenuItem[];
22+
// adjustMenuLayoutFn: (actions: IPublicTypeContextMenuItem[]) => IPublicTypeContextMenuItem[];
2323

2424
addMenuAction: IPublicApiMaterial['addContextMenuOption'];
2525

@@ -57,7 +57,11 @@ export class GlobalContextMenuActions {
5757
event.preventDefault();
5858

5959
const actions: IPublicTypeContextMenuAction[] = [];
60-
let contextMenu: ContextMenuActions = this.contextMenuActionsMap.values().next().value;
60+
let contextMenu: ContextMenuActions | undefined = this.contextMenuActionsMap
61+
.values()
62+
.next().value;
63+
if (!contextMenu) return;
64+
6165
this.contextMenuActionsMap.forEach((contextMenu) => {
6266
actions.push(...contextMenu.actions);
6367
});
@@ -90,12 +94,17 @@ export class GlobalContextMenuActions {
9094
pluginContext,
9195
});
9296

93-
const target = event.target;
97+
const target = event.target as HTMLElement;
98+
99+
if (!target) {
100+
console.warn('context menu target is null');
101+
return;
102+
}
94103

95-
const { top, left } = target?.getBoundingClientRect();
104+
const { top, left } = target.getBoundingClientRect();
96105

97106
const menuInstance = Menu.create({
98-
target: event.target,
107+
target: target,
99108
offset: [event.clientX - left, event.clientY - top],
100109
children: menuNode,
101110
className: 'engine-context-menu',
@@ -177,7 +186,7 @@ export class ContextMenuActions implements IContextMenuActions {
177186
) as IPublicModelPluginContext;
178187

179188
const menus: IPublicTypeContextMenuItem[] = parseContextMenuProperties(actions, {
180-
nodes: nodes.map((d) => designer.shellModelFactory.createNode(d)!),
189+
nodes: nodes.map((d) => designer.shellModelFactory!.createNode(d)!),
181190
destroy,
182191
event,
183192
pluginContext,
@@ -191,7 +200,7 @@ export class ContextMenuActions implements IContextMenuActions {
191200

192201
const menuNode = parseContextMenuAsReactNode(layoutMenu, {
193202
destroy,
194-
nodes: nodes.map((d) => designer.shellModelFactory.createNode(d)!),
203+
nodes: nodes.map((d) => designer.shellModelFactory!.createNode(d)!),
195204
pluginContext,
196205
});
197206

@@ -210,10 +219,10 @@ export class ContextMenuActions implements IContextMenuActions {
210219
originalEvent.stopPropagation();
211220
originalEvent.preventDefault();
212221
// 如果右键的节点不在 当前选中的节点中，选中该节点
213-
if (!designer.currentSelection.has(node.id)) {
214-
designer.currentSelection.select(node.id);
222+
if (!designer.currentSelection!.has(node.id)) {
223+
designer.currentSelection!.select(node.id);
215224
}
216-
const nodes = designer.currentSelection.getNodes();
225+
const nodes = designer.currentSelection!.getNodes();
217226
this.handleContextMenu(nodes, originalEvent);
218227
},
219228
),

‎packages/designer/src/designer/active-tracker.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import { obx, IEventBus, createModuleEventBus } from '@felce/lowcode-editor-core
33
import { IPublicTypeActiveTarget, IPublicModelActiveTracker } from '@felce/lowcode-types';
44
import { isNode } from '@felce/lowcode-utils';
55

6-
export interface IActiveTracker extends Omit<IPublicModelActiveTracker, 'track' | 'onChange'> {
7-
_target: ActiveTarget | INode;
8-
6+
export interface IActiveTracker
7+
extends Omit<IPublicModelActiveTracker, 'track' | 'onChange' | 'target'> {
98
track(originalTarget: ActiveTarget | INode): void;
109

1110
onChange(fn: (target: ActiveTarget) => void): () => void;
@@ -16,7 +15,7 @@ export interface ActiveTarget extends Omit<IPublicTypeActiveTarget, 'node'> {
1615
}
1716

1817
export class ActiveTracker implements IActiveTracker {
19-
@obx.ref private _target?: ActiveTarget | INode;
18+
@obx.ref private _target: ActiveTarget | INode;
2019

2120
private emitter: IEventBus = createModuleEventBus('ActiveTracker');
2221

‎packages/designer/src/designer/designer.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { BuiltinSimulatorProps } from './../builtin-simulator/host';
12
import { ComponentType } from 'react';
23
import {
34
obx,
@@ -55,13 +56,13 @@ const logger = new Logger({ level: 'warn', bizName: 'designer' });
5556
export interface DesignerProps {
5657
[key: string]: any;
5758
editor: IPublicModelEditor;
58-
shellModelFactory: IShellModelFactory;
59+
shellModelFactory?: IShellModelFactory;
5960
className?: string;
6061
style?: object;
6162
defaultSchema?: IPublicTypeProjectSchema;
6263
hotkeys?: object;
6364
viewName?: string;
64-
simulatorProps?: Record<string, any> | ((document: DocumentModel) => object);
65+
simulatorProps?: ((project: Project) => BuiltinSimulatorProps) | BuiltinSimulatorProps;
6566
simulatorComponent?: ComponentType<any>;
6667
dragGhostComponent?: ComponentType<any>;
6768
suspensed?: boolean;
@@ -71,13 +72,13 @@ export interface DesignerProps {
7172
onDragstart?: (e: IPublicModelLocateEvent) => void;
7273
onDrag?: (e: IPublicModelLocateEvent) => void;
7374
onDragend?: (
74-
e: { dragObject: IPublicModelDragObject; copy: boolean },
75+
e: { dragObject: IPublicModelDragObject<INode>; copy?: boolean },
7576
loc?: DropLocation,
7677
) => void;
7778
}
7879

7980
export interface IDesigner {
80-
readonly shellModelFactory: IShellModelFactory;
81+
readonly shellModelFactory?: IShellModelFactory;
8182

8283
viewName: string | undefined;
8384

@@ -89,15 +90,15 @@ export interface IDesigner {
8990

9091
get componentActions(): ComponentActions;
9192

92-
get contextMenuActions(): ContextMenuActions;
93+
get contextMenuActions(): IContextMenuActions;
9394

9495
get editor(): IPublicModelEditor;
9596

9697
get detecting(): Detecting;
9798

9899
get simulatorComponent(): ComponentType<any> | undefined;
99100

100-
get currentSelection(): ISelection;
101+
get currentSelection(): ISelection | undefined;
101102

102103
createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller;
103104

@@ -162,7 +163,7 @@ export class Designer implements IDesigner {
162163

163164
readonly bemToolsManager = new BemToolsManager(this);
164165

165-
readonly shellModelFactory: IShellModelFactory;
166+
readonly shellModelFactory?: IShellModelFactory;
166167

167168
private _dropLocation?: DropLocation;
168169

@@ -448,9 +449,10 @@ export class Designer implements IDesigner {
448449
this._simulatorComponent = props.simulatorComponent;
449450
}
450451
if (props.simulatorProps !== this.props.simulatorProps) {
452+
const oldDesignMode = this.simulatorProps?.designMode;
451453
this._simulatorProps = props.simulatorProps;
452454
// 重新 setupSelection
453-
if (props.simulatorProps?.designMode !== this.props.simulatorProps?.designMode) {
455+
if (this.simulatorProps?.designMode !== oldDesignMode) {
454456
this.setupSelection();
455457
}
456458
}

‎packages/designer/src/designer/drag-ghost/index.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { Component, ReactElement } from 'react';
22
import { observer, obx, Title, makeObservable } from '@felce/lowcode-editor-core';
33
import { Designer } from '../designer';
4-
import { isDragNodeObject } from '../dragon';
54
import { isSimulatorHost } from '../../simulator';
65
import './ghost.less';
76
import {
87
IPublicTypeI18nData,
98
IPublicTypeNodeSchema,
109
IPublicModelDragObject,
1110
} from '@felce/lowcode-types';
11+
import { isDragNodeObject } from '@felce/lowcode-utils';
1212

1313
type offBinding = () => any;
1414

1515
@observer
1616
export default class DragGhost extends Component<{ designer: Designer }> {
1717
private dispose: offBinding[] = [];
1818

19-
@obx.ref private titles: (string | IPublicTypeI18nData | ReactElement)[] | null = null;
19+
@obx.ref private titles: (string | IPublicTypeI18nData | ReactElement | null)[] | null = null;
2020

2121
@obx.ref private x = 0;
2222

@@ -58,17 +58,19 @@ export default class DragGhost extends Component<{ designer: Designer }> {
5858
];
5959
}
6060

61-
getTitles(dragObject: IPublicModelDragObject) {
61+
getTitles(dragObject: IPublicModelDragObject | null) {
62+
if (!dragObject) return null;
63+
6264
if (isDragNodeObject(dragObject)) {
63-
return dragObject.nodes.map((node) => node.title);
65+
return dragObject.nodes.map((node) => node?.title || null);
6466
}
6567

6668
const dataList = Array.isArray(dragObject.data) ? dragObject.data : [dragObject.data];
6769

68-
return dataList.map(
69-
(item: IPublicTypeNodeSchema, i) =>
70-
this.props.designer.getComponentMeta(item.componentName).title,
71-
);
70+
return dataList.map((item: IPublicTypeNodeSchema | null) => {
71+
if (!item) return null;
72+
return this.props.designer.getComponentMeta(item.componentName).title;
73+
});
7274
}
7375

7476
componentWillUnmount() {

0 commit comments

Comments
 (0)