|
@@ -1,5 +1,6 @@
|
|
|
<script>
|
|
|
|
|
|
+import REST from '@api/rest-axios'
|
|
|
|
|
|
import { nextTick } from 'vue'
|
|
|
|
|
@@ -8,6 +9,7 @@ import MatterAttractors from "matter-attractors";
|
|
|
// Matter.use(MatterAttractors);
|
|
|
// import polydecomp from "poly-decomp";
|
|
|
|
|
|
+
|
|
|
import paper from 'paper';
|
|
|
|
|
|
// import { easeInOutQuad, easeInOutQuart } from 'easing-utils';
|
|
@@ -16,7 +18,9 @@ import Tween from "@tweenjs/tween.js";
|
|
|
import { mapState, mapActions } from 'pinia'
|
|
|
import { ConcernementsStore } from '@/stores/concernements'
|
|
|
import { CommonStore } from '@/stores/common'
|
|
|
-import { mdiPictureInPictureBottomRight } from '@mdi/js';
|
|
|
+import { UserStore } from '@stores/user'
|
|
|
+
|
|
|
+// import { mdiPictureInPictureBottomRight } from '@mdi/js';
|
|
|
|
|
|
export default {
|
|
|
inject: ['canvasMap', 'matterEngine'],
|
|
@@ -41,6 +45,9 @@ export default {
|
|
|
scale: 1,
|
|
|
prev_scale: 1,
|
|
|
//
|
|
|
+ entite_mouse_downed: null, // for entite dragging (admin front)
|
|
|
+ wait: false,
|
|
|
+ //
|
|
|
details_zoom_scale: 1,
|
|
|
is_dragging: false,
|
|
|
//
|
|
@@ -76,12 +83,15 @@ export default {
|
|
|
'opened_entite_id',
|
|
|
'concernement_active_revision',
|
|
|
'detailsZoomValue',
|
|
|
+ 'reloadConcernements',
|
|
|
+ 'reloadConcernementEntites',
|
|
|
'concernements_loading_nb']),
|
|
|
...mapState(CommonStore,['hover_elmt',
|
|
|
'map_item_ray',
|
|
|
'cartouch_width',
|
|
|
'cartouch_is_opened',
|
|
|
- 'paper_symbol_definitions'])
|
|
|
+ 'paper_symbol_definitions']),
|
|
|
+ ...mapState(UserStore,['csrf_token']),
|
|
|
},
|
|
|
created () {
|
|
|
console.log('ConcernementMapItem created', this.mapitem);
|
|
@@ -319,16 +329,37 @@ export default {
|
|
|
// },
|
|
|
// deep: true
|
|
|
// },
|
|
|
- mapitem: {
|
|
|
+ 'mapitem.concernements_loading_nb': {
|
|
|
handler (n, o) {
|
|
|
- console.log(`ConcernementMapItem ${this.id} watch mapitem o, n`, o, n);
|
|
|
- if (n.concernements_loading_nb !== o.concernements_loading_nb) {
|
|
|
+ console.log(`ConcernementMapItem ${this.id} watch mapitem.concernements_loading_nb o, n`, o, n);
|
|
|
+ // if (n.concernements_loading_nb !== o.concernements_loading_nb) {
|
|
|
// this.resetPaperEntitesAndContours();
|
|
|
// this.concernement = this.mapitem.concernement;
|
|
|
this.resetConcernement();
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ 'concernement.entites': {
|
|
|
+ handler (n, o) {
|
|
|
+ console.log(`ConcernementMapItem ${this.id} watch concernement.entites o, n`, o, n);
|
|
|
+ // do not trigger on first fill of the property (if o is null)
|
|
|
+ if (o) {
|
|
|
+ this.resetPaperEntitesAndContours();
|
|
|
}
|
|
|
},
|
|
|
deep: true
|
|
|
+ },
|
|
|
+ wait: {
|
|
|
+ handler (n, o){
|
|
|
+ // when we are reloading entites par exemple
|
|
|
+ // also handled by onMouseMove
|
|
|
+ if (n) {
|
|
|
+ document.body.style.cursor = "wait";
|
|
|
+ } else {
|
|
|
+ document.body.style.cursor = "auto";
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -343,8 +374,9 @@ export default {
|
|
|
'setDetailsZoomValue',
|
|
|
]),
|
|
|
resetConcernement(){
|
|
|
+ console.log(`resetConcernement() ${this.mapitem.id}`);
|
|
|
this.id = this.mapitem.id;
|
|
|
- this.concernement = this.mapitem.concernement;
|
|
|
+ this.concernement = this.concernementsByID[this.mapitem.cid];// this.mapitem.concernement;
|
|
|
this.cid = this.concernement.id;
|
|
|
// console.log('mapitem this.cid', this.cid);
|
|
|
this.active_revision = this.concernement.active_revision;
|
|
@@ -354,6 +386,7 @@ export default {
|
|
|
this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
|
|
|
},
|
|
|
parseEntityPointsValues (){
|
|
|
+ console.log(`parseEntityPointsValues`);
|
|
|
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y
|
|
|
for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
|
|
|
for (let i = 0; i < this.concernement.revisions[r].entites.length; i++) { // loop through all entite for each revision
|
|
@@ -372,9 +405,6 @@ export default {
|
|
|
let init_max = 100
|
|
|
let slope = this.ray / init_max
|
|
|
entite.display.ray = slope * (init_max - entite.prise);
|
|
|
- // if (this.concernement.id === 28) {
|
|
|
- // console.log(`entity prise: ${entite.prise} | ray: ${entite.display.ray}`);
|
|
|
- // }
|
|
|
|
|
|
|
|
|
// ANGLE
|
|
@@ -807,6 +837,7 @@ export default {
|
|
|
case 'terraindevie':
|
|
|
this.addNewPaperSymbolInstance('boussole_bg', true);
|
|
|
this.paper_main_object.addChild(this.setPaperEntites());
|
|
|
+ // this.setPaperEntitesEvents();
|
|
|
break;
|
|
|
case 'superposition':
|
|
|
this.addNewPaperSymbolInstance('boussole_bg', true);
|
|
@@ -834,6 +865,11 @@ export default {
|
|
|
if (!this.isResetingPaperEntites) {
|
|
|
console.log(`ResetingPaperEntites ${this.id}`);
|
|
|
this.isResetingPaperEntites = true;
|
|
|
+
|
|
|
+ this.active_revision = this.concernement.active_revision;
|
|
|
+ console.log(`this.active_revision ${this.active_revision}`);
|
|
|
+ console.log(`entite len : ${this.concernement.revisions_byid[this.active_revision].entites.length}`);
|
|
|
+
|
|
|
this.parseEntityPointsValues()
|
|
|
|
|
|
this.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.active_revision].entites);
|
|
@@ -962,7 +998,7 @@ export default {
|
|
|
let paper_segments = [];
|
|
|
segments.forEach(seg => {
|
|
|
paper_segments.push(new paper.Segment({
|
|
|
- point: [this.pos.x+seg.point[0]*this.scale, this.pos.y+seg.point[1]*this.scale],
|
|
|
+ point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale],
|
|
|
handleIn: seg.handleIn,
|
|
|
handleout: seg.handleOut
|
|
|
}))
|
|
@@ -973,10 +1009,11 @@ export default {
|
|
|
segments: paper_segments,
|
|
|
fillColor: 'rgba(255,255,255,0.4)',
|
|
|
// selected: true,
|
|
|
- strokeColor: this.mapitem.clone ? '#f00' : '#fff',
|
|
|
+ strokeColor: '#fff',
|
|
|
strokeWidth: 1,
|
|
|
pivot: new paper.Point(this.pos),
|
|
|
- cid: this.cid
|
|
|
+ // scale: this.details_zoom_scale,
|
|
|
+ cid: this.cid,
|
|
|
});
|
|
|
// return the paper path
|
|
|
return contrs;
|
|
@@ -1018,7 +1055,7 @@ export default {
|
|
|
|
|
|
let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
|
|
|
instance.name = 'entite';
|
|
|
- let pos_point = new paper.Point([this.pos.x + entite.display.pos.x * this.scale, this.pos.y + entite.display.pos.y * this.scale]);
|
|
|
+ let pos_point = new paper.Point([this.pos.x + entite.display.pos.x * this.details_zoom_scale, this.pos.y + entite.display.pos.y * this.details_zoom_scale]);
|
|
|
instance.position = pos_point;
|
|
|
instance.scale(this.scale);
|
|
|
instance.fillColor = '#000';
|
|
@@ -1075,6 +1112,8 @@ export default {
|
|
|
label_click_zone.insertAbove(label_txt);
|
|
|
// label.sendToBack();
|
|
|
g_label.addChild(label);
|
|
|
+
|
|
|
+ instance.label_item = label;
|
|
|
}
|
|
|
}
|
|
|
return g;
|
|
@@ -1797,20 +1836,31 @@ export default {
|
|
|
},
|
|
|
handlePaperVisibilityOnAfterEnginUpdate(){
|
|
|
// contours focused
|
|
|
+ let fc, sc, sw;
|
|
|
if (!this.isFocused()){
|
|
|
- this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; // this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)"; //
|
|
|
+ fc = "rgba(255,255,255,0.1)";
|
|
|
}else{
|
|
|
- this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; // this.mapitem.clone ? "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;
|
|
|
-
|
|
|
-
|
|
|
- }else{
|
|
|
- this.paper_main_object.children['contours'].strokeColor = "#fff";
|
|
|
- this.paper_main_object.children['contours'].strokeWidth = 1;
|
|
|
+ fc = "rgba(255,255,255,0.4)";
|
|
|
+ if (this.concernement.can_update) {
|
|
|
+ sc = "#01ffe2";
|
|
|
+ if (this.is_hover) {
|
|
|
+ sw = 2;
|
|
|
+ }else{
|
|
|
+ sw = 1;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.is_hover) {
|
|
|
+ sc = "#01ffe2";
|
|
|
+ sw = 2;
|
|
|
+ }else{
|
|
|
+ sc = "#fff";
|
|
|
+ sw = 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ this.paper_main_object.children['contours'].fillColor = fc
|
|
|
+ this.paper_main_object.children['contours'].strokeColor = sc;
|
|
|
+ this.paper_main_object.children['contours'].strokeWidth = sw;
|
|
|
|
|
|
// contours visibility
|
|
|
if (!this.is_open
|
|
@@ -2037,12 +2087,19 @@ export default {
|
|
|
initPaperEvents(){
|
|
|
|
|
|
this.paper_main_object.onMouseLeave = function(event){
|
|
|
- if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
|
|
|
- this.resetHoverElmt();
|
|
|
- document.body.style.cursor = "auto";
|
|
|
- }
|
|
|
- if (this.is_open) {
|
|
|
- document.body.style.cursor = "auto";
|
|
|
+ if (this.wait) {
|
|
|
+ // when we are reloading entites par exemple
|
|
|
+ // also handled by watch and onMouseMove for more reactivity
|
|
|
+ document.body.style.cursor = "wait";
|
|
|
+ } else {
|
|
|
+ if (!this.opened_concernement && this.isFocused()) { // only if no concernement is opened
|
|
|
+ this.resetHoverElmt();
|
|
|
+ document.body.style.cursor = "auto";
|
|
|
+ }
|
|
|
+ if (this.is_open) {
|
|
|
+ document.body.style.cursor = "auto";
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}.bind(this);
|
|
|
|
|
@@ -2131,8 +2188,13 @@ export default {
|
|
|
|
|
|
let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
|
|
|
// console.log('move result', result);
|
|
|
- if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
|
|
|
- console.log('move has result', result);
|
|
|
+
|
|
|
+ if (this.wait) {
|
|
|
+ // when we are reloading entites par exemple
|
|
|
+ // also handled by watch for more reactivity
|
|
|
+ document.body.style.cursor = "wait";
|
|
|
+ } else if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
|
|
|
+ // console.log('move has result', result);
|
|
|
let new_hover_elmt = {
|
|
|
paper_id: result.item.id,
|
|
|
type: result.item.item_type,
|
|
@@ -2322,28 +2384,136 @@ export default {
|
|
|
}
|
|
|
}.bind(this);
|
|
|
|
|
|
+ this.paper_main_object.onMouseDown = function(event){
|
|
|
+ console.log('onMouseDown', event);
|
|
|
+ if (this.is_open && this.map_mode === 'terraindevie' && this.concernement.can_update) {
|
|
|
+ let group_to_hit = this.paper_main_object.children['entites'];
|
|
|
+ let result = group_to_hit.hitTest(event.point);
|
|
|
+ console.log('drag result', result);
|
|
|
+ this.entite_mouse_downed = result;
|
|
|
+ }
|
|
|
+ }.bind(this);
|
|
|
+
|
|
|
/*
|
|
|
* works i correlation with updateDetailsZoomScale()
|
|
|
*/
|
|
|
this.paper_main_object.onMouseDrag = async function(event){
|
|
|
- if (this.is_open && this.map_mode === 'terraindevie') {
|
|
|
+ if (this.is_open && this.map_mode === 'terraindevie' && this.concernement.can_update) {
|
|
|
+ // console.log('paper concernement onMouseDrag', event, this);
|
|
|
event.stopPropagation();
|
|
|
event.preventDefault();
|
|
|
|
|
|
- console.log('paper concernement onMouseDrag', event.delta);
|
|
|
- if (this.detailsZoomValue > 1) {
|
|
|
- let x = this.pos.x + event.delta.x;
|
|
|
- let y = this.pos.y + event.delta.y;
|
|
|
+
|
|
|
+ if (this.entite_mouse_downed) {
|
|
|
+ // console.log('paper concernement onMouseDrag entite', this.entite_mouse_downed);
|
|
|
+ this.entite_mouse_downed.item.position.x += event.delta.x;
|
|
|
+ this.entite_mouse_downed.item.position.y += event.delta.y;
|
|
|
+
|
|
|
+ // Hide popup
|
|
|
+ this.resetHoverElmt();
|
|
|
|
|
|
- this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
|
|
|
- Matter.Body.setPosition(this.body, this.pos);
|
|
|
+ // move the label
|
|
|
+ let pad = 2;
|
|
|
+ this.entite_mouse_downed.item.label_item.position.x = this.entite_mouse_downed.item.position.x + pad;
|
|
|
+ this.entite_mouse_downed.item.label_item.position.y = this.entite_mouse_downed.item.position.y - pad*2;
|
|
|
+
|
|
|
+ // indicate that the entity is been dragged (for onMouseUp)
|
|
|
+ this.entite_mouse_downed.dragged = true;
|
|
|
+ } else {
|
|
|
+ // console.log('paper concernement onMouseDrag general', event.delta);
|
|
|
+ if (this.detailsZoomValue > 1) {
|
|
|
+ let x = this.pos.x + event.delta.x;
|
|
|
+ let y = this.pos.y + event.delta.y;
|
|
|
+
|
|
|
+ this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
|
|
|
+ Matter.Body.setPosition(this.body, this.pos);
|
|
|
+
|
|
|
+ this.is_dragging = true;
|
|
|
+ }
|
|
|
+ event.stop();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }.bind(this);
|
|
|
+
|
|
|
+ this.paper_main_object.onMouseUp = function(event){
|
|
|
+ console.log('onMouseUp', event);
|
|
|
+ if (this.is_open && this.map_mode === 'terraindevie' && this.entite_mouse_downed) {
|
|
|
+ if (this.entite_mouse_downed.dragged) {
|
|
|
+ // console.log('onMouseUp entite_mouse_downed', this.entite_mouse_downed);
|
|
|
|
|
|
- this.is_dragging = true;
|
|
|
+ this.wait = true;
|
|
|
+
|
|
|
+ let pos = {
|
|
|
+ x:this.entite_mouse_downed.item.position.x - this.pos.x,
|
|
|
+ y:this.entite_mouse_downed.item.position.y - this.pos.y
|
|
|
+ };
|
|
|
+
|
|
|
+ // compute value for api
|
|
|
+ let {af, mm, p} = this.computeNewEntitePos(pos);
|
|
|
+ // record value
|
|
|
+ let pid = this.concernement.entites_byid[this.entite_mouse_downed.item.item_id].id;
|
|
|
+ this.recordNewEntitePos(pid, af, mm, p)
|
|
|
+ .then((parag) => {
|
|
|
+ // then reload value
|
|
|
+ // redrawing entites is handle by watch concernement.entites
|
|
|
+ this.reloadConcernementEntites(this.concernement.id)
|
|
|
+ .then(() => {
|
|
|
+ this.wait = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
}
|
|
|
- event.stop();
|
|
|
- return false;
|
|
|
+ this.entite_mouse_downed = null;
|
|
|
}
|
|
|
}.bind(this);
|
|
|
+
|
|
|
+ },
|
|
|
+ computeNewEntitePos(pos){
|
|
|
+ // actuel future
|
|
|
+ let af = pos.y >= 0 ? 0 : 1;
|
|
|
+
|
|
|
+ // menace / maintien (angle)
|
|
|
+ let mm = parseFloat(Math.atan(pos.x/Math.abs(pos.y)) * (180/Math.PI)).toFixed(2);
|
|
|
+
|
|
|
+ // Prise (rayon)
|
|
|
+ let r = Math.sqrt(Math.pow(pos.x,2)+Math.pow(pos.y,2));
|
|
|
+ // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
|
|
|
+ // from range 0 -> rayon_de_la_boussole moins 8% de padding |to| range 0 -> 100
|
|
|
+ let ext_circle_factor = 1;//0.915; // this factor is also used in MapConcernement
|
|
|
+ let r_max = this.ray * ext_circle_factor * this.details_zoom_scale;
|
|
|
+ let r_slope = (100 - 0) / (r_max - 0);
|
|
|
+ let p = Math.max(0, 100 - parseFloat(0 + r_slope * (r - 0)).toFixed(2));
|
|
|
+ // console.log(`onMouseUp af: ${af}, mm: ${mm}, p: ${p}`);
|
|
|
+
|
|
|
+ return {af, mm, p};
|
|
|
+ },
|
|
|
+ recordNewEntitePos(pid, af, mm, p){
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // record new values of entite parag (prise, actuel/future, menace/maintien)
|
|
|
+ const params = {
|
|
|
+ id: [{'value': pid}],
|
|
|
+ type: 'entite_concernement',
|
|
|
+ 'field_actuel_future': [{'value': af}],
|
|
|
+ 'field_menace_maintien_degres': [{'value': mm}],
|
|
|
+ 'field_prise': [{'value': p}]
|
|
|
+ };
|
|
|
+
|
|
|
+ const configs = {
|
|
|
+ headers: {'X-CSRF-Token': this.csrf_token}
|
|
|
+ };
|
|
|
+
|
|
|
+ // call the api
|
|
|
+ REST.patch(`/entity/paragraph/${pid}?_format=json`, params, configs)
|
|
|
+ .then(({ data }) => {
|
|
|
+ console.log('concernementMapItem REST patch parag entite', data)
|
|
|
+ resolve(data);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
|
|
|
+ Promise.reject(error)
|
|
|
+ })
|
|
|
+ });
|
|
|
},
|
|
|
resetHoverElmt(){
|
|
|
// console.log('resetHoverElmt');
|
|
@@ -2437,6 +2607,8 @@ export default {
|
|
|
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
|
|
Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
|
|
|
} else {
|
|
|
+ this.setDetailsZoomValue(1);
|
|
|
+ this.updateDetailsZoomScale();
|
|
|
// CLOSING
|
|
|
this.is_closing = true;
|
|
|
|
|
@@ -2447,6 +2619,7 @@ export default {
|
|
|
// this.active_revision = this.concernement.revision_id;
|
|
|
// this.setActiveRevision(this.cid, this.concernement.revision_id);//this.concernement.revisions[this.concernement.revisions.length -1].revision_id);
|
|
|
// this.resetPaperEntitesAndContours();
|
|
|
+
|
|
|
|
|
|
this.handlePaperVisibilityOnBeforeClose();
|
|
|
|