Skip to content

Commit f2ceefe

Browse files
RCNRCRCNRC
committed
Too much space before and after graphs in task was disabled
1 parent b8492b4 commit f2ceefe

File tree

6 files changed

+116
-40
lines changed

6 files changed

+116
-40
lines changed

‎.eslintcache

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

‎src/App.tsx

+38-26
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,14 @@ import {WritableAdapter} from "graphlabs.core.visualizer";
2020
import './App.css';
2121

2222
import { /*Component,*/ SFC} from 'react';
23-
import { init1, graphModel1, init2, graphModel2, initres, /*graphModelres,*/ init, graphModel } from './ForMyGraphModel';
24-
import {message_0, message_0_changing, num_0, num_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, T_s, T_s_changing, T_s_shawing } from './ForMeVars';
23+
import { init1, graphModel1, init2, graphModel2, initres, /*graphModelres,*/ init, graphModel, inithelp, graphModelhelp } from './ForMyGraphModel';
24+
import {message_0, message_0_changing, num_0, num_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, T_s, T_s_changing, T_s_shawing, need_render, need_render_changing } from './ForMeVars';
2525
import { ChooseTask } from './Ops';
2626
import { CheckingAnswer, StartDifficult, LastCheckingAnswer } from "./CheckAnswer";
2727
import { GraphsInit } from "./GraphsInit"
2828
import ReactDOM from "react-dom";
2929
import {log} from "util";
30+
import { MyVisualizer } from "./MyVisualizer";
3031

