Add new class for custom ui

src/canvas/view/CanvasView.js

@@ -6,7 +6,8 @@ import {
   getElement,
   getKeyChar,
   isTextNode,
-  getElRect
+  getElRect,
+  getUiClass
 } from 'utils/mixins';
 import FramesView from './FramesView';
 
@@ -353,7 +354,7 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const { el, $el, ppfx, config } = this;
+    const { el, $el, ppfx, config, em } = this;
     $el.html(this.template());
     const $frames = $el.find('[data-frames]');
     this.framesArea = $frames.get(0);
@@ -387,7 +388,7 @@ export default Backbone.View.extend({
     this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`);
     this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`);
     this.toolsEl = toolsEl;
-    this.el.className = this.className;
+    this.el.className = getUiClass(em, this.className);
     this.ready = 1;
     this._renderFrames();
 

src/editor/config/config.js

@@ -316,5 +316,9 @@ export default {
   keepUnusedStyles: 0,
 
   // TODO
-  multiFrames: 0
+  multiFrames: 0,
+
+  // Experimental: don't use.
+  // Avoid default UI styles
+  customUI: false
 };

src/styles/scss/_gjs_canvas.scss

@@ -203,6 +203,12 @@ $guide_pad: 5px !default;
   left: 0;
   top: $canvasTop;
 
+  &.#{$cui-cls} {
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+
   &#{gjs-is(grab)},
   &#{gjs-is(grabbing)} {
     .#{$cv-prefix}canvas__frames {

src/styles/scss/_gjs_variables.scss

@@ -13,6 +13,7 @@ $sm-prefix:         $app-prefix + 'sm-' !default;
 $cv-prefix:         $app-prefix + 'cv-' !default;
 $clm-prefix:        $app-prefix + 'clm-' !default;
 $trt-prefix:        $app-prefix + 'trt-' !default;
+$cui-cls:        $app-prefix + 'cui' !default;
 
 /*
   New Pattern Color System

src/utils/mixins.js

@@ -11,6 +11,11 @@ const matches =
   elProt.mozMatchesSelector ||
   elProt.msMatchesSelector;
 
+export const getUiClass = (em, defCls) => {
+  const { stylePrefix, customUI } = em.getConfig();
+  return [customUI && `${stylePrefix}cui`, defCls].filter(i => i).join(' ');
+};
+
 /**
  * Import styles asynchronously
  * @param {String|Array<String>} styles