Skip to content

Commit 55e5498

Browse files
algentyalgenty
committed
externalize GFDrawio
1 parent abd56cb commit 55e5498

File tree

5 files changed

+147
-143
lines changed

5 files changed

+147
-143
lines changed

‎src/drawio_base.ts

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { GFLog } from "globals_class";
2+
import { inflateRaw, deflateRaw } from 'pako';
3+
4+
export class GFDrawio {
5+
static parseXml(xmlString: string): Document {
6+
var parser = new DOMParser();
7+
return parser.parseFromString(xmlString, 'text/xml');
8+
}
9+
/**
10+
* drawio context source
11+
* @param {Object} node
12+
* @returns string
13+
*/
14+
static getTextContent(node: Object): string {
15+
// TODO : fixit
16+
const _node: any = node;
17+
return _node != null ? _node[_node.hasOwnProperty('textContent') === undefined ? 'text' : 'textContent'] : '';
18+
}
19+
20+
/**
21+
* Valided XML definition
22+
*
23+
* @static
24+
* @param {string} source
25+
* @returns
26+
* @memberof XGraph
27+
*/
28+
static isValidXml(source: string) {
29+
try {
30+
const div = document.createElement('div');
31+
const g = new Graph(div);
32+
if (GFDrawio.isEncoded(source)) {
33+
source = GFDrawio.decode(source);
34+
}
35+
const xmlDoc = mxUtils.parseXml(source);
36+
const codec = new mxCodec(xmlDoc);
37+
g.getModel().beginUpdate();
38+
codec.decode(xmlDoc.documentElement, g.getModel());
39+
g.getModel().endUpdate();
40+
g.destroy();
41+
return true;
42+
} catch (error) {
43+
GFLog.error('isValidXml', error);
44+
return false;
45+
}
46+
}
47+
48+
static decode(data: string): string {
49+
try {
50+
let node = this.parseXml(data).documentElement;
51+
if (node != null && node.nodeName === 'mxfile') {
52+
var diagrams = node.getElementsByTagName('diagram');
53+
if (diagrams.length > 0) {
54+
data = this.getTextContent(diagrams[0]);
55+
}
56+
}
57+
} catch (e) {
58+
GFLog.error(`parseXml : Unable to decode ${data}`);
59+
return '';
60+
}
61+
// data = atob(data);
62+
data = Buffer.from(data, 'base64').toString('binary');
63+
if (data.length > 0) {
64+
try {
65+
data = inflateRaw(
66+
Uint8Array.from(data, (c) => c.charCodeAt(0)),
67+
{ to: 'string' }
68+
);
69+
} catch (e) {
70+
GFLog.error(`Pako : Unable to decode ${data}`);
71+
return '';
72+
}
73+
}
74+
75+
try {
76+
data = decodeURIComponent(data);
77+
} catch (e) {
78+
GFLog.error(`Unable to decode ${data}`);
79+
return '';
80+
}
81+
return data;
82+
}
83+
84+
static encode(data: string) {
85+
{
86+
try {
87+
data = encodeURIComponent(data);
88+
} catch (e) {
89+
GFLog.error(`Unable to encode/encodeURIComponent : ${data}`, e);
90+
return;
91+
}
92+
93+
if (data.length > 0) {
94+
try {
95+
let deflateRaws = deflateRaw(data);
96+
data = String.fromCharCode.apply(null, new Array(...deflateRaws));
97+
} catch (e) {
98+
console.log(e);
99+
GFLog.error(`Unable to encode ${data}`);
100+
return '';
101+
}
102+
}
103+
104+
try {
105+
data = Buffer.from(data, 'binary').toString('base64');
106+
} catch (e) {
107+
GFLog.error(`Unable to encode ${data}`);
108+
return;
109+
}
110+
111+
return data;
112+
}
113+
}
114+
115+
static isEncoded(data: string) {
116+
try {
117+
const node = this.parseXml(data).documentElement;
118+
if (node != null && node.nodeName === 'mxfile') {
119+
const diagrams = node.getElementsByTagName('diagram');
120+
if (diagrams.length > 0) {
121+
return true;
122+
}
123+
} else {
124+
return data.indexOf('mxGraphModel') === -1;
125+
}
126+
} catch (error) {
127+
return true;
128+
}
129+
return false;
130+
}
131+
}

‎src/flowchart_class.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { XGraph } from 'graph_class';
22
import { StateHandler } from 'statesHandler';
33
import { FlowchartHandler } from 'flowchart_handler';
4-
import { $GF, GFDrawioTools, GFLog } from 'globals_class';
4+
import { $GF, GFLog } from 'globals_class';
55
import { GFEvents } from 'flowcharting_base';
6+
import { GFDrawio } from 'drawio_base';
67

