Fossil SCM

pikchrshow: drag/drop pikchr text files into the textarea. Added a selection list of test/demo scripts which currently includes all of the test scripts from the pikchr repo. That increases the over-the-wire size to 8kb but it caches well.

stephan 2020-09-11 21:56 trunk

Commit d4bb5251b342eb5b645fba736d4fd396ac85f1acb4c87526f49a2e634b0a546c

Parent ba912d94b967517…

2 files changed +1190 -6 +1

~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c

M src/fossil.page.pikchrshow.js

+1190 -6

		--- src/fossil.page.pikchrshow.js
		+++ src/fossil.page.pikchrshow.js
		@@ -26,18 +26,18 @@
26	26	btnSubmit: E('#pikchr-submit-preview'),
27	27	cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
28	28	taContent: E('#content'),
29	29	taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
30	30	'readonly', true),
31		- divControls: E('#pikchrshow-controls'),
	31	+ uiControls: E('#pikchrshow-controls'),
32	32	btnTogglePreviewMode: D.button("Preview mode"),
33	33	selectMarkupAlignment: D.select()
34	34	};
35		- D.append(P.e.divControls, P.e.btnTogglePreviewMode);
	35	+ D.append(P.e.uiControls, P.e.btnTogglePreviewMode);
36	36
37	37	// Setup markup alignment selection...
38		- D.append(P.e.divControls, P.e.selectMarkupAlignment);
	38	+ D.append(P.e.uiControls, P.e.selectMarkupAlignment);
39	39	D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
40	40	['left', 'center'].forEach(function(val,ndx){
41	41	D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
42	42	});
43	43
		@@ -66,16 +66,79 @@
66	66	if(P.previewMode==1 \|\| P.previewMode==2){
67	67	P.renderPreview();
68	68	}
69	69	}, false);
70	70
	71	+ // Set up selection list of predefined scripts...
	72	+ if(true){
	73	+ const selectScript = P.e.selectScript = D.select(),
	74	+ cbAutoPreview = P.e.cbAutoPreview =
	75	+ D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
	76	+ cbWrap = D.addClass(D.div(),'input-with-label')
	77	+ ;
	78	+ D.append(
	79	+ cbWrap,
	80	+ selectScript,
	81	+ cbAutoPreview,
	82	+ D.label(cbAutoPreview,"Auto-preview?")
	83	+ ).childNodes.forEach(function(ch){
	84	+ ch.style.margin = "0 0.25em";
	85	+ });
	86	+ D.append(P.e.uiControls, cbWrap);
	87	+ P.predefinedPiks.forEach(function(script,ndx){
	88	+ const opt = D.option(script.code ? script.code.trim() :'', script.name);
	89	+ D.append(selectScript, opt);
	90	+ if(!ndx) selectScript.selectedIndex = 0 /timing/ordering workaround/;
	91	+ if(!script.code) D.disable(opt);
	92	+ });
	93	+ delete P.predefinedPiks;
	94	+ selectScript.addEventListener('change', function(ev){
	95	+ const val = ev.target.value;
	96	+ if(!val) return;
	97	+ P.e.taContent.value = val;
	98	+ if(cbAutoPreview.checked) P.preview();
	99	+ }, false);
	100	+ }
	101	+
	102	+ // Move dark mode checkbox to the end
	103	+ D.append(P.e.uiControls, P.e.cbDarkMode.parentNode);
	104	+
	105	+ // File drag/drop pikchr scripts into P.e.taContent.
	106	+ // Adapted from: https://stackoverflow.com/a/58677161
	107	+ const dropfile = function(file){
	108	+ const reader = new FileReader();
	109	+ reader.onload = function(e) {P.e.taContent.value = e.target.result};
	110	+ reader.readAsText(file, "UTF-8");
	111	+ };
	112	+ const dropTarget = P.e.taContent /* document.body does not behave how i'd like */;
	113	+ dropTarget.addEventListener('drop', function(ev){
	114	+ D.removeClass(dropTarget, 'dragover');
	115	+ ev.preventDefault();
	116	+ const file = ev.dataTransfer.files[0];
	117	+ if(file) dropfile(file);
	118	+ }, false);
	119	+ dropTarget.addEventListener('dragenter', function(ev){
	120	+ //ev.stopPropagation();
	121	+ //ev.preventDefault();
	122	+ console.debug("dragenter");
	123	+ D.addClass(dropTarget, 'dragover');
	124	+ }, false);
	125	+ dropTarget.addEventListener('dragleave', function(ev){
	126	+ //ev.stopPropagation();
	127	+ //ev.preventDefault();
	128	+ console.debug("dragleave");
	129	+ D.removeClass(dropTarget, 'dragover');
	130	+ }, false);
	131	+
	132	+ // If we start with content, get it in sync with the state generated
	133	+ // by P.preview().
71	134	if(P.e.taContent.value/was pre-filled server-side/){
72	135	/* Fill our "response" state so that renderPreview() can work */
73	136	P.response.inputText = P.e.taContent.value;
74	137	P.response.raw = P.e.previewTarget.innerHTML;
75		- P.renderPreview()/*not strictly necessary, but gets all
76		- labels/headers in alignment.*/;
	138	+ P.renderPreview()/*it's already rendered, but this gets all
	139	+ labels/headers in sync.*/;
77	140	}
78	141	}/F.onPageLoad()/);
79	142
80	143	/**
81	144	Updates the preview view based on the current preview mode and
		@@ -134,11 +197,12 @@
134	197	P.preview = function fp(){
135	198	if(!fp.hasOwnProperty('toDisable')){
136	199	fp.toDisable = [
137	200	/* input elements to disable during ajax operations */
138	201	this.e.btnSubmit, this.e.taContent,
139		- this.e.selectMarkupAlignment
	202	+ this.e.selectMarkupAlignment,
	203	+ this.e.cbAutoPreview, this.e.selectScript,
