Skip to content

Commit

Permalink
Merge pull request #26 from cemcen/fix/p5-performance
Browse files Browse the repository at this point in the history 
p5 draw performance improved and changed export file format
  • Loading branch information
@juakotorres
juakotorres authored Jan 31, 2020
2 parents a4768c8 + 13a4cc1 commit 21c264c
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 58 deletions.
118 changes: 79 additions & 39 deletions front/src/components/pages/PackingTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
<v-divider class="mx-2" inset vertical></v-divider>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn color="teal lighten-2" text :disabled="executing" @click="dialog = true" icon
<v-btn color="teal lighten-2" text :disabled="executing" @click="openNewPackingDialog()"
icon
v-on="on">
<v-icon>mdi-plus-circle</v-icon>
</v-btn>
Expand All @@ -17,7 +18,8 @@
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn color="teal lighten-2" v-on="on" :disabled="executing" icon text @click.native="loadOriginal">
<v-btn color="teal lighten-2" v-on="on" :disabled="executing" icon text
@click.native="loadOriginal">
<v-icon>mdi-backup-restore</v-icon>
</v-btn>
</template>
Expand Down Expand Up @@ -81,7 +83,8 @@

<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn color="teal lighten-2" v-on="on" :disabled="executing" icon text @click.native="uploadResults">
<v-btn color="teal lighten-2" v-on="on" :disabled="executing" icon text
@click.native="uploadResults">
<v-icon>mdi-chart-bar</v-icon>
</v-btn>
</template>
Expand All @@ -93,11 +96,11 @@
<v-progress-circular v-show="executing" indeterminate
color="teal lighten-2"></v-progress-circular>

<dialog-new-packing :dialog="dialog" @close="dialog = false"
<dialog-new-packing :dialog="dialog" @close="closedDialog()"
@execute="execute" @execute-multi-layer="executeMultiLayer"/>

<assign-properties :dialog="dialog2"
@closeDialog="dialog2 = false"
@closeDialog="closedDialog"
@assignProperties="assignProperties"/>

<v-dialog eager v-model="dialogAngle" persistent max-width="500px">
Expand All @@ -121,7 +124,7 @@

<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="teal lighten-2" text @click.native="dialogAngle = false">Close
<v-btn color="teal lighten-2" text @click.native="closedDialog()">Close
</v-btn>
<v-btn dark color="teal lighten-2" @keyup.enter="optimizeAngle"
@click.native="optimizeAngle">Optimize
Expand All @@ -132,10 +135,11 @@

<boundary-conditions ref="boundaryConditionsComponent" :dialog="dialogBoundaryConditions"
@changedBoundary="changedBoundary" @loadOriginal="loadOriginal"
@closeDialog="dialogBoundaryConditions = false"/>
<import-packing ref="refImportPacking" @loadtxtpacking="loadTxtPacking"/>
<download-packing ref="refExportPacking"/>
<upload-results-dialog ref="uploadResultsRef"/>
@closeDialog="closedDialog()"/>
<import-packing ref="refImportPacking" @loadtxtpacking="loadTxtPacking"
@closedDialog="closedDialog()"/>
<download-packing ref="refExportPacking" @closedDialog="closedDialog()"/>
<upload-results-dialog ref="uploadResultsRef" @closedDialog="closedDialog()"/>

