refactoring...

kode-team · Jan 13, 2021 · 17158fd · 17158fd
1 parent 9d254dd
commit 17158fd
Show file tree

Hide file tree

Showing 29 changed files with 61 additions and 265 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?ec09928699a43995be5e" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?5ff4592cdb12ff6afbf7"></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?b5133ebfbad321779889" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?112aadb45dc557fae452"></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/i18n/locales/en_US.js b/src/i18n/locales/en_US.js
@@ -183,7 +183,7 @@ export default {
     'perspective.origin.property.title': 'Perspective Origin',       
 
 
-    'svg.item.property.title': 'SVG',
+    'svg.item.property.title': 'Appearance',
     'svg.item.property.isMotionPath': 'Motion Path',    
     'svg.item.property.fill': 'Fill',
     'svg.item.property.fillOpacity': 'Opacity',

diff --git a/src/i18n/locales/fr_FR.js b/src/i18n/locales/fr_FR.js
@@ -179,7 +179,7 @@ export default {
     'perspective.origin.property.title': 'Origine Perspective',       
 
 
-    'svg.item.property.title': 'SVG',
+    'svg.item.property.title': 'Appearance',
     'svg.item.property.isMotionPath': 'Chemin de mouvement',    
     'svg.item.property.fill': 'Remplissage',
     'svg.item.property.fillOpacity': 'Opacité',

diff --git a/src/i18n/locales/ko_KR.js b/src/i18n/locales/ko_KR.js
@@ -179,7 +179,7 @@ export default {
     'perspective.property.title': '투영(perspective)',
     'perspective.origin.property.title': '투영 중심점',                
 
-    'svg.item.property.title': 'SVG',    
+    'svg.item.property.title': '보이기',    
     'svg.item.property.isMotionPath': '모션 패스',
     'svg.item.property.fill': '채우기',
     'svg.item.property.fillOpacity': '투명도',

diff --git a/src/items/layers/SVGItem.js b/src/items/layers/SVGItem.js
@@ -18,7 +18,6 @@ export class SVGItem extends Layer {
       'stroke-dashoffset': 0, 
       'stroke-dasharray': ' ',
       'text-anchor': 'start',
-      'motion-based': false,
       ...obj
     });
   }
@@ -40,7 +39,6 @@ export class SVGItem extends Layer {
         'stroke-dashoffset',
         'stroke-dasharray',
         'text-anchor',
-        'motion-based'
       )
 
     }

