created paper contents once concernement opened and not on init, UI should be smoother #2150
This commit is contained in:
parent
f17781b8be
commit
8f001f8a1b
@ -454,16 +454,9 @@ export default {
|
||||
// this.paper_main_object.addChild(this.setPaperAgissantes());
|
||||
}
|
||||
if (this.concernement.has_doleance) {
|
||||
this.addNewPaperSymbolInstance('doleance_bg');
|
||||
// this.addNewPaperSymbolInstance('doleance_bg');
|
||||
this.addNewPaperSymbolInstance('doleance_icon');
|
||||
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))
|
||||
});
|
||||
this.paper_main_object.addChild(g);
|
||||
// this.paper_main_object.addChild(this.setPaperDoleances());
|
||||
}
|
||||
// console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
|
||||
|
||||
@ -485,12 +478,17 @@ export default {
|
||||
this.addNewPaperSymbolInstance('boussole_bg', true);
|
||||
this.paper_main_object.addChild(this.setPaperAgissantes());
|
||||
break;
|
||||
case 'doleancer':
|
||||
this.addNewPaperSymbolInstance('doleance_bg');
|
||||
this.paper_main_object.addChild(this.setPaperDoleances());
|
||||
break;
|
||||
}
|
||||
},
|
||||
clearPaperContents(){
|
||||
let clearable_children = ['boussole_bg', 'entites',
|
||||
'puissanceagir_bg','puissanceagir_besoins',
|
||||
'agissantes'];
|
||||
'agissantes',
|
||||
'doleance_bg', 'doleances'];
|
||||
|
||||
clearable_children.forEach(child_name => {
|
||||
if (this.paper_main_object.children[child_name]) {
|
||||
@ -687,6 +685,16 @@ export default {
|
||||
|
||||
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){
|
||||
let g = new paper.Group({
|
||||
pivot: new paper.Point({x:0,y:0}),
|
||||
@ -922,7 +930,7 @@ export default {
|
||||
// adresse de la doleance
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [this.pos.x - r, this.pos.y],
|
||||
radius: 3,
|
||||
radius: 3 * this.scale,
|
||||
style: {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2,
|
||||
@ -937,7 +945,7 @@ export default {
|
||||
// decision
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [this.pos.x, this.pos.y - r],
|
||||
radius: 3,
|
||||
radius: 3 * this.scale,
|
||||
style: {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2,
|
||||
@ -952,7 +960,7 @@ export default {
|
||||
// adresse_de_la_decision
|
||||
g.addChild(new paper.Path.Circle({
|
||||
center: [this.pos.x + r, this.pos.y],
|
||||
radius: 3,
|
||||
radius: 3 * this.scale,
|
||||
style: {
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 2,
|
||||
@ -998,9 +1006,9 @@ export default {
|
||||
// if (this.concernement.has_puissancedagir) {
|
||||
// this.paper_main_object.children.puissanceagir_bg.visible = false;
|
||||
// }
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_main_object.children.doleance_bg.visible = false;
|
||||
}
|
||||
// if (this.concernement.has_doleance) {
|
||||
// this.paper_main_object.children.doleance_bg.visible = false;
|
||||
// }
|
||||
// choose wich one to show, if one
|
||||
switch (this.map_mode) {
|
||||
case 'terraindevie':
|
||||
@ -1013,9 +1021,9 @@ export default {
|
||||
// }
|
||||
break;
|
||||
case 'doleancer':
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_main_object.children.doleance_bg.visible = true;
|
||||
}
|
||||
// if (this.concernement.has_doleance) {
|
||||
// this.paper_main_object.children.doleance_bg.visible = true;
|
||||
// }
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
@ -1023,9 +1031,9 @@ export default {
|
||||
// if (this.concernement.has_puissancedagir) {
|
||||
// this.paper_main_object.children.puissanceagir_bg.visible = false;
|
||||
// }
|
||||
if (this.concernement.has_doleance) {
|
||||
this.paper_main_object.children.doleance_bg.visible = false;
|
||||
}
|
||||
// if (this.concernement.has_doleance) {
|
||||
// this.paper_main_object.children.doleance_bg.visible = false;
|
||||
// }
|
||||
}
|
||||
|
||||
// entites
|
||||
@ -1071,10 +1079,10 @@ export default {
|
||||
if (this.map_mode === "doleancer") {
|
||||
if (!this.is_opened) {
|
||||
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 {
|
||||
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
|
||||
this.concernement.doleances.forEach((d) => {
|
||||
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 {
|
||||
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'];
|
||||
break;
|
||||
case "doleancer":
|
||||
if(this.paper_main_object.children['doleances']){
|
||||
paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
|
||||
}
|
||||
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);
|
||||
if (result && result.item.item_id) {
|
||||
// console.log('move has result', result);
|
||||
@ -1247,6 +1257,9 @@ export default {
|
||||
if (open) {
|
||||
// paper bring to front
|
||||
this.paper_main_object.bringToFront();
|
||||
// create the paper objects to display (like entite, besoin, etc)
|
||||
this.setPaperContents();
|
||||
|
||||
// calcul opened size regarding window size
|
||||
// let ch = this.canvas.height;
|
||||
// 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]);
|
||||
|
||||
// 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
|
||||
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
||||
|
||||
@ -161,6 +161,7 @@ export default {
|
||||
|
||||
if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
|
||||
let oitem = paper.project.getItem({id: o.paper_id})
|
||||
if (oitem) {
|
||||
console.log('watch hover_element oitem', oitem);
|
||||
if (!oitem.is_symbol_instance) { // not symbol instance
|
||||
if (oitem.data.prevStrokeColor) {
|
||||
@ -185,6 +186,7 @@ export default {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
@ -897,11 +899,11 @@ export default {
|
||||
},
|
||||
setPaperEntiteActionSymbol(){
|
||||
let svgIcon = paper.project.importSVG(iconAction);
|
||||
svgIcon.strokeColor = '#000';
|
||||
svgIcon.strokeWidth = 0.25;
|
||||
svgIcon.scale(0.15);
|
||||
svgIcon.strokeColor = '#000';
|
||||
svgIcon.fillColor = null;
|
||||
svgIcon.position = {x:0, y:0};
|
||||
svgIcon.scale(0.15);
|
||||
|
||||
let circle = new paper.Path.Circle({
|
||||
radius: 3,
|
||||
@ -916,12 +918,13 @@ export default {
|
||||
setPaperEntiteActionHoverSymbol(){
|
||||
let svgIcon = paper.project.importSVG(iconAction);
|
||||
svgIcon.strokeColor = '#01ffe2';
|
||||
svgIcon.strokeWidth = 0.75;
|
||||
svgIcon.strokeWidth = 0.25;
|
||||
svgIcon.scale(0.15);
|
||||
svgIcon.fillColor = null;
|
||||
svgIcon.position = {x:0, y:0};
|
||||
|
||||
let circle = new paper.Path.Circle({
|
||||
radius: 15,
|
||||
radius: 3,
|
||||
fillColor: 'rgba(255,255,255,0.05)'
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user