Skip to content

Commit 12bd0db

Browse files
towersxutowersxu
committed
fix: show anchors when extend baseNode
1 parent 2feb7ce commit 12bd0db

File tree

20 files changed

+134
-126
lines changed

20 files changed

+134
-126
lines changed

‎packages/core/index.html

+73-73
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
view: UserNode,
144144
model: UserModel,
145145
};
146-
});
146+
}, false);
147147
lf.register('combine', ({ BaseNode, BaseNodeModel, h }) => {
148148
class CombineNode extends BaseNode {
149149
getShape() {
@@ -184,7 +184,7 @@
184184
view: CombineNode,
185185
model: CombineModel,
186186
};
187-
});
187+
}, false);
188188
lf.register('star', ({ PolygonNode, PolygonNodeModel, h, }) => {
189189
class StarNode extends PolygonNode { }
190190
class StarModel extends PolygonNodeModel {
@@ -204,7 +204,7 @@
204204
view: StarNode,
205205
model: StarModel,
206206
};
207-
});
207+
}, false);
208208
lf.register('connection', ({LineEdge, LineEdgeModel})=>{
209209
class Connection extends LineEdge {
210210
getTextStyle() {
@@ -223,7 +223,7 @@
223223
view: Connection,
224224
model: ConnnectionModel,
225225
}
226-
});
226+
}, false);
227227
lf.register('square', (RegisterParam) => {
228228
// h 方法由 Logic Flow 提供
229229
const { RectNode, RectNodeModel, h } = RegisterParam;
@@ -291,7 +291,7 @@
291291
view: SquareView,
292292
model: SquareModel,
293293
}
294-
});
294+
}, false);
295295
lf.setDefaultEdgeType('polyline');
296296
lf.render({
297297
nodes: [
@@ -307,74 +307,74 @@
307307
y: 300,
308308
id: 11,
309309
},
310-
// {
311-
// type: 'text',
312-
// x: 200,
313-
// y: 400,
314-
// text: {
315-
// x: 200,
316-
// y: 400,
317-
// value: '我是单独的文本节点',
318-
// }
319-
// },
320-
// {
321-
// type: 'polygon',
322-
// x: 200,
323-
// y: 200,
324-
// id: 50,
325-
// text: 'hhhh',
326-
// },
327-
// {
328-
// type: 'diamond',
329-
// x: 220,
330-
// y: 220,
331-
// rx: 30,
332-
// ry: 50,
333-
// id: 524,
334-
// text: 'diamond',
335-
// },
336-
// {
337-
// type: 'user',
338-
// x: 600,
339-
// y: 200,
340-
// id: 20,
341-
// text:{
342-
// value: 'user',
343-
// x: 600,
344-
// y: 200,
345-
// },
346-
// properties: {
347-
// size: 1
348-
// }
349-
// },
350-
// {
351-
// type: 'user',
352-
// x: 500 * Math.random(),
353-
// y: 600 * Math.random(),
354-
// id: 21,
355-
// properties: {
356-
// size: 2
357-
// }
358-
// },
359-
// {
360-
// type: 'star',
361-
// x: 400,
362-
// y: 300,
363-
// id: 99
364-
// },
365-
// {
366-
// type: 'combine',
367-
// x: 222,
368-
// y: 40,
369-
// id: 30,
370-
// },
371-
// {
372-
// type: 'circle',
373-
// x: 500 * Math.random(),
374-
// y: 600 * Math.random(),
375-
// fill: 'blue',
376-
// id: 40,
377-
// },
310+
{
311+
type: 'text',
312+
x: 200,
313+
y: 400,
314+
text: {
315+
x: 200,
316+
y: 400,
317+
value: '我是单独的文本节点',
318+
}
319+
},
320+
{
321+
type: 'polygon',
322+
x: 200,
323+
y: 200,
324+
id: 50,
325+
text: 'hhhh',
326+
},
327+
{
328+
type: 'diamond',
329+
x: 220,
330+
y: 220,
331+
rx: 30,
332+
ry: 50,
333+
id: 524,
334+
text: 'diamond',
335+
},
336+
{
337+
type: 'user',
338+
x: 600,
339+
y: 200,
340+
id: 20,
341+
text:{
342+
value: 'user',
343+
x: 600,
344+
y: 200,
345+
},
346+
properties: {
347+
size: 1
348+
}
349+
},
350+
{
351+
type: 'user',
352+
x: 500 * Math.random(),
353+
y: 600 * Math.random(),
354+
id: 21,
355+
properties: {
356+
size: 2
357+
}
358+
},
359+
{
360+
type: 'star',
361+
x: 400,
362+
y: 300,
363+
id: 99
364+
},
365+
{
366+
type: 'combine',
367+
x: 222,
368+
y: 40,
369+
id: 30,
370+
},
371+
{
372+
type: 'circle',
373+
x: 500 * Math.random(),
374+
y: 600 * Math.random(),
375+
fill: 'blue',
376+
id: 40,
377+
},
378378
].concat(Array.of(...Array(0)).map((item, i) => {
379379
return {
380380
id: 'node_' + i,

‎packages/core/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
"dist",
2121
"types"
2222
],
23+
"dependencies": {
24+
"mousetrap": "^1.6.5",
25+
"preact": "^10.4.8"
26+
},
2327
"devDependencies": {
2428
"@babel/core": "^7.9.0",
2529
"@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -58,8 +62,6 @@
5862
"mobx": "^5.15.7",
5963
"mobx-react": "^6.3.0",
6064
"mobx-utils": "^5.6.1",
61-
"mousetrap": "^1.6.5",
62-
"preact": "^10.4.8",
6365
"prettier": "^2.2.1",
6466
"rimraf": "^3.0.2",
6567
"standard-version": "^9.0.0",

‎packages/core/src/LogicFlow.tsx

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, h } from 'preact';
22
import { observer, Provider } from 'mobx-react';
3-
import * as mobx from 'mobx';
4-
import { IReactComponent } from 'mobx-react/dist/types/IReactComponent';
3+
// import * as mobx from 'mobx';
4+
// import { IReactComponent } from 'mobx-react/dist/types/IReactComponent';
55
import GraphModel from './model/GraphModel';
66
import Graph from './view/Graph';
77
import BaseNodeModel from './model/node/BaseNodeModel';
@@ -159,7 +159,7 @@ export default class LogicFlow {
159159
install && install.call(extension, this, LogicFlow);
160160
renderComponent && this.components.push(renderComponent.bind(extension));
161161
}
162-
register(type: string, fn: RegisterElementFn) {
162+
register(type: string, fn: RegisterElementFn, isObserverView = true) {
163163
const registerParam: RegisterParam = {
164164
BaseEdge,
165165
BaseEdgeModel,
@@ -183,7 +183,7 @@ export default class LogicFlow {
183183
BezierEdgeModel,
184184
EllipseNode,
185185
EllipseNodeModel,
186-
mobx,
186+
// mobx,
187187
h,
188188
type,
189189
};
@@ -207,8 +207,12 @@ export default class LogicFlow {
207207
view: ViewClass,
208208
model: ModelClass,
209209
} = fn(registerParam);
210-
211-
this.setView(type, observer(ViewClass as IReactComponent));
210+
let vClass = ViewClass;
211+
if (isObserverView) {
212+
// @ts-ignore
213+
vClass = observer(vClass);
214+
}
215+
this.setView(type, vClass);
212216
this.graphModel.setModel(type, ModelClass);
213217
}
214218
defaultRegister() {
@@ -648,7 +652,7 @@ export default class LogicFlow {
648652
const { edgesMap } = this.graphModel;
649653
return edgesMap[edgeId].model;
650654
}
651-
setView(type: string, component: IReactComponent) {
655+
setView(type: string, component) {
652656
this.viewMap.set(type, component);
653657
}
654658
getView = (type: string) => this.viewMap.get(type);
@@ -698,6 +702,6 @@ export {
698702
PolylineEdgeModel,
699703
EllipseNode,
700704
EllipseNodeModel,
701-
mobx,
705+
// mobx,
702706
h,
703707
};

‎packages/core/src/model/edge/BaseEdgeModel.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -244,12 +244,13 @@ class BaseEdgeModel implements IBaseModel {
244244
return;
245245
}
246246
if (Object.prototype.toString.call(data.text) === '[object Object]') {
247-
Object.assign(this.text, {
248-
x,
249-
y,
250-
draggable: false,
251-
editable: true,
252-
}, data.text);
247+
this.text = {
248+
x: data.text.x || x,
249+
y: data.text.y || y,
250+
value: data.text.value,
251+
draggable: this.text.draggable,
252+
editable: this.text.editable,
253+
};
253254
}
254255
}
255256

‎packages/core/src/model/node/BaseNodeModel.ts

+16-3
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,22 @@ export default class BaseNodeModel implements IBaseModel {
5757
@observable type = '';
5858
@observable x = defaultConfig.x;
5959
@observable y = defaultConfig.y;
60-
@observable width = defaultConfig.width;
61-
@observable height = defaultConfig.height;
60+
@observable
61+
private _width = defaultConfig.width;
62+
public get width() {
63+
return this._width;
64+
}
65+
public set width(value) {
66+
this._width = value;
67+
}
68+
@observable
69+
private _height = defaultConfig.height;
70+
public get height() {
71+
return this._height;
72+
}
73+
public set height(value) {
74+
this._height = value;
75+
}
6276
@observable fill = defaultConfig.fill;
6377
@observable fillOpacity = defaultConfig.fillOpacity;
6478
@observable strokeWidth = defaultConfig.strokeWidth;
@@ -347,6 +361,5 @@ export default class BaseNodeModel implements IBaseModel {
347361
@action
348362
updateAttributes(attributes) {
349363
assign(this, attributes);
350-
console.log(this);
351364
}
352365
}

‎packages/core/src/model/node/CircleNodeModel.ts

-2
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ class CircleNodeModel extends BaseNodeModel {
1212
constructor(data, graphModel: GraphModel) {
1313
super(data, graphModel, 'circle');
1414
}
15-
// @ts-ignore
1615
@computed get width(): number {
1716
return this.r * 2;
1817
}
19-
// @ts-ignore
2018
@computed get height(): number {
2119
return this.r * 2;
2220
}

‎packages/core/src/model/node/DiamondNodeModel.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ class DiamondNodeModel extends BaseNodeModel {
3838
}));
3939
return pointsPosition;
4040
}
41-
// @ts-ignore
41+
4242
@computed get width(): number {
4343
let min = Number.MAX_SAFE_INTEGER;
4444
let max = Number.MIN_SAFE_INTEGER;
@@ -52,7 +52,7 @@ class DiamondNodeModel extends BaseNodeModel {
5252
});
5353
return max - min;
5454
}
55-
// @ts-ignore
55+
5656
@computed get height(): number {
5757
let min = Number.MAX_SAFE_INTEGER;
5858
let max = Number.MIN_SAFE_INTEGER;

‎packages/core/src/model/node/EllipseNodeModel.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ class EllipseNodeModel extends BaseNodeModel {
1313
constructor(data, graphModel: GraphModel) {
1414
super(data, graphModel, 'ellipse');
1515
}
16-
// @ts-ignore
16+
1717
@computed get width(): number {
1818
return this.rx * 2;
1919
}
20-
// @ts-ignore
2120
@computed get height(): number {
2221
return this.ry * 2;
2322
}

‎packages/core/src/model/node/PolygonNodeModel.ts

-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ class PolygonNodeModel extends BaseNodeModel {
2727
}));
2828
return pointsPosition;
2929
}
30-
// @ts-ignore
3130
@computed get width(): number {
3231
let min = Number.MAX_SAFE_INTEGER;
3332
let max = Number.MIN_SAFE_INTEGER;
@@ -41,7 +40,6 @@ class PolygonNodeModel extends BaseNodeModel {
4140
});
4241
return max - min;
4342
}
44-
// @ts-ignore
4543
@computed get height(): number {
4644
let min = Number.MAX_SAFE_INTEGER;
4745
let max = Number.MIN_SAFE_INTEGER;

‎packages/core/src/model/node/TextNodeModel.ts

-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,9 @@ class TextNodeModel extends BaseNodeModel {
1313
constructor(data, graphModel: GraphModel) {
1414
super(data, graphModel, 'text');
1515
}
16-
// @ts-ignore
1716
@computed get width(): number {
1817
return this.fontSize * this.text.value.length;
1918
}
20-
// @ts-ignore
2119
@computed get height(): number {
2220
return this.fontSize * 1.5;
2321
}

0 commit comments

Comments
 (0)