78
const flowchartSignalsArray = [
89
'flowchart_initialized',
@@ -735,15 +736,15 @@ export class Flowchart {
735736
}
736737

737738
_decode() {
738-
if (GFDrawioTools.isEncoded(this.data.xml)) {
739-
this.data.xml = GFDrawioTools.decode(this.data.xml);
739+
if (GFDrawio.isEncoded(this.data.xml)) {
740+
this.data.xml = GFDrawio.decode(this.data.xml);
740741
// this.data.xml = XGraph.decompress(this.data.xml);
741742
}
742743
}
743744

744745
_encode() {
745-
if (!GFDrawioTools.isEncoded(this.data.xml)) {
746-
const xml = GFDrawioTools.encode(this.data.xml);
746+
if (!GFDrawio.isEncoded(this.data.xml)) {
747+
const xml = GFDrawio.encode(this.data.xml);
747748
this.data.xml = xml ? xml : this.data.xml;
748749
}
749750
}

‎src/flowcharts_options.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { FlowchartHandler } from 'flowchart_handler';
22
import { Flowchart } from 'flowchart_class';
3-
import { $GF, GFDrawioTools, GFTable, GFLog, GFPlugin, GFCONSTANT } from 'globals_class';
3+
import { $GF, GFTable, GFLog, GFPlugin, GFCONSTANT } from 'globals_class';
44
import { FlowchartCtrl } from 'flowchart_ctrl';
5+
import { GFDrawio } from 'drawio_base';
56

67
export class FlowchartsOptionsCtrl {
78
$gf: $GF;
@@ -185,7 +186,7 @@ export class FlowchartsOptionsCtrl {
185186
}
186187

187188
checkSource_onSourceChange(source: string): boolean {
188-
const bool = GFDrawioTools.isValidXml(source);
189+
const bool = GFDrawio.isValidXml(source);
189190
this.errorSourceFlag = !bool;
190191
if (!bool) {
191192
this.ctrl.notify('Invalid Xml definition', 'error');
@@ -288,7 +289,7 @@ export class FlowchartsOptionsCtrl {
288289
response.text().then(text => {
289290
const fc = this.flowchartHandler?.getCurrentFlowchart();
290291
if (fc && fc.data.type === 'xml') {
291-
const bool = GFDrawioTools.isValidXml(text);
292+
const bool = GFDrawio.isValidXml(text);
292293
this.errorSourceFlag = !bool;
293294
if (this.errorSourceFlag) {
294295
this.ctrl.notify('Response is an invalid Xml definition', 'error');

‎src/globals_class.ts

-130
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import _ from 'lodash';
22
import chroma from 'chroma-js';
3-
import { inflateRaw, deflateRaw } from 'pako';
43
import { FlowchartCtrl } from 'flowchart_ctrl';
54
import { GFEvents } from 'flowcharting_base';
65
import { nanoid } from 'nanoid/non-secure';
@@ -831,135 +830,6 @@ export class GFPlugin {
831830
// }
832831
// }
833832

834-
export class GFDrawioTools {
835-
static parseXml(xmlString: string): Document {
836-
var parser = new DOMParser();
837-
return parser.parseFromString(xmlString, 'text/xml');
838-
}
839-
/**
840-
* drawio context source
841-
* @param {Object} node
842-
* @returns string
843-
*/
844-
static getTextContent(node: Object): string {
845-
// TODO : fixit
846-
const _node: any = node;
847-
return _node != null ? _node[_node.hasOwnProperty('textContent') === undefined ? 'text' : 'textContent'] : '';
848-
}
849-
850-
/**
851-
* Valided XML definition
852-
*
853-
* @static
854-
* @param {string} source
855-
* @returns
856-
* @memberof XGraph
857-
*/
858-
static isValidXml(source: string) {
859-
try {
860-
const div = document.createElement('div');
861-
const g = new Graph(div);
862-
if (GFDrawioTools.isEncoded(source)) {
863-
source = GFDrawioTools.decode(source);
864-
}
865-
const xmlDoc = mxUtils.parseXml(source);
866-
const codec = new mxCodec(xmlDoc);
867-
g.getModel().beginUpdate();
868-
codec.decode(xmlDoc.documentElement, g.getModel());
869-
g.getModel().endUpdate();
870-
g.destroy();
871-
return true;
872-
} catch (error) {
873-
GFLog.error('isValidXml', error);
874-
return false;
875-
}
876-
}
877-
878-
static decode(data: string): string {
879-
try {
880-
let node = this.parseXml(data).documentElement;
881-
if (node != null && node.nodeName === 'mxfile') {
882-
var diagrams = node.getElementsByTagName('diagram');
883-
if (diagrams.length > 0) {
884-
data = this.getTextContent(diagrams[0]);
885-
}
886-
}
887-
} catch (e) {
888-
GFLog.error(`parseXml : Unable to decode ${data}`);
889-
return '';
890-
}
891-
// data = atob(data);
892-
data = Buffer.from(data, 'base64').toString('binary');
893-
if (data.length > 0) {
894-
try {
895-
data = inflateRaw(
896-
Uint8Array.from(data, (c) => c.charCodeAt(0)),
897-
{ to: 'string' }
898-
);
899-
} catch (e) {
900-
GFLog.error(`Pako : Unable to decode ${data}`);
901-
return '';
902-
}
903-
}
904-
905-
try {
906-
data = decodeURIComponent(data);
907-
} catch (e) {
908-
GFLog.error(`Unable to decode ${data}`);
909-
return '';
910-
}
911-
return data;
912-
}
913-
914-
static encode(data: string) {
915-
{
916-
try {
917-
data = encodeURIComponent(data);
918-
} catch (e) {
919-
GFLog.error(`Unable to encode/encodeURIComponent : ${data}`, e);
920-
return;
921-
}
922-
923-
if (data.length > 0) {
924-
try {
925-
let deflateRaws = deflateRaw(data);
926-
data = String.fromCharCode.apply(null, new Array(...deflateRaws));
927-
} catch (e) {
928-
console.log(e);
929-
GFLog.error(`Unable to encode ${data}`);
930-
return '';
931-
}
932-
}
933-
934-
try {
935-
data = Buffer.from(data, 'binary').toString('base64');
936-
} catch (e) {
937-
GFLog.error(`Unable to encode ${data}`);
938-
return;
939-
}
940-
941-
return data;
942-
}
943-
}
944-
945-
static isEncoded(data: string) {
946-
try {
947-
const node = this.parseXml(data).documentElement;
948-
if (node != null && node.nodeName === 'mxfile') {
949-
const diagrams = node.getElementsByTagName('diagram');
950-
if (diagrams.length > 0) {
951-
return true;
952-
}
953-
} else {
954-
return data.indexOf('mxGraphModel') === -1;
955-
}
956-
} catch (error) {
957-
return true;
958-
}
959-
return false;
960-
}
961-
}
962-
963833
export class $GF {
964834
uid = `GFGlobal-${nanoid()}`;
965835
private _globalvars: GFVariables = GFVariables.create();

‎src/graph_class.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
// import { each as _each } from 'lodash';
2-
import { $GF, GFDrawioTools, GFTimer, GFLog, GFPlugin, GFCONSTANT } from 'globals_class';
2+
import { $GF, GFTimer, GFLog, GFPlugin, GFCONSTANT } from 'globals_class';
33
const dioCustom = require('drawio_custom');
44
import chroma from 'chroma-js';
55
const mxcustom = require('mxgraph_custom');
66
import { Rule } from 'rule_class';
77
import { XCell } from 'cell_class';
88
import { InteractiveMap } from 'mapping_class';
99
import { GFEvents } from 'flowcharting_base';
10+
import { GFDrawio } from 'drawio_base';
1011

1112
const xgraphSignalsArray = ['graph_initialized', 'graph_updated', 'graph_changed', 'graph_freed'] as const;
1213
type XGraphSignals = typeof xgraphSignalsArray[number];
@@ -67,8 +68,8 @@ export class XGraph {
6768
this.$gf.events.connect('debug_asked', this, this._on_global_debug_asked.bind(this));
6869
XGraph.initMxGraphLib();
6970
if (this.type === 'xml') {
70-
if (GFDrawioTools.isEncoded(this.definition)) {
71-
this.xmlGraph = GFDrawioTools.decode(this.definition);
71+
if (GFDrawio.isEncoded(this.definition)) {
72+
this.xmlGraph = GFDrawio.decode(this.definition);
7273
} else {
7374
this.xmlGraph = this.definition;
7475
}
@@ -609,8 +610,8 @@ export class XGraph {
609610
*/
610611
setContent(content: string): this {
611612
if (this.type === 'xml') {
612-
if (GFDrawioTools.isEncoded(content)) {
613-
this.xmlGraph = GFDrawioTools.decode(content);
613+
if (GFDrawio.isEncoded(content)) {
614+
this.xmlGraph = GFDrawio.decode(content);
614615
} else {
615616
this.xmlGraph = content;
616617
}

0 commit comments

Comments
 (0)