support to snap in LayerAppendView

kode-team · Dec 12, 2020 · 67f122d · 67f122d
1 parent aa32375
commit 67f122d
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 75 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> <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.b135e85657d1655edc56.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.5c48347fd36f092f448d.js"></script></body> </html> 
+<!doctype html> <html> <head> <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.cb6848d5f7a9a936e342.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.b47a51015045c6a9b0f6.js"></script></body> </html> 
diff --git a/docs/main.5c48347fd36f092f448d.js → docs/main.b47a51015045c6a9b0f6.js b/docs/main.5c48347fd36f092f448d.js → docs/main.b47a51015045c6a9b0f6.js
diff --git a/docs/main.b135e85657d1655edc56.css → docs/main.cb6848d5f7a9a936e342.css b/docs/main.b135e85657d1655edc56.css → docs/main.cb6848d5f7a9a936e342.css
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/src/commands/newComponent.js b/src/commands/newComponent.js
@@ -42,6 +42,16 @@ export default function newComponent (editor, itemType, obj, isSelected = true)
             content: 'Insert a text',
             'font-size': Length.px(30)
         }        
+    } else if (itemType === 'rect') {
+        obj = {
+            ...obj,
+            border: 'border:1px solid black',
+        }        
+    } else if (itemType === 'circle') {
+        obj = {
+            ...obj,
+            border: 'border:1px solid black',
+        }                
     }
 
     editor.command('addLayer', `add layer - ${itemType}`, editor.createItem({

diff --git a/src/commands/updatePathItem.js b/src/commands/updatePathItem.js
@@ -17,24 +17,36 @@ export default {
     execute: function (editor, pathObject) {
         const current = editor.selection.current;
         if (current) {
-            const newPath = current.invertPath(pathObject.d);
-            const bbox = newPath.getBBox();
-
-            const newX = current.offsetX.value + bbox[0][0];
-            const newY = current.offsetY.value + bbox[0][1];
-            const newWidth = vec3.distance(bbox[1], bbox[0]);
-            const newHeight = vec3.distance(bbox[3], bbox[0]);
-
-            newPath.translate(-bbox[0][0], -bbox[0][1])
-
-            // d 속성 (path 문자열) 을 설정한다. 
-            editor.emit('setAttribute', {
-                d: newPath.d,
-                x: Length.px(newX),
-                y: Length.px(newY),
-                width: Length.px(newWidth),
-                height: Length.px(newHeight)
-            })
+
+            if (pathObject.box === 'box') {
+                const newPath = current.invertPath(pathObject.d);
+
+                // d 속성 (path 문자열) 을 설정한다. 
+                editor.emit('setAttribute', {
+                    d: newPath.d,
+                })
+            } else {
+
+                const newPath = current.invertPath(pathObject.d);
+                const bbox = newPath.getBBox();
+
+                const newX = current.offsetX.value + bbox[0][0];
+                const newY = current.offsetY.value + bbox[0][1];
+                const newWidth = vec3.distance(bbox[1], bbox[0]);
+                const newHeight = vec3.distance(bbox[3], bbox[0]);
+
+                newPath.translate(-bbox[0][0], -bbox[0][1])
+
+                // d 속성 (path 문자열) 을 설정한다. 
+                editor.emit('setAttribute', {
+                    d: newPath.d,
+                    x: Length.px(newX),
+                    y: Length.px(newY),
+                    width: Length.px(newWidth),
+                    height: Length.px(newHeight)
+                })
+            }
+
         }
 
 

diff --git a/src/manager/SnapManager.js b/src/manager/SnapManager.js
@@ -49,7 +49,7 @@ export class SnapManager {
 
 
     convertMatrix (item) {
-        const verties  = item.guideVerties();
+        const verties  = this.convertGuideAndPathMatrix(item);
         const xList = verties.map(it => it[0]) ;
         const yList = verties.map(it => it[1]) ;
 
@@ -177,17 +177,6 @@ export class SnapManager {
         })
 
         return guides;
-        // sourceVerties 는 항상 최신 좌표를 지정한다. 
-        // guide 라인을 찾을 대상을 맞춰보자. 
-
-        // 1. layer 
-        // 레이어와 verties 를 비교할 때 나타낼 수 있는 표시 
-        // 각 레이어의 verties 와 source verties 을 비교한다. 
-        // vertext 끼리 비교하는거 하나 
-        // 소스 레이어의 vector 와  target 레이어의 vector 를 비교 
-        // 느슷한 관계를 표시. 
-        // source verties 의 점과  target 레이어의 vector 비교 
-        // 2. artboard 
     }
 
 }
diff --git a/src/renderer/HTMLRenderer/SVGTextPathRender.js b/src/renderer/HTMLRenderer/SVGTextPathRender.js
@@ -63,19 +63,18 @@ export default class SVGTextPathRender extends SVGItemRender {
 
   render (item) {
     var {id, textLength, lengthAdjust, startOffset} = item; 
-
+    const pathId = `#${this.toPathId(item)}`
     return /*html*/`
       <svg class='element-item textpath' data-id="${id}">
         ${this.toDefString(item)}
-          <text ${OBJECT_TO_PROPERTY({
-            'class': 'svg-textpath-item'
-          })} >
-            <textPath ${OBJECT_TO_PROPERTY({
-              'xlink:href' :`#${this.toPathId(item)}`,
-              textLength,
-              lengthAdjust,
-              startOffset
-            })} >${item.text}</textPath>
+        <text class="svg-textpath-item">
+          <textPath ${OBJECT_TO_PROPERTY({
+            'xlink:href' : pathId,
+            textLength,
+            lengthAdjust,
+            startOffset
+          })} >${item.text}</textPath>
+          <use href="${pathId}" />
         </text>
       </svg>
     `

diff --git a/src/scss/csseditor/layer-add-view.scss b/src/scss/csseditor/layer-add-view.scss
@@ -35,4 +35,18 @@
         min-width: 50px;
         transform: translate(5px, 5px);
     }
+
+    .area-pointer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width:100%;
+        height: 100%;
+        pointer-events: none;
+
+        .layer-add-snap-pointer {
+            stroke: var(--selected-color);
+            stroke-width: 1;
+        }
+    }
 }
diff --git a/src/scss/csseditor/path-editor-view.scss b/src/scss/csseditor/path-editor-view.scss
@@ -73,7 +73,7 @@
                 path {
                     &.object {
                         pointer-events: visibleStroke;
-                        stroke: transparent;
+                        // stroke: transparent;
                     }
                 }
             }

diff --git a/src/ui/view-items/LayerAppendView.js b/src/ui/view-items/LayerAppendView.js
@@ -1,22 +1,28 @@
 import UIElement, { EVENT } from "@core/UIElement";
-import { POINTERSTART, BIND, MOVE, END, KEYUP, IF, ESCAPE, ENTER, PREVENT, STOP } from "@core/Event";
+import { POINTERSTART, BIND, MOVE, END, KEYUP, IF, ESCAPE, ENTER, PREVENT, STOP, POINTERMOVE } from "@core/Event";
 import Color from "@core/Color";
 import { Length } from "@unit/Length";
 import PathStringManager from "@parser/PathStringManager";
 import { OBJECT_TO_PROPERTY } from "@core/functions/func";
+import { rectToVerties } from "@core/functions/collision";
+import { vertiesMap } from "@core/functions/math";
+import { vec3 } from "gl-matrix";
 
 export default class LayerAppendView extends UIElement {
+
     template() {
         return /*html*/`
         <div class='layer-add-view'>
             <div class='area' ref='$area'></div>
             <div class='area-rect' ref='$areaRect'></div>
+            <div class='area-pointer' ref='$mousePointer'></div>
         </div>
         `
     }
 
     initState() {
         return {
+            dragStart: false, 
             dragXY: { x: -10000, y : 0},
             x: 0,
             y: 0,
@@ -25,24 +31,59 @@ export default class LayerAppendView extends UIElement {
             color: Color.random(),
             fontSize: 30,
             showRectInfo: false, 
-            content: 'Insert a text'
+            content: 'Insert a text',
+            pathManager: new PathStringManager()
         }
     }
 
     get scale () {
         return this.$editor.scale; 
-    }    
+    }  
+
+    checkNotDragStart () {
+        return Boolean(this.state.dragStart) === false;
+    }
+
+    [POINTERMOVE('$el') + IF('checkNotDragStart')] (e) {
+        const {x, y} = e.xy; 
+        const containerRect = this.$el.rect();
+
+
+        const vertext = [
+            Math.floor(x - containerRect.x),
+            Math.floor(y - containerRect.y),
+            0
+        ]
+
+        // 영역 드래그 하면서 snap 하기 
+        const verties = vertiesMap([vertext], this.$editor.matrixInverse);
+        const snap = this.$snapManager.check(verties);
+
+        if (snap) {
+            this.state.target = vec3.add([], vertext, snap);
+            this.state.targetGuides = this.$snapManager.findGuide([this.state.target]);
+        } else {
+            this.state.target = null; 
+            this.state.targetGuides = [];
+        }
+
+        this.bindData('$mousePointer')
+    }
 
     [POINTERSTART('$el') + MOVE() + END()] (e) {
 
         const {x, y} = e.xy; 
         const containerRect = this.$el.rect();
 
-        this.state.dragXY = {
+        this.state.dragXY = this.state.target ? {
+            x: this.state.target[0],
+            y: this.state.target[1]
+        } : {
             x: Math.floor(x - containerRect.x),
             y: Math.floor(y - containerRect.y),
         }; 
 
+        this.state.dragStart = true;
         this.state.color = Color.random()
         this.state.text = 'Insert a text';
         this.state.x = this.state.dragXY.x;
@@ -53,16 +94,15 @@ export default class LayerAppendView extends UIElement {
         this.bindData('$area');
         this.bindData('$areaRect');
 
-
     }
 
     createLayerTemplate () {
         const { type, text, color, width, height } = this.state;
         switch(type) {
         case 'rect':
-            return /*html*/`<div class='draw-item' style='background-color: ${color}'></div>`
+            return /*html*/`<div class='draw-item' style='background-color: ${color};border:1px solid black;'></div>`
         case 'circle':
-            return /*html*/`<div class='draw-item' style='background-color: ${color}; border-radius: 100%;'></div>`
+            return /*html*/`<div class='draw-item' style='background-color: ${color}; border-radius: 100%;border:1px solid black;'></div>`
         case 'video':
         case 'audio':
         case 'image':            
@@ -135,13 +175,54 @@ export default class LayerAppendView extends UIElement {
         }
     }
 
+    makeMousePointer () {
+
+        const target = this.state.target 
+
+        if (!target) return '';
+
+        const guides = this.state.targetGuides || []
+
+        return /*html*/`
+        <svg width="100%" height="100%">
+            ${guides.map(guide => {
+                this.state.pathManager.reset();
+
+                return this.state.pathManager
+                            .M({x: guide[0][0], y: guide[0][1]})
+                            .L({x: guide[1][0], y: guide[1][1]})
+                            .X({x: guide[1][0], y: guide[1][1]})
+                            .toString('layer-add-snap-pointer')
+            }).join('\n')}
+        </svg>
+    `
+    }
+
+    [BIND('$mousePointer')] () {
+
+        const html = this.makeMousePointer()
+
+        if (html === '') return;
+
+        return {
+            innerHTML: html
+        }
+    }
+
     move (dx, dy) {
         const isShiftKey = this.$config.get('bodyEvent').shiftKey;
 
         if (isShiftKey) {
             dy = dx; 
         }
 
+        // 영역 드래그 하면서 snap 하기 
+        const verties = vertiesMap(rectToVerties(this.state.dragXY.x,this.state.dragXY.y, dx, dy), this.$editor.matrixInverse);
+        const snap = this.$snapManager.check(verties);
+
+        dx += snap[0];
+        dy += snap[1];
+
         var obj = {
             left: Length.px(this.state.dragXY.x + (dx < 0 ? dx : 0)),
             top: Length.px(this.state.dragXY.y + (dy < 0 ? dy : 0)),
@@ -155,6 +236,7 @@ export default class LayerAppendView extends UIElement {
         this.state.height = obj.height.value;
         this.state.showRectInfo = true; 
 
+
         this.bindData('$area');
         this.bindData('$areaRect'); 
     }
@@ -206,6 +288,7 @@ export default class LayerAppendView extends UIElement {
             this.trigger('hideLayerAppendView')
         }
 
+        this.state.dragStart = false;        
         this.state.showRectInfo = false; 
         this.bindData('$areaRect');         
     }    
@@ -217,6 +300,7 @@ export default class LayerAppendView extends UIElement {
         this.refs.$area.empty()
         this.$el.show();
         this.$el.focus();
+        this.$snapManager.clear();        
         this.emit('change.mode.view', 'CanvasView');
     }
 

diff --git a/src/ui/view-items/PathEditorView.js b/src/ui/view-items/PathEditorView.js
@@ -358,32 +358,16 @@ export default class PathEditorView extends PathTransformEditor {
     }
 
     updatePathLayer () {
-
-        // 원본 크기를 주기 위해서 minX, minY 는 0 으로 설정 한다. 
-        // 이유는 matrix 연산으로 path 의 마지막 위치를 맞추기 위해서이다.
-        var minX = 0; //rect.x;     
-        var minY = 0; //rect.y; 
-
-        var item = this.state.current;
-
-        // 객체 내부에 포함된 패스는 box 를 기준으로 재설정 
-        if (item && this.isBoxMode) {
-            var minX = item.screenX.value / this.scale 
-            var minY = item.screenY.value / this.scale 
-        }
-
-
         var { d } = this.pathGenerator.toPath();
 
         var parser = new PathParser(d);
         parser.transformMat4(this.$editor.matrixInverse)
 
         this.emit(this.state.changeEvent, {
             d: parser.d, 
+            box: this.state.box,
             totalLength: this.totalPathLength,
         })
-
-        // console.log(this.state.rect);
     }
 
     /**
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html> <html> <head> <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.b135e85657d1655edc56.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.5c48347fd36f092f448d.js"></script></body> </html>
		<!doctype html> <html> <head> <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.cb6848d5f7a9a936e342.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.b47a51015045c6a9b0f6.js"></script></body> </html>