From 39c2d3717bdc6fce58417d734677c1c734fdf530 Mon Sep 17 00:00:00 2001
From: Keenan Brock <keenan@thebrocks.net>
Date: Sun, 26 Apr 2020 16:22:22 -0400
Subject: [PATCH] pass rotation from json to view

---
 src/components/BaseKey.vue            | 28 ++++++++++++++++++++++-----
 src/components/BaseKeymap.vue         | 19 +++++++++++++-----
 src/components/PrintKeymap.vue        | 10 ++++++++--
 src/components/VisualKeymap.vue       | 10 ++++++++--
 src/components/VisualTesterKeymap.vue | 10 ++++++++--
 5 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index 06b1f1b52f..f5bac5fab5 100644
--- a/src/components/BaseKey.vue
+++ b/src/components/BaseKey.vue
@@ -44,6 +44,9 @@ export default {
     y: Number,
     x: Number,
     u: Number,
+    r: Number,
+    rx: Number,
+    ry: Number,
     colorway: String,
     displaySizes: {
       type: Boolean,
@@ -144,11 +147,26 @@ export default {
       if (this.h > 0) {
         styles.push(`height: ${this.h}px;`);
       }
-      if (this.y > 0) {
-        styles.push(`top: ${this.y}px;`);
-      }
-      if (this.x > 0) {
-        styles.push(`left: ${this.x}px;`);
+      if (this.r && this.r != 0) {
+        if (this.ry > 0) {
+          styles.push(`top: ${this.ry}px;`);
+        }
+        if (this.rx > 0) {
+          styles.push(`left: ${this.rx}px;`);
+        }
+        styles.push(
+          `transform: rotate(${this.r}deg) translateX(${Math.round(
+            this.x - this.rx,
+            3
+          )}px) translateY(${Math.round(this.y - this.ry, 3)}px);`
+        );
+      } else {
+        if (this.y > 0) {
+          styles.push(`top: ${this.y}px;`);
+        }
+        if (this.x > 0) {
+          styles.push(`left: ${this.x}px;`);
+        }
       }
       if (this.meta && this.meta.name.length >= 2) {
         let keySize = 0.61;
diff --git a/src/components/BaseKeymap.vue b/src/components/BaseKeymap.vue
index 64547d83ce..06a60d2565 100644
--- a/src/components/BaseKeymap.vue
+++ b/src/components/BaseKeymap.vue
@@ -13,10 +13,13 @@ export default {
         u: h > w ? h : w
       };
     },
-    calcKeyKeymapPos(x, y) {
+    calcKeyKeymapPos(x, y, r, rx, ry) {
       return {
         x: x * this.config.KEY_X_SPACING,
-        y: y * this.config.KEY_Y_SPACING
+        y: y * this.config.KEY_Y_SPACING,
+        r: r,
+        rx: rx * this.config.KEY_X_SPACING,
+        ry: ry * this.config.KEY_Y_SPACING
       };
     },
     setSize(max) {
@@ -27,10 +30,16 @@ export default {
       const layoutArray = this.layouts[layout];
       const max = layoutArray.reduce(
         (acc, pos) => {
-          let _pos = Object.assign({ w: 1, h: 1 }, pos);
-          const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
+          let _pos = Object.assign({ w: 1, h: 1, r: 0, rx: 0, ry: 0 }, pos);
+          const coor = this.calcKeyKeymapPos(
+            _pos.x,
+            _pos.y,
+            _pos.r,
+            _pos.rx,
+            _pos.ry
+          );
           const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
-          acc.x = Math.max(acc.x, coor.x + dims.w);
+          acc.x = Math.max(acc.x, coor.x + dims.w); // TODO: use sin,cos with coor.x,y (icluding w/h)
           acc.y = Math.max(acc.y, coor.y + dims.h);
           return acc;
         },
diff --git a/src/components/PrintKeymap.vue b/src/components/PrintKeymap.vue
index 78dd9b23ac..411bf3249d 100644
--- a/src/components/PrintKeymap.vue
+++ b/src/components/PrintKeymap.vue
@@ -58,8 +58,14 @@ export default {
       this.profile && console.time('currentLayer');
       const colorway = this.colorway;
       let curLayer = layout.map((pos, index) => {
-        let _pos = Object.assign({ w: 1, h: 1 }, pos);
-        const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
+        let _pos = Object.assign({ w: 1, h: 1, r: 0 }, pos);
+        const coor = this.calcKeyKeymapPos(
+          _pos.x,
+          _pos.y,
+          _pos.r,
+          _pos.rx,
+          _pos.ry
+        );
         const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
         return Object.assign(
           {
diff --git a/src/components/VisualKeymap.vue b/src/components/VisualKeymap.vue
index 0c217ce99d..0a7d4a4577 100644
--- a/src/components/VisualKeymap.vue
+++ b/src/components/VisualKeymap.vue
@@ -84,8 +84,14 @@ export default {
       this.profile && console.time('currentLayer');
       const colorway = this.colorway;
       let curLayer = layout.map((pos, index) => {
-        let _pos = Object.assign({ w: 1, h: 1 }, pos);
-        const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
+        let _pos = Object.assign({ w: 1, h: 1, r: 0 }, pos);
+        const coor = this.calcKeyKeymapPos(
+          _pos.x,
+          _pos.y,
+          _pos.r,
+          _pos.rx,
+          _pos.ry
+        );
         const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
         return Object.assign(
           {
diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index 1e3730a07e..70011e3181 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/src/components/VisualTesterKeymap.vue
@@ -147,8 +147,14 @@ export default {
       // eslint-disable-next-line no-console
       this.profile && console.time('currentLayer');
       const curLayer = this.activeLayoutMeta.map((pos, index) => {
-        const _pos = Object.assign({ w: 1, h: 1 }, pos);
-        const coor = this.calcKeyKeymapPos(_pos.x, _pos.y);
+        const _pos = Object.assign({ w: 1, h: 1, r: 0 }, pos);
+        const coor = this.calcKeyKeymapPos(
+          _pos.x,
+          _pos.y,
+          _pos.r,
+          _pos.rx,
+          _pos.ry
+        );
         const dims = this.calcKeyKeymapDims(_pos.w, _pos.h);
         return Object.assign(
           {