General improvements for assets

9 years ago · d91dc4c3f5
8 changed files with 102 additions and 48 deletions
--- a/dist/grapes.min.js
+++ b/dist/grapes.min.js
--- a/package.json
+++ b/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",
--- a/src/asset_manager/index.js
+++ b/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;
--- a/src/asset_manager/view/AssetImageView.js
+++ b/src/asset_manager/view/AssetImageView.js
@ -1,9 +1,9 @@
 module.exports = require('./AssetView').extend({

  events: {
-    click: 'handleClick',
-    dblclick: 'handleDblClick',
-    'click [data-toggle=asset-remove]': 'removeItem',
+    click: 'onClick',
+    dblclick: 'onDblClick',
+    '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);
  }
--- a/src/asset_manager/view/AssetView.js
+++ b/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 style="clear:both"></div>
+      <div class="${pfx}close" data-toggle="asset-remove">
+        &Cross;
+      </div>
    `;
  },

--- a/src/canvas/view/CanvasView.js
+++ b/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
-      var frameCss = baseCss +
-        '.' + ppfx + 'dashed :not([contenteditable]) > *[data-highlightable]{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
-        layoutCss +
-        '.' + 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 + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}' +
-        '.' + 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 || '');
-      frameCss += protCss || '';
+        .${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}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);
--- a/src/commands/view/OpenAssets.js
+++ b/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;
    }

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