|
19 | 19 | border: 0; |
20 | 20 | background-color: transparent; |
21 | 21 | } |
22 | | - /* ._cv_horizon-image { |
23 | | - transform: rotate(90deg); |
24 | | - } */ |
25 | | - /* ::-webkit-scrollbar{ |
26 | | - width:4px; |
27 | | - height:2px; |
28 | | - } |
29 | | - ::-webkit-scrollbar-button{ |
30 | | - width:4px; |
31 | | - height:2px; |
32 | | - } */ |
33 | | - #resources { |
34 | | - height:20%; |
35 | | - /* background-color: #222933; */ |
| 22 | + #__cv_map_resources { |
| 23 | + height:25vh; |
36 | 24 | width: 100%; |
37 | | - white-space: nowrap; |
| 25 | + } |
| 26 | + .__cv_map_image { |
| 27 | + display: flex; |
| 28 | + flex-wrap: wrap; |
38 | 29 | overflow-y: hidden; |
39 | 30 | overflow-x: auto; |
40 | | - display: flex; |
41 | 31 | } |
42 | | - #container { |
43 | | - height:75%; |
| 32 | + .__cv_map_image::after { |
| 33 | + content: ''; |
| 34 | + flex-grow: 99999; |
| 35 | + } |
| 36 | + .__cv_mapbox { |
| 37 | + margin: 2px; |
| 38 | + object-fit: cover; |
| 39 | + } |
| 40 | + #__cv_map_container { |
| 41 | + height:75vh; |
44 | 42 | } |
45 | 43 | ._cv_gv_mini-cover { |
46 | 44 | border-radius: 8px; |
47 | 45 | border: 2px solid; |
48 | 46 | box-sizing: border-box; |
| 47 | + height: 18vh; |
| 48 | + object-fit: cover; |
49 | 49 | } |
50 | 50 | ._cv_gv_trans-border{ |
51 | 51 | border-color: transparent; |
|
56 | 56 | </style> |
57 | 57 | </head> |
58 | 58 | <body> |
59 | | -<div id="container" draggable="true" ondragstart="MapLayout.preventDrag(event)" ondrag="MapLayout.preventDrag(event)"></div> |
60 | | -<div id="resources"></div> |
| 59 | +<div id="__cv_map_container" draggable="true" ondragstart="MapLayout.preventDrag(event)" ondrag="MapLayout.preventDrag(event)"></div> |
| 60 | +<div id="__cv_map_resources"> |
| 61 | + <div class="__cv_map_image"></div> |
| 62 | +</div> |
61 | 63 | <script type="text/javascript" |
62 | 64 | src="https://webapi.amap.com/maps?v=2.0&key=6918ecca2a3cbfafb6ab59369768ae21&plugin=AMap.MarkerClusterer"></script> |
63 | 65 | <script type="text/javascript"> |
|
101 | 103 | function generateFromTemplate(item) { |
102 | 104 | let div = document.createElement('div') |
103 | 105 | // div.setAttribute('class', '_cv_horizon-image') |
104 | | - // div.style.left = `0px` |
| 106 | + div.style['flex-grow'] = 1 |
105 | 107 | // div.style.top = `${item.top}px` |
106 | | - div.style.width = `${item.width - 15}px` |
107 | | - div.style.height = `${item.height - 10}px` |
| 108 | + // div.style.width = `${item.width - 15}px` |
| 109 | + // div.style.height = `${item.height - 10}px` |
108 | 110 | // In Chrome 59, the right-mouse-button triggers onmousedown and onmouseup, but not onclick |
109 | | - const html = `<div draggable="true" class="image"> |
110 | | - <div class="el-card is-never-shadow" style="border: 0px;"> |
111 | | - <div class="el-card__body" style="padding: 4px;"> |
112 | | - <div class="frame" onclick="MapLayout.onResourceClick(${item.id}, this)" oncontextmenu="MapLayout.onResourceClick(${item.id}, this)" ondblclick="MapLayout.onDbResourceClick(${item.id}, this)"> |
113 | | - <img src="${item.thumbnail?item.thumbnail:item.src}" width="100%" class="_cv_gv_mini-cover _cv_gv_trans-border"> |
114 | | - </div> |
115 | | - <div style="padding: 2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; font-size: 12px;"> |
116 | | - <span class="context">${item.name}</span> |
117 | | - </div> |
118 | | - </div> |
| 111 | + const html = `<div draggable="true" class="__cv_mapbox" style="border: 0px;padding: 4px;"> |
| 112 | + <div class="frame" onclick="MapLayout.onResourceClick(${item.id}, this)" oncontextmenu="MapLayout.onResourceClick(${item.id}, this)" ondblclick="MapLayout.onDbResourceClick(${item.id}, this)"> |
| 113 | + <img src="${item.thumbnail?item.thumbnail:item.src}" height="95%" class="_cv_gv_mini-cover _cv_gv_trans-border"> |
| 114 | + </div> |
| 115 | + <div style="padding: 2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; font-size: 12px;"> |
| 116 | + <span class="context">${item.name}</span> |
119 | 117 | </div> |
120 | 118 | </div>` |
121 | 119 | acquireCivetApi().setHtml('mapview', div, html) |
122 | 120 | return div |
123 | 121 | } |
124 | 122 | function addHorizonItem(item) { |
125 | 123 | // const items = document.querySelectorAll('#resources') |
126 | | - const root = document.getElementById('resources') |
| 124 | + const root = document.getElementsByClassName('__cv_image')[0] |
127 | 125 | const defaultHeight = root.offsetHeight |
128 | 126 | console.info('Item Height', defaultHeight) |
129 | 127 | let block = {}, src = undefined |
|
194 | 192 | } |
195 | 193 | console.info('map right click') |
196 | 194 | const selections = MapViewCache.getSelection() |
197 | | - acquireCivetApi().injectCommandParams('exportResources', selections) |
198 | | - acquireCivetApi().injectCommandParams('deleteResources', selections) |
| 195 | + const ids = selections.map(item => item[0]) |
| 196 | + acquireCivetApi().injectCommandParams('exportResources', ids) |
| 197 | + acquireCivetApi().injectCommandParams('deleteResources', ids) |
199 | 198 | } |
200 | 199 | } |
201 | 200 |
|
| 201 | + function onDbResourceClick(itemid) { |
| 202 | + acquireCivetApi().postMessage({ |
| 203 | + command: 'showResourceDetail', |
| 204 | + id: itemid |
| 205 | + }) |
| 206 | + } |
| 207 | + |
202 | 208 | function onResourceClick(itemid, element) { |
203 | 209 | if (!MapViewCache.getTimer()) { |
204 | 210 | const id = window.setTimeout(() => { |
|
229 | 235 | MapLayout.add(resource) |
230 | 236 | } |
231 | 237 | }) |
| 238 | + acquireCivetApi().Overview.on('click', (data) => { |
| 239 | + MapViewCache.resetSelection() |
| 240 | + }) |
232 | 241 | return { |
233 | 242 | add: function(item) { |
234 | 243 | let longitude, latitude |
|
265 | 274 | // if (cluster) { |
266 | 275 | // cluster.setMap(null); |
267 | 276 | // } |
268 | | - let root = document.getElementById('resources') |
| 277 | + let root = document.getElementsByClassName('__cv_image')[0] |
269 | 278 | root.innerHTML = '' |
270 | 279 | }, |
271 | 280 | onResourceClick: onResourceClick, |
| 281 | + onDbResourceClick: onDbResourceClick, |
272 | 282 | preventDrag: preventDrag, |
273 | 283 | } |
274 | 284 | })() |
|
0 commit comments