support multi artboard

kode-team · Dec 14, 2020 · 14a4561 · 14a4561
1 parent 67f122d
commit 14a4561
Show file tree

Hide file tree

Showing 74 changed files with 387 additions and 485 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.cb6848d5f7a9a936e342.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.b47a51015045c6a9b0f6.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.35e5bec4ffe493ca828a.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.07b39d019417a5de6cb4.js"></script></body> </html> 
diff --git a/docs/main.b47a51015045c6a9b0f6.js → docs/main.07b39d019417a5de6cb4.js b/docs/main.b47a51015045c6a9b0f6.js → docs/main.07b39d019417a5de6cb4.js
diff --git a/docs/main.35e5bec4ffe493ca828a.css b/docs/main.35e5bec4ffe493ca828a.css
diff --git a/docs/main.cb6848d5f7a9a936e342.css b/docs/main.cb6848d5f7a9a936e342.css
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/editor",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Fantastic Web Design Tool ",
   "main": "./dist/editor.js",
   "directories": {

diff --git a/src/assets/extension/manifest.json b/src/assets/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.9.54",
+  "version": "0.10.1",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool ",
   "author": "easylogic",

diff --git a/src/assets/whale/manifest.json b/src/assets/whale/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.9.54",
+  "version": "0.10.1",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool, Web 디자인 툴  ",
   "author": "easylogic",

diff --git a/src/commands/addArtBoard.js b/src/commands/addArtBoard.js
@@ -24,7 +24,6 @@ export default function addArtBoard (editor, obj = {}) {
         ...obj
     }))
 
-    editor.selection.selectArtboard(artboard);
     editor.selection.select(artboard);
 
     _doForceRefreshSelection(editor)

