support to lock image aspect ratio

kode-team · Mar 10, 2021 · d080fcb · d080fcb
1 parent 0e0b62b
commit d080fcb
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 39 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/dist/main.css b/dist/main.css
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?96c6db095fe7b905cc8d" 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?9d4775e12da8761adefb"></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?b8ae243bfe1eaa219e07"></script></body> </html> 
diff --git a/docs/main.css b/docs/main.css
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/src/scss/designeditor/selection-view.scss b/src/scss/designeditor/selection-view.scss
@@ -20,6 +20,77 @@
         display: none;
       }
     }
+
+    &[data-has-shift="true"] {
+
+      .pointer-rect {
+
+        .pointer {
+          background-color: transparent; 
+        }          
+
+        .pointer[data-number="11"], 
+        .pointer[data-number="12"], 
+        .pointer[data-number="13"], 
+        .pointer[data-number="14"] {
+          display: none;
+        }
+      }
+    }    
+
+    &.one-selection-view {
+      &[data-has-shift="true"] {
+
+        .pointer-rect {
+
+          .pointer[data-number="1"] {
+            border-top-width: 0px;
+            border-left-width: 0px;
+          }
+
+          .pointer[data-number="2"] {
+            border-right-width: 0px;
+            border-top-width: 0px;
+          } 
+          .pointer[data-number="3"] {
+            border-right-width: 0px;
+            border-bottom-width: 0px;          
+          }
+          .pointer[data-number="4"] {
+            border-left-width: 0px;
+            border-bottom-width: 0px;
+          }
+
+        }
+      }
+    }
+
+    &.group-selection-view {
+      &[data-has-shift="true"] {
+
+        .pointer-rect {
+
+          .pointer[data-number="1"] {
+            border-bottom-width: 0px;
+            border-right-width: 0px;
+          }
+
+          .pointer[data-number="2"] {
+            border-left-width: 0px;
+            border-bottom-width: 0px;
+          } 
+          .pointer[data-number="3"] {
+            border-left-width: 0px;
+            border-top-width: 0px;          
+          }
+          .pointer[data-number="4"] {
+            border-right-width: 0px;
+            border-top-width: 0px;
+          }
+        }
+      }
+    }
+
   }
 
   .pointer-rect {
@@ -42,13 +113,7 @@
       background-color: white; 
       box-sizing: border-box;
       border: 0.5px solid var(--selection-tool-border-color);
-      // border-radius: 100%;
-      // cursor: pointer;
       pointer-events: all;
-      // &[data-number="1"] { background-color: rgb(255, 185, 185); }
-      // &[data-number="2"] { background-color: rgb(255, 0, 0); }
-      // &[data-number="3"] { background-color: rgb(115, 255, 0); }
-      // &[data-number="4"] { background-color: rgb(75, 62, 255); }
       &[data-number="5"] { 
         border-radius: 100%; 
         background-color: var(--selected-color);
@@ -57,18 +122,6 @@
         height: 5px;
         z-index: 1000;
       }
-
-      // &:before {
-      //   content: '';
-      //   position: absolute;
-      //   left: 50%;
-      //   top: 50%;
-      //   width: 5px;
-      //   height: 5px;
-      //   transform: translate(-50%, -50%);
-      //   border-radius: 50%;
-      //   background-color: var(--selection-tool-border-color);
-      // }
     }
 
     .size-pointer {

diff --git a/src/ui/view-items/GroupSelectionToolView.js b/src/ui/view-items/GroupSelectionToolView.js
@@ -55,11 +55,23 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
 
     template() {
         return /*html*/`
-    <div class='selection-view group-selection-view' ref='$selectionView'  style='display:none' >
-        <div class='pointer-rect' ref='$pointerRect'></div>        
-    </div>`
+            <div class='selection-view group-selection-view' ref='$selectionView'  style='display:none' >
+                <div class='pointer-rect' ref='$pointerRect'></div>        
+            </div>
+        `
+    }
+
+
+    [EVENT('keymap.keydown')] (e) {
+        if (e.shiftKey) {
+            this.$el.attr('data-has-shift', 'true')
+        }
     }
 
+    [EVENT('keymap.keyup')] (e) {
+        this.$el.attr('data-has-shift', '')
+    }        
+
     toggleEditingPath (isEditingPath) {
         this.refs.$selectionView.toggleClass('editing-path', isEditingPath);
     }
@@ -332,7 +344,11 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
 
         const groupItem = this.cachedGroupItem;
 
-        const [realDx, realDy] = this.calculateRealDist(groupItem, 2, distVector);
+        let [realDx, realDy] = this.calculateRealDist(groupItem, 2, distVector);
+
+        if (this.$config.get('bodyEvent').shiftKey) {
+            realDy = realDx * groupItem.height/groupItem.width;
+        }                
 
         // 변형되는 넓이 높이 구하기 
         const newWidth = groupItem.width + realDx;
@@ -345,7 +361,11 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
     moveTopRightVertext (distVector) {
         const groupItem = this.cachedGroupItem;
 
-        const [realDx, realDy] = this.calculateRealDist(groupItem, 1, distVector);
+        let [realDx, realDy] = this.calculateRealDist(groupItem, 1, distVector);
+
+        if (this.$config.get('bodyEvent').shiftKey) {
+            realDy = -(realDx * groupItem.height/groupItem.width);
+        }                
 
         // 변형되는 넓이 높이 구하기 
         const newWidth = groupItem.width + realDx;
@@ -410,7 +430,11 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
 
         const groupItem = this.cachedGroupItem;
 
-        const [realDx, realDy] = this.calculateRealDist(groupItem, 0, distVector);
+        let [realDx, realDy] = this.calculateRealDist(groupItem, 0, distVector);
+
+        if (this.$config.get('bodyEvent').shiftKey) {
+            realDy = realDx * groupItem.height/groupItem.width;
+        }
 
         // 변형되는 넓이 높이 구하기 
         const newWidth = groupItem.width - realDx;
@@ -453,7 +477,11 @@ export default class GroupSelectionToolView extends SelectionToolEvent {
 
         const groupItem = this.cachedGroupItem;
 
-        const [realDx, realDy] = this.calculateRealDist(groupItem, 3, distVector);
+        let [realDx, realDy] = this.calculateRealDist(groupItem, 3, distVector);
+
+        if (this.$config.get('bodyEvent').shiftKey) {
+            realDy = -(realDx * groupItem.height/groupItem.width);
+        }          
 
         // 변형되는 넓이 높이 구하기 
         const newWidth = groupItem.width - realDx;

diff --git a/src/ui/view-items/SelectionToolView.js b/src/ui/view-items/SelectionToolView.js
@@ -1,5 +1,5 @@
 import UIElement, { EVENT } from "@core/UIElement";
-import { POINTERSTART, POINTEROVER, POINTEROUT, MOVE, END, IF, PREVENT } from "@core/Event";
+import { POINTERSTART, POINTEROVER, POINTEROUT, MOVE, END, IF, PREVENT, KEYDOWN } from "@core/Event";
 import { Length } from "@unit/Length";
 import { clone} from "@core/functions/func";
 import { mat4, vec3 } from "gl-matrix";
@@ -63,11 +63,22 @@ export default class SelectionToolView extends SelectionToolEvent {
 
     template() {
         return /*html*/`
-    <div class='selection-view one-selection-view' ref='$selectionView' style='display:none' >
-        <div class='pointer-rect' ref='$pointerRect'></div>
-    </div>`
+            <div class='selection-view one-selection-view' ref='$selectionView' style='display:none' >
+                <div class='pointer-rect' ref='$pointerRect'></div>
+            </div>
+        `
     }
 
+    [EVENT('keymap.keydown')] (e) {
+        if (e.shiftKey) {
+            this.$el.attr('data-has-shift', 'true')
+        }
+    }
+
+    [EVENT('keymap.keyup')] (e) {
+        this.$el.attr('data-has-shift', '')
+    }    
+
     toggleEditingPath (isEditingPath) {
         this.$el.toggleClass('editing-path', isEditingPath);
     }
@@ -286,7 +297,7 @@ export default class SelectionToolView extends SelectionToolEvent {
                 let [realDx, realDy] = this.calculateRealDist(item, 2, distVector)
 
                 if (this.$config.get('bodyEvent').shiftKey) {
-                    realDy = realDx;
+                    realDy = realDx * item.height/item.width;
                 }                
 
                 // 변형되는 넓이 높이 구하기 
@@ -308,7 +319,7 @@ export default class SelectionToolView extends SelectionToolEvent {
             let [realDx, realDy] = this.calculateRealDist(item, 1, distVector)
 
             if (this.$config.get('bodyEvent').shiftKey) {
-                realDy = -realDx;
+                realDy = -(realDx * item.height/item.width);
             }
 
             // 변형되는 넓이 높이 구하기 
@@ -326,7 +337,7 @@ export default class SelectionToolView extends SelectionToolEvent {
             let [realDx, realDy] = this.calculateRealDist(item, 0, distVector)
 
             if (this.$config.get('bodyEvent').shiftKey) {
-                realDy = realDx;
+                realDy = realDx * item.height/item.width;
             }
 
             // 변형되는 넓이 높이 구하기 
@@ -405,7 +416,7 @@ export default class SelectionToolView extends SelectionToolEvent {
             let [realDx, realDy] = this.calculateRealDist(item, 3, distVector)
 
             if (this.$config.get('bodyEvent').shiftKey) {
-                realDy = -realDx;
+                realDy = -(realDx * item.height/item.width);
             }            
 
             // 변형되는 넓이 높이 구하기
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?96c6db095fe7b905cc8d" 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?9d4775e12da8761adefb"></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?b8ae243bfe1eaa219e07"></script></body> </html>