mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
7 years ago
19 changed files with 534 additions and 507 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,77 @@ |
|||
import { bindAll } from 'underscore'; |
|||
import { on, off, getKeyChar } from 'utils/mixins'; |
|||
import Dragger from 'utils/Dragger'; |
|||
|
|||
module.exports = { |
|||
run(ed) { |
|||
bindAll(this, 'onKeyUp', 'enableDragger', 'disableDragger'); |
|||
this.editor = ed; |
|||
this.canvasModel = this.canvas.getCanvasView().model; |
|||
this.toggleMove(1); |
|||
}, |
|||
stop(ed) { |
|||
this.toggleMove(); |
|||
this.disableDragger(); |
|||
}, |
|||
|
|||
onKeyUp(ev) { |
|||
if (getKeyChar(ev) === ' ') { |
|||
this.editor.stopCommand(this.id); |
|||
} |
|||
}, |
|||
|
|||
enableDragger(ev) { |
|||
this.toggleDragger(1, ev); |
|||
}, |
|||
|
|||
disableDragger(ev) { |
|||
this.toggleDragger(0, ev); |
|||
}, |
|||
|
|||
toggleDragger(enable, ev) { |
|||
const { canvasModel, em } = this; |
|||
let { dragger } = this; |
|||
const methodCls = enable ? 'add' : 'remove'; |
|||
this.getCanvas().classList[methodCls](`${this.ppfx}is__grabbing`); |
|||
|
|||
if (!dragger) { |
|||
dragger = Dragger.init({ |
|||
getPosition() { |
|||
return { |
|||
x: canvasModel.get('x'), |
|||
y: canvasModel.get('y') |
|||
}; |
|||
}, |
|||
setPosition({ x, y }) { |
|||
canvasModel.set({ x, y }); |
|||
}, |
|||
onStart(ev, dragger) { |
|||
em.trigger('canvas:move:start', dragger); |
|||
}, |
|||
onDrag(ev, dragger) { |
|||
em.trigger('canvas:move', dragger); |
|||
}, |
|||
onEnd(ev, dragger) { |
|||
em.trigger('canvas:move:end', dragger); |
|||
} |
|||
}); |
|||
this.dragger = dragger; |
|||
} |
|||
|
|||
enable ? dragger.start(ev) : dragger.stop(); |
|||
}, |
|||
|
|||
toggleMove(enable) { |
|||
const { ppfx } = this; |
|||
const methodCls = enable ? 'add' : 'remove'; |
|||
const methodEv = enable ? 'on' : 'off'; |
|||
const methodsEv = { on, off }; |
|||
const canvas = this.getCanvas(); |
|||
const classes = [`${ppfx}is__grab`]; |
|||
!enable && classes.push(`${ppfx}is__grabbing`); |
|||
classes.forEach(cls => canvas.classList[methodCls](cls)); |
|||
methodsEv[methodEv](document, 'keyup', this.onKeyUp); |
|||
methodsEv[methodEv](canvas, 'mousedown', this.enableDragger); |
|||
methodsEv[methodEv](document, 'mouseup', this.disableDragger); |
|||
} |
|||
}; |
|||
@ -1,34 +0,0 @@ |
|||
import _ from 'underscore'; |
|||
import Backbone from 'backbone'; |
|||
var InsertCustom = require('./InsertCustom'); |
|||
|
|||
module.exports = _.extend({}, InsertCustom, { |
|||
/** |
|||
* Trigger before insert |
|||
* @param {Object} object |
|||
* @private |
|||
* |
|||
* */ |
|||
beforeInsert(object) { |
|||
object.type = 'image'; |
|||
object.style = {}; |
|||
object.attributes = {}; |
|||
object.attributes.onmousedown = 'return false'; |
|||
if ( |
|||
this.config.firstCentered && |
|||
this.getCanvasWrapper() == this.sorter.target |
|||
) { |
|||
object.style.margin = '0 auto'; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Trigger after insert |
|||
* @param {Object} model Model created after insert |
|||
* @private |
|||
* */ |
|||
afterInsert(model) { |
|||
model.trigger('dblclick'); |
|||
if (this.sender) this.sender.set('active', false); |
|||
} |
|||
}); |
|||
@ -1,76 +0,0 @@ |
|||
import _ from 'underscore'; |
|||
import Backbone from 'backbone'; |
|||
var CreateComponent = require('./CreateComponent'); |
|||
|
|||
module.exports = _.extend({}, CreateComponent, { |
|||
init(...args) { |
|||
CreateComponent.init.apply(this, args); |
|||
_.bindAll(this, 'insertComponent'); |
|||
this.allowDraw = 0; |
|||
}, |
|||
|
|||
/** |
|||
* Run method |
|||
* @private |
|||
* */ |
|||
run(em, sender, options) { |
|||
this.em = em; |
|||
this.sender = sender; |
|||
this.opt = options || {}; |
|||
this.$wr = this.$wrapper; |
|||
this.enable(); |
|||
}, |
|||
|
|||
enable(...args) { |
|||
CreateComponent.enable.apply(this, args); |
|||
this.$wr.on('click', this.insertComponent); |
|||
}, |
|||
|
|||
/** |
|||
* Start insert event |
|||
* @private |
|||
* */ |
|||
insertComponent() { |
|||
this.$wr.off('click', this.insertComponent); |
|||
this.stopSelectPosition(); |
|||
var object = this.buildContent(); |
|||
this.beforeInsert(object); |
|||
var index = this.sorter.lastPos.index; |
|||
// By default, collections do not trigger add event, so silent is used
|
|||
var model = this.create(this.sorter.target, object, index, null, { |
|||
silent: false |
|||
}); |
|||
|
|||
if (this.opt.terminateAfterInsert && this.sender) |
|||
this.sender.set('active', false); |
|||
else this.enable(); |
|||
|
|||
if (!model) return; |
|||
|
|||
this.afterInsert(model, this); |
|||
}, |
|||
|
|||
/** |
|||
* Trigger before insert |
|||
* @param {Object} obj |
|||
* @private |
|||
* */ |
|||
beforeInsert(obj) {}, |
|||
|
|||
/** |
|||
* Trigger after insert |
|||
* @param {Object} model Model created after insert |
|||
* @private |
|||
* */ |
|||
afterInsert(model) {}, |
|||
|
|||
/** |
|||
* Create different object, based on content, to insert inside canvas |
|||
* |
|||
* @return {Object} |
|||
* @private |
|||
* */ |
|||
buildContent() { |
|||
return this.opt.content || {}; |
|||
} |
|||
}); |
|||
@ -1,27 +0,0 @@ |
|||
import _ from 'underscore'; |
|||
import Backbone from 'backbone'; |
|||
var CreateComponent = require('./CreateComponent'); |
|||
|
|||
module.exports = _.extend({}, CreateComponent, { |
|||
/** |
|||
* This event is triggered at the beginning of a draw operation |
|||
* @param {Object} component Object component before creation |
|||
* @private |
|||
* */ |
|||
beforeDraw(component) { |
|||
component.type = 'text'; |
|||
if (!component.style) component.style = {}; |
|||
component.style.padding = '10px'; |
|||
}, |
|||
|
|||
/** |
|||
* This event is triggered at the end of a draw operation |
|||
* @param {Object} model Component model created |
|||
* @private |
|||
* */ |
|||
afterDraw(model) { |
|||
if (!model || !model.set) return; |
|||
model.trigger('focus'); |
|||
if (this.sender) this.sender.set('active', false); |
|||
} |
|||
}); |
|||
@ -0,0 +1,18 @@ |
|||
$gjs-is-prefix: '.#{$app-prefix}is__'; |
|||
|
|||
@function gjs-is($name) { |
|||
@return '#{$gjs-is-prefix}#{$name}'; |
|||
} |
|||
|
|||
#{$gjs-is-prefix} { |
|||
&grab, |
|||
&grab * { |
|||
cursor: grab !important; |
|||
} |
|||
|
|||
&grabbing, |
|||
&grabbing * { |
|||
@include user-select(none); |
|||
cursor: grabbing !important; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue