General improvements for assets

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.42",
+  "version": "0.9.43",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/asset_manager/index.js

@@ -2,16 +2,15 @@
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)
+ * * [getAllVisible](#getallvisible)
  * * [remove](#remove)
- * * [store](#store)
- * * [load](#load)
  * * [getContainer](#getcontainer)
  * * [getAssetsEl](#getassetsel)
- * * [onClick](#onClick)
- * * [onDblClick](#onDblClick)
  * * [addType](#addtype)
  * * [getType](#gettype)
  * * [getTypes](#gettypes)
+ * * [store](#store)
+ * * [load](#load)
  *
  * Before using this methods you should get first the module from the editor instance, in this way:
  *
@@ -152,7 +151,7 @@ module.exports = () => {
     },
 
     /**
-     * Return global collection
+     * Return the global collection, containing all the assets
      * @return {Collection}
      */
     getAll() {
@@ -160,7 +159,7 @@ module.exports = () => {
     },
 
     /**
-     * Return visible collection
+     * Return the visible collection, which containes assets actually rendered
      * @return {Collection}
      */
     getAllVisible() {
@@ -208,7 +207,7 @@ module.exports = () => {
      * // to load automatically all the stuff
      * var assets = assetManager.load({
      * 	assets: [...]
-     * });
+     * })
      *
      */
     load(data) {
@@ -252,6 +251,15 @@ module.exports = () => {
      * @param  {array} assets Assets to render, without the argument will render
      *                        all global assets
      * @return {HTMLElement}
+     * @example
+     * // Render all assets
+     * assetManager.render();
+     *
+     * // Render some of the assets
+     * const assets = assetManager.getAll();
+     * assetManager.render(assets.filter(
+     *  asset => asset.get('category') == 'cats'
+     * ));
      */
     render(assets) {
       const toRender = assets || this.getAll().models;
@@ -264,13 +272,6 @@ module.exports = () => {
       return this.getContainer();
     },
 
-    postRender(editorView) {
-      c.dropzone && fu.initDropzone(editorView);
-
-      // Leave it here for custom types
-      assets.add(c.assets, {silent: 1});
-    },
-
     /**
      * Add new type
      * @param {string} id Type ID
@@ -307,6 +308,13 @@ module.exports = () => {
 
     //-------
 
+    postRender(editorView) {
+      c.dropzone && fu.initDropzone(editorView);
+
+      // Leave it here for custom types
+      assets.add(c.assets, {silent: 1});
+    },
+
     /**
      * Set new target
      * @param	{Object}	m Model
@@ -328,6 +336,7 @@ module.exports = () => {
     /**
      * Set callback to fire when the asset is clicked
      * @param {function} func
+     * @private
      */
     onClick(func) {
       c.onClick = func;
@@ -336,6 +345,7 @@ module.exports = () => {
     /**
      * Set callback to fire when the asset is double clicked
      * @param {function} func
+     * @private
      */
     onDblClick(func) {
       c.onDblClick = func;

src/asset_manager/view/AssetImageView.js

@@ -1,9 +1,9 @@
 module.exports = require('./AssetView').extend({
 
   events: {
-    click: 'handleClick',
+    click: 'onClick',
-    dblclick: 'handleDblClick',
+    dblclick: 'onDblClick',
-    'click [data-toggle=asset-remove]': 'removeItem',
+    'click [data-toggle=asset-remove]': 'onRemove',
   },
 
   getPreview() {
@@ -36,10 +36,10 @@ module.exports = require('./AssetView').extend({
   },
 
   /**
-   * Trigger when the asset is clicked
+   * Triggered when the asset is clicked
    * @private
    * */
-  handleClick() {
+  onClick() {
     var onClick = this.config.onClick;
     var model = this.model;
     this.collection.trigger('deselectAll');
@@ -53,10 +53,10 @@ module.exports = require('./AssetView').extend({
   },
 
   /**
-   * Trigger when the asset is double clicked
+   * Triggered when the asset is double clicked
    * @private
    * */
-  handleDblClick() {
+  onDblClick() {
     const em = this.em;
     var onDblClick = this.config.onDblClick;
     var model = this.model;
@@ -78,7 +78,7 @@ module.exports = require('./AssetView').extend({
    * Remove asset from collection
    * @private
    * */
-  removeItem(e) {
+  onRemove(e) {
     e.stopPropagation();
     this.model.collection.remove(this.model);
   }

src/asset_manager/view/AssetView.js

@@ -10,6 +10,7 @@ module.exports = Backbone.View.extend({
     this.em = config.em;
     this.className = this.pfx + 'asset';
     this.listenTo(this.model, 'destroy remove', this.remove);
+    this.model.view = this;
     const init = this.init && this.init.bind(this);
     init && init(o);
   },
@@ -23,8 +24,9 @@ module.exports = Backbone.View.extend({
       <div class="${pfx}meta">
         ${this.getInfo()}
       </div>
-      <div class="${pfx}close" data-toggle="asset-remove">&Cross;</div>
+      <div class="${pfx}close" data-toggle="asset-remove">
-      <div style="clear:both"></div>
+        &Cross;
+      </div>
     `;
   },
 

src/canvas/view/CanvasView.js

@@ -102,30 +102,69 @@ module.exports = Backbone.View.extend({
       // For the moment I give the priority to Firefox as it might be
       // CKEditor's issue
 
+      // I need all this styles to make the editor work properly
+      var frameCss = `
+        ${baseCss}
+
+        .${ppfx}dashed :not([contenteditable]) > *[data-highlightable] {
+          outline: 1px dashed rgba(170,170,170,0.7);
+          outline-offset: -2px
+        }
 
-      let layoutCss = `
+        .${ppfx}comp-selected {
-        .${ppfx}comp-selected{
           outline: 3px solid #3b97e3 !important
         }
-        .${ppfx}comp-selected-parent{
+
+        .${ppfx}comp-selected-parent {
           outline: 2px solid ${colorWarn} !important
         }
-      `;
 
-      // I need all this styles to make the editor work properly
+        .${ppfx}no-select {
-      var frameCss = baseCss +
+          user-select: none;
-        '.' + ppfx + 'dashed :not([contenteditable]) > *[data-highlightable]{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
+          -webkit-user-select:none;
-        layoutCss +
+          -moz-user-select: none;
-        '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
+        }
-        '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' +
+
-        '.' + ppfx + 'no-pointer{pointer-events: none}' +
+        .${ppfx}freezed {
-        '.' + ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}' +
+          opacity: 0.5;
-        '.' + ppfx + 'grabbing{cursor: grabbing; cursor: -webkit-grabbing}' +
+          pointer-events: none;
-        '* ::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1)}' +
+        }
-        '* ::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.2)}' +
+
-        '* ::-webkit-scrollbar {width: 10px}' +
+        .${ppfx}no-pointer {
-        (conf.canvasCss || '');
+          pointer-events: none;
-      frameCss += protCss || '';
+        }
+
+        .${ppfx}plh-image {
+          background: #f5f5f5;
+          border: none;
+          height: 50px;
+          width: 50px;
+          display: block;
+          outline: 3px solid #ffca6f;
+          cursor: pointer;
+          outline-offset: -2px
+        }
+
+        .${ppfx}grabbing {
+          cursor: grabbing;
+          cursor: -webkit-grabbing;
+        }
+
+        * ::-webkit-scrollbar-track {
+          background: rgba(0, 0, 0, 0.1)
+        }
+
+        * ::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.2)
+        }
+
+        * ::-webkit-scrollbar {
+          width: 10px
+        }
+
+        ${conf.canvasCss || ''}
+        ${protCss || ''}
+      `;
 
       if (externalStyles) {
         body.append(externalStyles);

src/commands/view/OpenAssets.js

@@ -12,7 +12,9 @@ module.exports = {
     am.onSelect(opts.onSelect);
 
     if (!this.rendered) {
-      am.render();
+      am.render(am.getAll().filter(
+        asset => asset.get('type') == 'image'
+      ));
       this.rendered = 1;
     }
 

src/dom_components/model/ComponentImage.js

@@ -7,8 +7,9 @@ module.exports = Component.extend({
     tagName: 'img',
     src: '',
     void: 1,
-    droppable: false,
+    droppable: 0,
-    resizable: true,
+    highlightable: 0,
+    resizable: 1,
     traits: ['alt']
   }),