bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created paper contents once concernement opened and not on init, UI should be smoother #2150

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-14 11:05:54 +02:00
parent f17781b8be
commit 8f001f8a1b
2 changed files with 69 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/ConcernementMapItem.vue
View File

@ -454,16 +454,9 @@ export default {
// this.paper_main_object.addChild(this.setPaperAgissantes()); // this.paper_main_object.addChild(this.setPaperAgissantes());
} }
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
this.addNewPaperSymbolInstance('doleance_bg'); // this.addNewPaperSymbolInstance('doleance_bg');
this.addNewPaperSymbolInstance('doleance_icon'); this.addNewPaperSymbolInstance('doleance_icon');
let g = new paper.Group({ // this.paper_main_object.addChild(this.setPaperDoleances());
pivot: new paper.Point({x:0,y:0}),
name: `doleances`
});
this.concernement.doleances.forEach((d) => {
g.addChild(this.setPaperDoleanceSteps(d))
});
this.paper_main_object.addChild(g);
} }
// console.log(`initPaperObjects ${this.id}`, this.paper_main_object); // console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
@ -485,12 +478,17 @@ export default {
this.addNewPaperSymbolInstance('boussole_bg', true); this.addNewPaperSymbolInstance('boussole_bg', true);
this.paper_main_object.addChild(this.setPaperAgissantes()); this.paper_main_object.addChild(this.setPaperAgissantes());
break; break;
case 'doleancer':
this.addNewPaperSymbolInstance('doleance_bg');
this.paper_main_object.addChild(this.setPaperDoleances());
break;
} }
}, },
clearPaperContents(){ clearPaperContents(){
let clearable_children = ['boussole_bg', 'entites', let clearable_children = ['boussole_bg', 'entites',
'puissanceagir_bg','puissanceagir_besoins', 'puissanceagir_bg','puissanceagir_besoins',
'agissantes']; 'agissantes',
'doleance_bg', 'doleances'];
clearable_children.forEach(child_name => { clearable_children.forEach(child_name => {
if (this.paper_main_object.children[child_name]) { if (this.paper_main_object.children[child_name]) {
@ -687,6 +685,16 @@ export default {
return g; return g;
}, },
setPaperDoleances(){
let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}),
name: `doleances`
});
this.concernement.doleances.forEach((d) => {
g.addChild(this.setPaperDoleanceSteps(d))
});
return g;
},
setPaperDoleanceSteps(doleance){ setPaperDoleanceSteps(doleance){
let g = new paper.Group({ let g = new paper.Group({
pivot: new paper.Point({x:0,y:0}), pivot: new paper.Point({x:0,y:0}),
@ -922,7 +930,7 @@ export default {
// adresse de la doleance // adresse de la doleance
g.addChild(new paper.Path.Circle({ g.addChild(new paper.Path.Circle({
center: [this.pos.x - r, this.pos.y], center: [this.pos.x - r, this.pos.y],
radius: 3, radius: 3 * this.scale,
style: { style: {
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
@ -937,7 +945,7 @@ export default {
// decision // decision
g.addChild(new paper.Path.Circle({ g.addChild(new paper.Path.Circle({
center: [this.pos.x, this.pos.y - r], center: [this.pos.x, this.pos.y - r],
radius: 3, radius: 3 * this.scale,
style: { style: {
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
@ -952,7 +960,7 @@ export default {
// adresse_de_la_decision // adresse_de_la_decision
g.addChild(new paper.Path.Circle({ g.addChild(new paper.Path.Circle({
center: [this.pos.x + r, this.pos.y], center: [this.pos.x + r, this.pos.y],
radius: 3, radius: 3 * this.scale,
style: { style: {
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
@ -998,9 +1006,9 @@ export default {
// if (this.concernement.has_puissancedagir) { // if (this.concernement.has_puissancedagir) {
// this.paper_main_object.children.puissanceagir_bg.visible = false; // this.paper_main_object.children.puissanceagir_bg.visible = false;
// } // }
if (this.concernement.has_doleance) { // if (this.concernement.has_doleance) {
this.paper_main_object.children.doleance_bg.visible = false; // this.paper_main_object.children.doleance_bg.visible = false;
} // }
// choose wich one to show, if one // choose wich one to show, if one
switch (this.map_mode) { switch (this.map_mode) {
case 'terraindevie': case 'terraindevie':
@ -1013,9 +1021,9 @@ export default {
// } // }
break; break;
case 'doleancer': case 'doleancer':
if (this.concernement.has_doleance) { // if (this.concernement.has_doleance) {
this.paper_main_object.children.doleance_bg.visible = true; // this.paper_main_object.children.doleance_bg.visible = true;
} // }
break; break;
} }
}else{ }else{
@ -1023,9 +1031,9 @@ export default {
// if (this.concernement.has_puissancedagir) { // if (this.concernement.has_puissancedagir) {
// this.paper_main_object.children.puissanceagir_bg.visible = false; // this.paper_main_object.children.puissanceagir_bg.visible = false;
// } // }
if (this.concernement.has_doleance) { // if (this.concernement.has_doleance) {
this.paper_main_object.children.doleance_bg.visible = false; // this.paper_main_object.children.doleance_bg.visible = false;
} // }
} }
// entites // entites
@ -1071,10 +1079,10 @@ export default {
if (this.map_mode === "doleancer") { if (this.map_mode === "doleancer") {
if (!this.is_opened) { if (!this.is_opened) {
this.paper_main_object.children.doleance_icon.visible = true; this.paper_main_object.children.doleance_icon.visible = true;
this.paper_main_object.children.doleances.visible = false; // this.paper_main_object.children.doleances.visible = false;
} else { } else {
this.paper_main_object.children.doleance_icon.visible = false; this.paper_main_object.children.doleance_icon.visible = false;
this.paper_main_object.children.doleances.visible = true; // this.paper_main_object.children.doleances.visible = true;
// display the right (opened) doleance // display the right (opened) doleance
this.concernement.doleances.forEach((d) => { this.concernement.doleances.forEach((d) => {
this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id; this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
@ -1082,7 +1090,7 @@ export default {
} }
} else { } else {
this.paper_main_object.children.doleance_icon.visible = false; this.paper_main_object.children.doleance_icon.visible = false;
this.paper_main_object.children.doleances.visible = false; // this.paper_main_object.children.doleances.visible = false;
} }
} }
@ -1133,11 +1141,13 @@ export default {
paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins']; paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins'];
break; break;
case "doleancer": case "doleancer":
paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`]; if(this.paper_main_object.children['doleances']){
paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
}
break; break;
} }
let result = paper_group_tohit.hitTest(event.point); let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
// console.log('move result', result); // console.log('move result', result);
if (result && result.item.item_id) { if (result && result.item.item_id) {
// console.log('move has result', result); // console.log('move has result', result);
@ -1247,6 +1257,9 @@ export default {
if (open) { if (open) {
// paper bring to front // paper bring to front
this.paper_main_object.bringToFront(); this.paper_main_object.bringToFront();
// create the paper objects to display (like entite, besoin, etc)
this.setPaperContents();
// calcul opened size regarding window size // calcul opened size regarding window size
// let ch = this.canvas.height; // let ch = this.canvas.height;
// let s = this.canvas.height / (this.ray*2.8) // let s = this.canvas.height / (this.ray*2.8)
@ -1295,8 +1308,6 @@ export default {
}); });
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
// create the paper objects to display (like entite, besoin, etc)
this.setPaperContents();
}); });
// recreate the matter engine event to get it a the end of the events stack // recreate the matter engine event to get it a the end of the events stack
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);

55
src/components/MapConcernements.vue
View File

@ -161,28 +161,30 @@ export default {
if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) { if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
let oitem = paper.project.getItem({id: o.paper_id}) let oitem = paper.project.getItem({id: o.paper_id})
console.log('watch hover_element oitem', oitem); if (oitem) {
if (!oitem.is_symbol_instance) { // not symbol instance console.log('watch hover_element oitem', oitem);
if (oitem.data.prevStrokeColor) { if (!oitem.is_symbol_instance) { // not symbol instance
oitem.strokeColor = oitem.data.prevStrokeColor; if (oitem.data.prevStrokeColor) {
} else { oitem.strokeColor = oitem.data.prevStrokeColor;
oitem.fillColor = oitem.data.prevFillColor; } else {
} oitem.fillColor = oitem.data.prevFillColor;
} else { // is a symbol instanceof, then swap }
console.log(`symbol instance o.type:${o.type}, oitem`, oitem); } else { // is a symbol instanceof, then swap
switch (o.type) { console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
case 'entite': switch (o.type) {
oitem.definition = this.paper_symbol_definitions.entite; case 'entite':
break; oitem.definition = this.paper_symbol_definitions.entite;
case 'besoin': break;
oitem.definition = this.paper_symbol_definitions.besoin; case 'besoin':
break; oitem.definition = this.paper_symbol_definitions.besoin;
case 'reponse': break;
oitem.definition = this.paper_symbol_definitions.reponse; case 'reponse':
break; oitem.definition = this.paper_symbol_definitions.reponse;
case 'entite_action': break;
oitem.definition = this.paper_symbol_definitions.entite_action; case 'entite_action':
break; oitem.definition = this.paper_symbol_definitions.entite_action;
break;
}
} }
} }
@ -897,11 +899,11 @@ export default {
}, },
setPaperEntiteActionSymbol(){ setPaperEntiteActionSymbol(){
let svgIcon = paper.project.importSVG(iconAction); let svgIcon = paper.project.importSVG(iconAction);
svgIcon.strokeColor = '#000';
svgIcon.strokeWidth = 0.25; svgIcon.strokeWidth = 0.25;
svgIcon.scale(0.15);
svgIcon.strokeColor = '#000';
svgIcon.fillColor = null; svgIcon.fillColor = null;
svgIcon.position = {x:0, y:0}; svgIcon.position = {x:0, y:0};
svgIcon.scale(0.15);
let circle = new paper.Path.Circle({ let circle = new paper.Path.Circle({
radius: 3, radius: 3,
@ -916,12 +918,13 @@ export default {
setPaperEntiteActionHoverSymbol(){ setPaperEntiteActionHoverSymbol(){
let svgIcon = paper.project.importSVG(iconAction); let svgIcon = paper.project.importSVG(iconAction);
svgIcon.strokeColor = '#01ffe2'; svgIcon.strokeColor = '#01ffe2';
svgIcon.strokeWidth = 0.75; svgIcon.strokeWidth = 0.25;
svgIcon.scale(0.15);
svgIcon.fillColor = null; svgIcon.fillColor = null;
svgIcon.position = {x:0, y:0}; svgIcon.position = {x:0, y:0};
let circle = new paper.Path.Circle({ let circle = new paper.Path.Circle({
radius: 15, radius: 3,
fillColor: 'rgba(255,255,255,0.05)' fillColor: 'rgba(255,255,255,0.05)'
}) })