Skip to content

Commit 19e4db7

Browse files
pelikhanpelikhan
authored
Multi editor per target (microsoft#6813)
* add 1 target multi-editor * fix overscoll * fix post message * simplify name to multi * fixed typo * handle localhost * fix patch * add support in cli * fater separator * fater separtor
1 parent a63fdf4 commit 19e4db7

7 files changed

Lines changed: 145 additions & 3 deletions

File tree

‎cli/cli.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -991,6 +991,7 @@ function uploadCoreAsync(opts: UploadOptions) {
991991
"partsUrl": opts.localDir + "siminstructions.html",
992992
"runUrl": opts.localDir + "run.html",
993993
"docsUrl": opts.localDir + "docs.html",
994+
"multiUrl": opts.localDir + "multi.html",
994995
"isStatic": true,
995996
}
996997
const targetImagePaths = targetImages.map(k =>

‎cli/server.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,6 +1038,11 @@ export function serveAsync(options: ServeOptions) {
10381038
return
10391039
}
10401040

1041+
if (pathname == "/--multi") {
1042+
sendFile(path.join(publicDir, 'multi.html'));
1043+
return
1044+
}
1045+
10411046
if (/\/-[-]*docs.*$/.test(pathname)) {
10421047
sendFile(path.join(publicDir, 'docs.html'));
10431048
return

‎docs/multi-editor-ref.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"redirect": "/multi"
3+
}

docs/multi-editor.html renamed to docs/multi.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<html>
2-
32
<head>
43
<title>MakeCode Multi Editor</title>
54
<style>
@@ -29,7 +28,7 @@
2928
height: 100%;
3029
left: calc(50% - 0.15rem);
3130
right: calc(50% + 0.15rem);
32-
background: #999;
31+
background: #bbb;
3332
top: 0rem;
3433
}
3534

@@ -80,7 +79,7 @@
8079
var localhost = /localhost=1/.test(window.location.href)
8180
var flags = "?nestededitorsim=1&editorlayout=ide&nosandbox=1";
8281
var ratio = .5;
83-
var dividerWidth = 6;
82+
var dividerWidth = 14;
8483

8584
window.onmessage = function (msg) {
8685
var data = msg.data;

‎pxtlib/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,7 @@ namespace pxt {
389389
partsUrl?: string; // /beta---parts
390390
runUrl?: string; // "/beta---run"
391391
docsUrl?: string; // "/beta---docs"
392+
multiUrl?: string; // "/beta---multi"
392393
isStatic?: boolean;
393394
verprefix?: string; // "v1"
394395
}

‎tests/blocks-test/blocksrunner.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ pxt.webConfig = {
4242
partsUrl: undefined,
4343
runUrl: undefined,
4444
docsUrl: undefined,
45+
multiUrl: undefined,
4546
isStatic: undefined,
4647
};
4748

‎webapp/public/multi.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<html>
2+
3+
<head>
4+
<title>MakeCode Multi Editor</title>
5+
<style>
6+
html, body {
7+
overscroll-behavior: none;
8+
}
9+
iframe {
10+
position: absolute;
11+
width: calc(50% - 0.15rem);
12+
height: 100%;
13+
bottom: 0;
14+
top: 0;
15+
border: none;
16+
}
17+
18+
#left {
19+
left: 0;
20+
right: calc(50% - 0.15rem);
21+
}
22+
23+
#right {
24+
right: 0;
25+
left: calc(50% + 0.15rem);
26+
}
27+
28+
#divider {
29+
position: absolute;
30+
width: 0.3rem;
31+
cursor: col-resize;
32+
height: 100%;
33+
left: calc(50% - 0.15rem);
34+
right: calc(50% + 0.15rem);
35+
background: #bbb;
36+
top: 0rem;
37+
}
38+
</style>
39+
</head>
40+
41+
<body>
42+
<iframe id="left" allow="usb"></iframe>
43+
<div id="divider"></div>
44+
<iframe id="right" allow="usb"></iframe>
45+
<script>
46+
(function () {
47+
// This line gets patched up by the cloud
48+
var pxtConfig = null;
49+
50+
var left = document.getElementById("left");
51+
var right = document.getElementById("right");
52+
var divider = document.getElementById("divider");
53+
var localhost = window.location.hostname == "localhost";
54+
var editor = (pxtConfig ? pxtConfig.relprefix : '/').replace(/-*$/, '');
55+
var flags = "?nestededitorsim=1&editorlayout=ide&nosandbox=1";
56+
var ratio = .5;
57+
var dividerWidth = 14;
58+
59+
window.onmessage = function (msg) {
60+
var data = msg.data;
61+
var source = msg.source;
62+
if (!!data.broadcast) {
63+
data.outer = true;
64+
[left, right]
65+
.filter(function (ifrm) {
66+
return ifrm.contentWindow !== source;
67+
})
68+
.forEach(function (ifrm) {
69+
ifrm.contentWindow.postMessage(data, window.location.origin)
70+
});
71+
}
72+
};
73+
74+
function updateSrc(ifrm) {
75+
if (localhost) {
76+
ifrm.src = "/index.html" + flags;
77+
} else {
78+
ifrm.src = editor + flags;
79+
}
80+
}
81+
updateSrc(left);
82+
updateSrc(right);
83+
84+
function setWidths() {
85+
var t = document.body.clientWidth;
86+
var n = Math.floor(t * ratio);
87+
var i = Math.max(t - n - dividerWidth, 4);
88+
left.style.width = n + "px";
89+
divider.style.left = n + "px";
90+
divider.style.width = dividerWidth + "px";
91+
right.style.left = n + dividerWidth + "px";
92+
right.style.width = i + "px";
93+
}
94+
function startDrag() {
95+
left.style.visibility = "hidden";
96+
right.style.visibility = "hidden";
97+
var n = divider.onmouseover;
98+
var t = divider.onmouseout;
99+
divider.onmouseover = null;
100+
divider.onmouseout = null;
101+
document.body.onmousemove = function (n) {
102+
n || (n = window.event);
103+
ratio = (n.clientX - dividerWidth / 2) / document.body.clientWidth;
104+
ratio < .1 && (ratio = .1);
105+
ratio > .9 && (ratio = .9);
106+
setWidths();
107+
}
108+
document.body.onmouseup = function () {
109+
document.body.onmousemove = null;
110+
document.body.onmouseup = null;
111+
left.style.visibility = "inherit";
112+
right.style.visibility = "inherit";
113+
divider.onmouseover = n;
114+
divider.onmouseout = t;
115+
}
116+
}
117+
window.onresize = setWidths;
118+
setWidths();
119+
divider.onmouseover = function () {
120+
document.body.style.cursor = "w-resize";
121+
divider.onmousedown = startDrag;
122+
}
123+
divider.onmouseout = function () {
124+
document.body.style.cursor = "default";
125+
divider.onmousedown = null;
126+
}
127+
})();
128+
</script>
129+
<!-- @include tracking.html -->
130+
</body>
131+
132+
</html>

0 commit comments

Comments
 (0)