diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index da307339b..6088f23b4 100644
--- a/src/style_manager/index.js
+++ b/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;
diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js
index 6f9a3ac44..acdbfe068 100644
--- a/src/style_manager/view/LayerView.js
+++ b/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 `
diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js
index ae6680122..1db561f86 100644
--- a/src/style_manager/view/PropertyFileView.js
+++ b/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({
-
`;
},
- 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 = $(`
`);
- }
-
- 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/*',
+ });
},
});
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 11f394fb9..b8bfb41c4 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/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 `
@@ -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.