X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;ds=inline;f=skyquake%2Fplugins%2Fcomposer%2Fsrc%2Fsrc%2Fcomponents%2FComposerApp.js;h=d626ea43149dd981e7f164d1dca12cce0177b285;hb=fc697677f2fa0cc0cd1edef9dad0458007cf9fa1;hp=e2cf2840fb524edcfbe2422fc564d4e357e1f0ed;hpb=e5667861e719a854dc7b58e6cf26c7c489238be3;p=osm%2FUI.git diff --git a/skyquake/plugins/composer/src/src/components/ComposerApp.js b/skyquake/plugins/composer/src/src/components/ComposerApp.js index e2cf2840f..d626ea431 100644 --- a/skyquake/plugins/composer/src/src/components/ComposerApp.js +++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js @@ -62,216 +62,218 @@ const clearDragState = () => ComposerAppActions.setDragState(null); const ComposerApp = React.createClass({ - mixins: [PureRenderMixin], - getInitialState() { - return ComposerAppStore.getState(); - }, - getDefaultProps() { - return {}; - }, - componentWillMount() { - if (clearLocalStorage) { - window.localStorage.clear(); - } + mixins: [PureRenderMixin], + getInitialState() { + return ComposerAppStore.getState(); + }, + getDefaultProps() { + return {}; + }, + componentWillMount() { + if (clearLocalStorage) { + window.localStorage.clear(); + } if(this.item) { FileManagerActions.openFileManagerSockets(); } - this.state.isLoading = CatalogDataStore.getState().isLoading; - ComposerAppStore.listen(this.onChange); - CatalogDataStore.listen(this.onCatalogDataChanged); - window.addEventListener('resize', this.resize); - window.onbeforeunload = this.onBeforeUnload; - // prevent browser from downloading any drop outside of our specific drop zones - window.addEventListener('dragover', preventDefault); - window.addEventListener('drop', preventDefault); - // ensure drags initiated in the app clear the state on drop - window.addEventListener('drop', clearDragState); - DeletionManager.addEventListeners(); - }, - componentWillUnmount() { - window.removeEventListener('resize', this.resize); - window.removeEventListener('dragover', preventDefault); - window.removeEventListener('drop', preventDefault); - window.removeEventListener('drop', clearDragState); + this.state.isLoading = CatalogDataStore.getState().isLoading; + ComposerAppStore.listen(this.onChange); + CatalogDataStore.listen(this.onCatalogDataChanged); + window.addEventListener('resize', this.resize); + window.onbeforeunload = this.onBeforeUnload; + // prevent browser from downloading any drop outside of our specific drop zones + window.addEventListener('dragover', preventDefault); + window.addEventListener('drop', preventDefault); + // ensure drags initiated in the app clear the state on drop + window.addEventListener('drop', clearDragState); + DeletionManager.addEventListeners(); + }, + componentWillUnmount() { + window.removeEventListener('resize', this.resize); + window.removeEventListener('dragover', preventDefault); + window.removeEventListener('drop', preventDefault); + window.removeEventListener('drop', clearDragState); FileManagerActions.closeFileManagerSockets(); - // resizeManager automatically registered its event handlers - resizeManager.removeAllEventListeners(); - ComposerAppStore.unlisten(this.onChange); - CatalogDataStore.unlisten(this.onCatalogDataChanged); - DeletionManager.removeEventListeners(); - TooltipManager.removeEventListeners(); - }, - componentDidMount() { - resizeManager.addAllEventListeners(); - const snapshot = window.localStorage.getItem('composer'); - if (snapshot) { - alt.bootstrap(snapshot); - } - document.body.addEventListener('keydown', (event) => { - // prevent details editor form from blowing up the app - const ENTER_KEY = 13; - if (event.which === ENTER_KEY) { - event.preventDefault(); - return false; - } - }); - const appRootElement = ReactDOM.findDOMNode(this.refs.appRoot); - TooltipManager.addEventListeners(appRootElement); - SelectionManager.onClearSelection = () => { - if (this.state.item) { - CatalogItemsActions.catalogItemMetaDataChanged.defer(this.state.item); - } - }; - }, - componentDidUpdate() { - if (this.state.fullScreenMode) { - document.body.classList.add('-is-full-screen'); - } else { - document.body.classList.remove('-is-full-screen'); - } - SelectionManager.refreshOutline(); - }, - resize(e) { - PanelResizeAction.resize(e); - }, - getModel() { - let html; - let self = this; - DescriptorModelMetaFactory.init().then(function(){ + // resizeManager automatically registered its event handlers + resizeManager.removeAllEventListeners(); + ComposerAppStore.unlisten(this.onChange); + CatalogDataStore.unlisten(this.onCatalogDataChanged); + DeletionManager.removeEventListeners(); + TooltipManager.removeEventListeners(); + }, + componentDidMount() { + resizeManager.addAllEventListeners(); + const snapshot = window.localStorage.getItem('composer'); + if (snapshot) { + alt.bootstrap(snapshot); + } + document.body.addEventListener('keydown', (event) => { + // prevent details editor form from blowing up the app + const ENTER_KEY = 13; + if (event.which === ENTER_KEY) { + event.preventDefault(); + return false; + } + }); + const appRootElement = ReactDOM.findDOMNode(this.refs.appRoot); + TooltipManager.addEventListeners(appRootElement); + SelectionManager.onClearSelection = () => { + if (this.state.item) { + CatalogItemsActions.catalogItemMetaDataChanged.defer(this.state.item); + } + }; + }, + componentDidUpdate() { + if (this.state.fullScreenMode) { + document.body.classList.add('-is-full-screen'); + } else { + document.body.classList.remove('-is-full-screen'); + } + SelectionManager.refreshOutline(); + }, + resize(e) { + PanelResizeAction.resize(e); + }, + getModel() { + let html; + let self = this; + DescriptorModelMetaFactory.init().then(function(){ - self.setState({ - hasModel: true - }) - }); - }, - render() { - let html = null; - let self = this; - if(this.state.hasModel) { + self.setState({ + hasModel: true + }) + }); + }, + render() { + let html = null; + let self = this; + if(this.state.hasModel) { - function onClickUpdateSelection(event) { - if (event.defaultPrevented) { - return - } - const element = SelectionManager.getClosestElementWithUID(event.target); - if (element) { - SelectionManager.select(element); - SelectionManager.refreshOutline(); - event.preventDefault(); - } else { - SelectionManager.clearSelectionAndRemoveOutline(); - } - } + function onClickUpdateSelection(event) { + if (event.defaultPrevented) { + return + } + const element = SelectionManager.getClosestElementWithUID(event.target); + if (element) { + SelectionManager.select(element); + SelectionManager.refreshOutline(); + event.preventDefault(); + } else { + if(event.target.offsetParent && !event.target.offsetParent.classList.contains("tray-body")) { + SelectionManager.clearSelectionAndRemoveOutline(); + } + } + } - let cpNumber = 0; - let AppHeader = (