Update PropertyFile view

src/style_manager/index.js

@@ -653,7 +653,7 @@ export default () => {
       const isStack = prop.getType() === 'stack';
       const isComposite = prop.getType() === 'composite';
       const opt = { ...opts, __up: true };
-      const canUpdate = !isComposite;
+      const canUpdate = !isComposite && !isStack;
       let newLayers = isStack ? prop.__getLayersFromStyle(style) : [];
       let newProps = isComposite ? prop.__getPropsFromStyle(style) : {};
       let newValue = hasVal ? value : null;

src/style_manager/view/LayerView.js

@@ -12,7 +12,7 @@ export default View.extend({
   template() {
     const { pfx, ppfx } = this;
     const icons = this.em?.getConfig('icons');
-    const iconClose = icons?.close || '⨯';
+    const iconClose = icons?.close || '';
     const iconMove = icons?.move || '';
 
     return `

src/style_manager/view/PropertyFileView.js

@@ -1,10 +1,15 @@
 import { isString } from 'underscore';
-import Backbone from 'backbone';
 import PropertyView from './PropertyView';
 
-const $ = Backbone.$;
-
 export default PropertyView.extend({
+  events() {
+    return {
+      ...PropertyView.prototype.events,
+      'click [data-clear-asset]': 'clear',
+      'click [data-open-assets]': 'openAssetManager',
+    };
+  },
+
   templateInput() {
     const { pfx, em } = this;
     const icons = this.em?.getConfig('icons');
@@ -14,128 +19,41 @@ export default PropertyView.extend({
       <div class="${pfx}field ${pfx}file">
         <div id='${pfx}input-holder'>
           <div class="${pfx}btn-c">
-            <button class="${pfx}btn" id="${pfx}images" type="button">
+            <button class="${pfx}btn" id="${pfx}images" type="button" data-open-assets>
               ${em.t('styleManager.fileButton')}
             </button>
           </div>
           <div style="clear:both;"></div>
         </div>
-        <div id="${pfx}preview-box" class="${pfx}preview-file">
-          <div id="${pfx}preview-file" class="${pfx}preview-file-cnt"></div>
-          <div id="${pfx}close" class="${pfx}preview-file-close">${iconClose}</div>
+        <div id="${pfx}preview-box" class="${pfx}preview-file" data-preview-box>
+          <div id="${pfx}preview-file" class="${pfx}preview-file-cnt" data-preview></div>
+          <div id="${pfx}close" class="${pfx}preview-file-close" data-clear-asset>${iconClose}</div>
         </div>
       </div>
     `;
   },
 
-  init() {
-    const em = this.em;
-    this.modal = em.get('Modal');
-    this.am = em.get('AssetManager');
-    this.events['click #' + this.pfx + 'close'] = 'removeFile';
-    this.events['click #' + this.pfx + 'images'] = 'openAssetManager';
-    this.delegateEvents();
-  },
-
-  onRender() {
-    if (!this.$input) {
-      const plh = this.model.getDefaultValue();
-      this.$input = $(`<input placeholder="${plh}">`);
-    }
-
-    if (!this.$preview) {
-      this.$preview = this.$el.find('#' + this.pfx + 'preview-file');
-    }
-
-    if (!this.$previewBox) {
-      this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box');
-    }
-
-    this.setValue(this.componentValue, 0);
-  },
-
-  clearCached() {
-    PropertyView.prototype.clearCached.apply(this, arguments);
-    this.$preview = null;
-    this.$previewBox = null;
-  },
-
-  setValue(value, f) {
-    PropertyView.prototype.setValue.apply(this, arguments);
-    this.setPreviewView(value && value != this.model.getDefaultValue());
-    this.setPreview(value);
+  __setValueInput(value) {
+    const { model, el } = this;
+    const valueDef = model.getDefaultValue();
+    const prvBoxEl = el.querySelector('[data-preview-box]');
+    const prvEl = el.querySelector('[data-preview]');
+    prvBoxEl.style.display = !value || value === valueDef ? 'none' : '';
+    prvEl.style.backgroundImage = value || model.getDefaultValue();
   },
 
-  /**
-   * Change visibility of the preview box
-   * @param bool Visibility
-   *
-   * @return void
-   * */
-  setPreviewView(v) {
-    const pv = this.$previewBox;
-    pv && pv[v ? 'addClass' : 'removeClass'](`${this.pfx}show`);
-    pv && pv.css({ display: v ? 'block' : 'none' });
-  },
-
-  /**
-   * Spread url
-   * @param string Url
-   *
-   * @return void
-   * */
-  spreadUrl(url) {
-    this.model.set('value', url);
-    this.setPreviewView(1);
-  },
-
-  /**
-   * Shows file preview
-   * @param string Value
-   * */
-  setPreview(value) {
-    const preview = this.$preview;
-    value = value && value.indexOf('url(') < 0 ? `url(${value})` : value;
-    preview && preview.css('background-image', value);
-  },
-
-  /** @inheritdoc */
-  cleanValue() {
-    this.setPreviewView(0);
-    this.model.set({ value: '' }, { silent: true });
-  },
-
-  /**
-   * Remove file from input
-   *
-   * @return void
-   * */
-  removeFile(...args) {
-    this.model.set('value', this.model.getDefaultValue());
-    PropertyView.prototype.cleanValue.apply(this, args);
-    this.setPreviewView(0);
-  },
-
-  /**
-   * Open dialog for image selecting
-   * @param  {Object}  e  Event
-   *
-   * @return void
-   * */
   openAssetManager() {
-    const { em } = this;
-    const am = em && em.get('AssetManager');
-    const handleAsset = a => this.spreadUrl(isString(a) ? a : a.get('src'));
-
-    am &&
-      am.open({
-        select(asset, complete) {
-          handleAsset(asset);
-          complete && am.close();
-        },
-        target: this.getTargetModel(),
-        types: ['image'],
-        accept: 'image/*',
-      });
+    const am = this.em?.get('AssetManager');
+
+    am?.open({
+      select: (asset, complete) => {
+        const url = isString(asset) ? asset : asset.get('src');
+        this.model.upValue(url, { partial: !complete });
+        complete && am.close();
+      },
+      target: this.getTargetModel(),
+      types: ['image'],
+      accept: 'image/*',
+    });
   },
 });

src/style_manager/view/PropertyView.js

@@ -21,7 +21,7 @@ export default Backbone.View.extend({
     const { icon = '', info = '' } = model.attributes;
     const label = model.getLabel();
     const icons = em?.getConfig('icons');
-    const iconClose = icons?.close || '⨯';
+    const iconClose = icons?.close || '';
 
     return `
       <span class="${pfx}icon ${icon}" title="${info}">
@@ -395,6 +395,9 @@ export default Backbone.View.extend({
     //   'onValueChange',
     //   this.model.getName(),
     //   {
+    //     cid: this.model.cid,
+    //     val,
+    //     value: this.model.get('value'),
     //     fullValue: this.model.getFullValue(),
     //     hasValue: this.model.hasValue(),
     //     hasValueLocal: this.model.hasValue({ noParent: true }),
@@ -579,9 +582,9 @@ export default Backbone.View.extend({
    * @param {string} value
    * @private
    */
-  setRawValue(value) {
-    this.setValue(this.model.parseValue(value));
-  },
+  // setRawValue(value) {
+  //   this.setValue(this.model.parseValue(value));
+  // },
 
   /**
    * Update the element input.