Support IFrameLayer

kode-team · Mar 11, 2021 · 85d966c · 85d966c
1 parent d080fcb
commit 85d966c
Show file tree

Hide file tree

Showing 87 changed files with 372 additions and 91 deletions.
diff --git a/dist/editor.js b/dist/editor.js
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?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?b8ae243bfe1eaa219e07"></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?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?7ce7c1c148ffcf4724ff"></script></body> </html> 
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/commands/newComponent.js b/src/commands/newComponent.js
@@ -51,21 +51,12 @@ export default function newComponent (editor, itemType, obj, isSelected = true,
             content: 'Insert a text',
             'font-size': Length.px(30)
         }        
-    } else if (itemType === 'rect') {
-        obj = {
-            ...obj,
-        }        
-    } else if (itemType === 'circle') {
-        obj = {
-            ...obj,
-        }                
     } else if (itemType === 'artboard') {
         obj = {
             ...obj,
             'background-color': 'white'
         }        
-    }
-
+    } 
 
     editor.command('addLayer', `add layer - ${itemType}`, editor.createItem({
         itemType, 

diff --git a/src/i18n/locales/en_US.js b/src/i18n/locales/en_US.js
@@ -136,6 +136,8 @@ export default {
     'export.property.title': 'Export',    
     'export.property.download': 'Download',    
 
+    'iframe.property.title': 'IFrame',
+
     'image.property.title': 'Image',
     'image.property.origin': 'Origin',    
     'image.property.size': 'Size',    

diff --git a/src/i18n/locales/fr_FR.js b/src/i18n/locales/fr_FR.js
@@ -133,6 +133,8 @@ export default {
     'export.property.title': 'Exporter',    
     'export.property.download': 'Télécharger',    
 
+    'iframe.property.title': 'IFrame',
+
     'image.property.title': 'Image',
     'image.property.origin': 'Origine',    
     'image.property.size': 'Taille',    

diff --git a/src/i18n/locales/ko_KR.js b/src/i18n/locales/ko_KR.js
@@ -136,6 +136,8 @@ export default {
     'export.property.title': '내보내기',
     'export.property.download': '다운로드',
 
+    'iframe.property.title': '아이프레임',
+
     'image.property.title': '이미지',    
     'image.property.origin': '원본',    
     'image.property.size': '크기',    

diff --git a/src/icon/icon.js b/src/icon/icon.js
@@ -152,6 +152,8 @@ import horizontal_distribute from "./horizontal_distribute";
 import delete_forever from "./delete_forever";
 import horizontal_rule from "./horizontal_rule";
 import navigation from "./navigation";
+import web from "./web";
+
 
 
 const alias = {
@@ -161,6 +163,7 @@ const alias = {
 
 export default {
   ...alias,
+  web,
   navigation,
   delete_forever,
   horizontal_rule,

diff --git a/src/icon/web.js b/src/icon/web.js
@@ -0,0 +1,3 @@
+import _icon_template from "./_icon_template";
+
+export default _icon_template(`<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"/>`)
diff --git a/src/items/layers/IFrameLayer.js b/src/items/layers/IFrameLayer.js
@@ -0,0 +1,36 @@
+import { Layer } from "../Layer";
+import icon from "@icon/icon";
+import { ComponentManager } from "@manager/ComponentManager";
+
+export class IFrameLayer extends Layer {
+
+  getIcon () {
+    return icon.web;
+  }  
+
+  getDefaultObject(obj = {}) {
+    return super.getDefaultObject({
+      itemType: 'iframe',
+      elementType: 'iframe',
+      name: 'New IFrame',      
+      url: '',
+      ...obj
+    });
+  }
+
+  toCloneObject() {
+    return {
+      ...super.toCloneObject(),
+      ...this.attrs('url'),
+    }
+  }
+
+
+  getDefaultTitle() {
+    return "IFrame";
+  } 
+
+
+}
+
+ComponentManager.registerComponent('iframe', IFrameLayer); 
diff --git a/src/renderer/HTMLRenderer/IFrameRender.js b/src/renderer/HTMLRenderer/IFrameRender.js
@@ -0,0 +1,35 @@
+import LayerRender from "./LayerRender";
+
+export default class IFrameRender extends LayerRender {
+
+
+    update (item, currentElement) {
+
+        let $iframe = currentElement.$("iframe");
+
+        if ($iframe) {
+          $iframe.attr('src', item.url || 'about:blank');    
+        }
+
+        super.update(item, currentElement);
+    }    
+
+  /**
+   * 
+   * @param {Item} item 
+   */
+   render (item) {
+    var {id, url =  'about:blank'} = item;
+
+    return /*html*/`
+      <div class='element-item iframe' data-id="${id}">
+        ${this.toDefString(item)}
+        <iframe 
+            width="100%" 
+            height="100%" 
+            style="border:0px;width:100%;height:100%;pointer-events:none;" 
+            src="${url}"
+        ></iframe>
+      </div>`
+  }
+}
diff --git a/src/renderer/HTMLRenderer/index.js b/src/renderer/HTMLRenderer/index.js
@@ -4,6 +4,7 @@ import { Item } from '@items/Item';
 import ArtBoardRender from './ArtBoardRender';
 import CircleRender from './CircleRender';
 import CubeRender from './CubeRender';
+import IFrameRender from './IFrameRender';
 import ImageRender from './ImageRender';
 import ProjectRender from './ProjectRender';
 import RectRender from './RectRender';
@@ -40,6 +41,7 @@ const renderers = {
     'svg-text': new SVGTextRender(),
     'svg-textpath': new SVGTextPathRender(),
     'cube': new CubeRender(),
+    'iframe': new IFrameRender(),
 }
 
 export default {

diff --git a/src/ui/control/ComponentItems.js b/src/ui/control/ComponentItems.js
@@ -1,14 +1,10 @@
 import UIElement from "@core/UIElement";
-import menuItems from "../menu-items";
+import "../menu-items";
 import { CLICK } from "@core/Event";
 import { registElement } from "@core/registerElement";
 
 export default class ComponentItems extends UIElement {
 
-  components() {
-    return menuItems
-  }
-
   template() {
     return /*html*/`
       <div class='component-items'>
@@ -27,6 +23,7 @@ export default class ComponentItems extends UIElement {
             <object refClass="AddText" title='Text' />
             <object refClass="AddImage" title='Image' />
             <object refClass="AddVideo" title='Video' />
+            <object refClass="AddIFrame" title='IFrame' />            
           </div>
         </div>
         <div class='group'>

diff --git a/src/ui/control/Inspector.js b/src/ui/control/Inspector.js
@@ -1,7 +1,7 @@
 import UIElement from "@core/UIElement";
 
 import { CLICK } from "@core/Event";
-import property from "../property/index";
+import "../property/index";
 import icon from "@icon/icon";
 import { registElement } from "@core/registerElement";
 
@@ -54,6 +54,9 @@ export default class Inspector extends UIElement {
                 <!-- Video --> 
                 <object refClass="VideoProperty" />
 
+                <!-- IFrame --> 
+                <object refClass="IFrameProperty" />                
+
                 <!-- Component -->
                 <object refClass="ComponentProperty" />                
                 
@@ -129,10 +132,6 @@ export default class Inspector extends UIElement {
     `;
   }
 
-  components() {
-    return property;
-  }
-
   [CLICK("$header .tab-item:not(.empty-item)")](e) {
 
     var selectedIndex = +e.$dt.attr('data-value')

diff --git a/src/ui/control/LayerTab.js b/src/ui/control/LayerTab.js
@@ -1,28 +1,17 @@
 import UIElement from "@core/UIElement";
-import ObjectItems from "./ObjectItems";
+import "./ObjectItems";
 import { CLICK } from "@core/Event";
-import LibraryItems from "./LibraryItems";
-import ComponentItems from "./ComponentItems";
+import "./LibraryItems";
+import "./ComponentItems";
 import icon from "@icon/icon";
-import PreviewToolMenu from "../view/PreviewToolMenu";
-import ShortCutItems from "./ShortCutItems";
-import property from "../property";
-import ArtboardItems from "./ArtboardItems";
+import "../view/PreviewToolMenu";
+import "./ShortCutItems";
+import "../property";
+import "./ArtboardItems";
 import { registElement } from "@core/registerElement";
 
 
 export default class LayerTab extends UIElement {
-  components() {
-    return {
-      ShortCutItems,
-      ...property,
-      ObjectItems, 
-      ComponentItems,
-      LibraryItems,
-      PreviewToolMenu,
-      ArtboardItems
-    }
-  }
 
   initState() {
     return {

diff --git a/src/ui/control/LibraryItems.js b/src/ui/control/LibraryItems.js
@@ -4,11 +4,7 @@ import clipArt from "../clip-art";
 import { registElement } from "@core/registerElement";
 
 export default class LibraryItems extends UIElement {
-  components() {
-    return {
 
-    }
-  }
   template() {
     return /*html*/`
       <div class='library-items'>

diff --git a/src/ui/control/ObjectItems.js b/src/ui/control/ObjectItems.js
@@ -1,14 +1,8 @@
 import { registElement } from "@core/registerElement";
 import UIElement from "@core/UIElement";
-import LayerTreeProperty from "../property/LayerTreeProperty";
-
+import "../property/LayerTreeProperty";
 
 export default class ObjectItems extends UIElement {
-  components() {
-    return {
-      LayerTreeProperty
-    }
-  }
   template() {
     return /*html*/`
       <div class='object-items'>

diff --git a/src/ui/control/ObjectList.js b/src/ui/control/ObjectList.js
@@ -1,13 +1,8 @@
 import { registElement } from "@core/registerElement";
 import UIElement from "@core/UIElement";
-import LayerTab from "./LayerTab";
+import "./LayerTab";
 
 export default class ObjectList extends UIElement {
-  components() {
-    return {
-      LayerTab
-    }
-  }
   template() {
     return /*html*/`
       <div class="feature-control object-list">

diff --git a/src/ui/menu-items/AddIFrame.js b/src/ui/menu-items/AddIFrame.js
@@ -0,0 +1,22 @@
+import MenuItem from "./MenuItem";
+import { EVENT } from "@core/UIElement";
+import { registElement } from "@core/registerElement";
+
+export default class AddIFrame extends MenuItem {
+  getIconString() {
+    return 'web';
+  }
+  getTitle() {
+    return this.props.title || "IFrame";
+  }
+
+  clickButton(e) {
+    this.emit('addLayerView', 'iframe');
+  }
+
+  [EVENT('addLayerView')] (type) {
+    this.setSelected(type === 'iframe');
+  }
+}
+
+registElement({ AddIFrame })
diff --git a/src/ui/menu-items/index.js b/src/ui/menu-items/index.js
@@ -32,9 +32,11 @@ import AddDrawPath from "./AddDrawPath";
 import AddDrawBrush from "./AddDrawBrush";
 import AddVideo from "./AddVideo";
 import KeyBoard from "./KeyBoard";
+import AddIFrame from "./AddIFrame";
 
 
 export default {
+  AddIFrame,
   KeyBoard,
   AddVideo,
   AddDrawBrush,  

diff --git a/src/ui/property-editor/PathDataEditor.js b/src/ui/property-editor/PathDataEditor.js
@@ -1,6 +1,7 @@
 import UIElement from "@core/UIElement";
 import { LOAD, INPUT, DEBOUNCE, CLICK } from "@core/Event";
 import PathParser from "@parser/PathParser";
+import { registElement } from "@core/registerElement";
 
 
 export default class PathDataEditor extends UIElement {
@@ -137,4 +138,6 @@ export default class PathDataEditor extends UIElement {
             this.updateData();
         }
     }
-}
+}
+
+registElement({ PathDataEditor })
diff --git a/src/ui/property-editor/SVGFilterSelectEditor.js b/src/ui/property-editor/SVGFilterSelectEditor.js
@@ -1,6 +1,7 @@
 import UIElement, { EVENT } from "@core/UIElement";
 import { LOAD, CHANGE, BIND, DEBOUNCE, CLICK } from "@core/Event";
 import icon from "@icon/icon";
+import { registElement } from "@core/registerElement";
 
 export default class SVGFilterSelectEditor extends UIElement {
 
@@ -182,4 +183,6 @@ export default class SVGFilterSelectEditor extends UIElement {
             this.emit('refreshSVGArea');
         }
     }    
-}
+}
+
+registElement({ SVGFilterSelectEditor })
diff --git a/src/ui/property-editor/TextAreaEditor.js b/src/ui/property-editor/TextAreaEditor.js
@@ -1,6 +1,7 @@
 import UIElement from "@core/UIElement";
 import { BIND, INPUT } from "@core/Event";
 import { Length } from "@unit/Length";
+import { registElement } from "@core/registerElement";
 
 export default class TextAreaEditor extends UIElement {
 
@@ -59,4 +60,6 @@ export default class TextAreaEditor extends UIElement {
 
         this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params)
     }
-}
+}
+
+registElement({ TextAreaEditor })
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?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?b8ae243bfe1eaa219e07"></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?303cf9964b7327850591" rel="stylesheet"></head> <body> <div id=app></div> <script type="text/javascript" src="vendors~main.js?d1e9460fdff256ebbdac"></script><script type="text/javascript" src="main.js?7ce7c1c148ffcf4724ff"></script></body> </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import _icon_template from "./_icon_template";

		export default _icon_template(`<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z"/>`)