Skip to content

Commit ab51675

Browse files
algentyalgenty
authored
Merge pull request #349 from algenty:20220602_Remove_utils_raw
change loadfile template
2 parents e524554 + 358c9ce commit ab51675

File tree

5 files changed

+162
-105
lines changed

5 files changed

+162
-105
lines changed

‎src/drawio_base.ts

+56-16
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ type DrawioRequiredOptions = Complete<DrawioOptions>;
2929
export class GFDrawio {
3030
private static _GFInitialized = false;
3131
private static _libInitialized = false;
32+
private static _xmlTemplate: string;
33+
private static _csvTemplate: string;
3234
static libPromize: Promise<unknown> | undefined;
3335
static options: DrawioRequiredOptions;
3436
static events: GFEvents<GFDrawioSignals> = GFEvents.create(gfdrawioSignalsArray);
@@ -85,9 +87,55 @@ export class GFDrawio {
8587
return;
8688
}
8789

90+
static getTemplate(type: gf.TSourceTypeKeys) {
91+
if(type === 'xml') {
92+
return GFDrawio.getXmlTemplate();
93+
}
94+
if(type === 'csv') {
95+
return GFDrawio.getCsvTemplate();
96+
}
97+
throw new Error(`Unknown type ${type}`);
98+
99+
}
100+
101+
static getXmlTemplate() {
102+
if (GFDrawio._xmlTemplate) {
103+
return GFDrawio._xmlTemplate;
104+
}
105+
const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTDIO}`;
106+
return GFDrawio.loadFile(url).then((txt) => {
107+
GFDrawio._xmlTemplate = txt;
108+
return txt;
109+
});
110+
}
111+
112+
static getCsvTemplate() {
113+
if (GFDrawio._csvTemplate) {
114+
return GFDrawio._csvTemplate;
115+
}
116+
const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTCSV}`;
117+
return GFDrawio.loadFile(url).then((txt) => {
118+
GFDrawio._csvTemplate = txt;
119+
return txt;
120+
});
121+
}
122+
123+
static async loadFile(url: string) {
124+
try {
125+
const resp = await fetch(url);
126+
const txt = await resp.text();
127+
return txt;
128+
} catch (error) {
129+
throw new Error(`Can't load file ${url} : ${error}`);
130+
}
131+
}
132+
133+
134+
88135
//############################################################################
89136
//### PRIVATE
90137
//############################################################################
138+
91139
private static _getDefaultRequiredOptions(): DrawioRequiredOptions {
92140
return {
93141
mode: 'server',
@@ -195,7 +243,6 @@ export class GFDrawio {
195243
* @returns string
196244
*/
197245
static getTextContent(node: Object): string {
198-
199246
const _node: any = node;
200247
return _node != null ? _node[_node.hasOwnProperty('textContent') === undefined ? 'text' : 'textContent'] : '';
201248
}
@@ -238,7 +285,9 @@ export class GFDrawio {
238285
}
239286
}
240287
} catch (e) {
241-
GFLog.error(`parseXml : Unable to decode ${data}`);
288+
// GFLog.error(`parseXml : Unable to decode ${data}`);
289+
throw new Error("parseXml : Unable to decode");
290+
242291
return '';
243292
}
244293
// data = atob(data);
@@ -250,8 +299,8 @@ export class GFDrawio {
250299
{ to: 'string' }
251300
);
252301
} catch (e) {
253-
GFLog.error(`Pako : Unable to decode ${data}`);
254-
return '';
302+
// GFLog.error(`Pako : Unable to decode ${data}`);
303+
throw new Error("Pako : Unable to decode");
255304
}
256305
}
257306

