diff --git a/src/mapboxgl/_types/__tests__/map-event.spec.js b/src/mapboxgl/_types/__tests__/map-event.spec.js index b77b4789..23942d1d 100644 --- a/src/mapboxgl/_types/__tests__/map-event.spec.js +++ b/src/mapboxgl/_types/__tests__/map-event.spec.js @@ -136,5 +136,97 @@ describe('map-event-mapboxgl', () => { expect(legendList[0]).toEqual(mapLegends[1]); done(); }); + + it('webmap get ordered LayerList', done => { + const layerList1 = [ + { id: 'layer1', renderSource: { id: 'source1' }, renderLayers: ['layer1'], visible: true }, + { + id: 'group2', + type: 'group', + visible: true, + children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' }, visible: true }] + } + ]; + const layerList2 = [ + { id: 'layer3', renderSource: { id: 'source3' }, renderLayers: ['layer3'], visible: true }, + { + id: 'group4', + renderSource: {}, + type: 'group', + visible: true, + children: [{ id: 'sourceLayer4', renderSource: { id: 'source4', sourceLayer: 'sourceLayer4' }, visible: true }] + } + ] + const mainWebMap = { + getLayerList: () => layerList1 + }; + const webmap2 = { + getLayerList: () => layerList2, + cacheLayerCatalogIds: ['layer3', 'group4', 'sourceLayer4'] + }; + mapEvent.$options.setWebMap(mapTarget, mainWebMap); + mapEvent.$options.setWebMap(mapTarget, webmap2, 'webmap2'); + const webmap = mapEvent.$options.getWebMap(mapTarget); + const layerList = webmap.getLayerList(); + expect(layerList.length).toBe(4); + expect(layerList).toEqual(layerList2.concat(layerList1)); + const OrderedLyerList = layerList1.concat(layerList2); + mapEvent.$options.setLayerCatalog(mapTarget, OrderedLyerList); + const newLayerList = webmap.getLayerList(); + expect(newLayerList).toEqual(OrderedLyerList); + expect(mapEvent.$options.customLayerCatalogCache[mapTarget].length).toEqual(4); + mapEvent.$options.deleteWebMap(mapTarget, 'webmap2'); + expect(mapEvent.$options.customLayerCatalogCache[mapTarget].length).toEqual(2); + done(); + }); + + it('webmap get ordered AppreciableLayers', done => { + const mainWebMap = { + getAppreciableLayers: () => [ + { id: 'layer1', renderSource: { id: 'source1' } }, + { id: 'layer2', renderSource: { id: 'source2' } } + ] + }; + mapEvent.$options.setWebMap(mapTarget, mainWebMap); + const webmap = mapEvent.$options.getWebMap(mapTarget); + const appreciableLayers1 = webmap.getAppreciableLayers(); + expect(appreciableLayers1[0].id).toBe('layer1'); + const newLayerList = [ + { id: 'layer1', renderSource: { id: 'source1' } }, + { id: 'layer2', renderSource: { id: 'source2' } } + ]; + mapEvent.$options.setLayerCatalog(mapTarget, newLayerList); + const appreciableLayers2 = webmap.getAppreciableLayers(); + expect(appreciableLayers2[0].id).toBe('layer2'); + done(); + }); + + it('group visible is determined by children', done => { + const layerList1 = [ + { + id: 'group1', + type: 'group', + visible: false, + children: [{ id: 'sourceLayer1', renderSource: { id: 'source1', sourceLayer: 'sourceLayer1' }, visible: true }] + }, + { + id: 'group2', + type: 'group', + visible: true, + children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' }, visible: false }] + } + ]; + const mainWebMap = { + getLayerList: () => layerList1 + }; + mapEvent.$options.setWebMap(mapTarget, mainWebMap); + const webmap = mapEvent.$options.getWebMap(mapTarget); + const layerList = webmap.getLayerList(); + expect(layerList[0].id).toBe('group1'); + expect(layerList[0].visible).toBe(true); + expect(layerList[1].id).toBe('group2'); + expect(layerList[1].visible).toBe(false); + done(); + }); }); diff --git a/src/mapboxgl/_types/map-event.js b/src/mapboxgl/_types/map-event.js index 331bcbdc..1c1f5f0a 100644 --- a/src/mapboxgl/_types/map-event.js +++ b/src/mapboxgl/_types/map-event.js @@ -56,8 +56,10 @@ export default new Vue({ if (['getLegendInfo'].includes(propKey)) { datas.push(...mainWebMapDatas); } - if (propKey === 'getLayerList' && _this.customLayerCatalogCache[webmapTarget]) { - datas = sortLayerCatalog(datas, _this.customLayerCatalogCache[webmapTarget]); + if (propKey === 'getLayerList') { + if (_this.customLayerCatalogCache[webmapTarget]) { + datas = sortLayerCatalog(datas, _this.customLayerCatalogCache[webmapTarget]); + } _this.updateLayerCatalogsVisible(datas); } if (propKey === 'getAppreciableLayers' && _this.customLayerCatalogCache[webmapTarget]) { diff --git a/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js b/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js index 8f1658d0..01f60df3 100644 --- a/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js +++ b/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js @@ -1,6 +1,7 @@ import { mount } from '@vue/test-utils'; import SmWebMap from '../../../WebMap'; import SmLayerList from '../LayerList.vue'; +import LayerGroup from '../../../LayerGroup.vue'; import LayerList from '../index'; import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest'; import iportal_serviceProxy from 'vue-iclient/test/unit/mocks/data/iportal_serviceProxy'; @@ -58,8 +59,8 @@ describe('LayerList.vue', () => { expect(callback.mock.called).toBeTruthy; let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility'); wrapper.vm.$nextTick(() => { - expect(wrapper.find('.sm-component-layer-list__layer').exists()).toBe(true); - wrapper.find('.sm-component-layer-list__layer > i').trigger('click'); + expect(wrapper.find('.header-text').exists()).toBe(true); + wrapper.find('.header-text > i').trigger('click'); expect(spylayerVisibility).toHaveBeenCalledTimes(1); done(); }); @@ -211,7 +212,7 @@ describe('LayerList.vue', () => { expect(callback.mock.called).toBeTruthy; let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility'); await wrapper.vm.$nextTick(); - wrapper.find('.sm-component-layer-list__layer > i').trigger('click'); + wrapper.find('.header-text > i').trigger('click'); expect(spylayerVisibility).toHaveBeenCalledTimes(1); done(); }; @@ -288,7 +289,7 @@ describe('LayerList.vue', () => { }) }; const callback = function () { - expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-hidden').exists()).toBeTruthy(); + expect(wrapper.find('.header-text > .sm-components-icon-hidden').exists()).toBeTruthy(); done(); }; wrapper.vm.viewModel.on('layersUpdated', callback); @@ -298,9 +299,108 @@ describe('LayerList.vue', () => { wrapper.vm.$options.loaded.call(wrapper.vm); await wrapper.vm.$nextTick(); expect(wrapper.vm.sourceList).toEqual(wrapper.vm.transformLayerList(layerCatalogs)); - expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-visible').exists()).toBeTruthy(); - expect(wrapper.find('.header-text > .sm-components-icon-partially-visible').exists()).toBeTruthy(); + expect(wrapper.find('.header-text > .sm-components-icon-visible').exists()).toBeTruthy(); wrapper.vm.sourceList[1].visible = false; mockOnOptions.layerupdatechanged(); }); + + it('onDrop', async done => { + wrapper = mount(SmLayerList); + const layerCatalogs = [ + { + dataSource: { + serverId: '', + type: '' + }, + id: 'ms-fill', + title: 'ms-fill', + type: 'fill', + visible: true, + renderSource: {}, + renderLayers: ['ms-fill'], + themeSetting: {} + }, + { + dataSource: { + serverId: '', + type: '' + }, + id: 'ms-background', + title: 'ms-background', + type: 'background', + visible: true, + renderSource: {}, + renderLayers: ['ms-background'], + themeSetting: {} + }, + { + children: [], + id: 'ms-group', + title: '未命名分组', + type: 'group', + visible: true + }, + ]; + let mockOnOptions; + const webmap = { + getLayerList: () => layerCatalogs, + getAppreciableLayers: () => layerCatalogs, + rectifyLayersOrder: jest.fn(), + un: jest.fn(), + on: jest.fn(options => { + mockOnOptions = options; + }) + }; + wrapper.vm.viewModel.setMap({ + webmap + }); + wrapper.vm.$options.loaded.call(wrapper.vm); + await wrapper.vm.$nextTick(); + const dropToBottom = { + node: { + eventKey: 'ms-background', + pos: '0-1' + }, + dragNode: { + eventKey: 'ms-fill' + }, + dragNodesKeys: ['ms-fill'], + dropToGap: true, + dropPosition: 2 + }; + const dropIntoLayer = { + node: { + eventKey: 'ms-background', + pos: '0-0' + }, + dragNode: { + eventKey: 'ms-fill' + }, + dragNodesKeys: ['ms-fill'], + dropToGap: false, + dropPosition: 0 + }; + const dropIntoGroup = { + node: { + eventKey: 'ms-group', + pos: '0-3' + }, + dragNode: { + eventKey: 'ms-fill' + }, + dragNodesKeys: ['ms-fill'], + dropToGap: false, + dropPosition: 0 + }; + const layerGroupVm = wrapper.find(LayerGroup).vm; + expect(layerGroupVm.treeData.length).toBe(3); + expect(layerGroupVm.treeData[0].key).toBe('ms-fill'); + wrapper.vm.onDropHanlder(dropToBottom); + expect(layerGroupVm.treeData[0].key).toBe('ms-background'); + wrapper.vm.onDropHanlder(dropIntoLayer); + expect(layerGroupVm.treeData.length).toBe(3); + wrapper.vm.onDropHanlder(dropIntoGroup); + expect(layerGroupVm.treeData.length).toBe(2); + done(); + }); });