</v-toolbar>
<div id='myContainer' ref="polygonContainer" class="polygon">
Expand Down Expand Up @@ -213,6 +217,9 @@
data() {
return {
validation: validation,
openedDialog: false,
drawSelectionBox: false,
drawPacking: true,
selectedTab: 1,
ps: null,
dialogBoundaryConditions: false,
Expand Down Expand Up @@ -263,7 +270,9 @@
p.windowResized = () => {
if (typeof this.$refs.polygonContainer !== "undefined") {
p.resizeCanvas(this.$refs.polygonContainer.clientWidth, this.$refs.polygonContainer.clientHeight)
p.resizeCanvas(this.$refs.polygonContainer.clientWidth, this.$refs.polygonContainer.clientHeight);
this.drawPacking = true;
p.draw();
}
};
Expand All @@ -274,7 +283,7 @@
let bx = 0;
let by = 0;
p.mousePressed = () => {
if (p.mouseX > -10 && p.mouseY > -10 && p.mouseX < p.width + 10 && p.mouseY < p.height + 10 && !this.dialog2) {
if (p.mouseX > -10 && p.mouseY > -10 && p.mouseX < p.width + 10 && p.mouseY < p.height + 10 && !this.openedDialog) {
locked = true;
xInit = p.mouseX;
yInit = p.mouseY;
Expand All @@ -288,15 +297,17 @@
dragged = true;
bx = p.mouseX;
by = p.mouseY;
this.drawSelectionBox = true;
p.draw();
}
};
p.mouseReleased = () => {
locked = false;
let height = this.packing.height;
let width = this.packing.width;
if (dragged && !this.dialogBoundaryConditions) {
if(Math.abs(xInit - bx) * Math.abs(yInit - by) < 0.1) {
if (locked && dragged && !this.openedDialog) {
locked = false;
if (Math.abs(xInit - bx) * Math.abs(yInit - by) < 0.1) {
if (this.packing.graph) {
this.packing.polygons.forEach(pol => {
pol.selected = false;
Expand Down Expand Up @@ -337,17 +348,23 @@
}
dragged = false;
}
} else {
if (this.packing.graph) {
this.packing.polygons.forEach(pol => {
pol.selected = false;
});
this.packing.polygons.forEach(pol => {
let pnt = [p.mouseX, p.mouseY];
pol.selected = this.pointInsidePolygon(pol, pnt, width, height, p);
});
}
this.drawPacking = true;
p.draw();
} else if (locked && this.packing.graph && !this.openedDialog) {
locked = false;
this.packing.polygons.forEach(pol => {
pol.selected = false;
});
this.packing.polygons.forEach(pol => {
let pnt = [p.mouseX, p.mouseY];
pol.selected = this.pointInsidePolygon(pol, pnt, width, height, p);
});
this.drawPacking = true;
p.draw();
}
locked = false;
xInit = 0;
yInit = 0;
Expand All @@ -357,10 +374,10 @@
// What's been drawn on the canvas
p.draw = () => {
p.background(255, 255, 255);
p.noFill();
p.push();
if(!this.dialogBoundaryConditions || this.$refs.uploadResultsRef.dialog) {
if (!this.openedDialog && (this.drawPacking || this.drawSelectionBox)) {
p.background(255, 255, 255);
p.push();
if (this.packing) {
if (this.packing.polygons) {
this.packing.polygons.forEach(pol => {
Expand Down Expand Up @@ -393,17 +410,19 @@
});
});
}
this.drawPacking = false;
}
if (locked) {
if (locked && this.drawSelectionBox) {
p.strokeWeight(3);
p.stroke(239, 83, 80);
p.noFill();
let x = Math.min(bx, xInit);
let y = Math.min(by, yInit);
p.rect(x, y, Math.abs(bx - xInit), Math.abs(by - yInit))
p.rect(x, y, Math.abs(bx - xInit), Math.abs(by - yInit));
this.drawSelectionBox = false;
}
p.pop();
}
p.pop();
};
};
const P5 = require('p5');
Expand All @@ -426,16 +445,29 @@
this.selectedTab = i;
this.$router.push(routes[i]);
},
openNewPackingDialog() {
this.dialog = true;
this.openedDialog = true;
},
closedDialog() {
this.dialog = false;
this.dialog2 = false;
this.dialogAngle = false;
this.dialogBoundaryConditions = false;
this.openedDialog = false;
},
openAngleDialog() {
this.$refs.minimumAngleForm.resetValidation();
this.dialogAngle = true;
this.openedDialog = true;
},
openBorderConditions() {
this.dialogBoundaryConditions = true;
this.openedDialog = true;
this.$refs.boundaryConditionsComponent.reDraw();
},
optimizeAngle() {
if(this.$refs.minimumAngleForm.validate()) {
if (this.$refs.minimumAngleForm.validate()) {
let minimumRadianAngle = this.minimumAngle * Math.PI / 180;
let changed = false;
this.packing.polygons.map(pol => {
Expand Down Expand Up @@ -521,9 +553,11 @@
},
importPacking() {
this.$refs.refImportPacking.openDialog();
this.openedDialog = true;
},
exportPacking() {
this.$refs.refExportPacking.openDialog();
this.openedDialog = true;
},
assignProperties(selectedOptionProperties, selectedOptionType) {
let polygons = this.packing.polygons;
Expand Down Expand Up @@ -576,6 +610,8 @@
polygons: polygons
});
this.drawPacking = true;
this.openedDialog = false;
this.ps.draw();
this.dialog2 = false;
},
Expand Down Expand Up @@ -640,11 +676,12 @@
api.sendMesh(data).then(resp => {
this.executing = false;
let packing = this.triangulatePacking(resp.body.mesh);
packing.xAxisOrigin = 0;
packing.yAxisOrigin = 0;
this.$store.commit("newPacking", packing);
this.parseMesh(packing);
this.$refs.boundaryConditionsComponent.updatePacking();
this.drawPacking = true;
this.openedDialog = false;
this.ps.draw();
}).catch(error => {
this.executing = false;
console.log(error);
Expand Down Expand Up @@ -683,11 +720,12 @@
api.sendMeshMultiLayers(data).then(resp => {
this.executing = false;
let packing = this.triangulatePacking(resp.body.mesh);
packing.xAxisOrigin = 0;
packing.yAxisOrigin = 0;
this.$store.commit("newPacking", packing);
this.parseMesh(packing);
this.$refs.boundaryConditionsComponent.updatePacking();
this.drawPacking = true;
this.openedDialog = false;
this.ps.draw();
}).catch(error => {
this.executing = false;
console.log(error);
Expand Down Expand Up @@ -945,8 +983,9 @@
},
openAssignProp() {
this.dialog2 = true;
this.openedDialog = true;
},
pointInsidePolygon(polygon, mousePoint, width, height, p) {
pointInsidePolygon(polygon, mousePoint, width, height, p) {
let intersections = 0;
for (let i = 0; i < polygon.points.length; i++) {
Expand All @@ -957,14 +996,15 @@
let xj = ((pntB.x / width) * this.getWidth(p)) + this.getOffsetXAxis(),
yj = (((height - pntB.y) / height) * this.getHeight(p)) + this.getOffsetYAxis();
if(this.vectorIntersection(xi, yi, xj, yj, mousePoint[0], mousePoint[1], -1000, -1000)) {
if (this.vectorIntersection(xi, yi, xj, yj, mousePoint[0], mousePoint[1], -1000, -1000)) {
intersections += 1;
}
}
return intersections % 2 !== 0;
},
uploadResults() {
this.openedDialog = true;
this.$refs.uploadResultsRef.openDialog();
this.$refs.uploadResultsRef.reDraw();
}
Expand Down
14 changes: 7 additions & 7 deletions front/src/components/templates/AssignProperties.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<v-card-text>
<v-row justify="center">
<v-col class="pa-0 pr-3 pl-3">
<v-select label="Choose which polygons should have these properties"
<v-select label="Choose which entities should have these properties"
item-text="name"
v-model="selectedOptionProperties" :items="optionProperties"
return-object>
Expand All @@ -17,7 +17,7 @@
</v-row>
<v-row justify="center">
<v-col class="pa-0 pr-3 pl-3">
<v-select label="Choose which type of polygon should have these properties"
<v-select label="From the selected entities choose where to assign"
item-text="name"
v-model="selectedOptionType" :items="optionType" return-object>
</v-select>
Expand Down Expand Up @@ -85,25 +85,25 @@
optionProperties: [
{
value: 0,
name: "Selected Polygons"
name: "Selected Polygons and Holes"
},
{
value: 1,
name: "All Polygons"
name: "All Polygons and Holes"
}
],
optionType: [
{
value: 0,
name: "All Polygons"
name: "Polygons and Holes"
},
{
value: 1,
name: "Only polygons"
name: "Polygons Only"
},
{
value: 2,
name: "Only holes"
name: "Holes Only"
}
],
selectedOptionProperties: {
Expand Down
Loading

0 comments on commit 21c264c

Please sign in to comment.