From 5cccaf34c31edbba107f922e20c16c8d00c38bc9 Mon Sep 17 00:00:00 2001
From: easylogic <cyberuls@gmail.com>
Date: Fri, 6 Dec 2019 11:51:16 +0900
Subject: [PATCH] Support grid gap editor

---
 src/csseditor/editor/index.js                 |  2 -
 src/csseditor/i18n/locales/ko_KR.js           |  6 +-
 .../ui/property-editor/GridGapEditor.js       | 77 +++++++++++++++++++
 .../ui/property-editor/GridLayoutEditor.js    |  8 +-
 src/csseditor/ui/property-editor/index.js     |  2 +
 src/csseditor/ui/property/PositionProperty.js |  3 +-
 src/csseditor/ui/view/ElementView.js          | 15 ++--
 src/csseditor/ui/view/SelectionToolView.js    |  5 ++
 .../csseditor/property/property-view.scss     |  4 +
 src/scss/csseditor/selection-view.scss        |  2 +-
 10 files changed, 103 insertions(+), 21 deletions(-)
 create mode 100644 src/csseditor/ui/property-editor/GridGapEditor.js

diff --git a/src/csseditor/editor/index.js b/src/csseditor/editor/index.js
index 0b571017e..cb1a2705a 100644
--- a/src/csseditor/editor/index.js
+++ b/src/csseditor/editor/index.js
@@ -132,8 +132,6 @@ export default class CSSEditor extends UIElement {
   }
 
   [EVENT('refreshAll')] () {
-    // this.refs.$middle.toggleClass('open-right', editor.openRightPanel);
-
     this.emit('refreshProjectList');
     this.trigger('refreshAllSelectProject');
   }
