Update frame wrapper edges

src/canvas/view/FrameWrapView.js

@@ -140,15 +140,23 @@ export default Backbone.View.extend({
     $el
       .empty()
       .attr({ class: `${ppfx}frame-wrapper` })
-      // .append(
-      //   `<div class="${ppfx}frame-wrapper__header">
-      //   <div class="${ppfx}frame-wrapper__name" data-action-move>
-      //     ${model.get('name') || ''}
-      //   </div>
-      //   <span data-action-remove>
-      //     <i class="fa fa-trash"></i>
-      //   </span>
-      // </div>`)
+      .append(
+        `
+      <div class="${ppfx}frame-wrapper__top gjs-two-color">
+        <div class="${ppfx}frame-wrapper__name" data-action-move>
+          ${model.get('name') || ''}
+        </div>
+        <div class="${ppfx}frame-wrapper__top-r">
+          <div class="${ppfx}frame-wrapper__icon" data-action-remove style="display: none">
+            <svg viewBox="0 0 24 24"><path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"></path></svg>
+          </div>
+        </div>
+      </div>
+      <div class="${ppfx}frame-wrapper__right"></div>
+      <div class="${ppfx}frame-wrapper__left"></div>
+      <div class="${ppfx}frame-wrapper__bottom"></div>
+      `
+      )
       .append(frame.el);
     const elTools = createEl(
       'div',

src/styles/scss/_gjs_canvas.scss

@@ -120,13 +120,51 @@ $guide_pad: 5px;
       transition: width $frameAnimation, height $frameAnimation;
     }
 
-    &__header {
+    &__top {
       transform: translateY(-100%) translateX(-50%);
+      display: flex;
       padding: 5px 0;
       position: absolute;
       width: 100%;
       left: 50%;
       top: 0;
+
+      &-r {
+        margin-left: auto;
+      }
+    }
+
+    &__left {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%) translateY(-50%);
+      height: 100%;
+      top: 50%;
+    }
+
+    &__bottom {
+      position: absolute;
+      bottom: 0;
+      transform: translateY(100%) translateX(-50%);
+      width: 100%;
+      left: 50%;
+    }
+
+    &__right {
+      position: absolute;
+      right: 0;
+      transform: translateX(100%) translateY(-50%);
+      height: 100%;
+      top: 50%;
+    }
+
+    &__icon {
+      width: 24px;
+      cursor: pointer;
+
+      > svg {
+        fill: currentColor;
+      }
     }
   }
 }