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) ...@@ -311,72 +311,72 @@ void elementBend::toJSON(json& j)
j["color"]= "#74B9FF"; j["color"]= "#74B9FF";
// arc length (m) // arc length (m)
j["parameters"]["A%length"]["displayName"] = "Arc length (m)"; j["parameters"]["A$length"]["displayName"] = "Arc length (m)";
j["parameters"]["A%length"]["value"] = length_; j["parameters"]["A$length"]["value"] = length_;
j["parameters"]["A%length"]["type"] = "number"; j["parameters"]["A$length"]["type"] = "number";
// bend angle (rad) // 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 ) { 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 { } 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) // 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 ) { 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 { } 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) // 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 ) { 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 { } 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) // 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 ) { 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 { } 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 // 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 ) { 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 { } 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 // 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 ) { 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 { } 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) // 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 ) { 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 { } 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) void elementBend::fromJSON(json j)
...@@ -393,12 +393,12 @@ void elementBend::fromJSON(json j) ...@@ -393,12 +393,12 @@ void elementBend::fromJSON(json j)
json::iterator z= j.find( "parameters" ); json::iterator z= j.find( "parameters" );
json::iterator kt; json::iterator kt;
kt= z->find( "A%length" )->find( "value" ); kt= z->find( "A$length" )->find( "value" );
if (kt->is_number()) length_= *kt; if (kt->is_number()) length_= *kt;
vector<string> v(8,"none"); vector<string> v(8,"none");
kt= z->find( "B%angle" ); kt= z->find( "B$angle" );
if (kt != z->end()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) { if (zz->is_number()) {
...@@ -409,37 +409,37 @@ void elementBend::fromJSON(json j) ...@@ -409,37 +409,37 @@ void elementBend::fromJSON(json j)
} }
} }
kt= z->find( "C%wref" ); kt= z->find( "C$wref" );
if (kt != z->end()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 2 )= mixedTools::doubleToString( *zz ); if (zz->is_number()) v.at( 2 )= mixedTools::doubleToString( *zz );
} }
kt= z->find( "D%e1" ); kt= z->find( "D$e1" );
if (kt != z->end()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 3 )= mixedTools::doubleToString( *zz ); if (zz->is_number()) v.at( 3 )= mixedTools::doubleToString( *zz );
} }
kt= z->find( "E%e2" ); kt= z->find( "E$e2" );
if (kt != z->end()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 4 )= mixedTools::doubleToString( *zz ); 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()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 5 )= mixedTools::doubleToString( *zz ); 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()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 6 )= mixedTools::doubleToString( *zz ); 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()) { if (kt != z->end()) {
auto zz = kt->find( "value" ); auto zz = kt->find( "value" );
if (zz->is_number()) v.at( 7 )= mixedTools::doubleToString( *zz ); if (zz->is_number()) v.at( 7 )= mixedTools::doubleToString( *zz );
......
<template> <template>
<aside class="elements-area"> <aside class="Xelements-area">
<div class="elements-area-body">
<div id="scene"> <div class="elements-area-body">
<v-stage v-if="elementsList.length" :config="configKonva">
<v-layer> <div id="scene">
<div v-for="(element, index) in elementsList" v-bind:key="index"> <v-stage v-if="elementsList.length" :config="configKonva">
<v-line v-if="index < elementsList.length - 1" :config="getConfigLine(element, index)"></v-line> <v-layer>
<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-for="(element,index) in elementsList" v-bind:key="index">
</div> <v-line v-if="index < elementsList.length - 1" :config="getConfigLine(element,index)"></v-line>
</v-layer> <v-rect v-if="element.type !== DRIFT" :config="getConfigRect(element)"></v-rect>
</v-stage> <v-image v-if="element.type !== DRIFT" :config="getImgConfig(element)"></v-image>
</div> </div>
</div>
</aside> </v-layer>
</v-stage>
</div>
</div>
</aside>
</template> </template>
<script> <script>
...@@ -33,44 +39,52 @@ const RECT_HEIGHT = 25; ...@@ -33,44 +39,52 @@ const RECT_HEIGHT = 25;
const MIN_GAP = 25; const MIN_GAP = 25;
export default { export default {
props: ['treeModel', 'selectedElement', 'elementsSelection'],
watch: { props: ['treeModel', 'selectedElement', 'elementsSelection'],
treeModel: function(newValue, oldValue) {
this.x = 5600; watch: {
this.y = 5500;
this.elementsList = this.$getElementList(); treeModel: function(newValue, oldValue) {
} this.x = 5600;
}, this.y = 5500;
this.elementsList = this.$getElementList();
}
},
data () { data () {
return { return {
tree: null, tree: null,
x: 5600, x: 5600,
y: 5500, y: 5500,
elementsList: [], elementsList: [],
maxDrift: 0, maxDrift: 0,
configKonva: { configKonva: {
width: 10000, width: 10000,
height: 10000 height: 10000
}, },
DRIFT DRIFT
} }
}, },
methods: { methods: {
$getMaxDrift (elements) {
let maxDrift = 0.000001 $getMaxDrift (elements) {
elements.forEach(element => {
if (element.type === DRIFT && element.parameters && element.parameters.length && element.parameters.length.value) { let maxDrift = 0.000001
if (maxDrift < element.parameters.length.value) { elements.forEach(element => {
maxDrift = element.parameters.length.value 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) { return maxDrift
},
$getColor: function(element,defaultColor) {
let colorClass = defaultColor; let colorClass = defaultColor;
if (!this.elementsSelection) return '';
if (!this.elementsSelection) return '';
this.elementsSelection.some(elementSelection => { this.elementsSelection.some(elementSelection => {
if (elementSelection.elements.includes(element.id)) { if (elementSelection.elements.includes(element.id)) {
...@@ -78,122 +92,141 @@ export default { ...@@ -78,122 +92,141 @@ export default {
return true; 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 { getImgConfig: function(element) {
x: element.x - (RECT_WIDTH / 2),
y: element.y - (RECT_HEIGHT / 2), const conifgImage = {
width: RECT_WIDTH, x: element.x - (RECT_WIDTH * 0.28),
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),
y: element.y - (RECT_HEIGHT * 0.28), y: element.y - (RECT_HEIGHT * 0.28),
image: new Image(), image: new Image(),
width: RECT_WIDTH * 0.57, width: RECT_WIDTH * 0.57,
height: RECT_HEIGHT * 0.57 height: RECT_HEIGHT * 0.57
}; };
conifgImage.image.src = `/static/assets/${element.type}.png`;
conifgImage.image.src = `/static/assets/${element.type}.png`; return conifgImage;
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);
}, },
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) { $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) // If element type is equal to DRIFT, we delete GAP in order that elements between him are glued if drift length is 0
return (Math.sin(angleDeg * Math.PI / 180) * (driftGap) + this.y) 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; $calculateCoordonates: function(elements) {
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); let angle = 0;
let driftGap = 0;
if (_.get(element, 'parameters.angle.value')) { this.maxDrift = this.$getMaxDrift(elements);
angle = ((angle + element.parameters.angle.value) % (2 * Math.PI)); return elements.map((element, index) => {
} this.x = this.$getX(element.type, angle, driftGap, index);
this.y = this.$getY(element.type, angle, driftGap);
driftGap = this.$calculDriftGap(element); if (_.get(element, 'parameters.angle.value')) {
return { x: this.x, y: this.y, ...element}; angle = ((angle + element.parameters.angle.value) % (2*Math.PI));
}); }
}, driftGap = this.$calculDriftGap(element);
$calculDriftGap: function(element) { return { x: this.x, y: this.y, ...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) { $calculDriftGap: function(element) {
this.elementsList = this.$getElementList();
} if (_.has(element, 'parameters.length.value')) {
return this.$convertMeterToPixel(element.parameters.length.value);
panzoom(this.scene, { } else if (_.has(element, 'parameters.length.radius') && _.has(element, 'parameters.length.angle')) {
maxZoom: 3.2, return this.$convertMeterToPixel(element.parameters.radius.value * element.parameters.angle.value);
minZoom: 0.1 } else {
}).zoomAbs(-8200, -7850, 0.6); 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);
}
});