tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Move positional changes from FrameView to FrameWrapView

pull/2524/head
Artur Arseniev 7 years ago
parent
994c38020f
commit
d27c93b549
4 changed files with 62 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 62
      src/canvas/view/FrameView.js
  3. 56
      src/canvas/view/FrameWrapView.js
  4. 6
      src/styles/scss/_gjs_canvas.scss

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

62
src/canvas/view/FrameView.js
View File

@ -11,9 +11,6 @@ import {
} from 'utils/dom';
import { on, off, setViewEl, getPointerEvent } from 'utils/mixins';
const motionsEv =
'transitionend oTransitionEnd transitionend webkitTransitionEnd';
export default Backbone.View.extend({
tagName: 'iframe',
@ -22,13 +19,7 @@ export default Backbone.View.extend({
},
initialize(o) {
bindAll(
this,
'updateOffset',
'updateClientY',
'stopAutoscroll',
'autoscroll'
);
bindAll(this, 'updateClientY', 'stopAutoscroll', 'autoscroll');
const { model, el } = this;
this.config = {
...(o.config || {}),
@ -37,23 +28,10 @@ export default Backbone.View.extend({
this.ppfx = this.config.pStylePrefix || '';
this.em = this.config.em;
this.listenTo(model, 'change:head', this.updateHead);
this.listenTo(model, 'change:x change:y', this.updatePos);
this.listenTo(model, 'change:width change:height', this.updateDim);
this.updatePos();
model.view = this;
setViewEl(el, this);
},
updatePos(md) {
const { model, el } = this;
const { x, y } = model.attributes;
const { style } = el;
this.rect = 0;
style.left = isNaN(x) ? x : `${x}px`;
style.top = isNaN(y) ? y : `${y}px`;
md && this.updateOffset();
},
/**
* Update `<head>` content of the frame
*/
@ -63,43 +41,6 @@ export default Backbone.View.extend({
appendVNodes(headEl, this.model.getHead());
},
/**
* Update dimensions of the frame
* @private
*/
updateDim() {
const { em, el, $el, model } = this;
const { width, height } = model.attributes;
const { style } = el;
const currW = style.width || '';
const currH = style.height || '';
const newW = width;
const newH = height;
const noChanges = currW == newW && currH == newH;
const un = 'px';
this.rect = 0;
style.width = isNumber(newW) ? `${newW}${un}` : newW;
style.height = isNumber(newH) ? `${newH}${un}` : newH;
// Set width and height from DOM (should be done only once)
if (isNull(width) || isNull(height)) {
const newDims = {
...(!width ? { width: el.offsetWidth } : {}),
...(!height ? { height: el.offsetHeight } : {})
};
model.set(newDims, { silent: 1 });
}
// Prevent fixed highlighting box which appears when on
// component hover during the animation
em.stopDefault({ preserveSelected: 1 });
noChanges ? this.updateOffset() : $el.one(motionsEv, this.updateOffset);
},
updateOffset: debounce(function() {
this.em.runDefault({ preserveSelected: 1 });
}),
getEl() {
return this.el;
},
@ -447,7 +388,6 @@ export default Backbone.View.extend({
})
);
this.updateDim();
model.trigger('loaded');
}
});

56
src/canvas/view/FrameWrapView.js
View File

@ -1,8 +1,11 @@
import Backbone from 'backbone';
import FrameView from './FrameView';
import { bindAll } from 'underscore';
import { bindAll, isNumber, isNull, debounce } from 'underscore';
import { createEl } from 'utils/dom';
const motionsEv =
'transitionend oTransitionEnd transitionend webkitTransitionEnd';
export default Backbone.View.extend({
initialize(opts = {}, conf = {}) {
bindAll(this, 'onScroll', 'frameLoaded');
@ -17,6 +20,56 @@ export default Backbone.View.extend({
this.em = config.em;
this.ppfx = config.pStylePrefix || '';
this.frame = new FrameView({ model, config });
this.listenTo(model, 'change:x change:y', this.updatePos);
this.listenTo(model, 'loaded change:width change:height', this.updateDim);
this.updatePos();
},
updateOffset: debounce(function() {
this.em.runDefault({ preserveSelected: 1 });
}),
updatePos(md) {
const { model, el } = this;
const { x, y } = model.attributes;
const { style } = el;
this.frame.rect = 0;
style.left = isNaN(x) ? x : `${x}px`;
style.top = isNaN(y) ? y : `${y}px`;
md && this.updateOffset();
},
/**
* Update dimensions of the frame
* @private
*/
updateDim() {
const { em, el, $el, model } = this;
const { width, height } = model.attributes;
const { style } = el;
const currW = style.width || '';
const currH = style.height || '';
const newW = width;
const newH = height;
const noChanges = currW == newW && currH == newH;
const un = 'px';
this.frame.rect = 0;
style.width = isNumber(newW) ? `${newW}${un}` : newW;
style.height = isNumber(newH) ? `${newH}${un}` : newH;
// Set width and height from DOM (should be done only once)
if (isNull(width) || isNull(height)) {
const newDims = {
...(!width ? { width: el.offsetWidth } : {}),
...(!height ? { height: el.offsetHeight } : {})
};
model.set(newDims, { silent: 1 });
}
// Prevent fixed highlighting box which appears when on
// component hover during the animation
em.stopDefault({ preserveSelected: 1 });
noChanges ? this.updateOffset() : $el.one(motionsEv, this.updateOffset);
},
onScroll() {
@ -77,7 +130,6 @@ export default Backbone.View.extend({
this.elTools = elTools;
cv.toolsWrapper.appendChild(elTools); // TODO remove on frame remove
frame.model.on('loaded', this.frameLoaded);
return this;
}
});

6
src/styles/scss/_gjs_canvas.scss
View File

@ -107,6 +107,12 @@ $guide_pad: 5px;
vertical-align: middle;
}
}
&frame-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
}
.#{$cv-prefix}canvas {

Write Preview
Loading…
Cancel
Save