Skip to content

Commit f7e61f2

Browse files
100pah100pah
committed
feat(thumbnail): upgrade thumbnail
(1) Enable pan and zoom on thumbnail (2) Rename selectedAreaStyle to windowStyle (3) Clean up the code (4) Support border-radius and clip.
1 parent c2eb34a commit f7e61f2

File tree

8 files changed

+492
-709
lines changed

8 files changed

+492
-709
lines changed

‎src/chart/graph/GraphSeries.ts‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ import {
4343
GraphEdgeItemObject,
4444
OptionDataValueNumeric,
4545
CallbackDataParams,
46-
DefaultEmphasisFocus,
47-
ZRColor
46+
DefaultEmphasisFocus
4847
} from '../../util/types';
4948
import SeriesModel from '../../model/Series';
5049
import Graph from '../../data/Graph';
@@ -55,6 +54,7 @@ import { LineDataVisual } from '../../visual/commonVisualTypes';
5554
import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
5655
import { defaultSeriesFormatTooltip } from '../../component/tooltip/seriesFormatTooltip';
5756
import {initCurvenessList, createEdgeMapForCurveness} from '../helper/multipleGraphEdgeHelper';
57+
import Thumbnail, { ThumbnailOption } from './Thumbnail';
5858

5959

6060
type GraphDataValue = OptionDataValue | OptionDataValue[];
@@ -230,13 +230,7 @@ export interface GraphSeriesOption
230230
*/
231231
autoCurveness?: boolean | number | number[]
232232

233-
thumbnail?: BoxLayoutOptionMixin & {
234-
show?: boolean,
235-
236-
itemStyle?: ItemStyleOption
237-
238-
selectedAreaStyle?: ItemStyleOption
239-
}
233+
thumbnail?: ThumbnailOption
240234
}
241235

242236
class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
@@ -519,27 +513,7 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
519513
}
520514
},
521515

522-
thumbnail: {
523-
show: false,
524-
525-
right: 0,
526-
bottom: 0,
527-
528-
height: '25%',
529-
width: '25%',
530-
531-
itemStyle: {
532-
color: 'white',
533-
borderColor: 'black'
534-
},
535-
536-
selectedAreaStyle: {
537-
color: 'white',
538-
borderColor: 'black',
539-
borderWidth: 1,
540-
opacity: 0.5
541-
}
542-
}
516+
thumbnail: Thumbnail.defaultOption
543517
};
544518
}
545519

‎src/chart/graph/GraphView.ts‎

Lines changed: 127 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,12 @@
1919

2020
import SymbolDraw, { ListForSymbolDraw } from '../helper/SymbolDraw';
2121
import LineDraw from '../helper/LineDraw';
22-
import RoamController, { RoamControllerHost } from '../../component/helper/RoamController';
23-
import * as roamHelper from '../../component/helper/roamHelper';
22+
import RoamController from '../../component/helper/RoamController';
23+
import {
24+
updateViewOnZoom,
25+
updateViewOnPan,
26+
RoamControllerHost
27+
} from '../../component/helper/roamHelper';
2428
import {onIrrelevantElement} from '../../component/helper/cursorHelper';
2529
import * as graphic from '../../util/graphic';
2630
import adjustEdge from './adjustEdge';
@@ -39,6 +43,8 @@ import Thumbnail from './Thumbnail';
3943

4044
import { simpleLayoutEdge } from './simpleLayoutHelper';
4145
import { circularLayout, rotateNodeLabel } from './circularLayoutHelper';
46+
import { clone, extend } from 'zrender/src/core/util';
47+
import ECLinePath from '../helper/LinePath';
4248

