Fossil SCM

Resolved auto-fit mode not rendering in Chromium.

stephan 2022-06-07 23:09 pikchrshow-wasm
Commit 11f779039e8959cc06aed7a733b9c09c00a1a25853af3a64cc126dfa81e90f37
Parent 5b84e810c1e88e8…
3 files changed +20 -12 +6 -4 +8 -5
~ src/fossil.page.pikchrshowasm.js ~ src/pikchrshow.c ~ src/style.pikchrshow.css
M src/fossil.page.pikchrshowasm.js
+20 -12
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -305,13 +305,13 @@
305305
306306
 /**
307307
 Event handler for 'pikchr' messages from the Worker thread.
308308
 */
309309
 PS.addMsgHandler('pikchr', function(ev){
310
- const m = ev.data;
311
- this.e.pikOut.classList[m.isError ? 'add' : 'remove']('error');
312
- this.e.pikOut.dataset.pikchr = m.pikchr;
310
+ const m = ev.data, pikOut = this.e.pikOut;
311
+ pikOut.classList[m.isError ? 'add' : 'remove']('error');
312
+ pikOut.dataset.pikchr = m.pikchr;
313313
 const mode = this.renderModes[this.renderModes.selectedIndex];
314314
 switch(mode){
315315
 case 'text': case 'markdown': case 'wiki': {
316316
 let body;
317317
 switch(mode){
@@ -324,31 +324,39 @@
324324
 default:
325325
 body = m.result;
326326
 }
327327
 this.e.outText.value = body;
328328
 this.e.outText.classList.remove('hidden');
329
- this.e.pikOut.classList.add('hidden');
329
+ pikOut.classList.add('hidden');
330330
 this.e.pikOutWrapper.classList.add('text');
331331
 break;
332332
 }
333333
 case 'svg':
334334
 this.e.outText.classList.add('hidden');
335
- this.e.pikOut.classList.remove('hidden');
335
+ pikOut.classList.remove('hidden');
336336
 this.e.pikOutWrapper.classList.remove('text');
337
- this.e.pikOut.innerHTML = m.result;
337
+ pikOut.innerHTML = m.result;
338338
 this.e.outText.value = m.result/*for clipboard copy*/;
339339
 break;
340340
 default: throw new Error("Unhandled render mode: "+mode);
341341
 }
342342
 let vw = null, vh = null;
343
- if('svg'===mode && !this.config.renderAutofit && !m.isError){
344
- vw = m.width+1; vh = m.height+1;
345
- /* +1 is b/c the SVG uses floating point sizes but pikchr() returns
346
- truncated integers. */
343
+ if('svg'===mode){
344
+ if(m.isError){
345
+ vw = vh = '100%';
346
+ }else if(this.config.renderAutofit){
347
+ /* FIXME: current behavior doesn't work as desired when width>height
348
+ (e.g. non-side-by-side mode).*/
349
+ vw = vh = '98%';
350
+ }else{
351
+ vw = m.width+1+'px'; vh = m.height+1+'px';
352
+ /* +1 is b/c the SVG uses floating point sizes but pikchr()
353
+ returns truncated integers. */
354
+ }
355
+ pikOut.style.width = vw;
356
+ pikOut.style.height = vh;
347357
 }
348
- this.e.pikOut.style.width = vw && vw+'px';
349
- this.e.pikOut.style.height = vh && vh+'px';
350358
 }.bind(PS))/*'pikchr' msg handler*/;
351359
352360
 E('#btn-render-mode').addEventListener('click',function(){
353361
 const modes = this.renderModes;
354362
 modes.selectedIndex = (modes.selectedIndex + 1) % modes.length;
355363
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -305,13 +305,13 @@
305
306 /**
307 Event handler for 'pikchr' messages from the Worker thread.
308 */
309 PS.addMsgHandler('pikchr', function(ev){
310 const m = ev.data;
311 this.e.pikOut.classList[m.isError ? 'add' : 'remove']('error');
312 this.e.pikOut.dataset.pikchr = m.pikchr;
313 const mode = this.renderModes[this.renderModes.selectedIndex];
314 switch(mode){
315 case 'text': case 'markdown': case 'wiki': {
316 let body;
317 switch(mode){
@@ -324,31 +324,39 @@
324 default:
325 body = m.result;
326 }
327 this.e.outText.value = body;
328 this.e.outText.classList.remove('hidden');
329 this.e.pikOut.classList.add('hidden');
330 this.e.pikOutWrapper.classList.add('text');
331 break;
332 }
333 case 'svg':
334 this.e.outText.classList.add('hidden');
335 this.e.pikOut.classList.remove('hidden');
336 this.e.pikOutWrapper.classList.remove('text');
337 this.e.pikOut.innerHTML = m.result;
338 this.e.outText.value = m.result/*for clipboard copy*/;
339 break;
340 default: throw new Error("Unhandled render mode: "+mode);
341 }
342 let vw = null, vh = null;
343 if('svg'===mode && !this.config.renderAutofit && !m.isError){
344 vw = m.width+1; vh = m.height+1;
345 /* +1 is b/c the SVG uses floating point sizes but pikchr() returns
346 truncated integers. */
 
 
 
 
 
 
 
 
 
 
347 }
348 this.e.pikOut.style.width = vw && vw+'px';
349 this.e.pikOut.style.height = vh && vh+'px';
350 }.bind(PS))/*'pikchr' msg handler*/;
351
352 E('#btn-render-mode').addEventListener('click',function(){
353 const modes = this.renderModes;
354 modes.selectedIndex = (modes.selectedIndex + 1) % modes.length;
355
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -305,13 +305,13 @@
305
306 /**
307 Event handler for 'pikchr' messages from the Worker thread.
308 */
309 PS.addMsgHandler('pikchr', function(ev){
310 const m = ev.data, pikOut = this.e.pikOut;
311 pikOut.classList[m.isError ? 'add' : 'remove']('error');
312 pikOut.dataset.pikchr = m.pikchr;
313 const mode = this.renderModes[this.renderModes.selectedIndex];
314 switch(mode){
315 case 'text': case 'markdown': case 'wiki': {
316 let body;
317 switch(mode){
@@ -324,31 +324,39 @@
324 default:
325 body = m.result;
326 }
327 this.e.outText.value = body;
328 this.e.outText.classList.remove('hidden');
329 pikOut.classList.add('hidden');
330 this.e.pikOutWrapper.classList.add('text');
331 break;
332 }
333 case 'svg':
334 this.e.outText.classList.add('hidden');
335 pikOut.classList.remove('hidden');
336 this.e.pikOutWrapper.classList.remove('text');
337 pikOut.innerHTML = m.result;
338 this.e.outText.value = m.result/*for clipboard copy*/;
339 break;
340 default: throw new Error("Unhandled render mode: "+mode);
341 }
342 let vw = null, vh = null;
343 if('svg'===mode){
344 if(m.isError){
345 vw = vh = '100%';
346 }else if(this.config.renderAutofit){
347 /* FIXME: current behavior doesn't work as desired when width>height
348 (e.g. non-side-by-side mode).*/
349 vw = vh = '98%';
350 }else{
351 vw = m.width+1+'px'; vh = m.height+1+'px';
352 /* +1 is b/c the SVG uses floating point sizes but pikchr()
353 returns truncated integers. */
354 }
355 pikOut.style.width = vw;
356 pikOut.style.height = vh;
357 }
 
 
358 }.bind(PS))/*'pikchr' msg handler*/;
359
360 E('#btn-render-mode').addEventListener('click',function(){
361 const modes = this.renderModes;
362 modes.selectedIndex = (modes.selectedIndex + 1) % modes.length;
363
M src/pikchrshow.c
+6 -4
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -494,14 +494,16 @@
494494
 } CX("</fieldset><!-- .zone-wrapper.input -->");
495495
 /*CX("<div class='splitter-handle hidden'></div>");*/
496496
 CX("<fieldset class='zone-wrapper output'>"); {
497497
 CX("<legend><div class='button-bar'>");
498498
 CX("<button id='btn-render-mode'>Render Mode</button> ");
499
- CX("<span id='preview-copy-button' "
500
- "title='Tap to copy to clipboard.'></span>");
501
- CX("<label for='preview-copy-button' "
502
- "title='Tap to copy to clipboard.'></label>");
499
+ CX("<span style='white-space:nowrap'>"
500
+ "<span id='preview-copy-button' "
501
+ "title='Tap to copy to clipboard.'></span>"
502
+ "<label for='preview-copy-button' "
503
+ "title='Tap to copy to clipboard.'></label>"
504
+ "</span>");
503505
 CX("</div></legend>");
504506
 CX("<div id='pikchr-output-wrapper'>");
505507
 CX("<div id='pikchr-output'></div>");
506508
 CX("<textarea class='hidden' id='pikchr-output-text'></textarea>");
507509
 CX("</div>");
508510
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -494,14 +494,16 @@
494 } CX("</fieldset><!-- .zone-wrapper.input -->");
495 /*CX("<div class='splitter-handle hidden'></div>");*/
496 CX("<fieldset class='zone-wrapper output'>"); {
497 CX("<legend><div class='button-bar'>");
498 CX("<button id='btn-render-mode'>Render Mode</button> ");
499 CX("<span id='preview-copy-button' "
500 "title='Tap to copy to clipboard.'></span>");
501 CX("<label for='preview-copy-button' "
502 "title='Tap to copy to clipboard.'></label>");
 
 
503 CX("</div></legend>");
504 CX("<div id='pikchr-output-wrapper'>");
505 CX("<div id='pikchr-output'></div>");
506 CX("<textarea class='hidden' id='pikchr-output-text'></textarea>");
507 CX("</div>");
508
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -494,14 +494,16 @@
494 } CX("</fieldset><!-- .zone-wrapper.input -->");
495 /*CX("<div class='splitter-handle hidden'></div>");*/
496 CX("<fieldset class='zone-wrapper output'>"); {
497 CX("<legend><div class='button-bar'>");
498 CX("<button id='btn-render-mode'>Render Mode</button> ");
499 CX("<span style='white-space:nowrap'>"
500 "<span id='preview-copy-button' "
501 "title='Tap to copy to clipboard.'></span>"
502 "<label for='preview-copy-button' "
503 "title='Tap to copy to clipboard.'></label>"
504 "</span>");
505 CX("</div></legend>");
506 CX("<div id='pikchr-output-wrapper'>");
507 CX("<div id='pikchr-output'></div>");
508 CX("<textarea class='hidden' id='pikchr-output-text'></textarea>");
509 CX("</div>");
510
M src/style.pikchrshow.css
+8 -5
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -133,17 +133,20 @@
133133
 .zone-wrapper.output {
134134
 overflow: auto;
135135
 justify-content: space-between;
136136
 }
137137
 .button-bar {
138
- display: flex;
138
+ /*display: flex;
139139
 flex-wrap: wrap;
140
- justify-content: center;
141
- align-items: center;
140
+ align-items: center;*/
141
+}
142
+.button-bar > * {
143
+ margin-top: 0.1em/*avoid crowding if the controls wrap*/;
144
+ vertical-align: middle;
142145
 }
143
-.button-bar button {
144
- margin: 0 0.5em;
146
+.button-bar > * + * /*all children except the first*/ {
147
+ margin-left: 0.65em;
145148
 }
146149
 fieldset.options {
147150
 border-radius: 0.5em;
148151
 border: 1px inset;
149152
 display: flex;
150153
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -133,17 +133,20 @@
133 .zone-wrapper.output {
134 overflow: auto;
135 justify-content: space-between;
136 }
137 .button-bar {
138 display: flex;
139 flex-wrap: wrap;
140 justify-content: center;
141 align-items: center;
 
 
 
142 }
143 .button-bar button {
144 margin: 0 0.5em;
145 }
146 fieldset.options {
147 border-radius: 0.5em;
148 border: 1px inset;
149 display: flex;
150
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -133,17 +133,20 @@
133 .zone-wrapper.output {
134 overflow: auto;
135 justify-content: space-between;
136 }
137 .button-bar {
138 /*display: flex;
139 flex-wrap: wrap;
140 align-items: center;*/
141 }
142 .button-bar > * {
143 margin-top: 0.1em/*avoid crowding if the controls wrap*/;
144 vertical-align: middle;
145 }
146 .button-bar > * + * /*all children except the first*/ {
147 margin-left: 0.65em;
148 }
149 fieldset.options {
150 border-radius: 0.5em;
151 border: 1px inset;
152 display: flex;
153

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button