Skip to content

Commit c92d459

Browse files
owulveryckowulveryck
committed
feat: options
1 parent c2ac0e2 commit c92d459

File tree

6 files changed

+152
-6
lines changed

6 files changed

+152
-6
lines changed

‎docs/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<div class="row">
1818
<div id="colLeft" class="column left" style="background-color:#aaa;">
1919
<button onclick="displayImage();">run</button> (or ctrl+enter)
20+
<button><a href="" id="dl" download="wtg.svg">Download SVG</a></button>
2021

2122
<textarea id="code" name="code" rows="50" cols="40" onkeypress="onTextChange();">
2223
business - cup of tea
@@ -63,8 +64,10 @@
6364
}</textarea>
6465
<br/>
6566
Zoom: <span id="zoomValue">1</span>
67+
<button onclick="GetURL()"> Get URL </button>
68+
<p id="url"></p>
6669
</div>
67-
<div id="colRight" class="column right" style="background-color:#bbb;">
70+
<div id="colRight" class="column right" style="background-color:#fff;">
6871
<div class="container" id="svgContainer">
6972
<svg />
7073
</div>

‎docs/script.js‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function displayImage() {
2828
svgImage.setAttribute('viewBox', `0 0 ${right.width} ${fullHeight}`);
2929
}
3030
svgSize = { w: svgImage.clientWidth, h: svgImage.clientHeight };
31-
31+
document.getElementById("dl").setAttribute("href",'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(document.getElementById("svgContainer").innerHTML))));
3232
}
3333

3434
const svgContainer = document.getElementById("svgContainer");
@@ -117,3 +117,74 @@ svgContainer.onmouseleave = function (e) {
117117
isPanning = false;
118118
}
119119

120+
121+
const params = new Proxy(new URLSearchParams(window.location.search), {
122+
get: (searchParams, prop) => searchParams.get(prop),
123+
});
124+
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
125+
let wtgText = params.wtg; // "some_value"export
126+
if (wtgText != null) {
127+
console.log(wtgText);
128+
var content = base64ToArrayBuffer(wtgText);
129+
if (content!=null) {
130+
decompress(content,"gzip").then(function(result) {
131+
console.log(result);
132+
document.getElementById("code").innerHTML = result;
133+
134+
});
135+
}
136+
}
137+
138+
function GetURL() {
139+
var compressedFlow = compress(document.getElementById("code").value,"gzip");
140+
compressedFlow.then(function(result) {
141+
// do something with result
142+
var param = arrayBufferToBase64(result);
143+
var url = document.URL;
144+
let params = new URLSearchParams(url.search);
145+
params.set('wtg', param);
146+
console.log(params.toString())
147+
window.history.replaceState({}, '', `${location.pathname}?${params}`);
148+
});
149+
150+
}
151+
152+
153+
function compress(string, encoding) {
154+
const byteArray = new TextEncoder().encode(string);
155+
const cs = new CompressionStream(encoding);
156+
const writer = cs.writable.getWriter();
157+
writer.write(byteArray);
158+
writer.close();
159+
return new Response(cs.readable).arrayBuffer();
160+
}
161+
162+
function decompress(byteArray, encoding) {
163+
const cs = new DecompressionStream(encoding);
164+
const writer = cs.writable.getWriter();
165+
writer.write(byteArray);
166+
writer.close();
167+
return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
168+
return new TextDecoder().decode(arrayBuffer);
169+
});
170+
}
171+
172+
function arrayBufferToBase64( buffer ) {
173+
var binary = '';
174+
var bytes = new Uint8Array( buffer );
175+
var len = bytes.byteLength;
176+
for (var i = 0; i < len; i++) {
177+
binary += String.fromCharCode( bytes[ i ] );
178+
}
179+
return window.btoa( binary );
180+
}
181+
182+
function base64ToArrayBuffer(base64) {
183+
var binary_string = window.atob(base64);
184+
var len = binary_string.length;
185+
var bytes = new Uint8Array( len );
186+
for (var i = 0; i < len; i++) {
187+
bytes[i] = binary_string.charCodeAt(i);
188+
}
189+
return bytes.buffer;
190+
}

‎docs/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
html,
66
body {
77
margin: 0;
8-
background-color: gray;
98
}
109