4349
function isViewCoordSys(coordSys: CoordinateSystem): coordSys is View {
4450
return coordSys.type === 'view';
@@ -63,7 +69,7 @@ class GraphView extends ChartView {
6369

6470
private _layouting: boolean;
6571

66-
private _thumbnail: Thumbnail;
72+
private _thumbnail: Thumbnail = new Thumbnail();
6773

6874
private _mainGroup: graphic.Group;
6975

@@ -218,9 +224,10 @@ class GraphView extends ChartView {
218224
dispose() {
219225
this._controller && this._controller.dispose();
220226
this._controllerHost = null;
227+
this._thumbnail.dispose();
221228
}
222229

223-
_startForceLayoutIteration(
230+
private _startForceLayoutIteration(
224231
forceLayout: GraphSeriesModel['forceLayout'],
225232
api: ExtensionAPI,
226233
layoutAnimation?: boolean
@@ -241,7 +248,7 @@ class GraphView extends ChartView {
241248
})();
242249
}
243250

244-
_updateController(
251+
private _updateController(
245252
seriesModel: GraphSeriesModel,
246253
ecModel: GlobalModel,
247254
api: ExtensionAPI
@@ -250,10 +257,11 @@ class GraphView extends ChartView {
250257
const controllerHost = this._controllerHost;
251258
const group = this.group;
252259

253-
controller.setPointerChecker(function (e, x, y) {
260+
controller.setPointerChecker((e, x, y) => {
254261
const rect = group.getBoundingRect();
255262
rect.applyTransform(group.transform);
256263
return rect.contain(x, y)
264+
&& !this._thumbnail.contain(x, y)
257265
&& !onIrrelevantElement(e, api, seriesModel);
258266
});
259267

@@ -269,34 +277,53 @@ class GraphView extends ChartView {
269277
.off('pan')
270278
.off('zoom')
271279
.on('pan', (e) => {
272-
roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
273-
api.dispatchAction({
274-
seriesId: seriesModel.id,
275-
type: 'graphRoam',
276-
dx: e.dx,
277-
dy: e.dy
278-
});
279-
this._thumbnail._updateSelectedRect('pan');
280+
this._updateViewOnPan(seriesModel, api, e.dx, e.dy);
280281
})
281282
.on('zoom', (e) => {
282-
roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
283-
api.dispatchAction({
284-
seriesId: seriesModel.id,
285-
type: 'graphRoam',
286-
zoom: e.scale,
287-
originX: e.originX,
288-
originY: e.originY
289-
});
290-
this._updateNodeAndLinkScale();
291-
adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
292-
this._lineDraw.updateLayout();
293-
// Only update label layout on zoom
294-
api.updateLabelLayout();
295-
this._thumbnail._updateSelectedRect('zoom');
283+
this._updateViewOnZoom(seriesModel, api, e.scale, e.originX, e.originY);
296284
});
297285
}
298286

299-
_updateNodeAndLinkScale() {
287+
private _updateViewOnPan(
288+
seriesModel: GraphSeriesModel,
289+
api: ExtensionAPI,
290+
dx: number,
291+
dy: number
292+
): void {
293+
updateViewOnPan(this._controllerHost, dx, dy);
294+
api.dispatchAction({
295+
seriesId: seriesModel.id,
296+
type: 'graphRoam',
297+
dx: dx,
298+
dy: dy
299+
});
300+
this._thumbnail.updateWindow();
301+
}
302+
303+
private _updateViewOnZoom(
304+
seriesModel: GraphSeriesModel,
305+
api: ExtensionAPI,
306+
scale: number,
307+
originX: number,
308+
originY: number
309+
) {
310+
updateViewOnZoom(this._controllerHost, scale, originX, originY);
311+
api.dispatchAction({
312+
seriesId: seriesModel.id,
313+
type: 'graphRoam',
314+
zoom: scale,
315+
originX: originX,
316+
originY: originY
317+
});
318+
this._updateNodeAndLinkScale();
319+
adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
320+
this._lineDraw.updateLayout();
321+
// Only update label layout on zoom
322+
api.updateLabelLayout();
323+
this._thumbnail.updateWindow();
324+
}
325+
326+
private _updateNodeAndLinkScale() {
300327
const seriesModel = this._model;
301328
const data = seriesModel.getData();
302329

@@ -317,19 +344,85 @@ class GraphView extends ChartView {
317344
remove(ecModel: GlobalModel, api: ExtensionAPI) {
318345
this._symbolDraw && this._symbolDraw.remove();
319346
this._lineDraw && this._lineDraw.remove();
320-
this._thumbnail && this.group.remove(this._thumbnail.group);
347+
this._controller && this._controller.disable();
348+
this._thumbnail.remove();
321349
}
322350

351+
// TODO: register thumbnail (consider code size).
323352
private _renderThumbnail(
324353
seriesModel: GraphSeriesModel,
325354
api: ExtensionAPI,
326355
symbolDraw: SymbolDraw,
327356
lineDraw: LineDraw
328357
) {
329-
if (this._thumbnail) {
330-
this.group.remove(this._thumbnail.group);
331-
}
332-
(this._thumbnail = new Thumbnail(this.group)).render(seriesModel, api, symbolDraw, lineDraw, this._mainGroup);
358+
const thumbnail = this._thumbnail;
359+
this.group.add(thumbnail.group);
360+
361+
const renderThumbnailContent = (viewGroup: graphic.Group) => {
362+
const symbolNodes = symbolDraw.group.children();
363+
const lineNodes = lineDraw.group.children();
364+
365+
const lineGroup = new graphic.Group();
366+
const symbolGroup = new graphic.Group();
367+
viewGroup.add(symbolGroup);
368+
viewGroup.add(lineGroup);
369+
370+
for (let i = 0; i < symbolNodes.length; i++) {
371+
const node = symbolNodes[i];
372+
const sub = (node as graphic.Group).children()[0];
373+
const x = (node as Symbol).x;
374+
const y = (node as Symbol).y;
375+
const subShape = clone((sub as graphic.Path).shape);
376+
const shape = extend(subShape, {
377+
width: sub.scaleX,
378+
height: sub.scaleY,
379+
x: x - sub.scaleX / 2,
380+
y: y - sub.scaleY / 2
381+
});
382+
const style = clone((sub as graphic.Path).style);
383+
const subThumbnail = new (sub as any).constructor({
384+
shape,
385+
style,
386+
z2: 151
387+
});
388+
symbolGroup.add(subThumbnail);
389+
}
390+
391+
for (let i = 0; i < lineNodes.length; i++) {
392+
const node = lineNodes[i];
393+
const line = (node as graphic.Group).children()[0];
394+
const style = clone((line as ECLinePath).style);
395+
const shape = clone((line as ECLinePath).shape);
396+
const lineThumbnail = new ECLinePath({
397+
style,
398+
shape,
399+
z2: 151
400+
});
401+
lineGroup.add(lineThumbnail);
402+
}
403+
};
404+
405+
thumbnail.render({
406+
seriesModel,
407+
api,
408+
roamType: seriesModel.get('roam'),
409+
z2Setting: {
410+
background: 150,
411+
window: 160
412+
},
413+
seriesBoundingRect: this._mainGroup.getBoundingRect(),
414+
renderThumbnailContent
415+
});
416+
417+
thumbnail
418+
.off('pan')
419+
.off('zoom')
420+
.on('pan', (event) => {
421+
this._updateViewOnPan(seriesModel, api, event.dx, event.dy);
422+
})
423+
.on('zoom', (event) => {
424+
this._updateViewOnZoom(seriesModel, api, event.scale, event.originX, event.originY);
425+
});
333426
}
334427
}
335428

0 commit comments

Comments
 (0)