mirror of https://github.com/artf/grapesjs.git
Browse Source
* Move Layers to TS * Update root update in LayerManager. Closes #4083 * Update Layer view * Update ItemsView * Move layer opened container * Clean ItemView * Update import ItemsView * Update layer manager module * Add getComponents to Layers * Add visibility methods to Layers * Add locked check in Layers * Add locked property to Component * Add rename in LayerManager * Up layer listeners * Update layer selection * Update children counter in ItemView * Update visibility methods in ItemView * Add open methods to layers * Update selection * Update hover in layers * Fix layer * Update TS model in LayerManager * Layer config TS * Move ItemView to TS * Move ItemsView to TS * Update TS LayerManager * Update Module and Layers init * Update layer tests * Up item viewpull/4343/head
Artur Arseniev
4 years ago
committed by
GitHub
GitHub
10 changed files with 543 additions and 374 deletions
@ -1,108 +0,0 @@ |
|||
import { isElement } from 'underscore'; |
|||
import defaults from './config/config'; |
|||
import View from './view/ItemView'; |
|||
|
|||
export default () => { |
|||
let em; |
|||
let layers; |
|||
let config = {}; |
|||
|
|||
return { |
|||
name: 'LayerManager', |
|||
|
|||
init(opts = {}) { |
|||
config = { ...defaults, ...opts }; |
|||
config.stylePrefix = opts.pStylePrefix; |
|||
em = config.em; |
|||
return this; |
|||
}, |
|||
|
|||
getConfig() { |
|||
return config; |
|||
}, |
|||
|
|||
onLoad() { |
|||
em && em.on('component:selected', this.componentChanged); |
|||
this.componentChanged(); |
|||
}, |
|||
|
|||
postRender() { |
|||
const elTo = config.appendTo; |
|||
const root = config.root; |
|||
root && this.setRoot(root); |
|||
|
|||
if (elTo) { |
|||
const el = isElement(elTo) ? elTo : document.querySelector(elTo); |
|||
el.appendChild(this.render()); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Set new root for layers |
|||
* @param {HTMLElement|Component|String} el Component to be set as the root |
|||
* @return {self} |
|||
*/ |
|||
setRoot(el) { |
|||
layers && layers.setRoot(el); |
|||
return this; |
|||
}, |
|||
|
|||
/** |
|||
* Get the root of layers |
|||
* @return {Component} |
|||
*/ |
|||
getRoot() { |
|||
return layers && layers.model; |
|||
}, |
|||
|
|||
/** |
|||
* Return the view of layers |
|||
* @return {View} |
|||
*/ |
|||
getAll() { |
|||
return layers; |
|||
}, |
|||
|
|||
/** |
|||
* Triggered when the selected component is changed |
|||
* @private |
|||
*/ |
|||
componentChanged(selected, opts = {}) { |
|||
if (opts.fromLayers) return; |
|||
const opened = em.get('opened'); |
|||
const model = em.getSelected(); |
|||
const scroll = config.scrollLayers; |
|||
let parent = model && model.collection ? model.collection.parent : null; |
|||
for (let cid in opened) opened[cid].set('open', 0); |
|||
|
|||
while (parent) { |
|||
parent.set('open', 1); |
|||
opened[parent.cid] = parent; |
|||
parent = parent.collection ? parent.collection.parent : null; |
|||
} |
|||
|
|||
if (model && scroll) { |
|||
const el = model.viewLayer && model.viewLayer.el; |
|||
el && el.scrollIntoView(scroll); |
|||
} |
|||
}, |
|||
|
|||
render() { |
|||
const ItemView = View.extend(config.extend); |
|||
layers && layers.remove(); |
|||
layers = new ItemView({ |
|||
ItemView, |
|||
level: 0, |
|||
config, |
|||
opened: config.opened || {}, |
|||
model: em.get('DomComponents').getWrapper(), |
|||
}); |
|||
return layers.render().el; |
|||
}, |
|||
|
|||
destroy() { |
|||
layers && layers.remove(); |
|||
[em, layers, config].forEach(i => (i = {})); |
|||
}, |
|||
}; |
|||
}; |
|||
@ -0,0 +1,286 @@ |
|||
import { isString, bindAll } from 'underscore'; |
|||
import { Model } from '../abstract'; |
|||
import Module from '../abstract/Module'; |
|||
import Component from '../dom_components/model/Component'; |
|||
import EditorModel from '../editor/model/Editor'; |
|||
import { hasWin, isComponent, isDef } from '../utils/mixins'; |
|||
import defaults from './config/config'; |
|||
import View from './view/ItemView'; |
|||
|
|||
interface LayerData { |
|||
name: string, |
|||
open: boolean, |
|||
selected: boolean, |
|||
hovered: boolean, |
|||
visible: boolean, |
|||
locked: boolean, |
|||
components: Component[], |
|||
} |
|||
|
|||
export const evAll = 'layer'; |
|||
export const evPfx = `${evAll}:`; |
|||
export const evRoot = `${evPfx}root`; |
|||
export const evComponent = `${evPfx}component`; |
|||
|
|||
const events = { |
|||
all: evAll, |
|||
root: evRoot, |
|||
component: evComponent, |
|||
}; |
|||
|
|||
const styleOpts = { mediaText: '' }; |
|||
|
|||
const propsToListen = ['open', 'status', 'locked', 'custom-name', 'components', 'classes'] |
|||
.map(p => `component:update:${p}`).join(' '); |
|||
|
|||
const isStyleHidden = (style: any = {}) => { |
|||
return (style.display || '').trim().indexOf('none') === 0; |
|||
}; |
|||
|
|||
export default class LayerManager extends Module<typeof defaults> { |
|||
model!: Model; |
|||
|
|||
view?: View; |
|||
|
|||
events = events; |
|||
|
|||
constructor(em: EditorModel) { |
|||
super(em, 'LayerManager', defaults); |
|||
bindAll(this, 'componentChanged', '__onRootChange', '__onComponent'); |
|||
this.model = new Model(this, { opened: {} }); |
|||
// @ts-ignore
|
|||
this.config.stylePrefix = this.config.pStylePrefix; |
|||
return this; |
|||
} |
|||
|
|||
onLoad() { |
|||
const { em, config, model } = this; |
|||
model.listenTo(em, 'component:selected', this.componentChanged); |
|||
model.listenToOnce(em, 'load', () => this.setRoot(config.root)); |
|||
model.on('change:root', this.__onRootChange); |
|||
model.listenTo(em, propsToListen, this.__onComponent); |
|||
this.componentChanged(); |
|||
} |
|||
|
|||
postRender() { |
|||
this.__appendTo(); |
|||
} |
|||
|
|||
/** |
|||
* Set new root for layers |
|||
* @param {Component|string} component Component to be set as the root |
|||
* @return {Component} |
|||
*/ |
|||
setRoot(component: Component | string): Component { |
|||
const wrapper: Component = this.em.getWrapper(); |
|||
let root = isComponent(component) ? component as Component : wrapper; |
|||
|
|||
if (component && isString(component) && hasWin()) { |
|||
root = wrapper.find(component)[0] || wrapper; |
|||
} |
|||
|
|||
this.model.set('root', root); |
|||
|
|||
return root; |
|||
} |
|||
|
|||
/** |
|||
* Get the root of layers |
|||
* @return {Component} |
|||
*/ |
|||
getRoot(): Component { |
|||
return this.model.get('root'); |
|||
} |
|||
|
|||
getLayerData(component: any): LayerData { |
|||
const status = component.get('status'); |
|||
|
|||
return { |
|||
name: component.getName(), |
|||
open: this.isOpen(component), |
|||
selected: status === 'selected', |
|||
hovered: status === 'hovered', // || this.em.getHovered() === component,
|
|||
visible: this.isVisible(component), |
|||
locked: this.isLocked(component), |
|||
components: this.getComponents(component), |
|||
} |
|||
} |
|||
|
|||
setLayerData(component: any, data: Partial<Omit<LayerData, 'components'>>, opts = {}) { |
|||
const { em, config } = this; |
|||
const { open, selected, hovered, visible, locked, name } = data; |
|||
const cmpOpts = { fromLayers: true, ...opts }; |
|||
|
|||
if (isDef(open)) { |
|||
this.setOpen(component, open!); |
|||
} |
|||
if (isDef(selected)) { |
|||
if (selected) { |
|||
em.setSelected(component, cmpOpts); |
|||
const scroll = config.scrollCanvas; |
|||
scroll && component.views.forEach((view: any) => view.scrollIntoView(scroll)); |
|||
} else { |
|||
em.removeSelected(component, cmpOpts); |
|||
} |
|||
} |
|||
if (isDef(hovered) && config.showHover) { |
|||
hovered ? em.setHovered(component, cmpOpts) : em.setHovered(null, cmpOpts); |
|||
} |
|||
if (isDef(visible)) { |
|||
visible !== this.isVisible(component) && this.setVisible(component, visible!); |
|||
} |
|||
if (isDef(locked)) { |
|||
this.setLocked(component, locked!); |
|||
} |
|||
if (isDef(name)) { |
|||
this.setName(component, name!); |
|||
} |
|||
} |
|||
|
|||
getComponents(component: Component): Component[] { |
|||
return component.components().filter((cmp: any) => this.__isLayerable(cmp)); |
|||
} |
|||
|
|||
setOpen(component: Component, value: boolean) { |
|||
component.set('open', value); |
|||
} |
|||
|
|||
isOpen(component: Component): boolean { |
|||
return !!component.get('open'); |
|||
} |
|||
|
|||
/** |
|||
* Update component visibility |
|||
* */ |
|||
setVisible(component: Component, value: boolean) { |
|||
const prevDspKey = '__prev-display'; |
|||
const style: any = component.getStyle(styleOpts); |
|||
const { display } = style; |
|||
|
|||
if (value) { |
|||
const prevDisplay = component.get(prevDspKey); |
|||
delete style.display; |
|||
|
|||
if (prevDisplay) { |
|||
style.display = prevDisplay; |
|||
component.unset(prevDspKey); |
|||
} |
|||
} else { |
|||
display && component.set(prevDspKey, display); |
|||
style.display = 'none'; |
|||
} |
|||
|
|||
component.setStyle(style, styleOpts); |
|||
this.updateLayer(component); |
|||
this.em.trigger('component:toggled'); // Updates Style Manager #2938
|
|||
} |
|||
|
|||
/** |
|||
* Check if the component is visible |
|||
* */ |
|||
isVisible(component: Component): boolean { |
|||
return !isStyleHidden(component.getStyle(styleOpts)); |
|||
} |
|||
|
|||
/** |
|||
* Update component locked value |
|||
* */ |
|||
setLocked(component: Component, value: boolean) { |
|||
component.set('locked', value); |
|||
} |
|||
|
|||
/** |
|||
* Check if the component is locked |
|||
* */ |
|||
isLocked(component: Component): boolean { |
|||
return component.get('locked'); |
|||
} |
|||
|
|||
/** |
|||
* Update component name |
|||
* */ |
|||
setName(component: Component, value: string) { |
|||
component.set('custom-name', value); |
|||
} |
|||
|
|||
/** |
|||
* Return the view of layers |
|||
* @return {View} |
|||
* @private |
|||
*/ |
|||
getAll() { |
|||
return this.view; |
|||
} |
|||
|
|||
/** |
|||
* Triggered when the selected component is changed |
|||
* @private |
|||
*/ |
|||
componentChanged(sel?: Component, opts = {}) { |
|||
// @ts-ignore
|
|||
if (opts.fromLayers) return; |
|||
const { em, config } = this; |
|||
const { scrollLayers } = config; |
|||
const opened = this.model.get('opened'); |
|||
const selected = em.getSelected(); |
|||
let parent = selected?.parent(); |
|||
|
|||
for (let cid in opened) { |
|||
opened[cid].set('open', false); |
|||
delete opened[cid]; |
|||
} |
|||
|
|||
while (parent) { |
|||
parent.set('open', true); |
|||
opened[parent.cid] = parent; |
|||
parent = parent.parent(); |
|||
} |
|||
|
|||
if (selected && scrollLayers) { |
|||
// @ts-ignore
|
|||
const el = selected.viewLayer?.el; |
|||
el?.scrollIntoView(scrollLayers); |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { config, model } = this; |
|||
const ItemView = View.extend(config.extend); |
|||
this.view = new ItemView({ |
|||
el: this.view?.el, |
|||
ItemView, |
|||
level: 0, |
|||
config, |
|||
opened: model.get('opened'), |
|||
model: this.getRoot(), |
|||
module: this, |
|||
}); |
|||
return this.view?.render().el as HTMLElement; |
|||
} |
|||
|
|||
destroy() { |
|||
this.view?.remove(); |
|||
} |
|||
|
|||
__onRootChange() { |
|||
const root = this.getRoot(); |
|||
this.view?.setRoot(root); |
|||
this.em.trigger(evRoot, root); |
|||
} |
|||
|
|||
__onComponent(component: Component) { |
|||
this.updateLayer(component); |
|||
} |
|||
|
|||
__isLayerable(cmp: Component): boolean { |
|||
const tag = cmp.get('tagName'); |
|||
const hideText = this.config.hideTextnode; |
|||
const isValid = !hideText || (!cmp.is('textnode') && tag !== 'br'); |
|||
|
|||
return isValid && cmp.get('layerable'); |
|||
} |
|||
|
|||
updateLayer(component: Component, opts?: any) { |
|||
this.em.trigger(evComponent, component, opts); |
|||
} |
|||
}; |
|||
Loading…
Reference in new issue