mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
8 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