resizing window is working
This commit is contained in:
@@ -39,6 +39,7 @@ export default {
|
||||
// MATTER
|
||||
engine: null,
|
||||
world: null,
|
||||
walls: null,
|
||||
// PAPERJS
|
||||
paper: null,
|
||||
//
|
||||
@@ -129,22 +130,14 @@ export default {
|
||||
}.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
|
||||
]);
|
||||
this.buildMatterWalls();
|
||||
|
||||
// add mouse control
|
||||
// https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
|
||||
// this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
|
||||
|
||||
window.addEventListener("resize", this.onWindowResize.bind(this));
|
||||
|
||||
this.animate()
|
||||
},
|
||||
watch: {
|
||||
@@ -275,30 +268,128 @@ export default {
|
||||
...mapActions(ConcernementsStore,['setMapMode',
|
||||
'resetConcernementOpened']),
|
||||
...mapActions(CommonStore,['addPaperSymbolDefinition',
|
||||
'setHoverElmt']),
|
||||
'setHoverElmt',
|
||||
'updateMapItemRay']),
|
||||
animate () {
|
||||
// if (document.hasFocus()) {
|
||||
Matter.Engine.update(this.engine, 1);
|
||||
// }
|
||||
window.requestAnimationFrame(this.animate);
|
||||
},
|
||||
initPaperSymbols(){
|
||||
buildMatterWalls(){
|
||||
console.log('buildMatterWalls');
|
||||
// remove old walls if exists
|
||||
let oldWallsBody = Matter.Composite.get(this.world, 'walls', 'body');
|
||||
if (oldWallsBody) {
|
||||
console.log('buildMatterWalls oldWallsBody', oldWallsBody);
|
||||
Matter.Composite.remove(this.world, oldWallsBody);
|
||||
}
|
||||
console.log('buildMatterWalls oldWallsBody after remove', Matter.Composite.get(this.world, 'walls', 'body'));
|
||||
|
||||
// create walls
|
||||
let canvas_w = this.canvasMap.canvas.width;
|
||||
let canvas_h = this.canvasMap.canvas.height;
|
||||
console.log(`buildMatterWalls canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
||||
let length = 10000; // set a length long enought that we don't have to redimmension it when window resize
|
||||
let thickness = 1000;
|
||||
let pad = 1;
|
||||
let wallsParts = [
|
||||
// walls
|
||||
// Matter.Bodies.rectangle(x, y, width, height, [options])
|
||||
Matter.Bodies.rectangle(canvas_w/2, -thickness/2 +pad, length, thickness, { label: 'top_wall'}), // top
|
||||
Matter.Bodies.rectangle(canvas_w/2, canvas_h+thickness/2 -pad, length, thickness, { label: 'bottom_wall'}), // bottom
|
||||
Matter.Bodies.rectangle(-thickness/2 +pad, canvas_h/2, thickness, length, { label: 'left_wall'}), // left
|
||||
Matter.Bodies.rectangle(canvas_w+thickness/2 -pad, canvas_h/2, thickness, length, { label: 'right_wall'}), // right
|
||||
// make the items never goes under menus
|
||||
// Matter.Bodies.rectangle(500, 25, 1000, 50, { label: 'menutop_wall'}), // menu top
|
||||
// Matter.Bodies.rectangle(500, canvas_h-15, 1000, 30, { label: 'menubottom_wall'}) // menu bottom
|
||||
];
|
||||
this.walls = Matter.Body.create({
|
||||
parts: wallsParts,
|
||||
id: 'walls',
|
||||
isStatic: true
|
||||
});
|
||||
Matter.Composite.add(this.world, this.walls);
|
||||
console.log('buildMatterWalls this.walls', this.walls);
|
||||
},
|
||||
updateMatterWalls(){
|
||||
let canvas_w = this.canvasMap.canvas.width;
|
||||
let canvas_h = this.canvasMap.canvas.height;
|
||||
console.log(`buildMatterWalls canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
|
||||
let thickness = 1000;
|
||||
let pad = 10;
|
||||
|
||||
this.walls.parts.forEach((p, i) =>{
|
||||
// console.log('p.label', p.label);
|
||||
let pos = false;
|
||||
switch (p.label) {
|
||||
case 'top_wall':
|
||||
pos = Matter.Vector.create(canvas_w/2, -thickness/2 +pad)
|
||||
break;
|
||||
case 'bottom_wall':
|
||||
pos = Matter.Vector.create(canvas_w/2, canvas_h+thickness/2 -pad)
|
||||
break;
|
||||
case 'left_wall':
|
||||
pos = Matter.Vector.create(-thickness/2 +pad, canvas_h/2)
|
||||
break;
|
||||
case 'right_wall':
|
||||
pos = Matter.Vector.create(canvas_w+thickness/2 -pad, canvas_h/2)
|
||||
break;
|
||||
case 'menutop_wall':
|
||||
pos = Matter.Vector.create(500, 25)
|
||||
break;
|
||||
case 'menubottom_wall':
|
||||
pos = Matter.Vector.create(500, canvas_h-15)
|
||||
break;
|
||||
}
|
||||
if(pos){
|
||||
Matter.Body.setPosition(p, pos);
|
||||
}
|
||||
})
|
||||
},
|
||||
onWindowResize(e){
|
||||
// console.log('onWindowResize', e);
|
||||
// get the new size
|
||||
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}`);
|
||||
|
||||
// apply to paper env
|
||||
// paper.view.viewSize.width = canvas_w;
|
||||
// paper.view.viewSize.height = canvas_h;
|
||||
this.paper.view.viewSize = new paper.Size(canvas_w, canvas_h);
|
||||
|
||||
// apply to matter env
|
||||
// this.buildMatterWalls();
|
||||
this.updateMatterWalls();
|
||||
|
||||
|
||||
// resize the base item ray, this will trigger all the map_items to resize in nextTick()
|
||||
this.updateMapItemRay();
|
||||
|
||||
// rebuild all the paper symbols with new ray
|
||||
this.initPaperSymbols(true)
|
||||
|
||||
|
||||
},
|
||||
initPaperSymbols(update){
|
||||
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());
|
||||
if (!update) {
|
||||
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
|
||||
@@ -317,32 +408,48 @@ export default {
|
||||
}));
|
||||
|
||||
// cercles
|
||||
for (let i = 1; i < 9; i++) {
|
||||
let sw = i === 4 || i === 8 ? 0.25 : 0.1; // width
|
||||
let da = i === 4 || i === 8 ? null : [5,5]; // dash array
|
||||
if (!da) { // draw only 2 main non-dashed circles
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [pos.x, pos.y],
|
||||
radius: ray/8*i,
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: sw,
|
||||
dashArray: da
|
||||
}));
|
||||
}
|
||||
}
|
||||
// for (let i = 1; i < 9; i++) {
|
||||
// let sw = i === 4 || i === 8 ? 0.25 : 0.1; // width
|
||||
// let da = i === 4 || i === 8 ? null : [5,5]; // dash array
|
||||
// if (!da) { // draw only 2 main non-dashed circles
|
||||
// children.push(new paper.Path.Circle({
|
||||
// center: [pos.x, pos.y],
|
||||
// radius: ray/8*i,
|
||||
// strokeColor: '#fff',
|
||||
// strokeWidth: sw,
|
||||
// dashArray: da
|
||||
// }));
|
||||
// }
|
||||
// }
|
||||
|
||||
// cercle exterieur
|
||||
let ext_circle_factor = 0.915;
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [pos.x, pos.y],
|
||||
radius: ray*ext_circle_factor,
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 0.25
|
||||
}));
|
||||
// cercle interieur
|
||||
children.push(new paper.Path.Circle({
|
||||
center: [pos.x, pos.y],
|
||||
radius: ray*0.51,
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 0.25
|
||||
}));
|
||||
|
||||
// axes
|
||||
// vertical
|
||||
children.push(new paper.Path.Line({
|
||||
from: [pos.x, pos.y - ray],
|
||||
to: [pos.x, pos.y + ray],
|
||||
from: [pos.x, pos.y - ray*ext_circle_factor],
|
||||
to: [pos.x, pos.y + ray*ext_circle_factor],
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 0.25
|
||||
}));
|
||||
// horizontal
|
||||
children.push(new paper.Path.Line({
|
||||
from: [pos.x - ray, pos.y],
|
||||
to: [pos.x + ray, pos.y],
|
||||
from: [pos.x - ray*ext_circle_factor, pos.y],
|
||||
to: [pos.x + ray*ext_circle_factor, pos.y],
|
||||
strokeColor: '#fff',
|
||||
strokeWidth: 0.25
|
||||
}))
|
||||
@@ -351,9 +458,9 @@ export default {
|
||||
// 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],
|
||||
[pos.x - 8, pos.y - ray*ext_circle_factor + 8],
|
||||
[pos.x, pos.y - ray*ext_circle_factor],
|
||||
[pos.x + 8, pos.y - ray*ext_circle_factor + 8],
|
||||
],
|
||||
strokeWidth: 0.25,
|
||||
strokeColor: '#fff',
|
||||
@@ -1284,6 +1391,7 @@ export default {
|
||||
onAfterEngineUpdate(){
|
||||
// // START OF DEBUGGING
|
||||
// this.debugDrawConstraints()
|
||||
// this.debugDrawWalls()
|
||||
// // END OF DEBUGGING
|
||||
},
|
||||
debugDrawConstraints(){
|
||||
@@ -1312,6 +1420,34 @@ export default {
|
||||
}));
|
||||
}
|
||||
constraints_lines.addChildren(children);
|
||||
},
|
||||
debugDrawWalls(){
|
||||
let wall_rects = this.paper.project.getItem({name: 'wall_rects', class: paper.Group});
|
||||
if (wall_rects) {
|
||||
wall_rects.removeChildren();
|
||||
}else{
|
||||
wall_rects = new paper.Group({
|
||||
pivot: new paper.Point({x:0,y:0}),
|
||||
name: 'wall_rects',
|
||||
});
|
||||
}
|
||||
let wallsbody = Matter.Composite.get(this.world, 'walls', 'body');
|
||||
if (wallsbody) {
|
||||
// console.log('wallsbody', wallsbody.parts);
|
||||
let children = [];
|
||||
wallsbody.parts.forEach((part, i) => {
|
||||
if(i > 0){
|
||||
// console.log('part', part.label, part.bounds.min);
|
||||
children.push(new paper.Path.Rectangle({
|
||||
from: part.bounds.min,
|
||||
to: part.bounds.max,
|
||||
strokeColor: '#00f',
|
||||
strokeWidth: 2
|
||||
}));
|
||||
}
|
||||
});
|
||||
wall_rects.addChildren(children);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
|
||||
Reference in New Issue
Block a user