Remove frame

src/canvas/view/FrameView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { bindAll, isNumber, isString, isNull, debounce } from 'underscore';
+import { bindAll, isString, debounce } from 'underscore';
 import CssRulesView from 'css_composer/view/CssRulesView';
 import ComponentView from 'dom_components/view/ComponentView';
 import {
@@ -113,7 +113,9 @@ export default Backbone.View.extend({
   },
 
   remove() {
+    const { root } = this;
     Backbone.View.prototype.remove.apply(this, arguments);
+    root.remove();
   },
 
   startAutoscroll() {
@@ -343,16 +345,14 @@ export default Backbone.View.extend({
       ${conf.protectedCss || ''}
     </style>`
     );
-    append(
-      body,
-      new ComponentView({
-        model: root,
-        config: {
-          ...root.config,
-          frameView: this
-        }
-      }).render().el
-    );
+    this.root = new ComponentView({
+      model: root,
+      config: {
+        ...root.config,
+        frameView: this
+      }
+    }).render();
+    append(body, this.root.el);
     append(
       body,
       new CssRulesView({

src/canvas/view/FrameWrapView.js

@@ -7,8 +7,12 @@ const motionsEv =
   'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 
 export default Backbone.View.extend({
+  events: {
+    'click [data-action-remove]': 'remove'
+  },
+
   initialize(opts = {}, conf = {}) {
-    bindAll(this, 'onScroll', 'frameLoaded');
+    bindAll(this, 'onScroll', 'frameLoaded', 'updateOffset');
     const { model } = this;
     const config = {
       ...(opts.config || conf),
@@ -25,6 +29,12 @@ export default Backbone.View.extend({
     this.updatePos();
   },
 
+  remove() {
+    Backbone.View.prototype.remove.apply(this, arguments);
+    this.frame.remove();
+    return this;
+  },
+
   updateOffset: debounce(function() {
     this.em.runDefault({ preserveSelected: 1 });
   }),
@@ -87,13 +97,21 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const { frame, $el, ppfx, cv } = this;
+    const { frame, $el, ppfx, cv, model } = this;
     frame.render();
     $el
       .empty()
       .attr({
         class: `${ppfx}frame-wrapper`
       })
+      .append(
+        `<div class="${ppfx}frame-wrapper__header">
+        <div class="${ppfx}frame-wrapper__name">${model.get('name') || ''}</div>
+        <div data-action-remove>
+          <i class="fa fa-trash"></i>
+        </div>
+      </div>`
+      )
       .append(frame.el);
     const elTools = createEl(
       'div',
@@ -129,7 +147,7 @@ export default Backbone.View.extend({
     );
     this.elTools = elTools;
     cv.toolsWrapper.appendChild(elTools); // TODO remove on frame remove
-    frame.model.on('loaded', this.frameLoaded);
+    model.on('loaded', this.frameLoaded);
     return this;
   }
 });

src/dom_components/view/ComponentView.js

@@ -79,7 +79,13 @@ export default Backbone.View.extend({
 
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
-    const { views } = this.model;
+    const { model } = this;
+    const frameM = this._getFrame().model;
+    model.components().forEach(comp => {
+      const view = comp.getView(frameM);
+      view && view.remove();
+    });
+    const { views } = model;
     views.splice(views.indexOf(this), 1);
     this.removed(this._clbObj());
     return this;

src/styles/scss/_gjs_canvas.scss

@@ -109,9 +109,19 @@ $guide_pad: 5px;
   }
 
   &frame-wrapper {
+    // transition: width $frameAnimation, height $frameAnimation;
     position: absolute;
     width: 100%;
     height: 100%;
+
+    &__header {
+      transform: translateY(-100%) translateX(-50%);
+      padding: 5px 0;
+      position: absolute;
+      width: 100%;
+      left: 50%;
+      top: 0;
+    }
   }
 }