implement layer compare slider
This commit is contained in:
Willem Dantuma
parent
7b2dbc1777
commit
ddb112b989
@ -54,6 +54,8 @@ export const SETLAYERVALUESLOCATION = '[Map] SetLayerValuesLocation'
|
||||
export const TOGGLELAYERVALUESENABLED = '[Map] ToggleLayerValuesEnabled'
|
||||
export const GETLAYERVALUE = '[Map] GetLayerValue'
|
||||
export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
|
||||
export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
|
||||
|
||||
|
||||
export class Clear implements Action {
|
||||
readonly type = CLEAR;
|
||||
@ -316,6 +318,11 @@ export class GetLayerValueSuccess implements Action {
|
||||
constructor(public layervalue:ILayervalue) { }
|
||||
}
|
||||
|
||||
export class ToggleShowDataLayerSlide implements Action {
|
||||
readonly type = TOGGLESHOWDATALAYERSLIDE;
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
export type Actions = SetMapState
|
||||
| Init
|
||||
| Clear
|
||||
@ -359,5 +366,6 @@ export type Actions = SetMapState
|
||||
| ToggleLayerValuesEnabled
|
||||
| GetLayerValueSuccess
|
||||
| GetLayerValue
|
||||
| SetPeriod;
|
||||
| SetPeriod
|
||||
| ToggleShowDataLayerSlide;
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ import VectorTileSource from 'ol/source/VectorTile';
|
||||
import VectorTileLayer from 'ol/layer/VectorTile';
|
||||
import {GeoJSON,MVT} from 'ol/format';
|
||||
import { Geometry } from 'ol/geom';
|
||||
import TileSource from 'ol/source/Tile';
|
||||
import BaseLayer from 'ol/layer/Base';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-item-layers',
|
||||
@ -32,9 +32,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
|
||||
@Input() itemLayer: IItemLayer;
|
||||
@Output() onFeatureSelected: EventEmitter<any> = new EventEmitter<any>();
|
||||
@Output() onFeatureHover: EventEmitter<any> = new EventEmitter<any>();
|
||||
@Output() onPrerender: EventEmitter<any> = new EventEmitter<any>();
|
||||
private _apiEndPoint: string;
|
||||
private initialized:boolean = false;
|
||||
private mapEventHandlerInstalled = false;
|
||||
private topLayerPrerenderEventhandlerInstalled = false;
|
||||
private selectedFeatures = {};
|
||||
private selectionLayer:Layer<Source> = null;
|
||||
|
||||
@ -362,6 +364,36 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
|
||||
}
|
||||
}
|
||||
|
||||
installTopLayerPrerenderEventhandler() {
|
||||
if(!this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 ) {
|
||||
if(this.instance.getVisible()) {
|
||||
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
|
||||
if(olLayers.length >0) {
|
||||
var topLayer = olLayers[0] as any;
|
||||
topLayer.on('prerender',this.topLayerPrerenderEventhandler);
|
||||
topLayer.on('postrender',this.topLayerPostrenderEventhandler);
|
||||
this.topLayerPrerenderEventhandlerInstalled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
unInstallTopLayerPrerenderEventhandler() {
|
||||
if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
|
||||
{
|
||||
if(this.instance.getVisible()) {
|
||||
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
|
||||
if(olLayers.length >0) {
|
||||
var topLayer = olLayers[0] as any;
|
||||
topLayer.un('prerender',this.topLayerPrerenderEventhandler);
|
||||
topLayer.un('postrender',this.topLayerPostrenderEventhandler);
|
||||
this.topLayerPrerenderEventhandlerInstalled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer<Source> {
|
||||
if(!itemLayer) return null;
|
||||
var olLayers = this.instance.getLayers();
|
||||
@ -387,6 +419,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
|
||||
}
|
||||
|
||||
updateLayers(itemLayers: IItemLayer[]) {
|
||||
this.unInstallTopLayerPrerenderEventhandler();
|
||||
let newLayers: Layer<Source>[] = [];
|
||||
if (itemLayers) {
|
||||
itemLayers.forEach((itemLayer, index) => {
|
||||
@ -414,8 +447,19 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
|
||||
if(this.selectionLayer) olLayers.push(this.selectionLayer)
|
||||
}
|
||||
}
|
||||
this.installTopLayerPrerenderEventhandler();
|
||||
}
|
||||
|
||||
topLayerPrerenderEventhandler = (event) => {
|
||||
this.onPrerender.emit(event);
|
||||
}
|
||||
|
||||
topLayerPostrenderEventhandler = (event) => {
|
||||
const ctx = event.context;
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
|
||||
mapEventHandler = (event) => {
|
||||
// select only when having observers
|
||||
if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item py-0" *ngIf="selectedItemLayer$ | async as selectedItemLayer">
|
||||
<span><i class="fal fa-layer-group" aria-hidden="true"></i> <span i18n>Data</span></span>
|
||||
<span><i class="fal fa-layer-group" aria-hidden="true"></i> <span i18n>Data</span><span class="slideButton"><a href="#" title="Compare" class="btn btn-light btn-sm" (click)="handleToggleShowDatalayerSlide($event)"><i class="fal fa-sliders-h-square"></i></a></span></span>
|
||||
<div class="mb-4">
|
||||
<fm-map-layer-list [dataLayers]="true" [itemLayers]="[selectedItemLayer]" [selectedLayer]="selectedItemLayer" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,10 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slideButton {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.layers {
|
||||
color:$secondary;
|
||||
position: absolute;
|
||||
|
||||
@ -76,4 +76,10 @@ export class LayerSwitcher implements OnInit,OnChanges{
|
||||
handleSelectBaseLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleToggleShowDatalayerSlide(event:Event) {
|
||||
this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
|
||||
this.store.dispatch(new mapActions.ToggleShowDataLayerSlide());
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,9 +20,10 @@
|
||||
compassHeading:compassHeading$|async,
|
||||
styles:styles$|async,
|
||||
selectedFeature:selectedFeature$|async,
|
||||
fullscreen:fullscreen$|async
|
||||
fullscreen:fullscreen$|async,
|
||||
showDataLayerSlide:showDataLayerSlide$|async
|
||||
} as state">
|
||||
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen}" class="map">
|
||||
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
@ -34,18 +35,25 @@
|
||||
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
|
||||
<fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
|
||||
<fm-map-item-layers *ngIf="!overrideOverlayLayers" [itemLayers]="state.overlayLayers"></fm-map-item-layers>
|
||||
<fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer"></fm-map-item-layers>
|
||||
<fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer" (onPrerender)="handlePrerender($event)"></fm-map-item-layers>
|
||||
<aol-layer-vector>
|
||||
<fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
|
||||
</aol-layer-vector>
|
||||
<router-outlet name="map-layers"></router-outlet>
|
||||
<fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="devicesService.IsMobile()" [showTolerance]="devicesService.IsMobile()" [heading]="state.compassHeading"></fm-map-gps-location>
|
||||
<fm-map-layer-values></fm-map-layer-values>
|
||||
<div class="control-container" >
|
||||
<router-outlet name="map-controls"></router-outlet>
|
||||
<fm-map-layer-switcher></fm-map-layer-switcher>
|
||||
<fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
|
||||
<fm-map-rotation-reset></fm-map-rotation-reset>
|
||||
<div class="viewport-container" [ngStyle]="{'bottom': bottom(state.panelVisible)}">
|
||||
<div class="control-container">
|
||||
<router-outlet name="map-controls"></router-outlet>
|
||||
<fm-map-layer-switcher></fm-map-layer-switcher>
|
||||
<fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
|
||||
<fm-map-rotation-reset></fm-map-rotation-reset>
|
||||
</div>
|
||||
<div class="slide-container" [ngClass]="{'showDataLayerSlide':state.showDataLayerSlide}">
|
||||
<form>
|
||||
<input class="dataLayerSlide" (input)="handleSlideChange($event)" type="range" style="width: 100%" value="{{dataLayerSlideValue}}"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
|
||||
|
||||
@ -53,7 +61,8 @@
|
||||
<fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
|
||||
</div>
|
||||
<div class="side-panel-container">
|
||||
<fm-side-panel [resizeable]="true" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
|
||||
|
||||
<fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
|
||||
<div class="panel-wrapper" *ngIf="noContent">
|
||||
<div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
|
||||
aol-map { position:absolute;width:100%;height:calc( 100vh );}
|
||||
|
||||
.arrow {
|
||||
top: 3rem;
|
||||
@ -45,29 +45,39 @@ aol-map { position:absolute;width:100%;height:calc(100vh + 4rem);}
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
.viewport-container {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 8.1em;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
margin-bottom:4em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fullscreen .control-container {
|
||||
bottom: 5em;
|
||||
|
||||
.control-container {
|
||||
float:right;
|
||||
margin-right: 1em;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.fullscreen .viewport-container {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.side-panel-container {
|
||||
position: absolute;
|
||||
top:0em;
|
||||
bottom: 7.1em;
|
||||
bottom: 3em;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fullscreen .side-panel-container {
|
||||
bottom: 4em;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
|
||||
switch2d3d {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
@ -115,6 +125,21 @@ div.header button {
|
||||
max-height: 2.5em;
|
||||
}
|
||||
|
||||
.slide-container {
|
||||
display: none;
|
||||
pointer-events: all;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dataLayerSlide {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.slide-container.showDataLayerSlide {
|
||||
display: block;
|
||||
}
|
||||
|
||||
timespan {
|
||||
position: absolute;
|
||||
transition: left 0.5s;
|
||||
|
||||
@ -5,7 +5,7 @@ import { withLatestFrom, switchMap,skip } from 'rxjs/operators';
|
||||
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { DeviceService } from '@farmmaps/common';
|
||||
//import { proj,Map } from 'openlayers';
|
||||
import {getRenderPixel} from 'ol/render';
|
||||
|
||||
// Map
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
@ -76,6 +76,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
|
||||
public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
|
||||
public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
|
||||
public showDataLayerSlide$: Observable<boolean> = this.store.select(mapReducers.selectGetShowdataLayerSlide);
|
||||
public menuVisible$: Observable<boolean>;
|
||||
public query$: Observable<IQuery> = this.store.select(mapReducers.selectGetQuery);
|
||||
public position$: Observable<GeolocationPosition> = this.geolocationService.getCurrentPosition();
|
||||
@ -90,6 +91,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
public noContent: boolean = false;
|
||||
public overrideSelectedItemLayer: boolean = false;
|
||||
public overrideOverlayLayers: boolean = false;
|
||||
public dataLayerSlideValue:number = 50;
|
||||
public dataLayerSlideEnabled = false;
|
||||
private visibleAreaBottom = 0;
|
||||
|
||||
@ViewChild('map') map;
|
||||
@ViewChild('contentDiv') contentDiv: ElementRef;
|
||||
@ -155,6 +159,25 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
}
|
||||
}
|
||||
|
||||
handlePanelResize(resizeTop:number) {
|
||||
if(resizeTop==100 || !this.devicesService.IsMobile() ) {
|
||||
this.visibleAreaBottom=0;
|
||||
} else {
|
||||
this.visibleAreaBottom=100-resizeTop;
|
||||
if(this.visibleAreaBottom>60) {
|
||||
this.visibleAreaBottom=60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bottom(panelVisible:boolean) {
|
||||
if(panelVisible) {
|
||||
return this.visibleAreaBottom + '%';
|
||||
} else {
|
||||
return "0%";
|
||||
}
|
||||
}
|
||||
|
||||
handleOpenModal(modalName: string) {
|
||||
this.store.dispatch(new commonActions.OpenModal(modalName));
|
||||
}
|
||||
@ -191,6 +214,31 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
}
|
||||
}
|
||||
|
||||
handlePrerender(event:any) {
|
||||
if(!this.dataLayerSlideEnabled) return;
|
||||
const ctx = event.context;
|
||||
const mapSize = this.map.instance.getSize();
|
||||
const width = mapSize[0] * (this.dataLayerSlideValue / 100);
|
||||
const tl = getRenderPixel(event, [width, 0]);
|
||||
const tr = getRenderPixel(event, [mapSize[0], 0]);
|
||||
const bl = getRenderPixel(event, [width, mapSize[1]]);
|
||||
const br = getRenderPixel(event, mapSize);
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(tl[0], tl[1]);
|
||||
ctx.lineTo(bl[0], bl[1]);
|
||||
ctx.lineTo(br[0], br[1]);
|
||||
ctx.lineTo(tr[0], tr[1]);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
}
|
||||
|
||||
handleSlideChange(event:any) {
|
||||
this.dataLayerSlideValue = event.target.value;
|
||||
this.map.instance.render();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initialized = false;
|
||||
console.debug("Init");
|
||||
@ -323,6 +371,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
}
|
||||
});
|
||||
this.initialized = true;
|
||||
this.showDataLayerSlide$.subscribe((v) => {
|
||||
this.dataLayerSlideEnabled=v;
|
||||
this.map.instance.render();
|
||||
});
|
||||
}
|
||||
|
||||
handleSearchCollapse(event) {
|
||||
|
||||
@ -69,8 +69,9 @@ export interface State {
|
||||
replaceUrl:boolean,
|
||||
layerValuesX:number,
|
||||
layerValuesY:number,
|
||||
layerValuesEnabled:boolean;
|
||||
layerValues: Array<ILayervalue>;
|
||||
layerValuesEnabled:boolean,
|
||||
layerValues: Array<ILayervalue>
|
||||
showDataLayerSlide:boolean,
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
@ -113,7 +114,8 @@ export const initialState: State = {
|
||||
layerValuesX:0,
|
||||
layerValuesY:0,
|
||||
layerValuesEnabled:false,
|
||||
layerValues:[]
|
||||
layerValues:[],
|
||||
showDataLayerSlide:false
|
||||
}
|
||||
|
||||
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
|
||||
@ -172,6 +174,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
return tassign(state, {
|
||||
selectedItem: null,
|
||||
selectedItemLayer: null,
|
||||
showDataLayerSlide: false,
|
||||
features:[],
|
||||
inSearch:inSearch
|
||||
});
|
||||
@ -501,7 +504,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
features: [],
|
||||
query:initialState.query,
|
||||
showLayerSwitcher: false,
|
||||
extent: null
|
||||
extent: null,
|
||||
showDataLayerSlide: false
|
||||
});
|
||||
}
|
||||
case mapActions.SETSTYLE:{
|
||||
@ -514,6 +518,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
let a = action as mapActions.ShowLayerSwitcher;
|
||||
return tassign(state,{showLayerSwitcher:a.show});
|
||||
}
|
||||
case mapActions.TOGGLESHOWDATALAYERSLIDE:{
|
||||
return tassign(state,{showDataLayerSlide:!state.showDataLayerSlide});
|
||||
}
|
||||
case mapActions.SETREPLACEURL: {
|
||||
let a= action as mapActions.SetReplaceUrl;
|
||||
return tassign(state,{replaceUrl:a.replaceUrl});
|
||||
@ -537,6 +544,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
return tassign(state,{
|
||||
selectedItem: null,
|
||||
selectedItemLayer: null,
|
||||
showDataLayerSlide: false,
|
||||
features:[]
|
||||
});
|
||||
}
|
||||
@ -584,6 +592,7 @@ export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
|
||||
export const getPeriod = (state:State) => state.period;
|
||||
export const getStyles = (state:State) => state.styles;
|
||||
export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
|
||||
export const getShowDataLayerSlide = (state:State) => state.showDataLayerSlide;
|
||||
export const getInSearch = (state:State) => state.inSearch;
|
||||
export const getState = (state:State) => {return {mapState:state.mapState,queryState:state.queryState,replaceUrl:state.replaceUrl};}
|
||||
export const getLayerValuesEnabled = (state:State) => state.layerValuesEnabled;
|
||||
@ -616,6 +625,7 @@ export const selectGetSelectedItemLayer = createSelector(selectMapState, getSele
|
||||
export const selectGetPeriod = createSelector(selectMapState, getPeriod);
|
||||
export const selectGetStyles = createSelector(selectMapState, getStyles);
|
||||
export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
|
||||
export const selectGetShowdataLayerSlide = createSelector(selectMapState,getShowDataLayerSlide);
|
||||
export const selectGetInSearch = createSelector(selectMapState,getInSearch);
|
||||
export const selectGetState = createSelector(selectMapState,getState);
|
||||
export const selectGetLayerValuesEnabled = createSelector(selectMapState,getLayerValuesEnabled);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
|
||||
import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-side-panel',
|
||||
@ -13,6 +13,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
@Input() public collapsable: boolean;
|
||||
@Input() public resizeable: boolean = false;
|
||||
@Input() public left: boolean = false;
|
||||
@Output() onResize: EventEmitter<number> = new EventEmitter<number>();
|
||||
@ViewChild("resizeGrip") elementView: ElementRef;
|
||||
public mobile:boolean = true;
|
||||
private parentHeight:number = 0;
|
||||
@ -35,6 +36,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
setTop() {
|
||||
this.mobile = this.left?false: this.checkMobile();
|
||||
this.resizeTop = this.mobile?50:0;
|
||||
this.onResize.emit(this.resizeTop);
|
||||
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
@ -71,6 +73,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
clientY=(event as DragEvent).clientY;
|
||||
}
|
||||
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
|
||||
this.onResize.emit(this.resizeTop);
|
||||
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
@ -81,7 +84,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
handleResize(event) {
|
||||
this.setTop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ const routes = [
|
||||
canActivate: [NavBarGuard],
|
||||
component: NotImplementedComponent
|
||||
},
|
||||
{ path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
|
||||
{ path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [NavBarGuard], },
|
||||
{ path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
|
||||
{
|
||||
path: 'registerdevice/:deviceToken',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user