test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 18:58:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: redo/undo; perf: update API name

Browse Source
This commit is contained in:
yvonneyx 2023-09-08 17:28:31 +08:00
parent ae8713ac05
commit 8a2c4c502c
24 changed files with 550 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/g6/src/runtime/controller/item.ts
View File

@ -539,7 +539,7 @@ export class ItemController {
const parentItem = this.itemMap.get(current.parentId);
if (current.parentId && parentItem?.model.data.collapsed) {
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(innerModel.id, false);
});
}
@ -1286,7 +1286,7 @@ export class ItemController {
// find the succeeds in collapsed
graphComboTreeDfs(this.graph, [comboModel], (child) => {
if (child.id !== comboModel.id) {
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(child.id, false);
});
}
@ -1306,7 +1306,7 @@ export class ItemController {
pairs.push({ source, target });
});
// each item in groupedEdges is a virtual edge
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.addData('edge', groupVirtualEdges(pairs));
});
}
@ -1389,7 +1389,7 @@ export class ItemController {
);
// remove related virtual edges
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.removeData('edge', uniq(relatedVirtualEdgeIds));
this.graph.showItem(edgesToShow.concat(nodesToShow));
// add virtual edges by grouping visible ancestor edges

48
packages/g6/src/runtime/graph.ts
View File

