Skip to content

Commit 57861c6

Browse files
lastlinklastlink
committed
fix multi db fk line generation and export
1 parent 12b3346 commit 57861c6

File tree

3 files changed

+87
-56
lines changed

3 files changed

+87
-56
lines changed

‎src/sql.ts‎

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,58 @@ Draw.loadPlugin(function (ui) {
154154
const sqlInputFromSQL = document.createElement("textarea");
155155
sqlInputFromSQL.style.height = "200px";
156156
sqlInputFromSQL.style.width = "100%";
157-
const defaultReset = `/*\n\tDrawio default value\n\tPlugin: sql\n\tVersion: ${pluginVersion}\n*/\n\nCREATE TABLE Persons\n(\n PersonID int NOT NULL,\n LastName constchar(255),\n ` +
158-
`FirstName constchar(255),\n Address constchar(255),\n City constchar(255),\n Primary Key(PersonID)\n);\n\n` +
159-
`CREATE TABLE Orders\n(\n OrderID int NOT NULL PRIMARY KEY,\n PersonID int NOT NULL,\n FOREIGN KEY ([PersonID]) REFERENCES [Persons]([PersonID])` +
160-
`\n);`;
161-
162-
sqlInputFromSQL.value = defaultReset;
157+
158+
// Sample SQL templates for different database types
159+
const sampleTemplates = {
160+
mysql: `/*\n\tMySQL Sample\n\tPlugin: sql\n\tVersion: ${pluginVersion}\n*/\n\nCREATE TABLE Persons (\n PersonID INT NOT NULL AUTO_INCREMENT,\n LastName VARCHAR(255),\n FirstName VARCHAR(255),\n Address VARCHAR(255),\n City VARCHAR(255),\n PRIMARY KEY (PersonID)\n);\n\nCREATE TABLE Orders (\n OrderID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,\n PersonID INT NOT NULL,\n OrderDate DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (PersonID) REFERENCES Persons(PersonID)\n);`,
161+
162+
postgres: `/*\n\tPostgreSQL Sample\n\tPlugin: sql\n\tVersion: ${pluginVersion}\n*/\n\nCREATE TABLE Persons (\n PersonID SERIAL PRIMARY KEY,\n LastName VARCHAR(255),\n FirstName VARCHAR(255),\n Address VARCHAR(255),\n City VARCHAR(255)\n);\n\nCREATE TABLE Orders (\n OrderID SERIAL PRIMARY KEY,\n PersonID INTEGER NOT NULL,\n OrderDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (PersonID) REFERENCES Persons(PersonID)\n);`,
163+
164+
sqlserver: `/*\n\tSQL Server Sample\n\tPlugin: sql\n\tVersion: ${pluginVersion}\n*/\n\nCREATE TABLE Persons (\n PersonID INT IDENTITY(1,1) PRIMARY KEY,\n LastName NVARCHAR(255),\n FirstName NVARCHAR(255),\n Address NVARCHAR(255),\n City NVARCHAR(255)\n);\n\nCREATE TABLE Orders (\n OrderID INT IDENTITY(1,1) PRIMARY KEY,\n PersonID INT NOT NULL,\n OrderDate DATETIME2 DEFAULT GETDATE(),\n FOREIGN KEY (PersonID) REFERENCES Persons(PersonID)\n);`,
165+
166+
sqlite: `/*\n\tSQLite Sample\n\tPlugin: sql\n\tVersion: ${pluginVersion}\n*/\n\nCREATE TABLE Persons (\n PersonID INTEGER PRIMARY KEY AUTOINCREMENT,\n LastName TEXT,\n FirstName TEXT,\n Address TEXT,\n City TEXT\n);\n\nCREATE TABLE Orders (\n OrderID INTEGER PRIMARY KEY AUTOINCREMENT,\n PersonID INTEGER NOT NULL,\n OrderDate DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (PersonID) REFERENCES Persons(PersonID)\n);`
167+
};
168+
169+
// Database type dropdown
170+
const dbTypeSelect = document.createElement("select");
171+
dbTypeSelect.style.marginTop = "8px";
172+
dbTypeSelect.style.marginRight = "8px";
173+
dbTypeSelect.style.padding = "4px";
174+
175+
const dbTypes = [
176+
{ value: "mysql", label: "MySQL" },
177+
{ value: "postgres", label: "PostgreSQL" },
178+
{ value: "sqlserver", label: "SQL Server" },
179+
{ value: "sqlite", label: "SQLite" }
180+
];
181+
182+
dbTypes.forEach(dbType => {
183+
const option = document.createElement("option");
184+
option.value = dbType.value;
185+
option.textContent = dbType.label;
186+
dbTypeSelect.appendChild(option);
187+
});
188+
189+
// Set default to MySQL
190+
dbTypeSelect.value = "mysql";
191+
192+
// Function to update SQL input based on selected database type
193+
function updateSampleSQL() {
194+
const selectedType = dbTypeSelect.value as keyof typeof sampleTemplates;
195+
sqlInputFromSQL.value = sampleTemplates[selectedType];
196+
}
197+
198+
// Add event listener to dropdown to update sample SQL when selection changes
199+
dbTypeSelect.addEventListener("change", updateSampleSQL);
200+
201+
// Initialize with MySQL sample
202+
sqlInputFromSQL.value = sampleTemplates.mysql;
163203
mxUtils.br(divFromSQL);
164204
divFromSQL.appendChild(sqlInputFromSQL);
205+
206+
// Add dropdown to UI
207+
mxUtils.br(divFromSQL);
208+
divFromSQL.appendChild(dbTypeSelect);
165209

166210
// Extends Extras menu
167211
mxResources.parse("fromSql=From SQL");
@@ -222,45 +266,22 @@ Draw.loadPlugin(function (ui) {
222266
mxUtils.br(divFromSQL);
223267

224268
const resetBtnFromSQL = mxUtils.button(mxResources.get("reset"), function () {
225-
sqlInputFromSQL.value = defaultReset;
269+
updateSampleSQL();
226270
});
227271

228272
resetBtnFromSQL.style.marginTop = "8px";
229273
resetBtnFromSQL.style.marginRight = "4px";
230274
resetBtnFromSQL.style.padding = "4px";
231275
divFromSQL.appendChild(resetBtnFromSQL);
232276

233-
const btnFromSQL_mysql = mxUtils.button("Insert MySQL", function () {
234-
parseSql(sqlInputFromSQL.value, "mysql");
235-
});
236-
237-
btnFromSQL_mysql.style.marginTop = "8px";
238-
btnFromSQL_mysql.style.padding = "4px";
239-
divFromSQL.appendChild(btnFromSQL_mysql);
240-
241-
const btnFromSQL_sqlserver = mxUtils.button("Insert SQL Server", function () {
242-
parseSql(sqlInputFromSQL.value, "sqlserver");
243-
});
244-
245-
btnFromSQL_sqlserver.style.marginTop = "8px";
246-
btnFromSQL_sqlserver.style.padding = "4px";
247-
divFromSQL.appendChild(btnFromSQL_sqlserver);
248-
249-
const btnFromSQL_postgres = mxUtils.button("Insert PostgreSQL", function () {
250-
parseSql(sqlInputFromSQL.value, "postgres");
251-
});
252-
253-
btnFromSQL_postgres.style.marginTop = "8px";
254-
btnFromSQL_postgres.style.padding = "4px";
255-
divFromSQL.appendChild(btnFromSQL_postgres);
256-
257-
const btnFromSQL_sqlite = mxUtils.button("Insert Sqlite", function () {
258-
parseSql(sqlInputFromSQL.value, "sqlite");
277+
const btnFromSQL_insert = mxUtils.button("Insert", function () {
278+
const selectedType = dbTypeSelect.value as "mysql" | "sqlite" | "postgres" | "sqlserver" | undefined;
279+
parseSql(sqlInputFromSQL.value, selectedType);
259280
});
260281

261-
btnFromSQL_sqlite.style.marginTop = "8px";
262-
btnFromSQL_sqlite.style.padding = "4px";
263-
divFromSQL.appendChild(btnFromSQL_sqlite);
282+
btnFromSQL_insert.style.marginTop = "8px";
283+
btnFromSQL_insert.style.padding = "4px";
284+
divFromSQL.appendChild(btnFromSQL_insert);
264285

265286
// Adds action
266287
ui.actions.addAction("fromSql", function () {

‎src/types/sql-plugin-types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface TableEntity {
1212

1313
export interface TableAttribute {
1414
attributeType: string;
15+
attributeComment?: string | null;
1516
attributeName: string;
1617
attributeKeyType?: string;
1718
// "PK" | "FK"

‎src/utils/sharedUtils.ts‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,21 @@ export function getDbLabel(
9595
result.indexOf(columnQuantifiers.End + " ") !== -1
9696
? result.indexOf(columnQuantifiers.End + " ")
9797
: result.indexOf(" ");
98-
const attributeType = result.substring(firstSpaceIndex + 1).trim();
98+
let attributeType = result.substring(firstSpaceIndex + 1).trim();
9999
const attributeName = RemoveNameQuantifiers(
100100
result.substring(0, firstSpaceIndex + 1)
101101
);
102+
const attributesTypes = attributeType.split(" ");
103+
let attributeComment: string | null = null;
104+
if (attributesTypes.length > 1) {
105+
attributeComment = attributesTypes.slice(1).join(' ');
106+
attributeType = attributesTypes[0];
107+
}
108+
102109
const attribute = {
103110
attributeName,
104111
attributeType,
112+
attributeComment,
105113
};
106114
return attribute;
107115
}
@@ -646,6 +654,23 @@ export function CreateTableUI(
646654
// add foreign key edges
647655
const model = graph.getModel();
648656
const columnQuantifiers = GetColumnQuantifiers(type);
657+
658+
const insertEdge = mxUtils.bind(
659+
this,
660+
function (targetCell, sourceCell, edge) {
661+
const label = "";
662+
const edgeStyle =
663+
"edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERzeroToMany;startArrow=ERzeroToOne;labelBackgroundColor=none;fontFamily=Verdana;fontSize=14;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=-0.018;entryY=0.608;entryDx=0;entryDy=0;entryPerimeter=0;";
664+
const edgeCell = graph.insertEdge(
665+
null,
666+
null,
667+
label || "",
668+
edge.invert ? sourceCell : targetCell,
669+
edge.invert ? targetCell : sourceCell,
670+
edgeStyle
671+
);
672+
}
673+
);
649674
// const pt = graph.getFreeInsertPoint();
650675
foreignKeyList.forEach(function (fk) {
651676
if (
@@ -655,22 +680,6 @@ export function CreateTableUI(
655680
fk.PrimaryKeyTableName &&
656681
fk.ReferencesTableName
657682
) {
658-
const insertEdge = mxUtils.bind(
659-
this,
660-
function (targetCell, sourceCell, edge) {
661-
const label = "";
662-
const edgeStyle =
663-
"edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERzeroToMany;startArrow=ERzeroToOne;labelBackgroundColor=none;fontFamily=Verdana;fontSize=14;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=-0.018;entryY=0.608;entryDx=0;entryDy=0;entryPerimeter=0;";
664-
const edgeCell = graph.insertEdge(
665-
null,
666-
null,
667-
label || "",
668-
edge.invert ? sourceCell : targetCell,
669-
edge.invert ? targetCell : sourceCell,
670-
edgeStyle
671-
);
672-
}
673-
);
674683
const edge = {
675684
invert: true,
676685
};
@@ -703,15 +712,15 @@ export function CreateTableUI(
703712
);
704713
if (
705714
isPrimaryTable &&
706-
dbTypeEnds(attribute.attributeName) == fk.PrimaryKeyName
715+
RemoveNameQuantifiers(attribute.attributeName) == RemoveNameQuantifiers(fk.PrimaryKeyName)
707716
) {
708717
targetCell = col;
709718
// allow recursion
710719
}
711720
if (
712721
isForeignTable &&
713-
dbTypeEnds(attribute.attributeName) ==
714-
fk.ReferencesPropertyName
722+
RemoveNameQuantifiers(attribute.attributeName) ==
723+
RemoveNameQuantifiers(fk.ReferencesPropertyName)
715724
) {
716725
sourceCell = col;
717726
}

0 commit comments

Comments
 (0)