squircle

commit 9f8cbc1ac54a096dd89985da8f0e4d5d7e03e720
parent 70720d86947b8be91ccc30c581f5bcaa2bbb2275
Author: Arnaud Becher <arnaud.becher@gmail.com>
Date:   Thu, 16 Jul 2020 14:12:05 +0200

init new rotation option

Diffstat:
M
src/components/GeneratorControls.vue
 | 
16
++++++++++++++++
M
src/components/GeneratorPreview.vue
 | 
12
++++++++++--
M
src/components/TheGenerator.vue
 | 
3
+++

3 files changed, 29 insertions(+), 2 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -14,6 +14,10 @@ export default {
             type: String,
             required: true,
         },
+        rotation: {
+            type: Number,
+            required: true,
+        },
         scale: {
             type: Number,
             required: true,
@@ -68,6 +72,18 @@ export default {
 <template>
     <div class="generator-controls">
         <div class="generator-controls__inputs">
+            <label for="rotation" class="generator-controls__label">
+                Rotation
+            </label>
+            <BaseRangeInput
+                    name="rotation"
+                    class="generator-controls__slider"
+                    :min="0"
+                    :max="90"
+                    :value="rotation"
+                    :step="1"
+                    @change="handleControlChange"
+            />
             <label for="scale" class="generator-controls__label">
                 Scale
             </label>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -10,6 +10,10 @@ export default {
             type: String,
             required: true,
         },
+        rotation: {
+            type: Number,
+            required: true,
+        },
         scale: {
             type: Number,
             required: true,
@@ -28,8 +32,12 @@ export default {
         >
             <path
                 :d="path"
-                :transform="`translate(
-                    ${(200 - scale) / 2} 
+                :transform="`rotate(
+                    ${rotation},
+                    100,
+                    100
+                ) translate(
+                    ${(200 - scale) / 2}
                     ${(200 - scale) / 2}
                 )`"
                 :fill="fill"
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -13,6 +13,7 @@ export default {
             squircleOpts: {
                 curvature: 0.75,
                 scale: 150,
+                rotation: 0,
                 fill: '#FADB5F',
             },
             path: '',
@@ -58,10 +59,12 @@ export default {
             :path="path"
             :fill="squircleOpts.fill"
             :scale="squircleOpts.scale"
+            :rotation="squircleOpts.rotation"
         />
         <GeneratorControls
             :initial-fill="squircleOpts.fill"
             :scale="squircleOpts.scale"
+            :rotation="squircleOpts.rotation"
             :curvature="squircleOpts.curvature"
             @controls-changed="handleControlChange"
         />