@ -468,7 +468,7 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
* @returns
*/
public clear() {
this.startBatch();
this.startHistoryBatch();
this.removeData(
'edge',
this.getAllEdgesData().map((edge) => edge.id),
@ -481,7 +481,7 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
'combo',
this.getAllCombosData().map((combo) => combo.id),
);
this.stopBatch();
this.stopHistoryBatch();
}
public getViewportCenter(): PointLike {
@ -1588,7 +1588,7 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
*/
public collapseCombo(comboIds: ID | ID[]) {
const ids = isArray(comboIds) ? comboIds : [comboIds];
this.executeWithoutStacking(() => {
this.executeWithNoStack(() => {
this.updateData(
'combo',
ids.map((id) => ({ id, data: { collapsed: true } })),
@ -1608,7 +1608,7 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
*/
public expandCombo(comboIds: ID | ID[]) {
const ids = isArray(comboIds) ? comboIds : [comboIds];
this.executeWithoutStacking(() => {
this.executeWithNoStack(() => {
this.updateData(
'combo',
ids.map((id) => ({ id, data: { collapsed: false } })),
@ -2020,30 +2020,30 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
/**
* Pause stacking operation.
*/
public pauseStacking(): void {
public pauseStack(): void {
const history = this.getHistoryPlugin();
return history?.pauseStacking();
return history?.pauseStack();
}
/**
* Resume stacking operation.
*/
public resumeStacking(): void {
public resumeStack(): void {
const history = this.getHistoryPlugin();
return history?.resumeStacking();
return history?.resumeStack();
}
/**
* Execute a callback without allowing any stacking operations.
* @param callback
*/
public executeWithoutStacking = (callback: () => void): void => {
public executeWithNoStack = (callback: () => void): void => {
const history = this.getHistoryPlugin();
history?.pauseStacking();
history?.pauseStack();
try {
callback();
} finally {
history?.resumeStacking();
history?.resumeStack();
}
};
@ -2109,41 +2109,41 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
}
/**
* Begin a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* Begin a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
public startBatch() {
public startHistoryBatch() {
const history = this.getHistoryPlugin();
history?.startBatch();
history?.startHistoryBatch();
}
/**
* End a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* End a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
public stopBatch() {
public stopHistoryBatch() {
const history = this.getHistoryPlugin();
history?.stopBatch();
history?.stopHistoryBatch();
}
/**
* Execute a provided function within a batched context
* All operations performed inside callback will be treated as a composite operation
* more convenient way without manually invoking `startBatch` and `stopBatch`.
* more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
* @param callback The func containing operations to be batched together.
*/
public batch(callback: () => void) {
public historyBatch(callback: () => void) {
const history = this.getHistoryPlugin();
history?.batch(callback);
history?.historyBatch(callback);
}
/**
* Clear history stack
* @param {StackType} stackType undo/redo stack
*/
public clearStack(stackType?: StackType) {
public cleanHistory(stackType?: StackType) {
const history = this.getHistoryPlugin();
if (!stackType) return history?.clear();
return stackType === 'undo'
@ -2197,7 +2197,7 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
this.transientCanvas.destroy();
// clear history stack
this.clearStack();
this.cleanHistory();
callback?.();
// }, 500);

4
packages/g6/src/stdlib/behavior/activate-relations.ts
View File

@ -118,7 +118,7 @@ export class ActivateRelations extends Behavior {
edgeIds,
);
graph.batch(() => {
graph.historyBatch(() => {
/** 节点 */
graph.setItemState(activeNodeIds, ACTIVE_STATE, true);
graph.setItemState(inactiveNodeIds, ACTIVE_STATE, false);
@ -132,7 +132,7 @@ export class ActivateRelations extends Behavior {
}
public clearActiveState(e: any) {
const { activeState: ACTIVE_STATE } = this.options;
this.graph.batch(() => {
this.graph.historyBatch(() => {
this.graph.setItemState(this.prevNodeIds, ACTIVE_STATE, false);
this.graph.setItemState(this.prevEdgeIds, ACTIVE_STATE, false);
});

2
packages/g6/src/stdlib/behavior/click-select.ts
View File

@ -136,7 +136,7 @@ export class ClickSelect extends Behavior {
// Select/Unselect item.
if (this.options.shouldUpdate(event)) {
this.graph.batch(() => {
this.graph.historyBatch(() => {
if (!multiple) {
// Not multiple, clear all currently selected items
this.graph.setItemState(this.selectedIds, state, false);

6
packages/g6/src/stdlib/behavior/drag-canvas.ts
View File

@ -137,7 +137,7 @@ export class DragCanvas extends Behavior {
.getAllEdgesData()
.map((edge) => edge.id)
.filter((id) => graph.getItemVisible(id) === true);
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
graph.hideItem(this.hiddenEdgeIds, true);
this.hiddenNodeIds = graph
.getAllNodesData()
@ -243,7 +243,7 @@ export class DragCanvas extends Behavior {
const { graph } = this;
if (this.options.enableOptimize) {
graph.startBatch();
graph.startHistoryBatch();
if (this.hiddenEdgeIds) {
graph.showItem(this.hiddenEdgeIds, true);
}
@ -253,7 +253,7 @@ export class DragCanvas extends Behavior {
// });
// graph.showItem(this.hiddenNodeIds, true);
// }
graph.stopBatch();
graph.stopHistoryBatch();
}
}

16
packages/g6/src/stdlib/behavior/drag-combo.ts
View File

@ -250,7 +250,7 @@ export class DragCombo extends Behavior {
selectedComboIds,
this.hiddenComboTreeRoots,
);
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(
this.hiddenEdges.map((edge) => edge.id),
true,
@ -280,7 +280,7 @@ export class DragCombo extends Behavior {
});
// Hide original edges and nodes. They will be restored when pointerup.
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(selectedComboIds, true);
this.graph.hideItem(
this.hiddenEdges.map((edge) => edge.id),
@ -429,7 +429,7 @@ export class DragCombo extends Behavior {
}
public restoreHiddenItems(positions?: Position[]) {
this.graph.pauseStacking();
this.graph.pauseStack();
if (this.hiddenEdges.length) {
this.graph.showItem(
this.hiddenEdges.map((edge) => edge.id),
@ -452,7 +452,7 @@ export class DragCombo extends Behavior {
true,
);
}
this.graph.resumeStacking();
this.graph.resumeStack();
}
public onPointerUp(event: IG6GraphEvent) {
@ -561,7 +561,7 @@ export class DragCombo extends Behavior {
public onDropCombo(event: IG6GraphEvent) {
const newParentId = event.itemId;
this.graph.startBatch();
this.graph.startHistoryBatch();
this.originPositions.forEach(({ id }) => {
const model = this.graph.getComboData(id);
if (!model || model.id === newParentId) return;
@ -570,12 +570,12 @@ export class DragCombo extends Behavior {
// event.stopPropagation();
this.graph.updateData('combo', { id, data: { parentId: newParentId } });
});
this.graph.stopBatch();
this.graph.stopHistoryBatch();
this.onPointerUp(event);
}
public onDropCanvas(event: IG6GraphEvent) {
this.graph.startBatch();
this.graph.startHistoryBatch();
this.originPositions.forEach(({ id }) => {
const model = this.graph.getComboData(id);
if (!model) return;
@ -583,7 +583,7 @@ export class DragCombo extends Behavior {
if (!parentId) return;
this.graph.updateData('combo', { id, data: { parentId: undefined } });
});
this.graph.stopBatch();
this.graph.stopHistoryBatch();
this.onPointerUp(event);
}
}

20
packages/g6/src/stdlib/behavior/drag-node.ts
View File

@ -258,7 +258,7 @@ export class DragNode extends Behavior {
this.selectedNodeIds,
this.hiddenComboTreeItems,
);
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(
this.hiddenEdges.map((edge) => edge.id),
true,
@ -292,7 +292,7 @@ export class DragNode extends Behavior {
});
// Hide original edges and nodes. They will be restored when pointerup.
this.graph.executeWithoutStacking(() => {
this.graph.executeWithNoStack(() => {
this.graph.hideItem(this.selectedNodeIds, true);
this.graph.hideItem(
this.hiddenEdges.map((edge) => edge.id),
@ -478,7 +478,7 @@ export class DragNode extends Behavior {
}
public restoreHiddenItems(positions?: Position[]) {
this.graph.pauseStacking();
this.graph.pauseStack();
if (this.hiddenEdges.length) {
this.graph.showItem(
this.hiddenEdges.map((edge) => edge.id),
@ -508,7 +508,7 @@ export class DragNode extends Behavior {
true,
);
}
this.graph.resumeStacking();
this.graph.resumeStack();
}
public clearState() {
@ -608,7 +608,7 @@ export class DragNode extends Behavior {
? this.graph.getNodeData(dropId).data.parentId
: dropId;
this.graph.startBatch();
this.graph.startHistoryBatch();
this.originPositions.forEach(({ id }) => {
const model = this.graph.getNodeData(id);
if (!model) return;
@ -621,13 +621,13 @@ export class DragNode extends Behavior {
this.graph.updateData('node', { id, data: { parentId: newParentId } });
});
this.onPointerUp(event);
this.graph.stopBatch();
this.graph.stopHistoryBatch();
}
public onDropCombo(event: IG6GraphEvent) {
event.stopPropagation();
const newParentId = event.itemId;
this.graph.startBatch();
this.graph.startHistoryBatch();
this.onPointerUp(event);
this.originPositions.forEach(({ id }) => {
const model = this.graph.getNodeData(id);
@ -637,7 +637,7 @@ export class DragNode extends Behavior {
this.graph.updateData('node', { id, data: { parentId: newParentId } });
});
this.clearState();
this.graph.stopBatch();
this.graph.stopHistoryBatch();
}
public onDropCanvas(event: IG6GraphEvent) {
@ -657,7 +657,7 @@ export class DragNode extends Behavior {
const parentId = this.graph.getNodeData(dropId)
? this.graph.getNodeData(dropId).data.parentId
: dropId;
this.graph.startBatch();
this.graph.startHistoryBatch();
this.onPointerUp(event);
const nodeToUpdate = [];
this.originPositions.forEach(({ id }) => {
@ -671,6 +671,6 @@ export class DragNode extends Behavior {
});
if (nodeToUpdate.length) this.graph.updateData('node', nodeToUpdate);
this.clearState();
this.graph.stopBatch();
this.graph.stopHistoryBatch();
}
}

4
packages/g6/src/stdlib/plugin/history/combo-command.ts
View File

@ -11,7 +11,7 @@ export class ComboCommand implements Command {
}
undo(graph: IGraph) {
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
this.action === 'expandCombo'
? graph.collapseCombo(this.ids)
: graph.expandCombo(this.ids);
@ -19,7 +19,7 @@ export class ComboCommand implements Command {
}
redo(graph: IGraph) {
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
this.action === 'collapseCombo'
? graph.collapseCombo(this.ids)
: graph.expandCombo(this.ids);

28
packages/g6/src/stdlib/plugin/history/index.ts
View File

@ -200,7 +200,7 @@ export class History extends Base {
/**
* Pause stacking operations.
*/
pauseStacking(): void {
pauseStack(): void {
this.withoutStackingCounter++;
if (this.withoutStackingCounter === 1) {
@ -212,7 +212,7 @@ export class History extends Base {
/**
* Resume stacking operations.
*/
resumeStacking(): void {
resumeStack(): void {
if (this.withoutStackingCounter > 0) {
this.withoutStackingCounter--;
}
@ -260,14 +260,14 @@ export class History extends Base {
}
/**
* Begin a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* Begin a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
public startBatch() {
public startHistoryBatch() {
if (this.isBatching) {
throw new Error(
'Ensure that batch processing is stopped before starting.',
'Ensure that historyBatch processing is stopped before starting.',
);
}
this.initBatchCommands();
@ -275,14 +275,14 @@ export class History extends Base {
}
/**
* End a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* End a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
public stopBatch() {
public stopHistoryBatch() {
if (!this.isBatching) {
throw new Error(
'Ensure that batch processing is started before stopping.',
'Ensure that historyBatch processing is started before stopping.',
);
}
this.push(this.batchCommands);
@ -290,13 +290,13 @@ export class History extends Base {
}
/**
* Execute the provided function in a batch mode
* Execute the provided function in a historyBatch mode
* @param callback
*/
public batch(callback) {
this.startBatch();
public historyBatch(callback) {
this.startHistoryBatch();
callback();
this.stopBatch();
this.stopHistoryBatch();
}
public getEvents() {

8
packages/g6/src/stdlib/plugin/history/item-data-command.ts
View File

@ -26,14 +26,14 @@ export class ItemDataCommand implements Command {
private removeChangedData(graph) {
const ids = this.changes.map((data) => data.value?.id).filter(Boolean);
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
graph.removeData(this.type, ids);
});
}
private addChangedData(graph) {
const models = this.changes.map((data) => data.value).filter(Boolean);
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
graph.addData(this.type, models);
});
}
@ -61,13 +61,13 @@ export class ItemDataCommand implements Command {
});
}
graph.pauseStacking();
graph.pauseStack();
if (onlyMove) {
graph.updatePosition(this.type, models, this.upsertAncestors);
} else {
graph.updateData(this.type, models);
}
graph.resumeStacking();
graph.resumeStack();
}
undo(graph: IGraph) {

4
packages/g6/src/stdlib/plugin/history/layer-updated-command.ts
View File

@ -11,7 +11,7 @@ export class LayerUpdatedCommand implements Command {
}
undo(graph: IGraph) {
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
this.action === 'front'
? graph.backItem(this.ids)
: graph.frontItem(this.ids);
@ -19,7 +19,7 @@ export class LayerUpdatedCommand implements Command {
}
redo(graph: IGraph) {
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
this.action === 'front'
? graph.frontItem(this.ids)
: graph.backItem(this.ids);

2
packages/g6/src/stdlib/plugin/history/state-updated-command.ts
View File

@ -20,7 +20,7 @@ export class StateUpdatedCommand implements Command {
private updateItemsStates(graph, stateOptions) {
stateOptions?.map((option) => {
const { ids, states, value } = option;
graph.executeWithoutStacking(() => {
graph.executeWithNoStack(() => {
graph.setItemState(ids, states, value);
});
});

4
packages/g6/src/stdlib/plugin/history/visibility-updated-command.ts
View File

@ -20,13 +20,13 @@ export class VisibilityUpdatedCommand implements Command {
}
private toggleItemsVisible(graph: IGraph, values) {
graph.pauseStacking();
graph.pauseStack();
each(values, (value) =>
value.visible
? graph.showItem(value.ids, this.disableAnimate)
: graph.hideItem(value.ids, this.disableAnimate),
);
graph.resumeStacking();
graph.resumeStack();
}
undo(graph: IGraph) {

27
packages/g6/src/types/graph.ts
View File

@ -682,16 +682,16 @@ export interface IGraph<
/**
* Pause stacking operation.
*/
pauseStacking: () => void;
pauseStack: () => void;
/**
* Resume stacking operation.
*/
resumeStacking: () => void;
resumeStack: () => void;
/**
* Execute a callback without allowing any stacking operations.
* @param callback
*/
executeWithoutStacking: (callback: () => void) => void;
executeWithNoStack: (callback: () => void) => void;
/**
* Retrieve the current redo stack which consists of operations that could be undone
*/
@ -731,33 +731,34 @@ export interface IGraph<
canRedo: () => void;
/**
* Begin a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* Begin a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
startBatch: () => void;
startHistoryBatch: () => void;
/**
* End a batch operation.
* Any operations performed between `startBatch` and `stopBatch` are grouped together.
* End a historyBatch operation.
* Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
* treated as a single operation when undoing or redoing.
*/
stopBatch: () => void;
stopHistoryBatch: () => void;
/**
* Execute a provided function within a batched context
* All operations performed inside callback will be treated as a composite operation
* more convenient way without manually invoking `startBatch` and `stopBatch`.
* more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
* @param callback The func containing operations to be batched together.
*/
batch: (callback: () => void) => void;
historyBatch: (callback: () => void) => void;
/**
* Execute a provided function within a batched context
* All operations performed inside callback will be treated as a composite operation
* more convenient way without manually invoking `startBatch` and `stopBatch`.
* more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
* @param callback The func containing operations to be batched together.
*/
clearStack: (stackType?: StackType) => void;
cleanHistory: (stackType?: StackType) => void;
// ===== tree operations =====
/**
* Collapse sub tree(s).

10
packages/g6/tests/demo/plugins/history.ts
View File

@ -53,7 +53,7 @@ const createOperations = (graph): any => {
const addNodeButton = document.createElement('button');
addNodeButton.innerText = 'add data';
addNodeButton.addEventListener('click', () => {
graph.startBatch();
graph.startHistoryBatch();
graph.addData('node', {
id: 'node3',
data: {
@ -69,7 +69,7 @@ const createOperations = (graph): any => {
type: 'line-edge',
},
});
graph.stopBatch();
graph.stopHistoryBatch();
});
parentEle.appendChild(addNodeButton);
@ -77,10 +77,10 @@ const createOperations = (graph): any => {
const removeButton = document.createElement('button');
removeButton.innerText = 'remove data';
removeButton.addEventListener('click', () => {
graph.startBatch();
graph.startHistoryBatch();
graph.removeData('edge', 'edge2');
graph.removeData('node', 'node3');
graph.stopBatch();
graph.stopHistoryBatch();
});
parentEle.appendChild(removeButton);
@ -88,7 +88,7 @@ const createOperations = (graph): any => {
const updateButton = document.createElement('button');
updateButton.innerText = 'update data';
updateButton.addEventListener('click', () => {
graph.batch(() => {
graph.historyBatch(() => {
graph.updateData('node', [
{
id: 'node1',

46
packages/site/docs/apis/classes/graph/Graph.en.md
View File

@ -1153,13 +1153,13 @@ Show the item(s).
## Methods
### batch
### historyBatch
▸ **batch**(`callback`): `void`
▸ **historyBatch**(`callback`): `void`
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
#### Parameters
@ -1173,7 +1173,7 @@ more convenient way without manually invoking `startBatch` and `stopBatch`.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[batch](../../interfaces/graph/IGraph.en.md#batch)
[IGraph](../../interfaces/graph/IGraph.en.md).[historyBatch](../../interfaces/graph/IGraph.en.md#historyBatch)
#### Defined in
@ -1324,9 +1324,9 @@ node_modules/.pnpm/@antv+event-emitter@0.1.3/node_modules/@antv/event-emitter/li
---
### executeWithoutStacking
### executeWithNoStack
▸ **executeWithoutStacking**(`callback`): `void`
▸ **executeWithNoStack**(`callback`): `void`
Execute a callback without allowing any stacking operations.
@ -1342,7 +1342,7 @@ Execute a callback without allowing any stacking operations.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[executeWithoutStacking](../../interfaces/graph/IGraph.en.md#executewithoutstacking)
[IGraph](../../interfaces/graph/IGraph.en.md).[executeWithNoStack](../../interfaces/graph/IGraph.en.md#executewithoutstacking)
#### Defined in
@ -1733,9 +1733,9 @@ node_modules/.pnpm/@antv+event-emitter@0.1.3/node_modules/@antv/event-emitter/li
---
### pauseStacking
### pauseStack
▸ **pauseStacking**(): `void`
▸ **pauseStack**(): `void`
Pause stacking operation.
@ -1745,7 +1745,7 @@ Pause stacking operation.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[pauseStacking](../../interfaces/graph/IGraph.en.md#pausestacking)
[IGraph](../../interfaces/graph/IGraph.en.md).[pauseStack](../../interfaces/graph/IGraph.en.md#pausestacking)
#### Defined in
@ -1801,9 +1801,9 @@ Revert recent n operation(s) performed on the graph.
---
### resumeStacking
### resumeStack
▸ **resumeStacking**(): `void`
▸ **resumeStack**(): `void`
Resume stacking operation.
@ -1813,7 +1813,7 @@ Resume stacking operation.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[resumeStacking](../../interfaces/graph/IGraph.en.md#resumestacking)
[IGraph](../../interfaces/graph/IGraph.en.md).[resumeStack](../../interfaces/graph/IGraph.en.md#resumestacking)
#### Defined in
@ -1877,12 +1877,12 @@ Rotate the graph to an absolute angle.
---
### startBatch
### startHistoryBatch
▸ **startBatch**(): `void`
▸ **startHistoryBatch**(): `void`
Begin a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
Begin a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
#### Returns
@ -1891,7 +1891,7 @@ treated as a single operation when undoing or redoing.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[startBatch](../../interfaces/graph/IGraph.en.md#startbatch)
[IGraph](../../interfaces/graph/IGraph.en.md).[startHistoryBatch](../../interfaces/graph/IGraph.en.md#startbatch)
#### Defined in
@ -1899,12 +1899,12 @@ treated as a single operation when undoing or redoing.
---
### stopBatch
### stopHistoryBatch
▸ **stopBatch**(): `void`
▸ **stopHistoryBatch**(): `void`
End a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
End a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
#### Returns
@ -1913,7 +1913,7 @@ treated as a single operation when undoing or redoing.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.en.md).[stopBatch](../../interfaces/graph/IGraph.en.md#stopbatch)
[IGraph](../../interfaces/graph/IGraph.en.md).[stopHistoryBatch](../../interfaces/graph/IGraph.en.md#stopbatch)
#### Defined in

46
packages/site/docs/apis/classes/graph/Graph.zh.md
View File

@ -1155,13 +1155,13 @@ Show the item(s).
## Methods
### batch
### historyBatch
▸ **batch**(`callback`): `void`
▸ **historyBatch**(`callback`): `void`
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
#### Parameters
@ -1175,7 +1175,7 @@ more convenient way without manually invoking `startBatch` and `stopBatch`.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[batch](../../interfaces/graph/IGraph.zh.md#batch)
[IGraph](../../interfaces/graph/IGraph.zh.md).[historyBatch](../../interfaces/graph/IGraph.zh.md#historyBatch)
#### Defined in
@ -1326,9 +1326,9 @@ node_modules/.pnpm/@antv+event-emitter@0.1.3/node_modules/@antv/event-emitter/li
---
### executeWithoutStacking
### executeWithNoStack
▸ **executeWithoutStacking**(`callback`): `void`
▸ **executeWithNoStack**(`callback`): `void`
Execute a callback without allowing any stacking operations.
@ -1344,7 +1344,7 @@ Execute a callback without allowing any stacking operations.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[executeWithoutStacking](../../interfaces/graph/IGraph.zh.md#executewithoutstacking)
[IGraph](../../interfaces/graph/IGraph.zh.md).[executeWithNoStack](../../interfaces/graph/IGraph.zh.md#executewithoutstacking)
#### Defined in
@ -1735,9 +1735,9 @@ node_modules/.pnpm/@antv+event-emitter@0.1.3/node_modules/@antv/event-emitter/li
---
### pauseStacking
### pauseStack
▸ **pauseStacking**(): `void`
▸ **pauseStack**(): `void`
Pause stacking operation.
@ -1747,7 +1747,7 @@ Pause stacking operation.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[pauseStacking](../../interfaces/graph/IGraph.zh.md#pausestacking)
[IGraph](../../interfaces/graph/IGraph.zh.md).[pauseStack](../../interfaces/graph/IGraph.zh.md#pausestacking)
#### Defined in
@ -1803,9 +1803,9 @@ Revert recent n operation(s) performed on the graph.
---
### resumeStacking
### resumeStack
▸ **resumeStacking**(): `void`
▸ **resumeStack**(): `void`
Resume stacking operation.
@ -1815,7 +1815,7 @@ Resume stacking operation.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[resumeStacking](../../interfaces/graph/IGraph.zh.md#resumestacking)
[IGraph](../../interfaces/graph/IGraph.zh.md).[resumeStack](../../interfaces/graph/IGraph.zh.md#resumestacking)
#### Defined in
@ -1879,12 +1879,12 @@ Rotate the graph to an absolute angle.
---
### startBatch
### startHistoryBatch
▸ **startBatch**(): `void`
▸ **startHistoryBatch**(): `void`
Begin a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
Begin a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
#### Returns
@ -1893,7 +1893,7 @@ treated as a single operation when undoing or redoing.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[startBatch](../../interfaces/graph/IGraph.zh.md#startbatch)
[IGraph](../../interfaces/graph/IGraph.zh.md).[startHistoryBatch](../../interfaces/graph/IGraph.zh.md#startbatch)
#### Defined in
@ -1901,12 +1901,12 @@ treated as a single operation when undoing or redoing.
---
### stopBatch
### stopHistoryBatch
▸ **stopBatch**(): `void`
▸ **stopHistoryBatch**(): `void`
End a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
End a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
#### Returns
@ -1915,7 +1915,7 @@ treated as a single operation when undoing or redoing.
#### Implementation of
[IGraph](../../interfaces/graph/IGraph.zh.md).[stopBatch](../../interfaces/graph/IGraph.zh.md#stopbatch)
[IGraph](../../interfaces/graph/IGraph.zh.md).[stopHistoryBatch](../../interfaces/graph/IGraph.zh.md#stopbatch)
#### Defined in

40
packages/site/docs/apis/interfaces/graph/IGraph.en.md
View File

@ -1205,9 +1205,9 @@ Add behavior(s) to mode(s).
---
### batch
### historyBatch
• **batch**: (`callback`: () => `void`) => `void`
• **historyBatch**: (`callback`: () => `void`) => `void`
#### Type declaration
@ -1215,7 +1215,7 @@ Add behavior(s) to mode(s).
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
##### Parameters
@ -1329,9 +1329,9 @@ Clear the graph, means remove all the items on the graph.
---
### clearStack
### cleanHistory
• **clearStack**: (`stackType?`: `"redo"` \| `"undo"`) => `void`
• **cleanHistory**: (`stackType?`: `"redo"` \| `"undo"`) => `void`
#### Type declaration
@ -1339,7 +1339,7 @@ Clear the graph, means remove all the items on the graph.
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
##### Parameters
@ -1377,9 +1377,9 @@ more convenient way without manually invoking `startBatch` and `stopBatch`.
---
### executeWithoutStacking
### executeWithNoStack
• **executeWithoutStacking**: (`callback`: () => `void`) => `void`
• **executeWithNoStack**: (`callback`: () => `void`) => `void`
#### Type declaration
@ -1694,9 +1694,9 @@ Layout the graph (with current configurations if cfg is not assigned).
---
### pauseStacking
### pauseStack
• **pauseStacking**: () => `void`
• **pauseStack**: () => `void`
#### Type declaration
@ -1771,9 +1771,9 @@ Restore the operation that was last n reverted on the graph.
---
### resumeStacking
### resumeStack
• **resumeStacking**: () => `void`
• **resumeStack**: () => `void`
#### Type declaration
@ -1847,16 +1847,16 @@ Rotate the graph to an absolute angle in clockwise.
---
### startBatch
### startHistoryBatch
• **startBatch**: () => `void`
• **startHistoryBatch**: () => `void`
#### Type declaration
▸ (): `void`
Begin a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
Begin a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
##### Returns
@ -1869,16 +1869,16 @@ treated as a single operation when undoing or redoing.
---
### stopBatch
### stopHistoryBatch
• **stopBatch**: () => `void`
• **stopHistoryBatch**: () => `void`
#### Type declaration
▸ (): `void`
End a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
End a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
##### Returns

40
packages/site/docs/apis/interfaces/graph/IGraph.zh.md
View File

@ -1207,9 +1207,9 @@ Add behavior(s) to mode(s).
---
### batch
### historyBatch
• **batch**: (`callback`: () => `void`) => `void`
• **historyBatch**: (`callback`: () => `void`) => `void`
#### Type declaration
@ -1217,7 +1217,7 @@ Add behavior(s) to mode(s).
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
##### Parameters
@ -1331,9 +1331,9 @@ Clear the graph, means remove all the items on the graph.
---
### clearStack
### cleanHistory
• **clearStack**: (`stackType?`: `"redo"` \| `"undo"`) => `void`
• **cleanHistory**: (`stackType?`: `"redo"` \| `"undo"`) => `void`
#### Type declaration
@ -1341,7 +1341,7 @@ Clear the graph, means remove all the items on the graph.
Execute a provided function within a batched context
All operations performed inside callback will be treated as a composite operation
more convenient way without manually invoking `startBatch` and `stopBatch`.
more convenient way without manually invoking `startHistoryBatch` and `stopHistoryBatch`.
##### Parameters
@ -1379,9 +1379,9 @@ more convenient way without manually invoking `startBatch` and `stopBatch`.
---
### executeWithoutStacking
### executeWithNoStack
• **executeWithoutStacking**: (`callback`: () => `void`) => `void`
• **executeWithNoStack**: (`callback`: () => `void`) => `void`
#### Type declaration
@ -1696,9 +1696,9 @@ Layout the graph (with current configurations if cfg is not assigned).
---
### pauseStacking
### pauseStack
• **pauseStacking**: () => `void`
• **pauseStack**: () => `void`
#### Type declaration
@ -1773,9 +1773,9 @@ Restore the operation that was last n reverted on the graph.
---
### resumeStacking
### resumeStack
• **resumeStacking**: () => `void`
• **resumeStack**: () => `void`
#### Type declaration
@ -1849,16 +1849,16 @@ Rotate the graph to an absolute angle in clockwise.
---
### startBatch
### startHistoryBatch
• **startBatch**: () => `void`
• **startHistoryBatch**: () => `void`
#### Type declaration
▸ (): `void`
Begin a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
Begin a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
##### Returns
@ -1871,16 +1871,16 @@ treated as a single operation when undoing or redoing.
---
### stopBatch
### stopHistoryBatch
• **stopBatch**: () => `void`
• **stopHistoryBatch**: () => `void`
#### Type declaration
▸ (): `void`
End a batch operation.
Any operations performed between `startBatch` and `stopBatch` are grouped together.
End a historyBatch operation.
Any operations performed between `startHistoryBatch` and `stopHistoryBatch` are grouped together.
treated as a single operation when undoing or redoing.
##### Returns

185
packages/site/examples/tool/history/demo/history.ts Normal file
View File

@ -0,0 +1,185 @@
import { Graph } from '@antv/g6';
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new Graph({
container: 'container',
width,
height,
theme: {
type: 'spec',
specification: {
node: {
dataTypeField: 'cluster',
},
},
},
node: {
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
},
],
},
},
combo: (model) => {
return {
id: model.id,
data: {
type: 'circle-combo',
...model.data,
keyShape: {
padding: [10, 20, 30, 40],
r: 50,
},
labelShape: {
text: model.id,
},
},
};
},
data: {
nodes: [
{ id: '1', data: { x: 250, y: 300, parentId: 'combo1' } },
{ id: '2', data: { x: 350, y: 300, parentId: 'combo1' } },
{ id: '3', data: { x: 250, y: 450, parentId: 'combo2' } },
],
edges: [
{ id: 'edge1', source: '1', target: '2', data: {} },
],
combos: [
{ id: 'combo1', data: { parentId: 'combo2' } }, // collapsed: true
{ id: 'combo2', data: {} },
],
},
modes: {
default: [
'collapse-expand-combo',
{
type: 'drag-node',
// enableTransient: false,
// updateComboStructure: false,
},
'drag-canvas',
{
type: 'click-select',
itemTypes: ['node', 'edge', 'combo'],
},
{
type: 'drag-combo',
enableTransient: true,
// updateComboStructure: true,
},
],
},
});
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const simulate = () => {
// Add elements
// Batch update, also supports `historyBatch`
graph.startHistoryBatch(); // start batch
graph.addData('node', {
id: '4',
data: {
x: 300,
y: 370,
parentId: 'combo1',
},
});
graph.addData('edge', {
id: 'edge3',
source: '1',
target: '4',
});
graph.stopHistoryBatch(); // end batch
// Update Node Color (no stack)
delay(300).then(() => {
// Method 1: No stack
graph.executeWithNoStack(() => {
graph.updateData(
'node',
{
id: '1',
data: {
cluster: Math.random(),
},
}
);
});
// Method 2: No stack
graph.pauseStack();
graph.updateData(
'node',
{
id: '2',
data: {
cluster: Math.random(),
},
}
);
graph.resumeStack();
});
// set states
delay(600).then(() => {
graph.historyBatch(() => {
graph.setItemState(['1', '2', '3', '4'], 'selected', true);
});
});
// move
delay(1200).then(() => {
graph.moveCombo('combo2', 50, 0);
});
// collpase combo
delay(1800).then(() => {
graph.collapseCombo('combo1');
});
};
/** Create operations and tips */
const btnContainer = document.createElement('div');
btnContainer.style.position = 'absolute';
container.appendChild(btnContainer);
const tipButton = document.createElement('a');
tipButton.innerText = 'Simulate interaction';
tipButton.addEventListener('click', simulate);
btnContainer.appendChild(tipButton);
const tip = document.createElement('span');
tip.innerHTML = `:<br/> Add Elements (🌟 batch processing) 👉 Update Node Color (⛳️ No stack) 👉 Update States 👉 Move Combo 👉 Collapse Combo<br/>`;
btnContainer.appendChild(tip);
const undoButton = document.createElement('button');
undoButton.innerText = '⬅️ undo';
undoButton.addEventListener('click', () => {
graph.undo();
});
btnContainer.appendChild(undoButton);
const redoButton = document.createElement('button');
redoButton.innerText = '➡️ redo';
redoButton.style.margin = '10px 5px';
redoButton.addEventListener('click', () => {
graph.redo();
});
btnContainer.appendChild(redoButton);
/** Update redo/undo status */
const updateButtonStatus = () => {
undoButton.disabled = !graph.canUndo();
redoButton.disabled = !graph.canRedo();
};
updateButtonStatus();
graph.on('history:change', () => {
updateButtonStatus();
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.destroyed) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.setSize([container.scrollWidth, container.scrollHeight]);
};

16
packages/site/examples/tool/history/demo/meta.json Normal file
View File

@ -0,0 +1,16 @@
{
"title": {
"zh": "中文分类",
"en": "Category"
},
"demos": [
{
"filename": "history.ts",
"title": {
"zh": "撤销重做",
"en": "History"
},
"screenshot": ""
}
]
}

157
packages/site/examples/tool/history/index.en.md Normal file
View File

@ -0,0 +1,157 @@
---
title: History
---
History is a built-in components in G6.
## Usage
### API
#### isHistoryEnabled
Determine if history (redo/undo) is enabled.
```ts
isHistoryEnabled: () => void;
```
#### pushStack
Push the operation(s) onto the specified stack.
```ts
pushStack: (cmd: Command[], stackType: StackType) => void;
```
**Parameters:**
`cmd`: An array of commands to be pushed onto the stack.
`stackType`: The type of stack (undo/redo) to push the commands onto.
#### pauseStack
Pause stacking operation.
```ts
pauseStack: () => void;
```
#### resumeStack
Resume stacking operation.
```ts
resumeStack: () => void;
```
#### executeWithNoStack
Execute a callback without allowing any stacking operations.
```ts
executeWithNoStack: (callback: () => void) => void;
```
Parameters:
callback: The callback function to be executed without stacking operations.
#### getUndoStack
Retrieve the current undo stack which consists of operations that could be undone.
```ts
getUndoStack: () => void;
```
#### getRedoStack
Retrieve the current redo stack which consists of operations that were undone.
```ts
getRedoStack: () => void;
```
#### getStack
Retrieve the complete history stack.
```ts
getStack: () => void;
```
#### undo
Revert the last n operation(s) on the graph.
```ts
undo: () => void;
```
#### redo
Restore the operation that was last n reverted on the graph.
```ts
redo: () => void;
```
#### canUndo
Indicate whether there are any actions available in the undo stack.
```ts
canUndo: () => void;
```
#### canRedo
Indicate whether there are any actions available in the redo stack.
```ts
canRedo: () => void;
```
#### startHistoryBatch
Begin a historyBatch operation. Any operations performed between startHistoryBatch and stopHistoryBatch are grouped together and treated as a single operation when undoing or redoing.
```ts
startHistoryBatch: () => void;
```
#### stopHistoryBatch
End a historyBatch operation. Any operations performed between startHistoryBatch and stopHistoryBatch are grouped together and treated as a single operation when undoing or redoing.
```ts
stopHistoryBatch: () => void;
```
#### historyBatch
Execute a provided function within a batched context. All operations performed inside the callback will be treated as a composite operation, providing a more convenient way without manually invoking startHistoryBatch and stopHistoryBatch.
```ts
historyBatch: (callback: () => void) => void;
```
**Parameters:**
*callback*: The function containing operations to be batched together.
#### cleanHistory
Execute a provided function within a batched context. All operations performed inside the callback will be treated as a composite operation, providing a more convenient way without manually invoking startHistoryBatch and stopHistoryBatch.
```ts
cleanHistory: (stackType?: StackType) => void;
```
**Parameters:**
*stackType (optional)*: The type of stack (undo/redo) to be cleaned. If not provided, all stacks will be cleaned.

7
packages/site/examples/tool/history/index.zh.md Normal file
View File

@ -0,0 +1,7 @@
---
title: 撤销重做
---
G6 中内置的 History 组件。
## 使用指南

6
packages/site/examples/tool/toolbar/demo/self-toolbar.ts
View File

@ -55,7 +55,7 @@ const toolbar = {
alert('hello world');
}
if (code === 'add') {
graph.startBatch();
graph.startHistoryBatch();
graph.addData('node', {
id: 'node2',
data: {
@ -78,7 +78,7 @@ const toolbar = {
type: 'line-edge',
},
});
graph.stopBatch();
graph.stopHistoryBatch();
}
if (code === 'remove') {
graph.removeData('node', 'node2');
@ -121,5 +121,5 @@ insertCss(`
line-height:50px;
flex:1;
}
`);