diff --git a/src/commands/addLayer.js b/src/commands/addLayer.js
@@ -3,12 +3,12 @@ import _doForceRefreshSelection from "./_doForceRefreshSelection";
 export default function addLayer (editor, layer, rect = {}, isSelected = true, containerItem) {
 
     if (!containerItem) {
-        containerItem = editor.selection.current || editor.selection.currentArtboard
+        containerItem = editor.selection.current || editor.selection.currentProject
     }
 
     if (containerItem) {
 
-        if (!containerItem.enableHasChildren()) {
+        if (!containerItem.is('project') && !containerItem.enableHasChildren()) {
             containerItem = containerItem.parent;
         }
 
@@ -19,11 +19,5 @@ export default function addLayer (editor, layer, rect = {}, isSelected = true, c
         }
 
         _doForceRefreshSelection(editor,true, 10)
-    } else {
-        editor.emit('addArtBoard')
-
-        editor.nextTick(() => {
-            addLayer(editor, layer, rect);
-        })
     }
 }
diff --git a/src/commands/downloadPNG.js b/src/commands/downloadPNG.js
@@ -7,16 +7,19 @@ import ExportManager from "@manager/ExportManager";
 export default {
     command: 'downloadPNG',
     execute: function (editor) {
-        var item = editor.selection.current || editor.selection.currentArtboard;
+        const item = editor.selection.current;
 
-        var svgString = ExportManager.generateSVG(editor, item).trim();
-        var datauri = 'data:image/svg+xml;base64,' + window.btoa(svgString);
-        var filename = item.id;
-        loadOriginalImage({local: datauri}, (info, img) => {
-            createImagePng(img, (pngDataUri) => {
-                downloadFile(pngDataUri, filename)
+        if (item) {
+            const svgString = ExportManager.generateSVG(editor, item).trim();
+            const datauri = 'data:image/svg+xml;base64,' + window.btoa(svgString);
+            const filename = item.id;
+            loadOriginalImage({local: datauri}, (info, img) => {
+                createImagePng(img, (pngDataUri) => {
+                    downloadFile(pngDataUri, filename)
+                })
             })
-        })
+        }
+
     }
 
 }
diff --git a/src/commands/downloadSVG.js b/src/commands/downloadSVG.js
@@ -5,13 +5,16 @@ import downloadFile from "@util/downloadFile";
 export default {
     command: 'downloadSVG',
     execute: function (editor) {
-        var item = editor.selection.current || editor.$selection.currentArtboard;
+        const item = editor.selection.current;
 
-        var svgString = ExportManager.generateSVG(editor, item).trim();
-        var datauri = 'data:image/svg+xml;base64,' + window.btoa(svgString);
-        var filename = item.id;
+        if (item) {
+            var svgString = ExportManager.generateSVG(editor, item).trim();
+            var datauri = 'data:image/svg+xml;base64,' + window.btoa(svgString);
+            var filename = item.id;
+
+            downloadFile(datauri, filename)
+        }
 
-        downloadFile(datauri, filename)
     }
 
 }
diff --git a/src/commands/group.item.js b/src/commands/group.item.js
@@ -1,16 +1,15 @@
-//TODO: matrix 개념으로 다시 구현해야함 
 export default {
     command : 'group.item',
     execute: function (editor) {
 
         if (editor.selection.length === 0) return; 
 
-        const artboard = editor.selection.currentArtboard
+        const project = editor.selection.currentProject
 
-        if (artboard) {
+        if (project) {
 
             // no 캐쉬 
-            artboard.generateListNumber()
+            project.generateListNumber()
 
             // depth 캐쉬 
             const list = editor.selection.map(item => {
@@ -42,7 +41,7 @@ export default {
 
             editor.selection.select(groupLayer);
 
-            editor.emit('refreshArtboard')
+            editor.emit('refreshAll')
         }
 
     }

diff --git a/src/commands/history.removeLayer.js b/src/commands/history.removeLayer.js
@@ -60,6 +60,7 @@ export default {
         editor.nextTick(() =>  {
             editor.selection.removeById(items.map(it => it.id))
             editor.emit('refreshAll')
+            editor.emit('removeGuideLine');
             editor.nextTick(() => {
                 editor.history.saveSelection()  
             })

diff --git a/src/commands/index.js b/src/commands/index.js
@@ -8,7 +8,6 @@ import addVideo from "./addVideo";
 import addArtBoard from "./addArtBoard";
 import addProject from "./addProject";
 import addLayer from "./addLayer";
-import selectArtboard from './selectArtboard';
 import newComponent from "./newComponent";
 import addComponentType from "./addComponentType";
 import clipboardCopy from "./clipboard.copy";
@@ -188,7 +187,6 @@ export default {
     refreshElement,
     refreshProject,
     resizeArtBoard,
-    selectArtboard,
     setAttribute,  
     setAttributeForMulti,
     sortBottom,

diff --git a/src/commands/load.json.js b/src/commands/load.json.js
@@ -23,28 +23,17 @@ export default {
         var projects = json.map(p => editor.createItem(p))
 
         projects.forEach(p => {
-            p.selectTimeline()
+            p.artboards.forEach(artboard => {
+                p.selectTimeline(artboard.id)
+            })
         })
 
         if (projects.length) {
             var project = projects[0]
             editor.selection.selectProject(project)
-            if (project.artboards.length) {
-                var artboard = project.artboards[0]
-                editor.selection.selectArtboard(artboard)
-
-                if (artboard.layers.length) {
-                    editor.selection.select(artboard.layers[0])
-                } else {
-                    editor.selection.select(artboard);
-                }
-            }
 
             editor.load(projects);
             _doForceRefreshSelection(editor)
-        } else {
-            // 아무 것도 없을 때는 artboard 하나를 자동으로 만들어준다. 
-            editor.emit('addArtBoard');
         }
     }
 }
diff --git a/src/commands/newComponent.js b/src/commands/newComponent.js
@@ -17,7 +17,6 @@ export default function newComponent (editor, itemType, obj, isSelected = true)
             textLength: '100%',
             d: PathStringManager.makeLine(0, obj.height.value, obj.width.value, obj.height.value),
         }
-
     } else if (itemType === 'svg-circle') {
         itemType = 'svg-path';
         obj = {

diff --git a/src/commands/refreshArtboard.js b/src/commands/refreshArtboard.js
@@ -11,7 +11,7 @@ export default function refreshArtboard (editor) {
     editor.emit('refreshAllElementBoundSize')   
     editor.emit('refreshSelection');
     editor.nextTick(() => {
-        editor.emit('refreshSelectionTool');
+        editor.emit('refreshSelectionTool', true);
     })
 
 }
diff --git a/src/commands/selectArtboard.js b/src/commands/selectArtboard.js
diff --git a/src/core/functions/collision.js b/src/core/functions/collision.js
@@ -303,9 +303,9 @@ export function getClosestPointBylineRect(x1, y1, x2, y2, rectX, rectY, width, h
 /**
  * 폴리곤에 점 비교 
  * 
- * @param {[x, y][]} verties 
- * @param {*} px 
- * @param {*} py 
+ * @param {vec3[]} verties 
+ * @param {number} px 
+ * @param {number} py 
  */
 export function polyPoint (verties = [], px, py) {
     let isCollision = false; 

diff --git a/src/core/functions/func.js b/src/core/functions/func.js
@@ -223,7 +223,7 @@ export const html = (strings, ...args) => {
 }
 
 export function CSS_TO_STRING(style, postfix = '') {
-    var newStyle = style;
+    var newStyle = style || {};
 
     return Object.keys(newStyle)
       .filter(key => isNotUndefined(newStyle[key]))

diff --git a/src/csseditor/CSSEditor.js b/src/csseditor/CSSEditor.js
@@ -65,12 +65,15 @@ export default class CSSEditor extends UIElement {
     return /*html*/`
       <div class="layout-main">
         <div class='layout-top' ref='$top'>
-
+          <div class='logo-item'>
+            <label class='logo' title='EasyLogic Studio'></label>
+          </div>                       
+          <ToolMenu />    
+          <PageSubEditor />    
         </div>
         <div class="layout-middle" ref='$middle'>
           <div class="layout-header" ref='$headerPanel'>
-              <ToolMenu />    
-              <PageSubEditor />      
+  
           </div>        
           <div class="layout-body" ref='$bodyPanel'>
             <CanvasView />        

diff --git a/src/items/Item.js b/src/items/Item.js
@@ -394,6 +394,10 @@ export class Item {
     return layer;     
   }
 
+  resetMatrix (item) {
+
+  }
+
   /**
    * 특정 index 에 자식을 추가한다. 
    * 

diff --git a/src/items/Layer.js b/src/items/Layer.js
@@ -1,5 +1,4 @@
 import { DomItem } from "./DomItem";
-import { Length } from "@unit/Length";
 import icon from "@icon/icon";
 
 export class Layer extends DomItem {
@@ -33,21 +32,4 @@ export class Layer extends DomItem {
     }
   }
 
-
-  get screenX () { 
-    if (this.json.parent) {
-        return Length.px( this.json.parent.screenX.value + (this.json.x || zero).value )
-    }
-
-    return this.json.x || Length.z() 
-  }
-  get screenY () { 
-
-      if (this.json.parent) {
-          return Length.px( this.json.parent.screenY.value + (this.json.y || zero).value )
-      }
-
-      return this.json.y || Length.z() 
-  }  
-
 }
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.cb6848d5f7a9a936e342.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.b47a51015045c6a9b0f6.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.35e5bec4ffe493ca828a.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.07b39d019417a5de6cb4.js"></script></body> </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,6 @@ export default function addArtBoard (editor, obj = {}) { @@
             ...obj
         }))
-        editor.selection.selectArtboard(artboard);
         editor.selection.select(artboard);
         _doForceRefreshSelection(editor)
@@ Expand Down @@