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">
<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>
<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>
</template>
<script>
......@@ -33,14 +39,18 @@ 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();
}
},
data () {
return {
tree: null,
......@@ -55,8 +65,11 @@ export default {
DRIFT
}
},
methods: {
$getMaxDrift (elements) {
let maxDrift = 0.000001
elements.forEach(element => {
if (element.type === DRIFT && element.parameters && element.parameters.length && element.parameters.length.value) {
......@@ -67,9 +80,10 @@ export default {
})
return maxDrift
},
$getColor: function(element, defaultColor) {
let colorClass = defaultColor;
$getColor: function(element,defaultColor) {
let colorClass = defaultColor;
if (!this.elementsSelection) return '';
this.elementsSelection.some(elementSelection => {
......@@ -78,10 +92,11 @@ export default {
return true;
}
});
return colorClass;
},
getConfigRect: function(element) {
return {
x: element.x - (RECT_WIDTH / 2),
y: element.y - (RECT_HEIGHT / 2),
......@@ -92,7 +107,9 @@ export default {
strokeWidth: 0
};
},
getImgConfig: function(element) {
const conifgImage = {
x: element.x - (RECT_WIDTH * 0.28),
y: element.y - (RECT_HEIGHT * 0.28),
......@@ -100,11 +117,12 @@ export default {
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];
......@@ -121,35 +139,43 @@ export default {
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));
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')) {
......@@ -158,12 +184,15 @@ export default {
return 0;
}
},
$convertMeterToPixel (length) {
return (+length / (this.maxDrift || 1)) * 250;
},
$walTreeAndSelectElement: function() {
const nodesList = [];
const nodesList = [];
const treeModel = new TreeModel({
childrenPropertyName: 'elements'
});
......@@ -174,16 +203,20 @@ export default {
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) {
......@@ -204,6 +237,7 @@ export default {
}
.elements-area {
width: 100%;
color: #222f3e;
background-color: white;
......@@ -211,7 +245,6 @@ export default {
&-body {
overflow: scroll;
&:focus {
outline: 0;
}
......
......@@ -3,9 +3,8 @@
<div class="twiss-box">
<div class="twiss-radio-container">
<h6 class="font-weight-bold">Twiss commands</h6>
<h6 class="font-weight-bold">Twiss commands</h6>
<b-form-radio-group
v-model="actionParameters.twissCommands"
:options="twissCommandsRadios"
......@@ -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 @@
import { INITIAL_VALUES } from "@/utils/constants/actions-form-values.js";
const LOAD_PARAMETERS = 'loadParameters';
const LOAD_BEAM = 'loadBeam';
const PERIODIC_SOLUTION = 'periodicSolution';
const CHROMATIC = 'chromatic';
const BEAM = 'beam';
const HINVX = 'hinvx';
const BETA_X = 'beta_x';
const ALPHA_X = 'alpha_x';
......@@ -117,7 +117,7 @@ export default {
return {
LOAD_PARAMETERS,
LOAD_BEAM,
INITIAL_VALUES,
PERIODIC_SOLUTION,
......@@ -129,7 +129,7 @@ export default {
twissCommandsRadios: [
{ text: 'Load parameters', value: LOAD_PARAMETERS },
{ text: 'Load beam', value: LOAD_BEAM },
{ text: 'Initial Values', value: INITIAL_VALUES },
{ text: 'Periodic solution', value: PERIODIC_SOLUTION }
......@@ -151,7 +151,7 @@ export default {
outputFunctionsCheckboxes: [
{ text: 'chromatic functions (Wx,Wy,DDx)', value: CHROMATIC },
{ text: 'beam parameters (σx,σy,Hx)', value: BEAM }
{ text: 'the H function', value: HINVX }
]
......
......@@ -2,7 +2,7 @@ import Vue from 'vue'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import VueSession from 'vue-session'
import App from './App'
import App from './APP'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
......
......@@ -71,9 +71,7 @@
</template>
<template v-if="selectedView == LINEAR_VIEW">
<div id="dropzone"
class="dropzone linear-view-dropzone"
v-bind:class="{'small-size': isElementsPickerActive}">
<div id="dropzone" class="dropzone linear-view-dropzone" v-bind:class="{'small-size': isElementsPickerActive}">
<LinearView
id="root"
:treeModel="getTreeModel()"
......@@ -93,88 +91,39 @@
</ItemsPicker>
</div>
<div v-if="!isElementsPickerActive"
class="button-actions">
<div v-if="!isElementsPickerActive" class="button-actions">
<router-link to="/Simulate">
<b-button size="md"
type="button"
id="set-simulation"
class=" btn new-sector border border-success text-white bg-success float-right mr-3">
Set the simulation
</b-button>
<b-button size="md" type="button" id="set-simulation" class=" btn new-sector border border-success text-white bg-success float-right mr-3">Set the simulation</b-button>
</router-link>
<b-button size="md"
class="white-button ml-4"
@click="displayAddSectorModal">
Add New Sector
</b-button>
<div class="modal-backdrop"
v-if="isAddSectorModalVisible"
@close="closeAddSectorModal">
<div class="sectorModal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription">
<header class="modal-header font-weight-bold"
id="modalTitle">
<b-button size="md" class="white-button ml-4" @click="displayAddSectorModal">Add New Sector</b-button>
<div class="modal-backdrop" v-if="isAddSectorModalVisible" @close="closeAddSectorModal">
<div class="sectorModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<header class="modal-header font-weight-bold" id="modalTitle">
<slot name="header">
New Sector
<button type="button"
class="btn-close"
@click="closeAddSectorModal"
aria-label="Close modal">
x
</button>
<button type="button" class="btn-close" @click="closeAddSectorModal" aria-label="Close modal">x</button>
</slot>
</header>
<section class="modal-body"
id="modalDescription">
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="dialog-sector"
title ="Name new sector">
<div class="dialog-sector" title ="Name new sector">
<input v-model="sectorName" type="text">
<button id="get-sector-name"
@click="addSector(sectorName)">
OK
</button>
<button id="get-sector-name" @click="addSector(sectorName)">OK</button>
</div>
</slot>
</section>
</div>
</div>
<b-button size="md"
class="new-element element-button ml-3"
@click="displayItemsPicker">
New Element
</b-button>
<b-button size="md" class="new-element element-button ml-3" @click="displayItemsPicker">New Element</b-button>
</div>
<div class="modal-backdrop"
v-show="pourVoir"
@close="pourVoirModal">
<div class="resultModal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription">
<section class="modal-body"
id="modalDescription">
<div class="modal-backdrop" v-show="pourVoir" @close="pourVoirModal">
<div class="resultModal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
<section class="modal-body" id="modalDescription">
<slot name="body">
<div class="mb-2">
Caution: are you sure you want to delete?<br/><br/>
<b-button variant="outline-danger"
@click="deleteElement">
YES
</b-button>
|
<b-button squared variant="secondary"
@click="pourVoir=false">
CANCEL
</b-button>
<b-button variant="outline-danger" @click="deleteElement">YES</b-button> | <b-button squared variant="secondary" @click="pourVoir=false">CANCEL</b-button>
</div>
</slot>
</section>
......@@ -189,12 +138,18 @@
<div class="design-aside">
<div class="dropzone-section">
<div class="elements-area-header d-flex flex-row justify-content-between">
<h1>Layout View</h1>
</div>
<div class="layout-view-container" v-bind:class="{'small-size': selectedElements.length && isItemSelected}">
<LayoutView :treeModel="getTreeModel()"></LayoutView>
<!-- RALBOL :treeModel="getTreeModel()"></RALBOL -->
</div>
<div v-if="selectedElements.length && isItemSelected" class="elements-edition-container">
<ElementEdition
:element="selectedElements.first()"
......@@ -216,7 +171,10 @@
<script>
import history from "@/components/common/History";
import TreeView from "@/components/design-page/TreeView";
import LayoutView from "@/components/design-page/LayoutView";
//import RALBOL from "@/components/design-page/RALBOL";
import ItemsPicker from "@/components/design-page/ItemsPicker";
import LinearView from "@/components/design-page/LinearView";
import ElementEdition from "@/components/common/ElementEdition";
......@@ -241,6 +199,7 @@ export default {
ItemsPicker,
ElementEdition,
ZoomLinear
//RALBOL
},
data() {
......@@ -450,9 +409,7 @@ export default {
this.$openEditionBlock();
this.selectedElements = selectedNodes.map((node) => node.model);
},
updateLastClickedElement ({oldElement, newElement}) {
// Get similar nodes with same label
const selectedNodes