Skip to content

Commit aa53afa

Browse files
aasimkhan30aasimkhan30
committed
Fixing layout and editing mode
1 parent 7944a79 commit aa53afa

File tree

5 files changed

+261
-66
lines changed

5 files changed

+261
-66
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<h1>Examples</h1>
88
<ul>
99
<li><a href="ts-examples/helloWorld.html">Hello World</a> - A simple example that loads mxgraph with 2 cells and a connection between them.</li>
10-
<li><a href="ts-examples/schemaDesigner.html">Schema Designer</a> - Creates a schemaDesigner with a test schema</li>
10+
<li><a href="ts-examples/bigSchema.html">Schema Designer with a big schema loaded</a> - Creates a schemaDesigner with using the world wide importers schema</li>
11+
<li><a href="ts-examples/smallSchema.html">Schema Designer with an small schema</a> - Creates a small demo schema</li>
1112
</ul>
1213
</body>
1314
</html>

‎src/ts/schemaDesigner/schemaDesigner.ts‎

Lines changed: 73 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class SchemaDesigner {
5656
}
5757

5858
private setupGraphOptions() {
59+
this._graph.setResizeContainer(true);
5960
this._graph.setAllowNegativeCoordinates(true);
6061
this._graph.setGridEnabled(true);
6162
this._graph.tooltipHandler.setEnabled(false);
@@ -68,6 +69,7 @@ export class SchemaDesigner {
6869
this._graph.setAllowDanglingEdges(false);
6970
this._graph.setHtmlLabels(true);
7071
this._graph.view.optimizeVmlReflows = false;
72+
this._graph.connectionHandler.enabled = false;
7173
this._graph.connectionHandler.movePreviewAway = false;
7274
this._graph.connectionHandler.moveIconFront = true;
7375
this._graph.connectionHandler.connectImage = new mx.mxImage(
@@ -192,7 +194,7 @@ export class SchemaDesigner {
192194
return !this._model.isEdge(cell);
193195
}
194196
this._graph.isCellEditable = (cell) => {
195-
return !this._model.isEdge(cell);
197+
return this._config.isEditable && !this._model.isEdge(cell);
196198
}
197199
this._graph.isCellMovable = (cell) => {
198200
return !this._model.isEdge(cell);
@@ -399,7 +401,7 @@ export class SchemaDesigner {
399401
this._graph.view.invalidate(source, false, false);
400402
this._graph.view.validate(source);
401403
});
402-
404+
403405
this._graph.getStylesheet().getDefaultVertexStyle()['cellHighlightColor'] = "red";
404406
this._graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = mx.mxEdgeStyle.ElbowConnector;
405407
this._graph.stylesheet.getDefaultEdgeStyle()[mx.mxConstants.STYLE_EDGE] = mx.mxConstants.EDGESTYLE_ENTITY_RELATION;
@@ -420,54 +422,58 @@ export class SchemaDesigner {
420422
toolbarBelt.classList.add("sd-toolbar-belt");
421423
this._container.appendChild(toolbarBelt);
422424
this._toolbar = new SchemaDesignerToolbar(toolbarBelt, this._graph, this._config);
423-
this._toolbar.addButton(
424-
this._config.icons.addTableIcon,
425-
"Add Table",
426-
() => {
427-
},
428-
(_graph, evt, _cell) => {
429-
this._graph.stopEditing(false);
430-
const pt = this._graph.getPointForEvent(evt, true);
431-
const entity = {
432-
name: "New Table",
433-
schema: "dbo",
434-
columns: [{
435-
name: "Column1",
436-
type: "int",
437-
isPrimaryKey: true,
438-
isIdentity: true
439-
}, {
440-
name: "Column2",
441-
type: "int",
442-
isPrimaryKey: false,
443-
isIdentity: false
444-
}, {
445-
name: "Column2",
446-
type: "int",
447-
isPrimaryKey: false,
448-
isIdentity: false
449-
}]
450-
};
425+
if (this._config.isEditable) {
426+
this._toolbar.addButton(
427+
this._config.icons.addTableIcon,
428+
"Add Table",
429+
() => {
430+
},
431+
(_graph, evt, _cell) => {
432+
this._graph.stopEditing(false);
433+
const pt = this._graph.getPointForEvent(evt, true);
434+
const entity = {
435+
name: "New Table",
436+
schema: "dbo",
437+
columns: [{
438+
name: "Column1",
439+
type: "int",
440+
isPrimaryKey: true,
441+
isIdentity: true
442+
}, {
443+
name: "Column2",
444+
type: "int",
445+
isPrimaryKey: false,
446+
isIdentity: false
447+
}, {
448+
name: "Column2",
449+
type: "int",
450+
isPrimaryKey: false,
451+
isIdentity: false
452+
}]
453+
};
454+
455+
this.renderEntity(entity, pt.x, pt.y);
456+
}
457+
);
458+
this._toolbar.addDivider();
459+
this._toolbar.addButton(
460+
this._config.icons.undoIcon,
461+
"Undo",
462+
() => {
463+
this._editor.execute("undo");
464+
}
465+
);
466+
this._toolbar.addButton(
467+
this._config.icons.redoIcon,
468+
"Redo",
469+
() => {
470+
this._editor.execute("redo");
471+
}
472+
);
473+
this._toolbar.addDivider();
474+
}
475+
451476

452-
this.renderEntity(entity, pt.x, pt.y);
453-
}
454-
);
455-
this._toolbar.addDivider();
456-
this._toolbar.addButton(
457-
this._config.icons.undoIcon,
458-
"Undo",
459-
() => {
460-
this._editor.execute("undo");
461-
}
462-
);
463-
this._toolbar.addButton(
464-
this._config.icons.redoIcon,
465-
"Redo",
466-
() => {
467-
this._editor.execute("redo");
468-
}
469-
);
470-
this._toolbar.addDivider();
471477
this._toolbar.addButton(
472478
this._config.icons.zoomInIcon,
473479
"Zoom In",
@@ -503,17 +509,19 @@ export class SchemaDesigner {
503509
console.log(schema);
504510
}
505511
);
506-
this._toolbar.addDivider();
507-
this._toolbar.addButton(
508-
this._config.icons.deleteIcon,
509-
"Delete",
510-
() => {
511-
const cell = this._graph.getSelectionCell();
512-
if (cell !== undefined) {
513-
this._editor.execute("delete", cell);
512+
if (this._config.isEditable) {
513+
this._toolbar.addDivider();
514+
this._toolbar.addButton(
515+
this._config.icons.deleteIcon,
516+
"Delete",
517+
() => {
518+
const cell = this._graph.getSelectionCell();
519+
if (cell !== undefined) {
520+
this._editor.execute("delete", cell);
521+
}
514522
}
515-
}
516-
);
523+
);
524+
}
517525
}
518526

519527
private redrawEdges() {
@@ -642,12 +650,14 @@ export class SchemaDesigner {
642650
this._graph.center();
643651

644652
const mostNegativeX = this.mostNegativeX();
645-
const cellsWithNegativeX = cells.filter((cell) => cell.geometry.x < 0 || cell.isEdge());
646-
this._graph.moveCells(cellsWithNegativeX, -mostNegativeX + 500, 0, false);
653+
console.log('-x', mostNegativeX);
647654

648655
const mostNegativeY = this.mostNegativeY();
649-
const cellsWithNegativeY = cells.filter((cell) => cell.geometry.y < 0 || cell.isEdge());
650-
this._graph.moveCells(cellsWithNegativeY, 0, -mostNegativeY + 500, false);
656+
console.log('-y', mostNegativeY);
657+
658+
this._graph.moveCells(cells, -mostNegativeX + 100, -mostNegativeY + 100, false);
659+
this._graph.sizeDidChange();
660+
651661
this._model.endUpdate();
652662
}
653663

‎src/ts/schemaDesigner/schemaDesignerInterfaces.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,5 @@ export interface SchemaDesignerConfig {
106106
invalidColor: string;
107107
}
108108
graphFontFamily: string;
109+
isEditable: boolean;
109110
}

ts-examples/schemaDesigner.html renamed to ts-examples/bigSchema.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Hello World Library</title>
6+
<title>Big Schema Designer</title>
77
<link rel="stylesheet" href="../dist/index.css" />
88
<script type="module">
99
import { SchemaDesigner } from "../dist/index.js";
@@ -21,7 +21,6 @@
2121
edgeStrokeColor: "black",
2222
validColor: "#2ecc71",
2323
invalidColor: "#e74c3c",
24-
2524
},
2625
icons: {
2726
addTableIcon: "./resources/addTable.svg",
@@ -38,6 +37,7 @@
3837
exportIcon: "./resources/export.svg",
3938
autoarrangeIcon: "./resources/arrange.svg",
4039
},
40+
isEditable: false,
4141
});
4242
schemaDesigner.renderModel(test);
4343
}
@@ -74,6 +74,8 @@
7474
overflow: scroll;
7575
width: 100%;
7676
height: calc(100vh - 20px);
77+
min-width: 100%;
78+
min-height: calc(100vh - 20px);
7779
user-select: none;
7880
}
7981
</style>

0 commit comments

Comments
 (0)