From a635f5392b8b9d7750ffab8e9a7ef488f871d94e Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 27 Aug 2020 15:15:41 +0100
Subject: [PATCH] optimised pixi
did a better way to draw connections removed all webGL warnings / less intensive
---
app/src/components/ConnectionsLayer.vue | 27 +++++++-----
app/src/components/NodesLayer.vue | 58 ++++++++++++-------------
2 files changed, 44 insertions(+), 41 deletions(-)
diff --git a/app/src/components/ConnectionsLayer.vue b/app/src/components/ConnectionsLayer.vue
index 2616f46..f487e97 100644
--- a/app/src/components/ConnectionsLayer.vue
+++ b/app/src/components/ConnectionsLayer.vue
@@ -1,6 +1,6 @@
<template>
<div class="connections">
- <canvas id="pixi"></canvas>
+ <canvas ref="pixi" id="pixi"></canvas>
</div>
</template>
@@ -27,20 +27,12 @@ export default {
methods: {
drawPixi() {
var i
- var canvas = document.getElementById('pixi')
- const app = new PIXI.Application({
- width: window.innerWidth,
- height: window.innerHeight,
- antialias: true,
- transparent: true,
- view: canvas,
- })
+ this.canvas = this.$refs.pixi
+ const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
graphics.lineStyle(8, 0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
- //console.log('tock')
- //console.log(this.configConnections[i].x_pos_start)
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
@@ -52,10 +44,21 @@ export default {
this.configConnections[i].y_pos_end
)
}
- app.stage.addChild(graphics)
+ for (var j = stage.children.length - 1; j >= 0; j--) {
+ stage.removeChild(stage.children[j])
+ }
+ stage.addChild(graphics)
},
},
mounted() {
+ const canvas = this.$refs.pixi
+ this.PIXIApp = new PIXI.Application({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ antialias: true,
+ transparent: true,
+ view: canvas,
+ })
this.drawPixi()
},
}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 53b16a7..3054bc0 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -1,21 +1,21 @@
<template>
<div ref="nodes" class="node">
- <div v-for="(posvalue, index) in configPositions" v-bind:key="index">
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
<div v-if="toolmode == 'move'">
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == posvalue.node_id"
- :w="posvalue.width"
- :h="posvalue.height"
- :x="posvalue.x_pos"
- :y="posvalue.y_pos"
- :z="posvalue.z_index"
+ v-if="nodeid == value.node_id"
+ :w="value.width"
+ :h="value.height"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255);"
>
<form>
- <div v-if="posvalue.read_mode == false">
+ <div v-if="value.read_mode == false">
<div v-for="value in myNodes" v-bind:key="value.node_id">
<textarea
v-if="nodeid == value.node_id"
@@ -31,7 +31,7 @@
></textarea>
</div>
</div>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<p
class="read"
:id="nodeid"
@@ -52,7 +52,7 @@
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
@@ -76,18 +76,18 @@
<div v-else-if="toolmode == 'connect'">
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == posvalue.node_id"
- :w="posvalue.width"
- :h="posvalue.height"
- :x="posvalue.x_pos"
- :y="posvalue.y_pos"
- :z="posvalue.z_index"
+ v-if="nodeid == value.node_id"
+ :w="value.width"
+ :h="value.height"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255);"
>
<form>
- <div v-if="posvalue.read_mode == false">
+ <div v-if="value.read_mode == false">
<div v-for="value in myNodes" v-bind:key="value.node_id">
<textarea
v-if="nodeid == value.node_id"
@@ -103,7 +103,7 @@
></textarea>
</div>
</div>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<p
class="read"
:id="nodeid"
@@ -126,10 +126,10 @@
>
<BaseButton
buttonClass="new-link"
- @click="onClickNewLink(nodeid, posvalue.x_pos, posvalue.y_pos)"
+ @click="onClickNewLink(nodeid, value.x_pos, value.y_pos)"
></BaseButton>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
@@ -155,12 +155,12 @@
<div v-else>
<vue-draggable-resizable
class="innernode"
- v-if="nodeid == posvalue.node_id"
- :w="posvalue.width"
- :h="posvalue.height"
- :x="posvalue.x_pos"
- :y="posvalue.y_pos"
- :z="posvalue.z_index"
+ v-if="nodeid == value.node_id"
+ :w="value.width"
+ :h="value.height"
+ :x="value.x_pos"
+ :y="value.y_pos"
+ :z="value.z_index"
@activated="onActivated"
@dragging="onDrag"
@resizing="onResize"
@@ -170,7 +170,7 @@
style="background-color: rgb(205, 234, 255);"
>
<form>
- <div v-if="posvalue.read_mode == false">
+ <div v-if="value.read_mode == false">
<div v-for="value in myNodes" v-bind:key="value.node_id">
<div v-if="nodeid == value.node_id">
<textarea
@@ -187,7 +187,7 @@
</div>
</div>
</div>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<p
class="read"
:id="nodeid"
@@ -208,7 +208,7 @@
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
>
- <div v-if="posvalue.read_mode == true">
+ <div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
--
GitLab