support degree snap with shift key

kode-team · Mar 12, 2021 · 64c4130 · 64c4130
1 parent 85d966c
commit 64c4130
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 17 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html> <html> <head> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.css?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?7ce7c1c148ffcf4724ff"></script></body> </html> 
+<!doctype html> <html> <head> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.css?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?77a1a846b1a58b4d98bc"></script></body> </html> 
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/editor",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "description": "Fantastic Web Design Tool ",
   "main": "./dist/editor.js",
   "directories": {

diff --git a/src/assets/extension/manifest.json b/src/assets/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.10.6",
+  "version": "0.10.7",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool ",
   "author": "easylogic",

diff --git a/src/assets/whale/manifest.json b/src/assets/whale/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.10.6",
+  "version": "0.10.7",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool, Web 디자인 툴  ",
   "author": "easylogic",

diff --git a/src/manager/ConfigManager.js b/src/manager/ConfigManager.js
@@ -12,6 +12,7 @@ export class ConfigManager {
         this.set('body.move.ms', 30);
         this.set('grid.preview.position', []);
         this.set('debug', false);
+        this.set('fixedAngle', 15);
     }
 
     /**

diff --git a/src/ui/view-items/GroupSelectionToolView.js b/src/ui/view-items/GroupSelectionToolView.js
@@ -8,7 +8,6 @@ import { TransformOrigin } from "@property-parser/TransformOrigin";
 import { calculateAngle, calculateAngle360, calculateAngleForVec3, calculateMatrix, calculateMatrixInverse, calculateRotationOriginMat4, round, vertiesMap } from "@core/functions/math";
 import { ArtBoard } from "@items/ArtBoard";
 import { getRotatePointer, rectToVerties } from "@core/functions/collision";
-import Dom from "@core/Dom";
 
 
 var directionType = {
@@ -107,6 +106,10 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
             distVector
         ));
 
+        if (this.$config.get('bodyEvent').shiftKey) {
+            distAngle = distAngle - distAngle % this.$config.get('fixedAngle');
+        }
+
         // 실제 움직인 angle 
         this.localAngle = this.angle + distAngle;
 
@@ -655,15 +658,13 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
     }
 
 
-    createPointer (pointer, number) {
+    createPointer (pointer, number, rotate) {
         return /*html*/`
         <div    
             class='pointer' 
             data-number="${number}" 
             data-pointer="${pointer}" 
-            style="
-                transform: translate3d( calc(${pointer[0]}px - 50%), calc(${pointer[1]}px - 50%), 0px)
-            " 
+            style="transform: translate3d( calc(${pointer[0]}px - 50%), calc(${pointer[1]}px - 50%), 0px) rotateZ(${rotate || '0deg'})" 
         ></div>
         `
     }
@@ -757,6 +758,16 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
     }    
 
     createRenderPointers(pointers, selectionPointers) {
+
+        const diff = vec3.subtract(
+            [], 
+            vec3.lerp([], pointers[0], pointers[1], 0.5), 
+            vec3.lerp([], pointers[0], pointers[2], 0.5), 
+        );
+
+        //TODO: 여기서는 법선벡터를 구하게 되면 식이 훨씬 간단해진다. 
+        const rotate = Length.deg(calculateAngle360(diff[0], diff[1]) - 90).round(1000);
+
         const rotatePointer = getRotatePointer(pointers, 30)
         const dist = vec3.dist(pointers[0], pointers[2]);        
 
@@ -770,10 +781,10 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
                 // this.createRotatePointer (selectionPointers[2], 2, 'top left'),
                 // this.createRotatePointer (selectionPointers[3], 3, 'top right'),
                 this.createRotatePointer (rotatePointer, 4, 'center center'),                
-                this.createPointer (pointers[0], 1),
-                this.createPointer (pointers[1], 2),
-                this.createPointer (pointers[2], 3),
-                this.createPointer (pointers[3], 4),
+                this.createPointer (pointers[0], 1, rotate),
+                this.createPointer (pointers[1], 2, rotate),
+                this.createPointer (pointers[2], 3, rotate),
+                this.createPointer (pointers[3], 4, rotate),
                 dist < 20 ? undefined : this.createPointer (vec3.lerp([], pointers[0], pointers[1], 0.5), 11),
                 dist < 20 ? undefined : this.createPointer (vec3.lerp([], pointers[1], pointers[2], 0.5), 12),
                 dist < 20 ? undefined : this.createPointer (vec3.lerp([], pointers[2], pointers[3], 0.5), 13),

diff --git a/src/ui/view-items/SelectionToolView.js b/src/ui/view-items/SelectionToolView.js
@@ -119,8 +119,22 @@ export default class SelectionToolView extends SelectionToolEvent {
             const instance = this.$selection.get(item.id)
 
             if (instance) {
+
+                let newTransform = Transform.addTransform(item.transform, `rotateZ(${Length.deg(distAngle).round(1000)})`)
+
+                if (this.$config.get('bodyEvent').shiftKey) {
+                    const newRotateX = Transform.get(newTransform, 'rotateZ');
+
+                    if (newRotateX[0]) {
+                        const angle = newRotateX[0].value - newRotateX[0].value % this.$config.get('fixedAngle');
+
+                        newTransform = Transform.rotateZ(newTransform, Length.deg(angle));
+                    }
+
+                }
+
                 instance.reset({
-                    transform: Transform.addTransform(item.transform, `rotateZ(${Length.deg(distAngle).round(1000)})`) 
+                    transform: newTransform 
                 })
             }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html> <html> <head> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.css?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?7ce7c1c148ffcf4724ff"></script></body> </html>
		<!doctype html> <html> <head> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.css?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?77a1a846b1a58b4d98bc"></script></body> </html>