SHARE
TWEET

Untitled

a guest Jan 14th, 2020 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <v-image @click="showMenu($event)" :config="connectorConfig"></v-image>
  3. </template>
  4.  
  5. <script>
  6.     import {getCordinatesForMarker, getVerticesFromPoints} from '@/plugins/conva.js'
  7.  
  8.     export default {
  9.         name: "ShapeConnector",
  10.         props: ['connector'],
  11.         data() {
  12.             return {
  13.                 image: null
  14.             }
  15.         },
  16.         computed: {
  17.             connectorConfig() {
  18.                 let s = {
  19.                     image: this.image,
  20.                     // x: 200,
  21.                     x: this.connector.x,
  22.                     y: (this.connector.y),
  23.                     width: 30,
  24.                     height: 30
  25.                 }
  26.  
  27.                 // console.log(s)
  28.                 return s
  29.             },
  30.             foo() {
  31.                 return this.$store.getters.getShapes[0].vertices
  32.             }
  33.         },
  34.         mounted() {
  35.             const image = new window.Image();
  36.             image.src = "./images/icons/plus.svg";
  37.             image.onload = () => {
  38.                 this.image = image;
  39.             };
  40.         },
  41.         methods: {
  42.             showMenu(e) {
  43.                 const dist2d_mag = (vec1, vec2) => {
  44.                     const distance_x = vec2.x - vec1.x
  45.                     const distance_y = vec2.y - vec1.y
  46.                     return Math.sqrt(distance_x * distance_x + distance_y * distance_y)
  47.                 }
  48.  
  49.                 const vec2d_mag = (vec) => {
  50.                     return Math.sqrt(vec.x * vec.x + vec.y * vec.y)
  51.                 }
  52.  
  53.                 const vec2d_dot = (vec1, vec2) => {
  54.                     return vec1.x * vec2.x + vec1.y * vec2.y
  55.                 }
  56.  
  57.                 const vec2d_normalize = (vec) => {
  58.                     const mag = vec2d_mag(vec)
  59.                     return {
  60.                         x: vec.x /= mag,
  61.                         y: vec.y /= mag,
  62.                     }
  63.                 }
  64.  
  65.                 const face_length = dist2d_mag(this.connector.point1, this.connector.point2)
  66.  
  67.  
  68.                 let cube_points = [
  69.                     0, 0,
  70.                     face_length, 0,
  71.                     face_length, face_length,
  72.                     0, face_length
  73.                 ]
  74.  
  75.                 let cube = {
  76.                     id: '04SJOBE3',
  77.                     vertices: [],
  78.                     points: cube_points,
  79.                     closed: true,
  80.                     x: this.connector.point1.x,
  81.                     y: this.connector.point1.y,
  82.                     fill: 'yellow',
  83.                     strokeWidth: 4,
  84.                     draggable: true,
  85.                     dragBoundFunc: function (pos) {
  86.                         // this.absolutePosition()
  87.                         return pos;
  88.                     }
  89.                 }
  90.  
  91.                 const cube_vertices = getVerticesFromPoints(cube_points, this.connector.point1.x, this.connector.point1.y, {
  92.                     x: 1,
  93.                     y: 1
  94.                 })
  95.                 const cube_vertices_relative = getVerticesFromPoints(cube_points, 0, 0, {x: 1, y: 1})
  96.  
  97.  
  98.                 const rotate_point = (cx, cy, x, y, angle) => {
  99.                     const radians = (Math.PI / 180) * angle,
  100.                         cos = Math.cos(radians),
  101.                         sin = Math.sin(radians),
  102.                         nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
  103.                         ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
  104.                     return {x: nx, y: ny};
  105.                 }
  106.  
  107.                 const getCenterOfPoly = (vertices) => {
  108.                     let minX = 50000, minY = 50000
  109.                     let maxX = 0, maxY = 0
  110.  
  111.                     for (let i = 0; i < vertices.length; i++) {
  112.                         if (vertices[i].x > maxX)
  113.                             maxX = vertices[i].x
  114.  
  115.                         if (vertices[i].y > maxY)
  116.                             maxY = vertices[i].y
  117.  
  118.                         if (vertices[i].x < minX)
  119.                             minX = vertices[i].x
  120.  
  121.                         if (vertices[i].y < minY)
  122.                             minY = vertices[i].y
  123.                     }
  124.  
  125.                     return {x: minX + (maxX - minX) / 2, y: minY + (maxY - minY) / 2};
  126.                 }
  127.  
  128.                 const getNormals = (vertices) => {
  129.                     let normals = []
  130.                     const faces_center = getCordinatesForMarker(vertices, 0, 0, 0)
  131.                     const poly_center  = getCenterOfPoly(vertices)
  132.  
  133.                     for (let face_center of faces_center) {
  134.                         const dist_vec = {
  135.                             x: face_center.x + (face_center.x - poly_center.x) * 2,
  136.                             y: face_center.y + (face_center.y - poly_center.y) * 2,
  137.                         }
  138.  
  139.                         normals.push(vec2d_normalize(dist_vec))
  140.                     }
  141.  
  142.                     return normals
  143.                 }
  144.  
  145.                 let angle = 1
  146.                 let bestAngle = 0
  147.                 let bestDist = 5000;
  148.                 const first_cube_vertex = cube_vertices[0]
  149.  
  150.                 while (angle < 360) {
  151.                     const rotated_vertices = [first_cube_vertex]
  152.  
  153.                     for (let i = 1; i < cube_vertices.length; i++) {
  154.                         rotated_vertices.push(rotate_point(first_cube_vertex.x, first_cube_vertex.y, cube_vertices[i].x, cube_vertices[i].y, angle))
  155.                     }
  156.                
  157.                     const last_vertex =  rotated_vertices[rotated_vertices.length - 1]
  158.                     const mag = dist2d_mag(this.connector.point2, last_vertex)
  159.                     if(mag < bestDist)
  160.                     {
  161.                         bestDist = mag;
  162.                         bestAngle = angle;
  163.                     }
  164.                     angle += 1
  165.                 }
  166.  
  167.                 cube['rotation'] = 360 - bestAngle;
  168.                 this.$store.dispatch('addNewShape', cube)
  169.             }
  170.         }
  171.     }
  172. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top