@@ -272,7 +321,6 @@ export class GFDrawio {
272321
GFLog.error(`Unable to encode/encodeURIComponent : ${data}`, e);
273322
return;
274323
}
275-
276324
if (data.length > 0) {
277325
try {
278326
let deflateRaws = deflateRaw(data);
@@ -297,18 +345,10 @@ export class GFDrawio {
297345

298346
static isEncoded(data: string) {
299347
try {
300-
const node = this.parseXml(data).documentElement;
301-
if (node != null && node.nodeName === 'mxfile') {
302-
const diagrams = node.getElementsByTagName('diagram');
303-
if (diagrams.length > 0) {
304-
return true;
305-
}
306-
} else {
307-
return data.indexOf('mxGraphModel') === -1;
308-
}
348+
GFDrawio.decode(data);
309349
} catch (error) {
310-
return true;
350+
return false;
311351
}
312-
return false;
352+
return true;
313353
}
314354
}

‎src/flowchart_class.ts

+41-34
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { XGraph } from 'graph_class';
22
import { StateHandler } from 'states_handler';
3-
import { FlowchartHandler } from 'flowchart_handler';
3+
// import { FlowchartHandler } from 'flowchart_handler';
44
import { $GF, GFLog } from 'globals_class';
55
import { GFEvents } from 'flowcharting_base';
66
import { GFDrawio } from 'drawio_base';
@@ -71,8 +71,6 @@ export class Flowchart {
7171
}
7272

7373
change() {
74-
const funcName = 'change';
75-
GFLog.debug(`${this.constructor.name}.${funcName}() : ${this.uid}`);
7674
this.change_xgraph();
7775
this.events.emit('flowchart_changed', this);
7876
}
@@ -142,10 +140,7 @@ export class Flowchart {
142140
}
143141
this.data.csv = value;
144142
}
145-
if (this.xgraph) {
146-
this.xgraph.source = this.getResolvedSource();
147143
this.change();
148-
}
149144
}
150145
get source() {
151146
return this.data.type === 'csv' ? this.data.csv : this.data.xml;
@@ -157,10 +152,7 @@ export class Flowchart {
157152
return;
158153
}
159154
this.data.download = value;
160-
if (value && this.xgraph) {
161-
this.xgraph.source = this.getResolvedSource();
162-
}
163-
this.change();
155+
this.change();
164156
}
165157
get download() {
166158
return this.data.download;
@@ -352,8 +344,8 @@ export class Flowchart {
352344
static getDefaultData(): gf.TFlowchartData {
353345
return {
354346
name: 'Main',
355-
xml: FlowchartHandler.getDefaultDioGraph(),
356-
csv: FlowchartHandler.getDefaultCsvGraph(),
347+
xml: '',
348+
csv: '',
357349
download: false,
358350
type: 'xml',
359351
url: 'http://<YourUrl>/<Your XML/drawio file/api>',
@@ -379,6 +371,9 @@ export class Flowchart {
379371
}
380372

381373
init_stateHandler(): this {
374+
if(this.stateHandler) {
375+
this.stateHandler.free()
376+
}
382377
if (this.xgraph) {
383378
this.stateHandler = new StateHandler(this.$gf, this.xgraph);
384379
}
@@ -391,31 +386,30 @@ export class Flowchart {
391386
* @return {this}
392387
* @memberof Flowchart
393388
*/
394-
init_xgraph(): this {
389+
async init_xgraph() {
395390
const $GF = this.$gf;
396391
try {
397-
const content = this.getResolvedSource();
398-
if (this.xgraph !== undefined) {
399-
this.xgraph.free();
400-
}
401-
this.xgraph = new XGraph(this.$gf, this.container, this.data.type, content);
402-
this.xgraph.events.connect('graph_changed', this, this._on_xgraph_graph_changed.bind(this));
392+
return this.resolveSource().then((content) => {
393+
if (this.xgraph !== undefined) {
394+
this.xgraph.free();
395+
}
396+
this.xgraph = new XGraph(this.$gf, this.container, this.data.type, content);
397+
this.xgraph.events.connect('graph_changed', this, this._on_flowchart_graph_changed.bind(this));
398+
this.update_graph();
399+
this.events.emit('graph_changed', this.xgraph);
400+
});
403401
} catch (error) {
404402
$GF.notify('Unable to initialize graph', 'error');
405403
GFLog.error('Unable to initialize graph', error);
406404
}
407-
return this;
405+
return;
408406
}
409407

410408
change_xgraph(): this {
411409
const $GF = this.$gf;
412410
try {
413411
// const content = this.getResolvedSource();
414412
this.init_xgraph();
415-
// if (content !== undefined && content !== null) {
416-
this.xgraph?.change();
417-
this.update_graph();
418-
// this.xgraph?.update();
419413
$GF.clearNotify();
420414
} catch (error) {
421415
$GF.notify('Unable to initialize graph', 'error');
@@ -693,23 +687,35 @@ export class Flowchart {
693687
* @returns
694688
* @memberof Flowchart
695689
*/
696-
getResolvedSource(replaceVarBool = true): string {
690+
async resolveSource(replaceVarBool = true): Promise<string> {
697691
const $GF = this.$gf;
698-
let content: string | null = '';
692+
let content = '';
699693
if (this.download) {
700694
const url = $GF.resolveVars(this.data.url);
701695
$GF.notify(`Loading content definition for ${this.data.name}`, 'info');
702-
content = this.loadContent(url);
696+
content = await GFDrawio.loadFile(url);
703697
$GF.clearNotify();
704698
if (content !== null) {
705699
if (replaceVarBool) {
706700
content = $GF.resolveVars(content);
707701
}
708702
}
709703
} else {
704+
if(!this.source || this.source.length === 0) {
705+
content = await GFDrawio.getTemplate(this.type);
706+
if(this.type === 'xml'){
707+
this.data.xml = content;
708+
};
709+
if(this.type === 'csv'){
710+
this.data.csv = content;
711+
};
712+
}
713+
if(GFDrawio.isEncoded(content)) {
714+
content = GFDrawio.decode(content);
715+
}
710716
content = $GF.resolveVars(this.source);
711717
}
712-
return content === null ? '' : content;
718+
return content;
713719
}
714720

715721
/**
@@ -720,9 +726,9 @@ export class Flowchart {
720726
* @memberof Flowchart
721727
*/
722728
//TODO : Transform to fetch
723-
loadContent(url: string): string | null {
724-
return $GF.utils.$loadFile(url);
725-
}
729+
// loadContent(url: string): string | null {
730+
// return $GF.utils.$loadFile(url);
731+
// }
726732

727733
/**
728734
* Apply xml to graph
@@ -817,11 +823,12 @@ export class Flowchart {
817823
//###########################################################################
818824
//### EVENTS
819825
//###########################################################################
820-
private _on_xgraph_graph_changed() {
826+
private _on_flowchart_graph_changed() {
821827
_log('📬', this.constructor.name, '_on_flowchart_graph_changed');
822828
if (this.xgraph) {
823-
this.stateHandler?.setXGraph(this.xgraph);
824-
this.stateHandler?.init();
829+
this.init_stateHandler();
830+
// this.stateHandler?.setXGraph(this.xgraph);
831+
// this.stateHandler?.init();
825832
}
826833
}
827834

‎src/flowchart_handler.ts

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Flowchart } from 'flowchart_class';
2-
import { $GF, GFCONSTANT, GFPlugin } from 'globals_class';
2+
import { $GF, GFCONSTANT } from 'globals_class';
33
import { InteractiveMap, ObjectMap } from 'mapping_class';
44
import { GFEvents } from 'flowcharting_base';
55

@@ -48,7 +48,7 @@ export class FlowchartHandler {
4848
constructor($gf: $GF, data: gf.TFlowchartHandlerData, oldData?: any) {
4949
this.$gf = $gf;
5050
this.$gf.flowchartHandler = this;
51-
FlowchartHandler.getDefaultDioGraph();
51+
// FlowchartHandler.getDefaultDioGraph();
5252
this.uid = $GF.genUid(this.constructor.name);
5353
this._parentDiv = this.$gf.ctrl.flowchartsDiv;
5454
this.data = data;
@@ -205,14 +205,14 @@ export class FlowchartHandler {
205205
* @returns {string}
206206
* @memberof FlowchartHandler
207207
*/
208-
static getDefaultDioGraph(): string {
209-
let result = FlowchartHandler.defaultXml;
210-
if (!result) {
211-
const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTDIO}`;
212-
result = $GF.utils.$loadFile(url);
213-
}
214-
return result;
215-
}
208+
// static getDefaultDioGraph(): string {
209+
// let result = FlowchartHandler.defaultXml;
210+
// if (!result) {
211+
// const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTDIO}`;
212+
// result = $GF.utils.$loadFile(url);
213+
// }
214+
// return result;
215+
// }
216216

217217
/**
218218
* Reset/empty flowcharts, rules and children
@@ -237,14 +237,14 @@ export class FlowchartHandler {
237237
* @returns {string}
238238
* @memberof FlowchartHandler
239239
*/
240-
static getDefaultCsvGraph(): string {
241-
let result = FlowchartHandler.defaultCsv;
242-
if (!result) {
243-
const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTCSV}`;
244-
result = $GF.utils.$loadFile(url);
245-
}
246-
return result;
247-
}
240+
// static getDefaultCsvGraph(): string {
241+
// let result = FlowchartHandler.defaultCsv;
242+
// if (!result) {
243+
// const url = `${GFPlugin.getRootPath()}${GFCONSTANT.CONF_FILE_DEFAULTCSV}`;
244+
// result = $GF.utils.$loadFile(url);
245+
// }
246+
// return result;
247+
// }
248248

249249
/**
250250
* return default flowchart or flowchart by name or index

0 commit comments

Comments
 (0)