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

performance fixes and additions

Browse Source
This commit is contained in:
Dylan Vorster
2017-02-18 09:52:33 +02:00
parent 68a549c3a9
commit e5391d65ac
5 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Common.ts
View File

@ -122,10 +122,12 @@ export class LinkModel extends BaseModel{
} }
setSourcePort(port: PortModel){ setSourcePort(port: PortModel){
port.addLink(this);
this.sourcePort = port; this.sourcePort = port;
} }
setTargetPort(port: PortModel){ setTargetPort(port: PortModel){
port.addLink(this);
this.targetPort = port; this.targetPort = port;
} }

8
src/DiagramEngine.ts
View File

@ -1,5 +1,5 @@
import {NodeWidgetFactory, LinkWidgetFactory} from "./WidgetFactories"; import {NodeWidgetFactory, LinkWidgetFactory} from "./WidgetFactories";
import {LinkModel, NodeModel, BaseModel, PortModel} from "./Common"; import {LinkModel, NodeModel, BaseModel, PortModel, PointModel} from "./Common";
import {BaseEnity, BaseListener} from "./BaseEntity"; import {BaseEnity, BaseListener} from "./BaseEntity";
import {DiagramModel} from "./DiagramModel"; import {DiagramModel} from "./DiagramModel";
import * as React from "react"; import * as React from "react";
@ -35,7 +35,7 @@ export class DiagramEngine extends BaseEnity<DiagramEngineListener>{
} }
clearRepaintEntities(){ clearRepaintEntities(){
this.paintableWidgets = {}; this.paintableWidgets = null;
} }
enableRepaintEntities(entities: BaseModel[]){ enableRepaintEntities(entities: BaseModel[]){
@ -51,6 +51,10 @@ export class DiagramEngine extends BaseEnity<DiagramEngineListener>{
}); });
} }
if (entity instanceof PointModel){
this.paintableWidgets[entity.getLink().getID()] = true;
}
this.paintableWidgets[entity.getID()] = true; this.paintableWidgets[entity.getID()] = true;
}); });
} }

15
src/widgets/DiagramWidget.ts
View File

@ -59,10 +59,11 @@ class MoveCanvasAction extends BaseAction{
class MoveItemsAction extends BaseAction{ class MoveItemsAction extends BaseAction{
selectionModels: SelectionModel[]; selectionModels: SelectionModel[];
moved:boolean; moved:boolean;
constructor(mouseX: number, mouseY: number, diagramModel: DiagramModel){ constructor(mouseX: number, mouseY: number, diagramEngine: DiagramEngine){
super(mouseX, mouseY); super(mouseX, mouseY);
this.moved = false; this.moved = false;
this.selectionModels = diagramModel.getSelectedItems().map((item: PointModel | NodeModel) => { diagramEngine.enableRepaintEntities(diagramEngine.getDiagramModel().getSelectedItems());
this.selectionModels = diagramEngine.getDiagramModel().getSelectedItems().map((item: PointModel | NodeModel) => {
return { return {
model: item, model: item,
initialX: item.x, initialX: item.x,
@ -247,6 +248,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
} }
}, },
onMouseDown: (event) =>{ onMouseDown: (event) =>{
diagramEngine.clearRepaintEntities();
var model = this.getMouseElement(event); var model = this.getMouseElement(event);
@ -286,10 +288,10 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
diagramModel.addLink(link); diagramModel.addLink(link);
this.setState({ this.setState({
action: new MoveItemsAction(event.pageX, event.pageY,diagramModel) action: new MoveItemsAction(event.pageX, event.pageY, diagramEngine)
}); });
} }
// //its some or other element, probably want to move it
else{ else{
if (!event.shiftKey && !model.model.isSelected()){ if (!event.shiftKey && !model.model.isSelected()){
@ -299,7 +301,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
model.model.setSelected(true); model.model.setSelected(true);
this.setState({ this.setState({
action: new MoveItemsAction(event.pageX, event.pageY,diagramModel) action: new MoveItemsAction(event.pageX, event.pageY,diagramEngine)
}); });
} }
}, },
@ -323,6 +325,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
} }
} }
diagramEngine.clearRepaintEntities();
this.setState({action: null}); this.setState({action: null});
} }
}, },
@ -332,7 +335,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
event.stopPropagation(); event.stopPropagation();
diagramModel.clearSelection(point); diagramModel.clearSelection(point);
this.setState({ this.setState({
action: new MoveItemsAction(event.pageX, event.pageY, diagramModel) action: new MoveItemsAction(event.pageX, event.pageY, diagramEngine)
}); });
}}):null, }}):null,
React.createElement(NodeLayerWidget, {diagramEngine: diagramEngine}), React.createElement(NodeLayerWidget, {diagramEngine: diagramEngine}),

20
tests/test1/bundle.js
View File

