diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue index 07bd6f9..2003c28 100644 --- a/src/components/ControlPanelDialog.vue +++ b/src/components/ControlPanelDialog.vue @@ -73,7 +73,7 @@ } " > - +
@@ -102,182 +102,194 @@ - - - - -
{{ $t("angle") }}
- -
-
- - - - angle: - - - - - - - - - - -
-
-
{{ $t("physical central location") }}
- -
-
- - - X: - - - - - - - - - - -
-
+ + + + + +
{{ $t("angle") }}
+ +
+
+ + + + angle: + + + + + + + + + + +
+
+
+ {{ $t("physical central location") }} +
+ +
+
+ + + X: + + + + + + + + + + +
+
-
- - - Y: - - - - - - - - - - -
- - +
+ + + Y: + + + + + + + + + + +
+ + - -
-
{{ $t("resize") }}
- -
-
- -
-
+
- + +
+ + + + + {{ $t("close this window") }} + + + + + {{ $t("close other windows") }} + + + + + {{ $t("close all windows") }} + + + + + {{ item.uuid }} + + x:{{ item.centerx }} y:{{ item.centery }} + +
+ +
+
+ + + +
+ + + + {{ + $t("monitors list") + }} + + + + + + W: + + + + + + + + + + + H: + + + + + + + + + + + + + +
+
- - - - - {{ $t("close this window") }} - - - - - {{ $t("close other windows") }} - - - - - {{ $t("close all windows") }} - - - - - {{ item.uuid }} - - x:{{ item.centerx }} y:{{ item.centery }} - -
- -
-
- - - -
- - - - {{ - $t("monitors list") - }} - - - - - - W: - - - - - - - - - - - H: - - - - - - - - - - - - - -
-
-
-
+
+ {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} + W:{{ + filter_px( + test_monitor_list[(item - 1) * 4 + (j - 1)].cmw ) - " - @dragend="(evt) => onDragend(evt, item, j)" - > - {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} - W:{{ - filter_px( - test_monitor_list[(item - 1) * 4 + (j - 1)].cmw - ) - }} - H:{{ - filter_px( - test_monitor_list[(item - 1) * 4 + (j - 1)].cmh - ) - }} + }} + H:{{ + filter_px( + test_monitor_list[(item - 1) * 4 + (j - 1)].cmh + ) + }} +
-
-
-
-
- {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} - W:{{ - filter_px( - test_monitor_list[(item - 1) * 4 + (j - 1)].cmw - ) - }} - H:{{ - filter_px( - test_monitor_list[(item - 1) * 4 + (j - 1)].cmh - ) - }} +
+ +
+ {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }} + W:{{ + filter_px( + test_monitor_list[(item - 1) * 4 + (j - 1)].cmw + ) + }} + H:{{ + filter_px( + test_monitor_list[(item - 1) * 4 + (j - 1)].cmh + ) + }} +
- - - - + + + - + + @@ -910,6 +929,7 @@ export default defineComponent({ getpx(); } } + const cloud_monitor_list = new MagicWallConfig(); const wall_dom = wall.value; if (wall_dom && settings) { @@ -949,8 +969,8 @@ export default defineComponent({ h: element.h / wall_dom.offsetHeight, w: element.w / wall_dom.offsetWidth, angle: parseInt(element.angle.toString()), - centerx: element.centerx / wall_dom.offsetWidth, - centery: element.centery / wall_dom.offsetHeight, + centerx: element.centerx / 3840, + centery: element.centery / 2160, }); } }); @@ -1012,39 +1032,43 @@ export default defineComponent({ return { x, y }; }; const four_point = (item: test_monitor) => { - item.centerx = parseInt(item.centerx.toString()); - item.centery = parseInt(item.centery.toString()); + const wall_dom = wall.value; + let centerx: any, centery: any; + if (wall_dom) { + centerx = (item.centerx / 3840) * wall_dom.offsetWidth; + centery = (item.centery / 2160) * wall_dom.offsetHeight; + } + centerx = Math.round(centerx); + centery = Math.round(centery); + // item.centerx = Math.round((item.centerx)); + // item.centery = Math.round(item.centery); const x2: number = item.currentx + item.w; const y2: number = item.currenty + item.h; + const x1: number = centerx; + const y1: number = centery; if (item.angle != 0) { const point_left_top = calculateCoordinates( item.currentx, item.currenty, - item.centerx, - item.centery, + x1, + y1, item ); const point_left_bootom = calculateCoordinates( item.currentx, y2, - item.centerx, - item.centery, + x1, + y1, item ); const point_right_top = calculateCoordinates( x2, item.currenty, - item.centerx, - item.centery, - item - ); - const point_right_bottom = calculateCoordinates( - x2, - y2, - item.centerx, - item.centery, + x1, + y1, item ); + const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item); const point_list = [ point_left_top, point_left_bootom, @@ -1095,12 +1119,16 @@ export default defineComponent({ } }); if (minx < 0) { - return Math.floor(item.w / 2 + item.currentx + Math.abs(minx)); + return Math.round( + ((item.w / 2 + item.currentx + Math.abs(minx)) / + wall_dom.offsetWidth) * + 3840 + ); } else { - return Math.floor(minx); + return Math.round((minx / wall_dom.offsetWidth) * 3840); } } else { - return Math.floor(item.w / 2); + return Math.round((item.w / 2 / wall_dom.offsetWidth) * 3840); } } }; @@ -1118,16 +1146,22 @@ export default defineComponent({ } }); if (maxx > wall_dom.offsetWidth) { - return Math.floor( - item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth) + return Math.round( + ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) / + wall_dom.offsetWidth) * + 3840 ); } else { - return Math.floor( - item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth) + return Math.round( + ((item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)) / + wall_dom.offsetWidth) * + 3840 ); } } else { - return Math.floor(wall_dom.offsetWidth - item.w / 2); + return Math.round( + ((wall_dom.offsetWidth - item.w / 2) / wall_dom.offsetWidth) * 3840 + ); } } }; @@ -1159,12 +1193,16 @@ export default defineComponent({ } }); if (miny < 0) { - return Math.floor(item.h / 2 + item.currenty + Math.abs(miny)); + return Math.round( + ((item.h / 2 + item.currenty + Math.abs(miny)) / + wall_dom.offsetHeight) * + 2160 + ); } else { - return Math.floor(miny); + return Math.round((miny / wall_dom.offsetHeight) * 2160); } } else { - return Math.floor(item.h / 2); + return Math.round((item.h / 2 / wall_dom.offsetHeight) * 2160); } } }; @@ -1182,16 +1220,23 @@ export default defineComponent({ } }); if (maxy > wall_dom.offsetHeight) { - return Math.floor( - item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight) + return Math.round( + ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) / + wall_dom.offsetHeight) * + 2160 ); } else { - return Math.floor( - item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight) + return Math.round( + ((item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)) / + wall_dom.offsetHeight) * + 2160 ); } } else { - return Math.floor(wall_dom.offsetHeight - item.h / 2); + return Math.round( + ((wall_dom.offsetHeight - item.h / 2) / wall_dom.offsetHeight) * + 2160 + ); } } }; @@ -1211,12 +1256,17 @@ export default defineComponent({ if (wall_dom) { item.h = item.InitialH * percenter.value; item.w = item.InitialW * percenter.value; + item.active = true; + item.currentx = rect.left; + item.currenty = rect.top; + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840 + ); + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160 + ); } - item.active = true; - item.currentx = rect.left; - item.currenty = rect.top; - item.centerx = Math.floor(item.currentx + item.w / 2); - item.centery = Math.floor(item.currenty + item.h / 2); + if (Number.isNaN(rect.left || rect.left < 0)) { item.currentx = 0; } @@ -1227,7 +1277,7 @@ export default defineComponent({ const wall_dom = wall.value; if (item.angle != 0) { exceedrange(item); - } else { + } else if (wall_dom) { if (rect.left < 0) { item.currentx = 0; } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) { @@ -1242,8 +1292,12 @@ export default defineComponent({ } else { item.currenty = rect.top; } - item.centerx = Math.floor(item.currentx + item.w / 2); - item.centery = Math.floor(item.currenty + item.h / 2); + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840 + ); + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160 + ); } realtime_upload(); }; @@ -1272,19 +1326,27 @@ export default defineComponent({ }); if (minx < 0) { item.currentx += Math.abs(minx); - item.centerx = item.w / 2 + item.currentx; + item.centerx = Math.round( + ((item.w / 2 + item.currentx) / wall_dom.offsetWidth) * 3840 + ); } if (maxx > wall_dom.offsetWidth) { item.currentx -= maxx - wall_dom.offsetWidth; - item.centerx = item.currentx + item.w / 2; + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840 + ); } if (miny < 0) { item.currenty += Math.abs(miny); - item.centery = item.h / 2 + item.currenty; + item.centery = Math.round( + ((item.h / 2 + item.currenty) / wall_dom.offsetHeight) * 2160 + ); } if (maxy > wall_dom.offsetHeight) { item.currenty -= maxy - wall_dom.offsetHeight; - item.centery = item.currenty + item.h / 2; + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160 + ); } } }; @@ -1300,12 +1362,14 @@ export default defineComponent({ const refresh_all = () => { test_monitor_wall.value = []; current_index.value = -1; + monitor_list_current_index.value=-1 percenter.value = last_percenter.value; multiple_select.value = []; multiple.value = false; loading.value = false; test_monitor_list.value.forEach((element) => { element.isHide = false; + element.isactive=false; }); last_wall.value.forEach((element) => { element.isShow = true; @@ -1328,8 +1392,10 @@ export default defineComponent({ let sizew = element.InitialW / tepw; element.currentx = element.currentx * sizew; element.currenty = element.currenty * sizeh; - element.centerx = Math.floor(element.currentx + element.w / 2); - element.centery = Math.floor(element.currenty + element.h / 2); + element.centerx = + Math.round(((element.currentx + element.w / 2) / wall_dom.offsetWidth) * 3840); + element.centery = + Math.round(((element.currenty + element.h / 2) / wall_dom.offsetHeight) * 2160); }); } }); @@ -1380,12 +1446,13 @@ export default defineComponent({ item.w = item.InitialW * percenter.value; item.resizew = item.InitialW / wall_dom.offsetWidth; item.resizeh = item.InitialH / wall_dom.offsetHeight; - item.centerx = Math.floor(item.currentx + item.w / 2); - item.centery = Math.floor(item.currenty + item.h / 2); + item.centerx = + Math.round(((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840); + item.centery = + Math.round(((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160); item.angle = element.angle; item.isShow = true; test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); - last_wall.value.push(JSON.parse(JSON.stringify(item))); test_monitor_list.value.forEach((ele) => { if (element.index == ele.id) { ele.isHide = true; @@ -1394,6 +1461,140 @@ export default defineComponent({ }); } }; + const sub_x = () => { + const wall_dom = wall.value; + let item = test_monitor_wall.value[current_index.value]; + let minx = 1000; + if (wall_dom) { + if (multiple_select.value.length > 1) { + multiple_select.value.forEach((element) => { + if (element != -1) { + let tep_item = test_monitor_wall.value[element]; + let min = min_x(tep_item) ?? 0; + if (tep_item.centerx > min) { + if (minx > tep_item.centerx && tep_item.angle != 0) { + minx = tep_item.centerx; + current_index.value = element; + } + tep_item.centerx--; + tep_item.currentx = + (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2; + } + } + }); + } else { + let min = min_x() ?? 0; + if (item.centerx > min) { + item.centerx--; + item.currentx = + (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2; + } + } + } + realtime_upload(); + }; + const sub_y = () => { + const wall_dom = wall.value; + let item = test_monitor_wall.value[current_index.value]; + let miny = 1000; + if (wall_dom) { + if (multiple_select.value.length > 1) { + multiple_select.value.forEach((element) => { + if (element != -1) { + let tep_item = test_monitor_wall.value[element]; + let min = min_y(tep_item) ?? 0; + if (tep_item.centery > min) { + if (miny > tep_item.centery) { + miny = tep_item.centery; + current_index.value = element; + } + tep_item.centery--; + tep_item.currenty = + (tep_item.centery / 2160) * wall_dom.offsetHeight - + tep_item.h/2; + } + } + }); + } else { + let min = min_y() ?? 0; + if (item.centery > min) { + item.centery--; + item.currenty = + (item.centery / 2160) * wall_dom.offsetHeight - + item.h/2; + } + } + } + realtime_upload(); + }; + const add_x = () => { + let item = test_monitor_wall.value[current_index.value]; + let maxx = 0; + if (multiple_select.value.length > 1) { + multiple_select.value.forEach((element) => { + if (element != -1) { + let tep_item = test_monitor_wall.value[element]; + let max = max_x(tep_item) ?? 0; + if (tep_item.centerx < max) { + if (maxx < tep_item.centerx && tep_item.angle != 0) { + maxx = tep_item.centerx; + current_index.value = element; + } + tep_item.centerx++; + const wall_dom = wall.value; + if (wall_dom) { + tep_item.currentx = + (tep_item.centerx / 3840) * wall_dom.offsetWidth - tep_item.w/2; + } + } + } + }); + } else { + let max = max_x() ?? 0; + if (item.centerx < max) { + item.centerx++; + const wall_dom = wall.value; + if (wall_dom) { + item.currentx = + (item.centerx / 3840) * wall_dom.offsetWidth - item.w/2; + } + } + } + realtime_upload(); + }; + const add_y = () => { + const wall_dom = wall.value; + let item = test_monitor_wall.value[current_index.value]; + let maxy = 0; + if (wall_dom) { + if (multiple_select.value.length > 1) { + multiple_select.value.forEach((element) => { + if (element != -1) { + let tep_item = test_monitor_wall.value[element]; + let max = max_y(tep_item) ?? 0; + if (tep_item.centery < max) { + if (maxy < tep_item.centery && tep_item.angle != 0) { + maxy = tep_item.centery; + current_index.value = element; + } + tep_item.centery++; + tep_item.currenty = + (tep_item.centery / 2160) * wall_dom.offsetHeight - + tep_item.h/2; + } + } + }); + } else { + let max = max_y() ?? 0; + if (item.centery < max) { + item.centery++; + item.currenty = + (item.centery / 2160) * wall_dom.offsetHeight - item.h/2; + } + } + } + realtime_upload(); + }; EventBus.getInstance().on( EventNamesDefine.NotifyMessage, (notify: NotifyMessage) => { @@ -1415,7 +1616,12 @@ export default defineComponent({ ) as Protocol.SetApplicationConfigRequestEntity; if (temp.key == "magic_wall_config") { const a = JSON.parse(temp.value).windows; - refresh_magic(a); + if ( + current_index.value == -1 || + multiple_select.value.length < 1 + ) { + refresh_magic(a); + } } break; } @@ -1426,6 +1632,10 @@ export default defineComponent({ } ); return { + sub_x, + sub_y, + add_x, + add_y, close_magic_switch, upload_magic_switch, magic_switch, @@ -1469,6 +1679,7 @@ export default defineComponent({ console.log(a); }, async showDialog() { + monitor_list_current_index.value = -1; show_dialog.value = true; magic_switch.value = true; let client = GlobalData.getInstance().getCurrentClient(); @@ -1534,8 +1745,12 @@ export default defineComponent({ item.w = item.InitialW * percenter.value; item.resizew = item.InitialW / wall_dom.offsetWidth; item.resizeh = item.InitialH / wall_dom.offsetHeight; - item.centerx = Math.floor(item.currentx + item.w / 2); - item.centery = Math.floor(item.currenty + item.h / 2); + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom.offsetWidth) * 3840 + ); + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom.offsetHeight) * 2160 + ); item.angle = element.angle; item.isShow = true; test_monitor_wall.value.push(JSON.parse(JSON.stringify(item))); @@ -1564,7 +1779,9 @@ export default defineComponent({ last_wall.value = []; test_monitor_list.value.forEach((element) => { element.isHide = false; + element.isactive = false; }); + loading.value = false; }, async onSubmit() { @@ -1611,8 +1828,8 @@ export default defineComponent({ h: element.h / wall_dom.offsetHeight, w: element.w / wall_dom.offsetWidth, angle: parseInt(element.angle.toString()), - centerx: element.centerx / wall_dom.offsetWidth, - centery: element.centery / wall_dom.offsetHeight, + centerx: element.centerx / 3840, + centery: element.centery / 2160, }); } }); @@ -1655,6 +1872,8 @@ export default defineComponent({ } item.active = true; } + item.active = true; + current_index.value = index; }, onDragStart(e: DragEvent, item: test_monitor) { @@ -1708,8 +1927,12 @@ export default defineComponent({ if (item.currenty > wall_dom?.offsetHeight - item.h) { item.currenty = wall_dom?.offsetHeight - item.h; } - item.centerx = Math.floor(item.currentx + item.w / 2); - item.centery = Math.floor(item.currenty + item.h / 2); + item.centerx = Math.round( + ((item.currentx + item.w / 2) / wall_dom?.offsetWidth) * 3840 + ); + item.centery = Math.round( + ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160 + ); if ( item.h > wall_dom.offsetHeight || item.w > wall_dom.offsetWidth @@ -1728,6 +1951,7 @@ export default defineComponent({ } current_index.value = test_monitor_wall.value.length - 1; realtime_upload(); + monitor_list_current_index.value = -1; } } } @@ -1827,13 +2051,19 @@ export default defineComponent({ center_x() { const wall_dom = wall.value; const item = test_monitor_wall.value[current_index.value]; - item.currentx = item.centerx - item.w / 2; + if (wall_dom) { + item.currentx = + (item.centerx / 3840) * wall_dom?.offsetWidth - item.w / 2; + } realtime_upload(); }, center_y() { const wall_dom = wall.value; const item = test_monitor_wall.value[current_index.value]; - item.currenty = item.centery - item.h / 2; + if (wall_dom) { + item.currenty = + (item.centery / 2160) * wall_dom?.offsetHeight - item.h / 2; + } realtime_upload(); }, changePercenter() { @@ -1852,9 +2082,16 @@ export default defineComponent({ if (ry > wall_dom.offsetHeight) { element.currenty = wall_dom.offsetHeight - element.h; } + element.centerx = Math.round( + ((element.currentx + element.w / 2) / wall_dom?.offsetWidth) * + 3840 + ); + element.centery = Math.round( + ((element.currenty + element.h / 2) / wall_dom?.offsetHeight) * + 2160 + ); } - element.centerx = Math.floor(element.currentx + element.w / 2); - element.centery = Math.floor(element.currenty + element.h / 2); + if (element.isShow) { tep = true; } @@ -1871,6 +2108,11 @@ export default defineComponent({ } multiple_select.value = []; multiple.value = false; + if (monitor_list_current_index.value != -1) { + test_monitor_list.value[monitor_list_current_index.value].isactive = + false; + monitor_list_current_index.value = -1; + } }, changeAngle() { const wall_dom = wall.value; @@ -1878,115 +2120,6 @@ export default defineComponent({ exceedrange(item); realtime_upload(); }, - sub_x() { - let item = test_monitor_wall.value[current_index.value]; - let minx = 1000; - if (multiple_select.value.length > 1) { - multiple_select.value.forEach((element) => { - if (element != -1) { - let tep_item = test_monitor_wall.value[element]; - let min = min_x(tep_item) ?? 0; - if (tep_item.centerx > min) { - if (minx > tep_item.centerx && tep_item.angle != 0) { - minx = tep_item.centerx; - current_index.value = element; - } - tep_item.currentx--; - tep_item.centerx--; - } - } - }); - } else { - let min = min_x() ?? 0; - if (item.centerx > min) { - item.currentx--; - item.centerx--; - } - } - realtime_upload(); - }, - sub_y() { - let item = test_monitor_wall.value[current_index.value]; - let miny = 1000; - if (multiple_select.value.length > 1) { - multiple_select.value.forEach((element) => { - if (element != -1) { - let tep_item = test_monitor_wall.value[element]; - let min = min_y(tep_item) ?? 0; - if (tep_item.centery > min) { - if (miny > tep_item.centery) { - miny = tep_item.centery; - current_index.value = element; - } - tep_item.currenty--; - tep_item.centery--; - } - } - }); - } else { - let min = min_y() ?? 0; - if (item.centery > min) { - item.currenty--; - item.centery--; - } - } - realtime_upload(); - }, - add_x() { - let item = test_monitor_wall.value[current_index.value]; - let maxx = 0; - if (multiple_select.value.length > 1) { - multiple_select.value.forEach((element) => { - if (element != -1) { - let tep_item = test_monitor_wall.value[element]; - let max = max_x(tep_item) ?? 0; - - if (tep_item.centerx < max) { - if (maxx < tep_item.centerx && tep_item.angle != 0) { - maxx = tep_item.centerx; - current_index.value = element; - } - tep_item.currentx++; - tep_item.centerx++; - } - } - }); - } else { - let max = max_x() ?? 0; - if (item.centerx < max) { - item.currentx++; - item.centerx++; - } - } - realtime_upload(); - }, - add_y() { - let item = test_monitor_wall.value[current_index.value]; - let maxy = 0; - if (multiple_select.value.length > 1) { - multiple_select.value.forEach((element) => { - if (element != -1) { - let tep_item = test_monitor_wall.value[element]; - let max = max_y(tep_item) ?? 0; - if (tep_item.centery < max) { - if (maxy < tep_item.centery && tep_item.angle != 0) { - maxy = tep_item.centery; - current_index.value = element; - } - tep_item.currenty++; - tep_item.centery++; - } - } - }); - } else { - let max = max_y() ?? 0; - if (item.centery < max) { - item.currenty++; - item.centery++; - } - } - realtime_upload(); - }, changewidth() { let item = test_monitor_list.value[monitor_list_current_index.value]; @@ -2038,6 +2171,36 @@ export default defineComponent({ }); realtime_upload(); }, + testLog(a: any) { + if (current_index.value != -1 || multiple_select.value.length > 1) { + switch (a.key) { + case "ArrowRight": + { + a.preventDefault(); + add_x(); + } + break; + case "ArrowLeft": + { + a.preventDefault(); + sub_x(); + } + break; + case "ArrowUp": + { + a.preventDefault(); + sub_y(); + } + break; + case "ArrowDown": + { + a.preventDefault(); + add_y(); + } + break; + } + } + }, export_magic_wall() { let res: string = ""; test_monitor_wall.value.forEach((ele, index) => { diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue index 2a05283..780bd94 100644 --- a/src/pages/WallPage.vue +++ b/src/pages/WallPage.vue @@ -245,7 +245,7 @@ } .magic_wall { border: 1px solid black; - background-color: rgb(173, 228, 251); + background-color: rgb(50,130,246); position: absolute; } .magic_wall_select {