140	204	/* this.e.btnTogglePreviewMode is handled separately */
141	205	];
142	206	fp.target = this.e.previewTarget;
143	207	fp.updateView = function(c,isError){
144	208	P.previewMode = 0;
		@@ -175,6 +239,1126 @@
175	239	}
176	240	});
177	241	return this;
178	242	}/preview()/;
179	243
	244	+ /**
	245	+ Predefined scripts. Each entry is an object:
	246	+
	247	+ {
	248	+ name: required string,
	249	+
	250	+ code: optional code string. An entry with no code
	251	+ is treated like a separator in the resulting
	252	+ SELECT element (a disabled OPTION).
	253	+
	254	+ }
	255	+ */
	256	+ P.predefinedPiks = [
	257	+ {name: "--Predefined Scripts--"},
	258	+ {name: "Tip: drag/drop pikchr files into the textarea"},
	259	+/*
	260	+ The following were imported from the pikchr test scripts:
	261	+
	262	+ https://fossil-scm.org/pikchr/dir/tests
	263	+*/
	264	+{name: "autochop01", code:`C: box "box"
	265	+
	266	+line from C to 3cm heading 00 from C chop;
	267	+line from C to 3cm heading 10 from C chop;
	268	+line from C to 3cm heading 20 from C chop;
	269	+line from C to 3cm heading 30 from C chop;
	270	+line from C to 3cm heading 40 from C chop;
	271	+line from C to 3cm heading 50 from C chop;
	272	+line from C to 3cm heading 60 from C chop;
	273	+line from C to 3cm heading 70 from C chop;
	274	+line from C to 3cm heading 80 from C chop;
	275	+line from C to 3cm heading 90 from C chop;
	276	+line from C to 3cm heading 100 from C chop;
	277	+line from C to 3cm heading 110 from C chop;
	278	+line from C to 3cm heading 120 from C chop;
	279	+line from C to 3cm heading 130 from C chop;
	280	+line from C to 3cm heading 140 from C chop;
	281	+line from C to 3cm heading 150 from C chop;
	282	+line from C to 3cm heading 160 from C chop;
	283	+line from C to 3cm heading 170 from C chop;
	284	+line from C to 3cm heading 180 from C chop;
	285	+line from C to 3cm heading 190 from C chop;
	286	+line from C to 3cm heading 200 from C chop;
	287	+line from C to 3cm heading 210 from C chop;
	288	+line from C to 3cm heading 220 from C chop;
	289	+line from C to 3cm heading 230 from C chop;
	290	+line from C to 3cm heading 240 from C chop;
	291	+line from C to 3cm heading 250 from C chop;
	292	+line from C to 3cm heading 260 from C chop;
	293	+line from C to 3cm heading 270 from C chop;
	294	+line from C to 3cm heading 280 from C chop;
	295	+line from C to 3cm heading 290 from C chop;
	296	+line from C to 3cm heading 300 from C chop;
	297	+line from C to 3cm heading 310 from C chop;
	298	+line from C to 3cm heading 320 from C chop;
	299	+line from C to 3cm heading 330 from C chop;
	300	+line from C to 3cm heading 340 from C chop;
	301	+line from C to 3cm heading 350 from C chop;
	302	+`},
	303	+{name: "autochop02", code:`C: box "box" radius 10px
	304	+
	305	+line from C to 3cm heading 00 from C chop;
	306	+line from C to 3cm heading 10 from C chop;
	307	+line from C to 3cm heading 20 from C chop;
	308	+line from C to 3cm heading 30 from C chop;
	309	+line from C to 3cm heading 40 from C chop;
	310	+line from C to 3cm heading 50 from C chop;
	311	+line from C to 3cm heading 60 from C chop;
	312	+line from C to 3cm heading 70 from C chop;
	313	+line from C to 3cm heading 80 from C chop;
	314	+line from C to 3cm heading 90 from C chop;
	315	+line from C to 3cm heading 100 from C chop;
	316	+line from C to 3cm heading 110 from C chop;
	317	+line from C to 3cm heading 120 from C chop;
	318	+line from C to 3cm heading 130 from C chop;
	319	+line from C to 3cm heading 140 from C chop;
	320	+line from C to 3cm heading 150 from C chop;
	321	+line from C to 3cm heading 160 from C chop;
	322	+line from C to 3cm heading 170 from C chop;
	323	+line from C to 3cm heading 180 from C chop;
	324	+line from C to 3cm heading 190 from C chop;
	325	+line from C to 3cm heading 200 from C chop;
	326	+line from C to 3cm heading 210 from C chop;
	327	+line from C to 3cm heading 220 from C chop;
	328	+line from C to 3cm heading 230 from C chop;
	329	+line from C to 3cm heading 240 from C chop;
	330	+line from C to 3cm heading 250 from C chop;
	331	+line from C to 3cm heading 260 from C chop;
	332	+line from C to 3cm heading 270 from C chop;
	333	+line from C to 3cm heading 280 from C chop;
	334	+line from C to 3cm heading 290 from C chop;
	335	+line from C to 3cm heading 300 from C chop;
	336	+line from C to 3cm heading 310 from C chop;
	337	+line from C to 3cm heading 320 from C chop;
	338	+line from C to 3cm heading 330 from C chop;
	339	+line from C to 3cm heading 340 from C chop;
	340	+line from C to 3cm heading 350 from C chop;
	341	+`},
	342	+{name: "autochop03", code:`C: circle "circle"
	343	+
	344	+line from C to 3cm heading 00 from C chop;
	345	+line from C to 3cm heading 10 from C chop;
	346	+line from C to 3cm heading 20 from C chop;
	347	+line from C to 3cm heading 30 from C chop;
	348	+line from C to 3cm heading 40 from C chop;
	349	+line from C to 3cm heading 50 from C chop;
	350	+line from C to 3cm heading 60 from C chop;
	351	+line from C to 3cm heading 70 from C chop;
	352	+line from C to 3cm heading 80 from C chop;
	353	+line from C to 3cm heading 90 from C chop;
	354	+line from C to 3cm heading 100 from C chop;
	355	+line from C to 3cm heading 110 from C chop;
	356	+line from C to 3cm heading 120 from C chop;
	357	+line from C to 3cm heading 130 from C chop;
	358	+line from C to 3cm heading 140 from C chop;
	359	+line from C to 3cm heading 150 from C chop;
	360	+line from C to 3cm heading 160 from C chop;
	361	+line from C to 3cm heading 170 from C chop;
	362	+line from C to 3cm heading 180 from C chop;
	363	+line from C to 3cm heading 190 from C chop;
	364	+line from C to 3cm heading 200 from C chop;
	365	+line from C to 3cm heading 210 from C chop;
	366	+line from C to 3cm heading 220 from C chop;
	367	+line from C to 3cm heading 230 from C chop;
	368	+line from C to 3cm heading 240 from C chop;
	369	+line from C to 3cm heading 250 from C chop;
	370	+line from C to 3cm heading 260 from C chop;
	371	+line from C to 3cm heading 270 from C chop;
	372	+line from C to 3cm heading 280 from C chop;
	373	+line from C to 3cm heading 290 from C chop;
	374	+line from C to 3cm heading 300 from C chop;
	375	+line from C to 3cm heading 310 from C chop;
	376	+line from C to 3cm heading 320 from C chop;
	377	+line from C to 3cm heading 330 from C chop;
	378	+line from C to 3cm heading 340 from C chop;
	379	+line from C to 3cm heading 350 from C chop;
	380	+`},
	381	+{name: "autochop04", code:`C: ellipse "ellipse"
	382	+
	383	+line from C to 3cm heading 00 from C chop;
	384	+line from C to 3cm heading 10 from C chop;
	385	+line from C to 3cm heading 20 from C chop;
	386	+line from C to 3cm heading 30 from C chop;
	387	+line from C to 3cm heading 40 from C chop;
	388	+line from C to 3cm heading 50 from C chop;
	389	+line from C to 3cm heading 60 from C chop;
	390	+line from C to 3cm heading 70 from C chop;
	391	+line from C to 3cm heading 80 from C chop;
	392	+line from C to 3cm heading 90 from C chop;
	393	+line from C to 3cm heading 100 from C chop;
	394	+line from C to 3cm heading 110 from C chop;
	395	+line from C to 3cm heading 120 from C chop;
	396	+line from C to 3cm heading 130 from C chop;
	397	+line from C to 3cm heading 140 from C chop;
	398	+line from C to 3cm heading 150 from C chop;
	399	+line from C to 3cm heading 160 from C chop;
	400	+line from C to 3cm heading 170 from C chop;
	401	+line from C to 3cm heading 180 from C chop;
	402	+line from C to 3cm heading 190 from C chop;
	403	+line from C to 3cm heading 200 from C chop;
	404	+line from C to 3cm heading 210 from C chop;
	405	+line from C to 3cm heading 220 from C chop;
	406	+line from C to 3cm heading 230 from C chop;
	407	+line from C to 3cm heading 240 from C chop;
	408	+line from C to 3cm heading 250 from C chop;
	409	+line from C to 3cm heading 260 from C chop;
	410	+line from C to 3cm heading 270 from C chop;
	411	+line from C to 3cm heading 280 from C chop;
	412	+line from C to 3cm heading 290 from C chop;
	413	+line from C to 3cm heading 300 from C chop;
	414	+line from C to 3cm heading 310 from C chop;
	415	+line from C to 3cm heading 320 from C chop;
	416	+line from C to 3cm heading 330 from C chop;
	417	+line from C to 3cm heading 340 from C chop;
	418	+line from C to 3cm heading 350 from C chop;
	419	+`},
	420	+{name: "autochop05", code:`C: oval "oval"
	421	+
	422	+line from C to 3cm heading 00 from C chop;
	423	+line from C to 3cm heading 10 from C chop;
	424	+line from C to 3cm heading 20 from C chop;
	425	+line from C to 3cm heading 30 from C chop;
	426	+line from C to 3cm heading 40 from C chop;
	427	+line from C to 3cm heading 50 from C chop;
	428	+line from C to 3cm heading 60 from C chop;
	429	+line from C to 3cm heading 70 from C chop;
	430	+line from C to 3cm heading 80 from C chop;
	431	+line from C to 3cm heading 90 from C chop;
	432	+line from C to 3cm heading 100 from C chop;
	433	+line from C to 3cm heading 110 from C chop;
	434	+line from C to 3cm heading 120 from C chop;
	435	+line from C to 3cm heading 130 from C chop;
	436	+line from C to 3cm heading 140 from C chop;
	437	+line from C to 3cm heading 150 from C chop;
	438	+line from C to 3cm heading 160 from C chop;
	439	+line from C to 3cm heading 170 from C chop;
	440	+line from C to 3cm heading 180 from C chop;
	441	+line from C to 3cm heading 190 from C chop;
	442	+line from C to 3cm heading 200 from C chop;
	443	+line from C to 3cm heading 210 from C chop;
	444	+line from C to 3cm heading 220 from C chop;
	445	+line from C to 3cm heading 230 from C chop;
	446	+line from C to 3cm heading 240 from C chop;
	447	+line from C to 3cm heading 250 from C chop;
	448	+line from C to 3cm heading 260 from C chop;
	449	+line from C to 3cm heading 270 from C chop;
	450	+line from C to 3cm heading 280 from C chop;
	451	+line from C to 3cm heading 290 from C chop;
	452	+line from C to 3cm heading 300 from C chop;
	453	+line from C to 3cm heading 310 from C chop;
	454	+line from C to 3cm heading 320 from C chop;
	455	+line from C to 3cm heading 330 from C chop;
	456	+line from C to 3cm heading 340 from C chop;
	457	+line from C to 3cm heading 350 from C chop;
	458	+`},
	459	+{name: "autochop06", code:`C: cylinder "cylinder"
	460	+
	461	+line from C to 3cm heading 00 from C chop;
	462	+line from C to 3cm heading 10 from C chop;
	463	+line from C to 3cm heading 20 from C chop;
	464	+line from C to 3cm heading 30 from C chop;
	465	+line from C to 3cm heading 40 from C chop;
	466	+line from C to 3cm heading 50 from C chop;
	467	+line from C to 3cm heading 60 from C chop;
	468	+line from C to 3cm heading 70 from C chop;
	469	+line from C to 3cm heading 80 from C chop;
	470	+line from C to 3cm heading 90 from C chop;
	471	+line from C to 3cm heading 100 from C chop;
	472	+line from C to 3cm heading 110 from C chop;
	473	+line from C to 3cm heading 120 from C chop;
	474	+line from C to 3cm heading 130 from C chop;
	475	+line from C to 3cm heading 140 from C chop;
	476	+line from C to 3cm heading 150 from C chop;
	477	+line from C to 3cm heading 160 from C chop;
	478	+line from C to 3cm heading 170 from C chop;
	479	+line from C to 3cm heading 180 from C chop;
	480	+line from C to 3cm heading 190 from C chop;
	481	+line from C to 3cm heading 200 from C chop;
	482	+line from C to 3cm heading 210 from C chop;
	483	+line from C to 3cm heading 220 from C chop;
	484	+line from C to 3cm heading 230 from C chop;
	485	+line from C to 3cm heading 240 from C chop;
	486	+line from C to 3cm heading 250 from C chop;
	487	+line from C to 3cm heading 260 from C chop;
	488	+line from C to 3cm heading 270 from C chop;
	489	+line from C to 3cm heading 280 from C chop;
	490	+line from C to 3cm heading 290 from C chop;
	491	+line from C to 3cm heading 300 from C chop;
	492	+line from C to 3cm heading 310 from C chop;
	493	+line from C to 3cm heading 320 from C chop;
	494	+line from C to 3cm heading 330 from C chop;
	495	+line from C to 3cm heading 340 from C chop;
	496	+line from C to 3cm heading 350 from C chop;
	497	+`},
	498	+{name: "autochop07", code:`C: file "file"
	499	+
	500	+line from C to 3cm heading 00 from C chop;
	501	+line from C to 3cm heading 10 from C chop;
	502	+line from C to 3cm heading 20 from C chop;
	503	+line from C to 3cm heading 30 from C chop;
	504	+line from C to 3cm heading 40 from C chop;
	505	+line from C to 3cm heading 50 from C chop;
	506	+line from C to 3cm heading 60 from C chop;
	507	+line from C to 3cm heading 70 from C chop;
	508	+line from C to 3cm heading 80 from C chop;
	509	+line from C to 3cm heading 90 from C chop;
	510	+line from C to 3cm heading 100 from C chop;
	511	+line from C to 3cm heading 110 from C chop;
	512	+line from C to 3cm heading 120 from C chop;
	513	+line from C to 3cm heading 130 from C chop;
	514	+line from C to 3cm heading 140 from C chop;
	515	+line from C to 3cm heading 150 from C chop;
	516	+line from C to 3cm heading 160 from C chop;
	517	+line from C to 3cm heading 170 from C chop;
	518	+line from C to 3cm heading 180 from C chop;
	519	+line from C to 3cm heading 190 from C chop;
	520	+line from C to 3cm heading 200 from C chop;
	521	+line from C to 3cm heading 210 from C chop;
	522	+line from C to 3cm heading 220 from C chop;
	523	+line from C to 3cm heading 230 from C chop;
	524	+line from C to 3cm heading 240 from C chop;
	525	+line from C to 3cm heading 250 from C chop;
	526	+line from C to 3cm heading 260 from C chop;
	527	+line from C to 3cm heading 270 from C chop;
	528	+line from C to 3cm heading 280 from C chop;
	529	+line from C to 3cm heading 290 from C chop;
	530	+line from C to 3cm heading 300 from C chop;
	531	+line from C to 3cm heading 310 from C chop;
	532	+line from C to 3cm heading 320 from C chop;
	533	+line from C to 3cm heading 330 from C chop;
	534	+line from C to 3cm heading 340 from C chop;
	535	+line from C to 3cm heading 350 from C chop;
	536	+`},
	537	+{name: "swimlane", code:` $laneh = 0.75
	538	+
	539	+ # Draw the lanes
	540	+ down
	541	+ box width 3.5in height $laneh fill 0xacc9e3
	542	+ box same fill 0xc5d8ef
	543	+ box same as first box
	544	+ box same as 2nd box
	545	+ line from 1st box.sw+(0.2,0) up until even with 1st box.n \
	546	+ "Alan" above aligned
	547	+ line from 2nd box.sw+(0.2,0) up until even with 2nd box.n \
	548	+ "Betty" above aligned
	549	+ line from 3rd box.sw+(0.2,0) up until even with 3rd box.n \
	550	+ "Charlie" above aligned
	551	+ line from 4th box.sw+(0.2,0) up until even with 4th box.n \
	552	+ "Darlene" above aligned
	553	+
	554	+ # fill in content for the Alice lane
	555	+ right
	556	+A1: circle rad 0.1in at end of first line + (0.2,-0.2) \
	557	+ fill white thickness 1.5px "1"
	558	+ arrow right 50%
	559	+ circle same "2"
	560	+ arrow right until even with first box.e - (0.65,0.0)
	561	+ ellipse "future" fit fill white height 0.2 width 0.5 thickness 1.5px
	562	+A3: circle same at A1+(0.8,-0.3) "3" fill 0xc0c0c0
	563	+ arrow from A1 to last circle chop "fork!" below aligned
	564	+
	565	+ # content for the Betty lane
	566	+B1: circle same as A1 at A1-(0,$laneh) "1"
	567	+ arrow right 50%
	568	+ circle same "2"
	569	+ arrow right until even with first ellipse.w
	570	+ ellipse same "future"
	571	+B3: circle same at A3-(0,$laneh) "3"
	572	+ arrow right 50%
	573	+ circle same as A3 "4"
	574	+ arrow from B1 to 2nd last circle chop
	575	+
	576	+ # content for the Charlie lane
	577	+C1: circle same as A1 at B1-(0,$laneh) "1"
	578	+ arrow 50%
	579	+ circle same "2"
	580	+ arrow right 0.8in "goes" "offline"
	581	+C5: circle same as A3 "5"
	582	+ arrow right until even with first ellipse.w
	583	+ ellipse same "future"
	584	+ text "back online" "pushes 5" "pulls 3 & 4" with .n at last arrow
	585	+
	586	+ # content for the Darlene lane
	587	+D1: circle same as A1 at C1-(0,$laneh) "1"
	588	+ arrow 50%
	589	+ circle same "2"
	590	+ arrow right until even with C5.w
	591	+ circle same "5"
	592	+ arrow 50%
	593	+ circle same as A3 "6"
	594	+ arrow right until even with first ellipse.w
	595	+ ellipse same "future"
	596	+D3: circle same as B3 at B3-(0,2*$laneh) "3"
	597	+ arrow 50%
	598	+ circle same "4"
	599	+ arrow from D1 to D3 chop
	600	+`},
	601	+{name: "test01", code:`circle "C0"; arrow; circle "C1"; arrow; circle "C2"; arrow;
	602	+ circle "C4"; arrow; circle "C6"
	603	+circle "C3" at (C4.x-C2.x) ne of C2; arrow; circle "C5"
	604	+arrow from C2.ne to C3.sw
	605	+`},
	606	+{name: "test02", code:`/* First generate the main graph */
	607	+scale = 0.75
	608	+Main: [
	609	+ circle "C0"
	610	+ arrow
	611	+ circle "C1"
	612	+ arrow
	613	+ circle "C2"
	614	+ arrow
	615	+ circle "C4"
	616	+ arrow
	617	+ circle "C6"
	618	+]
	619	+Branch: [
	620	+ circle "C3"
	621	+ arrow
	622	+ circle "C5"
	623	+] with .sw at Main.C2.n + (0.35,0.35)
	624	+arrow from Main.C2 to Branch.C3 chop
	625	+
	626	+/* Now generate the background colors */
	627	+layer = 0
	628	+$featurecolor = 0xfedbce
	629	+$maincolor = 0xd9fece
	630	+$divY = (Branch.y + Main.y)/2
	631	+$divH = (Branch.y - Main.y)
	632	+box fill $featurecolor color $featurecolor \
	633	+ width Branch.width*1.5 height $divH \
	634	+ at Branch
	635	+box fill $maincolor color $maincolor \
	636	+ width Main.width+0.1 height $divH \
	637	+ at Main
	638	+"main" ljust at 0.1 se of nw of 2nd box
	639	+"feature" ljust at 0.1 se of nw of 1st box
	640	+`},
	641	+{name: "test03", code:`right
	642	+B1: box "One"; line
	643	+B2: box "Two"; arrow
	644	+B3: box "Three"; down; arrow down 50%; circle "Hi!"; left;
	645	+spline -> left 2cm then to One.se
	646	+Macro: [
	647	+ B4: box "four"
	648	+ B5: box "five"
	649	+ B6: box "six"
	650	+] with n at 3cm below s of 2nd box
	651	+
	652	+arrow from s of 2nd box to Macro.B5.n
	653	+
	654	+spline -> from e of last circle right 1cm then down 1cm then to Macro.B4.e
	655	+
	656	+box width Macro.width+0.1 height Macro.height+0.1 at Macro color Red
	657	+box width Macro.B5.width+0.05 \
	658	+ height Macro.B5.height+0.05 at Macro.B5 color blue
	659	+`},
	660	+{name: "test04", code:`print 5+8;
	661	+print (17.4-5)/(2-2);
	662	+`},
	663	+{name: "test05", code:`print linewid
	664	+linewid=0.8
	665	+print linewid
	666	+scale=2.0
	667	+print scale
	668	+print hotpink
	669	+print 17 + linewid*1000;
	670	+print sin(scale);
	671	+print cos(scale)
	672	+print sqrt(17)
	673	+print min(5,10)
	674	+print max(5,10)
	675	+print sqrt(-11)
	676	+`},
	677	+{name: "test06", code:`B1: box "one" width 1 height 1 at 2,2;
	678	+B2: box thickness 300% dotted 0.03 "two" at 1,3;
	679	+print "B2.n: ",B2.n.x,",",B2.n.y
	680	+print "B2.c: ",B2.c.x,",",B2.c.y
	681	+print "B2.e: ",B2.e.x,",",B2.e.y
	682	+scale = 1
	683	+box "three" "four" ljust "five" with .n at 0.1 below B2.s width 50%
	684	+
	685	+# Text demo: <text x="100" y="100" text-anchor="end" dominant-baseline="central">I love SVG!</text>
	686	+`},
	687	+{name: "test07", code:`B: box "This is" "<b>" "box \"B\"" color DarkRed
	688	+
	689	+ "B.nw" rjust above at 0.05 left of B.nw
	690	+ "B.w" rjust at 0.05 left of B.w
	691	+ "B.sw" rjust below at 0.05 left of B.sw; $abc = DarkBlue
	692	+ "B.s" below at B.s
	693	+ // C++ style comments allowed.
	694	+ "B.se" ljust below at 0.05 right of B.se color DarkBlue
	695	+ "B.e" ljust at 0.05 right of B.e /* C-style comments */
	696	+ "B.ne" ljust above at 0.05 right of B.ne
	697	+ "B.n" center above at B.n
	698	+print "this is a test: " /comment ignored/, $abc
	699	+print "Colors:", Orange, Black, White, Red, Green, Blue
	700	+
	701	+# line from B.ne + (0.05,0) right 1.0 then down 2.5 then left 1.5
	702	+`},
	703	+{name: "test08", code:` debug = 1;
	704	+
	705	+ box "one" width 80% height 80%
	706	+ box "two" width 150% color DarkRed
	707	+ arrow "xyz" above
	708	+ box "three" height 150% color DarkBlue
	709	+ down
	710	+ arrow
	711	+B4: box "four"
	712	+B45: box "4.5" fill SkyBlue
	713	+ move
	714	+B5: box "five"
	715	+ left
	716	+B6: box "six"
	717	+ up
	718	+ box "seven" width 50% height 50%
	719	+
	720	+ line from 0.1 right of B4.e right 1 then down until even with B5 \
	721	+ then to B5 rad 0.1 chop
	722	+
	723	+ arrow from B6 left even with 2nd box then up to 2nd box chop rad 0.1
	724	+ arrow from 1/2 way between B6.w and B6.sw left until even with first box \
	725	+ then up to first box rad 0.1 chop
	726	+
	727	+oval wid 25% ht B4.n.y - B45.s.y at (B6.x,B4.s.y)
	728	+arrow from last box to last oval chop
	729	+arrow <- from B4.w left until even with last oval.e
	730	+arrow <- from B45 left until even with last oval.e chop
	731	+`},
	732	+{name: "test09", code:`HEAD: circle
	733	+ circle radius 50% with .se at HEAD.nw
	734	+ circle radius 50% with .sw at HEAD.ne
	735	+`},
	736	+{name: "test10", code:`C: "+"; $x = 0
	737	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	738	+ $x = $x + 10
	739	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	740	+ $x = $x + 10
	741	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	742	+ $x = $x + 10
	743	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	744	+ $x = $x + 10
	745	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	746	+ $x = $x + 10
	747	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	748	+ $x = $x + 10
	749	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	750	+ $x = $x + 10
	751	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	752	+ $x = $x + 10
	753	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	754	+ $x = $x + 10
	755	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	756	+ $x = $x + 10
	757	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	758	+ $x = $x + 10
	759	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	760	+ $x = $x + 10
	761	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	762	+ $x = $x + 10
	763	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	764	+ $x = $x + 10
	765	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	766	+ $x = $x + 10
	767	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	768	+ $x = $x + 10
	769	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	770	+ $x = $x + 10
	771	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	772	+ $x = $x + 10
	773	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	774	+ $x = $x + 10
	775	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	776	+ $x = $x + 10
	777	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	778	+ $x = $x + 10
	779	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	780	+ $x = $x + 10
	781	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	782	+ $x = $x + 10
	783	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	784	+ $x = $x + 10
	785	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	786	+ $x = $x + 10
	787	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	788	+ $x = $x + 10
	789	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	790	+ $x = $x + 10
	791	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	792	+ $x = $x + 10
	793	+ line from 0.5 heading $x from C to 1.0 heading $x from C
	794	+`},
	795	+{name: "test11", code:` linerad = 5px
	796	+C: circle "Center" rad 150%
	797	+ circle "N" at 1.0 n of C; arrow from C to last chop ->
	798	+ circle "NE" at 1.0 ne of C; arrow from C to last chop <-
	799	+ circle "E" at 1.0 e of C; arrow from C to last chop <->
	800	+ circle "SE" at 1.0 se of C; arrow from C to last chop ->
	801	+ circle "S" at 1.0 s of C; arrow from C to last chop <-
	802	+ circle "SW" at 1.0 sw of C; arrow from C to last chop <->
	803	+ circle "W" at 1.0 w of C; arrow from C to last chop ->
	804	+ circle "NW" at 1.0 nw of C; arrow from C to last chop <-
	805	+ arrow from 2nd circle to 3rd circle chop
	806	+ arrow from 4th circle to 3rd circle chop
	807	+ arrow from SW to S chop <->
	808	+ circle "ESE" at 2.0 heading 112.5 from Center \
	809	+ thickness 150% fill lightblue radius 75%
	810	+ arrow from Center to ESE thickness 150% <-> chop
	811	+ arrow from ESE up 1.35 then to NE chop
	812	+ line dashed <- from E.e to (ESE.x,E.y)
	813	+ line dotted <-> thickness 50% from N to NW chop
	814	+`},
	815	+{name: "test12", code:`circle "One"
	816	+arrow
	817	+circle "Two"; down
	818	+arrow down 40%
	819	+circle "Three"
	820	+move
	821	+circle "Four"
	822	+`},
	823	+{name: "test13", code:`// margin = 1
	824	+line up 1 right 2
	825	+linewid = 0
	826	+arrow left 2
	827	+move left 0.1
	828	+line <-> down 1
	829	+"height " rjust at last line
	830	+`},
	831	+{name: "test14", code:`print "1in=",1in
	832	+print "1cm=",1cm
	833	+print "1mm=",1mm
	834	+print "1pt=",1pt
	835	+print "1px=",1px
	836	+print "1pc=",1pc
	837	+scale = 0.25
	838	+circle "in" radius 1in
	839	+circle "cm" radius 2.54cm
	840	+circle "mm" radius 25.4mm
	841	+circle "pt" radius 72pt
	842	+circle "px" radius 96px
	843	+circle "pc" radius 6pc
	844	+
	845	+circle "in" radius 0.5*1in with .n at s of 1st circle
	846	+circle "cm" radius 0.5*2.54cm
	847	+circle "mm" radius 25.4mm * 0.5
	848	+circle "pt" radius 72pt * 0.5
	849	+circle "px" radius 96px * 0.5
	850	+circle "pc" radius 6pc * 0.5
	851	+`},
	852	+{name: "test15", code:`ellipse "document"
	853	+arrow
	854	+box "PIC"
	855	+arrow
	856	+box "TBL/EQN" "(optional)" dashed
	857	+arrow
	858	+box "TROFF"
	859	+arrow
	860	+ellipse "typesetter"
	861	+`},
	862	+{name: "test16", code:`box "this is" "a box"
	863	+`},
	864	+{name: "test17", code:`line "this is" "a line"
	865	+`},
	866	+{name: "test18", code:`box width 3 height 0.1; circle radius 0.1
	867	+`},
	868	+{name: "test19", code:`line up right; line down; line down left; line up
	869	+`},
	870	+{name: "test20", code:`box dotted; line dotted; move; line dashed; box dashed
	871	+`},
	872	+{name: "test21", code:`line right 5 dashed; move left 5 down .25; right
	873	+line right 5 dashed 0.25; move left 5 down .25; right
	874	+line right 5 dashed 0.5; move left 5 down .25; right
	875	+line right 5 dashed 1;
	876	+`},
	877	+{name: "test22", code:`box invisible "input"; arrow; box invisible "output"
	878	+`},
	879	+{name: "test23b", code:`margin = 24pt;
	880	+linewid *= 1.75
	881	+charht = 0.14
	882	+//thickness *= 8
	883	+print charht, thickness
	884	+arrow "on top of"; move
	885	+arrow "above" "below"; move
	886	+arrow "above" above; move
	887	+arrow "below" below; move
	888	+arrow "above" "on top of" "below"
	889	+
	890	+move to start of first arrow down 1in;
	891	+right
	892	+arrow "way a\|\|bove" "ab\|\|ove" "on t\|\|he line" "below" "way below"
	893	+move; arrow "way above" "above" "below" "way below"
	894	+move; arrow "way above" above "above" above
	895	+move; arrow "below" below "way below" below
	896	+move; arrow "above-1" above "above-2" above "floating"
	897	+
	898	+move to start of first arrow down 2in;
	899	+right
	900	+arrow "above-1" above "above-2" above "below" below
	901	+move; arrow "below-1" below "below-2" below "floating"
	902	+move; arrow "below-1" below "below-2" below "above" above
	903	+
	904	+move to start of first arrow down 3in;
	905	+right
	906	+box "first line" "second line" "third line" "fourth line" "fifth line" fit
	907	+move
	908	+box "first line" "second line" "third line" "fourth line" fit
	909	+move
	910	+box "first line" "second line" "third line" fit
	911	+move
	912	+box "first line" "second line" fit
	913	+move
	914	+box "first line" fit
	915	+
	916	+move to start of first arrow down 4in;
	917	+right
	918	+box "first above" above "second above" above "third" fit
	919	+dot color red at last box
	920	+`},
	921	+{name: "test23c", code:`linewid *= 2
	922	+arrow "Big" big "Small" small thin
	923	+box invis "thin" "line" fit
	924	+move
	925	+arrow "Big Big" big big "Small Small" small small thick
	926	+box invis "thick" "line" fit
	927	+box thick "Thick" with .nw at .5 below start of 1st arrow
	928	+move
	929	+box thick thick "Thick" "Thick"
	930	+move
	931	+box thin "Thin"
	932	+move
	933	+box thin thin "Thin" "Thin"
	934	+`},
	935	+{name: "test23", code:`margin = 24pt;
	936	+linewid *= 1.75
	937	+arrow "on top of"; move
	938	+arrow "above" "below"; move
	939	+arrow "above" above; move
	940	+arrow "below" below; move
	941	+arrow "above" "on top of" "below"
	942	+
	943	+move to start of first arrow down 1in;
	944	+right
	945	+arrow "way above" "above" "on the line" "below" "way below"
	946	+move; arrow "way above" "above" "below" "way below"
	947	+
	948	+move to start of first arrow down 2in;
	949	+right
	950	+box "first line" "second line" "third line" "fourth line" "fifth line" fit
	951	+move
	952	+box "first line" "second line" "third line" "fourth line" fit
	953	+move
	954	+box "first line" "second line" "third line" fit
	955	+move
	956	+box "first line" "second line" fit
	957	+move
	958	+box "first line" fit
	959	+
	960	+move to start of first arrow down 3in;
	961	+right
	962	+box "first above" above "second above" above "third" fit
	963	+dot color red at last box
	964	+`},
	965	+{name: "test24", code:`arrow left; box; arrow; circle; arrow
	966	+`},
	967	+{name: "test25", code:`arrow; circle; down; arrow
	968	+`},
	969	+{name: "test26", code:`line from 0,0 right 1 then up 1 then right 1 then down 1.5 \
	970	+ then left 0.6 dashed;
	971	+spline from 0,0 right 1 then up 1 then right 1 then down 1.5 \
	972	+ then left 0.6
	973	+`},
	974	+{name: "test27", code:`line dotted right 1 then down 0.5 left 1 then right 1
	975	+spline from start of first line color red \
	976	+ right 1 then down 0.5 left 1 then right 1 <->
	977	+spline from start of first line color blue radius 0.2 \
	978	+ right 1 then down 0.5 left 1 then right 1 <->
	979	+
	980	+move down 1 from start of first line
	981	+line radius 0.3 \
	982	+ right 1 then down 0.5 left 1 then right 1 <->
	983	+`},
	984	+{name: "test28", code:`box "Box"
	985	+arrow
	986	+cylinder "One"
	987	+down
	988	+arrow
	989	+ellipse "Ellipse"
	990	+up
	991	+arrow from One.n
	992	+circle "Circle"
	993	+right
	994	+arrow from One.e <-
	995	+circle "E" radius 50%
	996	+circle "NE" radius 50% at 0.5 ne of One.ne
	997	+arrow from NE.sw to One.ne
	998	+circle "SE" radius 50% at 0.5 se of One.se
	999	+arrow from SE.nw to One.se
	1000	+
	1001	+spline from One.sw left 0.2 down 0.2 then to Box.se ->
	1002	+spline from Circle.w left 0.3 then left 0.2 down 0.2 then to One.nw ->
	1003	+`},
	1004	+{name: "test29", code:`# Demonstrate the ability to close and fill a line with the "fill"
	1005	+# attribute - treating it as a polygon.
	1006	+#
	1007	+line right 1 then down 0.25 then up .5 right 0.5 \
	1008	+ then up .5 left 0.5 then down 0.25 then left 1 close fill blue
	1009	+move
	1010	+box "Box to right" "of the" "polygon"
	1011	+move
	1012	+line "not a" "polygon" right 1in fill red
	1013	+move to w of 1st line then down 3cm
	1014	+line same as 1st line
	1015	+`},
	1016	+{name: "test30", code:`debug = 1
	1017	+down; box ht 0.2 wid 1.5; move down 0.15; box same; move same; box same
	1018	+`},
	1019	+{name: "test31", code:`leftmargin = 1cm
	1020	+box "1"
	1021	+[ box "2"; arrow "3" above; box "4" ] with .n at last box.s - (0,0.1)
	1022	+"Thing 2: "rjust at last [].w
	1023	+
	1024	+dot at last box.s color red
	1025	+dot at last [].n color blue
	1026	+`},
	1027	+{name: "test32", code:`spline right then up then left then down ->
	1028	+move right 2cm
	1029	+spline right then up left then down ->
	1030	+move right 2cm
	1031	+dot; dot; dot;
	1032	+
	1033	+dot rad 150% color red at 1st vertex of 1st spline
	1034	+dot same color orange at 2nd vertex of 1st spline
	1035	+dot same color green at 3rd vertex of 1st spline
	1036	+dot same color blue at 4th vertex of 1st spline
	1037	+
	1038	+dot same color red at 1st vertex of 2nd spline
	1039	+dot same color green at 2nd vertex of 2nd spline
	1040	+dot same color blue at 3rd vertex of 2nd spline
	1041	+
	1042	+print 2nd vertex of 1st spline.x, 2nd vertex of 1st spline.y
	1043	+`},
	1044	+{name: "test33", code:`margin = 1cm
	1045	+"+" at 0,0
	1046	+arc -> from 0.5,0 to 0,0.5
	1047	+arc -> cw from 0,0 to 1,0.5
	1048	+`},
	1049	+{name: "test34", code:`line; arc; arc cw; arrow
	1050	+`},
	1051	+{name: "test35", code:`A: ellipse
	1052	+ ellipse ht .2 wid .3 with .se at 1st ellipse.nw
	1053	+ ellipse ht .2 wid .3 with .sw at 1st ellipse.ne
	1054	+ circle rad .05 at 0.5 between A.nw and A.c
	1055	+ circle rad .05 at 0.5 between A.ne and A.c
	1056	+ arc from 0.25 between A.w and A.e to 0.75 between A.w and A.e
	1057	+
	1058	+// dot color red at A.nw
	1059	+// dot color orange at A.c
	1060	+// dot color purple at A.ne
	1061	+`},
	1062	+{name: "test36", code:`h = .5; dh = .02; dw = .1
	1063	+[
	1064	+ Ptr: [
	1065	+ boxht = h; boxwid = dw
	1066	+ A: box
	1067	+ B: box
	1068	+ C: box
	1069	+ box wid 2*boxwid "..."
	1070	+ D: box
	1071	+ ]
	1072	+ Block: [
	1073	+ boxht = 2*dw;
	1074	+ boxwid = 2*dw
	1075	+ movewid = 2*dh
	1076	+ A: box; move
	1077	+ B: box; move
	1078	+ C: box; move
	1079	+ box invis "..." wid 2*boxwid; move
	1080	+ D: box
	1081	+ ] with .n at Ptr.s - (0,h/2)
	1082	+ arrow from Ptr.A to Block.A.nw + (dh,0)
	1083	+ arrow from Ptr.B to Block.B.nw + (dh,0)
	1084	+ arrow from Ptr.C to Block.C.nw + (dh,0)
	1085	+ arrow from Ptr.D to Block.D.nw + (dh,0)
	1086	+]
	1087	+box dashed ht last [].ht+dw wid last [].wid+dw at last []
	1088	+`},
	1089	+{name: "test37", code:`# Change from the original:
	1090	+# * Expand the macro by hand, as Pikchr does not support
	1091	+# macros
	1092	+# Need fixing:
	1093	+# * "bottom of last box"
	1094	+# * ".t"
	1095	+#
	1096	+#define ndblock {
	1097	+# box wid boxwid/2 ht boxht/2
	1098	+# down; box same with .t at bottom of last box; box same
	1099	+#}
	1100	+boxht = .2; boxwid = .3; circlerad = .3; dx = 0.05
	1101	+down; box; box; box; box ht 3*boxht "." "." "."
	1102	+L: box; box; box invis wid 2*boxwid "hashtab:" with .e at 1st box .w
	1103	+right
	1104	+Start: box wid .5 with .sw at 1st box.ne + (.4,.2) "..."
	1105	+N1: box wid .2 "n1"; D1: box wid .3 "d1"
	1106	+N3: box wid .4 "n3"; D3: box wid .3 "d3"
	1107	+box wid .4 "..."
	1108	+N2: box wid .5 "n2"; D2: box wid .2 "d2"
	1109	+arrow right from 2nd box
	1110	+#ndblock
	1111	+ box wid boxwid/2 ht boxht/2
	1112	+ down; box same with .t at bottom of last box; box same
	1113	+spline -> right .2 from 3rd last box then to N1.sw + (dx,0)
	1114	+spline -> right .3 from 2nd last box then to D1.sw + (dx,0)
	1115	+arrow right from last box
	1116	+#ndblock
	1117	+ box wid boxwid/2 ht boxht/2
	1118	+ down; box same with .t at bottom of last box; box same
	1119	+spline -> right .2 from 3rd last box to N2.sw-(dx,.2) to N2.sw+(dx,0)
	1120	+spline -> right .3 from 2nd last box to D2.sw-(dx,.2) to D2.sw+(dx,0)
	1121	+arrow right 2*linewid from L
	1122	+#ndblock
	1123	+ box wid boxwid/2 ht boxht/2
	1124	+ down; box same with .t at bottom of last box; box same
	1125	+spline -> right .2 from 3rd last box to N3.sw + (dx,0)
	1126	+spline -> right .3 from 2nd last box to D3.sw + (dx,0)
	1127	+circlerad = .3
	1128	+circle invis "ndblock" at last box.e + (1.2,.2)
	1129	+arrow dashed from last circle.w to last box chop 0 chop .3
	1130	+box invis wid 2*boxwid "ndtable:" with .e at Start.w
	1131	+`},
	1132	+{name: "test38b", code:`# Need fixing:
	1133	+#
	1134	+# * ".bot" as an abbreviation for ".bottom"
	1135	+# * "up from top of LA"
	1136	+#
	1137	+ arrow "source" "code"
	1138	+LA: box "lexical" "analyzer"
	1139	+ arrow "tokens" above
	1140	+P: box "parser"
	1141	+ arrow "intermediate" "code" wid 180%
	1142	+Sem: box "semantic" "checker"
	1143	+ arrow
	1144	+ arrow <-> up from top of LA
	1145	+LC: box "lexical" "corrector"
	1146	+ arrow <-> up from top of P
	1147	+Syn: box "syntactic" "corrector"
	1148	+ arrow up
	1149	+DMP: box "diagnostic" "message" "printer"
	1150	+ arrow <-> right from east of DMP
	1151	+ST: box "symbol" "table"
	1152	+ arrow from LC.ne to DMP.sw
	1153	+ arrow from Sem.nw to DMP.se
	1154	+ arrow <-> from Sem.top to ST.bot
	1155	+`},
	1156	+{name: "test38", code:`# Need fixing:
	1157	+#
	1158	+# * ".bot" as an abbreviation for ".bottom"
	1159	+# * "up from top of LA"
	1160	+#
	1161	+ arrow "source" "code"
	1162	+LA: box "lexical" "analyzer"
	1163	+ arrow "tokens" above
	1164	+P: box "parser"
	1165	+ arrow "intermediate" "code"
	1166	+Sem: box "semantic" "checker"
	1167	+ arrow
	1168	+ arrow <-> up from top of LA
	1169	+LC: box "lexical" "corrector"
	1170	+ arrow <-> up from top of P
	1171	+Syn: box "syntactic" "corrector"
	1172	+ arrow up
	1173	+DMP: box "diagnostic" "message" "printer"
	1174	+ arrow <-> right from east of DMP
	1175	+ST: box "symbol" "table"
	1176	+ arrow from LC.ne to DMP.sw
	1177	+ arrow from Sem.nw to DMP.se
	1178	+ arrow <-> from Sem.top to ST.bot
	1179	+`},
	1180	+{name: "test39b", code:`textwid = 1mm
	1181	+ circle "DISK"
	1182	+ arrow "character" "defns" right 150%
	1183	+CPU: box "CPU" "(16-bit mini)"
	1184	+ arrow <- from top of CPU up "input " rjust
	1185	+ arrow right from right of CPU
	1186	+CRT: " CRT" ljust
	1187	+ line from CRT - 0,0.075 up 0.15 \
	1188	+ then right 0.5 \
	1189	+ then right 0.5 up 0.25 \
	1190	+ then down 0.5+0.15 \
	1191	+ then left 0.5 up 0.25 \
	1192	+ then left 0.5
	1193	+Paper: CRT + 1.05,0.75
	1194	+ arrow <- from Paper down 1.5
	1195	+ " ... paper" ljust at end of last arrow + 0, 0.25
	1196	+ circle rad 0.05 at Paper + (-0.055, -0.25)
	1197	+ circle rad 0.05 at Paper + (0.055, -0.25)
	1198	+ box invis wid 120% " rollers" ljust at Paper + (0.1, -0.25)
	1199	+`},
	1200	+{name: "test39", code:` margin = 5mm
	1201	+ # ^^^^^^^^^^^^-- extra margin required for text
	1202	+ circle "DISK"
	1203	+ arrow "character" "defns" right 150%
	1204	+ # ^^^^^^^^^^---- added for spacing
	1205	+CPU: box "CPU" "(16-bit mini)"
	1206	+ /{/ arrow <- from top of CPU up "input " rjust /}/
	1207	+ # ^^^^^--- removed remove -----^^^^^
	1208	+ arrow right from CPU.e
	1209	+ # ^^^^^^^^^^^^^^^^--- added to compensate for missing {...} above
	1210	+CRT: " CRT" ljust wid 1px
	1211	+ # ^^^^^^^--- added to avoid excess spacing
	1212	+ line from CRT - 0,0.075 up 0.15 \
	1213	+ then right 0.5 \
	1214	+ then right 0.5 up 0.25 \
	1215	+ then down 0.5+0.15 \
	1216	+ then left 0.5 up 0.25 \
	1217	+ then left 0.5
	1218	+Paper: CRT + 1.05,0.75
	1219	+ arrow <- from Paper down 1.5
	1220	+ " ... paper" ljust at end of last arrow + 0, 0.25
	1221	+ circle rad 0.05 at Paper + (-0.055, -0.25)
	1222	+ circle rad 0.05 at Paper + (0.055, -0.25)
	1223	+ " rollers" ljust at Paper + (0.1, -0.25)
	1224	+`},
	1225	+{name: "test40", code:`$one = 1.0
	1226	+$one += 2.0
	1227	+$two = $one
	1228	+$two *= 3.0
	1229	+print $one, $two
	1230	+$three -= 11
	1231	+$three /= 2
	1232	+print $three
	1233	+`},
	1234	+{name: "test41", code:`# Corner test
	1235	+
	1236	+box "C"
	1237	+
	1238	+$d = 1in
	1239	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1240	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1241	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1242	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1243	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1244	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1245	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1246	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1247	+
	1248	+box "C" at 3*$d east of C radius 15px
	1249	+
	1250	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1251	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1252	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1253	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1254	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1255	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1256	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1257	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1258	+
	1259	+ellipse "C" at 2.5*$d south of 1st box
	1260	+
	1261	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1262	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1263	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1264	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1265	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1266	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1267	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1268	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1269	+
	1270	+circle "C" at 3*$d east of last ellipse
	1271	+
	1272	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1273	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1274	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1275	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1276	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1277	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1278	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1279	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1280	+
	1281	+cylinder "C" at 2.5*$d south of last ellipse
	1282	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1283	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1284	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1285	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1286	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1287	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1288	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1289	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1290	+
	1291	+oval "C" at 3*$d east of last cylinder
	1292	+circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
	1293	+circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
	1294	+circle same "E" at $d e of C; arrow from last circle to C.e chop
	1295	+circle same "SE" at $d se of C; arrow from last circle to C.se chop
	1296	+circle same "S" at $d s of C; arrow from last circle to C.s chop
	1297	+circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
	1298	+circle same "W" at $d w of C; arrow from last circle to C.w chop
	1299	+circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
	1300	+`},
	1301	+{name: "test42", code:`C: ellipse "ellipse"
	1302	+
	1303	+line from C to 2cm heading 00 from C chop;
	1304	+line from C to 2cm heading 10 from C chop;
	1305	+line from C to 2cm heading 20 from C chop;
	1306	+line from C to 2cm heading 30 from C chop;
	1307	+line from C to 2cm heading 40 from C chop;
	1308	+line from C to 2cm heading 50 from C chop;
	1309	+line from C to 2cm heading 60 from C chop;
	1310	+line from C to 2cm heading 70 from C chop;
	1311	+line from C to 2cm heading 80 from C chop;
	1312	+line from C to 2cm heading 90 from C chop;
	1313	+line from C to 2cm heading 100 from C chop;
	1314	+line from C to 2cm heading 110 from C chop;
	1315	+line from C to 2cm heading 120 from C chop;
	1316	+line from C to 2cm heading 130 from C chop;
	1317	+line from C to 2cm heading 140 from C chop;
	1318	+line from C to 2cm heading 150 from C chop;
	1319	+line from C to 2cm heading 160 from C chop;
	1320	+line from C to 2cm heading 170 from C chop;
	1321	+line from C to 2cm heading 180 from C chop;
	1322	+line from C to 2cm heading 190 from C chop;
	1323	+line from C to 2cm heading 200 from C chop;
	1324	+line from C to 2cm heading 210 from C chop;
	1325	+line from C to 2cm heading 220 from C chop;
	1326	+line from C to 2cm heading 230 from C chop;
	1327	+line from C to 2cm heading 240 from C chop;
	1328	+line from C to 2cm heading 250 from C chop;
	1329	+line from C to 2cm heading 260 from C chop;
	1330	+line from C to 2cm heading 270 from C chop;
	1331	+line from C to 2cm heading 280 from C chop;
	1332	+line from C to 2cm heading 290 from C chop;
	1333	+line from C to 2cm heading 300 from C chop;
	1334	+line from C to 2cm heading 310 from C chop;
	1335	+line from C to 2cm heading 320 from C chop;
	1336	+line from C to 2cm heading 330 from C chop;
	1337	+line from C to 2cm heading 340 from C chop;
	1338	+line from C to 2cm heading 350 from C chop;
	1339	+`},
	1340	+{name: "test43", code:`scale = 0.75
	1341	+box "One"
	1342	+arrow right 200% "Bold" bold above "Italic" italic below
	1343	+circle "Two"
	1344	+circle "Bold-Italic" bold italic aligned fit \
	1345	+ at 4cm heading 143 from Two
	1346	+arrow from Two to last circle "above" aligned above "below" aligned below chop
	1347	+circle "C2" fit at 4cm heading 50 from Two
	1348	+arrow from Two to last circle "above" aligned above "below "aligned below chop
	1349	+circle "C3" fit at 4cm heading 200 from Two
	1350	+arrow from last circle to Two <- \
	1351	+ "above-rjust" aligned rjust above \
	1352	+ "below-rjust" aligned rjust below chop
	1353	+`},
	1354	+{name: "test44", code:`debug=1
	1355	+file "*.md" rad 20%
	1356	+arrow
	1357	+box rad 10px "Markdown" "Interpreter"
	1358	+arrow right 120% "HTML" above
	1359	+file " HTML "
	1360	+`}
	1361	+
	1362	+ ];
	1363	+
