1084 lines
31 KiB
Vue
1084 lines
31 KiB
Vue
<script>
|
|
|
|
// import { mapActions, mapState } from 'pinia'
|
|
import { computed } from 'vue'
|
|
import MapBackground from '@components/MapBackground.vue'
|
|
|
|
// https://brm.io/matter-js/docs/classes/Engine.html
|
|
import Matter from "matter-js";
|
|
|
|
import MatterAttractors from "matter-attractors";
|
|
Matter.use(MatterAttractors);
|
|
|
|
import paper from 'paper';
|
|
|
|
import { mapState, mapActions } from 'pinia'
|
|
import { ConcernementsStore } from '@/stores/concernements'
|
|
import { CommonStore } from '@/stores/common'
|
|
|
|
import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
|
|
import RecitPlayer from '@components/RecitPlayer.vue';
|
|
|
|
// import iconTerraindevie from "@/assets/icons/terraindevie.svg"
|
|
// import iconProximite from "@/assets/icons/proximite.svg"
|
|
// import iconSuperposition from "@/assets/icons/superposition.svg"
|
|
import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
|
|
import iconAction from "@/assets/icons/action_2.svg"
|
|
import iconDoleancer from "@/assets/icons/doleancer.svg"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
canvasMap: {
|
|
canvas: null,
|
|
ctx: null
|
|
},
|
|
animateEvent: new Event('animate'),
|
|
granim: null,
|
|
// MATTER
|
|
engine: null,
|
|
world: null,
|
|
// PAPERJS
|
|
paper: null,
|
|
//
|
|
mapPopupData: null,
|
|
}
|
|
},
|
|
provide() {
|
|
// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
|
|
return {
|
|
// explicitly provide a computed property
|
|
canvasMap: computed(() => this.canvasMap),
|
|
matterEngine: computed(() => this.engine)
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(ConcernementsStore,['map_mode',
|
|
'concernements',
|
|
'concernementsByID',
|
|
'opened_concernement',
|
|
'opened_entite_id',
|
|
'opened_recit'
|
|
]),
|
|
...mapState(CommonStore,['map_item_ray',
|
|
'hover_elmt',
|
|
'paper_symbol_definitions'])
|
|
},
|
|
created() {
|
|
// MATTER
|
|
// create an engine
|
|
let engineOptions = {
|
|
enableSleeping: true,
|
|
timing: {
|
|
//timestamp: 0.5,
|
|
timeScale: 0.5
|
|
}
|
|
}
|
|
this.engine = Matter.Engine.create(engineOptions);
|
|
this.engine.gravity.scale = 0;
|
|
this.world = this.engine.world;
|
|
},
|
|
mounted() {
|
|
this.canvasMap.canvas = this.$refs['canvas-map'];
|
|
this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
|
|
|
|
let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
|
|
let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
|
|
console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
|
|
|
// PAPER
|
|
this.paper = paper.setup(this.canvasMap.canvas);
|
|
|
|
// symbol defintions
|
|
this.initPaperSymbols();
|
|
|
|
// use the paper.view click to get back if no items is clicked
|
|
this.paper.view.onClick = function(event) {
|
|
console.log("view onClick", this, event.target);
|
|
if(event.target._id === "paper-view-0") {
|
|
this.resetConcernementOpened();
|
|
this.$router.push({
|
|
name: 'home',
|
|
hash: `#${this.map_mode}`
|
|
});
|
|
}
|
|
}.bind(this);
|
|
|
|
// use the paper.view mousemouve to removed mappopup
|
|
this.paper.view.onMouseMove = function(event) {
|
|
console.log("view onMouseMove", event.target);
|
|
if(event.target._id === "paper-view-0") {
|
|
this.setHoverElmt(null);
|
|
}
|
|
}.bind(this);
|
|
// MATTER
|
|
let wall_w = 1000;
|
|
Matter.Composite.add(this.world, [
|
|
// walls
|
|
Matter.Bodies.rectangle(canvas_w/2, -wall_w/2, canvas_w, wall_w, { isStatic: true }), // top
|
|
Matter.Bodies.rectangle(canvas_w/2, canvas_h+wall_w/2, canvas_w, wall_w, { isStatic: true }), // bottom
|
|
Matter.Bodies.rectangle(-wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // left
|
|
Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // right
|
|
// make the items never goes under menus
|
|
Matter.Bodies.rectangle(550, 25, 900, 50, { isStatic: true }), // menu top
|
|
Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true }) // menu bottom
|
|
]);
|
|
|
|
// add mouse control
|
|
// https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
|
|
// this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
|
|
|
|
this.animate()
|
|
},
|
|
watch: {
|
|
hover_elmt: {
|
|
handler (n, o) {
|
|
console.log(`watch hover_elmt map: o, n`, o, n);
|
|
// over highlight effect on paper items
|
|
if (n && n.paper_id) {
|
|
let nitem = paper.project.getItem({id: n.paper_id});
|
|
console.log('watch hover_element nitem', nitem.definition);
|
|
if (!nitem.is_symbol_instance) { // not symbol instance
|
|
nitem.bringToFront();
|
|
if (nitem.strokeColor) {
|
|
nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
|
|
nitem.strokeColor = "#01ffe2";
|
|
} else {
|
|
nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
|
|
nitem.fillColor = "#01ffe2";
|
|
}
|
|
|
|
} else { // is a symbol instanceof, then swap
|
|
console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
|
|
switch (n.type) {
|
|
case 'entite':
|
|
nitem.definition = this.paper_symbol_definitions.entite_hover;
|
|
break;
|
|
case 'besoin':
|
|
nitem.definition = this.paper_symbol_definitions.besoin_hover;
|
|
break;
|
|
case 'reponse':
|
|
nitem.definition = this.paper_symbol_definitions.reponse_hover;
|
|
break;
|
|
case 'entite_action':
|
|
nitem.definition = this.paper_symbol_definitions.entite_action_hover;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
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) {
|
|
oitem.strokeColor = oitem.data.prevStrokeColor;
|
|
} else {
|
|
oitem.fillColor = oitem.data.prevFillColor;
|
|
}
|
|
} else { // is a symbol instanceof, then swap
|
|
console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
|
|
switch (o.type) {
|
|
case 'entite':
|
|
if (!this.opened_entite_id || this.opened_entite_id !== oitem.item_id) {
|
|
oitem.definition = this.paper_symbol_definitions.entite;
|
|
}
|
|
break;
|
|
case 'besoin':
|
|
oitem.definition = this.paper_symbol_definitions.besoin;
|
|
break;
|
|
case 'reponse':
|
|
oitem.definition = this.paper_symbol_definitions.reponse;
|
|
break;
|
|
case 'entite_action':
|
|
if (!this.opened_entite_id || this.opened_entite_id !== oitem.item_id) {
|
|
oitem.definition = this.paper_symbol_definitions.entite_action;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(ConcernementsStore,['setMapMode',
|
|
'resetConcernementOpened']),
|
|
...mapActions(CommonStore,['addPaperSymbolDefinition',
|
|
'setHoverElmt']),
|
|
animate () {
|
|
Matter.Engine.update(this.engine, 1);
|
|
window.requestAnimationFrame(this.animate);
|
|
},
|
|
initPaperSymbols(){
|
|
this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
|
|
this.addPaperSymbolDefinition('puissanceagir_bg', this.setPaperPuissanceagirBGSymbol());
|
|
this.addPaperSymbolDefinition('puissanceagir_icon', this.setPaperPuissanceagirICONSymbol());
|
|
this.addPaperSymbolDefinition('doleance_bg', this.setPaperDoleanceBGSymbol());
|
|
this.addPaperSymbolDefinition('doleance_icon', this.setPaperDoleanceICONSymbol());
|
|
//
|
|
this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
|
|
this.addPaperSymbolDefinition('entite_hidden', this.setPaperHiddenEntiteSymbol());
|
|
this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
|
|
this.addPaperSymbolDefinition('entite_action_icon', this.setPaperEntiteActionIconSymbol());
|
|
this.addPaperSymbolDefinition('entite_action', this.setPaperEntiteActionSymbol());
|
|
this.addPaperSymbolDefinition('entite_action_hover', this.setPaperEntiteActionHoverSymbol());
|
|
this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
|
|
this.addPaperSymbolDefinition('besoin_hover', this.setPaperBesoinHoverSymbol());
|
|
this.addPaperSymbolDefinition('reponse', this.setPaperReponseSymbol());
|
|
this.addPaperSymbolDefinition('reponse_hover', this.setPaperReponseHoverSymbol());
|
|
},
|
|
setPaperBoussoleBGSymbol(){
|
|
// BOUSSOLE
|
|
let children = [];
|
|
let ray = this.map_item_ray;
|
|
let pos = {x:0, y:0};
|
|
|
|
// big global exterior circle to keep center aligned
|
|
children.push(new paper.Path.Circle({
|
|
center: [0, 0],
|
|
radius: ray*3,
|
|
style: {
|
|
strokeColor: 'rgba(255,255,255,0)',
|
|
strokeWidth: 0.5
|
|
}
|
|
}));
|
|
|
|
// cercles pointillés
|
|
for (let i = 1; i < 9; i++) {
|
|
let sw = i === 4 || i === 8 ? 0.5 : 0.25;
|
|
let da = i === 4 || i === 8 ? null : [5,5];
|
|
children.push(new paper.Path.Circle({
|
|
center: [pos.x, pos.y],
|
|
radius: ray/8*i,
|
|
strokeColor: '#fff',
|
|
strokeWidth: sw,
|
|
dashArray: da
|
|
}));
|
|
|
|
}
|
|
|
|
// axes
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x, pos.y - ray],
|
|
to: [pos.x, pos.y + ray],
|
|
strokeColor: '#fff',
|
|
strokeWidth: 0.5
|
|
}));
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x - ray, pos.y],
|
|
to: [pos.x + ray, pos.y],
|
|
strokeColor: '#fff',
|
|
strokeWidth: 0.5
|
|
}))
|
|
|
|
// fleches
|
|
// haute
|
|
children.push(new paper.Path({
|
|
segments: [
|
|
[pos.x - 8, pos.y - ray + 8],
|
|
[pos.x, pos.y - ray],
|
|
[pos.x + 8, pos.y - ray + 8],
|
|
],
|
|
strokeWidth: 0.5,
|
|
strokeColor: '#fff',
|
|
}));
|
|
// milieu
|
|
children.push(new paper.Path({
|
|
segments: [
|
|
[pos.x - 8, pos.y + 8],
|
|
[pos.x, pos.y],
|
|
[pos.x + 8, pos.y + 8],
|
|
],
|
|
strokeWidth: 0.5,
|
|
strokeColor: '#fff',
|
|
}));
|
|
|
|
|
|
// MOINS - PLUS
|
|
// PLUS
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x + ray - 5, pos.y - ray],
|
|
to: [pos.x + ray + 5, pos.y - ray],
|
|
strokeWidth: 2,
|
|
strokeColor: '#fff',
|
|
}))
|
|
// vertical
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x + ray, pos.y - ray - 5],
|
|
to: [pos.x + ray, pos.y - ray + 5],
|
|
strokeWidth: 2,
|
|
strokeColor: '#fff',
|
|
}))
|
|
|
|
// MOINS
|
|
// horizontal
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x - ray - 5, pos.y - ray],
|
|
to: [pos.x - ray + 5, pos.y - ray],
|
|
strokeWidth: 2,
|
|
strokeColor: '#fff',
|
|
}))
|
|
|
|
let fontsize = 4;
|
|
let fontFamily = "public_sans";
|
|
|
|
children.push(new paper.PointText({
|
|
point: [pos.x + 4.5, pos.y - ray - 5],
|
|
content: `entités qui menacent \u2194 entités qui maintiennent`,
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'center',
|
|
fillColor: '#000',
|
|
}))
|
|
|
|
children.push(new paper.PointText({
|
|
point: [pos.x - ray - 5, pos.y + 1],
|
|
content: "axe d'intensité",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'right',
|
|
fillColor: '#000',
|
|
}))
|
|
|
|
children.push(new paper.PointText({
|
|
point: [pos.x + ray + 5, pos.y - 3],
|
|
content: "situation future\n\u2195\nsituation actuelle",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'left',
|
|
fillColor: '#000',
|
|
}))
|
|
|
|
|
|
let t1 = new paper.PointText({
|
|
point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3],
|
|
content: "avec prise",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'center',
|
|
fillColor: '#000',
|
|
})
|
|
t1.rotate(-45)
|
|
children.push(t1)
|
|
|
|
let t2 = new paper.PointText({
|
|
point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95],
|
|
content: "sans prise",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'center',
|
|
fillColor: '#000',
|
|
})
|
|
t2.rotate(-45)
|
|
children.push(t2)
|
|
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(pos),
|
|
name: 'boussole_bg',
|
|
// locked: true,
|
|
});
|
|
|
|
},
|
|
setPaperPuissanceagirBGSymbol(){
|
|
let children = [];
|
|
let ray = this.map_item_ray;
|
|
let pos = {x:0,y:0};
|
|
|
|
// cercles interieur
|
|
for (let i = 1; i < 6; i++) {
|
|
children.push(new paper.Path.Circle({
|
|
center: [pos.x, pos.y],
|
|
radius: (ray/5)*i,
|
|
strokeWidth: 0.25
|
|
}));
|
|
}
|
|
|
|
// rayons
|
|
for (let j = 0; j < 16; j++) {
|
|
let a = (360 / 16) * j;
|
|
|
|
let ext_x = Math.cos(a*(Math.PI/180)) * ray;
|
|
let ext_y = Math.sin(a*(Math.PI/180)) * ray;
|
|
let int_x = Math.cos(a*(Math.PI/180)) * 2;
|
|
let int_y = Math.sin(a*(Math.PI/180)) * 2;
|
|
|
|
children.push(new paper.Path.Line({
|
|
from: [pos.x + ext_x, pos.y + ext_y],
|
|
to: [pos.x + int_x, pos.y + int_y],
|
|
strokeWidth: 0.25,
|
|
dashArray: [0.5,1]
|
|
}))
|
|
}
|
|
|
|
// cercle exterieur
|
|
children.push(new paper.Path.Circle({
|
|
center: [pos.x, pos.y],
|
|
radius: ray,
|
|
strokeWidth: 0.5,
|
|
fillColor: `rgba(255,255,255,0.6)`
|
|
}));
|
|
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(pos),
|
|
name: 'puissanceagir_bg',
|
|
// locked: true,
|
|
style: {
|
|
strokeColor: '#fff'
|
|
}
|
|
});
|
|
},
|
|
setPaperPuissanceagirICONSymbol(){
|
|
let children = [];
|
|
|
|
let svgIcon = paper.project.importSVG(iconPuissanceagir);
|
|
children.push(svgIcon);
|
|
svgIcon.position = this.pos;
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'puissanceagir_icon',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#000',
|
|
strokeWidth: 0.75,
|
|
fillColor: null
|
|
}
|
|
});
|
|
},
|
|
setPaperDoleanceBGSymbol(){
|
|
let ray = this.map_item_ray;
|
|
let pos = {x:0,y:0};
|
|
var r = ray * 0.8; // ray
|
|
var dr = r/2; // demi ray
|
|
var pcr = 3; // petits cercle rayon
|
|
|
|
// https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
|
|
// https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
|
|
// radians = degrees * (pi/180)
|
|
// degrees = radians * (180/pi)
|
|
// Points for 45° axes
|
|
let m = Math.sin(45*(Math.PI/180)) * r; // x = y for rayon
|
|
let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
|
|
// console.log('m', m);
|
|
|
|
// points for legende arcs
|
|
var lar = r*1.1; // legendes arcs rayon
|
|
let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc rayon
|
|
let p = Math.sin(22.5*(Math.PI/180)) * lar; // y @ 22.5° for legende arc rayon
|
|
let q = Math.sin(45*(Math.PI/180)) * lar; // x = y @ 45° for legende arc rayon
|
|
|
|
var ltr = lar + 4; // legendes texts rayon
|
|
let o_t = Math.cos(22.5*(Math.PI/180)) * ltr; // x @ 22.5° for legende text rayon
|
|
let p_t = Math.sin(22.5*(Math.PI/180)) * ltr; // y @ 22.5° for legende text rayon
|
|
let q_t = Math.sin(45*(Math.PI/180)) * ltr; // x = y @ 45° for legende text rayon
|
|
|
|
let style = {strokeColor: '#fff', strokeWidth: 0.25}
|
|
let felchesstyle = {strokeColor: '#fff', strokeWidth: 0.5}
|
|
let legende_style = {strokeColor: '#000', strokeWidth: 0.25}
|
|
let fontsize = 4;
|
|
let fontFamily = "public_sans";
|
|
|
|
let children = [
|
|
|
|
// big global exterior circle to keep center aligned
|
|
new paper.Path.Circle({
|
|
center: [0, 0],
|
|
radius: r*3,
|
|
style: {
|
|
strokeColor: 'rgba(255,255,255,0)',
|
|
strokeWidth: 0.5
|
|
}
|
|
}),
|
|
//
|
|
// ARCS EXTERIEURS
|
|
// haut gauche
|
|
new paper.Path.Arc({
|
|
from: [- r, -pcr],
|
|
through: [- m, -m],
|
|
to: [ -pcr, -r],
|
|
style: style
|
|
}),
|
|
// haut droite
|
|
new paper.Path.Arc({
|
|
from: [pcr, -r],
|
|
through: [m, -m],
|
|
to: [r, -pcr],
|
|
style: style
|
|
}),
|
|
// bas droite
|
|
new paper.Path.Arc({
|
|
from: [r, pcr],
|
|
through: [m, m],
|
|
to: [pcr, r],
|
|
style: style
|
|
}),
|
|
// bas gauche
|
|
new paper.Path.Arc({
|
|
from: [-pcr, r],
|
|
through: [-m, m],
|
|
to: [-r, pcr],
|
|
style: style
|
|
}),
|
|
//
|
|
// cercle interieur
|
|
new paper.Path.Circle({
|
|
center: [0, 0],
|
|
radius: dr,
|
|
style: style
|
|
}),
|
|
//
|
|
// petit cercles
|
|
new paper.Path.Circle({
|
|
center: [0, -r],
|
|
radius: pcr,
|
|
style: style
|
|
}),
|
|
new paper.Path.Circle({
|
|
center: [0, r],
|
|
radius: pcr,
|
|
style: {...style, ...{fillColor: 'rgba(255,255,255,0.9)'}},
|
|
}),
|
|
new paper.Path.Circle({
|
|
center: [r, 0],
|
|
radius: pcr,
|
|
style: style
|
|
}),
|
|
new paper.Path.Circle({
|
|
center: [-r, 0],
|
|
radius: pcr,
|
|
style: style
|
|
}),
|
|
//
|
|
// AXES
|
|
// vertical haut
|
|
new paper.Path.Line({
|
|
from: [0, -r + pcr],
|
|
to: [0, -dr],
|
|
style: style
|
|
}),
|
|
// vertical bas
|
|
new paper.Path.Line({
|
|
from: [0, r - pcr],
|
|
to: [0, dr],
|
|
style: style
|
|
}),
|
|
// horizontal gauche
|
|
new paper.Path.Line({
|
|
from: [-r + pcr, 0],
|
|
to: [-dr, 0],
|
|
style: style
|
|
}),
|
|
// horizontal droite
|
|
new paper.Path.Line({
|
|
from: [r - pcr, 0],
|
|
to: [dr, 0],
|
|
style: style
|
|
}),
|
|
//
|
|
// DIAGONALES
|
|
// bas droite
|
|
new paper.Path.Line({
|
|
from: [m, m],
|
|
to: [n, n],
|
|
style: style
|
|
}),
|
|
// bas gauche
|
|
new paper.Path.Line({
|
|
from: [-m, m],
|
|
to: [-n, n],
|
|
style: style
|
|
}),
|
|
// fleches
|
|
// haut
|
|
new paper.Path({
|
|
segments: [
|
|
[-4, -dr*1.5 - 4],
|
|
[0, -dr*1.5],
|
|
[-4, -dr*1.5 + 4]
|
|
],
|
|
style: felchesstyle
|
|
}),
|
|
// bas
|
|
new paper.Path({
|
|
segments: [
|
|
[4, dr*1.5 - 4],
|
|
[0, dr*1.5],
|
|
[4, dr*1.5 + 4]
|
|
],
|
|
style: felchesstyle
|
|
}),
|
|
// gauche
|
|
new paper.Path({
|
|
segments: [
|
|
[-dr*1.5 - 4, 4],
|
|
[-dr*1.5, 0],
|
|
[-dr*1.5 + 4, 4]
|
|
],
|
|
style: felchesstyle
|
|
}),
|
|
// droite
|
|
new paper.Path({
|
|
segments: [
|
|
[dr*1.5 - 4, -4],
|
|
[dr*1.5, 0],
|
|
[dr*1.5 + 4, -4]
|
|
],
|
|
style: felchesstyle
|
|
}),
|
|
//
|
|
// LEGENDES
|
|
//
|
|
// arc bas gauche 1
|
|
new paper.Path.Arc({
|
|
from: [-pcr, lar],
|
|
through: [-p, o],
|
|
to: [-q + pcr/2, q + pcr/2],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [-p, o],
|
|
to: [-p_t, o_t],
|
|
style: legende_style
|
|
}),
|
|
//text
|
|
new paper.PointText({
|
|
point: [-p_t - 1, o_t],
|
|
content: "2. Enquête menée\nsur le terrain de vie",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'right'
|
|
}),
|
|
// arc bas gauche 2
|
|
new paper.Path.Arc({
|
|
from: [-q - pcr/2, q - pcr/2],
|
|
through: [-o, p],
|
|
to: [-lar, pcr],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [-o, p],
|
|
to: [-o_t, p_t],
|
|
style: legende_style
|
|
}),
|
|
// texte
|
|
new paper.PointText({
|
|
point: [-o_t - 1, p_t],
|
|
content: "3. Construction de groupes d'intérets\navec qui composer la doléance",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'right'
|
|
}),
|
|
// arc haut gauche
|
|
new paper.Path.Arc({
|
|
from: [-lar, -pcr],
|
|
through: [-q, -q],
|
|
to: [-pcr, -lar],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [-q, -q],
|
|
to: [-q_t, -q_t],
|
|
style: legende_style
|
|
}),
|
|
// texte
|
|
new paper.PointText({
|
|
point: [-q_t - 1, -q_t],
|
|
content: "5. Réception et traitement\nde la doléance",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'right'
|
|
}),
|
|
// arc haut droite
|
|
new paper.Path.Arc({
|
|
from: [pcr, -lar],
|
|
through: [q, -q],
|
|
to: [lar, -pcr],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [q, -q],
|
|
to: [q_t, -q_t],
|
|
style: legende_style
|
|
}),
|
|
// texte
|
|
new paper.PointText({
|
|
point: [q_t + 1, -q_t],
|
|
content: "7. Mise-en-œuvre\nde la décision",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'left'
|
|
}),
|
|
// arc bas droite 1
|
|
new paper.Path.Arc({
|
|
from: [lar, pcr],
|
|
through: [o, p],
|
|
to: [q + pcr/2, q - pcr/2],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [o, p],
|
|
to: [o_t, p_t],
|
|
style: legende_style
|
|
}),
|
|
// texte
|
|
new paper.PointText({
|
|
point: [o_t + 1, p_t],
|
|
content: "9. Réception et application\nde la décision",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'left'
|
|
}),
|
|
// arc bas droite 2
|
|
new paper.Path.Arc({
|
|
from: [q - pcr/2, q + pcr/2],
|
|
through: [p, o],
|
|
to: [pcr, lar],
|
|
style: legende_style
|
|
}),
|
|
// tiret
|
|
new paper.Path.Line({
|
|
from: [p, o],
|
|
to: [p_t, o_t],
|
|
style: legende_style
|
|
}),
|
|
// texte
|
|
new paper.PointText({
|
|
point: [p_t + 1, o_t],
|
|
content: "10. Réussite / échec / reprise\ndu cercle politique",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'left'
|
|
}),
|
|
//
|
|
// Points Cardinaux
|
|
//
|
|
// haut
|
|
new paper.Path.Circle({
|
|
center: [0, -r],
|
|
radius: 0.5,
|
|
style: {
|
|
fillColor: '#000'
|
|
}
|
|
}),
|
|
new paper.Path.Line({
|
|
from: [0, -r],
|
|
to: [0, -r - 9],
|
|
style: legende_style
|
|
}),
|
|
new paper.PointText({
|
|
point: [0, -r - 11],
|
|
content: "6. Décision",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'center'
|
|
}),
|
|
// bas
|
|
new paper.Path.Circle({
|
|
center: [0, r],
|
|
radius: 0.5,
|
|
style: {
|
|
fillColor: '#000'
|
|
}
|
|
}),
|
|
new paper.Path.Line({
|
|
from: [0, r],
|
|
to: [0, r + 9],
|
|
style: legende_style
|
|
}),
|
|
new paper.PointText({
|
|
point: [0, r + 14],
|
|
content: "1. Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'center'
|
|
}),
|
|
// droite
|
|
new paper.Path.Circle({
|
|
center: [r, 0],
|
|
radius: 0.5,
|
|
style: {
|
|
fillColor: '#000'
|
|
}
|
|
}),
|
|
new paper.Path.Line({
|
|
from: [r, 0],
|
|
to: [r + 8, 0],
|
|
style: legende_style
|
|
}),
|
|
new paper.PointText({
|
|
point: [r + 10, -0.5],
|
|
content: "8. Adresse de la décision\nà appliquer",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'left'
|
|
}),
|
|
// gauche
|
|
new paper.Path.Circle({
|
|
center: [-r, 0],
|
|
radius: 0.5,
|
|
style: {
|
|
fillColor: '#000'
|
|
}
|
|
}),
|
|
new paper.Path.Line({
|
|
from: [-r, 0],
|
|
to: [-r - 8, 0],
|
|
style: legende_style
|
|
}),
|
|
new paper.PointText({
|
|
point: [-r - 10, 0.4],
|
|
content: "4. Adresse de la doléance",
|
|
fontSize: fontsize,
|
|
fontFamily: fontFamily,
|
|
justification: 'right'
|
|
}),
|
|
];
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(pos),
|
|
name: 'doleance_bg',
|
|
// locked: true
|
|
});
|
|
},
|
|
setPaperDoleanceICONSymbol(){
|
|
let children = [];
|
|
|
|
let svgIcon = paper.project.importSVG(iconDoleancer);
|
|
children.push(svgIcon);
|
|
svgIcon.position = this.pos;
|
|
|
|
return new paper.Group({
|
|
children: children,
|
|
pivot: new paper.Point(this.pos),
|
|
name: 'doleance_icon',
|
|
locked: true,
|
|
style: {
|
|
strokeColor: '#000',
|
|
strokeWidth: 0.75,
|
|
fillColor: null
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
setPaperEntiteSymbol(){
|
|
return new paper.Path.Circle({
|
|
pivot: new paper.Point({x:0,y:0}),
|
|
center: [0,0],
|
|
radius: 0.5, //0.3
|
|
fillColor: '#000',
|
|
strokeColor: 'rgba(255,255,255,0.05)',
|
|
strokeWidth:2
|
|
})
|
|
},
|
|
setPaperHiddenEntiteSymbol(){
|
|
return new paper.Path.Circle({
|
|
pivot: new paper.Point({x:0,y:0}),
|
|
center: [0,0],
|
|
radius: 0.7, //0.3
|
|
fillColor: '#fff',
|
|
strokeColor: 'rgba(255,255,255,0.05)',
|
|
strokeWidth:2
|
|
})
|
|
},
|
|
setPaperEntiteHoverSymbol(){
|
|
return new paper.Path.Circle({
|
|
pivot: new paper.Point({x:0,y:0}),
|
|
center: [0,0],
|
|
radius: 0.5,
|
|
fillColor: '#01ffe2',
|
|
strokeColor: 'rgba(255,255,255,0.05)',
|
|
strokeWidth:2
|
|
})
|
|
},
|
|
setPaperEntiteActionIconSymbol(){
|
|
let svgIcon = paper.project.importSVG(iconAction);
|
|
svgIcon.strokeWidth = 0.8;
|
|
svgIcon.scale(0.6);
|
|
svgIcon.strokeColor = '#000';
|
|
svgIcon.fillColor = null;
|
|
svgIcon.position = {x:0, y:0};
|
|
|
|
// let circle = new paper.Path.Circle({
|
|
// radius: 3,
|
|
// fillColor: 'rgba(255,255,255,0.01)'
|
|
// })
|
|
|
|
return new paper.Group({
|
|
children: [svgIcon],
|
|
name: 'action_icon'
|
|
});
|
|
},
|
|
setPaperEntiteActionSymbol(){
|
|
let svgIcon = paper.project.importSVG(iconAction);
|
|
svgIcon.strokeWidth = 0.25;
|
|
svgIcon.scale(0.15);
|
|
svgIcon.strokeColor = '#000';
|
|
svgIcon.fillColor = null;
|
|
svgIcon.position = {x:0, y:0};
|
|
|
|
let circle = new paper.Path.Circle({
|
|
radius: 3,
|
|
fillColor: 'rgba(255,255,255,0.01)'
|
|
})
|
|
|
|
return new paper.Group({
|
|
children: [circle, svgIcon],
|
|
name: 'action_icon'
|
|
});
|
|
},
|
|
setPaperEntiteActionHoverSymbol(){
|
|
let svgIcon = paper.project.importSVG(iconAction);
|
|
svgIcon.strokeColor = '#01ffe2';
|
|
svgIcon.strokeWidth = 0.25;
|
|
svgIcon.scale(0.15);
|
|
svgIcon.fillColor = null;
|
|
svgIcon.position = {x:0, y:0};
|
|
|
|
let circle = new paper.Path.Circle({
|
|
radius: 3,
|
|
fillColor: 'rgba(255,255,255,0.05)'
|
|
})
|
|
|
|
return new paper.Group({
|
|
children: [circle, svgIcon],
|
|
name: 'action_icon'
|
|
});
|
|
},
|
|
setPaperBesoinSymbol(){
|
|
return new paper.Path({
|
|
pivot: new paper.Point(this.pos),
|
|
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
|
fillColor: '#000'
|
|
})
|
|
},
|
|
setPaperBesoinHoverSymbol(){
|
|
return new paper.Path({
|
|
pivot: new paper.Point(this.pos),
|
|
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
|
fillColor: '#01ffe2'
|
|
})
|
|
},
|
|
setPaperReponseSymbol(){
|
|
return new paper.Path({
|
|
pivot: new paper.Point(this.pos),
|
|
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
|
fillColor: '#eee',
|
|
strokeColor: "#000",
|
|
strokeWidth: 0.25,
|
|
})
|
|
},
|
|
setPaperReponseHoverSymbol(){
|
|
return new paper.Path({
|
|
pivot: new paper.Point(this.pos),
|
|
segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
|
|
fillColor: '#eee',
|
|
strokeColor: "#01ffe2",
|
|
strokeWidth: 0.25,
|
|
})
|
|
}
|
|
},
|
|
beforeUpdate () {
|
|
},
|
|
components: {
|
|
MapBackground,
|
|
ConcernementMapPopup,
|
|
RecitPlayer
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="map-backgrounds">
|
|
<MapBackground />
|
|
</div>
|
|
<div id="map-matter">
|
|
<canvas ref="canvas-engine"></canvas>
|
|
</div>
|
|
<div id="map-concernements">
|
|
<canvas ref="canvas-map"></canvas>
|
|
<slot></slot>
|
|
</div>
|
|
<nav id="map-nav">
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href="#terraindevie" @click="setMapMode('terraindevie')"
|
|
>
|
|
<span class="icon terraindevie"></span> terrain de vie
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#proximite" @click="setMapMode('proximite')"
|
|
:class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
|
|
>
|
|
<span class="icon proximite"></span> proximité
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#superposition" @click="setMapMode('superposition')"
|
|
:class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
|
|
>
|
|
<span class="icon superposition"></span> superposition
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#puissancedagir" @click="setMapMode('puissancedagir')"
|
|
:class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
|
|
>
|
|
<span class="icon puissancedagir"></span> puissance d'agir
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#action" @click="setMapMode('action')"
|
|
:class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
|
|
>
|
|
<span class="icon action"></span> action
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#doleancer" @click="setMapMode('doleancer')"
|
|
:class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
|
|
>
|
|
<span class="icon doleancer"></span> cercle politique
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<RecitPlayer />
|
|
<ConcernementMapPopup
|
|
v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
|
|
:infos="hover_elmt"
|
|
/>
|
|
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|