1110
/* Create two unequal columns that floats next to each other */

‎examples/webassembly/server/assets/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<div class="row">
1818
<div id="colLeft" class="column left" style="background-color:#aaa;">
1919
<button onclick="displayImage();">run</button> (or ctrl+enter)
20+
<button><a href="" id="dl" download="wtg.svg">Download SVG</a></button>
2021

2122
<textarea id="code" name="code" rows="50" cols="40" onkeypress="onTextChange();">
2223
business - cup of tea
@@ -63,8 +64,10 @@
6364
}</textarea>
6465
<br/>
6566
Zoom: <span id="zoomValue">1</span>
67+
<button onclick="GetURL()"> Get URL </button>
68+
<p id="url"></p>
6669
</div>
67-
<div id="colRight" class="column right" style="background-color:#bbb;">
70+
<div id="colRight" class="column right" style="background-color:#fff;">
6871
<div class="container" id="svgContainer">
6972
<svg />
7073
</div>

‎examples/webassembly/server/assets/script.js‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function displayImage() {
2828
svgImage.setAttribute('viewBox', `0 0 ${right.width} ${fullHeight}`);
2929
}
3030
svgSize = { w: svgImage.clientWidth, h: svgImage.clientHeight };
31-
31+
document.getElementById("dl").setAttribute("href",'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(document.getElementById("svgContainer").innerHTML))));
3232
}
3333

3434
const svgContainer = document.getElementById("svgContainer");
@@ -117,3 +117,74 @@ svgContainer.onmouseleave = function (e) {
117117
isPanning = false;
118118
}
119119

120+
121+
const params = new Proxy(new URLSearchParams(window.location.search), {
122+
get: (searchParams, prop) => searchParams.get(prop),
123+
});
124+
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
125+
let wtgText = params.wtg; // "some_value"export
126+
if (wtgText != null) {
127+
console.log(wtgText);
128+
var content = base64ToArrayBuffer(wtgText);
129+
if (content!=null) {
130+
decompress(content,"gzip").then(function(result) {
131+
console.log(result);
132+
document.getElementById("code").innerHTML = result;
133+
134+
});
135+
}
136+
}
137+
138+
function GetURL() {
139+
var compressedFlow = compress(document.getElementById("code").value,"gzip");
140+
compressedFlow.then(function(result) {
141+
// do something with result
142+
var param = arrayBufferToBase64(result);
143+
var url = document.URL;
144+
let params = new URLSearchParams(url.search);
145+
params.set('wtg', param);
146+
console.log(params.toString())
147+
window.history.replaceState({}, '', `${location.pathname}?${params}`);
148+
});
149+
150+
}
151+
152+
153+
function compress(string, encoding) {
154+
const byteArray = new TextEncoder().encode(string);
155+
const cs = new CompressionStream(encoding);
156+
const writer = cs.writable.getWriter();
157+
writer.write(byteArray);
158+
writer.close();
159+
return new Response(cs.readable).arrayBuffer();
160+
}
161+
162+
function decompress(byteArray, encoding) {
163+
const cs = new DecompressionStream(encoding);
164+
const writer = cs.writable.getWriter();
165+
writer.write(byteArray);
166+
writer.close();
167+
return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
168+
return new TextDecoder().decode(arrayBuffer);
169+
});
170+
}
171+
172+
function arrayBufferToBase64( buffer ) {
173+
var binary = '';
174+
var bytes = new Uint8Array( buffer );
175+
var len = bytes.byteLength;
176+
for (var i = 0; i < len; i++) {
177+
binary += String.fromCharCode( bytes[ i ] );
178+
}
179+
return window.btoa( binary );
180+
}
181+
182+
function base64ToArrayBuffer(base64) {
183+
var binary_string = window.atob(base64);
184+
var len = binary_string.length;
185+
var bytes = new Uint8Array( len );
186+
for (var i = 0; i < len; i++) {
187+
bytes[i] = binary_string.charCodeAt(i);
188+
}
189+
return bytes.buffer;
190+
}

‎examples/webassembly/server/assets/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
html,
66
body {
77
margin: 0;
8-
background-color: gray;
98
}
109

1110
/* Create two unequal columns that floats next to each other */

0 commit comments

Comments
 (0)