180	1364	})(window.fossil);
181	1365

	--- src/fossil.page.pikchrshow.js
	+++ src/fossil.page.pikchrshow.js
	@@ -26,18 +26,18 @@
26	btnSubmit: E('#pikchr-submit-preview'),
27	cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
28	taContent: E('#content'),
29	taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
30	'readonly', true),
31	divControls: E('#pikchrshow-controls'),
32	btnTogglePreviewMode: D.button("Preview mode"),
33	selectMarkupAlignment: D.select()
34	};
35	D.append(P.e.divControls, P.e.btnTogglePreviewMode);
36
37	// Setup markup alignment selection...
38	D.append(P.e.divControls, P.e.selectMarkupAlignment);
39	D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
40	['left', 'center'].forEach(function(val,ndx){
41	D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
42	});
43
	@@ -66,16 +66,79 @@
66	if(P.previewMode==1 \|\| P.previewMode==2){
67	P.renderPreview();
68	}
69	}, false);
70































































71	if(P.e.taContent.value/was pre-filled server-side/){
72	/* Fill our "response" state so that renderPreview() can work */
73	P.response.inputText = P.e.taContent.value;
74	P.response.raw = P.e.previewTarget.innerHTML;
75	P.renderPreview()/*not strictly necessary, but gets all
76	labels/headers in alignment.*/;
77	}
78	}/F.onPageLoad()/);
79
80	/**
81	Updates the preview view based on the current preview mode and
	@@ -134,11 +197,12 @@
134	P.preview = function fp(){
135	if(!fp.hasOwnProperty('toDisable')){
136	fp.toDisable = [
137	/* input elements to disable during ajax operations */
138	this.e.btnSubmit, this.e.taContent,
139	this.e.selectMarkupAlignment

