diff --git a/index.html b/index.html index da95cc944..8ab3059a2 100755 --- a/index.html +++ b/index.html @@ -1293,6 +1293,26 @@ }, });*/ + var resizerBtm = {tl: 0, tc: 0, tr: 0, cl: 0, cr:0, bl:0, br: 0}; + bm.add('column1', { + label: 'Col1', + content: { + 'custom-name': 'Row grid', + classes: ['row'], + droppable: '[data-column]', + attributes: {'data-columns': 1}, + resizable: resizerBtm, + components: [{ + classes: ['cell'], + resizable: resizerBtm, + attributes: {'data-column': 1}, + draggable: '[data-columns]', + 'custom-name': 'Cell grid', + }] + //components: `
` + }, + }); + var domc = editor.DomComponents; var defaultType = domc.getType('default'); var defaultModel = defaultType.model; diff --git a/src/commands/view/Resize.js b/src/commands/view/Resize.js index 604a4e4c5..01db019e5 100644 --- a/src/commands/view/Resize.js +++ b/src/commands/view/Resize.js @@ -7,18 +7,18 @@ module.exports = { var canvasResizer = this.canvasResizer; var options = opt.options || {}; var canvasView = canvas.getCanvasView(); + options.ratioDefault = 1; + options.appendTo = canvas.getResizerEl(); + options.prefix = editor.getConfig().stylePrefix; + options.posFetcher = canvasView.getElementPos.bind(canvasView); + options.mousePosFetcher = canvas.getMouseRelativePos; // Create the resizer for the canvas if not yet created if(!canvasResizer || opt.forceNew) { - options.ratioDefault = 1; - options.appendTo = canvas.getResizerEl(); - options.prefix = editor.getConfig().stylePrefix; - options.posFetcher = canvasView.getElementPos.bind(canvasView); - options.mousePosFetcher = canvas.getMouseRelativePos; this.canvasResizer = editor.Utils.Resizer.init(options); canvasResizer = this.canvasResizer; } - + console.log('Resizer opts', options, el); canvasResizer.setOptions(options); canvasResizer.focus(el); return canvasResizer; diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 8b9ff90ab..e94ff6d5b 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -329,6 +329,7 @@ module.exports = { var resizeClass = pfx + 'resizing'; var model = em.get('selectedComponent'); var resizable = model.get('resizable'); + var options = {}; var modelToStyle; var toggleBodyClass = (method, e, opts) => { @@ -340,11 +341,14 @@ module.exports = { } }; + if (editor && resizable) { - let options = { - onStart(e, opts) { + console.log('Init resize on ', model, options); + options = { + onStart: function(e, opts) { toggleBodyClass('addClass', e, opts); modelToStyle = em.get('StyleManager').getModelToStyle(model); + console.log(modelToStyle, 'model', model); showOffsets = 0; }, // Update all positioned elements (eg. component toolbar) diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 8b5145bed..0a65b5684 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -46,17 +46,46 @@ class Resizer { * @param {Object} options */ constructor(opts = {}) { - var pfx = opts.prefix || ''; - var appendTo = opts.appendTo || document.body; + this.setOptions(opts); + return this; + } + /** + * Setup options + * @param {Object} options + */ + setOptions(options = {}) { + // Setup default options for (var name in defaults) { - if (!(name in opts)) - opts[name] = defaults[name]; + if (!(name in options)) + options[name] = defaults[name]; + } + + this.opts = options; + this.setup(); + } + + /** + * Setup resizer + */ + setup() { + const opts = this.opts; + const pfx = opts.prefix || ''; + const appendTo = opts.appendTo || document.body; + let container; + + // Create container if not yet exist + if (!this.container) { + container = document.createElement('div'); + container.className = pfx + 'resizer-c'; + appendTo.appendChild(container); + this.container = container; } - var container = document.createElement('div'); - container.className = pfx + 'resizer-c'; - appendTo.appendChild(container); + container = this.container; + while (container.firstChild) { + container.removeChild(container.firstChild); + } // Create handlers var handlers = { @@ -70,14 +99,14 @@ class Resizer { br: opts.br ? createHandler('br', opts) : '', }; - for (var n in handlers) { - if(handlers[n]) - container.appendChild(handlers[n]); + for (let n in handlers) { + const handler = handlers[n]; + if (handler) { + container.appendChild(handler); + } } - this.container = container; this.handlers = handlers; - this.opts = opts; this.handleKeyDown = this.handleKeyDown.bind(this); this.handleMouseDown = this.handleMouseDown.bind(this); this.move = this.move.bind(this); @@ -88,22 +117,6 @@ class Resizer { this.onStart = opts.onStart; this.onMove = opts.onMove; this.onEnd = opts.onEnd; - - return this; - } - - /** - * Update options - * @param {Object} options - */ - setOptions(options) { - var opts = options || {}; - - for (var opt in opts) { - if(opt in defaults) { - this[opt] = opts[opt]; - } - } } /**