Skip to content

Commit 0979a1d

Browse files
Sorokin-OlegSorokin-Oleg
committed
[dev] vue diagram demo. prettierr starting
1 parent c743566 commit 0979a1d

File tree

13 files changed

+770
-737
lines changed

13 files changed

+770
-737
lines changed

‎.storybook/manager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ const theme = create({
1111
addons.setConfig({
1212
showPanel: false,
1313
enableShortcuts: false,
14-
theme
14+
theme,
1515
});

‎src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
</template>
44

55
<script>
6-
export default {
7-
name: "App",
8-
};
6+
export default {
7+
name: "App",
8+
};
99
</script>
1010

1111
<style>
12-
@import "./index.css";
12+
@import "./index.css";
1313
</style>

‎src/components/activityDiagram/ActivityDiagramCdn.vue‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,58 +24,61 @@ export default {
2424
fill: "#FE9998",
2525
stroke: "#FE9998",
2626
fontColor: "#FFF",
27-
lineHeight: 16
27+
lineHeight: 16,
2828
},
2929
end: {
3030
fill: "#FE9998",
3131
stroke: "#FE9998",
3232
fontColor: "#FFF",
33-
lineHeight: 16
33+
lineHeight: 16,
3434
},
3535
process: {
3636
fill: "#478D99",
3737
stroke: "#478D99",
3838
fontColor: "#FFF",
39-
lineHeight: 16
39+
lineHeight: 16,
4040
},
4141
decision: {
4242
fill: "#F7D768",
4343
stroke: "#F7D768",
4444
fontColor: "#FFF",
45-
lineHeight: 16
45+
lineHeight: 16,
4646
},
4747
document: {
4848
fill: "#478D99",
4949
stroke: "#478D99",
5050
fontColor: "#FFF",
51-
lineHeight: 16
52-
}
51+
lineHeight: 16,
52+
},
5353
},
5454
}),
5555
mounted() {
56-
fromCDN(["https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js", "https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css"]).then(() => {
56+
fromCDN([
57+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js",
58+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css",
59+
]).then(() => {
5760
// eslint-disable-next-line no-undef
5861
this.diagram = new dhx.Diagram(this.$refs.diagram, {
5962
lineGap: 30,
60-
defaults: this.defaults,
63+
defaults: this.defaults,
6164
});
6265
this.diagram.data.load("./static/activity.json");
6366
// eslint-disable-next-line no-undef
6467
this.editor = new dhx.DiagramEditor(this.$refs.editor, {
6568
controls: { autoLayout: false },
66-
lineGap: 30,
69+
lineGap: 30,
6770
});
6871
6972
this.editor.events.on("ApplyButton", () => {
70-
this.applyButton();
71-
});
72-
this.editor.events.on("ResetButton", () => {
73-
this.resetButton();
74-
});
73+
this.applyButton();
74+
});
75+
this.editor.events.on("ResetButton", () => {
76+
this.resetButton();
77+
});
7578
});
7679
},
7780
methods: {
78-
runEditor() {
81+
runEditor() {
7982
this.expanded = true;
8083
this.collapsed = false;
8184
this.editor.import(this.diagram);
@@ -88,15 +91,15 @@ export default {
8891
resetButton() {
8992
this.collapsed = true;
9093
this.expanded = false;
91-
}
94+
},
9295
},
9396
computed: {
9497
classObject: function () {
9598
return {
96-
'dhx_sample-container__with-editor': this.expanded && !this.collapsed,
97-
'dhx_sample-container__without-editor': this.collapsed && !this.expanded
98-
}
99-
}
99+
"dhx_sample-container__with-editor": this.expanded && !this.collapsed,
100+
"dhx_sample-container__without-editor": this.collapsed && !this.expanded,
101+
};
102+
},
100103
},
101104
beforeDestroy() {
102105
if (this.diagram) {

‎src/components/autoplacement/AutoplacementCdn.vue‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<template>
22
<div class="dhx-container_inner">
33
<div class="dhx_sample-controls">
4-
<label class="dhx_form-group dhx_radiobutton dhx_form-group--inline dhx_form-group--no-message-holder dhx_form-group dhx_sample-input__wrapper--pl-16">
5-
<input id="direct" type="radio" name="radio" value="direct" class="dhx_radiobutton__input" @change="runDirect()">
6-
<span class="dhx_radiobutton__visual-input"></span>
7-
<span class="dhx_label">Auto layout in direct mode</span>
8-
</label>
9-
<label class="dhx_form-group dhx_radiobutton dhx_form-group--inline dhx_form-group--no-message-holder dhx_sample-input__wrapper--pl-16">
10-
<input id="edges" type="radio" name="radio" value="edges" class="dhx_radiobutton__input" @change="runEdges()">
11-
<span class="dhx_radiobutton__visual-input"></span>
12-
<span class="dhx_label">Auto layout in edges mode</span>
13-
</label>
14-
</div>
15-
<div class="dhx_sample-container">
16-
<div class="dhx_sample-container__widget" ref="diagram"></div>
17-
</div>
4+
<label
5+
class="dhx_form-group dhx_radiobutton dhx_form-group--inline dhx_form-group--no-message-holder dhx_form-group dhx_sample-input__wrapper--pl-16"
6+
>
7+
<input id="direct" type="radio" name="radio" value="direct" class="dhx_radiobutton__input" @change="runDirect()" />
8+
<span class="dhx_radiobutton__visual-input"></span>
9+
<span class="dhx_label">Auto layout in direct mode</span>
10+
</label>
11+
<label
12+
class="dhx_form-group dhx_radiobutton dhx_form-group--inline dhx_form-group--no-message-holder dhx_sample-input__wrapper--pl-16"
13+
>
14+
<input id="edges" type="radio" name="radio" value="edges" class="dhx_radiobutton__input" @change="runEdges()" />
15+
<span class="dhx_radiobutton__visual-input"></span>
16+
<span class="dhx_label">Auto layout in edges mode</span>
17+
</label>
18+
</div>
19+
<div class="dhx_sample-container">
20+
<div class="dhx_sample-container__widget" ref="diagram"></div>
21+
</div>
1822
</div>
1923
</template>
2024

@@ -26,7 +30,10 @@ export default {
2630
diagram: null,
2731
}),
2832
mounted() {
29-
fromCDN(["https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js", "https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css"]).then(() => {
33+
fromCDN([
34+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js",
35+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css",
36+
]).then(() => {
3037
// eslint-disable-next-line no-undef
3138
this.diagram = new dhx.Diagram(this.$refs.diagram);
3239
this.diagram.data.load("./static/autoplacement.json");
@@ -35,14 +42,14 @@ export default {
3542
methods: {
3643
runDirect() {
3744
this.diagram.autoPlace({
38-
mode: "direct"
45+
mode: "direct",
3946
});
4047
},
4148
runEdges() {
4249
this.diagram.autoPlace({
43-
mode: "edges"
50+
mode: "edges",
4451
});
45-
}
52+
},
4653
},
4754
beforeDestroy() {
4855
if (this.diagram) {

‎src/components/autoplacementWithEditor/AutoplacementWithEditorCdn.vue‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,31 @@ export default {
2121
expanded: false,
2222
}),
2323
mounted() {
24-
fromCDN(["https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js", "https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css"]).then(() => {
24+
fromCDN([
25+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js",
26+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css",
27+
]).then(() => {
2528
// eslint-disable-next-line no-undef
2629
this.diagram = new dhx.Diagram(this.$refs.diagram);
2730
this.diagram.data.load("./static/autoplacement.json");
2831
2932
// eslint-disable-next-line no-undef
3033
this.editor = new dhx.DiagramEditor(this.$refs.editor, {
31-
autoplacement: {
32-
graphPadding: 100,
33-
mode: "direct"
34-
}
35-
});
34+
autoplacement: {
35+
graphPadding: 100,
36+
mode: "direct",
37+
},
38+
});
3639
this.editor.events.on("ApplyButton", () => {
37-
this.applyButton();
38-
});
39-
this.editor.events.on("ResetButton", () => {
40-
this.resetButton();
41-
});
40+
this.applyButton();
41+
});
42+
this.editor.events.on("ResetButton", () => {
43+
this.resetButton();
44+
});
4245
});
4346
},
4447
methods: {
45-
runEditor() {
48+
runEditor() {
4649
this.expanded = true;
4750
this.collapsed = false;
4851
this.editor.import(this.diagram);
@@ -55,15 +58,15 @@ export default {
5558
resetButton() {
5659
this.collapsed = true;
5760
this.expanded = false;
58-
}
61+
},
5962
},
6063
computed: {
6164
classObject: function () {
6265
return {
63-
'dhx_sample-container__with-editor': this.expanded && !this.collapsed,
64-
'dhx_sample-container__without-editor': this.collapsed && !this.expanded
65-
}
66-
}
66+
"dhx_sample-container__with-editor": this.expanded && !this.collapsed,
67+
"dhx_sample-container__without-editor": this.collapsed && !this.expanded,
68+
};
69+
},
6770
},
6871
beforeDestroy() {
6972
if (this.diagram) {

‎src/components/decisionTree/DecisionTreeCdn.vue‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,44 @@ export default {
2222
defaults: {
2323
rectangle: {
2424
fill: "#44B3FC",
25-
stroke: "#44B3FC"
25+
stroke: "#44B3FC",
2626
},
2727
circle: {
2828
fill: "#3DA0E3",
29-
stroke: "#3DA0E3"
29+
stroke: "#3DA0E3",
3030
},
3131
endpoint: {
3232
fill: "#307DB0",
33-
stroke: "#307DB0"
34-
}
35-
}
33+
stroke: "#307DB0",
34+
},
35+
},
3636
}),
3737
mounted() {
38-
fromCDN(["https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js", "https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css"]).then(() => {
38+
fromCDN([
39+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js",
40+
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css",
41+
]).then(() => {
3942
// eslint-disable-next-line no-undef
4043
this.diagram = new dhx.Diagram(this.$refs.diagram, {
41-
lineGap: 40,
42-
defaults: this.defaults
44+
lineGap: 40,
45+
defaults: this.defaults,
4346
});
4447
this.diagram.data.load("./static/decisionTree.json");
4548
46-
// eslint-disable-next-line no-undef
47-
this.editor = new dhx.DiagramEditor(this.$refs.editor, {
48-
controls: { autoLayout: false },
49-
});
49+
// eslint-disable-next-line no-undef
50+
this.editor = new dhx.DiagramEditor(this.$refs.editor, {
51+
controls: { autoLayout: false },
52+
});
5053
this.editor.events.on("ApplyButton", () => {
51-
this.applyButton();
52-
});
53-
this.editor.events.on("ResetButton", () => {
54-
this.resetButton();
55-
});
54+
this.applyButton();
55+
});
56+
this.editor.events.on("ResetButton", () => {
57+
this.resetButton();
58+
});
5659
});
5760
},
5861
methods: {
59-
runEditor() {
62+
runEditor() {
6063
this.expanded = true;
6164
this.collapsed = false;
6265
this.editor.import(this.diagram);
@@ -69,15 +72,15 @@ export default {
6972
resetButton() {
7073
this.collapsed = true;
7174
this.expanded = false;
72-
}
75+
},
7376
},
7477
computed: {
7578
classObject: function () {
7679
return {
77-
'dhx_sample-container__with-editor': this.expanded && !this.collapsed,
78-
'dhx_sample-container__without-editor': this.collapsed && !this.expanded
79-
}
80-
}
80+
"dhx_sample-container__with-editor": this.expanded && !this.collapsed,
81+
"dhx_sample-container__without-editor": this.collapsed && !this.expanded,
82+
};
83+
},
8184
},
8285
beforeDestroy() {
8386
if (this.diagram) {

0 commit comments

Comments
 (0)