140	/* this.e.btnTogglePreviewMode is handled separately */
141	];
142	fp.target = this.e.previewTarget;
143	fp.updateView = function(c,isError){
144	P.previewMode = 0;
	@@ -175,6 +239,1126 @@
175	}
176	});
177	return this;
178	}/preview()/;
179
































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































180	})(window.fossil);
181

	--- src/fossil.page.pikchrshow.js
	+++ src/fossil.page.pikchrshow.js
	@@ -26,18 +26,18 @@
26	btnSubmit: E('#pikchr-submit-preview'),
27	cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
28	taContent: E('#content'),
29	taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
30	'readonly', true),
31	uiControls: E('#pikchrshow-controls'),
32	btnTogglePreviewMode: D.button("Preview mode"),
33	selectMarkupAlignment: D.select()
34	};
35	D.append(P.e.uiControls, P.e.btnTogglePreviewMode);
36
37	// Setup markup alignment selection...
38	D.append(P.e.uiControls, P.e.selectMarkupAlignment);
39	D.disable(D.option(P.e.selectMarkupAlignment, '', 'Markup Alignment'));
40	['left', 'center'].forEach(function(val,ndx){
41	D.option(P.e.selectMarkupAlignment, ndx ? val : '', val);
42	});
43
	@@ -66,16 +66,79 @@
