javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-16 09:40:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Export DeleteItemsAction and event to deregister the default DeleteI...

Browse Source 
DeleteItemsAction and ZoomCanvasAction are now exported;
Now there is 2 functions to deregister the default ZoomCanvas and DeleteItems actions;
A exemple with how to deregister and register another DeleteItemsAction
This commit is contained in:
Mathias
2019-11-16 21:58:12 -03:00
parent 37babb3bb2
commit dedc627294
4 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/diagrams-demo-gallery/demos/demo-custom_delete_keys/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import * as React from 'react';
import createEngine, { DiagramModel, DefaultNodeModel } from '@projectstorm/react-diagrams';
import { CanvasWidget, DeleteItemsAction } from '@projectstorm/react-canvas-core';
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
export default () => {
const engine = createEngine();
const model = new DiagramModel();
const node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
node1.addOutPort('Out');
node1.setPosition(100, 100);
const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
node2.addInPort('In');
node2.setPosition(400, 100);
model.addAll(node1, node2);
engine.setModel(model);
//deregister the default DeleteItemsAction
engine.deregisterDefaultDeleteItemsAction();
//add another DeleteItemsAction with custom keyCodes (in this case, only Delete key)
this.eventBus.registerAction(new DeleteItemsAction({ keyCodes: [46] }));
return (
<DemoCanvasWidget>
<CanvasWidget engine={engine} />
</DemoCanvasWidget>
);
};

4
packages/diagrams-demo-gallery/index.tsx
View File

@ -34,6 +34,7 @@ import demo_zoom from './demos/demo-zoom-to-fit';
import demo_labels from './demos/demo-labelled-links';
import demo_dynamic_ports from './demos/demo-dynamic-ports';
import demo_alternative_linking from './demos/demo-alternative-linking';
import demo_custom_delete_keys from './demos/demo-custom_delete_keys';
storiesOf('Simple Usage', module)
.add('Simple example', demo_simple)
@ -60,7 +61,8 @@ storiesOf('Advanced Techniques', module)
.add('Drag and drop', demo_adv_dnd)
.add('Smart routing', demo_smart_routing)
.add('Right angles routing', demo_right_angles_routing)
.add('Linking by clicking instead of dragging', demo_alternative_linking);
.add('Linking by clicking instead of dragging', demo_alternative_linking)
.add('Setting custom delete keys', demo_custom_delete_keys);
import demo_cust_nodes from './demos/demo-custom-node1';
import demo_cust_links from './demos/demo-custom-link1';

3
packages/react-canvas-core/index.ts
View File

@ -38,3 +38,6 @@ export * from './src/states/DragCanvasState';
export * from './src/states/SelectingState';
export * from './src/states/SelectionBoxState';
export * from './src/states/MoveItemsState';
export * from './src/actions/DeleteItemsAction';
export * from './src/actions/ZoomCanvasAction';

7
packages/react-canvas-core/src/CanvasEngine.ts
View File

@ -29,6 +29,9 @@ export class CanvasEngine<
protected eventBus: ActionEventBus;
protected stateMachine: StateMachine;
deregisterDefaultDeleteItemsAction: () => void;
deregisterDefaultZoomCanvasAction: () => void;
constructor() {
super();
this.model = null;
@ -36,8 +39,8 @@ export class CanvasEngine<
this.stateMachine = new StateMachine(this);
this.layerFactories = new FactoryBank();
this.registerFactoryBank(this.layerFactories);
this.eventBus.registerAction(new ZoomCanvasAction());
this.eventBus.registerAction(new DeleteItemsAction());
this.deregisterDefaultZoomCanvasAction = this.eventBus.registerAction(new ZoomCanvasAction());
this.deregisterDefaultDeleteItemsAction = this.eventBus.registerAction(new DeleteItemsAction());
}
getStateMachine() {