diff --git a/src/csseditor/i18n/locales/ko_KR.js b/src/csseditor/i18n/locales/ko_KR.js
index 8688e886c..e60a60ede 100644
--- a/src/csseditor/i18n/locales/ko_KR.js
+++ b/src/csseditor/i18n/locales/ko_KR.js
@@ -241,7 +241,7 @@ export default {
 
     'timeline.value.editor.value': '값',
     'timeline.value.editor.time': '시간',
-    'timeline.value.editor.timing': '시간곡선',    
+    'timeline.value.editor.timing': '타이밍 함수',    
 
     'svgfilter.popup.title': 'SVG 필터',    
 
@@ -333,7 +333,7 @@ export default {
     'flex.layout.editor.align-items': '아이템 정렬',
     'flex.layout.editor.align-content': '컨텐츠 정렬',
 
-    'flex.layout.item.property.title': '레이아웃 아이템',
+    'flex.layout.item.property.title': '플렉스 아이템 설정',
     'flex.layout.item.property.grow': '공간 비율',
     'flex.layout.item.property.shrink': '축소 비율',
     'flex.layout.item.property.basis': '초기 크기',
@@ -352,7 +352,7 @@ export default {
     'grid.box.editor.count': '반복',
     'grid.box.editor.value': '크기',
 
-    'grid.layout.item.property.title': '레이아웃 아이템',
+    'grid.layout.item.property.title': '그리드 아이템 설정',
     'grid.layout.item.property.column': '열',
     'grid.layout.item.property.row': '행',
     'grid.layout.item.property.start': '시작',
diff --git a/src/csseditor/ui/property-editor/GridGapEditor.js b/src/csseditor/ui/property-editor/GridGapEditor.js
new file mode 100644
index 000000000..3a4d63743
--- /dev/null
+++ b/src/csseditor/ui/property-editor/GridGapEditor.js
@@ -0,0 +1,77 @@
+import UIElement, { EVENT } from "../../../util/UIElement";
+import { LOAD } from "../../../util/Event";
+import { Length } from "../../../editor/unit/Length";
+import RangeEditor from "./RangeEditor";
+
+
+export default class GridGapEditor extends UIElement {
+
+    components() {
+        return {
+            RangeEditor
+        }
+    }
+
+    initState() {
+        return {
+            label: this.props.label,
+            value: this.parseValue(this.props.value)
+        }
+    }
+
+    setValue (value) {
+        this.setState({
+            list: this.parseValue(value)
+        })
+    }
+
+    parseValue (value) {
+        return Length.parse(value);
+    }
+
+    getValue () {
+        return this.state.value
+    }
+
+    modifyData() {
+        this.parent.trigger(this.props.onchange, this.props.key, this.getValue())
+    }
+
+    makeItem () {
+        return /*html*/`
+            <div class='item'>
+                <div class='value'>
+                    <RangeEditor
+                        label='${this.state.label}' 
+                        ref='$value' 
+                        key="value" 
+                        value="${this.state.value}" 
+                        units='px,em,%'
+                        onchange="changeKeyValue" />
+                </div>
+            </div>
+        `
+    }
+
+    [LOAD('$list')] () {
+        return this.makeItem();
+    }
+
+    template () {
+        return /*html*/`
+            <div class='grid-gap-editor' ref='$body' >
+                <div class='grid-gap-editor-item'>
+                    <div ref='$list'></div>
+                </div>
+            </div>
+        `
+    }
+
+
+    [EVENT('changeKeyValue')] (key, value) {
+
+        this.state.value = value;
+
+        this.modifyData();
+    }
+}
\ No newline at end of file
diff --git a/src/csseditor/ui/property-editor/GridLayoutEditor.js b/src/csseditor/ui/property-editor/GridLayoutEditor.js
index bceba679b..126514bc2 100644
--- a/src/csseditor/ui/property-editor/GridLayoutEditor.js
+++ b/src/csseditor/ui/property-editor/GridLayoutEditor.js
@@ -4,7 +4,7 @@ import { CSS_TO_STRING, STRING_TO_CSS } from "../../../util/functions/func";
 import SelectIconEditor from "./SelectIconEditor";
 import { editor } from "../../../editor/editor";
 import GridBoxEditor from "./GridBoxEditor";
-import icon from "../icon/icon";
+import GridGapEditor from "./GridGapEditor";
 
 const i18n = editor.initI18n('grid.layout.editor')
 
@@ -14,7 +14,7 @@ export default class GridLayoutEditor extends UIElement {
         return {
             SelectIconEditor,
             GridBoxEditor,
-
+            GridGapEditor,
         }
     }
 
@@ -52,8 +52,8 @@ export default class GridLayoutEditor extends UIElement {
                 />
             </div>
             <div class='grid-layout-item'>
-                <div class='label'><label>${i18n('column.gap')}</label></div>
                 <GridGapEditor 
+                    label='${i18n('column.gap')}'
                     key='grid-column-gap'
                     value="${this.state['grid-column-gap'] || ''}"
                     onchange='changeKeyValue'
@@ -69,8 +69,8 @@ export default class GridLayoutEditor extends UIElement {
                 />
             </div>            
             <div class='grid-layout-item'>
-                <div class='label'><label>${i18n('row.gap')}</label></div>
                 <GridGapEditor 
+                    label='${i18n('row.gap')}'                
                     key='grid-row-gap'
                     value="${this.state['grid-row-gap'] || ''}"
                     onchange='changeKeyValue'
diff --git a/src/csseditor/ui/property-editor/index.js b/src/csseditor/ui/property-editor/index.js
index a590821e5..db0f05a96 100644
--- a/src/csseditor/ui/property-editor/index.js
+++ b/src/csseditor/ui/property-editor/index.js
@@ -50,9 +50,11 @@ import FlexLayoutItemEditor from "./FlexLayoutItemEditor";
 import GridBoxEditor from "./GridBoxEditor";
 import GridLayoutItemEditor from "./GridLayoutItemEditor";
 import NumberInputEditor from "./NumberInputEditor";
+import GridGapEditor from "./GridGapEditor";
 
 
 export default {
+    GridGapEditor,
     NumberInputEditor,
     GridLayoutItemEditor,
     GridBoxEditor,
diff --git a/src/csseditor/ui/property/PositionProperty.js b/src/csseditor/ui/property/PositionProperty.js
index 52f2569b5..e0637425e 100644
--- a/src/csseditor/ui/property/PositionProperty.js
+++ b/src/csseditor/ui/property/PositionProperty.js
@@ -55,7 +55,6 @@ export default class PositionProperty extends BaseProperty {
       [key]: value
     })
 
-    this.emit('refreshSelectionStyleView');
-    // this.emit('change.property', key)        
+    this.emit('refreshSelectionStyleView'); 
   }
 }
diff --git a/src/csseditor/ui/view/ElementView.js b/src/csseditor/ui/view/ElementView.js
index 5644a8664..d08c7b945 100644
--- a/src/csseditor/ui/view/ElementView.js
+++ b/src/csseditor/ui/view/ElementView.js
@@ -552,9 +552,9 @@ export default class ElementView extends UIElement {
                     const {x, y, width, height} = $el.offsetRect();
     
                     it.reset({
-                        x: Length.px(x), 
-                        y: Length.px(y), 
-                        width: Length.px(width), 
+                        x: Length.px(x),
+                        y: Length.px(y),
+                        width: Length.px(width),
                         height: Length.px(height)
                     })
 
@@ -564,15 +564,12 @@ export default class ElementView extends UIElement {
 
                     // svg 객체  path, polygon 은  크기가 바뀌면 내부 path도 같이 scale up/down  이 되어야 하는데 
                     // 이건 어떻게 적용하나 ....                     
-                    this.trigger('refreshSelectionStyleView', it, true);                    
-                    
-
+                    this.trigger('refreshSelectionStyleView', it, true);
                 }
 
                 this.trigger('refreshElementBoundSize', it);
             })
 
         }
-    }
-    
-} 
\ No newline at end of file
+    }   
+}
\ No newline at end of file
diff --git a/src/csseditor/ui/view/SelectionToolView.js b/src/csseditor/ui/view/SelectionToolView.js
index 97549c12b..6504bece0 100644
--- a/src/csseditor/ui/view/SelectionToolView.js
+++ b/src/csseditor/ui/view/SelectionToolView.js
@@ -826,6 +826,11 @@ export default class SelectionToolView extends SelectionToolBind {
                     if (item.is('component')) {
                         this.emit('refreshStyleView', item);  
                     }
+
+                    if (item.hasLayout()) {
+                        this.trigger('refreshElementBoundSize', item);
+                    }
+
                 });
             }
 
