Commit 403aea7e authored by TOUZE Francois's avatar TOUZE Francois
Browse files

review TwissAction && redesign LayoutView

parent e7cb4f9b
......@@ -311,72 +311,72 @@ void elementBend::toJSON(json& j)
j["color"]= "#74B9FF";
// arc length (m)
j["parameters"]["A%length"]["displayName"] = "Arc length (m)";
j["parameters"]["A%length"]["value"] = length_;
j["parameters"]["A%length"]["type"] = "number";
j["parameters"]["A$length"]["displayName"] = "Arc length (m)";
j["parameters"]["A$length"]["value"] = length_;
j["parameters"]["A$length"]["type"] = "number";
// bend angle (rad)
j["parameters"]["B%angle"]["displayName"] = "Angle (rad)";
j["parameters"]["B$angle"]["displayName"] = "Angle (rad)";
if (vtr_[ 0 ].find("none") == std::string::npos ) {
j["parameters"]["B%angle"]["value"] = atof(vtr_[ 0 ].c_str());
j["parameters"]["B$angle"]["value"] = atof(vtr_[ 0 ].c_str());
} else {
j["parameters"]["B%angle"]["value"] = nullptr;
j["parameters"]["B$angle"]["value"] = nullptr;
}
j["parameters"]["B%angle"]["type"] = "number";
j["parameters"]["B$angle"]["type"] = "number";
// reference energy (MeV)
j["parameters"]["C%wref"]["displayName"] = "Reference energy (MeV)";
j["parameters"]["C$wref"]["displayName"] = "Reference energy (MeV)";
if (vtr_[ 2 ].find("none") == std::string::npos ) {
j["parameters"]["C%wref"]["value"] = atof(vtr_[ 2 ].c_str());
j["parameters"]["C$wref"]["value"] = atof(vtr_[ 2 ].c_str());
} else {
j["parameters"]["C%wref"]["value"] = nullptr;
j["parameters"]["C$wref"]["value"] = nullptr;
}
j["parameters"]["C%wref"]["type"] = "number";
j["parameters"]["C$wref"]["type"] = "number";
// entrance edge angle (rad)
j["parameters"]["D%e1"]["displayName"] = "Entrance edge angle (rad)";
j["parameters"]["D$e1"]["displayName"] = "Entrance edge angle (rad)";
if (vtr_[ 3 ].find("none") == std::string::npos ) {
j["parameters"]["D%e1"]["value"] = atof(vtr_[ 3 ].c_str());
j["parameters"]["D$e1"]["value"] = atof(vtr_[ 3 ].c_str());
} else {
j["parameters"]["D%e1"]["value"] = nullptr;
j["parameters"]["D$e1"]["value"] = nullptr;
}
j["parameters"]["D%e1"]["type"] = "number";
j["parameters"]["D$e1"]["type"] = "number";
// exit edge angle (rad)
j["parameters"]["E%e2"]["displayName"] = "Exit edge angle (rad)";
j["parameters"]["E$e2"]["displayName"] = "Exit edge angle (rad)";
if (vtr_[ 4 ].find("none") == std::string::npos ) {
j["parameters"]["E%e2"]["value"] = atof(vtr_[ 4 ].c_str());
j["parameters"]["E$e2"]["value"] = atof(vtr_[ 4 ].c_str());
} else {
j["parameters"]["E%e2"]["value"] = nullptr;
j["parameters"]["E$e2"]["value"] = nullptr;
}
j["parameters"]["E%e2"]["type"] = "number";
j["parameters"]["E$e2"]["type"] = "number";
// fringe field integral at entrance
j["parameters"]["F%f_int1"]["displayName"] = "Entrance fringe field";
j["parameters"]["F$f_int1"]["displayName"] = "Entrance fringe field";
if (vtr_[ 5 ].find("none") == std::string::npos ) {
j["parameters"]["F%f_int1"]["value"] = atof(vtr_[ 5 ].c_str());
j["parameters"]["F$f_int1"]["value"] = atof(vtr_[ 5 ].c_str());
} else {
j["parameters"]["F%f_int1"]["value"] = nullptr;
j["parameters"]["F$f_int1"]["value"] = nullptr;
}
j["parameters"]["F%f_int1"]["type"] = "number";
j["parameters"]["F$f_int1"]["type"] = "number";
// fringe field integral at exit
j["parameters"]["G%f_int2"]["displayName"] = "Exit fringe field";
j["parameters"]["G$f_int2"]["displayName"] = "Exit fringe field";
if (vtr_[ 6 ].find("none") == std::string::npos ) {
j["parameters"]["G%f_int2"]["value"] = atof(vtr_[ 6 ].c_str());
j["parameters"]["G$f_int2"]["value"] = atof(vtr_[ 6 ].c_str());
} else {
j["parameters"]["G%f_int2"]["value"] = nullptr;
j["parameters"]["G$f_int2"]["value"] = nullptr;
}
j["parameters"]["G%f_int2"]["type"] = "number";
j["parameters"]["G$f_int2"]["type"] = "number";
// half gap between poles (m)
j["parameters"]["H%h_gap"]["displayName"] = "Half-gap (m)";
j["parameters"]["H$h_gap"]["displayName"] = "Half-gap (m)";
if (vtr_[ 7 ].find("none") == std::string::npos ) {
j["parameters"]["H%h_gap"]["value"]= atof(vtr_[ 7 ].c_str());
j["parameters"]["H$h_gap"]["value"]= atof(vtr_[ 7 ].c_str());
} else {
j["parameters"]["H%h_gap"]["value"] = nullptr;
j["parameters"]["H$h_gap"]["value"] = nullptr;
}
j["parameters"]["H%h_gap"]["type"] = "number";
j["parameters"]["H$h_gap"]["type"] = "number";
}
void elementBend::fromJSON(json j)
......@@ -393,12 +393,12 @@ void elementBend::fromJSON(json j)
json::iterator z= j.find( "parameters" );
json::iterator kt;
kt= z->find( "A%length" )->find( "value" );
kt= z->find( "A$length" )->find( "value" );
if (kt->is_number()) length_= *kt;
vector<string> v(8,"none");
kt= z->find( "B%angle" );
kt= z->find( "B$angle" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) {
......@@ -409,37 +409,37 @@ void elementBend::fromJSON(json j)
}
}
kt= z->find( "C%wref" );
kt= z->find( "C$wref" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 2 )= mixedTools::doubleToString( *zz );
}
kt= z->find( "D%e1" );
kt= z->find( "D$e1" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 3 )= mixedTools::doubleToString( *zz );
}
kt= z->find( "E%e2" );
kt= z->find( "E$e2" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 4 )= mixedTools::doubleToString( *zz );
}
kt= z->find( "F%f_int1" );
kt= z->find( "F$f_int1" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 5 )= mixedTools::doubleToString( *zz );
}
kt= z->find( "G%f_int2" );
kt= z->find( "G$f_int2" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 6 )= mixedTools::doubleToString( *zz );
}
kt= z->find( "H%h_gap" );
kt= z->find( "H$h_gap" );
if (kt != z->end()) {
auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 7 )= mixedTools::doubleToString( *zz );
......
<template>
<aside class="elements-area">
<div class="elements-area-body">
<div id="scene">
<v-stage v-if="elementsList.length" :config="configKonva">
<v-layer>
<div v-for="(element, index) in elementsList" v-bind:key="index">
<v-line v-if="index < elementsList.length - 1" :config="getConfigLine(element, index)"></v-line>
<v-rect v-if="element.type !== DRIFT" :config="getConfigRect(element)"></v-rect>
<v-image v-if="element.type !== DRIFT" :config="getImgConfig(element)"></v-image>
</div>
</v-layer>
</v-stage>
</div>
</div>
</aside>
<aside class="Xelements-area">
<div class="elements-area-body">
<div id="scene">
<v-stage v-if="elementsList.length" :config="configKonva">
<v-layer>
<div v-for="(element,index) in elementsList" v-bind:key="index">
<v-line v-if="index < elementsList.length - 1" :config="getConfigLine(element,index)"></v-line>
<v-rect v-if="element.type !== DRIFT" :config="getConfigRect(element)"></v-rect>
<v-image v-if="element.type !== DRIFT" :config="getImgConfig(element)"></v-image>
</div>
</v-layer>
</v-stage>
</div>
</div>
</aside>
</template>
<script>
......@@ -33,44 +39,52 @@ const RECT_HEIGHT = 25;
const MIN_GAP = 25;
export default {
props: ['treeModel', 'selectedElement', 'elementsSelection'],
watch: {
treeModel: function(newValue, oldValue) {
this.x = 5600;
this.y = 5500;
this.elementsList = this.$getElementList();
}
},
props: ['treeModel', 'selectedElement', 'elementsSelection'],
watch: {
treeModel: function(newValue, oldValue) {
this.x = 5600;
this.y = 5500;
this.elementsList = this.$getElementList();
}
},
data () {
return {
tree: null,
x: 5600,
y: 5500,
elementsList: [],
maxDrift: 0,
configKonva: {
width: 10000,
height: 10000
},
DRIFT
tree: null,
x: 5600,
y: 5500,
elementsList: [],
maxDrift: 0,
configKonva: {
width: 10000,
height: 10000
},
DRIFT
}
},
},
methods: {
$getMaxDrift (elements) {
let maxDrift = 0.000001
elements.forEach(element => {
if (element.type === DRIFT && element.parameters && element.parameters.length && element.parameters.length.value) {
if (maxDrift < element.parameters.length.value) {
maxDrift = element.parameters.length.value
}
}
})
return maxDrift
},
$getColor: function(element, defaultColor) {
$getMaxDrift (elements) {
let maxDrift = 0.000001
elements.forEach(element => {
if (element.type === DRIFT && element.parameters && element.parameters.length && element.parameters.length.value) {
if (maxDrift < element.parameters.length.value) {
maxDrift = element.parameters.length.value
}
}
})
return maxDrift
},
$getColor: function(element,defaultColor) {
let colorClass = defaultColor;
if (!this.elementsSelection) return '';
if (!this.elementsSelection) return '';
this.elementsSelection.some(elementSelection => {
if (elementSelection.elements.includes(element.id)) {
......@@ -78,122 +92,141 @@ export default {
return true;
}
});
return colorClass;
return colorClass;
},
getConfigRect: function(element) {
return {
x: element.x - (RECT_WIDTH / 2),
y: element.y - (RECT_HEIGHT / 2),
width: RECT_WIDTH,
height: RECT_HEIGHT,
fill: this.$getColor(element, COLORS['drift-color']),
stroke: 'white',
strokeWidth: 0
};
},
getConfigRect: function(element) {
return {
x: element.x - (RECT_WIDTH / 2),
y: element.y - (RECT_HEIGHT / 2),
width: RECT_WIDTH,
height: RECT_HEIGHT,
fill: this.$getColor(element, COLORS['drift-color']),
stroke: 'white',
strokeWidth: 0
};
},
getImgConfig: function(element) {
const conifgImage = {
x: element.x - (RECT_WIDTH * 0.28),
getImgConfig: function(element) {
const conifgImage = {
x: element.x - (RECT_WIDTH * 0.28),
y: element.y - (RECT_HEIGHT * 0.28),
image: new Image(),
width: RECT_WIDTH * 0.57,
height: RECT_HEIGHT * 0.57
};
conifgImage.image.src = `/static/assets/${element.type}.png`;
return conifgImage;
},
getConfigLine: function(element, index) {
const { x, y } = this.elementsList[index];
const { x: nextX, y: nextY } = this.elementsList[index + 1];
return {
points: [
x,
y,
nextX,
nextY
],
lineJoin: 'round',
dash: [10, 8],
stroke: 'black',
strokeWidth: 1
}
},
$getX: function(type, angle, driftGap = 0, index) {
// If element type is equal to DRIFT, we delete GAP in order that elements between him are glued if drift length is 0
let angleDeg = (180 * angle) / (Math.PI)
return index == 0
? (Math.cos(angleDeg * Math.PI / 180) * 1 + this.x)
: (Math.cos(angleDeg * Math.PI / 180) * (driftGap) + this.x);
};
conifgImage.image.src = `/static/assets/${element.type}.png`;
return conifgImage;
},
getConfigLine: function(element, index) {
const { x, y } = this.elementsList[index];
const { x: nextX, y: nextY } = this.elementsList[index + 1];
return {
points: [
x,
y,
nextX,
nextY
],
lineJoin: 'round',
dash: [10, 8],
stroke: 'black',
strokeWidth: 1
}
},
$getX: function(type, angle, driftGap = 0, index) {
// If element type is equal to DRIFT, we delete GAP in order that elements between him are glued if drift length is 0
let angleDeg = (180 * angle) / (Math.PI)
return index == 0
? (Math.cos(angleDeg * Math.PI / 180) * 1 + this.x)
: (Math.cos(angleDeg * Math.PI / 180) * (driftGap) + this.x);
},
$getY: function(type, angle, driftGap = 0) {
// If element type is equal to DRIFT, we delete GAP in order that elements between him are glued if drift length is 0
let angleDeg = (180 * angle) / (Math.PI)
return (Math.sin(angleDeg * Math.PI / 180) * (driftGap) + this.y)
},
$calculateCoordonates: function(elements) {
let angle = 0;
let driftGap = 0;
this.maxDrift = this.$getMaxDrift(elements);
return elements.map((element, index) => {
this.x = this.$getX(element.type, angle, driftGap, index);
this.y = this.$getY(element.type, angle, driftGap);
if (_.get(element, 'parameters.angle.value')) {
angle = ((angle + element.parameters.angle.value) % (2 * Math.PI));
}
driftGap = this.$calculDriftGap(element);
return { x: this.x, y: this.y, ...element};
});
},
$calculDriftGap: function(element) {
if (_.has(element, 'parameters.length.value')) {
return this.$convertMeterToPixel(element.parameters.length.value);
} else if (_.has(element, 'parameters.length.radius') && _.has(element, 'parameters.length.angle')) {
return this.$convertMeterToPixel(element.parameters.radius.value * element.parameters.angle.value);
} else {
return 0;
}
},
$convertMeterToPixel (length) {
return (+length / (this.maxDrift || 1)) * 250;
},
$walTreeAndSelectElement: function() {
const nodesList = [];
const treeModel = new TreeModel({
childrenPropertyName: 'elements'
});
this.tree = treeModel.parse({id: 'root', elements: this.treeModel});
this.tree.walk((node) => {
if (node.model.category === 'element') {
nodesList.push(node.model);
}
});
return nodesList;
},
$getElementList: function () {
const elementWithoutCoordonates = this.$walTreeAndSelectElement();
const elementsList = this.$calculateCoordonates(elementWithoutCoordonates);
return elementsList;
}
},
mounted() {
this.scene = document.getElementById('scene');
// If element type is equal to DRIFT, we delete GAP in order that elements between him are glued if drift length is 0
let angleDeg = (180 * angle) / (Math.PI)
return (Math.sin(angleDeg * Math.PI / 180) * (driftGap) + this.y)
},
$calculateCoordonates: function(elements) {
let angle = 0;
let driftGap = 0;
this.maxDrift = this.$getMaxDrift(elements);
return elements.map((element, index) => {
this.x = this.$getX(element.type, angle, driftGap, index);
this.y = this.$getY(element.type, angle, driftGap);
if (_.get(element, 'parameters.angle.value')) {
angle = ((angle + element.parameters.angle.value) % (2*Math.PI));
}
driftGap = this.$calculDriftGap(element);
return { x: this.x, y: this.y, ...element};
});
},
if (this.treeModel) {
this.elementsList = this.$getElementList();
}
panzoom(this.scene, {
maxZoom: 3.2,
minZoom: 0.1
}).zoomAbs(-8200, -7850, 0.6);
$calculDriftGap: function(element) {
if (_.has(element, 'parameters.length.value')) {
return this.$convertMeterToPixel(element.parameters.length.value);
} else if (_.has(element, 'parameters.length.radius') && _.has(element, 'parameters.length.angle')) {
return this.$convertMeterToPixel(element.parameters.radius.value * element.parameters.angle.value);
} else {
return 0;
}
},
$convertMeterToPixel (length) {
return (+length / (this.maxDrift || 1)) * 250;
},
$walTreeAndSelectElement: function() {
const nodesList = [];
const treeModel = new TreeModel({
childrenPropertyName: 'elements'
});
this.tree = treeModel.parse({id: 'root', elements: this.treeModel});
this.tree.walk((node) => {
if (node.model.category === 'element') {
nodesList.push(node.model);
}
});
return nodesList;
},
$getElementList: function () {
const elementWithoutCoordonates = this.$walTreeAndSelectElement();
const elementsList = this.$calculateCoordonates(elementWithoutCoordonates);
return elementsList;
}
},
mounted() {
this.scene = document.getElementById('scene');
if (this.treeModel) {
this.elementsList = this.$getElementList();
}
panzoom(this.scene, {
maxZoom: 3.2,
minZoom: 0.1
}).zoomAbs(-8200, -7850, 0.6);
}
};
</script>
......@@ -204,14 +237,14 @@ export default {
}
.elements-area {
width: 100%;
color: #222f3e;
color: #222f3e;
background-color: white;
box-shadow: 0px 4px 10px rgba(34, 47, 62, 0.2);
&-body {
overflow: scroll;
overflow: scroll;
&:focus {
outline: 0;
}
......
......@@ -3,10 +3,9 @@
<div class="twiss-box">
<div class="twiss-radio-container">
<h6 class="font-weight-bold">Twiss commands</h6>
<b-form-radio-group
<h6 class="font-weight-bold">Twiss commands</h6>
<b-form-radio-group
v-model="actionParameters.twissCommands"
:options="twissCommandsRadios"
@change="applyTwissCommandsUpdate">
......@@ -67,7 +66,7 @@
<div class="twiss-checkboxes-container">
<h6 class="font-weight-bold">Output other quantities</h6>
<h6 class="font-weight-bold">Other output quantities</h6>
<b-form-checkbox-group stacked
v-model="actionParameters.outputFunctions"
:options="outputFunctionsCheckboxes">
......@@ -84,10 +83,11 @@