bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drawing the contours of the contours in proximités

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-10-25 16:43:15 +02:00
parent 8aa8403f76
commit fcce41aa77
1 changed files with 92 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/ConcernementMapItem.vue
View File

@ -97,7 +97,7 @@ export default {
// //
this.parseEntityPointsValues() this.parseEntityPointsValues()
// this.getSalientPoints() // this.getSalientPoints()
this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexe() this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.entites)
// define init position of the item // define init position of the item
this.pos = this.getRandomPos(); this.pos = this.getRandomPos();
@ -305,10 +305,8 @@ export default {
} }
// console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints); // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints);
}, },
getJarvisEnvelopeConvexe(){ getJarvisEnvelopeConvexeEntites(entites){
let sailentEntites = []; let sailentEntites = [];
let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites;
// console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length);
// https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/ // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/
// find the most left point // find the most left point
let l, min_x = null; let l, min_x = null;
@ -328,19 +326,6 @@ export default {
// console.log(`do while ${this.id}`, p); // console.log(`do while ${this.id}`, p);
// Add current point to result // Add current point to result
let entite = entites[p]; let entite = entites[p];
// let farest = {
// alpha: entite.display.alpha,
// ray: entite.display.ray,
// pos: {
// x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
// y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
// }
// };
// this.salientPoints.push(farest);
// sailentEntites.push({
// alpha: entite.display.alpha,
// ray: entite.display.ray
// });
sailentEntites.push(entite); sailentEntites.push(entite);
// Search for a point 'q' such that // Search for a point 'q' such that
@ -587,7 +572,7 @@ export default {
resetPaperActiveRevision(){ resetPaperActiveRevision(){
console.log('resetPaperActiveRevision'); console.log('resetPaperActiveRevision');
this.getJarvisEnvelopeConvexe(); this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.concernement.revision_id].entites);
// remove contours if already exists // remove contours if already exists
if (this.paper_main_object.children.contours) { if (this.paper_main_object.children.contours) {
@ -647,10 +632,6 @@ export default {
// console.log(`vma x:${vma.x}, y:${vma.y}`); // console.log(`vma x:${vma.x}, y:${vma.y}`);
const pad = 4; // exterior padding const pad = 4; // exterior padding
// the final padded point // the final padded point
// const pa = [
// this.pos.x+(a.x+vma.x*pad)*this.scale,
// this.pos.y+(a.y+vma.y*pad)*this.scale
// ]
const pa = [ const pa = [
a.x+vma.x*pad, a.x+vma.x*pad,
a.y+vma.y*pad a.y+vma.y*pad
@ -824,6 +805,7 @@ export default {
return g; return g;
}, },
setPaperEntitesProximiteReferences(){ setPaperEntitesProximiteReferences(){
// console.log('_ _ _ _ setPaperEntitesProximiteReferences')
let g = new paper.Group({ let g = new paper.Group({
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
name: 'entites_proximites_references' name: 'entites_proximites_references'
@ -841,6 +823,7 @@ export default {
x: this.pos.x + entite.display.pos.x * this.scale, x: this.pos.x + entite.display.pos.x * this.scale,
y: this.pos.y + entite.display.pos.y * this.scale y: this.pos.y + entite.display.pos.y * this.scale
} }
// console.log(`entite_pos x:${entite_pos.x}, y:${entite_pos.y}`);
// use paper symbol // use paper symbol
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']); let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
instance.name = 'entite'; instance.name = 'entite';
@ -860,23 +843,23 @@ export default {
name: 'ref_entite_proximite' name: 'ref_entite_proximite'
}); });
let allEntiteRefConcernementContourEntites = [];
let beta = 360 / entite.entite.proximite.length; let beta = 360 / entite.entite.proximite.length;
let ray = 5; let ray = 5;
let e=0; let e=0;
entite.entite.proximite.forEach(entite_ref => { entite.entite.proximite.forEach(entite_ref => {
console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]); // console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]);
// create the entite ref paper point // create the entite ref paper point
let ref_instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']); let ref_instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
ref_instance.name = 'entite_ref'; ref_instance.name = 'entite_ref';
// x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)),
// y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180))
let entite_ref_pos = { let entite_ref_pos = {
x: entite_pos.x + ray * Math.cos((beta*e) * (Math.PI/180)), x: entite_pos.x + ray * Math.cos((beta*e) * (Math.PI/180)),
y: entite_pos.y + ray * Math.sin((beta*e) * (Math.PI/180)), y: entite_pos.y + ray * Math.sin((beta*e) * (Math.PI/180)),
} }
// console.log(`entite_ref_pos x:${entite_ref_pos.x}, y:${entite_ref_pos.y}`);
ref_instance.position = new paper.Point(entite_ref_pos); ref_instance.position = new paper.Point(entite_ref_pos);
// ref_instance.scale(this.scale); // ref_instance.scale(this.scale);
@ -887,20 +870,38 @@ export default {
ref_instance.is_symbol_instance = true; ref_instance.is_symbol_instance = true;
ref_g.addChild(ref_instance) ref_g.addChild(ref_instance)
// create the original concernement contours arround the entite_ref
let ref_cid = this.allEntitesById[entite_ref.id].cid; let ref_cid = this.allEntitesById[entite_ref.id].cid;
console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites); // console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites);
let ref_concernement = this.concernementsByID[ref_cid]; let ref_concernement = this.concernementsByID[ref_cid];
// define the right scale
let scale = 0.05;
let points = []; let points = [];
ref_concernement.sailentEntites.forEach(ent => { ref_concernement.sailentEntites.forEach(ent => {
points.push({ points.push({
x: (ent.display.ray) * Math.cos(ent.display.alpha * (Math.PI/180)), x: (ent.display.ray) * Math.cos(ent.display.alpha * (Math.PI/180)),
y: (ent.display.ray) * Math.sin(ent.display.alpha * (Math.PI/180)) y: (ent.display.ray) * Math.sin(ent.display.alpha * (Math.PI/180))
}) })
// - - //
// concat all the contours points for general contours arround all contours :/ :( (that's a very clear description)
let p = {
x: entite_ref_pos.x - entite_pos.x + (ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)))*scale,
y: entite_ref_pos.y - entite_pos.y + (ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180)))*scale
}
console.log(`p x:${p.x}, y:${p.y}`);
allEntiteRefConcernementContourEntites.push({
display:{
ray: Math.sqrt(Math.pow(p.x,2)+Math.pow(p.y,2)),
alpha: parseFloat(Math.atan2(p.y,p.x) * (180/Math.PI)).toFixed(2)
}
})
// - - //
}) })
// define the right scale
let scale = 0.05;
// convert points to rouded and padded segments props // convert points to rouded and padded segments props
let segments = this.getPaddedRoundedSegments(points, scale) let segments = this.getPaddedRoundedSegments(points, scale)
// create "real" Paper Segments from previous segments props // create "real" Paper Segments from previous segments props
@ -921,18 +922,74 @@ export default {
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 1, strokeWidth: 1,
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
cid: this.cid cid: ref_concernement.id
}); });
ref_g.addChild(contrs); ref_g.addChild(contrs);
contrs.sendToBack();
e++; e++;
}); // end of loop on proximite for each main entite
// // debug
// allEntiteRefConcernementContourEntites.forEach(e => {
// let p = paper.Path.Circle({
// pivot: new paper.Point({x:0,y:0}),
// center: [
// entite_pos.x + (e.display.ray * Math.cos(e.display.alpha * (Math.PI/180))),
// entite_pos.y + (e.display.ray * Math.sin(e.display.alpha * (Math.PI/180)))
// ],
// radius: 0.3,
// fillColor: '#00F',
// strokeColor: 'rgba(0,0,255,0.05)',
// strokeWidth:2
// })
// ref_g.addChild(p);
// })
// general contour arround proximité
// console.log('allEntiteRefConcernementContourEntites', allEntiteRefConcernementContourEntites);
let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(allEntiteRefConcernementContourEntites);
// console.log('genContoursEntite', genContoursEntite);
let points = [];
genContoursEntite.forEach(ent => {
points.push({
x: ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)),
y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180))
})
})
console.log('points', points);
let scale = 0.8;
// convert points to rouded and padded segments props
let segments = this.getPaddedRoundedSegments(points, scale)
// create "real" Paper Segments from previous segments props
let paper_segments = [];
segments.forEach(seg => {
paper_segments.push(new paper.Segment({
point: [entite_pos.x+seg.point[0]*scale, entite_pos.y+seg.point[1]*scale],
// point: [seg.point[0], seg.point[1]],
handleIn: seg.handleIn,
handleout: seg.handleOut
}))
}); });
// create the paper path with previous segments
const genContrs = new paper.Path({
name: 'gen_contours',
segments: paper_segments,
fillColor: 'rgba(255,255,255,0.4)',
// selected: true,
strokeColor: '#fff',
strokeWidth: 1,
pivot: new paper.Point(this.pos),
// cid: this.cid
});
ref_g.addChild(genContrs);
genContrs.sendToBack();
g.addChild(ref_g); g.addChild(ref_g);
} ref_g.sendToBack();
} // end of loop on entite wich have proximite
} }
return g; return g;
}, },
setPaperAgissantes(){ setPaperAgissantes(){
console.log('setPaperAgissantes'); console.log('setPaperAgissantes');