diff --git a/src/scss/csseditor/property/property-view.scss b/src/scss/csseditor/property/property-view.scss
index 2058ca645..47bcf1087 100644
--- a/src/scss/csseditor/property/property-view.scss
+++ b/src/scss/csseditor/property/property-view.scss
@@ -75,6 +75,8 @@
             }
 
             label {
+              vertical-align: middle;
+              padding-right: 10px;
               svg {
                 width: 16px;
                 height: 16px;
@@ -91,6 +93,7 @@
 
               input {
                 vertical-align: middle;
+                height: 20px;
               }
             }
 
@@ -153,6 +156,7 @@
 
             .direction-buttons {
               display: flex;
+              padding-top: 2px;
 
               @each $selectDirection in normal, alternate, reverse, alternate-reverse {
                   &[data-selected-direction="#{$selectDirection}"] [data-value="#{$selectDirection}"] {
diff --git a/src/scss/csseditor/selection-view.scss b/src/scss/csseditor/selection-view.scss
index 42b4a4d16..4ceeb6848 100644
--- a/src/scss/csseditor/selection-view.scss
+++ b/src/scss/csseditor/selection-view.scss
@@ -258,7 +258,7 @@
 
           .x {
             transform: rotateX(90deg) translateZ(0px);
-            border: 3px solid $selected-color; 
+            border: 3px solid blue; 
           }
   
           .y {