Skip to content

Commit ccb1b7d

Browse files
github-actions[bot]github-actions[bot]
committed
Release v0.0.112
1 parent 1edd4e3 commit ccb1b7d

9 files changed

+231
-52
lines changed

‎dist/index.js

+66-16
Original file line numberDiff line numberDiff line change
@@ -48637,34 +48637,21 @@ var SchemaDesigner = class {
4863748637
this.config.icons.zoomInIcon,
4863848638
"Zoom In",
4863948639
() => {
48640-
this.mxEditor.execute("zoomIn");
48641-
this.redrawEdges();
48642-
this.updateEditorPosition();
48640+
this.zoomIn();
4864348641
}
4864448642
);
4864548643
this.toolbar.addButton(
4864648644
this.config.icons.zoomOutIcon,
4864748645
"Zoom Out",
4864848646
() => {
48649-
this.mxEditor.execute("zoomOut");
48650-
this.redrawEdges();
48651-
this.updateEditorPosition();
48647+
this.zoomOut();
4865248648
}
4865348649
);
4865448650
this.toolbar.addButton(
4865548651
this.config.icons.zoomFitIcon,
4865648652
"Fit",
4865748653
() => {
48658-
this.mxGraph.view.rendering = false;
48659-
while (true) {
48660-
this.mxGraph.fit(null);
48661-
if (this.mxGraph.view.scale < 1) {
48662-
break;
48663-
}
48664-
}
48665-
this.mxGraph.view.rendering = true;
48666-
this.autoLayout();
48667-
this.updateEditorPosition();
48654+
this.zoomToFit();
4866848655
}
4866948656
);
4867048657
this.toolbar.addDivider();
@@ -48697,6 +48684,56 @@ var SchemaDesigner = class {
4869748684
}
4869848685
);
4869948686
}
48687+
if (this.config.showToolbar === false) {
48688+
toolbarBelt.style.display = "none";
48689+
}
48690+
}
48691+
/**
48692+
* Zoom in the schema designer
48693+
*/
48694+
zoomIn() {
48695+
this.mxEditor.execute("zoomOut");
48696+
this.redrawEdges();
48697+
this.updateEditorPosition();
48698+
}
48699+
/**
48700+
* Zoom out the schema designer
48701+
*/
48702+
zoomOut() {
48703+
this.mxEditor.execute("zoomIn");
48704+
this.redrawEdges();
48705+
this.updateEditorPosition();
48706+
}
48707+
/**
48708+
* Zoom to fit the schema designer
48709+
*/
48710+
zoomToFit() {
48711+
this.mxGraph.view.rendering = false;
48712+
while (true) {
48713+
this.mxGraph.fit(null);
48714+
if (this.mxGraph.view.scale < 1) {
48715+
break;
48716+
}
48717+
}
48718+
this.mxGraph.view.rendering = true;
48719+
this.autoLayout();
48720+
this.updateEditorPosition();
48721+
}
48722+
/**
48723+
* Adds a drag and drop listener for the table
48724+
* @param element The element to make draggable
48725+
*/
48726+
addTableDragAndDropListener(element) {
48727+
this.makeElementDraggable(element, (_graph, evt, _cell) => {
48728+
this.mxGraph.stopEditing(false);
48729+
const pt = this.mxGraph.getPointForEvent(evt, true);
48730+
const entity = this.createTable();
48731+
const cell2 = this.renderTable(entity, pt.x, pt.y);
48732+
const state = this.mxGraph.view.getState(cell2);
48733+
if (state !== void 0) {
48734+
cell2.value.editTable(state);
48735+
}
48736+
});
4870048737
}
4870148738
/**
4870248739
* Redraws the edges in the schema designer
@@ -49027,6 +49064,19 @@ var SchemaDesigner = class {
4902749064
}, /* @__PURE__ */ new Map());
4902849065
return Array.from(foreignKeyMap.values());
4902949066
}
49067+
makeElementDraggable(element, onDragEndCallback) {
49068+
if (onDragEndCallback) {
49069+
const dragImage = element.cloneNode(true);
49070+
dragImage.style.backgroundColor = this.config.colors.toolbarBackground;
49071+
const ds = mxGraphFactory.mxUtils.makeDraggable(
49072+
element,
49073+
this.mxGraph,
49074+
onDragEndCallback,
49075+
dragImage
49076+
);
49077+
ds.highlightDropTargets = true;
49078+
}
49079+
}
4903049080
async exportImage(format) {
4903149081
const selectedCells = this.mxGraph.getSelectionCells();
4903249082
this.mxGraph.setSelectionCells([]);

‎dist/index.js.map

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/src/ts/schemaDesigner/schemaDesigner.d.ts

+18
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,23 @@ export declare class SchemaDesigner {
6767
* Initializes the toolbar for the schema designer
6868
*/
6969
private initializeToolbar;
70+
/**
71+
* Zoom in the schema designer
72+
*/
73+
zoomIn(): void;
74+
/**
75+
* Zoom out the schema designer
76+
*/
77+
zoomOut(): void;
78+
/**
79+
* Zoom to fit the schema designer
80+
*/
81+
zoomToFit(): void;
82+
/**
83+
* Adds a drag and drop listener for the table
84+
* @param element The element to make draggable
85+
*/
86+
addTableDragAndDropListener(element: HTMLElement): void;
7087
/**
7188
* Redraws the edges in the schema designer
7289
*/
@@ -141,6 +158,7 @@ export declare class SchemaDesigner {
141158
*/
142159
updateActiveCellStateTable(editedTable: ITable): void;
143160
getForeignKeysForTable(tableCell: mxCell): IForeignKey[];
161+
makeElementDraggable(element: HTMLElement, onDragEndCallback?: (graph: mxGraph, evt: MouseEvent, cell: mxCellState) => void): void;
144162
exportImage(format: string): Promise<{
145163
fileContent: string;
146164
format: string;

‎dist/src/ts/schemaDesigner/schemaDesigner.js

+62-16
Original file line numberDiff line numberDiff line change
@@ -486,26 +486,13 @@ class SchemaDesigner {
486486
this.toolbar.addDivider();
487487
}
488488
this.toolbar.addButton(this.config.icons.zoomInIcon, "Zoom In", () => {
489-
this.mxEditor.execute("zoomIn");
490-
this.redrawEdges();
491-
this.updateEditorPosition();
489+
this.zoomIn();
492490
});
493491
this.toolbar.addButton(this.config.icons.zoomOutIcon, "Zoom Out", () => {
494-
this.mxEditor.execute("zoomOut");
495-
this.redrawEdges();
496-
this.updateEditorPosition();
492+
this.zoomOut();
497493
});
498494
this.toolbar.addButton(this.config.icons.zoomFitIcon, "Fit", () => {
499-
this.mxGraph.view.rendering = false;
500-
while (true) {
501-
this.mxGraph.fit(null);
502-
if (this.mxGraph.view.scale < 1) {
503-
break;
504-
}
505-
}
506-
this.mxGraph.view.rendering = true;
507-
this.autoLayout();
508-
this.updateEditorPosition();
495+
this.zoomToFit();
509496
});
510497
this.toolbar.addDivider();
511498
this.toolbar.addButton(this.config.icons.autoArrangeCellsIcon, "Auto Arrange", () => {
@@ -525,6 +512,57 @@ class SchemaDesigner {
525512
this.config.publish(schema);
526513
});
527514
}
515+
if (this.config.showToolbar === false) {
516+
toolbarBelt.style.display = "none";
517+
}
518+
}
519+
/**
520+
* Zoom in the schema designer
521+
*/
522+
zoomIn() {
523+
this.mxEditor.execute("zoomOut");
524+
this.redrawEdges();
525+
this.updateEditorPosition();
526+
}
527+
/**
528+
* Zoom out the schema designer
529+
*/
530+
zoomOut() {
531+
this.mxEditor.execute("zoomIn");
532+
this.redrawEdges();
533+
this.updateEditorPosition();
534+
}
535+
/**
536+
* Zoom to fit the schema designer
537+
*/
538+
zoomToFit() {
539+
this.mxGraph.view.rendering = false;
540+
while (true) {
541+
this.mxGraph.fit(null);
542+
if (this.mxGraph.view.scale < 1) {
543+
break;
544+
}
545+
}
546+
this.mxGraph.view.rendering = true;
547+
this.autoLayout();
548+
this.updateEditorPosition();
549+
}
550+
/**
551+
* Adds a drag and drop listener for the table
552+
* @param element The element to make draggable
553+
*/
554+
addTableDragAndDropListener(element) {
555+
this.makeElementDraggable(element, (_graph, evt, _cell) => {
556+
this.mxGraph.stopEditing(false);
557+
const pt = this.mxGraph.getPointForEvent(evt, true);
558+
const entity = this.createTable();
559+
const cell = this.renderTable(entity, pt.x, pt.y);
560+
// Get cell state
561+
const state = this.mxGraph.view.getState(cell);
562+
if (state !== undefined) {
563+
cell.value.editTable(state);
564+
}
565+
});
528566
}
529567
/**
530568
* Redraws the edges in the schema designer
@@ -856,6 +894,14 @@ class SchemaDesigner {
856894
}, new Map());
857895
return Array.from(foreignKeyMap.values());
858896
}
897+
makeElementDraggable(element, onDragEndCallback) {
898+
if (onDragEndCallback) {
899+
const dragImage = element.cloneNode(true);
900+
dragImage.style.backgroundColor = this.config.colors.toolbarBackground;
901+
const ds = mx_1.mxGraphFactory.mxUtils.makeDraggable(element, this.mxGraph, onDragEndCallback, dragImage);
902+
ds.highlightDropTargets = true;
903+
}
904+
}
859905
exportImage(format) {
860906
return __awaiter(this, void 0, void 0, function* () {
861907
const selectedCells = this.mxGraph.getSelectionCells();

‎dist/src/ts/schemaDesigner/schemaDesignerInterfaces.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@ export interface SchemaDesignerConfig {
140140
* @param model schema model
141141
*/
142142
publish: (model: ISchema) => void;
143+
/**
144+
* If the toolbar should be shown
145+
*/
146+
showToolbar: boolean;
143147
}
144148
/**
145149
* Interface for edge cells in schema designer

‎dist/tsconfig.tsbuildinfo

+1-1
Large diffs are not rendered by default.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "azdataGraph",
33
"description": "azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
4-
"version": "0.0.111",
4+
"version": "0.0.112",
55
"homepage": "https://github.com/microsoft/azdataGraph",
66
"author": "Microsoft",
77
"license": "Apache-2.0",

‎src/ts/schemaDesigner/schemaDesigner.ts

+73-16
Original file line numberDiff line numberDiff line change
@@ -543,36 +543,23 @@ export class SchemaDesigner {
543543
this.config.icons.zoomInIcon,
544544
"Zoom In",
545545
() => {
546-
this.mxEditor.execute("zoomIn");
547-
this.redrawEdges();
548-
this.updateEditorPosition();
546+
this.zoomIn();
549547
}
550548
);
551549

552550
this.toolbar.addButton(
553551
this.config.icons.zoomOutIcon,
554552
"Zoom Out",
555553
() => {
556-
this.mxEditor.execute("zoomOut");
557-
this.redrawEdges();
558-
this.updateEditorPosition();
554+
this.zoomOut();
559555
}
560556
);
561557

562558
this.toolbar.addButton(
563559
this.config.icons.zoomFitIcon,
564560
"Fit",
565561
() => {
566-
this.mxGraph.view.rendering = false;
567-
while (true) {
568-
this.mxGraph.fit(null!);
569-
if(this.mxGraph.view.scale < 1) {
570-
break;
571-
}
572-
}
573-
this.mxGraph.view.rendering = true;
574-
this.autoLayout();
575-
this.updateEditorPosition();
562+
this.zoomToFit();
576563
}
577564
);
578565

@@ -608,6 +595,62 @@ export class SchemaDesigner {
608595
}
609596
);
610597
}
598+
599+
if (this.config.showToolbar === false) {
600+
toolbarBelt.style.display = "none";
601+
}
602+
}
603+
604+
/**
605+
* Zoom in the schema designer
606+
*/
607+
public zoomIn() {
608+
this.mxEditor.execute("zoomOut");
609+
this.redrawEdges();
610+
this.updateEditorPosition();
611+
}
612+
613+
/**
614+
* Zoom out the schema designer
615+
*/
616+
public zoomOut() {
617+
this.mxEditor.execute("zoomIn");
618+
this.redrawEdges();
619+
this.updateEditorPosition();
620+
}
621+
622+
/**
623+
* Zoom to fit the schema designer
624+
*/
625+
public zoomToFit() {
626+
this.mxGraph.view.rendering = false;
627+
while (true) {
628+
this.mxGraph.fit(null!);
629+
if (this.mxGraph.view.scale < 1) {
630+
break;
631+
}
632+
}
633+
this.mxGraph.view.rendering = true;
634+
this.autoLayout();
635+
this.updateEditorPosition();
636+
}
637+
638+
/**
639+
* Adds a drag and drop listener for the table
640+
* @param element The element to make draggable
641+
*/
642+
public addTableDragAndDropListener(element: HTMLElement) {
643+
this.makeElementDraggable(element, (_graph: mxGraph, evt: MouseEvent, _cell: mxCellState) => {
644+
this.mxGraph.stopEditing(false);
645+
const pt = this.mxGraph.getPointForEvent(evt, true);
646+
const entity: ITable = this.createTable();
647+
const cell = this.renderTable(entity, pt.x, pt.y);
648+
// Get cell state
649+
const state = this.mxGraph.view.getState(cell);
650+
if (state !== undefined) {
651+
(cell.value as SchemaDesignerTable).editTable(state);
652+
}
653+
})
611654
}
612655

613656
/**
@@ -986,6 +1029,20 @@ export class SchemaDesigner {
9861029
return Array.from(foreignKeyMap.values());
9871030
}
9881031

1032+
public makeElementDraggable(element: HTMLElement, onDragEndCallback?: (graph: mxGraph, evt: MouseEvent, cell: mxCellState) => void) {
1033+
if (onDragEndCallback) {
1034+
const dragImage = element.cloneNode(true) as HTMLElement;
1035+
dragImage.style.backgroundColor = this.config.colors.toolbarBackground;
1036+
const ds = mx.mxUtils.makeDraggable(
1037+
element,
1038+
this.mxGraph,
1039+
onDragEndCallback,
1040+
dragImage
1041+
);
1042+
ds.highlightDropTargets = true;
1043+
}
1044+
}
1045+
9891046
public async exportImage(format: string): Promise<{
9901047
fileContent: string,
9911048
format: string,

0 commit comments

Comments
 (0)