3132
class App extends Template {
3233

@@ -46,6 +47,24 @@ class App extends Template {
4647
window.setTimeout(()=>{clearInterval(timerId);LastCheckingAnswer();},1000*45*60);
4748
}
4849

50+
componentDidMount() {
51+
let graph = GraphGenerator.generate(0);
52+
inithelp(graph);
53+
MyVisualizer(graphModel1,"graph-Model-1");
54+
MyVisualizer(graphModel2,"graph-Model-2");
55+
//this.render();
56+
//this.forceUpdate();
57+
}
58+
59+
componentDidUpdate() {
60+
if(need_render) {
61+
MyVisualizer(graphModel1, "graph-Model-1");
62+
MyVisualizer(graphModel2,"graph-Model-2");
63+
need_render_changing(false);
64+
}
65+
}
66+
67+
4968
/*public constructor(props: {}) { // не совсем понимаю, почему овервайт этих функций происходит автоматически и без конструктора
5069
super(props);
5170
this.render = this.render.bind(this);
@@ -126,8 +145,8 @@ class App extends Template {
126145
const start = new Date().getTime();
127146
//adapter.addVertex();
128147
graphModel.addVertex(new Vertex(`${window.prompt("Добавте вершину, имя вершины должно состоять из последовательности цифр.", '0')}`));
129-
this.render();
130148
this.forceUpdate();
149+
need_render_changing(true);
131150
const end = new Date().getTime();
132151
T_s_changing(T_s - Math.round((end-start)/1000));
133152
}}>Добавить<br/>вершину</button>
@@ -156,8 +175,9 @@ class App extends Template {
156175
num_0_changing(num_0 + 1);
157176
GraphsInit();
158177
this.forceUpdate();
178+
need_render_changing(true);
159179
if (num_0 === 7) { // удалить кнопку было бы хорошо
160-
message_1_changing("Завершите выполнение теста.");
180+
message_1_changing("Завершите работу.");
161181
this.disable();
162182
}
163183
}
@@ -210,28 +230,20 @@ class App extends Template {
210230
<img src={"http://gl-backend.svtz.ru:5000/odata/downloadImage(name='Help.png')"}></img>
211231
</p>
212232
{message_0}
213-
<div className={"raph-Model-1"}>
214-
<GraphVisualizer
215-
graph={graphModel1}
216-
adapterType={'readable'}
217-
namedEdges={false}
218-
vertexNaming={false}
219-
withoutDragging={true}
220-
edgeNaming={false}
221-
incidentEdges={false}
222-
/>
223-
</div>
224-
<div className={"raph-Model-2"}>
225-
<GraphVisualizer
226-
graph={graphModel2}
227-
adapterType={'readable'}
228-
namedEdges={false}
229-
vertexNaming={false}
230-
withoutDragging={true}
231-
edgeNaming={false}
232-
incidentEdges={false}
233-
/>
234-
</div>
233+
<svg className={"graph-Model-1"}>
234+
</svg>
235+
<svg className={"graph-Model-2"}>
236+
</svg>
237+
<GraphVisualizer
238+
graph={graphModelhelp}
239+
adapterType={'readable'}
240+
namedEdges={false}
241+
vertexNaming={false}
242+
withoutDragging={true}
243+
edgeNaming={false}
244+
incidentEdges={false}
245+
/>
246+
235247
</div>;
236248
}
237249
}

‎src/ForMeVars.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ let num_0 = 0;
66
let mark_0 = 0;
77
let k_s = [0,0,0,0,0,0,0,0];
88
let T_s = 45*60;
9+
let need_render = false;
910

1011
function message_0_changing (new_message: string) {message_0 = new_message;}
1112
function message_1_changing (new_message: string) {message_1 = new_message;}
1213
function num_0_changing (new_num: number) {num_0 = new_num;}
1314
function mark_0_changing (new_mark: number) {mark_0 = new_mark;}
15+
function need_render_changing (new_need_render: boolean) {need_render = new_need_render;}
1416
function k_s_changing (new_k_s: number[]) {k_s = new_k_s;}
1517
function T_s_changing (new_T_s: number) {T_s = new_T_s;}
1618
function T_s_shawing () {
@@ -28,4 +30,4 @@ function T_s_shawing () {
2830
}
2931
}
3032

31-
export { num_0, message_0, num_0_changing, message_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, k_s, k_s_changing, T_s, T_s_changing, T_s_shawing };
33+
export { num_0, message_0, num_0_changing, message_0_changing, message_1, message_1_changing, mark_0, mark_0_changing, k_s, k_s_changing, T_s, T_s_changing, T_s_shawing, need_render, need_render_changing };

‎src/ForMyGraphModel.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,16 @@ init2 = function (graph: IGraph<IVertex, IEdge>) {
1818
graphModel2 = graph;
1919
}
2020

21+
let graphModelhelp: IGraph<IVertex, IEdge> = new Graph() as unknown as IGraph<IVertex, IEdge>;
22+
let inithelp:(graph: IGraph<IVertex, IEdge>) => void;
23+
inithelp = function (graph: IGraph<IVertex, IEdge>) {
24+
graphModelhelp = graph;
25+
}
26+
2127
let graphModelres: IGraph<IVertex, IEdge> = new Graph() as unknown as IGraph<IVertex, IEdge>;
2228
let initres:(graph: IGraph<IVertex, IEdge>) => void;
2329
initres = function (graph: IGraph<IVertex, IEdge>) {
2430
graphModelres = graph;
2531
}
2632

27-
export { init1, graphModel1, init2, graphModel2, initres, graphModelres, init, graphModel };
33+
export { init1, graphModel1, init2, graphModel2, initres, graphModelres, init, graphModel, inithelp, graphModelhelp };

‎src/MyVisualizer.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {Graph, IEdge, IGraph, IVertex} from 'graphlabs.core.graphs';
2+
import * as d3 from "d3";
3+
4+
function MyVisualizer(graph: IGraph<IVertex, IEdge>, my_class:string){
5+
d3.select(`svg.${my_class}`).attr("width","98%").attr("height","100%");
6+
7+
if (graph.vertices.length===1){
8+
window.alert(`${d3.select(`svg.${my_class}`).style("width")}`);
9+
d3.select(`svg.${my_class}`).append("svg").attr("width", "100%").attr("height", "100%")
10+
.append("circle").attr("cx", "50%").attr("cy", "50%").attr("r", 30)
11+
.attr("stroke","black").attr("stroke-width",5).attr("fill","rgb(238, 238, 238)");
12+
13+
d3.select(`svg.${my_class}`).select("svg").append("text").attr("x","50%").attr("y","52%")
14+
.attr("text-anchor","middle").style("fill","rgb(0, 0, 0)").style("font-family", "sans-serif")
15+
.style("text-anchor","middle").style("padding-top","50%").style("padding-left","25%")
16+
.style("padding-right","25%").text(`${graph.vertices[0].name}`);
17+
}
18+
else{
19+
let n:number = graph.vertices.length; // number of vertices
20+
let R:number = 15 * ( 1 + 1/(Math.pow(n,3/5))); // radius of vertices
21+
let w:number = parseFloat(d3.select(`svg.${my_class}`).style("width").slice(0,d3.select(`svg.${my_class}`).style("width").length-2)); // width
22+
let h:number = w; // height
23+
d3.select(`svg.${my_class}`).attr("height",h); // set height in html
24+
let r:number = w/2-R-10; // radius of graph
25+
let phi_0:number = 0; // phi 0
26+
let phi_i:number = phi_0; // phi i
27+
let x_0:number = w/2; // x 0
28+
let y_0:number = h/2; // y 0
29+
let x:number[] = [];
30+
let y:number[] = [];
31+
for (let i = 0; i<graph.vertices.length; i++){
32+
phi_i += 360/n;
33+
x[i] = x_0 - r * Math.sin(Math.PI*(2+phi_i/180));
34+
y[i] = y_0 + r * Math.cos(Math.PI*(2+phi_i/180));
35+
36+
}
37+
let i = 0;
38+
let j = 0;
39+
let vert_names:string[] = [];
40+
graph.vertices.forEach((v:IVertex)=>{
41+
vert_names[j]=v.name;
42+
j++;
43+
});
44+
graph.edges.forEach((e:IEdge)=>{
45+
//let z = Math.min(parseInt(d3.select(`svg.${my_class}`).select(`svg.vert_num_${e.vertexOne.name}`).style("z")),parseInt(d3.select(`svg.${my_class}`).select(`svg.vert_num_${e.vertexTwo.name}`).style("z")));
46+
d3.select(`svg.${my_class}`).append("line").style('stroke', 'black').attr("stroke-width",5)//.style("z",z-10)
47+
.attr('x1', x[vert_names.indexOf(e.vertexOne.name)])
48+
.attr('y1', y[vert_names.indexOf(e.vertexOne.name)])
49+
.attr('x2', x[vert_names.indexOf(e.vertexTwo.name)])
50+
.attr('y2', y[vert_names.indexOf(e.vertexTwo.name)]);
51+
});
52+
graph.vertices.forEach((v:IVertex)=>{
53+
d3.select(`svg.${my_class}`).append("svg").attr("class",`vert_num_${v.name}`).attr("width", "100%").attr("height", "100%")
54+
.append("circle").attr("cx", x[i]).attr("cy", y[i]).attr("r", R)
55+
.attr("stroke","black").attr("stroke-width",5).attr("fill","rgb(238, 238, 238)");
56+
d3.select(`svg.${my_class}`).select(`svg.vert_num_${v.name}`).append(`text`).attr("x",x[i]).attr("y",y[i]+4) // знак = 8 пикселей в высоту, поэтому ловим середину так сказать(
57+
.attr("text-anchor","middle").style("fill","rgb(0, 0, 0)").style("font-family", "sans-serif")
58+
.style("text-anchor","middle").style("padding-top","50%").style("padding-left","25%")
59+
.style("padding-right","25%").text(`${v.name}`);
60+
//vert_names[i]=v.name;
61+
i++;
62+
});
63+
64+
}
65+
}
66+
67+
export {MyVisualizer};

‎src/index.css

-11
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,6 @@ code {
2020
overflow: auto;
2121
}
2222

23-
.raph-Model-1{
24-
width: 100%;
25-
height: 100%;
26-
margin-top: -20%;
27-
}
28-
.raph-Model-2{
29-
width: 100%;
30-
height: 100%;
31-
margin-top: -40%;
32-
}
33-
3423
.T_s{
3524
color: white;
3625
}

0 commit comments

Comments
 (0)