66	if(P.previewMode==1 \|\| P.previewMode==2){
67	P.renderPreview();
68	}
69	}, false);
70
71	// Set up selection list of predefined scripts...
72	if(true){
73	const selectScript = P.e.selectScript = D.select(),
74	cbAutoPreview = P.e.cbAutoPreview =
75	D.attr(D.checkbox(),'id', 'cb-auto-preview','checked',true),
76	cbWrap = D.addClass(D.div(),'input-with-label')
77	;
78	D.append(
79	cbWrap,
80	selectScript,
81	cbAutoPreview,
82	D.label(cbAutoPreview,"Auto-preview?")
83	).childNodes.forEach(function(ch){
84	ch.style.margin = "0 0.25em";
85	});
86	D.append(P.e.uiControls, cbWrap);
87	P.predefinedPiks.forEach(function(script,ndx){
88	const opt = D.option(script.code ? script.code.trim() :'', script.name);
89	D.append(selectScript, opt);
90	if(!ndx) selectScript.selectedIndex = 0 /timing/ordering workaround/;
91	if(!script.code) D.disable(opt);
92	});
93	delete P.predefinedPiks;
94	selectScript.addEventListener('change', function(ev){
95	const val = ev.target.value;
96	if(!val) return;
97	P.e.taContent.value = val;
98	if(cbAutoPreview.checked) P.preview();
99	}, false);
100	}
101
102	// Move dark mode checkbox to the end
103	D.append(P.e.uiControls, P.e.cbDarkMode.parentNode);
104
105	// File drag/drop pikchr scripts into P.e.taContent.
106	// Adapted from: https://stackoverflow.com/a/58677161
107	const dropfile = function(file){
108	const reader = new FileReader();
109	reader.onload = function(e) {P.e.taContent.value = e.target.result};
110	reader.readAsText(file, "UTF-8");
111	};
112	const dropTarget = P.e.taContent /* document.body does not behave how i'd like */;
113	dropTarget.addEventListener('drop', function(ev){
114	D.removeClass(dropTarget, 'dragover');
115	ev.preventDefault();
116	const file = ev.dataTransfer.files[0];
117	if(file) dropfile(file);
118	}, false);
119	dropTarget.addEventListener('dragenter', function(ev){
120	//ev.stopPropagation();
121	//ev.preventDefault();
122	console.debug("dragenter");
123	D.addClass(dropTarget, 'dragover');
124	}, false);
125	dropTarget.addEventListener('dragleave', function(ev){
126	//ev.stopPropagation();
127	//ev.preventDefault();
128	console.debug("dragleave");
129	D.removeClass(dropTarget, 'dragover');
130	}, false);
131
132	// If we start with content, get it in sync with the state generated
133	// by P.preview().
134	if(P.e.taContent.value/was pre-filled server-side/){
135	/* Fill our "response" state so that renderPreview() can work */
136	P.response.inputText = P.e.taContent.value;
137	P.response.raw = P.e.previewTarget.innerHTML;
138	P.renderPreview()/*it's already rendered, but this gets all
139	labels/headers in sync.*/;
140	}
141	}/F.onPageLoad()/);
142
143	/**
144	Updates the preview view based on the current preview mode and
	@@ -134,11 +197,12 @@
197	P.preview = function fp(){
198	if(!fp.hasOwnProperty('toDisable')){
199	fp.toDisable = [
200	/* input elements to disable during ajax operations */
201	this.e.btnSubmit, this.e.taContent,
202	this.e.selectMarkupAlignment,
203	this.e.cbAutoPreview, this.e.selectScript,
204	/* this.e.btnTogglePreviewMode is handled separately */
205	];
206	fp.target = this.e.previewTarget;
207	fp.updateView = function(c,isError){
208	P.previewMode = 0;
	@@ -175,6 +239,1126 @@
239	}
240	});
241	return this;
242	}/preview()/;
243
244	/**
245	Predefined scripts. Each entry is an object:
246
247	{
248	name: required string,
249
250	code: optional code string. An entry with no code
251	is treated like a separator in the resulting
252	SELECT element (a disabled OPTION).
253
254	}
255	*/
256	P.predefinedPiks = [
257	{name: "--Predefined Scripts--"},
258	{name: "Tip: drag/drop pikchr files into the textarea"},
259	/*
260	The following were imported from the pikchr test scripts:
261
262	https://fossil-scm.org/pikchr/dir/tests
263	*/
264	{name: "autochop01", code:`C: box "box"
265
266	line from C to 3cm heading 00 from C chop;
267	line from C to 3cm heading 10 from C chop;
268	line from C to 3cm heading 20 from C chop;
269	line from C to 3cm heading 30 from C chop;
270	line from C to 3cm heading 40 from C chop;
271	line from C to 3cm heading 50 from C chop;
272	line from C to 3cm heading 60 from C chop;
273	line from C to 3cm heading 70 from C chop;
274	line from C to 3cm heading 80 from C chop;
275	line from C to 3cm heading 90 from C chop;
276	line from C to 3cm heading 100 from C chop;
277	line from C to 3cm heading 110 from C chop;
278	line from C to 3cm heading 120 from C chop;
279	line from C to 3cm heading 130 from C chop;
280	line from C to 3cm heading 140 from C chop;
281	line from C to 3cm heading 150 from C chop;
282	line from C to 3cm heading 160 from C chop;
283	line from C to 3cm heading 170 from C chop;
284	line from C to 3cm heading 180 from C chop;
285	line from C to 3cm heading 190 from C chop;
286	line from C to 3cm heading 200 from C chop;
287	line from C to 3cm heading 210 from C chop;
288	line from C to 3cm heading 220 from C chop;
289	line from C to 3cm heading 230 from C chop;
290	line from C to 3cm heading 240 from C chop;
291	line from C to 3cm heading 250 from C chop;
292	line from C to 3cm heading 260 from C chop;
293	line from C to 3cm heading 270 from C chop;
294	line from C to 3cm heading 280 from C chop;
295	line from C to 3cm heading 290 from C chop;
296	line from C to 3cm heading 300 from C chop;
297	line from C to 3cm heading 310 from C chop;
298	line from C to 3cm heading 320 from C chop;
299	line from C to 3cm heading 330 from C chop;
300	line from C to 3cm heading 340 from C chop;
301	line from C to 3cm heading 350 from C chop;
302	`},
303	{name: "autochop02", code:`C: box "box" radius 10px
304
305	line from C to 3cm heading 00 from C chop;
306	line from C to 3cm heading 10 from C chop;
307	line from C to 3cm heading 20 from C chop;
308	line from C to 3cm heading 30 from C chop;
309	line from C to 3cm heading 40 from C chop;
310	line from C to 3cm heading 50 from C chop;
311	line from C to 3cm heading 60 from C chop;
312	line from C to 3cm heading 70 from C chop;
313	line from C to 3cm heading 80 from C chop;
314	line from C to 3cm heading 90 from C chop;
315	line from C to 3cm heading 100 from C chop;
316	line from C to 3cm heading 110 from C chop;
317	line from C to 3cm heading 120 from C chop;
318	line from C to 3cm heading 130 from C chop;
319	line from C to 3cm heading 140 from C chop;
320	line from C to 3cm heading 150 from C chop;
321	line from C to 3cm heading 160 from C chop;
322	line from C to 3cm heading 170 from C chop;
323	line from C to 3cm heading 180 from C chop;
324	line from C to 3cm heading 190 from C chop;
325	line from C to 3cm heading 200 from C chop;
326	line from C to 3cm heading 210 from C chop;
327	line from C to 3cm heading 220 from C chop;
328	line from C to 3cm heading 230 from C chop;
329	line from C to 3cm heading 240 from C chop;
330	line from C to 3cm heading 250 from C chop;
331	line from C to 3cm heading 260 from C chop;
332	line from C to 3cm heading 270 from C chop;
333	line from C to 3cm heading 280 from C chop;
334	line from C to 3cm heading 290 from C chop;
335	line from C to 3cm heading 300 from C chop;
336	line from C to 3cm heading 310 from C chop;
337	line from C to 3cm heading 320 from C chop;
338	line from C to 3cm heading 330 from C chop;
339	line from C to 3cm heading 340 from C chop;
340	line from C to 3cm heading 350 from C chop;
341	`},
342	{name: "autochop03", code:`C: circle "circle"
343
344	line from C to 3cm heading 00 from C chop;
345	line from C to 3cm heading 10 from C chop;
346	line from C to 3cm heading 20 from C chop;
347	line from C to 3cm heading 30 from C chop;
348	line from C to 3cm heading 40 from C chop;
349	line from C to 3cm heading 50 from C chop;
350	line from C to 3cm heading 60 from C chop;
351	line from C to 3cm heading 70 from C chop;
352	line from C to 3cm heading 80 from C chop;
353	line from C to 3cm heading 90 from C chop;
354	line from C to 3cm heading 100 from C chop;
355	line from C to 3cm heading 110 from C chop;
356	line from C to 3cm heading 120 from C chop;
357	line from C to 3cm heading 130 from C chop;
358	line from C to 3cm heading 140 from C chop;
359	line from C to 3cm heading 150 from C chop;
360	line from C to 3cm heading 160 from C chop;
361	line from C to 3cm heading 170 from C chop;
362	line from C to 3cm heading 180 from C chop;
363	line from C to 3cm heading 190 from C chop;
364	line from C to 3cm heading 200 from C chop;
365	line from C to 3cm heading 210 from C chop;
366	line from C to 3cm heading 220 from C chop;
367	line from C to 3cm heading 230 from C chop;
368	line from C to 3cm heading 240 from C chop;
369	line from C to 3cm heading 250 from C chop;
370	line from C to 3cm heading 260 from C chop;
371	line from C to 3cm heading 270 from C chop;
372	line from C to 3cm heading 280 from C chop;
373	line from C to 3cm heading 290 from C chop;
374	line from C to 3cm heading 300 from C chop;
375	line from C to 3cm heading 310 from C chop;
376	line from C to 3cm heading 320 from C chop;
377	line from C to 3cm heading 330 from C chop;
378	line from C to 3cm heading 340 from C chop;
379	line from C to 3cm heading 350 from C chop;
380	`},
381	{name: "autochop04", code:`C: ellipse "ellipse"
382
383	line from C to 3cm heading 00 from C chop;
384	line from C to 3cm heading 10 from C chop;
385	line from C to 3cm heading 20 from C chop;
386	line from C to 3cm heading 30 from C chop;
387	line from C to 3cm heading 40 from C chop;
388	line from C to 3cm heading 50 from C chop;
389	line from C to 3cm heading 60 from C chop;
390	line from C to 3cm heading 70 from C chop;
391	line from C to 3cm heading 80 from C chop;
392	line from C to 3cm heading 90 from C chop;
393	line from C to 3cm heading 100 from C chop;
394	line from C to 3cm heading 110 from C chop;
395	line from C to 3cm heading 120 from C chop;
396	line from C to 3cm heading 130 from C chop;
397	line from C to 3cm heading 140 from C chop;
398	line from C to 3cm heading 150 from C chop;
399	line from C to 3cm heading 160 from C chop;
400	line from C to 3cm heading 170 from C chop;
401	line from C to 3cm heading 180 from C chop;
402	line from C to 3cm heading 190 from C chop;
403	line from C to 3cm heading 200 from C chop;
404	line from C to 3cm heading 210 from C chop;
405	line from C to 3cm heading 220 from C chop;
406	line from C to 3cm heading 230 from C chop;
407	line from C to 3cm heading 240 from C chop;
408	line from C to 3cm heading 250 from C chop;
409	line from C to 3cm heading 260 from C chop;
410	line from C to 3cm heading 270 from C chop;
411	line from C to 3cm heading 280 from C chop;
412	line from C to 3cm heading 290 from C chop;
413	line from C to 3cm heading 300 from C chop;
414	line from C to 3cm heading 310 from C chop;
415	line from C to 3cm heading 320 from C chop;
416	line from C to 3cm heading 330 from C chop;
417	line from C to 3cm heading 340 from C chop;
418	line from C to 3cm heading 350 from C chop;
419	`},
420	{name: "autochop05", code:`C: oval "oval"
421
422	line from C to 3cm heading 00 from C chop;
423	line from C to 3cm heading 10 from C chop;
424	line from C to 3cm heading 20 from C chop;
425	line from C to 3cm heading 30 from C chop;
426	line from C to 3cm heading 40 from C chop;
427	line from C to 3cm heading 50 from C chop;
428	line from C to 3cm heading 60 from C chop;
429	line from C to 3cm heading 70 from C chop;
430	line from C to 3cm heading 80 from C chop;
431	line from C to 3cm heading 90 from C chop;
432	line from C to 3cm heading 100 from C chop;
433	line from C to 3cm heading 110 from C chop;
434	line from C to 3cm heading 120 from C chop;
435	line from C to 3cm heading 130 from C chop;
436	line from C to 3cm heading 140 from C chop;
437	line from C to 3cm heading 150 from C chop;
438	line from C to 3cm heading 160 from C chop;
439	line from C to 3cm heading 170 from C chop;
440	line from C to 3cm heading 180 from C chop;
441	line from C to 3cm heading 190 from C chop;
442	line from C to 3cm heading 200 from C chop;
443	line from C to 3cm heading 210 from C chop;
444	line from C to 3cm heading 220 from C chop;
445	line from C to 3cm heading 230 from C chop;
446	line from C to 3cm heading 240 from C chop;
447	line from C to 3cm heading 250 from C chop;
448	line from C to 3cm heading 260 from C chop;
449	line from C to 3cm heading 270 from C chop;
450	line from C to 3cm heading 280 from C chop;
451	line from C to 3cm heading 290 from C chop;
452	line from C to 3cm heading 300 from C chop;
453	line from C to 3cm heading 310 from C chop;
454	line from C to 3cm heading 320 from C chop;
455	line from C to 3cm heading 330 from C chop;
456	line from C to 3cm heading 340 from C chop;
457	line from C to 3cm heading 350 from C chop;
458	`},
459	{name: "autochop06", code:`C: cylinder "cylinder"
460
461	line from C to 3cm heading 00 from C chop;
462	line from C to 3cm heading 10 from C chop;
463	line from C to 3cm heading 20 from C chop;
464	line from C to 3cm heading 30 from C chop;
465	line from C to 3cm heading 40 from C chop;
466	line from C to 3cm heading 50 from C chop;
467	line from C to 3cm heading 60 from C chop;
468	line from C to 3cm heading 70 from C chop;
469	line from C to 3cm heading 80 from C chop;
470	line from C to 3cm heading 90 from C chop;
471	line from C to 3cm heading 100 from C chop;
472	line from C to 3cm heading 110 from C chop;
473	line from C to 3cm heading 120 from C chop;
474	line from C to 3cm heading 130 from C chop;
475	line from C to 3cm heading 140 from C chop;
476	line from C to 3cm heading 150 from C chop;
477	line from C to 3cm heading 160 from C chop;
478	line from C to 3cm heading 170 from C chop;
479	line from C to 3cm heading 180 from C chop;
480	line from C to 3cm heading 190 from C chop;
481	line from C to 3cm heading 200 from C chop;
482	line from C to 3cm heading 210 from C chop;
483	line from C to 3cm heading 220 from C chop;
484	line from C to 3cm heading 230 from C chop;
485	line from C to 3cm heading 240 from C chop;
486	line from C to 3cm heading 250 from C chop;
487	line from C to 3cm heading 260 from C chop;
488	line from C to 3cm heading 270 from C chop;
489	line from C to 3cm heading 280 from C chop;
490	line from C to 3cm heading 290 from C chop;
491	line from C to 3cm heading 300 from C chop;
492	line from C to 3cm heading 310 from C chop;
493	line from C to 3cm heading 320 from C chop;
494	line from C to 3cm heading 330 from C chop;
495	line from C to 3cm heading 340 from C chop;
496	line from C to 3cm heading 350 from C chop;
497	`},
498	{name: "autochop07", code:`C: file "file"
499
500	line from C to 3cm heading 00 from C chop;
501	line from C to 3cm heading 10 from C chop;
502	line from C to 3cm heading 20 from C chop;
503	line from C to 3cm heading 30 from C chop;
504	line from C to 3cm heading 40 from C chop;
505	line from C to 3cm heading 50 from C chop;
506	line from C to 3cm heading 60 from C chop;
507	line from C to 3cm heading 70 from C chop;
508	line from C to 3cm heading 80 from C chop;
509	line from C to 3cm heading 90 from C chop;
510	line from C to 3cm heading 100 from C chop;
511	line from C to 3cm heading 110 from C chop;
512	line from C to 3cm heading 120 from C chop;
513	line from C to 3cm heading 130 from C chop;
514	line from C to 3cm heading 140 from C chop;
515	line from C to 3cm heading 150 from C chop;
516	line from C to 3cm heading 160 from C chop;
517	line from C to 3cm heading 170 from C chop;
518	line from C to 3cm heading 180 from C chop;
519	line from C to 3cm heading 190 from C chop;
520	line from C to 3cm heading 200 from C chop;
521	line from C to 3cm heading 210 from C chop;
522	line from C to 3cm heading 220 from C chop;
523	line from C to 3cm heading 230 from C chop;
524	line from C to 3cm heading 240 from C chop;
525	line from C to 3cm heading 250 from C chop;
526	line from C to 3cm heading 260 from C chop;
527	line from C to 3cm heading 270 from C chop;
528	line from C to 3cm heading 280 from C chop;
529	line from C to 3cm heading 290 from C chop;
530	line from C to 3cm heading 300 from C chop;
531	line from C to 3cm heading 310 from C chop;
532	line from C to 3cm heading 320 from C chop;
533	line from C to 3cm heading 330 from C chop;
534	line from C to 3cm heading 340 from C chop;
535	line from C to 3cm heading 350 from C chop;
536	`},
537	{name: "swimlane", code:` $laneh = 0.75
538
539	# Draw the lanes
540	down
541	box width 3.5in height $laneh fill 0xacc9e3
542	box same fill 0xc5d8ef
543	box same as first box
544	box same as 2nd box
545	line from 1st box.sw+(0.2,0) up until even with 1st box.n \
546	"Alan" above aligned
547	line from 2nd box.sw+(0.2,0) up until even with 2nd box.n \
548	"Betty" above aligned
549	line from 3rd box.sw+(0.2,0) up until even with 3rd box.n \
550	"Charlie" above aligned
551	line from 4th box.sw+(0.2,0) up until even with 4th box.n \
552	"Darlene" above aligned
553
554	# fill in content for the Alice lane
555	right
556	A1: circle rad 0.1in at end of first line + (0.2,-0.2) \
557	fill white thickness 1.5px "1"
558	arrow right 50%
559	circle same "2"
560	arrow right until even with first box.e - (0.65,0.0)
561	ellipse "future" fit fill white height 0.2 width 0.5 thickness 1.5px
562	A3: circle same at A1+(0.8,-0.3) "3" fill 0xc0c0c0
563	arrow from A1 to last circle chop "fork!" below aligned
564
565	# content for the Betty lane
566	B1: circle same as A1 at A1-(0,$laneh) "1"
567	arrow right 50%
568	circle same "2"
569	arrow right until even with first ellipse.w
570	ellipse same "future"
571	B3: circle same at A3-(0,$laneh) "3"
572	arrow right 50%
573	circle same as A3 "4"
574	arrow from B1 to 2nd last circle chop
575
576	# content for the Charlie lane
577	C1: circle same as A1 at B1-(0,$laneh) "1"
578	arrow 50%
579	circle same "2"
580	arrow right 0.8in "goes" "offline"
581	C5: circle same as A3 "5"
582	arrow right until even with first ellipse.w
583	ellipse same "future"
584	text "back online" "pushes 5" "pulls 3 & 4" with .n at last arrow
585
586	# content for the Darlene lane
587	D1: circle same as A1 at C1-(0,$laneh) "1"
588	arrow 50%
589	circle same "2"
590	arrow right until even with C5.w
591	circle same "5"
592	arrow 50%
593	circle same as A3 "6"
594	arrow right until even with first ellipse.w
595	ellipse same "future"
596	D3: circle same as B3 at B3-(0,2*$laneh) "3"
597	arrow 50%
598	circle same "4"
599	arrow from D1 to D3 chop
600	`},
601	{name: "test01", code:`circle "C0"; arrow; circle "C1"; arrow; circle "C2"; arrow;
602	circle "C4"; arrow; circle "C6"
603	circle "C3" at (C4.x-C2.x) ne of C2; arrow; circle "C5"
604	arrow from C2.ne to C3.sw
605	`},
606	{name: "test02", code:`/* First generate the main graph */
607	scale = 0.75
608	Main: [
609	circle "C0"
610	arrow
611	circle "C1"
612	arrow
613	circle "C2"
614	arrow
615	circle "C4"
616	arrow
617	circle "C6"
618	]
619	Branch: [
620	circle "C3"
621	arrow
622	circle "C5"
623	] with .sw at Main.C2.n + (0.35,0.35)
624	arrow from Main.C2 to Branch.C3 chop
625
626	/* Now generate the background colors */
627	layer = 0
628	$featurecolor = 0xfedbce
629	$maincolor = 0xd9fece
630	$divY = (Branch.y + Main.y)/2
631	$divH = (Branch.y - Main.y)
632	box fill $featurecolor color $featurecolor \
633	width Branch.width*1.5 height $divH \
634	at Branch
635	box fill $maincolor color $maincolor \
636	width Main.width+0.1 height $divH \
637	at Main
638	"main" ljust at 0.1 se of nw of 2nd box
639	"feature" ljust at 0.1 se of nw of 1st box
640	`},
641	{name: "test03", code:`right
642	B1: box "One"; line
643	B2: box "Two"; arrow
644	B3: box "Three"; down; arrow down 50%; circle "Hi!"; left;
645	spline -> left 2cm then to One.se
646	Macro: [
647	B4: box "four"
648	B5: box "five"
649	B6: box "six"
650	] with n at 3cm below s of 2nd box
651
652	arrow from s of 2nd box to Macro.B5.n
653
654	spline -> from e of last circle right 1cm then down 1cm then to Macro.B4.e
655
656	box width Macro.width+0.1 height Macro.height+0.1 at Macro color Red
657	box width Macro.B5.width+0.05 \
658	height Macro.B5.height+0.05 at Macro.B5 color blue
659	`},
660	{name: "test04", code:`print 5+8;
661	print (17.4-5)/(2-2);
662	`},
663	{name: "test05", code:`print linewid
664	linewid=0.8
665	print linewid
666	scale=2.0
667	print scale
668	print hotpink
669	print 17 + linewid*1000;
670	print sin(scale);
671	print cos(scale)
672	print sqrt(17)
673	print min(5,10)
674	print max(5,10)
675	print sqrt(-11)
676	`},
677	{name: "test06", code:`B1: box "one" width 1 height 1 at 2,2;
678	B2: box thickness 300% dotted 0.03 "two" at 1,3;
679	print "B2.n: ",B2.n.x,",",B2.n.y
680	print "B2.c: ",B2.c.x,",",B2.c.y
681	print "B2.e: ",B2.e.x,",",B2.e.y
682	scale = 1
683	box "three" "four" ljust "five" with .n at 0.1 below B2.s width 50%
684
685	# Text demo: <text x="100" y="100" text-anchor="end" dominant-baseline="central">I love SVG!</text>
686	`},
687	{name: "test07", code:`B: box "This is" "<b>" "box \"B\"" color DarkRed
688
689	"B.nw" rjust above at 0.05 left of B.nw
690	"B.w" rjust at 0.05 left of B.w
691	"B.sw" rjust below at 0.05 left of B.sw; $abc = DarkBlue
692	"B.s" below at B.s
693	// C++ style comments allowed.
694	"B.se" ljust below at 0.05 right of B.se color DarkBlue
695	"B.e" ljust at 0.05 right of B.e /* C-style comments */
696	"B.ne" ljust above at 0.05 right of B.ne
697	"B.n" center above at B.n
698	print "this is a test: " /comment ignored/, $abc
699	print "Colors:", Orange, Black, White, Red, Green, Blue
700
701	# line from B.ne + (0.05,0) right 1.0 then down 2.5 then left 1.5
702	`},
703	{name: "test08", code:` debug = 1;
704
705	box "one" width 80% height 80%
706	box "two" width 150% color DarkRed
707	arrow "xyz" above
708	box "three" height 150% color DarkBlue
709	down
710	arrow
711	B4: box "four"
712	B45: box "4.5" fill SkyBlue
713	move
714	B5: box "five"
715	left
716	B6: box "six"
717	up
718	box "seven" width 50% height 50%
719
720	line from 0.1 right of B4.e right 1 then down until even with B5 \
721	then to B5 rad 0.1 chop
722
723	arrow from B6 left even with 2nd box then up to 2nd box chop rad 0.1
724	arrow from 1/2 way between B6.w and B6.sw left until even with first box \
725	then up to first box rad 0.1 chop
726
727	oval wid 25% ht B4.n.y - B45.s.y at (B6.x,B4.s.y)
728	arrow from last box to last oval chop
729	arrow <- from B4.w left until even with last oval.e
730	arrow <- from B45 left until even with last oval.e chop
731	`},
732	{name: "test09", code:`HEAD: circle
733	circle radius 50% with .se at HEAD.nw
734	circle radius 50% with .sw at HEAD.ne
735	`},
736	{name: "test10", code:`C: "+"; $x = 0
737	line from 0.5 heading $x from C to 1.0 heading $x from C
738	$x = $x + 10
739	line from 0.5 heading $x from C to 1.0 heading $x from C
740	$x = $x + 10
741	line from 0.5 heading $x from C to 1.0 heading $x from C
742	$x = $x + 10
743	line from 0.5 heading $x from C to 1.0 heading $x from C
744	$x = $x + 10
745	line from 0.5 heading $x from C to 1.0 heading $x from C
746	$x = $x + 10
747	line from 0.5 heading $x from C to 1.0 heading $x from C
748	$x = $x + 10
749	line from 0.5 heading $x from C to 1.0 heading $x from C
750	$x = $x + 10
751	line from 0.5 heading $x from C to 1.0 heading $x from C
752	$x = $x + 10
753	line from 0.5 heading $x from C to 1.0 heading $x from C
754	$x = $x + 10
755	line from 0.5 heading $x from C to 1.0 heading $x from C
756	$x = $x + 10
757	line from 0.5 heading $x from C to 1.0 heading $x from C
758	$x = $x + 10
759	line from 0.5 heading $x from C to 1.0 heading $x from C
760	$x = $x + 10
761	line from 0.5 heading $x from C to 1.0 heading $x from C
762	$x = $x + 10
763	line from 0.5 heading $x from C to 1.0 heading $x from C
764	$x = $x + 10
765	line from 0.5 heading $x from C to 1.0 heading $x from C
766	$x = $x + 10
767	line from 0.5 heading $x from C to 1.0 heading $x from C
768	$x = $x + 10
769	line from 0.5 heading $x from C to 1.0 heading $x from C
770	$x = $x + 10
771	line from 0.5 heading $x from C to 1.0 heading $x from C
772	$x = $x + 10
773	line from 0.5 heading $x from C to 1.0 heading $x from C
774	$x = $x + 10
775	line from 0.5 heading $x from C to 1.0 heading $x from C
776	$x = $x + 10
777	line from 0.5 heading $x from C to 1.0 heading $x from C
778	$x = $x + 10
779	line from 0.5 heading $x from C to 1.0 heading $x from C
780	$x = $x + 10
781	line from 0.5 heading $x from C to 1.0 heading $x from C
782	$x = $x + 10
783	line from 0.5 heading $x from C to 1.0 heading $x from C
784	$x = $x + 10
785	line from 0.5 heading $x from C to 1.0 heading $x from C
786	$x = $x + 10
787	line from 0.5 heading $x from C to 1.0 heading $x from C
788	$x = $x + 10
789	line from 0.5 heading $x from C to 1.0 heading $x from C
790	$x = $x + 10
791	line from 0.5 heading $x from C to 1.0 heading $x from C
792	$x = $x + 10
793	line from 0.5 heading $x from C to 1.0 heading $x from C
794	`},
795	{name: "test11", code:` linerad = 5px
796	C: circle "Center" rad 150%
797	circle "N" at 1.0 n of C; arrow from C to last chop ->
798	circle "NE" at 1.0 ne of C; arrow from C to last chop <-
799	circle "E" at 1.0 e of C; arrow from C to last chop <->
800	circle "SE" at 1.0 se of C; arrow from C to last chop ->
801	circle "S" at 1.0 s of C; arrow from C to last chop <-
802	circle "SW" at 1.0 sw of C; arrow from C to last chop <->
803	circle "W" at 1.0 w of C; arrow from C to last chop ->
804	circle "NW" at 1.0 nw of C; arrow from C to last chop <-
805	arrow from 2nd circle to 3rd circle chop
806	arrow from 4th circle to 3rd circle chop
807	arrow from SW to S chop <->
808	circle "ESE" at 2.0 heading 112.5 from Center \
809	thickness 150% fill lightblue radius 75%
810	arrow from Center to ESE thickness 150% <-> chop
811	arrow from ESE up 1.35 then to NE chop
812	line dashed <- from E.e to (ESE.x,E.y)
813	line dotted <-> thickness 50% from N to NW chop
814	`},
815	{name: "test12", code:`circle "One"
816	arrow
817	circle "Two"; down
818	arrow down 40%
819	circle "Three"
820	move
821	circle "Four"
822	`},
823	{name: "test13", code:`// margin = 1
824	line up 1 right 2
825	linewid = 0
826	arrow left 2
827	move left 0.1
828	line <-> down 1
829	"height " rjust at last line
830	`},
831	{name: "test14", code:`print "1in=",1in
832	print "1cm=",1cm
833	print "1mm=",1mm
834	print "1pt=",1pt
835	print "1px=",1px
836	print "1pc=",1pc
837	scale = 0.25
838	circle "in" radius 1in
839	circle "cm" radius 2.54cm
840	circle "mm" radius 25.4mm
841	circle "pt" radius 72pt
842	circle "px" radius 96px
843	circle "pc" radius 6pc
844
845	circle "in" radius 0.5*1in with .n at s of 1st circle
846	circle "cm" radius 0.5*2.54cm
847	circle "mm" radius 25.4mm * 0.5
848	circle "pt" radius 72pt * 0.5
849	circle "px" radius 96px * 0.5
850	circle "pc" radius 6pc * 0.5
851	`},
852	{name: "test15", code:`ellipse "document"
853	arrow
854	box "PIC"
855	arrow
856	box "TBL/EQN" "(optional)" dashed
857	arrow
858	box "TROFF"
859	arrow
860	ellipse "typesetter"
861	`},
862	{name: "test16", code:`box "this is" "a box"
863	`},
864	{name: "test17", code:`line "this is" "a line"
865	`},
866	{name: "test18", code:`box width 3 height 0.1; circle radius 0.1
867	`},
868	{name: "test19", code:`line up right; line down; line down left; line up
869	`},
870	{name: "test20", code:`box dotted; line dotted; move; line dashed; box dashed
871	`},
872	{name: "test21", code:`line right 5 dashed; move left 5 down .25; right
873	line right 5 dashed 0.25; move left 5 down .25; right
874	line right 5 dashed 0.5; move left 5 down .25; right
875	line right 5 dashed 1;
876	`},
877	{name: "test22", code:`box invisible "input"; arrow; box invisible "output"
878	`},
879	{name: "test23b", code:`margin = 24pt;
880	linewid *= 1.75
881	charht = 0.14
882	//thickness *= 8
883	print charht, thickness
884	arrow "on top of"; move
885	arrow "above" "below"; move
886	arrow "above" above; move
887	arrow "below" below; move
888	arrow "above" "on top of" "below"
889
890	move to start of first arrow down 1in;
891	right
892	arrow "way a\|\|bove" "ab\|\|ove" "on t\|\|he line" "below" "way below"
893	move; arrow "way above" "above" "below" "way below"
894	move; arrow "way above" above "above" above
895	move; arrow "below" below "way below" below
896	move; arrow "above-1" above "above-2" above "floating"
897
898	move to start of first arrow down 2in;
899	right
900	arrow "above-1" above "above-2" above "below" below
901	move; arrow "below-1" below "below-2" below "floating"
902	move; arrow "below-1" below "below-2" below "above" above
903
904	move to start of first arrow down 3in;
905	right
906	box "first line" "second line" "third line" "fourth line" "fifth line" fit
907	move
908	box "first line" "second line" "third line" "fourth line" fit
909	move
910	box "first line" "second line" "third line" fit
911	move
912	box "first line" "second line" fit
913	move
914	box "first line" fit
915
916	move to start of first arrow down 4in;
917	right
918	box "first above" above "second above" above "third" fit
919	dot color red at last box
920	`},
921	{name: "test23c", code:`linewid *= 2
922	arrow "Big" big "Small" small thin
923	box invis "thin" "line" fit
924	move
925	arrow "Big Big" big big "Small Small" small small thick
926	box invis "thick" "line" fit
927	box thick "Thick" with .nw at .5 below start of 1st arrow
928	move
929	box thick thick "Thick" "Thick"
930	move
931	box thin "Thin"
932	move
933	box thin thin "Thin" "Thin"
934	`},
935	{name: "test23", code:`margin = 24pt;
936	linewid *= 1.75
937	arrow "on top of"; move
938	arrow "above" "below"; move
939	arrow "above" above; move
940	arrow "below" below; move
941	arrow "above" "on top of" "below"
942
943	move to start of first arrow down 1in;
944	right
945	arrow "way above" "above" "on the line" "below" "way below"
946	move; arrow "way above" "above" "below" "way below"
947
948	move to start of first arrow down 2in;
949	right
950	box "first line" "second line" "third line" "fourth line" "fifth line" fit
951	move
952	box "first line" "second line" "third line" "fourth line" fit
953	move
954	box "first line" "second line" "third line" fit
955	move
956	box "first line" "second line" fit
957	move
958	box "first line" fit
959
960	move to start of first arrow down 3in;
961	right
962	box "first above" above "second above" above "third" fit
963	dot color red at last box
964	`},
965	{name: "test24", code:`arrow left; box; arrow; circle; arrow
966	`},
967	{name: "test25", code:`arrow; circle; down; arrow
968	`},
969	{name: "test26", code:`line from 0,0 right 1 then up 1 then right 1 then down 1.5 \
970	then left 0.6 dashed;
971	spline from 0,0 right 1 then up 1 then right 1 then down 1.5 \
972	then left 0.6
973	`},
974	{name: "test27", code:`line dotted right 1 then down 0.5 left 1 then right 1
975	spline from start of first line color red \
976	right 1 then down 0.5 left 1 then right 1 <->
977	spline from start of first line color blue radius 0.2 \
978	right 1 then down 0.5 left 1 then right 1 <->
979
980	move down 1 from start of first line
981	line radius 0.3 \
982	right 1 then down 0.5 left 1 then right 1 <->
983	`},
984	{name: "test28", code:`box "Box"
985	arrow
986	cylinder "One"
987	down
988	arrow
989	ellipse "Ellipse"
990	up
991	arrow from One.n
992	circle "Circle"
993	right
994	arrow from One.e <-
995	circle "E" radius 50%
996	circle "NE" radius 50% at 0.5 ne of One.ne
997	arrow from NE.sw to One.ne
998	circle "SE" radius 50% at 0.5 se of One.se
999	arrow from SE.nw to One.se
1000
1001	spline from One.sw left 0.2 down 0.2 then to Box.se ->
1002	spline from Circle.w left 0.3 then left 0.2 down 0.2 then to One.nw ->
1003	`},
1004	{name: "test29", code:`# Demonstrate the ability to close and fill a line with the "fill"
1005	# attribute - treating it as a polygon.
1006	#
1007	line right 1 then down 0.25 then up .5 right 0.5 \
1008	then up .5 left 0.5 then down 0.25 then left 1 close fill blue
1009	move
1010	box "Box to right" "of the" "polygon"
1011	move
1012	line "not a" "polygon" right 1in fill red
1013	move to w of 1st line then down 3cm
1014	line same as 1st line
1015	`},
1016	{name: "test30", code:`debug = 1
1017	down; box ht 0.2 wid 1.5; move down 0.15; box same; move same; box same
1018	`},
1019	{name: "test31", code:`leftmargin = 1cm
1020	box "1"
1021	[ box "2"; arrow "3" above; box "4" ] with .n at last box.s - (0,0.1)
1022	"Thing 2: "rjust at last [].w
1023
1024	dot at last box.s color red
1025	dot at last [].n color blue
1026	`},
1027	{name: "test32", code:`spline right then up then left then down ->
1028	move right 2cm
1029	spline right then up left then down ->
1030	move right 2cm
1031	dot; dot; dot;
1032
1033	dot rad 150% color red at 1st vertex of 1st spline
1034	dot same color orange at 2nd vertex of 1st spline
1035	dot same color green at 3rd vertex of 1st spline
1036	dot same color blue at 4th vertex of 1st spline
1037
1038	dot same color red at 1st vertex of 2nd spline
1039	dot same color green at 2nd vertex of 2nd spline
1040	dot same color blue at 3rd vertex of 2nd spline
1041
1042	print 2nd vertex of 1st spline.x, 2nd vertex of 1st spline.y
1043	`},
1044	{name: "test33", code:`margin = 1cm
1045	"+" at 0,0
1046	arc -> from 0.5,0 to 0,0.5
1047	arc -> cw from 0,0 to 1,0.5
1048	`},
1049	{name: "test34", code:`line; arc; arc cw; arrow
1050	`},
1051	{name: "test35", code:`A: ellipse
1052	ellipse ht .2 wid .3 with .se at 1st ellipse.nw
1053	ellipse ht .2 wid .3 with .sw at 1st ellipse.ne
1054	circle rad .05 at 0.5 between A.nw and A.c
1055	circle rad .05 at 0.5 between A.ne and A.c
1056	arc from 0.25 between A.w and A.e to 0.75 between A.w and A.e
1057
1058	// dot color red at A.nw
1059	// dot color orange at A.c
1060	// dot color purple at A.ne
1061	`},
1062	{name: "test36", code:`h = .5; dh = .02; dw = .1
1063	[
1064	Ptr: [
1065	boxht = h; boxwid = dw
1066	A: box
1067	B: box
1068	C: box
1069	box wid 2*boxwid "..."
1070	D: box
1071	]
1072	Block: [
1073	boxht = 2*dw;
1074	boxwid = 2*dw
1075	movewid = 2*dh
1076	A: box; move
1077	B: box; move
1078	C: box; move
1079	box invis "..." wid 2*boxwid; move
1080	D: box
1081	] with .n at Ptr.s - (0,h/2)
1082	arrow from Ptr.A to Block.A.nw + (dh,0)
1083	arrow from Ptr.B to Block.B.nw + (dh,0)
1084	arrow from Ptr.C to Block.C.nw + (dh,0)
1085	arrow from Ptr.D to Block.D.nw + (dh,0)
1086	]
1087	box dashed ht last [].ht+dw wid last [].wid+dw at last []
1088	`},
1089	{name: "test37", code:`# Change from the original:
1090	# * Expand the macro by hand, as Pikchr does not support
1091	# macros
1092	# Need fixing:
1093	# * "bottom of last box"
1094	# * ".t"
1095	#
1096	#define ndblock {
1097	# box wid boxwid/2 ht boxht/2
1098	# down; box same with .t at bottom of last box; box same
1099	#}
1100	boxht = .2; boxwid = .3; circlerad = .3; dx = 0.05
1101	down; box; box; box; box ht 3*boxht "." "." "."
1102	L: box; box; box invis wid 2*boxwid "hashtab:" with .e at 1st box .w
1103	right
1104	Start: box wid .5 with .sw at 1st box.ne + (.4,.2) "..."
1105	N1: box wid .2 "n1"; D1: box wid .3 "d1"
1106	N3: box wid .4 "n3"; D3: box wid .3 "d3"
1107	box wid .4 "..."
1108	N2: box wid .5 "n2"; D2: box wid .2 "d2"
1109	arrow right from 2nd box
1110	#ndblock
1111	box wid boxwid/2 ht boxht/2
1112	down; box same with .t at bottom of last box; box same
1113	spline -> right .2 from 3rd last box then to N1.sw + (dx,0)
1114	spline -> right .3 from 2nd last box then to D1.sw + (dx,0)
1115	arrow right from last box
1116	#ndblock
1117	box wid boxwid/2 ht boxht/2
1118	down; box same with .t at bottom of last box; box same
1119	spline -> right .2 from 3rd last box to N2.sw-(dx,.2) to N2.sw+(dx,0)
1120	spline -> right .3 from 2nd last box to D2.sw-(dx,.2) to D2.sw+(dx,0)
1121	arrow right 2*linewid from L
1122	#ndblock
1123	box wid boxwid/2 ht boxht/2
1124	down; box same with .t at bottom of last box; box same
1125	spline -> right .2 from 3rd last box to N3.sw + (dx,0)
1126	spline -> right .3 from 2nd last box to D3.sw + (dx,0)
1127	circlerad = .3
1128	circle invis "ndblock" at last box.e + (1.2,.2)
1129	arrow dashed from last circle.w to last box chop 0 chop .3
1130	box invis wid 2*boxwid "ndtable:" with .e at Start.w
1131	`},
1132	{name: "test38b", code:`# Need fixing:
1133	#
1134	# * ".bot" as an abbreviation for ".bottom"
1135	# * "up from top of LA"
1136	#
1137	arrow "source" "code"
1138	LA: box "lexical" "analyzer"
1139	arrow "tokens" above
1140	P: box "parser"
1141	arrow "intermediate" "code" wid 180%
1142	Sem: box "semantic" "checker"
1143	arrow
1144	arrow <-> up from top of LA
1145	LC: box "lexical" "corrector"
1146	arrow <-> up from top of P
1147	Syn: box "syntactic" "corrector"
1148	arrow up
1149	DMP: box "diagnostic" "message" "printer"
1150	arrow <-> right from east of DMP
1151	ST: box "symbol" "table"
1152	arrow from LC.ne to DMP.sw
1153	arrow from Sem.nw to DMP.se
1154	arrow <-> from Sem.top to ST.bot
1155	`},
1156	{name: "test38", code:`# Need fixing:
1157	#
1158	# * ".bot" as an abbreviation for ".bottom"
1159	# * "up from top of LA"
1160	#
1161	arrow "source" "code"
1162	LA: box "lexical" "analyzer"
1163	arrow "tokens" above
1164	P: box "parser"
1165	arrow "intermediate" "code"
1166	Sem: box "semantic" "checker"
1167	arrow
1168	arrow <-> up from top of LA
1169	LC: box "lexical" "corrector"
1170	arrow <-> up from top of P
1171	Syn: box "syntactic" "corrector"
1172	arrow up
1173	DMP: box "diagnostic" "message" "printer"
1174	arrow <-> right from east of DMP
1175	ST: box "symbol" "table"
1176	arrow from LC.ne to DMP.sw
1177	arrow from Sem.nw to DMP.se
1178	arrow <-> from Sem.top to ST.bot
1179	`},
1180	{name: "test39b", code:`textwid = 1mm
1181	circle "DISK"
1182	arrow "character" "defns" right 150%
1183	CPU: box "CPU" "(16-bit mini)"
1184	arrow <- from top of CPU up "input " rjust
1185	arrow right from right of CPU
1186	CRT: " CRT" ljust
1187	line from CRT - 0,0.075 up 0.15 \
1188	then right 0.5 \
1189	then right 0.5 up 0.25 \
1190	then down 0.5+0.15 \
1191	then left 0.5 up 0.25 \
1192	then left 0.5
1193	Paper: CRT + 1.05,0.75
1194	arrow <- from Paper down 1.5
1195	" ... paper" ljust at end of last arrow + 0, 0.25
1196	circle rad 0.05 at Paper + (-0.055, -0.25)
1197	circle rad 0.05 at Paper + (0.055, -0.25)
1198	box invis wid 120% " rollers" ljust at Paper + (0.1, -0.25)
1199	`},
1200	{name: "test39", code:` margin = 5mm
1201	# ^^^^^^^^^^^^-- extra margin required for text
1202	circle "DISK"
1203	arrow "character" "defns" right 150%
1204	# ^^^^^^^^^^---- added for spacing
1205	CPU: box "CPU" "(16-bit mini)"
1206	/{/ arrow <- from top of CPU up "input " rjust /}/
1207	# ^^^^^--- removed remove -----^^^^^
1208	arrow right from CPU.e
1209	# ^^^^^^^^^^^^^^^^--- added to compensate for missing {...} above
1210	CRT: " CRT" ljust wid 1px
1211	# ^^^^^^^--- added to avoid excess spacing
1212	line from CRT - 0,0.075 up 0.15 \
1213	then right 0.5 \
1214	then right 0.5 up 0.25 \
1215	then down 0.5+0.15 \
1216	then left 0.5 up 0.25 \
1217	then left 0.5
1218	Paper: CRT + 1.05,0.75
1219	arrow <- from Paper down 1.5
1220	" ... paper" ljust at end of last arrow + 0, 0.25
1221	circle rad 0.05 at Paper + (-0.055, -0.25)
1222	circle rad 0.05 at Paper + (0.055, -0.25)
1223	" rollers" ljust at Paper + (0.1, -0.25)
1224	`},
1225	{name: "test40", code:`$one = 1.0
1226	$one += 2.0
1227	$two = $one
1228	$two *= 3.0
1229	print $one, $two
1230	$three -= 11
1231	$three /= 2
1232	print $three
1233	`},
1234	{name: "test41", code:`# Corner test
1235
1236	box "C"
1237
1238	$d = 1in
1239	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1240	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1241	circle same "E" at $d e of C; arrow from last circle to C.e chop
1242	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1243	circle same "S" at $d s of C; arrow from last circle to C.s chop
1244	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1245	circle same "W" at $d w of C; arrow from last circle to C.w chop
1246	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1247
1248	box "C" at 3*$d east of C radius 15px
1249
1250	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1251	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1252	circle same "E" at $d e of C; arrow from last circle to C.e chop
1253	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1254	circle same "S" at $d s of C; arrow from last circle to C.s chop
1255	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1256	circle same "W" at $d w of C; arrow from last circle to C.w chop
1257	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1258
1259	ellipse "C" at 2.5*$d south of 1st box
1260
1261	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1262	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1263	circle same "E" at $d e of C; arrow from last circle to C.e chop
1264	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1265	circle same "S" at $d s of C; arrow from last circle to C.s chop
1266	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1267	circle same "W" at $d w of C; arrow from last circle to C.w chop
1268	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1269
1270	circle "C" at 3*$d east of last ellipse
1271
1272	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1273	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1274	circle same "E" at $d e of C; arrow from last circle to C.e chop
1275	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1276	circle same "S" at $d s of C; arrow from last circle to C.s chop
1277	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1278	circle same "W" at $d w of C; arrow from last circle to C.w chop
1279	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1280
1281	cylinder "C" at 2.5*$d south of last ellipse
1282	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1283	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1284	circle same "E" at $d e of C; arrow from last circle to C.e chop
1285	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1286	circle same "S" at $d s of C; arrow from last circle to C.s chop
1287	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1288	circle same "W" at $d w of C; arrow from last circle to C.w chop
1289	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1290
1291	oval "C" at 3*$d east of last cylinder
1292	circle rad 50% "N" at $d n of C; arrow from last circle to C.n chop
1293	circle same "NE" at $d ne of C; arrow from last circle to C.ne chop
1294	circle same "E" at $d e of C; arrow from last circle to C.e chop
1295	circle same "SE" at $d se of C; arrow from last circle to C.se chop
1296	circle same "S" at $d s of C; arrow from last circle to C.s chop
1297	circle same "SW" at $d sw of C; arrow from last circle to C.sw chop
1298	circle same "W" at $d w of C; arrow from last circle to C.w chop
1299	circle same "NW" at $d nw of C; arrow from last circle to C.nw chop
1300	`},
1301	{name: "test42", code:`C: ellipse "ellipse"
1302
1303	line from C to 2cm heading 00 from C chop;
1304	line from C to 2cm heading 10 from C chop;
1305	line from C to 2cm heading 20 from C chop;
1306	line from C to 2cm heading 30 from C chop;
1307	line from C to 2cm heading 40 from C chop;
1308	line from C to 2cm heading 50 from C chop;
1309	line from C to 2cm heading 60 from C chop;
1310	line from C to 2cm heading 70 from C chop;
1311	line from C to 2cm heading 80 from C chop;
1312	line from C to 2cm heading 90 from C chop;
1313	line from C to 2cm heading 100 from C chop;
1314	line from C to 2cm heading 110 from C chop;
1315	line from C to 2cm heading 120 from C chop;
1316	line from C to 2cm heading 130 from C chop;
1317	line from C to 2cm heading 140 from C chop;
1318	line from C to 2cm heading 150 from C chop;
1319	line from C to 2cm heading 160 from C chop;
1320	line from C to 2cm heading 170 from C chop;
1321	line from C to 2cm heading 180 from C chop;
1322	line from C to 2cm heading 190 from C chop;
1323	line from C to 2cm heading 200 from C chop;
1324	line from C to 2cm heading 210 from C chop;
1325	line from C to 2cm heading 220 from C chop;
1326	line from C to 2cm heading 230 from C chop;
1327	line from C to 2cm heading 240 from C chop;
1328	line from C to 2cm heading 250 from C chop;
1329	line from C to 2cm heading 260 from C chop;
1330	line from C to 2cm heading 270 from C chop;
1331	line from C to 2cm heading 280 from C chop;
1332	line from C to 2cm heading 290 from C chop;
1333	line from C to 2cm heading 300 from C chop;
1334	line from C to 2cm heading 310 from C chop;
1335	line from C to 2cm heading 320 from C chop;
1336	line from C to 2cm heading 330 from C chop;
1337	line from C to 2cm heading 340 from C chop;
1338	line from C to 2cm heading 350 from C chop;
1339	`},
1340	{name: "test43", code:`scale = 0.75
1341	box "One"
1342	arrow right 200% "Bold" bold above "Italic" italic below
1343	circle "Two"
1344	circle "Bold-Italic" bold italic aligned fit \
1345	at 4cm heading 143 from Two
1346	arrow from Two to last circle "above" aligned above "below" aligned below chop
1347	circle "C2" fit at 4cm heading 50 from Two
1348	arrow from Two to last circle "above" aligned above "below "aligned below chop
1349	circle "C3" fit at 4cm heading 200 from Two
1350	arrow from last circle to Two <- \
1351	"above-rjust" aligned rjust above \
1352	"below-rjust" aligned rjust below chop
1353	`},
1354	{name: "test44", code:`debug=1
1355	file "*.md" rad 20%
1356	arrow
1357	box rad 10px "Markdown" "Interpreter"
1358	arrow right 120% "HTML" above
1359	file " HTML "
1360	`}
1361
1362	];
1363
1364	})(window.fossil);
1365