@ -20642,9 +20642,11 @@ var LinkModel = (function (_super) {
return this.points[this.points.length - 1]; return this.points[this.points.length - 1];
}; };
LinkModel.prototype.setSourcePort = function (port) { LinkModel.prototype.setSourcePort = function (port) {
port.addLink(this);
this.sourcePort = port; this.sourcePort = port;
}; };
LinkModel.prototype.setTargetPort = function (port) { LinkModel.prototype.setTargetPort = function (port) {
port.addLink(this);
this.targetPort = port; this.targetPort = port;
}; };
LinkModel.prototype.getPoints = function () { LinkModel.prototype.getPoints = function () {
@ -39934,7 +39936,7 @@ var DiagramEngine = (function (_super) {
return _this; return _this;
} }
DiagramEngine.prototype.clearRepaintEntities = function () { DiagramEngine.prototype.clearRepaintEntities = function () {
this.paintableWidgets = {}; this.paintableWidgets = null;
}; };
DiagramEngine.prototype.enableRepaintEntities = function (entities) { DiagramEngine.prototype.enableRepaintEntities = function (entities) {
var _this = this; var _this = this;
@ -39948,6 +39950,9 @@ var DiagramEngine = (function (_super) {
}); });
}); });
} }
if (entity instanceof Common_1.PointModel) {
_this.paintableWidgets[entity.getLink().getID()] = true;
}
_this.paintableWidgets[entity.getID()] = true; _this.paintableWidgets[entity.getID()] = true;
}); });
}; };
@ -40167,10 +40172,11 @@ var MoveCanvasAction = (function (_super) {
}(BaseAction)); }(BaseAction));
var MoveItemsAction = (function (_super) { var MoveItemsAction = (function (_super) {
__extends(MoveItemsAction, _super); __extends(MoveItemsAction, _super);
function MoveItemsAction(mouseX, mouseY, diagramModel) { function MoveItemsAction(mouseX, mouseY, diagramEngine) {
var _this = _super.call(this, mouseX, mouseY) || this; var _this = _super.call(this, mouseX, mouseY) || this;
_this.moved = false; _this.moved = false;
_this.selectionModels = diagramModel.getSelectedItems().map(function (item) { diagramEngine.enableRepaintEntities(diagramEngine.getDiagramModel().getSelectedItems());
_this.selectionModels = diagramEngine.getDiagramModel().getSelectedItems().map(function (item) {
return { return {
model: item, model: item,
initialX: item.x, initialX: item.x,
@ -40319,6 +40325,7 @@ var DiagramWidget = (function (_super) {
} }
}, },
onMouseDown: function (event) { onMouseDown: function (event) {
diagramEngine.clearRepaintEntities();
var model = _this.getMouseElement(event); var model = _this.getMouseElement(event);
//its the canvas //its the canvas
if (model === null) { if (model === null) {
@ -40347,7 +40354,7 @@ var DiagramWidget = (function (_super) {
link.getLastPoint().setSelected(true); link.getLastPoint().setSelected(true);
diagramModel.addLink(link); diagramModel.addLink(link);
_this.setState({ _this.setState({
action: new MoveItemsAction(event.pageX, event.pageY, diagramModel) action: new MoveItemsAction(event.pageX, event.pageY, diagramEngine)
}); });
} }
else { else {
@ -40357,7 +40364,7 @@ var DiagramWidget = (function (_super) {
} }
model.model.setSelected(true); model.model.setSelected(true);
_this.setState({ _this.setState({
action: new MoveItemsAction(event.pageX, event.pageY, diagramModel) action: new MoveItemsAction(event.pageX, event.pageY, diagramEngine)
}); });
} }
}, },
@ -40377,6 +40384,7 @@ var DiagramWidget = (function (_super) {
}); });
} }
} }
diagramEngine.clearRepaintEntities();
_this.setState({ action: null }); _this.setState({ action: null });
} }
}, this.state.renderedNodes ? }, this.state.renderedNodes ?
@ -40385,7 +40393,7 @@ var DiagramWidget = (function (_super) {
event.stopPropagation(); event.stopPropagation();
diagramModel.clearSelection(point); diagramModel.clearSelection(point);
_this.setState({ _this.setState({
action: new MoveItemsAction(event.pageX, event.pageY, diagramModel) action: new MoveItemsAction(event.pageX, event.pageY, diagramEngine)
}); });
} }
}) : null, React.createElement(NodeLayerWidget_1.NodeLayerWidget, { diagramEngine: diagramEngine }), this.state.action instanceof SelectingAction ? }) : null, React.createElement(NodeLayerWidget_1.NodeLayerWidget, { diagramEngine: diagramEngine }), this.state.action instanceof SelectingAction ?

2
tests/test1/bundle.js.map
View File

File diff suppressed because one or more lines are too long