fixed guide line view

docs/bundle.css

@@ -3159,9 +3159,26 @@ html, body {
   position: absolute;
   left: 0px;
   top: 0px;
-  right: 0px;
-  bottom: 0px;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  overflow: visible;
+}
+.csseditor .guide-line-view line {
+  stroke-width: 1;
+}
+.csseditor .guide-line-view line.base-line {
+  stroke: #fc554f;
+}
+.csseditor .guide-line-view line.base-rect {
+  stroke: #435cb5;
+}
+.csseditor .guide-line-view text {
+  font-size: 11px;
+  fill: #fc554f;
+}
+.csseditor .guide-line-view text.text-center {
+  text-anchor: middle;
 }
 .csseditor .property {
   border-bottom: 1px solid black;
@@ -12279,9 +12296,26 @@ html, body {
   position: absolute;
   left: 0px;
   top: 0px;
-  right: 0px;
-  bottom: 0px;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  overflow: visible;
+}
+.csseditor[data-theme=light] .guide-line-view line {
+  stroke-width: 1;
+}
+.csseditor[data-theme=light] .guide-line-view line.base-line {
+  stroke: #fc554f;
+}
+.csseditor[data-theme=light] .guide-line-view line.base-rect {
+  stroke: #435cb5;
+}
+.csseditor[data-theme=light] .guide-line-view text {
+  font-size: 11px;
+  fill: #fc554f;
+}
+.csseditor[data-theme=light] .guide-line-view text.text-center {
+  text-anchor: middle;
 }
 .csseditor[data-theme=light] .property {
   border-bottom: 1px solid black;

src/csseditor/ui/control/Inspector.js

@@ -90,7 +90,7 @@ export default class Inspector extends UIElement {
                 <TextClipProperty />
                 <!-- <RootVariableProperty /> -->
                 <!-- <VariableProperty /> -->
-                <SelectorProperty />
+
 
                 <div class='empty'></div>                
               </div>              
@@ -102,6 +102,7 @@ export default class Inspector extends UIElement {
                 <TransitionProperty />                            
                 <AnimationProperty />
                 <KeyframeProperty />    
+                <SelectorProperty />                              
                 <div class='empty'></div>                
               </div>                        
               <div class='tab-content' data-value='4'>

src/csseditor/ui/view/GuideLineView.js

@@ -1,80 +1,173 @@
 import UIElement, { EVENT } from "../../../util/UIElement";
-import { combineKeyArray, isNotUndefined, keyEach, CSS_TO_STRING } from "../../../util/functions/func";
+import { isNotUndefined, OBJECT_TO_PROPERTY } from "../../../util/functions/func";
 import { Length } from "../../../editor/unit/Length";
 import { Layer } from "../../../editor/items/Layer";
+import { LOAD, BIND } from "../../../util/Event";
+
+
+const text = (x, y, text = '', className = 'base-line') => {
+    return /*html*/`<text x="${x}" y="${y}" class='${className}'>${text}</text>`
+}
+
+const line = (x1, y1, x2, y2, className = 'base-line') => {
+    return /*html*/`<line ${OBJECT_TO_PROPERTY({x1, y1, x2, y2 })} class='${className}' />`
+}
+
+const hLine = (images, startX, minY, maxY) => {
+
+    if (Math.abs(minY - maxY) === 0) return; 
+
+
+    // top 
+    images.push(line(startX-2,   minY,             startX+2,    minY))
+    images.push(line(startX,     minY,             startX,      maxY)) 
+    images.push(line(startX-2,   maxY,             startX+2,    maxY))
+
+    /* text */ 
+    var centerY  = (maxY + minY)/2;
+    var centerHeight = Math.floor(Math.abs(maxY - minY))                
+    images.push(text(startX+2, centerY, centerHeight))
+}
+
+const vLine = (images, startY, minX, maxX) => {
+
+    if (Math.abs(minX - maxX) === 0) return; 
+
+    // top 
+    images.push(line(minX, startY-2,  minX,  startY+2))
+    images.push(line(minX, startY,  maxX,   startY)) 
+    images.push(line(maxX, startY-2, maxX,   startY+2))
+
+    /* text */ 
+    var centerX  = (maxX + minX)/2;
+    var centerWidth = Math.floor(Math.abs(maxX - minX))                
+    images.push(text(centerX, startY - 2, centerWidth, 'text-center'))
+}
 
 /**
  * 객체와의 거리의 가이드 라인을 그려주는 컴포넌트
  */
 export default class GuideLineView extends UIElement {
 
     template() {
-        return `<div class='guide-line-view' ></div>`
+        return `<svg class='guide-line-view' width="100%" height="100%" ></svg>`
     }
 
-    createBackgroundImage (color, x, y, width, height) {
+    initState() {
         return {
-            'background-image': `linear-gradient(to right, ${color}, ${color})`,
-            'background-size' : `${width} ${height}`,
-            'background-position' : `${x} ${y}`,
-            'background-repeat': 'no-repeat'
+            list: []
+        }
+    }
+
+    [BIND('$el')] () {
+        return {
+            html: this.createGuideLine(this.state.list)
         }
     }
 
     createGuideLine (list) {
 
-        const lineWidth = Length.px(1); 
-        const baseLineColor = 'rgb(180, 199, 254)'
-        const baseRectColor = 'rgb(244, 140, 255)'
-
         var images = []
-    
+
         list.forEach(it => {
 
             var target = it.B; 
 
-            if (isNotUndefined(it.ax)) {
-
-                images.push(this.createBackgroundImage(baseRectColor, Length.px(it.bx), it.A.screenY, lineWidth, it.A.height))
-
-
-                if (target instanceof Layer) {
-                    images.push(this.createBackgroundImage(baseRectColor, Length.px(it.bx), target.screenY, lineWidth, target.height))
-                }
-
+            if (isNotUndefined(it.ax)) {  // 세로 가이드 정의  (x축 좌표 찾기)
+
                 var minY = Length.min(target.screenY, it.A.screenY);
                 var maxY = Length.max(target.screenY2, it.A.screenY2);
+
+
+                // it.bx : x 좌표 
+                // minY : container 위치 
+                // maxY : container 위치 
+                // it.A.screenY : 객체 위치 
+                // it.A.screenY2 : 객체 위치 
+                var startX = it.bx; 
+
+                if (it.A.screenY.value > it.B.screenY2.value) {
+                    hLine(images, startX, it.B.screenY2.value, it.A.screenY.value);
+                } else {
+                    hLine(images, startX, minY.value, it.A.screenY.value);
+                }
+
+                if (it.A.screenX.value - target.screenX.value > 0 
+                    && it.A.screenY.value <= it.B.screenY2.value 
+                    && it.A.screenY.value >= it.B.screenY.value 
+                ) {
+                    var centerY = (it.A.screenY.value + it.A.screenY2.value) /2;                    
+                    vLine(images, centerY, target.screenX.value, it.A.screenX.value);
+                }
+
+                if (target.screenX2.value - it.A.screenX2.value > 0
+                    && it.A.screenY.value <= it.B.screenY2.value 
+                    && it.A.screenY.value >= it.B.screenY.value 
+                ) {
+                    var centerY = (it.A.screenY.value + it.A.screenY2.value) /2;
+                    vLine(images, centerY, it.A.screenX2.value, target.screenX2.value);
+                }                
+
+                if (it.A.screenY2.value < it.B.screenY.value) {
+                    hLine(images, startX, it.A.screenY2.value, it.B.screenY.value);
+                } else {
+                    hLine(images, startX, it.A.screenY2.value, maxY.value);
+                }
 
-                images.push(this.createBackgroundImage(baseLineColor, Length.px(it.bx), minY, lineWidth, Length.px(maxY.value - minY.value)))            
-
-            } else {
-                images.push(this.createBackgroundImage(baseRectColor, it.A.screenX, Length.px(it.by), it.A.width, lineWidth))            
-
-                var minX = Length.min(target.screenX, it.A.screenX);
+            } else {            // 가로 가이드 정의 
+
                 var maxX = Length.max(target.screenX2, it.A.screenX2);
+
+                var startY = it.by; 
 
-                images.push(this.createBackgroundImage(baseLineColor, minX, Length.px(it.by), Length.px(maxX.value - minX.value), lineWidth))            
+
+                if (it.A.screenX.value > it.B.screenX2.value) {
+                    vLine(images, startY, it.B.screenX2.value, it.A.screenX.value);
+                } else {
+                    vLine(images, startY, it.A.screenX.value, it.B.screenX2.value);
+                }
+
+
+
+                if (it.A.screenY.value - target.screenY.value > 0
+                    && it.A.screenX.value <= it.B.screenX2.value 
+                    && it.A.screenX.value >= it.B.screenX.value 
+                ) {
+                    var centerX = (it.A.screenX.value + it.A.screenX2.value) /2;
+                    hLine(images, centerX, it.B.screenY.value, it.A.screenY.value);
+                }
+
+                if (target.screenY2.value - it.A.screenY2.value > 0
+                    && it.A.screenX.value <= it.B.screenX2.value 
+                    && it.A.screenX.value >= it.B.screenX.value 
+                ) {
+                    var centerX = (it.A.screenX.value + it.A.screenX2.value) /2;
+                    hLine(images, centerX, it.A.screenY2.value, it.B.screenY2.value);
+                }                
+
+
+                if (it.A.screenX2.value < it.B.screenX.value) {
+                    vLine(images, startY, it.A.screenX2.value, it.B.screenX.value);
+                } else {
+                    vLine(images, startY, it.A.screenX2.value, maxX.value);
+                }
             }
 
         })
 
-        var results = {}
-        images.forEach(item => {
-            keyEach(item, (key, value) => {
-                if (!results[key]) results[key] = []
-                results[key].push(value);
-            })
-        })
 
-        return combineKeyArray(results);
+        return images.join('');
     }
 
     removeGuideLine() {
         this.$el.cssText('');
     }
 
     setGuideLine (list) {
-        this.$el.cssText(CSS_TO_STRING(this.createGuideLine(list)));
+        this.setState({
+            list
+        })
+        // this.$el.cssText(CSS_TO_STRING(this.createGuideLine(list)));
     }
 
     [EVENT('removeGuideLine')] () {

src/csseditor/ui/view/GuideView.js

@@ -154,6 +154,7 @@ export default class GuideView {
     }
 
     compareX (A, B, dist = MAX_DIST) {
+
         var AX = [A.screenX.value, A.centerX.value, A.screenX2.value]
         var BX = [B.screenX.value, B.centerX.value, B.screenX2.value]
 
@@ -319,7 +320,7 @@ export default class GuideView {
         if (isNotUndefined(it.ax)) {
             var distX = Math.round(this.rect.width.value / 2 * it.source);
             var minX = it.bx - distX;             
-            this.rect.x.set(minX);            
+            this.rect.x.set(minX);       
         } else if (isNotUndefined(it.ay)) {
             var distY = Math.round(this.rect.height.value / 2 * it.source);
             var minY = it.by - distY;             

src/csseditor/ui/view/SelectionToolView.js

@@ -1003,12 +1003,9 @@ export default class SelectionToolView extends UIElement {
     }
 
     calculateWorldPosition (item) {
-        var x = Length.px(item.x || 0);
-        var y = Length.px(item.y || 0);
-
         return {
-            x: Length.px(x.value * editor.scale),
-            y: Length.px(y.value * editor.scale),
+            x: Length.px(item.screenX.value * editor.scale),
+            y: Length.px(item.screenY.value * editor.scale),
             width: Length.px(item.width.value  *  editor.scale),
             height: Length.px(item.height.value  * editor.scale),
             transform: item.transform

src/editor/image-resource/SVGLinearGradient.js

@@ -30,6 +30,8 @@ export class SVGLinearGradient extends SVGGradient {
 
   toString() {
 
+    // linear-gradient(x1 y1 x2 y2 spreadMethod, ....colors)
+
     if(this.colorsteps.length === 0) return '';    
 
     var colorString = this.getColorString();

src/scss/csseditor/selection-view.scss

@@ -535,7 +535,29 @@
     position: absolute;
     left: 0px;
     top: 0px;
-    right: 0px;
-    bottom: 0px;
+    width: 100%;
+    height: 100%;
     pointer-events:none;
+    overflow: visible;
+
+    line {
+      stroke-width: 1;
+
+      &.base-line {
+        stroke: $guide-line-color;
+      }
+
+      &.base-rect  {
+        stroke: $guide-line-rect-color;
+      }
+    }
+
+    text {
+      font-size: 11px;
+      fill: $guide-line-color;
+
+      &.text-center {
+        text-anchor: middle;
+      }
+    }
   }

src/scss/themes/csseditor/dark.scss

@@ -108,4 +108,9 @@ $timeline-border-color: $border-color;
 $timeline-gauge-background-color: #ee4b66;
 $timeline-offset-line-color: #ee4b66;
 // $timeline-offset-line-color: #497594;
-$timeline-row-selected-color: rgba(#435cb5, 0.4);
+$timeline-row-selected-color: rgba(#435cb5, 0.4);
+
+
+// guide line 
+$guide-line-color: $selected-color;
+$guide-line-rect-color: #435cb5;

src/util/functions/func.js

@@ -133,7 +133,13 @@ const HTML_TAG = {
     'image': true,
     'input': true,
     'br': true,
-    'path': true 
+    'path': true,
+    'line': true,
+    'circle': true,
+    'rect': true,
+    'polygon': true,
+    'polyline': true,
+    'use': true
 }