diff --git a/src/manager/ViewportManager.js b/src/manager/ViewportManager.js
@@ -19,7 +19,7 @@ export class ViewportManager {
         this.scale = 1
         this.translate = vec3.create(),
         this.transformOrigin = vec3.create(),    
-        this.maxScale = 5; 
+        this.maxScale = 10; 
         this.minScale = 0.25;  
         this.zoomFactor = 1; 
 
@@ -116,14 +116,16 @@ export class ViewportManager {
                 width: rect.width,
                 height: rect.height
             }
-
             this.cachedViewport = rectToVerties(0, 0, this.canvasSize.width, this.canvasSize.height)
             const newTransformOrigin = vec3.multiply(
                 [],
                 this.transformOrigin,
                 [this.canvasSize.width/oldCanvasSize.width,this.canvasSize.height/oldCanvasSize.height,1 ]
             )    
-            this.setTransformOriginWithTranslate(newTransformOrigin)
+
+            this.setTransformOriginWithTranslate(newTransformOrigin)        
+
+
 
         } else {
             this.canvasSize = {

diff --git a/src/parser/PathGenerator.js b/src/parser/PathGenerator.js
@@ -280,124 +280,7 @@ export default class PathGenerator {
         case 'flip':
             mat4.scale(view, view, [-1, -1, 1]);             // 3. x, y 축 반전 시키고 
             mat4.translate(view, view, [-width, -height, 0]);     // 2. width, height 만큼 옮기고        
-            break;                         
-        case 'to move': 
-            mat4.translate(view, view, [dx, dy, 0]);        // 2. x, y 를 옮긴다. 
-            break; 
-        case 'to rotate': 
-            var halfWidth = width/2;
-            var halfHeight = height/2;
-            var angle = calculateAnglePointDistance(
-                {x: x + halfWidth, y: y}, 
-                {x: x+halfWidth, y: y + halfHeight}, 
-                {dx, dy}
-            )
-
-            mat4.translate(view, view, [halfWidth, halfHeight, 0])
-            mat4.rotate(view, view, degreeToRadian(angle), [0, 0, 1])      // z 축으로 회전 
-            mat4.translate(view, view, [-halfWidth, -halfHeight, 0])
-
-            break; 
-        case 'to skewX': 
-            var halfWidth = width/2;
-            var halfHeight = height/2;
-            var angle = -1 * calculateAnglePointDistance(
-                {x: x + halfWidth, y: y}, 
-                {x: x+halfWidth, y: y + halfHeight}, 
-                {dx, dy: 0}
-            )
-
-            mat4.translate(view, view, [halfWidth, halfHeight, 0])
-            mat4.multiply(view, view, mat4.fromValues(          // Y축 기준으로  X 축만 움직이기 
-                1, 0, 0, 0,
-                Math.tan(degreeToRadian(angle)), 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1
-            ))
-            mat4.translate(view, view, [-halfWidth, -halfHeight, 0])
-
-            break; 
-        case 'to skewY': 
-            var halfWidth = width/2;
-            var halfHeight = height/2;
-            var angle = calculateAnglePointDistance(
-                {x: x, y: y + halfHeight}, 
-                {x: x+halfWidth, y: y + halfHeight}, 
-                {dx: 0, dy}
-            )
-
-            mat4.translate(view, view, [halfWidth, halfHeight, 0])
-            mat4.multiply(view, view, mat4.fromValues(          // X축 기준으로  Y 축만 움직이기 
-                1, Math.tan(degreeToRadian(angle)), 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1
-            ))
-            mat4.translate(view, view, [-halfWidth, -halfHeight, 0])
-
-            break;             
-        case 'to bottom right':
-
-            var sx =  div(width + dx, width);
-            var sy =  div(height + dy, height);
-
-            mat4.scale(view, view, [sx, sy, 1]);            // 2. x, y 축 확대한다. 
-            break; 
-        case 'to right':
-
-            var sx =  div(width + dx, width)
-
-            mat4.scale(view, view, [sx, 1, 1]);             // 2. x축 확대한다. 
-            break;             
-        case 'to bottom':
-            var sy =  div(height + dy, height)
-
-            mat4.scale(view, view, [1, sy, 1]);             // 2. y축 확대한다. 
-            break;             
-
-        case 'to top right':
-
-            var sx =  div(width + dx, width)
-            var sy =  div(height - dy, height)
-
-            mat4.translate(view, view, [0, dy, 0]);         // 3. y 축을 이동한다. 
-            mat4.scale(view, view, [sx, sy, 1]);            // 2. x, y 축 확대한다.
-
-            break;             
-        case 'to top left':
-
-            var sx =  div(width - dx, width)
-            var sy =  div(height - dy, height)
-
-            mat4.translate(view, view, [dx, dy, 0]);         // 3. y 축을 이동한다. 
-            mat4.scale(view, view, [sx, sy, 1]);            // 2. x, y 축 확대한다.
-
-            break;    
-        case 'to left':
-
-            var sx =  div(width - dx, width)
-
-            mat4.translate(view, view, [dx, 0, 0]);         // 3. y 축을 이동한다. 
-            mat4.scale(view, view, [sx, 1, 1]);            // 2. x, y 축 확대한다.
-
-            break;                      
-        case 'to top':
-
-            var sy =  div(height - dy, height)
-
-            mat4.translate(view, view, [0, dy, 0]);         // 3. y 축을 이동한다. 
-            mat4.scale(view, view, [1, sy, 1]);            // 2. x, y 축 확대한다.
-
-            break;          
-        case 'to bottom left':
-
-            var sx =  div(width - dx, width)
-            var sy =  div(height + dy, height)
-
-            mat4.translate(view, view, [dx, 0, 0]);         // 3. y 축을 이동한다. 
-            mat4.scale(view, view, [sx, sy, 1]);            // 2. x, y 축 확대한다.
-
-            break;                                     
+            break;                               
         }
 
         mat4.translate(view, view, [-x, -y, 0]);        // 1. 원점으로 맞추고 

diff --git a/src/renderer/HTMLRenderer/SVGPathRender.js b/src/renderer/HTMLRenderer/SVGPathRender.js
@@ -31,12 +31,9 @@ export default class SVGPathRender extends SVGItemRender {
 
 
   render (item) {
-    var p = {'motion-based': item['motion-based'] }
-
     return /*html*/`
         <svg 
-          class='element-item path ${OBJECT_TO_CLASS(p)}'  
-          motion-based="${item['motion-based']}"
+          class='element-item path'  
           xmlns="http://www.w3.org/2000/svg"
           data-id="${item.id}"
         >

diff --git a/src/renderer/JSONRenderer/SVGItemRender.js b/src/renderer/JSONRenderer/SVGItemRender.js
@@ -17,7 +17,6 @@ export default class SVGItemRender extends LayerRender {
               'stroke-dashoffset',
               'stroke-dasharray',
               'text-anchor',
-              'motion-based'
             )
 
           }        

diff --git a/src/renderer/SVGRenderer/SVGPathRender.js b/src/renderer/SVGRenderer/SVGPathRender.js
@@ -36,8 +36,7 @@ export default class SVGPathRender extends SVGItemRender {
     return this.wrappedRender(item, () => {
       return /*html*/`
         <path ${OBJECT_TO_PROPERTY({
-          'class': 'svg-path-item',
-          'motion-based': item['motion-based'],          
+          'class': 'svg-path-item', 
           d, 
           filter: this.toFilterValue(item),
           fill: this.toFillValue(item),

diff --git a/src/scss/csseditor/path-editor-view.scss b/src/scss/csseditor/path-editor-view.scss
@@ -12,8 +12,8 @@
     .segment-box {
         pointer-events:none;
         position: absolute;
-        border:0.5px solid rgba(62, 168, 255, 0.9);
-        background-color:rgba(107, 188, 255, 0.5);
+        border:0.5px solid rgba(92, 63, 255, 0.9);
+        background-color:rgba(158, 136, 255, 0.2);
         box-sizing:border-box;
 
         left:-10000px;

diff --git a/src/scss/csseditor/property/alignment.scss b/src/scss/csseditor/property/alignment.scss
@@ -1,6 +1,6 @@
 .alignment-item {
     display: grid; 
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(6, 1fr);
     grid-column-gap: 2px;
     height: 26px;
 

diff --git a/src/scss/csseditor/property/property-view.scss b/src/scss/csseditor/property/property-view.scss
@@ -1,5 +1,5 @@
 .property {
-  padding: 10px 10px;
+  padding: 5px 10px;
   border-top: 1px solid var(--property-border-color);  
   background-color: var(--background-color);
   color: var(--font-color); 

diff --git a/src/scss/csseditor/view.scss b/src/scss/csseditor/view.scss
@@ -42,10 +42,6 @@ $editor-canvas-background-color: rgba(236, 236, 236, 0.3);
       &[data-mode='ADD'] {
         cursor: crosshair;
       }
-
-      .motion-based {
-        z-index: 100000000;
-      }
     }
   }
 
@@ -149,11 +145,7 @@ $editor-canvas-background-color: rgba(236, 236, 236, 0.3);
     &:hover {
 
       &:not(.selected) {
-        // outline: 1px double rgb(64, 64, 252);
-
-        path {
-          outline: 1px solid rgb(64, 64, 252);
-        }        
+        outline: 1px double rgb(64, 64, 252);
       }
     }
 

diff --git a/src/ui/control/Inspector.js b/src/ui/control/Inspector.js
@@ -42,7 +42,7 @@ export default class Inspector extends UIElement {
                 <!-- Default Property --> 
                 <PositionProperty />
                 <SizeProperty /> 
-                <BackgroundColorProperty />
+                <AppearanceProperty />
                 
                 <!-- SVG Item --> 
                 <SVGItemProperty />              

diff --git a/src/ui/property-editor/OffsetPathListEditor.js b/src/ui/property-editor/OffsetPathListEditor.js
@@ -57,7 +57,6 @@ export default class OffsetPathListEditor extends UIElement {
         if (project) {
             project.allLayers
               .filter(it => it.is('svg-path', 'svg-polygon'))
-              .filter(it => it['motion-based'])
               .forEach(it => {
                 paths[it.id] = it 
               });    

diff --git a/src/ui/property/AlignmentProperty.js b/src/ui/property/AlignmentProperty.js
@@ -20,7 +20,7 @@ export default class AlignmentProperty extends BaseProperty {
 
   getBody() {
     return /*html*/`
-      <div class="alignment-item" ref="$positionItem">
+      <div class="alignment-item">
         <LeftAlign />
         <CenterAlign />
         <RightAlign />

diff --git a/src/ui/property/BackgroundColorProperty.js → src/ui/property/AppearanceProperty.js b/src/ui/property/BackgroundColorProperty.js → src/ui/property/AppearanceProperty.js
@@ -9,16 +9,12 @@ const overflow_list = [
   'auto'
 ]
 
-export default class BackgroundColorProperty extends BaseProperty {
+export default class AppearanceProperty extends BaseProperty {
 
   getTitle() {
     return this.$i18n('background.color.property.title');
   }
 
-  isHideHeader() {
-    return true; 
-  }
-
   getOverflowList () {
     return overflow_list.map(it => {
       return `${it}:${this.$i18n(`background.color.property.overflow.${it}`)}`
@@ -161,6 +157,6 @@ export default class BackgroundColorProperty extends BaseProperty {
   }
 
   [EVENT('refreshSelection')]() {
-    this.refresh();
+    this.refreshShow(['artboard', 'rect', 'circle', 'image', 'video', 'text']);
   }
 }
diff --git a/src/ui/property/BackgroundImageProperty.js b/src/ui/property/BackgroundImageProperty.js
@@ -58,7 +58,7 @@ export default class BackgroundImageProperty extends BaseProperty {
   }
 
   [EVENT('refreshSelection')]() {
-    this.refreshShowIsNot(['project']);
+    this.refreshShow(['artboard', 'rect', 'circle', 'text', 'image', 'video']);
   }
 
   refresh() {
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?ec09928699a43995be5e" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?5ff4592cdb12ff6afbf7"></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?b5133ebfbad321779889" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?112aadb45dc557fae452"></script></body> </html>