Refactoring blank, design editor

remove three, whiteboard, data editor
my-frontend-lab · May 25, 2022 · efd11b7 · efd11b7
1 parent 23f4472
commit efd11b7
Show file tree

Hide file tree

Showing 127 changed files with 41,990 additions and 81,943 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -90,7 +90,9 @@
     "Symbol": true,
     "__dirname": true,
     "Map": true,
-    "Set": true
+    "Set": true,
+    "WeakMap": true,
+    "WeakSet": true
   },
   "overrides": [
     {

diff --git a/3d.html b/3d.html
diff --git a/blank.html b/blank.html
diff --git a/dataeditor.html b/dataeditor.html
diff --git a/dist/editor.es.js b/dist/editor.es.js
diff --git a/dist/editor.umd.js b/dist/editor.umd.js
diff --git a/dist/style.css b/dist/style.css
diff --git a/docs/3d.html b/docs/3d.html
diff --git a/docs/assets/blankeditor.2ece4c0d.js b/docs/assets/blankeditor.2ece4c0d.js
diff --git a/docs/assets/dataeditor.f8c67166.js b/docs/assets/dataeditor.f8c67166.js
diff --git a/docs/assets/editor.57e24637.js b/docs/assets/editor.57e24637.js
diff --git a/docs/assets/editor.58120e25.css b/docs/assets/editor.58120e25.css
diff --git a/docs/assets/editor.5891116e.js b/docs/assets/editor.5891116e.js
diff --git a/docs/assets/index.0a251ad3.css b/docs/assets/index.0a251ad3.css
diff --git a/docs/assets/index.e23f8a81.js b/docs/assets/index.e23f8a81.js
diff --git a/docs/assets/threeeditor.ed4bcd7c.js b/docs/assets/threeeditor.ed4bcd7c.js
diff --git a/docs/assets/whiteboard.f49881ff.js b/docs/assets/whiteboard.f49881ff.js
diff --git a/docs/blank.html b/docs/blank.html
diff --git a/docs/dataeditor.html b/docs/dataeditor.html
diff --git a/docs/index.html b/docs/index.html
@@ -16,9 +16,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>    
-    <script type="module" crossorigin src="/assets/editor.57e24637.js"></script>
-    <link rel="modulepreload" href="/assets/index.e23f8a81.js">
-    <link rel="stylesheet" href="/assets/index.0a251ad3.css">
+    <script type="module" crossorigin src="/assets/editor.5891116e.js"></script>
+    <link rel="stylesheet" href="/assets/editor.58120e25.css">
   </head>
   <body>
     <div id="app"></div>    

diff --git a/docs/whiteboard.html b/docs/whiteboard.html
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "open-color": "^1.9.1",
     "pathkit-wasm": "^0.7.0",
     "svg-arc-to-cubic-bezier": "^3.2.0",
-    "three": "^0.139.2",
     "yorkie-js-sdk": "^0.1.11"
   },
   "devDependencies": {

diff --git a/pagebuilder.html b/pagebuilder.html
diff --git a/src/apps/blankeditor/area/BlankInspector.jsx b/src/apps/blankeditor/area/BlankInspector.jsx
@@ -1,24 +1,9 @@
-import { BIND, createElement } from "sapa";
+import { createElement } from "sapa";
 
-import { DesignMode } from "elf/editor/types/editor";
 import { EditorElement } from "elf/editor/ui/common/EditorElement";
 import { TabPanel, Tabs } from "elf/ui";
 
 export default class BlankInspector extends EditorElement {
-  afterRender() {
-    this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN));
-  }
-
-  [BIND("$el")]() {
-    return {
-      style: {
-        display: this.$config.is("editor.design.mode", DesignMode.DESIGN)
-          ? "block"
-          : "none",
-      },
-    };
-  }
-
   template() {
     return (
       <div class="feature-control inspector">
@@ -32,7 +17,6 @@ export default class BlankInspector extends EditorElement {
           >
             {this.$injectManager.getTargetUI("inspector.tab").map((it) => {
               const { value, title, icon, loadElements = [] } = it.class;
-
               return (
                 <TabPanel value={value} title={title} icon={icon}>
                   <div style="display: flex: flex-direction: column;">

diff --git a/src/apps/blankeditor/area/BlankStatusbar.jsx b/src/apps/blankeditor/area/BlankStatusbar.jsx
@@ -0,0 +1,13 @@
+import "./BlankStatusbar.scss";
+
+import { EditorElement } from "elf/editor/ui/common/EditorElement";
+
+export default class BlankStatusbar extends EditorElement {
+  template() {
+    return (
+      <div class="elf--status-bar">
+        ${this.$injectManager.generate("statusbar")}
+      </div>
+    );
+  }
+}
diff --git a/src/apps/blankeditor/area/BlankStatusbar.scss b/src/apps/blankeditor/area/BlankStatusbar.scss
@@ -0,0 +1,7 @@
+.elf--status-bar {
+    background-color: var(--elf--selected-color);
+    display: flex;
+    width: 100%;
+    position: relative;
+    height: 100%;
+}
diff --git a/src/apps/blankeditor/area/tool-bar/BlankToolBar.js b/src/apps/blankeditor/area/tool-bar/BlankToolBar.js
@@ -20,6 +20,12 @@ export default class BlankToolBar extends EditorElement {
   template() {
     return /*html*/ `
             <div class='elf--blank-tool-bar'>
+              <div class="logo-area">
+                ${createComponent("ToolBarRenderer", {
+                  items: this.$menu.getTargetMenu("toolbar.logo"),
+                })}
+              </div>            
+              <div class="toolbar-area">
                 <div class='left'>
                     ${createComponent("ToolBarRenderer", {
                       items: this.$menu.getTargetMenu("toolbar.left"),
@@ -45,6 +51,7 @@ export default class BlankToolBar extends EditorElement {
                     )}                    
                     ${createComponent("ThemeChanger")}
                 </div>
+              </div>
             </div>
         `;
   }

diff --git a/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss b/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss
@@ -3,11 +3,26 @@
     flex-direction: row;
     justify-content: space-between;
     height: 100%;
-    background-color: var(--elf--header-background-color);
+    background-color: var(--elf--toolbar-background-color);
     color: var(--elf--selected-font-color);
 
-    > * {
+    > .logo-area {
+        flex: none;
+        width: 60px;
+        // background-color: yellow;
+        // padding: 10px;
+        height: 100%;
+
+        > * {
+            height: 100%;
+        }
+    }
+
+    > .toolbar-area {
+        flex: 1 1 auto;
         display: flex;
+        flex-direction: row;
+        justify-content: space-between;
         > * {
             // display: inline-block;
             min-height: 48px !important;