mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
4 years ago
20 changed files with 420 additions and 587 deletions
@ -1,102 +0,0 @@ |
|||
import { includes } from 'underscore'; |
|||
import Backbone from 'backbone'; |
|||
import View from './View'; |
|||
import Model from './Model'; |
|||
/*interface DomainView<TView, TModel>{ |
|||
constructor(model: TModel): TView |
|||
}*/ |
|||
type TModel<TCollection> = TCollection extends Backbone.Collection<infer TModel>? TModel: Model; |
|||
|
|||
export default abstract class DomainViews<TCollection extends Backbone.Collection<Model>, TItemView extends View> extends View<TModel<TCollection>> { |
|||
// Defines the View per type
|
|||
itemsView = ''; |
|||
|
|||
protected itemType = 'type'; |
|||
|
|||
reuseView = false; |
|||
|
|||
viewCollection: TItemView[] = []; |
|||
constructor(opts: any = {}, autoAdd = false) { |
|||
super(opts); |
|||
autoAdd && this.listenTo(this.collection, 'add', this.addTo); |
|||
} |
|||
|
|||
/** |
|||
* Add new model to the collection |
|||
* @param {Model} model |
|||
* @private |
|||
* */ |
|||
private addTo(model: TModel<TCollection>) { |
|||
this.add(model); |
|||
} |
|||
|
|||
private itemViewNotFound(type: string) { |
|||
/*const { em, ns } = this; |
|||
const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`; |
|||
em?.logWarning(warn);*/ |
|||
} |
|||
protected abstract renderView(model: TModel<TCollection>, itemType: string): TItemView; |
|||
|
|||
/** |
|||
* Render new model inside the view |
|||
* @param {Model} model |
|||
* @param {Object} fragment Fragment collection |
|||
* @private |
|||
* */ |
|||
private add(model: TModel<TCollection>, fragment?: DocumentFragment) { |
|||
const { config, reuseView, viewCollection, itemsView = {} } = this; |
|||
var frag = fragment || null; |
|||
var typeField = model.get(this.itemType); |
|||
let view; |
|||
|
|||
//@ts-ignore
|
|||
if (model.view && reuseView) { |
|||
//@ts-ignore
|
|||
view = model.view; |
|||
} else { |
|||
view = this.renderView(model, typeField); |
|||
} |
|||
|
|||
viewCollection.push(view); |
|||
const rendered = view.render().el; |
|||
|
|||
if (frag) frag.appendChild(rendered); |
|||
else this.$el.append(rendered); |
|||
} |
|||
|
|||
render() { |
|||
var frag = document.createDocumentFragment(); |
|||
this.clearItems(); |
|||
this.$el.empty(); |
|||
|
|||
if (this.collection.length) |
|||
this.collection.each((model) => { |
|||
this.add(model, frag); |
|||
}, this); |
|||
|
|||
this.$el.append(frag); |
|||
this.onRender(); |
|||
return this; |
|||
} |
|||
|
|||
onRender() {} |
|||
|
|||
onRemoveBefore(items: TItemView[], opts: any) {} |
|||
onRemove(items: TItemView[], opts: any) {} |
|||
|
|||
remove(opts: any = {}) { |
|||
const { viewCollection } = this; |
|||
this.onRemoveBefore(viewCollection, opts); |
|||
this.clearItems(); |
|||
Backbone.View.prototype.remove.apply(this, opts); |
|||
this.onRemove(viewCollection, opts); |
|||
return this; |
|||
} |
|||
|
|||
clearItems() { |
|||
const items = this.viewCollection || []; |
|||
// TODO Traits do not update the target anymore
|
|||
// items.forEach(item => item.remove());
|
|||
// this.items = [];
|
|||
} |
|||
} |
|||
@ -1,29 +1,19 @@ |
|||
import Backbone from "backbone"; |
|||
import Model from "./Model"; |
|||
import Module, { IBaseModule } from "./Module"; |
|||
import Backbone from 'backbone'; |
|||
import Model from './Model'; |
|||
|
|||
export default class View< |
|||
TModel extends Model = Model, |
|||
TElement extends Element = HTMLElement |
|||
> extends Backbone.View<TModel, TElement> { |
|||
protected get pfx() { |
|||
return (this.em.config as any).stylePrefix || ""; |
|||
return (this.model.module.em.config as any).stylePrefix || ''; |
|||
} |
|||
|
|||
protected get ppfx() { |
|||
return this.pfx + this.config.stylePrefix || ""; |
|||
} |
|||
|
|||
protected get module(): TModel extends Model<infer M>? M: unknown { |
|||
//console.log((this.collection.first as any).module)
|
|||
return this.model?.module ?? (this.collection as any).module; |
|||
return this.pfx + this.model.module.config.stylePrefix || ''; |
|||
} |
|||
|
|||
protected get em() { |
|||
return this.module.em; |
|||
} |
|||
|
|||
protected get config(): TModel extends Model<infer M> ? (M extends IBaseModule<infer C> ? C : unknown) : unknown{ |
|||
return this.module.config as any |
|||
return this.model.module.em; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,21 @@ |
|||
import DomainViews from '../../domain_abstract/view/DomainViews'; |
|||
import FrameWrapView from './FrameWrapView'; |
|||
|
|||
export default class FramesView extends DomainViews { |
|||
constructor(opts = {}, config) { |
|||
super(opts, config, true); |
|||
this.listenTo(this.collection, 'reset', this.render); |
|||
} |
|||
|
|||
onRemoveBefore(items, opts) { |
|||
items.forEach(item => item.remove(opts)); |
|||
} |
|||
|
|||
onRender() { |
|||
const { config, $el } = this; |
|||
const { em } = config; |
|||
em && $el.attr({ class: `${em.getConfig().stylePrefix}frames` }); |
|||
} |
|||
} |
|||
|
|||
FramesView.prototype.itemView = FrameWrapView; |
|||
@ -1,26 +0,0 @@ |
|||
import DomainViews from '../../abstract/DomainViews'; |
|||
import Frames from '../model/Frames'; |
|||
import CanvasView from './CanvasView'; |
|||
import FrameWrapView from './FrameWrapView'; |
|||
|
|||
export default class FramesView extends DomainViews<Frames, FrameWrapView> { |
|||
canvasView: CanvasView; |
|||
constructor(opts = {}, config: any) { |
|||
super(opts, true); |
|||
//console.log(this.collection)
|
|||
this.listenTo(this.collection, 'reset', this.render); |
|||
this.canvasView = config.canvasView |
|||
} |
|||
|
|||
onRemoveBefore(items: FrameWrapView[], opts = {}) { |
|||
items.forEach(item => item.remove(opts)); |
|||
} |
|||
|
|||
onRender() { |
|||
const { $el, em } = this; |
|||
em && $el.attr({ class: `${em.config.stylePrefix}frames` }); |
|||
} |
|||
protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)} |
|||
} |
|||
|
|||
//FramesView.prototype.itemView = FrameWrapView;
|
|||
Loading…
Reference in new issue