|
@@ -1,23 +1,5 @@
|
|
|
<script>
|
|
|
|
|
|
-// https://brm.io/matter-js/docs/classes/Engine.html
|
|
|
-// import {
|
|
|
-// // Engine,
|
|
|
-// // Render,
|
|
|
-// // World,
|
|
|
-// Bodies,
|
|
|
-// Body,
|
|
|
-// Events,
|
|
|
-// Composite,
|
|
|
-// // Composites,
|
|
|
-// // Constraint,
|
|
|
-// // Vertices,
|
|
|
-// // Mouse,
|
|
|
-// // MouseConstraint,
|
|
|
-// // Query,
|
|
|
-// // Common
|
|
|
-// } from "matter-js";
|
|
|
-
|
|
|
import Matter from "matter-js";
|
|
|
import MatterAttractors from "matter-attractors";
|
|
|
// Matter.use(MatterAttractors);
|
|
@@ -52,6 +34,7 @@ export default {
|
|
|
prev_scale: 1,
|
|
|
opacity: 0,
|
|
|
tween: null,
|
|
|
+ is_open: false,
|
|
|
is_opening: false,
|
|
|
is_closing: false,
|
|
|
is_hover: false,
|
|
@@ -64,7 +47,7 @@ export default {
|
|
|
paper_groups: {}
|
|
|
}
|
|
|
},
|
|
|
- props: ['concernement', 'is_opened', 'active_revision', 'superposition_id'],
|
|
|
+ props: ['concernement', 'active_revision', 'superposition_id'],
|
|
|
computed: {
|
|
|
...mapState(ConcernementsStore,['map_mode',
|
|
|
'concernementsByID',
|
|
@@ -74,13 +57,13 @@ export default {
|
|
|
...mapState(CommonStore,['hover_elmt',
|
|
|
'map_item_ray',
|
|
|
'cartouch_width',
|
|
|
- 'cartouch_is_opened',
|
|
|
+ 'cartouch_is_open',
|
|
|
'paper_symbol_definitions'])
|
|
|
},
|
|
|
created () {
|
|
|
this.cid = this.concernement.id;
|
|
|
this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
|
|
|
- console.log(`ConcernementsMapItem ${this.id} created`);
|
|
|
+ // console.log(`ConcernementsMapItem ${this.id} created`);
|
|
|
// this.entites = this.concernement.entites
|
|
|
this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
|
|
|
|
|
@@ -141,21 +124,28 @@ export default {
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
- is_opened: {
|
|
|
+ opened_concernement: {
|
|
|
handler (n, o) {
|
|
|
- // console.log('mapItem watch is_opened', n, this.is_opened);
|
|
|
- if(n){ // opened
|
|
|
- this.openClose(true);
|
|
|
- }else if(o) { // closed if was opened
|
|
|
- this.openClose(false);
|
|
|
+ if (!n) { // if there is no opened concernement
|
|
|
+ this.is_open = false;
|
|
|
+ this.applyShuffleForces();
|
|
|
+ } else {
|
|
|
+ if(this.cid === n.id && this.id === n.opened_mapitem_id){
|
|
|
+ this.is_open = true;
|
|
|
+ }else{
|
|
|
+ this.is_open = false;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
- opened_concernement: {
|
|
|
+ is_open: {
|
|
|
handler (n, o) {
|
|
|
- if (!n) {
|
|
|
- this.applyShuffleForces();
|
|
|
+ // console.log('mapItem watch is_open', n, this.is_open);
|
|
|
+ if(n){ // opened
|
|
|
+ this.openClose(true);
|
|
|
+ }else if(o) { // closed if was opened
|
|
|
+ this.openClose(false);
|
|
|
}
|
|
|
},
|
|
|
deep: true
|
|
@@ -166,7 +156,7 @@ export default {
|
|
|
if (n === 'terraindevie' && !this.opened_concernement) {
|
|
|
this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
|
|
|
}
|
|
|
- if (this.is_opened & n !== o) {
|
|
|
+ if (this.is_open & n !== o) {
|
|
|
this.setPaperContents();
|
|
|
}
|
|
|
if (n !== o) {
|
|
@@ -674,12 +664,12 @@ export default {
|
|
|
const contrs = new paper.Path({
|
|
|
name: 'contours',
|
|
|
segments: segments,
|
|
|
- fillColor: 'rgba(255,255,255,0.4)',
|
|
|
+ fillColor: 'rgba(255,255,255,0.4)', // this.superposition_id ? 'rgba(255,0,0,0.4)' : 'rgba(255,255,255,0.4)',
|
|
|
// selected: true,
|
|
|
strokeColor: '#fff',
|
|
|
strokeWidth: 1,
|
|
|
pivot: new paper.Point(this.pos),
|
|
|
- cid: this.id
|
|
|
+ cid: this.cid
|
|
|
});
|
|
|
|
|
|
return contrs;
|
|
@@ -807,7 +797,7 @@ export default {
|
|
|
besoin.item_type = 'besoin';
|
|
|
besoin.is_symbol_instance = true;
|
|
|
console.log(`paper besoin id:${besoin.id}`);
|
|
|
- this.setBesoinPaperId(besoin.id, this.id, this.concernement.besoins[i].id);
|
|
|
+ this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
|
|
|
g.addChild(besoin)
|
|
|
|
|
|
let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
|
|
@@ -830,7 +820,7 @@ export default {
|
|
|
reponse.item_cid = this.concernement.id;
|
|
|
reponse.item_type = 'reponse';
|
|
|
reponse.is_symbol_instance = true;
|
|
|
- this.setBesoinPaperId(reponse.id, this.id, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
|
|
|
+ this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
|
|
|
g.addChild(reponse)
|
|
|
}
|
|
|
}
|
|
@@ -1133,7 +1123,7 @@ export default {
|
|
|
handlePaperVisibilityOnBeforeOpen(){
|
|
|
// agissantes
|
|
|
if (this.concernement.has_agissantes && this.map_mode === "action") {
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
this.paper_main_object.children.agissantes_icons.visible = true;
|
|
|
} else {
|
|
|
this.paper_main_object.children.agissantes_icons.visible = false;
|
|
@@ -1150,7 +1140,7 @@ export default {
|
|
|
handlePaperVisibilityOnClosed(){
|
|
|
// agissantes
|
|
|
if (this.concernement.has_agissantes && this.map_mode === "action") {
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
this.paper_main_object.children.agissantes_icons.visible = true;
|
|
|
} else {
|
|
|
this.paper_main_object.children.agissantes_icons.visible = false;
|
|
@@ -1163,9 +1153,9 @@ export default {
|
|
|
handlePaperVisibilityOnAfterEnginUpdate(){
|
|
|
// contours focused
|
|
|
if (!this.isFocused()){
|
|
|
- this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)";
|
|
|
+ this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.1)'; //this.superposition_id ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
|
|
|
}else{
|
|
|
- this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)";
|
|
|
+ this.paper_main_object.children['contours'].fillColor = 'rgba(255,255,255,0.4)'; //this.superposition_id ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
|
|
|
if (this.is_hover) {
|
|
|
this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
|
|
|
this.paper_main_object.children['contours'].strokeWidth = 2;
|
|
@@ -1178,8 +1168,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
// contours visibility
|
|
|
- if (!this.is_opened
|
|
|
- || (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
|
|
|
+ if (!this.is_open
|
|
|
+ || (this.is_open && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) {
|
|
|
this.paper_main_object.children['contours'].visible = true;
|
|
|
} else {
|
|
|
this.paper_main_object.children['contours'].visible = false;
|
|
@@ -1190,7 +1180,7 @@ export default {
|
|
|
// superposition
|
|
|
if (this.concernement.has_superpositions) {
|
|
|
if (this.map_mode === "superposition") {
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points
|
|
|
} else {
|
|
|
this.paper_main_object.children.entites_superposes.visible = true;
|
|
@@ -1203,7 +1193,7 @@ export default {
|
|
|
// puissance d'agir
|
|
|
if (this.concernement.has_puissancedagir) {
|
|
|
if (this.map_mode === "puissancedagir") {
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
|
|
|
} else {
|
|
|
this.paper_main_object.children.puissanceagir_icon.visible = false;
|
|
@@ -1217,7 +1207,7 @@ export default {
|
|
|
if (this.concernement.has_agissantes) {
|
|
|
if (this.map_mode !== "action") {
|
|
|
this.paper_main_object.children.agissantes_icons.visible = false;
|
|
|
- } else if(!this.is_opened && !this.is_closing){
|
|
|
+ } else if(!this.is_open && !this.is_closing){
|
|
|
this.paper_main_object.children.agissantes_icons.visible = true;
|
|
|
}
|
|
|
}
|
|
@@ -1225,7 +1215,7 @@ export default {
|
|
|
// doleance
|
|
|
if (this.concernement.has_doleance) {
|
|
|
if (this.map_mode === "doleancer") {
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
this.paper_main_object.children.doleance_icon.visible = true;
|
|
|
} else {
|
|
|
this.paper_main_object.children.doleance_icon.visible = false;
|
|
@@ -1240,7 +1230,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
// focus on opened entite
|
|
|
- if (this.is_opened && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
|
|
|
+ if (this.is_open && this.opened_entite_id && (this.map_mode === 'terraindevie' || this.map_mode === 'action')) {
|
|
|
let group = this.map_mode === 'terraindevie' ? this.paper_main_object.children['entites'] : this.paper_main_object.children['agissantes'];
|
|
|
if(group){
|
|
|
group.children.forEach((item) => {
|
|
@@ -1279,16 +1269,6 @@ export default {
|
|
|
// PAPER EVENTS
|
|
|
initPaperEvents(){
|
|
|
|
|
|
- // this.paper_main_object.onMouseEnter = function(event){
|
|
|
- // if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
|
|
|
- // this.setHoverElmt({
|
|
|
- // type: 'concernement',
|
|
|
- // id: this.id
|
|
|
- // });
|
|
|
- // document.body.style.cursor = "pointer";
|
|
|
- // }
|
|
|
- // }.bind(this);
|
|
|
-
|
|
|
this.paper_main_object.onMouseLeave = function(event){
|
|
|
if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
|
|
|
this.resetHoverElmt();
|
|
@@ -1300,11 +1280,11 @@ export default {
|
|
|
// console.log(`onmousemove ${this.id}`);
|
|
|
|
|
|
// prevent hover map item mouse event if cartouch is opened
|
|
|
- if (this.cartouch_is_opened) {
|
|
|
+ if (this.cartouch_is_open) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- if (!this.is_opened) {
|
|
|
+ if (!this.is_open) {
|
|
|
if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened and is this focused
|
|
|
if (this.map_mode === 'superposition') {
|
|
|
// get the superposed entite
|
|
@@ -1382,20 +1362,18 @@ export default {
|
|
|
console.log('paper concernement onClick');
|
|
|
|
|
|
// prevent hover map item mouse event if cartouch is opened
|
|
|
- if (this.cartouch_is_opened) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (this.cartouch_is_open) return;
|
|
|
|
|
|
- if (!this.is_opened) { // si ce concernement n'est pas ouvet
|
|
|
+ if (!this.is_open) { // si ce concernement n'est pas ouvet
|
|
|
if (!this.opened_concernement) { // si aucun concernement n'est ouvert
|
|
|
console.log(`Open me ${this.id}`);
|
|
|
// open/close all concernements
|
|
|
- this.openCloseConcernements(this.id)
|
|
|
+ this.openCloseConcernements(this.cid, this.id)
|
|
|
// push route (keep the hash for map_mode)
|
|
|
this.$router.push({
|
|
|
name: 'concernement',
|
|
|
hash: `#${this.map_mode}`,
|
|
|
- params: {id: this.id}
|
|
|
+ params: {id: this.cid, mapitemid: this.id}
|
|
|
});
|
|
|
// reset the mousehover
|
|
|
this.resetHoverElmt();
|
|
@@ -1425,11 +1403,11 @@ export default {
|
|
|
this.$router.push({
|
|
|
name: 'concernement',
|
|
|
hash: `#${this.map_mode}`,
|
|
|
- params: {id: this.id, eid: result.item.item_id}
|
|
|
+ params: {id: this.cid, mapitemid: this.id, eid: result.item.item_id}
|
|
|
});
|
|
|
break;
|
|
|
case "doleancer":
|
|
|
- this.setOpenedDoleanceField(this.id, result.item.did, result.item.field, result.item.field_index);
|
|
|
+ this.setOpenedDoleanceField(this.cid, result.item.did, result.item.field, result.item.field_index);
|
|
|
break;
|
|
|
}
|
|
|
|
|
@@ -1438,7 +1416,7 @@ export default {
|
|
|
this.$router.push({
|
|
|
name: 'concernement',
|
|
|
hash: `#${this.map_mode}`,
|
|
|
- params: {id: this.id}
|
|
|
+ params: {id: this.cid, mapitemid: this.id}
|
|
|
});
|
|
|
// reset the mousehover
|
|
|
this.resetHoverElmt();
|
|
@@ -1456,7 +1434,7 @@ export default {
|
|
|
},
|
|
|
// OPEN / CLOSE (with tween)
|
|
|
openClose(open) {
|
|
|
- // console.log(`ConcernementsMapItem ${this.concernement.id} openClose: ${open}`);
|
|
|
+ console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
|
|
|
if (this.tween) {
|
|
|
this.tween.stop();
|
|
|
}
|
|
@@ -1492,11 +1470,15 @@ export default {
|
|
|
this.paper_main_object.scale(obj.s);
|
|
|
|
|
|
// update superposition constraints points
|
|
|
- if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) {
|
|
|
+ if (this.concernement.superposition_constraints_id
|
|
|
+ && this.concernement.superposition_constraints_id[this.id]
|
|
|
+ && this.concernement.superposition_constraints_id[this.id].length)
|
|
|
+ {
|
|
|
// get all the constraints of the world
|
|
|
let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
|
|
|
// loop through all constraint ids recorded in the concernement
|
|
|
- for(let constraint_id of this.concernement.superposition_constraints_id) {
|
|
|
+ // get only the constraint of this concernement mapitem
|
|
|
+ for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
|
|
|
// get the right constraint object from matter
|
|
|
let constraint;
|
|
|
for (const c of all_constrains) {
|
|
@@ -1507,7 +1489,7 @@ export default {
|
|
|
}
|
|
|
if (constraint) {
|
|
|
// tween the constraint point
|
|
|
- let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
|
|
|
+ let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
|
|
|
let point = constraint[`point${ab}`];
|
|
|
// revert to the original point
|
|
|
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
|
|
@@ -1579,11 +1561,15 @@ export default {
|
|
|
this.paper_main_object.scale(obj.s);
|
|
|
|
|
|
// update superposition constraints points
|
|
|
- if (this.concernement.superposition_constraints_id && this.concernement.superposition_constraints_id.length) {
|
|
|
+ if (this.concernement.superposition_constraints_id
|
|
|
+ && this.concernement.superposition_constraints_id[this.id]
|
|
|
+ && this.concernement.superposition_constraints_id[this.id].length)
|
|
|
+ {
|
|
|
// get all the constraints of the world
|
|
|
let all_constrains = Matter.Composite.allConstraints(this.matterEngine.world);
|
|
|
// loop through all constraint ids recorded in the concernement
|
|
|
- for(let constraint_id of this.concernement.superposition_constraints_id) {
|
|
|
+ // get only the constraint of this concernement mapitem
|
|
|
+ for(let constraint_id of this.concernement.superposition_constraints_id[this.id]) {
|
|
|
// get the right constraint object from matter
|
|
|
let constraint;
|
|
|
for (const c of all_constrains) {
|
|
@@ -1594,7 +1580,7 @@ export default {
|
|
|
}
|
|
|
if (constraint) {
|
|
|
// tween the constraint point
|
|
|
- let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
|
|
|
+ let ab = this.cid === constraint.concernementA.id ? 'A' : 'B';
|
|
|
let point = constraint[`point${ab}`];
|
|
|
// revert to the original point
|
|
|
let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
|
|
@@ -1622,22 +1608,20 @@ export default {
|
|
|
// ENGINE UPDATE
|
|
|
onBeforeEngineUpdate (event) {
|
|
|
|
|
|
- // TODO stop item on mouse hover
|
|
|
- if (this.hover_elmt && this.hover_elmt.id === this.id) {
|
|
|
- // Matter.Body.setStatic(this.body, true);
|
|
|
- } else {
|
|
|
- // Matter.Body.setStatic(this.body, false);
|
|
|
- }
|
|
|
-
|
|
|
// update the opening/closing tweening
|
|
|
if (this.tween) {
|
|
|
this.tween.update();
|
|
|
}
|
|
|
|
|
|
if (this.opened_concernement) {
|
|
|
+ // console.log("try to push aside", this.opened_concernement.opened_mapitem_id, this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]);
|
|
|
+ // console.log(this.id, this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id));
|
|
|
if (
|
|
|
- this.opened_concernement.id !== this.id
|
|
|
- && (!this.opened_concernement.superposed_concernements_id || this.opened_concernement.superposed_concernements_id.indexOf(this.id) < 0)
|
|
|
+ // this.opened_concernement.id !== this.cid &&
|
|
|
+ this.opened_concernement.opened_mapitem_id !== this.id
|
|
|
+ // && (!this.opened_concernement.all_superposed_concernements_id || this.opened_concernement.all_superposed_concernements_id.indexOf(this.id) < 0)
|
|
|
+ && (!this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id] // when we are not in superposition mode
|
|
|
+ || this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id].indexOf(this.id) < 0) // this mapitem is not superposed to the opened mapitem
|
|
|
) {
|
|
|
this.pushAside()
|
|
|
}
|
|
@@ -1671,7 +1655,7 @@ export default {
|
|
|
|| (this.map_mode === 'doleancer' && this.concernement.has_doleance);
|
|
|
},
|
|
|
pushAside(){
|
|
|
- // console.log('pushAside', this.opened_concernement);
|
|
|
+ // console.log('pushAside');
|
|
|
// apply a force in direction of one side or an other depending of the start position
|
|
|
// the force is exponentialy proportional to the distance from the side
|
|
|
// INFO logarithmic force : https://stackoverflow.com/questions/846221/logarithmic-slider/846249#846249
|
|
@@ -1680,9 +1664,14 @@ export default {
|
|
|
? (this.canvas.width - this.cartouch_width) / 2
|
|
|
: this.canvas.width / 2;
|
|
|
// get the direction to the closest side
|
|
|
- let dir = this.pos.x > pseudo_center_x
|
|
|
- ? 1 // to the right
|
|
|
- : -1; // to the left
|
|
|
+ let dir =
|
|
|
+ this.pos.x < pseudo_center_x
|
|
|
+ || (this.map_mode === 'superposition'
|
|
|
+ && this.concernement.superposition_constraints_id
|
|
|
+ && this.concernement.superposition_constraints_id[this.id]
|
|
|
+ && this.concernement.superposition_constraints_id[this.id].length) // go to the left if has superposition constraint applied
|
|
|
+ ? -1 // to the left
|
|
|
+ : -1; // to the right
|
|
|
// max and min item position
|
|
|
let minp = 0;
|
|
|
let maxp = dir < 0
|
|
@@ -1962,6 +1951,12 @@ export default {
|
|
|
onAfterEngineUpdate (event) {
|
|
|
this.respawn();
|
|
|
|
|
|
+ // stop item on mouse hover
|
|
|
+ // if (this.hover_elmt && this.hover_elmt.id === this.id) {
|
|
|
+ // // Matter.Body.setStatic(this.body, true);
|
|
|
+ // } else {
|
|
|
+ // // Matter.Body.setStatic(this.body, false);
|
|
|
+ // }
|
|
|
if (this.is_hover) { // if mouse hover reset the matter body position to prev position
|
|
|
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}, true);
|
|
|
}else{ // else move following the matter body position
|