M src/pikchrshow.c

		--- src/pikchrshow.c
		+++ src/pikchrshow.c
		@@ -107,10 +107,11 @@
107	107	"}");
108	108	CX("#sbs-wrapper > fieldset {"
109	109	"padding: 0.25em 0.5em; border-radius: 0.25em;"
110	110	"}");
111	111	CX("fieldset > legend > .copy-button {margin-left: 0.25em}");
	112	+ CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
112	113	CX("</style>");
113	114	CX("<div>Input pikchr code and tap Preview to render it:</div>");
114	115	CX("<div id='sbs-wrapper'>");
115	116	CX("<div id='pikchrshow-form'>");
116	117	CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
117	118

	--- src/pikchrshow.c
	+++ src/pikchrshow.c
	@@ -107,10 +107,11 @@
107	"}");
108	CX("#sbs-wrapper > fieldset {"
109	"padding: 0.25em 0.5em; border-radius: 0.25em;"
110	"}");
111	CX("fieldset > legend > .copy-button {margin-left: 0.25em}");

112	CX("</style>");
113	CX("<div>Input pikchr code and tap Preview to render it:</div>");
114	CX("<div id='sbs-wrapper'>");
115	CX("<div id='pikchrshow-form'>");
116	CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
117

	--- src/pikchrshow.c
	+++ src/pikchrshow.c
	@@ -107,10 +107,11 @@
107	"}");
108	CX("#sbs-wrapper > fieldset {"
109	"padding: 0.25em 0.5em; border-radius: 0.25em;"
110	"}");
111	CX("fieldset > legend > .copy-button {margin-left: 0.25em}");
112	CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
113	CX("</style>");
114	CX("<div>Input pikchr code and tap Preview to render it:</div>");
115	CX("<div id='sbs-wrapper'>");
116	CX("<div id='pikchrshow-form'>");
117	CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
118

Fossil SCM

Keyboard Shortcuts