Wikibinator203DragAndDropTree.html

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<script src="Wikibinator203VM.js" charset="UTF-8"></script>
<script>
//https://raw.githubusercontent.com/benrayfield/jsutils/master/src/sha256.js

var sha256 = function(bytesIn){
	//var t = typeof bytesIn;
	//if(t != 'Uint8Array') throw 'Expected Uint8Array but got a '+t; //this check wont work because its like a map of index to byte
	
	var chunks = Math.floor((bytesIn.byteLength+9+63)/64); //512 bit each
	
	//Copy bytesIn[] into b[], then pad bit1, then pad bit0s,
	//then append int64 bit length, finishing the last block of 512 bits.
	//byte b[] = new byte[chunks*64];
	var b = new Uint8Array(chunks*64);
	
	//System.arraycopy(bytesIn, 0, b, 0, bytesIn.byteLength);
	b.set(bytesIn, 0);
	
	b[bytesIn.byteLength] = 0x80;
	
	//long bitLenTemp = bytesIn.byteLength*8;
	var bitLenTemp = bytesIn.byteLength*8; //in js, this has float64 precision, which is more than enough for Uint8Array size
	for(var i=7; i>=0; i--){
		b[b.byteLength-8+i] = bitLenTemp&0xff;
		bitLenTemp >>>= 8;
	}
	
	//log('b as hex = '+bitfuncs.uint8ArrayToHex(b));
	
	
	var a = new Uint32Array(136);
	//"first 32 bits of the fractional parts of the cube roots of the first 64 primes 2..311"
	a[0]=0x428a2f98;
	a[1]=0x71374491;
	a[2]=0xb5c0fbcf;
	a[3]=0xe9b5dba5;
	a[4]=0x3956c25b;
	a[5]=0x59f111f1;
	a[6]=0x923f82a4;
	a[7]=0xab1c5ed5;
	a[8]=0xd807aa98;
	a[9]=0x12835b01;
	a[10]=0x243185be;
	a[11]=0x550c7dc3;
	a[12]=0x72be5d74;
	a[13]=0x80deb1fe;
	a[14]=0x9bdc06a7;
	a[15]=0xc19bf174;
	a[16]=0xe49b69c1;
	a[17]=0xefbe4786;
	a[18]=0x0fc19dc6;
	a[19]=0x240ca1cc;
	a[20]=0x2de92c6f;
	a[21]=0x4a7484aa;
	a[22]=0x5cb0a9dc;
	a[23]=0x76f988da;
	a[24]=0x983e5152;
	a[25]=0xa831c66d;
	a[26]=0xb00327c8;
	a[27]=0xbf597fc7;
	a[28]=0xc6e00bf3;
	a[29]=0xd5a79147;
	a[30]=0x06ca6351;
	a[31]=0x14292967;
	a[32]=0x27b70a85;
	a[33]=0x2e1b2138;
	a[34]=0x4d2c6dfc;
	a[35]=0x53380d13;
	a[36]=0x650a7354;
	a[37]=0x766a0abb;
	a[38]=0x81c2c92e;
	a[39]=0x92722c85;
	a[40]=0xa2bfe8a1;
	a[41]=0xa81a664b;
	a[42]=0xc24b8b70;
	a[43]=0xc76c51a3;
	a[44]=0xd192e819;
	a[45]=0xd6990624;
	a[46]=0xf40e3585;
	a[47]=0x106aa070;
	a[48]=0x19a4c116;
	a[49]=0x1e376c08;
	a[50]=0x2748774c;
	a[51]=0x34b0bcb5;
	a[52]=0x391c0cb3;
	a[53]=0x4ed8aa4a;
	a[54]=0x5b9cca4f;
	a[55]=0x682e6ff3;
	a[56]=0x748f82ee;
	a[57]=0x78a5636f;
	a[58]=0x84c87814;
	a[59]=0x8cc70208;
	a[60]=0x90befffa;
	a[61]=0xa4506ceb;
	a[62]=0xbef9a3f7;
	a[63]=0xc67178f2;
	//h0-h7 "first 32 bits of the fractional parts of the square roots of the first 8 primes 2..19"
	a[64]=0x6a09e667;
	a[65]=0xbb67ae85;
	a[66]=0x3c6ef372;
	a[67]=0xa54ff53a;
	a[68]=0x510e527f;
	a[69]=0x9b05688c;
	a[70]=0x1f83d9ab;
	a[71]=0x5be0cd19;
	//a[72..135] are the size 64 w array of ints
	for(var chunk=0; chunk<chunks; chunk++){
		var bOffset = chunk<<6;
		//copy chunk into first 16 words w[0..15] of the message schedule array
		for(var i=0; i<16; i++){
			//Get 4 bytes from b[]
			var o = bOffset+(i<<2);
			a[72+i] = ((b[o]&0xff)<<24) | ((b[o+1]&0xff)<<16) | ((b[o+2]&0xff)<<8) | (b[o+3]&0xff);
		}
		//Extend the first 16 words into the remaining 48 words w[16..63] of the message schedule array:
		for(var i=16; i<64; i++){
			//s0 := (w[i-15] rightrotate 7) xor (w[i-15] rightrotate 18) xor (w[i-15] rightshift 3)
			//s1 := (w[i-2] rightrotate 17) xor (w[i-2] rightrotate 19) xor (w[i-2] rightshift 10)
			//w[i] := w[i-16] + s0 + w[i-7] + s1
			var wim15 = a[72+i-15];
			var s0 = ((wim15>>>7)|(wim15<<25)) ^ ((wim15>>>18)|(wim15<<14)) ^ (wim15>>>3);
			var wim2 = a[72+i-2];
			var s1 = ((wim2>>>17)|(wim2<<15)) ^ ((wim2>>>19)|(wim2<<13)) ^ (wim2>>>10);
			a[72+i] = a[72+i-16] + s0 + a[72+i-7] + s1;
		}
		var A = a[64];
		var B = a[65];
		var C = a[66];
		var D = a[67];
		var E = a[68];
		var F = a[69];
		var G = a[70];
		var H = a[71];
		for(var i=0; i<64; i++){
			/* S1 := (e rightrotate 6) xor (e rightrotate 11) xor (e rightrotate 25)
			ch := (e and f) xor ((not e) and g)
			temp1 := h + S1 + ch + k[i] + w[i]
			S0 := (a rightrotate 2) xor (a rightrotate 13) xor (a rightrotate 22)
			maj := (a and b) xor (a and c) xor (b and c)
			temp2 := S0 + maj
			h := g
			g := f
			f := e
			e := d + temp1
			d := c
			c := b
			b := a
			a := temp1 + temp2
			*/
			var s1 = ((E>>>6)|(E<<26)) ^ ((E>>>11)|(E<<21)) ^ ((E>>>25)|(E<<7));
			var ch = (E&F) ^ ((~E)&G);
			var temp1 = H + s1 + ch + a[i] + a[72+i];
			var s0 = ((A>>>2)|(A<<30)) ^ ((A>>>13)|(A<<19)) ^ ((A>>>22)|(A<<10));
			var maj = (A&B) ^ (A&C) ^ (B&C);
			var temp2 = s0 + maj;
			H = G;
			G = F;
			F = E;
			E = D + temp1;
			D = C;
			C = B;
			B = A;
			A = temp1 + temp2;
		}
		a[64] += A;
		a[65] += B;
		a[66] += C;
		a[67] += D;
		a[68] += E;
		a[69] += F;
		a[70] += G;
		a[71] += H;
	}
	//RETURN h0..h7 = a[64..71]
	//byte ret[] = new byte[32];
	var ret = new Uint8Array(32);
	for(var i=0; i<8; i++){
		var ah = a[64+i];
		ret[i*4] = (ah>>>24)&0xff;
		ret[i*4+1] = (ah>>>16)&0xff;
		ret[i*4+2] = (ah>>>8)&0xff;
		ret[i*4+3] = ah&0xff;
	}
	return ret;
};
</script>
<script>
//https://github.com/benrayfield/jsutils/blob/master/src/unicode.js

var unicode = {
	//TODO consider using TextEncoder instead, which is a web standard in progress and works in at least firefox chrome and 1 other
	
	utf8TextEncoder: new TextEncoder('utf-8'),
	
	utf8TextDecoder: new TextDecoder('utf-8'),
	
	stringToUtf8AsUint8Array: function(s){
		//log('unicode.utf8TextEncoder='+unicode.utf8TextEncoder+' '+mapToString(unicode.utf8TextEncoder));
		//log('param of encode: '+s);
		var u = unicode.utf8TextEncoder.encode(s);
		//var t = typeof u;
		//if(t != 'Uint8Array') throw 'Expected TextEncoder.encode(string) to return Uint8Array but got a '+t+': '+u+': '+mapToString(u);
		return u;
	},
	
	utf8AsUint8ArrayToString: function(bytes){
		return unicode.utf8TextDecoder.decode(bytes);
	},
	
	asBytes: function(stringOrBytes){
		var t = typeof stringOrBytes;
		if(t == 'Uint8Array') return stringOrBytes;
		if(t == 'string') return unicode.stringToUtf8AsUint8Array(stringOrBytes);
		throw 'Unknown type: '+t;
	},
	
	asString: function(stringOrBytes){
		var t = typeof stringOrBytes;
		if(t == 'string') return stringOrBytes;
		if(t == 'Uint8Array') return unicode.utf8AsUint8ArrayToString(stringOrBytes);
		throw 'Unknown type: '+t;
	}
	
};
</script>
<script>
//TODO move window out of that lambda then... const Wikibinator203DragAndDropTreeUI = (()=>{

//This script is under the Wikibinator203 license.

//drag and drop tree UI for viewing and calling Wikibinator203 fns/lambdas...

'use strict';

const U = Wikibinator203; //the universal function
if(U(U(U))(U) !== U(U(U))(U)) throw 'Lambda equality is broken';
const vm = Wikibinator203.n.vm; //anyWikibinator203Lambda.n is its vm.Node instance, wrapped in a lambda by vm.lambdize(node)

const loadOpsByName = true;
console.log('loadOpsByName='+loadOpsByName);

//let S = vm.ops.S;
//let T = vm.ops.T;
//let F = vm.ops.F;
//let Pair = vm.ops.Pair;
if(!vm) throw 'No vm';
if(loadOpsByName) for(let op in vm.ops){
	if(window[op]) throw 'Already have var window.'+op;
	window[op] = vm.ops[op];
	console.log('Created var for opcode as lambda: window.'+op);
}
vm.loglev = 1;

//sha256hex of text. TODO optimize by using a normal hashtable to dedup Splits
var hashText = text=>vm.bytesToHex(sha256(unicode.stringToUtf8AsUint8Array(text)));

var randInt = n=>Math.floor(Math.random()*n);

const timeOffset_ = eval('performance.timing.navigationStart'); //evaled to prevent uglifyjs from changing it to something like performance.V.Q but still have to put timing and navigationStart in reserved list

//utc seconds, with a little more precision than Date.now()*.001
const Now = ()=>((timeOffset_+performance.now())*.001);

//FIXME? may be maxExcl or max or might go slightly over, depending on roundoff.
var randBetween = (min,max)=>(min+(max-min)*Math.random());

var between = (min, val, max)=>Math.max(min, Math.min(val, max));

var betweenInt = (min, val, max)=>Math.floor(Math.max(min, Math.min(val, max)));

var asByte = num=>betweenInt(0,num,255);

var colorStr = function(redFraction, greenFraction, blueFraction){
	let r = asByte(redFraction*256);
	let g = asByte(greenFraction*256);
	let b = asByte(blueFraction*256);
	let s = '000000'+(r*65536+g*256+b).toString(16);
	return '#'+s.substring(s.length-6);
};

//var randColorStr = ()=>colorStr(.45+.55*Math.random(), .45+.55*Math.random(), .45+.55*Math.random());

var randColorStr = ()=>colorStr(randRed(), randGreen(), randBlue());

//sorted
var mapKeys = map=>{
	let ret = [];
	for(let key in map) ret.push(key);
	ret.sort();
	return ret;
};

var logMap = {};

//put a key/val in logMap and display them all.
var lm = (key,val)=>{
	if(logMap[key]!=val){
		logMap[key] = val;
		let html = '';
		let first = true;
		for(let key of mapKeys(logMap)){
			if(!first) html += '\r\n<br>';
			html += key+' = '+logMap[key]; //FIXME this isnt escaped so could break the html
			first = false;
		}
		Dob('logOut').innerHTML = html;
	}
};

/*const firstCode =
`{
	(T Sqrt)
	{
		(T +)
		{(T Sqr#{(T *) I#(F U) I}) (P x)}
		{(T Sqr) (P y)}
	}
}`;*/


/*const firstCode =
`[((Pair [L R]) [[[
I#(F U)
Sqr#{(T *) I I}
Hypot#(
	λ [x y]
	[this is [a comment] with a function Sqr in it]
	{
		(T Sqrt)
		{
			(T +)
			{(T Sqr) (P x)}
			{(T Sqr) (P y)}
		}
	}
)
[the hypotenuse of [a right triangle of sides 6 and 8] is (Hypot 6 8) and [that func is Hypot] and [as a 1 param func is (Hypot 6)]]
{[hello world] {abc def ghi jkl}}
(U Pair L U U S U)
(Pair L R)
(T (Pair (T L) R))
2.34
Em#(EmptyTreemap GodelLessThan)
[L R S T Isleaf PutNoBal Del Fo DoAvlBal VarargAx]
[a b c d e f g h i j k l m n o p]
]]])]`;
*/


const firstCode =
`[((Pair [L R]) [[[
I#(F U)
Sqr#{(T *) I I}
Hypot#(
	λ [
		x y
		(CC [this is [a comment] with a function Sqr in it]
			{
				(T Sqrt)
				{
					(T +)
					{(T Sqr) (P x)}
					{(T Sqr) (P y)}
				}
			}
		)
	]
)
[the hypotenuse of [a right triangle of sides 6 and 8] is (Hypot 6 8) and [that func is Hypot] and [as a 1 param func is (Hypot 6)]]
{[hello world] {abc def ghi jkl}}
(U Pair L U U S U)
[(Pair L R) this is a (Canvas 100 100 2 2 (0xff00ffffffffffff 0x00ffffffffff00ff (0x8000000000000000 0x0000000000000000))) canvas]
(T (Pair (T L) R))
2.34
Em#(EmptyTreemap GodelLessThan)
[L R S T Isleaf PutNoBal Del Fo DoAvlBal VarargAx]
[a b c d e f g h i j k l m n o p]
]]])]`;


/*const firstCode =
`[
Pair[ sum +[?[pix +[?i ?red]] ?[pix +[?i ?green]] ?[pix +[?i ?blue]]] ]
]`;
*/
			

/*
const firstCode =
`[
I#(F U)
Sqr#{(T *) I I}
Hypot#(
	λ [x y]
	[this is [a comment] with a function Sqr in it]
	{
		(T Sqrt)
		{
			(T +)
			{(T Sqr) (P x)}
			{(T Sqr) (P y)}
		}
	}
)
the hypotenuse of a right triangle of sides 6 and 8 is (Hypot 6 8) and that func is Hypot and as a 1 param func is (Hypot 6)
{[hello world] {abc def ghi}}
(Pair L R)
(T (Pair (T L) R))
2.34
]`;
*/

//TODO 0xf922 aka cbt literal

//const firstCode = '[I#(F U) Sqr#{(T *) I I}]';

var getFirstCode = ()=>{
	let code = location.search;
	if(code.startsWith('?')) code = code.substring(1); //remove ?
	if(code.length > 0) return unescape(code);
	return firstCode;
};

var urlPrefix = ()=>{
	let s = location.href;
	let i = s.indexOf('?');
	return i==-1 ? s : s.substring(0,i);
};

//urls generally have to be smaller than about 1024 chars or bytes. fns can get much bigger, but this should work for small fns.
var urlOfSmallFn = fn=>urlPrefix()+'?'+escape(''+fn);

var goToUrlOfCurrentFn = ()=>{
	console.log('goToUrlOfCurrentFn');
	window.location = urlOfSmallFn(rootSplat.splate().fn);
};

//const exampleFnToDisplay = vm.eval(firstCode); //a Wikibinator203 fn/lambda (which is a js lambda)
const exampleFnToDisplay = vm.eval(getFirstCode()); //a Wikibinator203 fn/lambda (which is a js lambda)

const fnForTestingAction = vm.eval('[for testing action 3.456]');


//START Splat.dobs keys:

/*
//The dom object that the other splat dobs are childs of. This is normally a div.
const SELF = 'self';

//Example: Display '[' or '(' at top left corner.
//This might just be a html label.
const PREFIX = 'prefix';

//drop (or during drag displays where would drop) left/above/before the left of 2 childs, then forkEdit
//rootSplit by some interpretation of what dropping it there means, considering it uses a high level syntax.
//This is normally a div, size 0 and hidden until needed.
const DROPLEFT = 'dropleft';

//left splat child of a splat.
//This is normally a div.
const LEFT = 'left';

//drop (or during drag displays where would drop) between 2 childs, then forkEdit
//rootSplit by some interpretation of what dropping it there means, considering it uses a high level syntax.
//This is normally a div, size 0 and hidden until needed.
const DROPMID = 'dropmid';

//where to display a canvas, text, pdf file, jpg file, or other literal value, but only do this if childs are NOT displayed
//(a necessary but not sufficient condition),
//check split for should it be displayed and caching of the Uint8Array of canvas bytes etc.
//This is normally a div or maybe a canvas, or a div with a canvas in it, etc.
const LITERAL = 'literal';

//right splat child of a splat.
//This is normally a div.
const RIGHT = 'right';

//drop (or during drag displays where would drop) right/below/after the right of 2 childs, then forkEdit
//rootSplit by some interpretation of what dropping it there means, considering it uses a high level syntax.
//This is normally a div, size 0 and hidden until needed.
const DROPRIGHT = 'dropright';

//Example: Display ']#NameXYZ' or ')#NameXYZ' or ']' or ')' at bottom left corner or on right if 1 line.
//This might just be a html label.
const SUFFIX = 'suffix';
*/

//END Splat.dobs keys.

var controls = {};

var globalVars = {
	dropCircMenuCenterY: 0, //becomes mouseY when dropCircMenu starts, near end of a dragAndDrop.
	dropCircMenuCenterX: 0,
};

controls.mouseY = 0;
controls.mouseX = 0;

controls.mouseXDragFrom = 0;
controls.mouseXDragFrom = 0;

var anyfromSplat = ()=>(findSplatWithDragStep('from') || findSplatWithDragStep('wouldFrom'));

var anytoSplat = ()=>(findSplatWithDragStep('to') || findSplatWithDragStep('wouldTo') || findSplatWithDragStep('dropCircMenu'));

//any splat where the clickCircMenu should appear, that its been clicked by right mouse button.
var anyclickcircSplat = ()=>findSplatWithDragStep('clickcirc');

//returns [fromY fromX toY toX] or null, depending if theres a drag in progress.
var dragLineFromYXToYX = ()=>{
	let wouldfromOrFrom = anyfromSplat();
	let wouldtoOrTo = anytoSplat();
	if(wouldfromOrFrom && wouldtoOrTo){
		let dobFrom = wouldfromOrFrom.dobs.self;
		let dobTo = wouldtoOrTo.dobs.self;
		/*return [ //drag line
			dobY(dobFrom)+dobHeight(dobFrom)*wouldfromOrFrom.splate().looseIconYFraction, //fromY
			dobX(dobFrom)+dobWidth(dobFrom)*wouldfromOrFrom.splate().looseIconXFraction, //fromX
			dobY(dobTo)+dobHeight(dobTo)*wouldtoOrTo.splate().looseIconYFraction, //toY
			dobX(dobTo)+dobWidth(dobTo)*wouldtoOrTo.splate().looseIconXFraction //toX
		];*/
		return [ //drag line
			dobY(dobFrom)+dobHeight(dobFrom)*uiState.from.looseIconYFraction, //fromY
			dobX(dobFrom)+dobWidth(dobFrom)*uiState.from.looseIconXFraction, //fromX
			dobY(dobTo)+dobHeight(dobTo)*uiState.to.looseIconYFraction, //toY
			dobX(dobTo)+dobWidth(dobTo)*uiState.to.looseIconXFraction //toX
		];
	}else{
		return null; //dont display drag line
	}
};


//const popupDragButton = 'mouseButton0'; //controls[popupDragButton] is 0 (up) or 1 (down)
//const popupDragButton = 'mouseLeftButton'; //controls[popupDragButton] is 0 (up) or 1 (down)
//
//2022-12-28 changing this from left to right button, for the popup menu kind of drag.
//Will make metaInsert kind of drag on left mouse button.
//I noticed that changing this leaves it broken. Its not editable this way alone. Will need to change other code.
const popupDragButton = 'mouseRightButton'; //controls[popupDragButton] is 0 (up) or 1 (down)

const metaInsertButton = 'mouseLeftButton';

var eventToButtonName = event=>{
	switch(event.button){
		case 0:
			return 'mouseLeftButton';
		break; case 1:
			return 'mouseMiddleButton';
		break; case 2:
			return 'mouseRightButton';
		break; case 3:
			return 'mouseFourthButton';
		break; case 4:
			return 'mouseFifthButton';
		default:
			return 'unknownButton';
	}
};

var scheduledFunc = null;
//schedule a func to run asap. sometimes js gets too busy and misses events etc, leaving drag and drop stuff on screen.
var scheduleFunc = func=>{
	if(scheduledFunc){
		const prev = scheduledFunc;
		scheduledFunc = ()=>{
			prev();
			func();
		};
	}else{
		scheduledFunc = func;
	}
};
var runScheduledFuncs = ()=>{
	const prev = scheduledFunc;
	scheduledFunc = null;
	if(prev){
		prev();
	}
};

//TODO "SOLUTION: Fixing this by dividing Split into 2 classes: Split (immutable, up from any closed leafs),
//and Splat (mutable, has dom nodes). Split.prototype.displayIn(Splat) fills in those dom nodes,
//and removes some dom nodes if they're no longer used.
//Split can share branches and is a forest (like fn). Split might be made of fns later (TODO?).
//Splat is a tree and cant share branches.
//A split is dragged from any part of Splat to any part of Splat."
//
//var Splat = function(parentSplatOrNull, splate){
//
//OLD: isRight means is right child, else left child, of parentSplatOrNull, or if !parentSplatOrNull then this is a root, not a child.
//
//selfDob is normally parentSplatOrNull.dobs.left or parentSplatOrNull.dobs.right or if !parentSplatOrNull then its probably rootDob or dragDob.
var Splat = function(parentSplatOrNull, selfDob){
	selfDob.innerHTML = '';

	//this.splate = splate; //doesnt include splates for leftSplat or rightSplat. Its local to this Splat.
	//this.splate = defaultSplate; //so Splat.setSplit can display it first. Has no childs.
	//this.split = null; //TODO
	this.split = defaultSplit;
	
	
	/*
	if(this.splate.isOpen && this.splate.isDisplayName){
		fnMeta(this.splate.fn).numOpenNamedSplats++;
		//FIXME do fnMeta(this.splate.fn).numOpenNamedSplats--
		//when this.splate is replaced with a !isOpen and !isDisplayName or this Splat removed.
	}*/
	
	//map of string to dob (dom object).
	//TODO dobs for the 2 childs, prefix and suffix, etc.
	//TODO also include dobs for "include extra divs, normally empty, in every Splat, in every
	//possible place in that splat it could be dropped, including hidden splats".
	this.dobs = {
		self: selfDob,
	};
	
	
	//const ThisSplat = this;	
	
	/*selfDob.addEventListener(
		'mouseup',
		this.eventListenerMouseUp = globalOnMouseUp
	);*/
	
	this.parentSplat = parentSplatOrNull || null; //null if this is a top Splat (probably just these 2: rootSplat and dragSplat)
	this.leftSplat = null; //null if not viewing left child
	this.rightSplat = null; //null if not viewing right child
	
	this.createDobsIfNotExist(); //other than selfDob which is given

};

var globalOnMouseDown = function(event){
	//requestAnimationFrame(()=>{
	
		controls.mouseY = event.pageY;
		controls.mouseX = event.pageX;
		const ThisSplat = splatAtYX(controls.mouseY,controls.mouseX); //so this function is not specific to a splat and can move it to rootDob.
		
		onDomEvent(event);
		event.stopPropagation();
		//if(uiState.isDoingMouseUp){
		//	if(options.logMouseEvents) console.log('mousemove is ignored cuz uiState.isDoingMouseUp');
		//	return;
		//}
		document.body.style.backgroundColor = '#ccc'; //FIXME remove this
		//console.log('mousedown '+ThisSplat);
		//event.stopPropagation();
		uiState.removeClickCircMenuAsap = false;
		let btn = eventToButtonName(event); //FIXME can be multiple buttons, see event.buttons and event.which
		if(options.logMouseEvents) console.log('mousedown '+btn);
		controls[uiState.lastMouseButtonDown = btn] = 1;
		//if(btn == 'mouseLeftButton'){
		//if(btn == metaInsertButton){
			/* This was clickCircMenu, but thats being merged into dropCircMenu (put that on right mouse button)
			then make a new kind of drag and drop (metaInsert) on left mouse button.
			
			//doDropCircMenu(); //2022-12-17 i'm trying to use doDropCircMenu for both the clickCircMenu and the dropCircMenu so todo rename this func
			//doClickCircMenu();
			let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
			console.log('clickcirctest mouseRightButton splatfyfx='+splatfyfx);
			if(splatfyfx){
					splatfyfx.splat.doStartClickCirc(splatfyfx.fy, splatfyfx.fx);
			}else{
					console.log('for clickcirc, screenYXToSplatfyfx returned null so cant doStartDrag');
			}*/
			//console.log('TODO mouseLeftButton');
		//}else if(btn == popupDragButton){
		if(btn == popupDragButton || btn == metaInsertButton){ //both of these should start a drag, but different ways of ending it.
			if(options.simple_setSelSplat_ofWhateverDobMouseTouches){
				setSelSplat(ThisSplat);
			}
			if(options.doMainDragging){
				if(options.logMouseEvents) console.log('for dropcirc, mousedown doMainDragging');
				//ThisSplat.doStartDrag(
				//	ThisSplat.looseIconYFractionAtMouseY(controls.mouseY), ThisSplat.looseIconXFractionAtMouseX(controls.mouseX));
				let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
				if(splatfyfx){
					splatfyfx.splat.doStartDrag(splatfyfx.fy, splatfyfx.fx);
				}else{
					if(options.logMouseEvents) console.log('for dropcirc, screenYXToSplatfyfx returned null so cant doStartDrag');
				}
				//console.log('after doStartDrag from='+findSplatWithDragStep('from'));
			}
		}
		/*if(btn == 'mouseLeftButton'){
			if(options.simple_setSelSplat_ofWhateverDobMouseTouches){
				setSelSplat(ThisSplat);
			}
			if(options.doMainDragging){
				console.log('for dropcirc, mousedown doMainDragging');
				//ThisSplat.doStartDrag(
				//	ThisSplat.looseIconYFractionAtMouseY(controls.mouseY), ThisSplat.looseIconXFractionAtMouseX(controls.mouseX));
				let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
				if(splatfyfx){
					splatfyfx.splat.doStartDrag(splatfyfx.fy, splatfyfx.fx);
				}else{
					console.log('for dropcirc, screenYXToSplatfyfx returned null so cant doStartDrag');
				}
				//console.log('after doStartDrag from='+findSplatWithDragStep('from'));
			}
		}else if(btn == 'mouseRightButton'){
			//doDropCircMenu(); //2022-12-17 i'm trying to use doDropCircMenu for both the clickCircMenu and the dropCircMenu so todo rename this func
			//doClickCircMenu();
			let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
			console.log('clickcirctest mouseRightButton splatfyfx='+splatfyfx);
			if(splatfyfx){
					splatfyfx.splat.doStartClickCirc(splatfyfx.fy, splatfyfx.fx);
			}else{
					console.log('for clickcirc, screenYXToSplatfyfx returned null so cant doStartDrag');
			}
		}*/
	//});
};

//allow event to be null, to use controls.mouseLeftButton and controls.mouseRightButton (each being 0 or 1) etc,
//so it knows which went up. Im gonna try doing that and calling this on null from mousemove
//if theres no buttons pressed AND there were buttons pressed before, cuz its been missing some events.
var globalOnMouseUp = function(event){
	
	//this allows multiple calls of globalOnMouseUp (such as one from mousemove and one from mousedown,
	//without duplicating the resulting behaviors. Its been dropping some mouseup events, so I'm going to call this from mousemove too.
	if(!uiState.lastMouseButtonDown){
		console.log('globalOnMouseUp ignored, cuz no lastMouseButtonDown');
		return;
	}
	//requestAnimationFrame(()=>{
		if(event){
			onDomEvent(event);
		}
		//try{
		//	uiState.isDoingMouseUp = true;
			document.body.style.backgroundColor = 'white'; //FIXME remove this
			//console.log('mouseup '+ThisSplat);
			if(event){
				event.stopPropagation();
			}
			
			console.log('globalOnMouseUp, controls was = '+JSON.stringify(controls));
			//let btn;
			/*if(event){
				btn = eventToButtonName(event);
			}else{
				/*
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":504,"mouseX":759,"mouseXDragFrom":0,"mouseLeftButton":1}
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":590,"mouseX":750,"mouseXDragFrom":0,"mouseLeftButton":1}
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":423,"mouseX":870,"mouseXDragFrom":0,"mouseLeftButton":1}
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":481,"mouseX":847,"mouseXDragFrom":0,"mouseLeftButton":0}
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":526,"mouseX":873,"mouseXDragFrom":0,"mouseLeftButton":1}
				Wikibinator203DragAndDropTree.html:796 globalOnMouseUp, controls was = {"mouseY":483,"mouseX":855,"mouseXDragFrom":0,"mouseLeftButton":0,"mouseRightButton":1}
				*
				//if(controls.mouseLeftButton){
				//}else{
				//}
				if(uiState.lastMouseButtonDown){
					fixmefixme
				}else{
					throw 'No lastMouseButtonDown';
				}
			}*/
			let btn = uiState.lastMouseButtonDown;
			
			if(options.logMouseEvents) console.log('mouseup '+btn);
			controls[btn] = 0;
			//if(options.simple_setSelSplat_ofWhateverDobMouseTouches){
			//	setSelSplat(ThisSplat);
			//}
			//if(options.doMainDragging && uiState.lastMouseButtonDown == 'mouseLeftButton'){
			//if(options.doMainDragging && btn == 'mouseLeftButton'){
			if(options.doMainDragging && btn == popupDragButton){
				//last mouse button down was left (for dragging). right button is for clickCircMenu, not dropCircMenu.
				//doDropCircMenu();
				doDropCircMenuOrHasPreChosen();
				//doEndDrag();
			}else if(btn == metaInsertButton){
				//scheduleFunc(()=>{
					endMetaInsert();
				//});
			}
			//dont need this at mouseup cuz that menu appears when mouse down: if(btn == 'mouseRightButton'){
			//	doClickCircMenu();
			//}
			uiState.lastMouseButtonDown = null;
		//}finally{
		//	uiState.isDoingMouseUp = false;
		//}
	//});
};

var globalOnMouseMove = function(event){
	//requestAnimationFrame(()=>{
		onDomEvent(event);
		event.stopPropagation();
		//if(uiState.isDoingMouseUp){
		//	if(options.logMouseEvents) console.log('mousemove is ignored cuz uiState.isDoingMouseUp');
		//	return;
		//}
		controls.mouseY = event.pageY;
		controls.mouseX = event.pageX;
		const ThisSplat = splatAtYX(controls.mouseY,controls.mouseX); //so this function is not specific to a splat and can move it to rootDob.
		
		runScheduledFuncs();
		
		let isPopupDragButtonDown = controls[popupDragButton];
		let isMetaInsertDragButtonDown = controls[metaInsertButton];
		
		//TODO use options.doMainDragging
		if(options.basicTestOfLooseIconWhenMouseMoves){
			//FIXME i updated this code to use setIconStuffInUiState 2023-1-15 but then didnt test it cuz
			//options.basicTestOfLooseIconWhenMouseMoves is false, so its not the code thats running.
		
			//FIXME unset this in anything not currently dragging FROM or TO
			//(so at most should be 2 splats with this true in the main/rootSplat tree excluding Action/thirdchilds if those are even used)
			let isDisplayIcon = true;
			//let isDisplayIcon = ThisSplat.splate().isDisplayIcon;
			//let isDisplayIcon = false;
			let looseIconYFraction = (controls.mouseY-dobY(selfDob))/dobHeight(selfDob); //FIXME what if height is 0?
			let looseIconXFraction = (controls.mouseX-dobX(selfDob))/dobWidth(selfDob); //FIXME what if width is 0?
			if(options.logMouseEvents) console.log('mousemove setting looseIconYFraction='+looseIconYFraction+' and looseIconXFraction='+looseIconXFraction);
			//ThisSplat.transformSplate(splate=>splate.setLooseIconYFraction(looseIconYFraction).setLooseIconXFraction(looseIconXFraction).setIsDisplayIcon(isDisplayIcon));
			if(ThisSplat.isDragFrom()){
				console.log('mousemove isDragFrom splat='+ThisSplat);
				//false is FROM. true is TO. It can be none, one, or both of those.
				ThisSplat.setIconStuffInUiState(false, looseIconYFraction, looseIconXFraction, isDisplayIcon);
			}
			if(ThisSplat.isDragTo()){
				console.log('mousemove isDragTo splat='+ThisSplat);
				ThisSplat.setIconStuffInUiState(true, looseIconYFraction, looseIconXFraction, isDisplayIcon);
			}
			
			if(options.logMouseEvents) console.log('mousemove did transformSplate with new icon position etc');
			
			//this.dobs.looseIcon.style.top = (dobY(self)+dobHeight(self)*splate.looseIconYFraction)+'px';
			//this.dobs.looseIcon.style.left = (dobX(self)+dobWidth(self)*splate.looseIconXFraction)+'px';
		}
		
		
		if(options.logMouseEvents) console.log('controls = '+JSON.stringify(controls)+(selSplat ? (' dobDist to selSplat self = '+dobDist(selSplat.dobs.self,controls.mouseY,controls.mouseX)) : ''));
		//event.stopPropagation();
		if(options.simple_randomizeColor_ofWhateverDobMouseTouches){
			//ThisSplat.forkRootSplit_randomizeColor_inRootSplat();
			ThisSplat.forkRoot_setColor();
		}
		//if(ThisSplat.parentSplat) ThisSplat.parentSplat.forkRootSplit_randomizeColor_inRootSplat();
		if(options.fillDropDobWithTestWhenNearestToMouse){
			//let dob = rootSplat.nearestDrop(controls.mouseY,controls.mouseX);
			let splatdob = rootSplat.nearestDrop(controls.mouseY,controls.mouseX);
			//dob.innerHTML = 'DROP'+Date.now();
			if(splatdob){
				//splatdob.splat.dobs[splatdob.dobName].innerHTML = Math.random()<.5 ? 'DROP' : 'drop';
				//splatdob.dob().innerHTML = Math.random()<.5 ? 'DROP' : 'drop';
				let txt = splatdob.dobName;
				txt = Math.random()<.5 ? txt.toUpperCase() : txt.toLowerCase();
				//splatdob.dob().innerHTML = txt;
				splatdob.dobs.self.innerHTML = txt;
			}
		}
		
		if(options.doMainDragging){
			if(isPopupCircularMenu()){
				//console.log('mousemove isPopupCircularMenu (TODO)');
				updateOverlays();
			}else{
				
				//FIXME if doing the metaInsert kind of drag, set this to 0 or 1 (which side always does self, not parent?).
				let verticalFractionBetweenSelfVsParent = options.fractionRecurse;
				if(uiState.lastMouseButtonDown == metaInsertButton){
					//0 is parent. 1 is self. .5 is height chooses at mid height in rect.
					//FIXME should this be 0 or 1? want parent, i think, but need experiments... No, I'm changing it to want self (not parent) and will choose parent or not etc from there.
					//verticalFractionBetweenSelfVsParent = 0; //parent
					verticalFractionBetweenSelfVsParent = 1; //self
				}
				
				//if(isPopupDragButtonDown){
				if(isPopupDragButtonDown || isMetaInsertDragButtonDown){
					//ThisSplat.doDuringDrag(
					//	ThisSplat.looseIconYFractionAtMouseY(controls.mouseY), ThisSplat.looseIconXFractionAtMouseX(controls.mouseX));
					let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX, verticalFractionBetweenSelfVsParent);
					if(splatfyfx){
						splatfyfx.splat.doDuringDrag(splatfyfx.fy, splatfyfx.fx);
					}else{
						console.log('screenYXToSplatfyfx returned null so cant doDuringDrag');
					}
					//console.log('after doDuringDrag from='+findSplatWithDragStep('from')+"\nwouldTo="+findSplatWithDragStep('wouldTo'));
				}else{
					//FIXME this is happening after release mouse button, as if drag hadnt just happened.
					//ThisSplat.doBeforeDrag(
					//	ThisSplat.looseIconYFractionAtMouseY(controls.mouseY), ThisSplat.looseIconXFractionAtMouseX(controls.mouseX));
					let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX, verticalFractionBetweenSelfVsParent);
					if(splatfyfx){
						splatfyfx.splat.doBeforeDrag(splatfyfx.fy, splatfyfx.fx);
					}else{
						console.log('screenYXToSplatfyfx returned null so cant doBeforeDrag');
					}
					//console.log('after doBeforeDrag wouldFrom='+findSplatWithDragStep('wouldFrom'));
				}
			}
		}
	//});
	
	if(uiState.lastMouseButtonDown){ //is doing a drag, and this button is or was down
		if(!event.buttons){ //no mouse buttons are down
			console.log('mousemove is doing a mouseup just in case that event was dropped, event.buttons='+event.buttons+' and lastMouseButtonDown='+uiState.lastMouseButtonDown+' Its ok if both happen cuz it will ignore later calls of it until another mousedown.');
			globalOnMouseUp(null); //call with no event. it will use uiState.lastMouseButtonDown instead.
			if(uiState.lastMouseButtonDown) throw 'in mousemove, globalOnMouseUp didnt unset lastMouseButtonDown';
		}
	}
};


//If mouseY is not given, uses controls.mouseY. Returns a fraction if mouse is inside my rect, else it might be outside that range.
Splat.prototype.looseIconYFractionAtMouseY = function(mouseY){
	if(mouseY === undefined) mouseY = controls.mouseY;
	return (mouseY-dobY(this.dobs.self))/dobHeight(this.dobs.self); //FIXME what if height is 0?
};

//If mouseX is not given, uses controls.mouseX. Returns a fraction if mouse is inside my rect, else it might be outside that range.
Splat.prototype.looseIconXFractionAtMouseX = function(mouseX){
	if(mouseX === undefined) mouseX = controls.mouseX;
	return (mouseX-dobX(this.dobs.self))/dobWidth(this.dobs.self); //FIXME what if width is 0?
};

//If you dont give a optionalOtherLooseIconYFraction then it uses its own.
Splat.prototype.screenYOfLooseIconYFraction = function(optionalOtherLooseIconYFraction){
	let looseIconYFraction = (optionalOtherLooseIconYFraction!==undefined) ? optionalOtherLooseIconYFraction : this.splate().looseIconYFraction();
	return dobY(this.dobs.self)+dobHeight(this.dobs.self)*looseIconYFraction;
};

//If you dont give a optionalOtherLooseIconXFraction then it uses its own.
Splat.prototype.screenXOfLooseIconXFraction = function(optionalOtherLooseIconXFraction){
	let looseIconXFraction = (optionalOtherLooseIconXFraction!==undefined) ? optionalOtherLooseIconXFraction : this.splate().looseIconXFraction();
	return dobX(this.dobs.self)+dobWidth(this.dobs.self)*looseIconXFraction;
};

//This takes 3 possible params: 'dropleft', 'dropmid', or 'dropright', and creates/reuses a child Splat.
//This is for the 3 possible child Splats for Action, in dobs.dropleft dobs.dropmid or dobs.dropright.
//TODO should L() and R() call this?
Splat.prototype.Child = function(dobName){
	if(!this[dobName]){
		if(dobName != 'dropleft' && dobName != 'dropmid' && dobName != 'dropright') throw 'dobName='+dobName;
		if(!this.dobs[dobName]) throw 'No '+dobName+' dob';
		this[dobName] = new Splat(this, Pob('div',this.dobs[dobName])); //div so no dobs are shared between parent.dobs and child.dobs
		this[dobName].parentSplat = this;
	}
	return this[dobName];
};

//lazy create left splat with defaultSplate (waiting for setSplate to cause display of nontrivial contents)
Splat.prototype.L = function(){
	if(!this.leftSplat){
		//let leftSplate = defaultSplate.copy(); //FIXME shouldnt need to copy, cuz should use as immutable. Also, this shouldnt be defaultSplate.
		//let leftSplate = this.splate.simpleLeftSplate();
		//this.leftSplat = new Splat(this, leftSplate);
		//this.leftSplat = new Splat(this, leftSplate);
		if(!this.dobs.left) throw 'No left dob';
		this.leftSplat = new Splat(this, Pob('div',this.dobs.left)); //div so no dobs are shared between parent.dobs and child.dobs
		this.leftSplat.parentSplat = this;
	}
	return this.leftSplat;
};

//lazy create right splat with defaultSplate (waiting for setSplate to cause display of nontrivial contents)
Splat.prototype.R = function(){
	if(!this.rightSplat){
		//let rightSplate = defaultSplate.copy(); //FIXME shouldnt need to copy, cuz should use as immutable. Also, this shouldnt be defaultSplate.
		//let rightSplate = this.splate.simpleRightSplate();
		if(!this.dobs.right) throw 'No right dob';
		this.rightSplat = new Splat(this, Pob('div',this.dobs.right)); //div so no dobs are shared between parent.dobs and child.dobs
		this.rightSplat.parentSplat = this;
	}
	return this.rightSplat;
};

//get or set attribute of dob. If dont give a value, just reads it. If give value, writes it then returns same dob. Use null to remove attribute.
var attr = (dob,attrName,optionalAttrVal)=>{
	if(optionalAttrVal === undefined){ //read attr
		return dob.getAttribute(attrName);
	}else{ //write attr
		if(optionalAttrVal === null){
			dob.removeAttribute(attrName);
		}else{
			dob.setAttribute(attrName, optionalAttrVal);
		}
		return dob;
	}
};

//new dob/domObject
var Nob = (tag,optionalParent,optionalInnerHtml)=>{
	let dob = document.createElement(tag);
	if(optionalInnerHtml) dob.innerHTML = optionalInnerHtml;
	if(optionalParent) optionalParent.appendChild(dob);
	return dob;
};

//unPadded New dOB/domObject
var Pob = (tag, optionalParent, optionalInnerHtml)=>{
	//unpad(Nob(tag,optionalParent,optionalInnerHtml));
	let dob = document.createElement(tag);
	unpad(dob);
	if(optionalInnerHtml) dob.innerHTML = optionalInnerHtml;
	if(optionalParent) optionalParent.appendChild(dob);
	return dob;
};

Splat.prototype.parentDob = function(){
	if(this.parentSplat){
		if(!this.parentSplat.dobs.self){
			console.log('child splat creating dobs in parent. FIXME? why didnt parent do it already?');
			this.parentSplat.createDobsIfNotExist();
		}
		return this.parentSplat.dobs.self;
	}else{
		if(!rootDob) throw 'No rootDob';
		return rootDob;
	}
};

//Keys in splat.dobs, except 'self' which contains all those.
//var childDobNames = 'controls prefix dropleft left dropmid literal right dropright suffix'.split(' ');
var childDobNames = 'prefix dropleft left dropmid literal right dropright suffix'.split(' ');

var sytyToPushChar_ = {
	'0CI': '-', //vm.ops.Rucfni uses - = and displays opposite order as Infcur/[]
	IC0: '[', //vm.ops.Infcur
	'IC+': '[',
	'+CI': '-', //vm.ops.Rucfni
	C: '(',
	S0: '(',
	S1: '(',
	S2: '{',
	ST1: '(',
	ST2: '<',
	'ST3+': '<',
	'S_T1<>': '(',
	S_ST2: '(',
	'S_ST3+': '(',
	//T1: ',',
	//T1: 'T', //Change ',' to 'T' 
	T1: ',', //Change ',' to 'T' 
	//T1 and T1<> are both vm.ops.T of 1 param. The different syty just chooses
	//when to use <> inside <> vs when to use () and <> together to avoid an extra T/,.
	//'T1<>': 'T', //Change ',' to 'T', in ',<...at least 2 things...>'.
	'T1<>': ',', //Change ',' to 'T', in ',<...at least 2 things...>'.
	'_1': '',
};

/*
//is it an (OO a b)
vm.isFullOO = fn=>vm.isSameOpAndNumParams(vm.ops.OO,fn,1);

//is it a (GoO a b)
vm.isFullGoO = fn=>vm.isSameOpAndNumParams(vm.ops.GoO,fn,1);

//is it a (Du a)
vm.isFullDu = fn=>vm.isSameOpAndNumParams(vm.ops.Du,fn,1);

//is it a (DuGo a)
vm.isFullDuGo = fn=>vm.isSameOpAndNumParams(vm.ops.DuGo,fn,1);

//is it a (D a)
vm.isFullD = fn=>vm.isSameOpAndNumParams(vm.ops.D,fn,1);

//is it a (DGo a)
vm.isFullDGo = fn=>vm.isSameOpAndNumParams(vm.ops.DGo,fn,1);
*/

var sytyToPushChar = (syty,optionalFn)=>{
	if(optionalFn){
		//(DGo (GoO (OO a b) sum)) appears as a/b/sum$
		//if(options.foldOO && (vm.isFullD(optionalFn) || vm.isFullDGo(optionalFn) || vm.isFullDu(optionalFn) || vm.isFullDuGo(optionalFn) || vm.isFullOOOrGoO(optionalFn))){
		if(options.foldOO && (vm.isFullD(optionalFn) || vm.isFullDGo(optionalFn) || vm.isFullOOOrGoO(optionalFn) ||
				vm.isFullPOrPGo(optionalFn) || vm.isFullBlOrBlGo(optionalFn) || vm.isFullGOrGGo(optionalFn))){
			return ''; //(D x) appears as x$. Drop the (, and pop char will be $ if D. ^ if Du. "" if OO or GoO.
		}
	}
	return (sytyToPushChar_[syty]!==undefined ? sytyToPushChar_[syty] : 'FIXME_WHAT_PUSH_CHAR_FOR_SYTY='+syty);
};

var sytyToPopChar_ = {
	'0CI': '=', //vm.ops.Rucfni uses - = and displays opposite order as Infcur/[]
	IC0: ']', //vm.ops.Infcur
	'+CI': '=',
	'IC+': ']', //vm.ops.Rucfni
	C: ')',
	S0: ')',
	S1: ')',
	S2: '}',
	ST1: ')',
	ST2: '>',
	'ST3+': '>',
	'S_T1<>': ')',
	S_ST2: ')',
	'S_ST3+': ')',
	
	//Appears as <b>T<b>stuff...NOTHING, where that NOTHING is this empty string. Similar to {STUFF} or [STUFF] but its T instead of { or [ or (.
	T1: '',
	'T1<>': '',
	
	'_1': '', //_ means vm.ops.Seq. Its normally used like _[lineOfCode forLoop ifElse etc] as a sequence of things to do, like in (For _[(DE ,x ,0) (DE ,ret ,1)] <Lt x$ ,4> (DE ,x <+ x$ ,1>) (DE ,ret <+ <* ret$ ret$> ,1>))
};

//FIXME why does https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript say
//to also do  .replace(/"/g, "&quot;") and .replace(/'/g, "&#039;"); ? Is that just in case its used in a string literal?
var weakHtmlEscape = str=>str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

//This puts "/" between a/b and sum in /a/b/sum. Its "" for most stuff.
var sytyToMidChar = (syty,optionalFn)=>{
	if(!optionalFn) return '';
	if(options.foldOO){
		if(vm.isFullOOOrGoO(optionalFn)) return '/';
		if(vm.isFullGOrGGo(optionalFn)) return '^';
	}
	return '';
};

//check !==undefined cuz pop char for T1 is '' aka empty string cuz its just ',' (its push char) on the left.
var sytyToPopChar = (syty,optionalFn)=>{
	if(optionalFn){
		if(options.foldOO){
			//(DGo (GoO (OO a b) sum)) appears as a/b/sum$
			if(vm.isFullDOrDGo(optionalFn)) return '$'; //(D x) appears as x$
			//removing ^. Use P and PGo instead as %. if(vm.isFullDuOrDuGo(optionalFn)) return '^'; //(Du x) appears as x^
			if(vm.isFullPOrPGo(optionalFn)) return '%'; //(P x) appears as x^. (PGo (GoO (OO x y) z)) appears as x/y/z%
			//if(vm.isFullGetcbtOrGetcbtgo(optionalFn)) return '@';
			if(vm.isFullBlOrBlGo(optionalFn)) return '@';
			if(vm.isFullOOOrGoO(optionalFn)) return ''; //dont display ")" as usual cuz is joined by "/" in midfix (of prefix midfix suffix).
			if(vm.isFullGOrGGo(optionalFn)) return ''; //dont display ")" as usual cuz is joined by "^" in midfix (of prefix midfix suffix).
		}
	}
	return (sytyToPopChar_[syty]!==undefined ? sytyToPopChar_[syty] : 'FIXME_WHAT_POP_CHAR_FOR_SYTY='+syty);
};

/*
Splat.prototype.updateSelfDivStyle = function(){
	let sty = this.dobs.self.style;
	sty.borderStyle = 'outset';
	let red = .45+.55*Math.random();
	let green = .45+.55*Math.random();
	let blue = .45+.55*Math.random();
	let brightMul = .85;
	if(this.isSelected()){
		console.log('isSelected splat='+this);
		red = green = blue = 1;
	}
	sty.backgroundColor = colorStr(red*brightMul,green*brightMul,blue*brightMul);
	sty.borderWidth = '15px';
	sty.borderColor = colorStr(red,green,blue);
};*/

//Splat.prototype.copyEventListenersIntoDob = function(dob){
	//if(!this.eventListenerMouseMove) throw 'No this.eventListenerMouseMove';
	//if(!this.eventListenerMouseDown) throw 'No this.eventListenerMouseDown';
	//if(!this.eventListenerMouseUp) throw 'No this.eventListenerMouseUp';
	//dob.addEventListener('mousemove', this.eventListenerMouseMove);
	//dob.addEventListener('mousedown', this.eventListenerMouseDown);
	//dob.addEventListener('mouseup', this.eventListenerMouseUp);
//};

//FIXME this needs to be called to update color of any dragline, even if the splats dont need updating (by bigHash of their content).
//dragLine should be an overlay (updateOverlays) but 2022-12-29 it isnt, so going to scan for which have a drop line
//and update the color to this, in updateOverlays.
var whatColorShouldDragLineBe = ()=>{
	return uiState.lastMouseButtonDown==metaInsertButton ? options.metaInsertDragLineColor : options.popupDragLineColor;
	
	//These buttons might change...
	//const popupDragButton = 'mouseRightButton'; //controls[popupDragButton] is 0 (up) or 1 (down)
	//const metaInsertButton = 'mouseLeftButton';
	
	//let isPopupDragButtonDown = controls[popupDragButton];
	//let isMetaInsertDragButtonDown = controls[metaInsertButton];
	//return isPopupDragButtonDown ? 'blue' : 'green';
	//return Math.random()<.5 ? 'blue' : 'green';
	//if(isPopupDragButtonDown || isMetaInsertDragButtonDown){
	//	let color = isPopupDragButtonDown ? 'blue' : 'green';
	//	Dob('popu
	//}
	//whatColorShouldDragLineBe
};

//store 128 bits of locid of this.splate().fn to check if it changed, and if it didnt, and it was an ops.Canvas with 5 params, then doesnt have to update canvas.
Splat.prototype.rememberLocid = function(optionalFn){
	let fn = optionalFn || this.splate().fn;
	this.lastLocid = [fn.n.idA, fn.n.idB, fn.n.blobFrom, fn.n.blobTo];
};

//returns true if is same fn by locid as the last call of rememberLocid.
Splat.prototype.compareLocidTo = function(optionalFn){
	let fn = optionalFn || this.splate().fn;
	//TODO use bigint such as 324513452345213q4523453452345n for these 128 bits, or string, instead of list of 4 numbers?
	return this.lastLocid && this.lastLocid[0]==fn.n.idA && this.lastLocid[1]==fn.n.idB && this.lastLocid[2]==fn.n.blobFrom && this.lastLocid[3]==fn.n.blobTo;
};

Splat.prototype.canvasDelete = function(){
	//FIXME dont cacheCanvBytes. just check if this.splate().fn changed, or maybe just its 128 bit id to prevent garbcol problems.
	if(this.dobs.canv){
		this.dobs.canv.remove();
		this.dobs.canv = null;
	}
	//TODO rememberLocid()?
	/*if(this.cacheCanvBytes){ //used to check for duplicates, since this array contents should not change
		this.cacheCanvBytes = null;
		this.cacheCanvSizes = null;
	}*/
};

/*
//Example for manual testing after right drag then set selSplat:
//selSplat.canvasDisplay(10,10,2,3,Uint8Array.of(255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255));
//Nob('canvas',selSplat.dobs.literal);
//FIXME Nob to create canvas does appear on page but keeps being overwritten when move mouse.
Splat.prototype.canvasDisplay = function(magnifyHeight, magnifyWidth, dataHeight, dataWidth, bytes){
	//FIXME use this.cacheCanvasBytes and make this work with canvasDelete and stop it from creating new canvas each time it displays if sizes didnt change andOr just paint again if only bytes changed.
	if(!this.cacheCanvSizes || this.cacheCanvSizes[0]!=magnifyHeight || this.cacheCanvSizes[1]!=magnifyWidth ||
			this.cacheCanvSizes[2]!=dataHeight || this.cacheCanvSizes[3]!=dataWidth){
		//this.canvasDelete();
		let c = Nob('canvas',this.dobs.literal);
		attr(c,'height',dataHeight);
		attr(c,'width',dataWidth);
		c.style.transform = 'scale('+magnifyWidth+','+magnifyHeight+')';
		this.cacheCanvSizes = [magnifyHeight, magnifyWidth, dataHeight, dataWidth];
		this.dobs.canv = c;
	}
	if(bytes !== this.cacheCanvBytes){
		this.cacheCanvBytes = bytes;
		//FIXME put bytes in
	}
};*/
Splat.prototype.canvasDisplayWithoutCheckingForDuplicateBytes = function(magnifyHeight, magnifyWidth, dataHeight, dataWidth, bytes){
	console.log('canvasDisplayWithoutCheckingForDuplicateBytes (FIXME this happens too often cuz canvas replaced when move mouse 2023-7-15)');
	//this.canvasDelete();
	let c = Nob('canvas',this.dobs.literal);
	attr(c,'height',dataHeight);
	attr(c,'width',dataWidth);
	//TODO? c.style.transform = 'scale('+magnifyWidth+','+magnifyHeight+')';
	this.cacheCanvSizes = [magnifyHeight, magnifyWidth, dataHeight, dataWidth];
	this.dobs.canv = c;
	
	/*Trying this css that chatgpt said 2023-7-15...
	<div style="width: 160px; height: 100px; position: relative;">
		<canvas style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: top left; transform: scale(0.5, 1);"></canvas>
	</div>
	*/
	let h = magnifyHeight*dataHeight;
	let w = magnifyWidth*dataWidth;
	this.dobs.literal.style.position = 'relative';
	this.dobs.literal.style.height = h+'px';
	this.dobs.literal.style.width = w+'px';
	this.dobs.canv.style.position = 'absolute';
	this.dobs.canv.style.top = 0;
	this.dobs.canv.style.left = 0;
	this.dobs.canv.style.height = '100%';
	this.dobs.canv.style.width = '100%';
	this.dobs.canv.style['transform-origin'] = 'top left';
	//this.dobs.canv.style.transform = 'scale(0.5, 1)';

	copyBytesIntoCanvas(bytes, c);
};

var copyBytesIntoCanvas = function(bytes, canvas){
	let context = canvas.getContext("2d"); //FIXME reuse context for speed? Take it as param?
	let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
	var pixels = imageData.data;
	for(let i=0; i<pixels.length; i++){
		pixels[i] = bytes[i];
	}
	context.putImageData(imageData, 0, 0);
};

//(Canvas 20 20 1 2 0xfff888888888fffffffffffffffffff8)
//(Canvas 50 80 2 2 (0xfff888888888ffffffff4444aafffff8 0x80000000000000000000000000000000))
//[[this is a canvas (Canvas 50 50 2 2 (0xfff888888888ffffffff4444aafffff8 0x80000000000000000000000000000000))] blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah]
//[[this is a canvas (Canvas 30 30 2 3 (0xfff888888888ffffffff4444aafffff8 0x8abcabc0000000008000000000000000))] blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah]
Splat.prototype.canvasDisplayFn = function(fn){
	this.createDobsIfNotExist();
	//if(vm.isFullCanvas(fn)){
	if(vm.isValidCanvas(fn)){
		//FIXME limits on display size magnifyHeight*dataHeight etc. fn can be anything, but screen size is limited, and it can get very slow if magnify too big.
		let magnifyHeight = fn.n.llr(4).n.d();
		let magnifyWidth = fn.n.llr(3).n.d();
		let dataHeight = fn.n.llr(2).n.d();
		let dataWidth = fn.n.llr(1).n.d();
		let bytesCbt = fn.n.R();
		let bytes = bytesCbt.n.bytes();
		let useFirstNBytes = dataHeight*dataWidth*4;
		if(bytes.length < useFirstNBytes){
			throw bytes.length+'== bytes.length < useFirstNBytes == '+useFirstNBytes+', FIXME this should just not display as canvas, since its a valid fn but need more param checking. make an isValidCanvas func.';
		}
		//FIXME check for duplicates using compareLocidTo
		this.canvasDisplayWithoutCheckingForDuplicateBytes(magnifyHeight, magnifyWidth, dataHeight, dataWidth, bytes);
	}else{
		this.canvasDelete();
	}
};

Splat.prototype.createDobsIfNotExist = function(){


	/*
	TODO make table have fewer rows/cols and put a flex layout in 1 of them to
	change between vertical and horizontal of: dropleft left dropmid mid dropright right.
	Leave prefix and suffix as they are in table.
	
	TABLE:
	[prefix]/ flex      \/ suffix2   \
	[suffix]\ colspan=2 /\ colspan=2 /
	
	This has to handle isOneLine being true or false, and empty dobs not taking space.
	
	Only need to handle these 4 cases with table/flexlayout/gridlayout/etc...
	
	prefix dropleft
	       left
	       dropmid
		   midfix (where "/" goes in "a/b/sum$")
	       literal
	       right
	       dropright
	bigSuffixWithName
	
	prefix dropleft
	       left
	       dropmid
		   midfix (where "/" goes in "a/b/sum$")
	       literal
	       right
	suffix dropright
	
	prefix dropleft left dropmid midfix literal right dropright suffix
	
	prefix dropleft left dropmid midfix literal right dropright bigSuffixWithName
	
	//dont do this one cuz #Name should always be on same line as suffix.
	//prefix dropleft
	//       left
	//       dropmid
	//       right
	//suffix dropright
	//#NameBIGBIGBIGBIG
	
	
	Maybe should get rid of dropleft dropmid and dropright and just put a separate drop icon with zIndex to display it above things.
	
	prefix left literal right suffix
	
	Literals will go in <...> such as canvas or text, other than #Names.
	
	*/


	//TODO use these, and angled line, partially transparent div, etc...
	//(this.isDisplayIcon?'I':'i')+('Iy'+this.looseIconYFraction)+('Ix'+this.looseIconXFraction)+('Path'+this.linePath);


	if(!this.dobs.self){
		//this usually doesnt happen (if ever?). instead self is normally filled in by caller first.
		console.log('splat creating this.dobs.self, which contains the other dobs of this splat');
		this.dobs.self = Pob('div', this.parentDob());
	}
	/*for(let dobName of childDobNames){
		if(!this.dobs[dobName]){
			//let text = 'x_syty='+this.splate.syty;
			let text = null;
			let dob = Pob('div', this.dobs.self, text);
			dob.classList.add('wikib_'+dobName);
			this.dobs[dobName] = dob;
		}
	}*/
	//var childDobNames = 'controls prefix dropleft left dropmid literal right dropright suffix'.split(' ');
	//
	//prefix	left
	//
	//
	//suffix	right
	//and the others go around left and right etc, but might just need a 2x2 table.
	let d = this.dobs;
	if(!d.table){
		//d.controls = Pob('div', d.self);
		
		d.looseIcon = Pob('img', d.self);
		//attr(d.looseIcon, 'unselectable', 'on');
		attr(d.looseIcon, 'draggable', 'false');
		//d.looseIcon.style.userSelect = 'none';
		attr(d.looseIcon,'src',options.fromIconRelPath);
		d.looseIcon.style.position = 'absolute';
		d.looseIcon.style.left = '0px'; //change later based on splat.looseIconYFraction etc
		d.looseIcon.style.top = '0px'; //change later based on splat.looseIconYFraction etc
		d.looseIcon.style.height = options.iconSize;
		d.looseIcon.style.width = options.iconSize;
		d.looseIcon.style.visibility = 'hidden';
		//this.updateDobIconsVisibility(false); //set looseIcon.style.visibility to 'visible' or 'hidden' and (TODO) maybe same for hardIcon
		//this.copyEventListenersIntoDob(d.looseIcon); //Without this, the icon waits to move until mouse goes outside the icon, so it looks jumpy.
		
		
		//line from an icon in the FROM splat to here (the TO splat), an icon in each.
		//TODO these might be possible to be the same splat, but for now 2022-10-30 the from and to cant be the same splat.
		d.dragLine = Pob('div', d.self);
		d.dragLine.style.width = options.dragLineThick+'px';
		d.dragLine.style.height = '20px'; //FIXME start as height 0
		d.dragLine.style.position = 'absolute';
		d.dragLine.style.left = '0px'; //change later based on splat.looseIconYFraction etc
		d.dragLine.style.top = '0px'; //change later based on splat.looseIconYFraction etc
		//d.dragLine.style.backgroundColor = 'blue'; //FIXME start as height 0
		d.dragLine.style.backgroundColor = whatColorShouldDragLineBe(); //FIXME start as height 0
		
		
		//displays left/up from the whole thing. FIXME this should just be left of prefix, so fix some dobs and css to do that in both horizontal and vertical cases.
		d.dropouterleft = Pob('div', d.self);
		
		d.table = Pob('table',d.self);
		//attr(d.table,'border',5);
		attr(d.table,'border',options.borderWidth);
		d.table.style.borderSpacing = '0px';
		d.rowa = Pob('tr', d.table);
		d.rowb = Pob('tr', d.table);
		d.rowc = Pob('tr', d.table);
		
		d.prefix = Pob('td', d.rowa); //upleft
		if(options.preventSelectOfTextCanvasEtc){
			d.prefix.style.userSelect = 'none'; //dont allow [ { ( etc to be selected by mouse, especially while dragging across it
		}
		d.prefix.style.verticalAlign = 'top';
		d.uprightTd = Pob('td', d.rowa); //upright (up mid, if using upfarright)
		attr(d.uprightTd,'rowspan',2); //rowa and rowb. In upright theres flex layout thats either horizontal or vertical, and has both childs and 3 drop areas etc
		d.upright = Pob('div',d.uprightTd); //cuz rowspan of 2 is interfering with flex layout, making other table cells down left of it too low.
		d.upright.style.display = 'flex';
		//flex-direction: row row-reverse column colum-reverse
		d.upright.style['flex-direction'] = 'column'; //https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
		//d.right2 = Pob('td', d.rowa); //if isOneLine, rowa is: prefix left right2 suffix2/upfarright
		//TODO rename upfarright to suffix2
		//d.upfarright = Pob('td', d.rowa); //upfarright, used if isOneLine, the suffix text goes here instead
		//d.upfarright.style.verticalAlign = 'top';
		
		d.suffixb = Pob('td', d.rowb); //left, mid height
		d.suffixb.style.verticalAlign = 'bottom';
		//d.downright = Pob('td', d.rowb); //downright (and colspan to go all the way to the right, under upright and under upfarright).
		//attr(d.downright,'colspan',2);
		//attr(d.downright,'colspan',3); //if isOneLine, rowa is: prefix left right2 suffix2. If not, its just prefix left and ignore the other 2
		
		d.suffixc = Pob('td', d.rowc); //whole rowc, on bottom. Used only if suffix is big, such as }#NameABC instead of }
		d.suffixc.style.verticalAlign = 'bottom';
		attr(d.suffixc,'colspan',2);
		
		
		d.dropleft = Pob('div', d.upright);
		d.left = Pob('div', d.upright);
		d.dropmid = Pob('div', d.upright);
		
		d.midfix = Pob('div', d.upright);
		
		d.literal = Pob('div', d.upright);
		if(options.preventSelectOfTextCanvasEtc){
			d.literal.style.userSelect = 'none'; //dont allow text or canvas etc to be selected by mouse, especially while dragging across it
		}
		d.right = Pob('div', d.upright);
		d.dropright = Pob('div', d.upright);
		
		d.suffixfarright = Pob('div', d.upright);
		if(options.preventSelectOfTextCanvasEtc){
			d.suffixfarright.style.userSelect = 'none'; //dont allow ] } ) etc to be selected by mouse, especially while dragging across it
		}
		
		
		for(let dobName in d){
			d[dobName].classList.add('wikib_'+dobName);
		}
	}
	
};

var options = {};

//Do or dont fold things like (D (GoO (OO a b) sum)) to display as a/b/sum$, else leave it as (D (GoO (OO a b) sum)).
//This is similar to (S a b) aka ((S a) b) being displayed as {a b} by folding/hiding the S and the inner ( and )
//and displaying the outer ( ) as { } instead.
//This OO stuff, which includes vm.ops.OO GoO DuGo DGo, will put "/" (OO and GoO) and "$" (D) and "^" (Du).
//FIXME this should not display that way if the childs are too big.
//FIXME as of 2023-3-27-2p this doesnt do anything, but i'm about to code it.
//options.foldOO = false;
options.foldOO = true;

//between 0 and 1, probably best for this to always be .5. Its the horizontal fraction that the left vs right
//side is dropped onto for metaInsert (metaInsertButton, which as of 2023-1-15 is the left mouse button)
options.leftRightSplit = .5;

//if true then deleting x in <x y z> returns <y z>. If false, it returns {y z}.
options.deletingFirstInSTListMovesTheTRightElseDeletesTheT = true;

options.do_mouseOverSplatToStringCode = true;

options.borderWidth = 0; //normal
//options.borderWidth = 10; //for testing. lets you see foldL etc.

//options.refillTimeAndMemoryEtcAfterEachDrop = true;
options.refillTimeAndMemoryEtcAfterEachDrop = false;

//options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13 = true;
options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13 = false;

//This is to help you not get confused when you drag and drop then it changes the shape of the tree,
//so its hard to see where you just dropped it without this.
//FIXME this is experimental 2023-1-1 and im first only implementing it for uiState.simpleDragUimode_cursor_splat (metaInsert, drag by mouseLeftButton).
options.highlightWhatWasJustDropped = true;

options.highlightWhatWasJustDropped_color = [255,255,255]; //red green blue

options.logTodos = false;

options.allowDragToAndFromSameSplat = true;
options.logNotDraggingToAndFromSameSplat = true;

//options.logMetaR = false;
options.logMetaR = true;

options.logDirectL = false;

options.logWidthAndWrappingStuff = false;

//options.logMetaInsert = false;
options.logMetaInsert = true;

options.logLm_TO_splat = true; //true for testing
//options.logLm_TO_splat = false; //normal

//for testing metaInsert (the cursor-like vertical line during drag) and want to know which splat is the TO.
options.alwaysDisplayToRectBorderIfExists = true; //for testing
//options.alwaysDisplayToRectBorderIfExists = false; //normal

options.allow_doDropCircMenu_afterClickWithoutDrag = true; //FIXME this needs redesign to make dobs.dragLine be an overlay/updateOverlays.

options.updateDragLineColorIn_updateOverlays_thisIsAnUglyHackTodoMoveDragLineToBeAnOverlay = true;

options.metaInsertDragLineColor = 'blue';
options.popupDragLineColor = 'green';

//A thin text-cursor-like line between 2 rectangles (fns) horizontally or vertically,
//inside a {...} or [...] or (...) such as {a b c d|e} or {a b|c d e} or {a b c d e|}.
//When I get this working, will turn this test_ off and just let it happen as needed
//in uiState.uimode==simpleDragUimode. This display will happen in updateOverlays.
options.test_alwaysDisplayWhere_simpleDragUimode_wouldInsertEvenIfNotDragging = true;
//options.test_alwaysDisplayWhere_simpleDragUimode_wouldInsertEvenIfNotDragging = false;

options.displayDragFromBorder = true;
options.displayDragToBorder = true;

//options.displayDragFromSurface = true; //dont need these anymore now that theres displayDragFromBorder/displayDragToBorder
options.displayDragFromSurface = false;
//options.displayDragToSurface = true;
options.displayDragToSurface = false;

//TODO have X (delete) and metaX (metaDelete) icons.
options.deleteKnowsAboutS2Etc = true; //delete considers that {...} and [...] etc, so adds or removes S and Infcur/[] etc as needed.
//options.deleteKnowsAboutS2Etc = false; //false, delete just replaces parent with the sibling, as each fn has 2 childs.

//options.dropCircMenuRadius = 45;
//options.dropCircMenuRadius = 56;
options.dropCircMenuIconSize = 25;

options.radiusOfMenu = {
	dropCircMenu: 56,
	//clickCircMenu: 35, //clickCircMenu has been merged into dropCircMenu as of 2022-12-30
};

options.blockRightClickPopup = true; //cuz mouseRightButton does clickCircMenu popup instead, inside rootDob.

//TODO optimize: this could be done faster with 1 instead of 2 calls of setSplit since each updates dobs.
//The 2 calls is first to put the right fns in from rootSplat downward. The second is to adjust
//isOneLine recursively based on options.maxWidth_for_forkTryMaxWidth_ofRoot. It would be potentially
//up to twice as fast to make the Split first and rootSplat.setSplit only once.
options.updateDisplayToWrap_afterEachDropCircMenuCommand = true;
//options.updateDisplayToWrap_afterEachDropCircMenuCommand = false;

//options.maxWidth_for_forkTryMaxWidth_ofRoot = 1200;
options.maxWidth_for_forkTryMaxWidth_ofRoot = 1000;
//options.maxWidth_for_forkTryMaxWidth_ofRoot = 2000;
//options.maxWidth_for_forkTryMaxWidth_ofRoot = 2200; //FIXME get from screen size, and adjust how its computed cuz its not predicting width well, and wasting horizontal space
//options.maxWidth_for_forkTryMaxWidth_ofRoot = 2500


//UPDATE: some of these are displayed in popup title when mouse hover, instead of where they say they're displayed.

//WARNING: when true, this makes it slow cuz does toString on fn at every rectangle for html popup title=,
//which includes inner fns in inner rects recursively. Makes it maybe 10 times slower when just 1/7 of screen filled.
//options.displayWholeTostringAtEachRect = true; //very slow
options.displayWholeTostringAtEachRect = false; //fast enough
if(options.displayWholeTostringAtEachRect) console.log('WARNING: options.displayWholeTostringAtEachRect is true, which is useful for finding bugs by hover mouse over things, but makes it very slow. TODO make it adjust the popupTitle when mouse goes over it instead of precomputing all of them, which would be faster but not as fast as turning this off completely.');


//options.displaySplateDetailExceptFnAtEachRect = true;
options.displaySplateDetailExceptFnAtEachRect = false;

//options.displayOnly_setSplit_inLiteral = true;
options.displayOnly_setSplit_inLiteral = false;
//options.display_isSelected_afterName = true;
options.display_isSelected_afterName = false;
options.displaySplatHeight = true;
//options.displaySplatHeight = false;

//options.alwaysShowDropDobs = true;
options.alwaysShowDropDobs = false;

//a path of L R L L R...
options.displaySplatPathFromRoot = true;
//options.displaySplatPathFromRoot = false;

options.displayVarargLists = true;
//options.displayVarargLists = false;

options.displayVarargS = true; //sCurryList. use with isFoldL.
//options.displayVarargS = false; //sCurryList. use with isFoldL.

options.displayVarargST = true; //<a b c> means {,a b c}. If true, display it as <...> if first in {...} is prefixed by T. (T x) is often written as ,x .

//options.displayDebugInfoAboutVarargS = true; //sCurryList. use with isFoldL.
options.displayDebugInfoAboutVarargS = false; //sCurryList. use with isFoldL.

options.displayVarargNormalCallPairs = true;
//options.displayVarargNormalCallPairs = false;


//foldT is like displayVarargS, displayVarargNormalCallPairs, and displayVarargLists, but its not vararg. It makes (T abc) appear as ,abc .
options.foldT = true;
//options.foldT = false;

//options.numlitPrefix = '&nbsp;NUMLIT:';
options.numlitPrefix = '';

//options.stringlitPrefix = '&nbsp;STRINGLIT:';
options.stringlitPrefix = '';

//options.namelitPrefix = '&nbsp;NAMELIT:';
options.namelitPrefix = '';

//options.cbtlitPrefix = '&nbsp;CBTLIT:0x';
options.cbtlitPrefix = '';

options.literalPrefix = '&nbsp;';

options.literalSuffix = '&nbsp;'; //add space cuz div didnt pad enough space on right side compared to the other 3 sides.

//affects splate.isOneLine. this is for testing.
//options.displayAllAsOneLine = true;
options.displayAllAsOneLine = false;

//overpowers options.displayAllAsOneLine. this is for testingt.
//options.displayAllAsOneLineRandomlyTrueOrFalsePerBranch = true;
options.displayAllAsOneLineRandomlyTrueOrFalsePerBranch = false;

//this is for testing.
//has no effect if options.displayAllAsOneLine since its an experiment in varying isOneLine per branch based on its width
options.do_forkTryMaxWidth_experimentOnWindowLoad = true;
//options.do_forkTryMaxWidth_experimentOnWindowLoad = false;

//options.testActionOnWindowLoad = true;
options.testActionOnWindowLoad = false;

options.displayEstimateWidth = true;
//options.displayEstimateWidth = false;

//options.estimatedFontWidth = 10; //pixels
//options.estimatedFontWidth = 10; //pixels
options.estimatedFontWidth = 8; //pixels

//options.fillDropDobWithTestWhenNearestToMouse = true;
options.fillDropDobWithTestWhenNearestToMouse = false;

options.simple_setSelSplat_ofWhateverDobMouseTouches = true;
//options.simple_setSelSplat_ofWhateverDobMouseTouches = false;

//options.simple_randomizeColor_ofWhateverDobMouseTouches = true;
options.simple_randomizeColor_ofWhateverDobMouseTouches = false;

options.fromIconRelPath = 'pic/from_transparent.png';

//options.iconSize = '16px';
//options.iconSize = '8px';
//options.iconSize = '12px';
options.iconSize = 12;

options.dragLineThick = 3; //px

//if true, moves splat.dobs.looseIcon to where mouse is (not the recursive parent of parent thing (yet?)).
//WARNING this can interfere with dragging. should probably stop using this as of 2022-10-30 or soon after,
//as I'm about to make the main drag code.
//I put code in for that "if(options.doMainDragging) options.basicTestOfLooseIconWhenMouseMoves = false;".
//options.basicTestOfLooseIconWhenMouseMoves = true;
options.basicTestOfLooseIconWhenMouseMoves = false;

options.doMainDragging = true;
//options.doMainDragging = false;
if(options.doMainDragging) options.basicTestOfLooseIconWhenMouseMoves = false;

//If true, uses splitA.eq(splitB) and splitA.splate.eq(splitB.splate) and splitA.leftSplit.eq(splitB.leftSplit) etc,
//which uses split.bigHash() and splate.bigHash() to compare them by sha256,
//and if they're equal (even if not by ===) then dont update those parts of splat.dobs.
//TODO as of 2022-10-22 this is only checking splitA.eq(splitB) so is updating height number of parents unnecessarily
//despite their splates are equal, when update a splate somewhere in the tree, from there up to rootSplat.
options.optimizeUIByDedupSplit = true;
//options.optimizeUIByDedupSplit = false;

//See SplatFxFy
//options.fractionRecurse = .4;
options.fractionRecurse = .5;
//options.fractionRecurse = 1; //1 disables fractionRecursing except maybe for rightmost pixel in a rect.
//options.fractionRecurse = 2; //1 disables fractionRecursing except maybe for rightmost pixel in a rect.

//used with options.fractionRecurse
options.screenYXToSplatfyfx_randomizesColorOfSplatItSelects = true;
//options.screenYXToSplatfyfx_randomizesColorOfSplatItSelects = false;

//This is probably not the best way to put a small extra space under everything,
//but its how I figured out how to remove that extra space, by removing inline-block on splat.self.dob.style['inline-block'],
//then I added this option and set it to false to remove that space. Made the whole thing take about 1/3 as much vertical space
//cuz its so much stuff inside of stuff recursively the few pixels of extra space each adds up.
//options.putSmallExtraSpaceUnderEverything = true;
options.putSmallExtraSpaceUnderEverything = false;

//prevent selecting of text (and canvas etc) especially while dragging other stuff across it
options.preventSelectOfTextCanvasEtc = true;
//options.preventSelectOfTextCanvasEtc = false;

options.screenYXToSplatfyfx_isReversedAndAtMostOneParentDeep = true;
//options.screenYXToSplatfyfx_isReversedAndAtMostOneParentDeep = false;

//This is an alternative to [screenYXToSplatfyfx_isReversedAndAtMostOneParentDeep, or the n parents deep way].
//This has the advantage that the cursor/looseIcon doesnt jump around, is always where the mouse cursor is,
//while can still select every rect displayed and its parent, somewhere on screen.
options.screenYXToSplatfyfx_topIsSelfAndIfRightThenBottomIsParent = true;
//options.screenYXToSplatfyfx_topIsSelfAndIfRightThenBottomIsParent = false;

if(options.screenYXToSplatfyfx_topIsSelfAndIfRightThenBottomIsParent){
	options.screenYXToSplatfyfx_isReversedAndAtMostOneParentDeep = false;
}


/*
Splat.prototype.displayLocal = function(){
	console.log('Splat displayLocal this='+this);
	if(!this.dobs.self) throw 'No self dob';
	this.updateSelfDivStyle();
	let syty = this.splate.syty;
	if(this.splate.isDisplayPushAndPopChars){
		if(syty == 'U'){
			throw 'Dont look into the fractal (L U (R U))->U, isDisplayPushAndPopChars should be false and isDisplayName true and name should be U.';
		}
		let prefix = sytyToPushChar(syty);
		let suffix = sytyToPopChar(syty);
		//let prefix = syty=='U' ? '' : sytyToPushChar(syty);
		//let suffix = syty=='U' ? '' : sytyToPopChar(syty);
		//if(syty=='U' && !this.splate.isDisplayName){
		//	throw 'Must display name if its U
		//}
		if(this.splate.isDisplayName){
			//suffix += '#TODONAMEHERE';
			suffix += '#'+this.splate.name();
		}
		if(options.displayWholeTostringAtEachRect){
			suffix += '__'+this.splate.fn;
		}
		if(options.displaySplateDetailExceptFnAtEachRect){
			suffix += '__'+this.splate.toStringExceptFn();
		}
		suffix += '__isSelected='+this.isSelected();
		this.dobs.prefix.innerHTML = prefix;
		this.dobs.suffix.innerHTML = suffix;
	}else{
		if(syty == 'U'){
			if(!this.splate.isDisplayName){
				throw 'Must isDisplayName for leaf/U';
			}
		}
	}
};*/

Splat.prototype.toString = function(){
	return '[Splat splate='+this.splate()+' isSelected='+this.isSelected()+']';
};

/*
Splat.prototype.removeDobsExceptSelf = function(){
	for(let dobName in this.dobs){
		if(dobName !== 'self'){
			this.dobs[dobName].remove(); //remove from dom tree
			delete this.dobs[dobName];
		}
	}
};

Splat.prototype.removeDobs = function(){
	for(let dobName in this.dobs){
		this.dobs[dobName].remove(); //remove from dom tree
		delete this.dobs[dobName];
	}
};

Splat.prototype.displayIn = function(dob){
	if(!dob) throw 'No param dob';

	//TODO merge duplicate code between displayIn and displayLocal

	console.log('Splat displayIn '+dob);
	const ThisSplat = this;
	if(this.dobs.self != dob){
		console.log('Splat replacing its dobs');
		dob.innerHTML = '';
		dob.addEventListener(
			'click',
			function(event){
				//console.log('click '+ThisSplat);
				//requestAnimationFrame(function(){
					//console.log('ThisSplat_isRoot='+(ThisSplat===rootSplat));
					setSelSplat(ThisSplat);
				//});
				event.stopPropagation();
			}
		);
		this.removeDobs();
		this.dobs.self = dob;
		this.createDobsIfNotExist();
		this.displayLocal();
	}
	if(this.splate.isOpen){
		//if(this.leftSplat){
			console.log('Splat displaying left child');
			//this.leftSplat.displayIn(this.dobs.left);
			this.L().displayIn(this.dobs.left);
		//}
		//if(this.rightSplat){
			console.log('Splat displaying right child');
			//this.rightSplat.displayIn(this.dobs.right);
			this.R().displayIn(this.dobs.right);
		//}
	}
};
*/

Splat.prototype.isSelected = function(){
	return this.splate().isSelected;
	//return this===selSplat;
};


//a split is a view of a fn/lambda and its 2 child fn/lambdas, with each child being open or closed.
//a split is immutable. If its a view of U (leaf aka the universal combinator) or of a literal then childs wont be displayed.
//
//FIXME make it a fractal, not a tree.
//Making a drag-and-drop tree UI for #wikibinator. Each branch is a javascript lambda (useable on browser console
//or by drag and drop). But its not actually a tree. Its a fractal. Without exception, every branch has 2 child branches,
//that when called on eachother return the parent.
//
//The first n fns in a [] {} () <> can be viewed as closed, and just {} call that closed localId on those after the first n,
//but those would be different Splits.
/*
var Split = function(fn, leftOpen, rightOpen, literalOpen){
	this.fn = fn;
	//There can be multiple Splits for same fn since they can view it diff ways.
	this.leftSplit = null; //TODO a Split for L(this.fn)
	this.rightSplit = null; //TODO a Split for R(this.fn).
	this.leftOpen = leftOpen;
	this.rightOpen = rightOpen;
	this.literalOpen = literalOpen;
	
	//map of string to dob (dom object)
	this.dobs = {};
	
	FIXME should it be selfOpen instead of leftOpen and rightOpen?
	
	FIXME should Split know about height and width sizes recursively? Or leave that to Branch?
	
	TODO should Split have isOneLine var?
	
	TODO use vm.ParseTree to get syty (syntax type) of this.fn.
	
	TODO when start dragging with mouse, it should grab a Split, not a Branch?
};*/

console.log(`FIXME add all state thats in splat and selSplat etc, including:
	isSelected, and some form of color.
	Use splate as immutable, and add a Splat.setSpit(split) func that instantly updates dobs.
	and I want a splat editor.
	then make all parts of code appear.
	then fix the display so its like (	(	{	[.
	then add drag and drop.`);

//Splate is local SPLat and SPLit stATE (Split is immutable so has only 1) not including its childs.
//Renaming ViewType to Splate.
//
//(todo use as immutable) all the options for a splat and (if open) its 2 splat childs,
//including bit for is this splat open/closed, display as childs vs literal, css-like options, etc.
//A fn can be part of an immutable splate cuz (other than some internal optimizations)
//its an immutable (lazy-deduped, multi fn objects of same shape but different 128 bit localId) forest shape
//where all paths lead to U/Wikibinator203/TheUniversalCombinator.
//
//isFoldL is only true if isDisplayChilds. It displays only the right child and displays nothing or nearly nothing else, as if self is its own right child.
//
//
/*
2022-10-21 PLANNED SOLUTION[
"A fraction, such as .4, of the left space on a rect means that rect/splat itself. .4 of whats left (right of that) is parent of that rect, and so on recursively. Within each such subrect, the angle from center of subrect chooses which action (such as 4 actions being on the corners. TODO build that." -- findFastestWayToSelectASplat.

DO this, add these fields to split:
* isDisplayIcon
* looseIconYFraction //loose icon can move anywhere in the rect smoothly, depending on mouse in some child or self.
* looseIconXFraction
* linePath //something like 'UUUULRLL', or '' if none. If this doesnt select a displayed splat then the line doesnt appear.
...
* hardIconXFraction() //hard icon is normally on 1 of the corners (if directL directR metaL metaR) or center (if FROM). Its derived from looseIcon position, whichever of those is nearest, so maybe it should be a function instead of a field.
* hardIconYFraction()
* iconType() //can be 'none', 'directL', 'directR', 'metaL', 'metaR', 'fromAkaCenter', etc.
...
Add dobs to splat for all that: 2 icons, 1 div for an angled line, and 1 partly transparent overlay div.
]
dragStep is 'no' (not dragging, not displaying the icon where it would drag if mousedown),
'wouldFrom' (displaying the icon where it would drag if mousedown next),
'from' (icon here is at constant position, mouse is down, looking for what splat to drag to, where another icon will be displayed),
'wouldTo' (second splat (or possibly could be same splat from and to) is displaying an icon that follows mouse, where it would drag to if release mouse button, line between from and wouldTo),
'to' (the from and to splats and icons are decided, ready to do the drag, which causes lambda called on lambda finds/creates lambda, then all dragSteps become 'no' again).
*/
var Splate = function(fn, syty, isOpen, isOneLine, isLiteral, isDisplayName, isDisplayPushAndPopChars, isDisplayChilds,
		isFoldL, isFoldLL, isUnary, isShowDropDobs, isSelected, red, green, blue,
		isDisplayIcon, looseIconYFraction, looseIconXFraction, linePath, dragStep){

	
	if(!vm.isLambda(fn)) throw 'Not a Wikibinator203 lambda: '+fn;
	this.fn = fn;

	if(!syty) throw 'No syty';
	//of what vm.ParseTree would compute syty of a fn. syty is a small string,
	//a syntax type (like in an AST node in parsing, but in the prototype VM thats vm.View)
	//This is instead of split.dity, but some values of dity (such as 'literal')
	//are not syty's so need more vars for them in ViewType.
	this.syty = syty;
	
	this.isOpen = !!isOpen;
	
	this.isOneLine = !!isOneLine;
	
	//TODO can (but careful of content types that can create infinite loops
	//crashing the browser tab, and of types that would be tried to save-as/download (popup)
	//executable file types, cuz fns can in theory make all possible file types and offer for download,
	//all from browser memory without files first existing on a drive)
	//...can display various file types in an iframe andOr img src= etc in the splat tree,
	//but put some checkboxes andOr warnings about downloading such files at time they're offered for download.
	//Such downloads are outside the sandbox as soon as they're named something other than .wikib
	//or .wikibinator203 or something like that (TODO choose file extensions .what to store lambdas).
	this.isLiteral = !!isLiteral;
	
	//Should the prefix dob display something like ]#NameXYZ or 3.141592653589793#Pi64 ?
	//#Names start with A-Z (1 char) but other than that can have any unicode symbols except whitespace []{}()<> etc.
	//Most strings other than that are themself as a stringLiteral such as hello in [hello world].
	//If it starts with 0-9 etc its a double literal.
	//TODO move some comments to isLiteral.
	//Most fns never have a name. Names are local to a VM and dont affect 256/512 bit globalIds or 128 bit localIds.
	//TODO name can be generated (choose random string starting with 1 char A-Z).
	//Name of a fn is different than the "var names" in loops, if/else, fork/kernel n ways, etc.
	//Those "var names" are normally string literals such as x y z こんにちは世界 etc.
	//Technically any fn can be such a "var name", even if its 1 of the exact values of pi (fn of digit index to digit),
	//but it seems more useful for names to be small strings.
	this.isDisplayName = !!isDisplayName;
	
	this.isDisplayPushAndPopChars = !!isDisplayPushAndPopChars;
	
	this.isDisplayChilds = !!isDisplayChilds;
	
	this.isFoldL = !!isFoldL;
	if(isFoldL && !isDisplayChilds) throw 'can only isFoldL if isDisplayChilds';
	
	//isFoldLL means that left child should isFoldL.
	//Used with the a/b/c/sum$ (for example) syntax which means (DGo (GoO (GoO (OO a b) c) sum)).
	//Without isFoldLL, it would display the GoO and OO, instead of just a b c and sum and $/DGo.
	//(OO a b) aka ((OO a) b) displays as a/b. ((OO a) b) should have isFoldLL of true. (OO a) should have isFoldL of true.
	//FIXME maybe should commentout code like this a few places, cuz dont want to regenerate the isFoldL if forkEdit the isDisplayChilds.
	//... if(isFoldL && !isDisplayChilds) throw 'can only isFoldL if isDisplayChilds';
	this.isFoldLL = !!isFoldLL;
	
	this.isUnary = !!isUnary;
	if(isUnary && !isDisplayChilds) throw 'can only isUnary if isDisplayChilds';
	
	this.isShowDropDobs = !!isShowDropDobs;
	
	//get name from this.fn.n.nameEtc() which can be this.fn.n.localName or this.fn.n.locid(),
	//but you can only change this.fn.n.localName, and changing it might contradict the immutable design of Splate
	//and if so maybe Splate should be redesigned to have a name field. isDisplayName still chooses to display it or not.
	//In most fns/lambdas, name is not displayed. Its only displayed if need it to show 2 fns equal
	//or for a Human or AI to remember that fn.
	
	this.isSelected = !!isSelected;
	
	this.red = red;
	this.green = green;
	this.blue = blue;
	
	this.isDisplayIcon = !!isDisplayIcon;
	this.looseIconYFraction = between(0, looseIconYFraction||0, 1); //loose icon can move anywhere in the rect smoothly, depending on mouse in some child or self.
	this.looseIconXFraction = between(0, looseIconXFraction||0, 1);
	
	//2022-12-29 linePath isnt used in splate. Instead, you get where line is from and to by searching the tree for splate.dragStep.
	this.linePath = linePath || ''; //something like 'UUUULRLL', or '' if none. If this doesnt select a displayed splat then the line doesnt appear.
	
	//this.dragStep = dragStep || 'no';
	this.dragStep = 'TODORemoveDragStepFromSplate';
	
};

var getSplit = (splate, leftSplit, rightSplit, optionalAction)=>{
	//TODO? dedup by aSplit.bigHash()? For now just return a new one and compare with aSplit.eq(split) which uses bigHash.
	return new Split(splate, leftSplit, rightSplit, optionalAction||null);
};


//perfect dedup of UI parts (not perfect deduping fn which is still using locid (128 bit localId) so only dedups by that)
//caches it the first time. Returns a text view of the contents, but not deeper into fn than its 128 bit localId.
Splate.prototype.bigHash = function(){
	return '[Splate_'+this.fn.n.locid()+'_'+this.syty+'_'+(this.isOpen?'O':'o')+(this.isOneLine?'L':'l')+(this.isLiteral?'I':'i')+
		(this.isDisplayName?'N':'n')+(this.isDisplayPushAndPopChars?'P':'p')+(this.isDisplayChilds?'C':'c')+(this.isFoldL?'S':'s')+(this.isFoldLL?'S':'s')+
		(this.isUnary?'T':'t')+(this.isSelected?'S':'s')+'_R'+this.red+'_G'+this.green+'_B'+this.blue+
		(this.isDisplayIcon?'I':'i')+('Iy'+this.looseIconYFraction)+('Ix'+this.looseIconXFraction)+('Path'+this.linePath)+('Ds'+this.dragStep)+']';
};

//compare splate to splate only.
Splate.prototype.eq = function(splate){
	return this.bigHash()==splate.bigHash();
};

//forkEdit. You probably should change syty and maybe some other things too if you change fn.
Splate.prototype.setFn = function(fn){
	//Many (but not all) fn that are equal match this way, and none that are not equal match this way. See some equals
	//function (TODO what was it called) in vm? But since this is just an optimization, dont need that.
	if(this.fn === fn) return this;
	let ret = this.copy();
	ret.fn = fn;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setSyty = function(syty){
	if(this.syty === syty) return this;
	let ret = this.copy();
	ret.syty = syty;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsOpen = function(isOpen){
	if(this.isOpen === isOpen) return this;
	let ret = this.copy();
	ret.isOpen = !!isOpen;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsOneLine = function(isOneLine){
	if(this.isOneLine === isOneLine) return this;
	let ret = this.copy();
	ret.isOneLine = !!isOneLine;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsLiteral = function(isLiteral){
	if(this.isLiteral === isLiteral) return this;
	let ret = this.copy();
	ret.isLiteral = !!isLiteral;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsDisplayName = function(isDisplayName){
	if(this.isDisplayName === isDisplayName) return this;
	let ret = this.copy();
	ret.isDisplayName = !!isDisplayName;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsDisplayPushAndPopChars = function(isDisplayPushAndPopChars){
	if(this.isDisplayPushAndPopChars === isDisplayPushAndPopChars) return this;
	let ret = this.copy();
	ret.isDisplayPushAndPopChars = !!isDisplayPushAndPopChars;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsDisplayChilds = function(isDisplayChilds){
	if(this.isDisplayChilds === isDisplayChilds) return this;
	let ret = this.copy();
	ret.isDisplayChilds = !!isDisplayChilds;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsFoldL = function(isFoldL){
	if(this.isFoldL === isFoldL) return this;
	let ret = this.copy();
	ret.isFoldL = !!isFoldL;
	if(ret.isFoldL && !ret.isDisplayChilds) throw 'can only isFoldL if isDisplayChilds, splate='+ret;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsFoldLL = function(isFoldLL){
	if(this.isFoldLL === isFoldLL) return this;
	let ret = this.copy();
	ret.isFoldLL = !!isFoldLL;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsUnary = function(isUnary){
	if(this.isUnary === isUnary) return this;
	let ret = this.copy();
	ret.isUnary = !!isUnary;
	if(ret.isUnary && !ret.isDisplayChilds) throw 'can only isUnary if isDisplayChilds, splate='+ret;
	delete ret.bigHash_;
	return ret;
};


//forkEdit
Splate.prototype.setIsSelected = function(isSelected){
	if(this.isSelected === isSelected) return this;
	let ret = this.copy();
	ret.isSelected = !!isSelected;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setRed = function(red){
	if(this.red === red) return this;
	let ret = this.copy();
	ret.red = red;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setGreen = function(green){
	if(this.green === green) return this;
	let ret = this.copy();
	ret.green = green;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setBlue = function(blue){
	if(this.blue === blue) return this;
	let ret = this.copy();
	ret.blue = blue;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setRGB = function(red, green, blue){
	if(this.red===red && this.green===green && this.blue===blue) return this;
	let ret = this.copy();
	ret.red = red;
	ret.green = green;
	ret.blue = blue;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setIsDisplayIcon = function(isDisplayIcon){
	if(this.isDisplayIcon === isDisplayIcon) return this;
	let ret = this.copy();
	ret.isDisplayIcon = !!isDisplayIcon;
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setLooseIconYFraction = function(looseIconYFraction){
	if(this.looseIconYFraction === looseIconYFraction) return this;
	let ret = this.copy();
	ret.looseIconYFraction = between(0,looseIconYFraction||0,1);
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setLooseIconXFraction = function(looseIconXFraction){
	if(this.looseIconXFraction === looseIconXFraction) return this;
	let ret = this.copy();
	ret.looseIconXFraction = between(0,looseIconXFraction||0,1);
	delete ret.bigHash_;
	return ret;
};

//forkEdit
Splate.prototype.setLinePath = function(linePath){
	if(this.linePath === linePath) return this;
	let ret = this.copy();
	ret.linePath = linePath;
	delete ret.bigHash_;
	return ret;
};


//UPDATE 2023-1, moving dragStep etc into uiState, not in Splat or Splate anymore, but until finish that, leave it in Splate too.
//forkEdit
Splate.prototype.setDragStep = function(dragStep){
	if(this.dragStep === dragStep) return this;
	let ret = this.copy();
	ret.dragStep = dragStep;
	delete ret.bigHash_;
	return ret;
};


Splate.prototype.toString = function(){
	return this.toStringExceptFn()+'__fn='+this.fn;
};


//The "except fn" part is cuz displaying a fn could be very big.
Splate.prototype.toStringExceptFn = function(){
	return '[Splate syty='+this.syty+' isOpen='+this.isOpen+' isOneLine='+this.isOneLine+' isLiteral='+this.isLiteral+' isDisplayPushAndPopChars='+this.isDisplayPushAndPopChars+' isDisplayChilds='+this.isDisplayChilds+' isFoldL='+this.isFoldL+' isUnary='+this.isUnary+' isDisplayName='+this.isDisplayName+' name='+this.name()+' isDisplayIcon='+this.isDisplayIcon+' looseIconYFraction='+this.looseIconYFraction+' looseIconXFraction='+this.looseIconXFraction+' linePath='+this.linePath+' dragStep='+this.dragStep+']';
};

//if you call .name, it starts with A-Z (then any unicode chars) or Λ (locid). Locid is a 128 bit id created when the fn is created, but its string form is lazyEvaled.
//If its locid, then user hasnt given it a name. Doesnt trigger lazyeval of that string.
var nameOfFnIsLocid = fn=>fn.n.nameEtc_isLocid();

Splate.prototype.name = function(){
	return this.fn.n.nameEtc();
};

//throws unless vm.isValidLocalName(name)
Splate.prototype.setName = function(name){
	if(!vm.isValidLocalName(name)) throw 'Invalid localName['+name+']';
	this.fn.n.localName = name;
};

//UPDATE: js {} map of fn.n.locid() to {...various stuff about displaying that fn...}.
//
//OLD fnMeta_ comment:
//metadata/stuff about a fn, used in displaying it,
//especially remembering which Splates are views of a given fn.
//Its a Map (not a {}) of fn to {}. Map is slower than {} but can use any object as key.
//TODO optimize by using fn.n.locid() as key instead (but in vm theres only vm.cp(fn,fn)
//(which dedups by 2 locids (blobFrom blobTo idA idB, 2 of each of those), not 1 localid)?
//var fnMeta_ = new Map();
//I'm doing it by locid for speed (TODO verify its faster) and putting the fn in the val.
var fnMeta_ = {};

//Example: fnMeta(U(U(U))).numOpenSplates
//FIXME I'm trying to put all state into Split, so this should be used to choose what Splits to make, not as part of state.
var fnMeta = fn=>{
	//let ret = fnMeta.get(fn);
	let key = fn.n.locid();
	let ret = fnMeta_[key];
	if(!ret){
		ret = {
			//FIXME splat should adjust this when created and when splat is removed.
			//This is in rootSplat and dragSplat and everything reachable from them, FIXME should it only be rootSplat?
			numOpenNamedSplats: 0,
			
			//splates: [], //FIXME might need to use a treemap here (sorted by some arbitrary number in Splate, add that) if this list gets too big
			fn: fn,
		};
		//fnMeta_.set(fn,ret);
		fnMeta_[key] = ret;
	}
	return ret;
};


//FIXME you shouldnt need to copy a Splate since it should be used as immutable,
//but in this early prototype of the UI I'm modifying vars in it cuz forkEditing it isnt working yet.
Splate.prototype.copy = function(){
	return new Splate(this.fn, this.syty, this.isOpen, this.isOneLine, this.isLiteral, this.isDisplayName, this.isDisplayPushAndPopChars,
		this.isDisplayChilds, this.isFoldL, this.isFoldLL, this.isUnary, this.isShowDropDobs, this.isSelected, this.red, this.green, this.blue,
		this.isDisplayIcon, this.looseIconYFraction, this.looseIconXFraction, this.linePath, this.dragStep);
};


/*
//makes a Splate of left child of fn, with everything open except if its U then closed.
//Normally you'll want to create a custom Splate, for custom ways to display it, but this is just to get started fast.
Splate.prototype.simpleLeftSplate = function(){
	return this.simpleLeftOrRightSplate(false);
};

Splate.prototype.simpleRightSplate = function(){
	return this.simpleLeftOrRightSplate(true);
};

Splate.prototype.simpleLeftOrRightSplate = function(isRight){
	if(this.fn.n.isLeaf()){
		return defaultSplate.copy(); //FIXME shouldnt need to copy, cuz should use as immutable.
	}else{
		
		let fn = (this.fn.n)[isRight ? 'R' : 'L']();
		let syty = fnToSyty(fn);
		let numOpenNamedSplats = fnMeta(this.fn).numOpenNamedSplats; //set by Splat, not by Splate.
		//FIXME what if forkEditing a Splate leaves that as 1 so !isOpen cuz a variant of itself is open that is about to be removed?
		let isOpen = numOpenNamedSplats===0;
		//let isDisplayName = false;
		let isDisplayName = true; //FIXME
		let isOneLine = true;
		let isLiteral = false;
		let isDisplayPushAndPopChars = !this.fn.n.isLeaf();
		//let isShowDropDobs = isOpen;
		let isShowDropDobs = false;
		let isSelected = false;
		//FIXME dont use random
		return new Splate(fn, syty, isOpen, isOneLine, isLiteral, isDisplayName, isDisplayPushAndPopChars, isShowDropDobs, isSelected, randRed(), randGreen(), randBlue());
	}
};
*/

//var randRed = ()=>(.45+.55*Math.random());
var randRed = ()=>(.55+.45*Math.random());
var randGreen = randRed;
var randBlue = randRed;

var Action = function(split, dobName, action){
	this.split = split; //Split
	this.dobName = dobName; //string
	this.action = action; //string
};

Action.prototype.toString = function(){
	return this.bigHash();
};

Action.prototype.bigHash = function(){
	if(!this.bigHash_) this.bigHash_ = '[Action_S'+this.split.bigHash()+'_D'+this.dobName+'_A'+this.action+']';
	return this.bigHash_;
};

Action.prototype.eq = function(action){
	return this.bigHash()==action.bigHash();
};

//all 3 params are optional
//TODO write new description now that theres both Split and Splat (old Split code was divided into that).
//var Split = function(fn, leftSplit, rightSplit, displayType, isOneLine){
//Renaming ViewType to Splate.
//
//optionalAction is a {split: aSplit, dobName: 'dropmid', action: 'dragging'} or action: 'drop', or action: 'deleteMe'.
//Its a way to display a split thats being dragged, or after dragging, or to mark this split as to be deleted on a soon forkEdit.
//If theres no action, then just displays as usual without involving dropleft dropmid dropright etc.
//TODO should Action be a class instead of a {}?
//
var Split = function(splate, leftSplit, rightSplit, optionalAction){

	this.splate = splate ? splate : defaultSplate.copy(); //FIXME shouldnt need to copy, cuz should use as immutable.
	
	//There can be 0 or more parents of Split cuz its an immutable forest, unlike Splaat which is a mutable tree.
	//Split therefore only knows its childs, down to whichever are viewed as closed (by #Name or localId or globalId).
	//A Split is itself open or closed
	this.leftSplit = leftSplit || null;
	this.rightSplit = rightSplit || null;
	
	//TODO
	this.action = optionalAction || null;
	
	
	/*
	//TODO How this Split is displayed depends on this.parentSplit.dity,
	//like parentSyty is used in in vm.ParseTree, vm.eval, etc.
	//fns/lambdas have no parent, but Splits do. Splits are a tree and not a forest. fns are both.
	this.parentSplit = parentSplit;
	this.leftSplit = leftSplit;
	this.rightSplit = rightSplit; throw 'TODO';
	*/
	
	
	/*FIXME how can Split be immutable and tell all 3 at once: parent, left, and right splits?
		And is there lazyEval of creating left and right Split childs when observed,
			cuz without that how would you look deeper into a very big forest of fns viewed by Splits?
	...
	I basically want forkEditable maps of fn to displayParams, except the fns can be duplicated,
	so maybe key is fn_with_arbitraryNumber?
	No, the map should use a fn and l l l r l r r l paths in it as key.
	I can make forkEditable treemaps, but the problem seems to be I want to be able to expand it on both ends,
	the parent direction and the childs direction.
	Need to copy these trees of Split and keep which parts are open/closed in the copy,
	make variants, mix them in various combos, etc.
	
	Here's the design (closer to it, todo keep fixing this...):
	A leaf Split is a closed view of a fn. A split can be made of any 2 Splits or be a leaf.
	Opening such a closed Split requires forkEdit all the way up the immutable tree of Split,
	which requires updating display of everything changed during that,
	but FIXME... FIXME... A dob cant have 2 parents, so either need to use immutable graphics,
	such as tree of y10x10rgb12 voxels with offset per branch, or make new dobs in the whole tree with each change.
	
	Pics as canvas bytes need to be cached somehow.
	Maybe fn.n.blob is a good enough cache, being the canvas bytes directly in some cases.
	I dont want to replace text on screen after every open/close, cuz it might interfere with which text is selected,
	but on the other hand you wont be actively using the text selection when you're opening/closing something.
	
	SOLUTION: Fixing this by dividing Split into 2 classes: Split (immutable, up from any closed leafs),
	and Splat (mutable, has dom nodes). Split.prototype.displayIn(Splat) fills in those dom nodes,
	and removes some dom nodes if they're no longer used.
	Split can share branches and is a forest (like fn). Split might be made of fns later (TODO?).
	Splat is a tree and cant share branches.
	A split is dragged from any part of Splat to any part of Splat.
	*/
	
	
	//'literal', 'localId', 'localName', 'hidden', or syty of fn, and maybe a few other possible values.
	//TODO choose shorter names for those such as 'lit' instead of literal.
	//This chooses if its displayed as open or closed, and if open then as canvas bytes, text, [], {}, (), <>, etc.
	//vm.ParseTree can give syty of a fn.
	////this.dity = displayType;
	
	////this.isOneLine = isOneLine;
	
	//FIXME where do height and width in pixels go for canvas bytes literal?
	
	//Moving this to Splat, so Split can be immutable forest, and Splat can be mutable tree with dom nodes.
	//map of string to dob (dom object)
	//this.dobs = {};
};

/*
//in pixels. doesnt have to be displayed. This is for use with isOneLine etc for first n childs in a []{}().
Split.prototype.estimateWidth = function(includeChildsIfExist){
	//cached from earlier call. Can do that cuz Split and Splate are used as immutable,
	//except for fn #LocalNames which are mutable but dont affect fn ids.
	if(includeChildsIfExist){
		if(this.estimateWidthWithChilds_ !== undefined) return this.estimateWidthWithChilds_;
	}else{
		if(this.estimateWidthWithoutChilds_ !== undefined) return this.estimateWidthWithoutChilds_;
	}
	let est = 0;
	if(this.splate.isLiteral){
		//FIXME better estimate literal size (could be 2.34 helloworld canvasbytes etc). Just making something up for now...
		let badlyEstimatedLiteralSize = options.estimatedFontWidth*8;
		est += badlyEstimatedLiteralSize;
	}else{
		if(this.splate.isOneLine){
			est += options.estimatedFontWidth*2; //{ and a later }, or [ and a later ], etc.
		}else{
			est += options.estimatedFontWidth*tabSizeInSpaces; //"{   " or "[   " etc.
		}
		if(this.splate.isOpen && this.leftSplit && this.rightSplit){
			if(this.splate.isFoldL){ //foldL means dont display left child (probably cuz prefix/suffix implies it. left child might be T or S)
				est += this.rightSplit.estimateWidth(includeChildsIfExist);
			}else{
				if(includeChildsIfExist){
					if(this.splate.isOneLine){
						est += this.leftSplit.estimateWidth(includeChildsIfExist)+this.rightSplit.estimateWidth(includeChildsIfExist);
					}else{
						est += Math.max(this.leftSplit.estimateWidth(includeChildsIfExist),this.rightSplit.estimateWidth(includeChildsIfExist));
					}
				}
			}
		}else{ //closed
			let nameSizeInChars = this.splate.name().length; //FIXME should this lazyeval of name be triggered?
			est += options.estimatedFontWidth*nameSizeInChars; //FIXME what does a closed branch look like? Just its name?
		}
	}
	if(includeChildsIfExist){
		this.estimateWidthWithChilds_ = est;
	}else{
		this.estimateWidthWithoutChilds_ = est;
	}
	return est;
};
*/

Split.prototype.isDisplayL = function(){
	let splate = this.splate;
	return splate.isOpen && this.leftSplit && !splate.isFoldL && !splate.isLiteral; //FIXME what if !isOpen and isLiteral?
};

Split.prototype.isDisplayR = function(){
	let splate = this.splate;
	return splate.isOpen && this.rightSplit && !splate.isLiteral; //FIXME what if !isOpen and isLiteral?
};

/*
//clear caches, rebuild splats, and update screen.
//This is for testing if there are bugs in splat.dobs and splat.leftSplat and splat.rightSplat etc.
//Normally you would just use setSplit and it updates automatically without any old versions of things
//remaining from cache but still uses cache as optimization.
var forceUpdateScreen = ()=>{
	//rootSplat.forAllSplat(splat=>{delete splat.bigHash_;});
	//rootSplat.deleteChildSplats();
	//delete rootSplat.bigHash_;
	//rootSplat.setSplit
	rootSplat.setSplit(getSplit
};*/
var forceUpdateDisplay = ()=>setRootFnAndForceUpdateDisplay(rootSplat.splate().fn);

Splat.prototype.forAllSplat = function(callOnSplat){
	callOnSplat(this);
	if(this.leftSplat){
		this.leftSplat.forAllSplat(callOnSplat);
	}
	if(this.rightSplat){
		this.rightSplat.forAllSplat(callOnSplat);
	}
};

Splat.prototype.isDisplayL = function(){
	return this.split.isDisplayL();
};

Splat.prototype.isDisplayR = function(){
	return this.split.isDisplayR();
};

//only computes it the first time.
//To clear that cache, set this.estimateWidthIfOneLine_ to null or undefined, but you'd only need that if name changed size (mutable localName in fn, FIXME).
Split.prototype.estimateWidthIfOneLine = function(){
	if(!this.estimateWidthIfOneLine_){
		let est = 0;
		let splate = this.splate;
		//est += options.borderWidth*2;
		est += options.borderWidth+1.5;
		if(splate.isDisplayPushAndPopChars){
			if(splate.isLiteral) throw 'isLiteral AND isDisplayPushAndPopChars, splate='+splate;
			//est += options.estimatedFontWidth*2;
			est += estimateIndentWidth()*2;
		}
		if(this.isDisplayL()){
			if(!this.leftSplit) throw 'No leftSplit but isDisplayL said to display it';
			est += this.leftSplit.estimateWidthIfOneLine();
		}
		if(this.isDisplayR()){
			if(!this.rightSplit) throw 'No rightSplit but isDisplayR said to display it';
			est += this.rightSplit.estimateWidthIfOneLine();
		}
		if(splate.isLiteral){
			if(splate.isCanvasLiteral()){
				//let magnifyHeight = splate.fn.n.llr(4).n.d();
				let magnifyWidth = splate.fn.n.llr(3).n.d();
				//let dataHeight = splate.fn.n.llr(2).n.d();
				let dataWidth = splate.fn.n.llr(1).n.d();
				let estimatedDisplayWidth = magnifyWidth*dataWidth;
				est += estimatedDisplayWidth;
			}else{
				let literalString = toLiteralString(splate.fn);
				est += literalString.length*options.estimatedFontWidth;
				//let badEstimateOfLiteralWidth = 80;
				//est += badEstimateOfLiteralWidth;
			}
		}
		if(splate.isDisplayName){
			let nameSizeInChars = this.splate.name().length; //FIXME should this lazyeval of name be triggered?
			est += options.estimatedFontWidth*(1+nameSizeInChars); //1+ cuz #. FIXME what does a closed branch look like? Just its name?
		}
		this.estimateWidthIfOneLine_ = est;
	}
	return this.estimateWidthIfOneLine_;
};

/*
//in pixels. doesnt have to be displayed. This is for use with isOneLine etc for first n childs in a []{}().
Split.prototype.estimateHeight = function(){
	throw 'TODO cache this in estimateHeight_, lazyevaled';
};
*/

Split.prototype.isOneLineDeep = function(){
	if(!this.isOneLineDeep_){
		let ret = this.splate.isOneLine;
		if(this.isDisplayL() && !this.leftSplit.isOneLineDeep()) ret = false;
		if(this.isDisplayR() && !this.rightSplit.isOneLineDeep()) ret = false;
		//FIXME what if it cant be oneline cuz its a big canvas bytes literal etc?
		this.isOneLineDeep_ = ret;
	}
	return this.isOneLineDeep_;
}

Split.prototype.asOneLineDeep = function(){
	if(this.isOneLineDeep()) return this;
	let forkSplate = this.splate.setIsOneLine(true); //FIXME setIsOneLine should return same splate if already that way.
	let forkLeft = this.isDisplayL() ? this.leftSplit.asOneLineDeep() : this.leftSplit; //leave leftSplit as it is if not display it
	let forkRight = this.isDisplayR() ? this.rightSplit.asOneLineDeep() : this.rightSplit; //leave rightSplit as it is if not display it
	return getSplit(forkSplate,forkLeft,forkRight);
};

//width in pixels of each indent, such as "[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" or "]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".
var estimateIndentWidth = ()=>{
	//let maxWidthMinusTabbedOver = maxWidth-tabSizeInSpaces*options.estimatedFontWidth; //may be negative, but will just multiline if it exceeds such maxallowed
	return 20; //FIXME
};

//Returns a Split with everything the same as this one except some of the isOneLine might be changed (and maybe related things? are there any?).
//Using estimateWidth recursively, will set isOneLine where it can to try to not exceed the given maxWidth,
//but since a single thing can be wider than that, it might not be able to, but usually it will.
Split.prototype.forkTryMaxWidth = function(maxWidth){
	/*Fixing this with estimateWidthIfOneLine...
	FIXME todo make separate func to check if would fit as 1 line (optimize by giving maxWidth in case its big)
		and compare that to if it was displayed as multiline (which takes max of 2 child widths plus a bigger "tabbed over" prefix/suffix on left).
		If parent isOneLine then self must also be isOneLine. If parent is !isOneLine then self can be either.
		Also, some things cant be isOneLine, like a big canvas literal.
		Also, if self isOneLine and self isDisplayPushAndPopChars, that might make it a different size cuz of the "tabbed over"
			vs no added whitespace plus a prefix, the child(s), then suffix.
	*/
	if(options.logWidthAndWrappingStuff) console.log('forkTryMaxWidth maxWidth='+maxWidth+' fn='+this.splate.fn);
	let estSelfWidthIfOneLine = this.estimateWidthIfOneLine();
	//let estLeftWidthIfOneLine = this.leftSplit ? this.leftSplit.estimateWidthIfOneLine() : null;
	//let estRightWidthIfOneLine = this.rightSplit ? this.rightSplit.estimateWidthIfOneLine() : null;
	if(estSelfWidthIfOneLine <= maxWidth){
		let ret = this.asOneLineDeep();
		ret.cache_maxWidth = maxWidth;
		return ret;
	}else{
		let indentWidth = estimateIndentWidth();
		//let maxWidthMinusTabbedOver = maxWidth-tabSizeInSpaces*options.estimatedFontWidth; //may be negative, but will just multiline if it exceeds such maxallowed
		let maxWidthMinusTabbedOver = maxWidth-indentWidth; //may be negative, but will just multiline if it exceeds such maxallowed
		let forkSplate = this.splate.setIsOneLine(false);
		//TODO optimize by reusing same Splits if they're already not too wide (does it do that yet? theres some code that does and some that doesnt...)
		let forkLeft = this.isDisplayL() ? this.leftSplit.forkTryMaxWidth(maxWidthMinusTabbedOver) : this.leftSplit; //leave leftSplit as it is if not display it
		let forkRight = this.isDisplayR() ? this.rightSplit.forkTryMaxWidth(maxWidthMinusTabbedOver) : this.rightSplit; //leave rightSplit as it is if not display it
		let forkActionsSplit = this.action ? this.action.split.forkTryMaxWidth(maxWidthMinusTabbedOver) : null;
		
		//2023-1-1 Action isnt used anymore. splate.dragStep and uiState etc are used instead.
		//But I might bring it back later, to use the few drop dobs (such as splat.dobs.dropleft dropmid dropright etc???
		let forkAction = this.action;
		if(forkAction && !forkAction.split.eq(forkActionsSplit)){
			forkAction = new Action(forkActionsSplit,forkAction.dobName,forkAction.action); //TODO make an Action.prototype.setSplit func in case it gets more fields later.
		}
		
		
		let ret = getSplit(forkSplate,forkLeft,forkRight,forkAction);
		ret.cache_maxWidthMinusTabbedOver = maxWidthMinusTabbedOver;
		ret.cache_maxWidth = maxWidth;
		return ret;
	}
	
	
	/*
	console.log('forkTryMaxWidth maxWidth='+maxWidth+' fn='+this.splate.fn);
	let localWidth = this.estimateWidth(false);
	let maxChildsWidthAllowed = maxWidth-localWidth; //but still might be bigger than this if theres 1 literal deep in it thats bigger than this max
	console.log('forkTryMaxWidth localWidth='+localWidth+' maxChildsWidthAllowed='+maxChildsWidthAllowed);
	//If this.splate.isOneLine then add both childs to width, else add max of 2 child widths to width.
	//Calling forkTryMaxWidth (this recursively) on a child may return a less wide child by changing isOneLine in some parts of it.
	//FIXME how to know which to do isOneLine? Try to make them as wide as possible without going over the allowed max width?
	let iShouldBeOneLine;
	//let forkMe = this;
	//let mul = 1; //TODO
	let mul = .7; //FIXME
	let forkLeft = this.leftSplit ? this.leftSplit.forkTryMaxWidth(maxChildsWidthAllowed*mul) : null;
	let forkRight = this.rightSplit ? this.rightSplit.forkTryMaxWidth(maxChildsWidthAllowed*mul) : null;
	if(this.splate.isOpen && this.leftSplit && this.rightSplit){
		console.log('forkTryMaxWidth ISOPEN');
		let forkLeftSize = forkLeft.estimateWidth(true); //true include child splits if exist
		let forkRightSize = forkRight.estimateWidth(true);
		iShouldBeOneLine = (forkLeftSize+forkRightSize <= maxChildsWidthAllowed);
		console.log('forkTryMaxWidth ISOPEN forkLeftSize='+forkLeftSize+' forkRightSize='+forkRightSize+' iShouldBeOneLine='+iShouldBeOneLine);
	}else{
		//FIXME should set (by forkEdit) this.splate.isOneLine to true?
		iShouldBeOneLine = true;		
		console.log('forkTryMaxWidth ELSE');
	}
	//TODO optimize by doing setIsOneLine before getSplit makes another split.
	console.log('forkTryMaxWidth iShouldBeOneLine='+iShouldBeOneLine);
	let forkSplate = this.splate.setIsOneLine(iShouldBeOneLine);
	return getSplit(forkSplate,forkLeft,forkRight);
	//console.log('forkTryMaxWidth iShouldBeOneLine='+iShouldBeOneLine+' fn='+this.splate.fn);
	//return forkMe.setSplate(forkMe.splate.setIsOneLine(iShouldBeOneLine));
	//return forkMe.changeSplate(s=>s.setIsOneLine(iShouldBeOneLine));
	*/
};


//perfect dedup of UI parts (not perfect deduping fn which is still using locid (128 bit localId) so only dedups by that)
//caches it the first time. Returns a text view of the contents, but not deeper into fn than its 128 bit localId.
Split.prototype.bigHash = function(){
	if(!this.bigHash_){
		let hashMe = this.splate.bigHash();
		hashMe += this.leftSplit ? this.leftSplit.bigHash() : 'l';
		hashMe += this.rightSplit ? this.rightSplit.bigHash() : 'r';
		hashMe += this.action ? this.action.bigHash() : 'a';
		this.bigHash_ = 'Split_'+hashText(hashMe); //expensive calculation, todo use normal hashtable instead for speed.
	}
	return this.bigHash_;
};

Split.prototype.toString = function(){
	return '[Split_'+(this.leftSplit?'L':'l')+(this.rightSplit?'R':'r')+'_splate='+this.splate+'_action='+this.action+']';
};


//do 2 Splits equal by deep content except fns are compared by their 128 bit localId (fn.n.locid()) not perfect deduped, true or false.
Split.prototype.eq = function(split){
	return this.bigHash()==split.bigHash();
};

//they can be null
var actionsEq = (actionA,actionB)=>{
	if(actionA == null){
		return actionB==null;
	}else{
		if(actionB==null) return false;
		return actionA.eq(actionB);
	}
};

Split.prototype.setAction = function(action){
	if(actionsEq(this.action,action)){
		return this; //cuz Split and Splate should be used as immutable
	}else{
		return getSplit(this.splate, this.leftSplit, this.rightSplit, action);
	}
};

//forkEdits this Split
Split.prototype.setSplate = function(splate){
	if(splate.eq(this.splate)){
		return this; //cuz Split and Splate should be used as immutable
	}else{
		//leftSplit and rightSplit may be null (if !this.isOpen, TODO verify?), but splate cant be.
		return getSplit(splate, this.leftSplit, this.rightSplit);
	}
};

//Example: aSplit.changeSplate(s=>s.setIsOneLine(true)) returns forkEdited aSplit whose splate.isOneLine is true,
//(TODO return that same aSplit if that was already true???)
Split.prototype.changeSplate = function(splateInSplateOut){
	return this.setSplate(splateInSplateOut(this.splate));
};


/* Since Split and Splate will have bigHash func, just use a js {} map of bigHash to that if you want dedup.
//Returns a deduped Split, given 2 deduped child Splits or nulls, but null childs are only allowed if !splate.isOpen.
var dedupSplit = function(splate, leftSplit, rightSplit){
	throw 'TODO';
};*/

/*
//a leaf split is closed. Otherwise, since fn is a fractal (every fn has 2 child fns that when called
//on eachother return that parent fn), it will expand forever into childs.
Split.prototype.isLeaf = function(){
	throw 'TODO get from this.dity';
};

Split.prototype.isDisplayPrefixAndSuffix = function(){
	throw 'TODO';
};

//Example: '['. Prefix and suffix are not always used, depending if parent is doing the prefix and suffix.
Split.prototype.prefix = function(){
	throw 'TODO';
};

//Example: ']#NameXYZ'. Prefix and suffix are not always used, depending if parent is doing the prefix and suffix.
Split.prototype.suffix = function(){
	throw 'TODO';
};
*/

//FIXME splits must not contain dobs, instead dobs are in splats.
//param is normally a div.
/*Split.prototype.displayIn = function(dob){
	//this.dity is a string. why is this code here? this.dity.dob = dob;
	dob.innerHTML = '';
	throw 'TODO';
};*/
/*Use Splat.setSplit instead of: Split.prototype.displayIn = function(splat){
	throw 'TODO';
};*/


//forkEdits
Split.prototype.setL = function(newLeftSplit){
	return getSplit(this.splate,newLeftSplit,this.rightSplit);
};

//forkEdits
Split.prototype.setR = function(newRightSplit){
	return getSplit(this.splate,this.leftSplit,newRightSplit);
};

//forkEdits
Split.prototype.transformSplate = function(transformer){
	return this.setSplate(transformer(this.splate));
};


Splat.prototype.splate = function(){
	return this.split.splate;
};


//some convenience funcs to get whats in the (used as immutable) splate (in this mutable Splat)...

Splat.prototype.fn = function(){
	return this.split.splate.fn;
};

Splat.prototype.syty = function(){
	return this.split.splate.syty;
};

Splat.prototype.isOpen = function(){
	return this.split.splate.isOpen;
};

Splat.prototype.isOneLine = function(){
	return this.split.splate.isOneLine;
};

Splat.prototype.isLiteral = function(){
	return this.split.splate.isLiteral;
};

Splat.prototype.isCanvasLiteral = function(){
	return this.split.splate.isCanvasLiteral();
};

Splat.prototype.isDisplayName = function(){
	return this.split.splate.isDisplayName;
};

Splat.prototype.isDisplayPushAndPopChars = function(){
	return this.split.splate.isDisplayPushAndPopChars;
};

Splat.prototype.isDisplayChilds = function(){
	return this.split.splate.isDisplayChilds;
};

Splat.prototype.isFoldL = function(){
	return this.split.splate.isFoldL;
};

Splat.prototype.isUnary = function(){
	return this.split.splate.isUnary;
};

Splat.prototype.isShowDropDobs = function(){
	return this.split.splate.isShowDropDobs;
};

Splat.prototype.isSelected = function(){
	return this.split.splate.isSelected;
};

Splat.prototype.red = function(){
	return this.split.splate.red;
};

Splat.prototype.green = function(){
	return this.split.splate.green;
};

Splat.prototype.blue = function(){
	return this.split.splate.blue;
};

//the small circle icon that follows mouse. TODO move that and dragLine to overlays (updateOverlays).
Splat.prototype.isDisplayIcon = function(){
	return this.split.splate.isDisplayIcon;
};

//the small circle icon that follows mouse. TODO move that and dragLine to overlays (updateOverlays).
Splat.prototype.looseIconYFraction = function(){
	return this.split.splate.looseIconYFraction;
};

//the small circle icon that follows mouse. TODO move that and dragLine to overlays (updateOverlays).
Splat.prototype.looseIconXFraction = function(){
	return this.split.splate.looseIconXFraction;
};

Splat.prototype.linePath = function(){
	return this.split.splate.linePath;
};

/* Cant do this cuz a splat can have multiple dragSteps. Its a map uiState.dragSteps[dragStep] -> splat, so dragStep is key and splat is value.
Splat.prototype.dragStep = function(){
	//return this.split.splate.dragStep;
	return splatToDragStep(this);
};
*/

var unsetDragStep = dragStep=>{
	uiState.dragSteps[dragStep] = null;
};

Splat.prototype.unsetDragStepIfItsMe = function(dragStep){
	if(!dragStep || dragStep == 'no'){
		return;
	}
	if(uiState.dragSteps[dragStep] == this){
		uiState.dragSteps[dragStep] = null;
	}
};

Splat.prototype.setDragStep = function(dragStep){
	if(!dragStep){
		throw 'No dragStep='+dragStep;
	}
	uiState.dragSteps[dragStep] = this;
};

/*
var splatToDragStep = splat=>{
	for(let dragStep in uiState.dragSteps){
		if(uiState.dragSteps[dragStep] == splat){
			return splat;
		}
	}
	return 'no';
};*/

Splat.prototype.setDragStepAndInSomeCasesUnsetOthers = function(dragStep){
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('setDragStepAndInSomeCasesUnsetOthers dragStep='+dragStep+' splat='+this);
	if(!dragStep){
		dragStep = 'no';
	}
	this.setDragStep(dragStep);
	switch(dragStep){
		case 'wouldFrom':
			unsetDragStep('from');
			unsetDragStep('wouldTo');
			unsetDragStep('to');
			unsetDragStep('dropCircMenu');
		break;case 'from':
			this.unsetDragStepIfItsMe('wouldFrom');
		break;case 'wouldTo':
			//nothing
		break;case 'to':
			this.unsetDragStepIfItsMe('wouldTo');
		break;case 'dropCircMenu':
			this.unsetDragStepIfItsMe('wouldTo');
			this.unsetDragStepIfItsMe('to');
		break;default:
			throw 'Unknown dragStep='+dragStep;
	}
	updateOverlays();
};

//'no' and null are same dragStep. dragStep is key, and splat is value, so the same splat can be set as multiple dragSteps, such as 'to' and 'from' at once.
var setDragStep = (splat,dragStep)=>{
	if(dragStep == 'no'){
		dragStep = null;
	}
	//removeSplatFromDragSteps(splat);
	if(dragStep){
		uiState.dragSteps[dragStep] = splat;
	}
};


//FIXME this needs to be around 10, instead of less, cuz of this code adding <b> and </b> and in some cases changing < to &lt;, etc.
//That makes it be longer as string than visually.
//let prefix = '<b>'+weakHtmlEscape(sytyToPushChar(syty))+'</b>';
//let suffixfarright = '';
//for(let i=tabSizeInSpaces-prefix.length; i>0; i--) prefix += '&nbsp;'; //TODO optimize all one string, not loop
//
//FIXME move this to options.tabSizeInSpaces
//let tabSizeInSpaces = 10; //cuz the spaces are really small for some reason. FIXME why are they so small.
//let tabSizeInSpaces = 2; //cuz the spaces are really small for some reason. FIXME why are they so small.
let tabSizeInSpaces = 10; //cuz the &nbsp;spaces are really small for some reason. FIXME why are they so small.
//let tabSizeInSpaces = 3; //the thin stuff on the left where [ is top left and ] is top right, or similar for { } ( ).

//let borderWidth = 0;
//let borderWidth = 2;
//let borderWidth = 3;
//let borderWidth = 5;
//let borderWidth = 9;
//let borderWidth = 13;

//only the dobs named in childDobNames per Splat.
Splat.prototype.putThisStringInAllEmptyDobsDeep = function(str){
	for(let dobName of childDobNames){
		let dob = this.dobs[dobName];
		if(dob){
			if(!dob.innerHTML){
				dob.innerHTML += str;
			}
		}
	}
	if(this.leftSplat){
		this.leftSplat.putThisStringInAllEmptyDobsDeep(str);
	}
	if(this.rightSplat){
		this.rightSplat.putThisStringInAllEmptyDobsDeep(str);
	}
	/*for(let dobName in this.dobs){
		let dob = this.dobs[dobName];
		if(!dob.innerHTML){
			dob.innerHTML += str;
		}
	}
	*/
};

//A root is height 0. Direct child of root is height 1, and so on.
Splat.prototype.height = function(){
	return this.parentSplat ? (1+this.parentSplat.height()) : 0;
};

//remove padding from dob/domObject, then return that same dob
var unpad = function(dob){
	let s = dob.style;
	//s.color = 'blue';
	
	s.padding = '0px';
	s.margin = '0px';
	s.border = '0px';
	
	/*
	//This seems to make padding smaller even though I dont see it in brower element inspector (push F12 then click Elements).
	s.paddingTop = '0px';
	s.paddingRight = '0px';
	s.paddingBottom = '0px';
	s.paddingLeft = '0px';
	
	
	s.borderSpacing = '0px';
	s.border = '0px';
	
	s.marginTop = '0px';
	s.marginRight = '0px';
	s.marginBottom = '0px';
	s.marginLeft = '0px';
	*/
	
	
	/*s['padding-top'] = '0px';
	s['padding-right'] = '0px';
	s['padding-bottom'] = '0px';
	s['padding-left'] = '0px';
	*/
	//s.padding = '0px';
	switch(dob.tagName){
		case 'TABLE':
			//attr(dob,'cellSpacing',0);
			//dob.border = 0;
		break;case 'TR':case 'TD':
			
			
		break;case 'DIV':
		default:
	}
	return dob;
};

//FIXME should have max chars to return, in case very big, dont want to recurse deep making a huge string.
var toLiteralString = fn=>{
	let literal;
	if(fn.n.isDouble()){
		//normal javascript double toString, which is same as java double toString except maybe how exponent
		//is displayed with or without + and leading zeros in it etc, todo verify.
		literal = ''+fn.n.d();
	}else if(fn.n.isTypeUtf8()){
		let content = fn.n.r;
		let utf8Bytes = content.n.bytes();
		
		//The next 3 comment lines are copied from VM:
		//FIXME quote it if it contains whitespace or ( ) { } [ ] < > , or certain other chars or depending on size.
		//If it starts with a lowercase letter or most of the other unicode chars then it can be a string literal without quotes.
		//If it starts with a capital A-Z then its a #Name. If you want other unicode chars in a #Name then just prefix with 1 of A-Z.
		
		literal = vm.utf8AsUint8ArrayToString(utf8Bytes);
	}else if(fn.n.isCbt()){
		literal = vm.cbtToHex(fn);
	}else{
		throw 'TODO what literal type? fn='+fn;
	}
	return literal;
};

/* moving dragStep into uiState, so can only use it with splats, not splates that dont know which splat.
//WARNING: as of 2022-12-29 this can be true even if it was a mousedown then mouseup without moving the mouse,
//so there is no dragStep=='wouldFrom' or dragStep=='from', so theres no dragLine to display,
//but it would be inefficient to scan for which Splat has that *from dragStep, so letting this return true anyways,
//and caller should check if theres a *from and not display it if so.
//Until I move splat.dobs.dragLine to be an overlay (updateOverlays), this will be an "ugly hack".
Splate.prototype.isDisplayDragLine = function(){
	//FIXME get rid of isDisplayIcon?
	return this.isDisplayIcon && (this.dragStep==='to' || this.dragStep==='wouldTo' || this.dragStep==='dropCircMenu');
};
*/
Splat.prototype.isDisplayDragLine = function(){
	//FIXME get rid of isDisplayIcon?
	let dragStep = splatToDragStep(this);
	return this.splate().isDisplayIcon && (dragStep==='to' || dragStep==='wouldTo' || dragStep==='dropCircMenu');
};

//Used with isUnary such as (T x) which doesnt display the T as splat but displays T as a prefix "T" instead, similar to a prefix "{" or prefix "[" or prefix "(".
Splate.prototype.isAttractDropOuterLeft = function(){
	return this.isUnary || this.syty=='S2';
};

//should the dropleft dob light up if mouse is dragging near it?
Splate.prototype.isAttractDropLeft = function(){
	return false;
	//return !this.isLiteral && this.isDisplayPushAndPopChars && !this.isUnary;
	//FIXME also check for foldL?
};

//should the dropmid dob light up if mouse is dragging near it?
Splate.prototype.isAttractDropMid = function(){
	return false;
	//return !this.isLiteral; //TODO should dropmid be removed? I might use it for something later... Thought i would use all 3 but might just use dropleft and dropright.
};

//should the dropright dob light up if mouse is dragging near it?
Splate.prototype.isAttractDropRight = function(){
	return !this.isLiteral;
	//FIXME also check for foldL?
};


//2023-7-15, adding a new kind of literal, ops.Canvas with 5 params, that displays as a html canvas tag.
//Before, there was only literals that could be displayed as text, such as 2.34 the number or abc the string or 0x1234ffffddddeeee the cbt.
Splate.prototype.isCanvasLiteral = function(){
	return this.isLiteral && vm.isValidCanvas(this.fn);
};

//a Splat and a choice of which of 4 corners on it, or maybe n places along its edges for n possible actions,
//that a colored circle or other icon might appear at during a dragAndDrop. TODO part and 'action' might be same?
var SplatPart = function(splat, part){
	this.splat = splat;
	this.part = part;
};

//part is a string for different kinds of drag (such as naming its 4 corners)
Splat.prototype.partY = function(part){
	throw 'TODO';
};

var SplatDob = function(splat, dobName){
	this.splat = splat;
	this.dobName = dobName;
};

SplatDob.prototype.dob = function(){
	return this.splat.dobs[this.dobName];
};

//allows nulls
var splat_meOrThemWhicheversCloserToYX = function(splatdobA, splatdobB, y, x){
	if(!splatdobA) return splatdobB;
	if(!splatdobB) return splatdobA;
	return splatdobA.meOrThemWhicheversCloserToYX(splatdobB, y, x);
};

//not allows nulls
SplatDob.prototype.meOrThemWhicheversCloserToYX = function(splatdob, y, x){
	let myDist = dobDist(this.dob(), y, x);
	let paramDist = dobDist(splatdob.dob(), y, x);
	return myDist<=paramDist ? this : splatdob;
};


/*
var splatAtYX = function(y, x, optionalSplatFrom){
	let splat = optionalSplatFrom || rootSplat;
	if(!splat.containsYX(y,x)) return null;
	let l = splat.isDisplayL() ? splat.leftSplat.splatAtYX : null;
	if(l) return l;
	let r = splat.isDisplayR() ? splat.rightSplat.splatAtYX : null;
	if(r) return r;
	return splat;
};

var dobContainsYX = function(dob,y,x){
	return dobY(dob)<=y && y<=dobYEnd(dob) && dobX(dob)<=x && x<=dobXEnd(dob);
};

Splat.prototype.containsYX = function(y,x){
	return dobContainsYX(this.dobs.self,y,x);
};
*/


/*
//Returns a SplatFyFx that may have jumped multiple parents deep, so only need this once (y,x) on screen to find what splatpart it means.
//Mouse over the left 1/2 of a splat means itself. Over the next 1/4 is its parent splat. next 1/8 is parent of parent,
//or may be a different decay than 1/2, such as first .37 left side of splat is itself, then .37 of what remains is parent, and so on,
//and this might (TODO) skip splats that are not displayed (what was that func that checks for foldL etc?).
SplatYX.prototype.jump = function(){
	todo
};*/
//fractionRecurse is .5 in that example, or .4 in the example in SplatFyFx comments.
//returns null if none.
var screenYXToSplatfyfx = function(screenY, screenX, optionalFractionRecurse){
	let fractionRecurse = optionalFractionRecurse!==undefined ? optionalFractionRecurse : options.fractionRecurse;
	let splat = splatAtYX(screenY,screenX);
	if(!splat) return null;
	//splat.forkRootSplit_randomizeColor_inRootSplat(); //FIXME remove this
	let fy = (screenY-dobY(splat.dobs.self))/dobHeight(splat.dobs.self);
	let fx = (screenX-dobX(splat.dobs.self))/dobWidth(splat.dobs.self);
	while(true){
		if(options.screenYXToSplatfyfx_topIsSelfAndIfRightThenBottomIsParent && splat.isRightChild()){
			//TODO verify fractionRecurse is near .5 (such as .4 or .6)
			if(fy < fractionRecurse){ //self is top [0..fractionRecurse]
				break;
			}else{
				if(splat.parentSplat){ //bottom [fractionRecurse..1] is parent
					splat = splat.parentSplat;
					
					//without these 2 lines, looseIcon will differ from mouse cursor Y X.
					fy = splat.looseIconYFractionAtMouseY(screenY);
					fx = splat.looseIconXFractionAtMouseX(screenX);
					
					break;
				}else{ //no parent probably cuz self is rootSplat
					return null;
				}
			}
		}else{
			if(options.screenYXToSplatfyfx_isReversedAndAtMostOneParentDeep){ //right half is self. left half is parent.
				//TODO verify fractionRecurse is near .5 (such as .4 or .6)
				if(fractionRecurse <= fx){ //found the splat
					fx = (fx-fractionRecurse)/(1-fractionRecurse); //go into right side of [0..fractionRecurse][fractionRecurse..1].
					break;
				}else{
					if(splat.parentSplat){ //left [0..fractionRecurse] is parent on left.
						fx /= fractionRecurse;
						splat = splat.parentSplat;
						break;
					}else{ //no parent probably cuz self is rootSplat
						return null;
					}
				}
			}else{ //n levels deep, with smaller area for each parent of parent of parent. left is self. right a little more is parents...
				if(fx < fractionRecurse){ //found the splat
					fx /= fractionRecurse;
					break;
				}else{ //keep recursing into parent of parent...
					if(splat.parentSplat){
						fx = (fx-fractionRecurse)/(1-fractionRecurse); //go into right side of [0..fractionRecurse][fractionRecurse..1].
						splat = splat.parentSplat;
					}else{
						break;
					}
				}
			}
		}
	}
	if(options.screenYXToSplatfyfx_randomizesColorOfSplatItSelects){
		//splat.forkRootSplit_randomizeColor_inRootSplat(); //FIXME remove this
		splat.forkRoot_setColor(); //as of 2023-1-1 this usually randomizes except if its the last dropped splat (by metaInsert drop) then a highlighted color
	}
	return new SplatFyFx(splat, fy, fx);
};

//Fy and fx are normally fractions, coordinates in splat rectangle.
//y and x fractions (or possibly outside fraction range) inside a Splat.
//The main use of this is for some parts of a splat to refer to its parent splat, parent of parent splat, and so on,
//such as the left .4 part of it is itself, and of the right part remaining, the left .4 of that is its parent,
//and so on recursively. This might skip splats not displayed such as by foldL.
var SplatFyFx = function(splat, fy, fx){
	this.splat = splat;
	this.fy = fy;
	this.fx = fx;
};

//These are top left corner.
//TODO can this be done without checking scroll position?
var dobY = dob=>(dob.getBoundingClientRect().top+window.pageYOffset);
var dobX = dob=>(dob.getBoundingClientRect().left+window.pageXOffset);
var dobYEnd = dob=>(dobY(dob)+dobHeight(dob));
var dobXEnd = dob=>(dobX(dob)+dobWidth(dob));

//var dobHeight = dob=>dob.clientHeight;
var dobHeight = dob=>dob.offsetHeight; //include border

//var dobWidth = dob=>dob.clientWidth;
var dobWidth = dob=>dob.offsetWidth; //include border

var dobCenterY = dob=>(dobY(dob)+dobHeight(dob)/2);
var dobCenterX = dob=>(dobX(dob)+dobWidth(dob)/2);
//to solve the problem of some dobs being much wider than their content, this goes just a little to the right from the left border but not past the center.
var dobSomewhereBetweenLeftAndCenterX = dob=>(dobX(dob)+between(0,20,dobWidth(dob)/2));

//var dobDist = (dob,y,x)=>Math.hypot(dobY(dob)-y, dobX(dob)-x);
//var dobDist = (dob,y,x)=>Math.hypot(dobCenterY(dob)-y, dobCenterX(dob)-x); //this has problem with some wikib_dropright dobs being much wider than their contents, so have to move mouse too far to right to select them.
var dobDist = (dob,y,x)=>Math.hypot(dobCenterY(dob)-y, dobSomewhereBetweenLeftAndCenterX(dob)-x);

/*
//this will keep whichever is nonnull if only 1 is, else compare them by distance. can return null if both are null.
var nearestDobOf2AndEitherMayBeNull = (dobA,dobB,y,x)=>{
	if(!dobA) return dobB; //may be null
	if(!dobB) return dobA; //may be null
	let distA = dobDist(dobA,y,x);
	let distB = dobDist(dobB,y,x);
	return distA<distB ? dobA : dobB;
};*/

//caches it so not creating alot of extra objects (FIXME dont do string concat. make a few {} maps in Splat for this and other things cached);
Splat.prototype.splatdobForDobName = function(dobName){
	let key = 'splatdob_'+dobName;
	if(!this[key]){
		this[key] = new SplatDob(this,dobName);
	}
	return this[key];
};

//null if no splat is there.
var splatAtYX = function(y, x, optionalSplatFrom){
	let splat = optionalSplatFrom || rootSplat;
	if(!splat.containsYX(y,x)) return null;
	let l = splat.isDisplayL() ? splatAtYX(y,x,splat.leftSplat) : null;
	if(l) return l;
	let r = splat.isDisplayR() ? splatAtYX(y,x,splat.rightSplat) : null;
	if(r) return r;
	return splat;
};

var dobContainsYX = function(dob,y,x){
	return dobY(dob)<=y && y<=dobYEnd(dob) && dobX(dob)<=x && x<=dobXEnd(dob);
};

Splat.prototype.containsYX = function(y,x){
	return dobContainsYX(this.dobs.self,y,x);
};

//returns a SplatDob nearest to (y,x), but only of the Splats where splat.splate().isAttractDropLeft() or .isAttractDropMid() or .isAttractDropRight().
Splat.prototype.nearestDrop = function(y,x){
	//let dob = null;
	let splatdob = null;
	let splate = this.splate();
	
	if(splate.isAttractDropOuterLeft()){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.splatdobForDobName('dropouterleft'), y, x);
	}
	if(splate.isAttractDropLeft()){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.splatdobForDobName('dropleft'), y, x);
	}
	if(splate.isAttractDropMid()){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.splatdobForDobName('dropmid'), y, x);
	}
	if(splate.isAttractDropRight()){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.splatdobForDobName('dropright'), y, x);
	}
	if(this.leftSplat){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.leftSplat.nearestDrop(y,x), y, x);
	}
	if(this.rightSplat){
		splatdob = splat_meOrThemWhicheversCloserToYX(splatdob, this.rightSplat.nearestDrop(y,x), y, x);
	}
	return splatdob;
};

var countCallsOf_setSplit = 0;
var test_rememberDobsIn_setSplit = [];


//'C' if theres no parent, meaning normal callpair. Else parent's syty.
Splat.prototype.parentSyty = function(){
	return (this.parentSplat ? this.parentSplat.splate().syty : 'C');
};

//'C' if theres no parent of parent, meaning normal callpair. Else parent's syty.
Splat.prototype.parentParentSyty = function(){
	return (this.parentSplat ? this.parentSplat.parentSyty() : 'C');
};

/*
//If this is (S abc) in {abc def}, for example, returns the splat for that abc,
//but if this is (S abc) in [x y (S abc)] then just returns this Splat (for (S abc)).
//Theres 
Splat.prototype.findDirectSplat
*
Splat.prototype.metaPaste = 
*/


//displays it deeply but not past Splats whose Split is equal (Split.eq(Split)) cuz would in theory be the same graphics etc.
//
//WARNING: When left child is vm.ops.Infcur (aka displayed as [] by itself, or [a b c] to mean ([] a b c)) theres no this.leftSplat
//but there is this.rightSplat, but both Split childs are there. The left split child is normally closed if its [].
//Also could that happen in a rightSplat too if that happens to be []?
//
Splat.prototype.setSplit = function(split){

	//FIXME 2022-11-20-12noonEST found that dobs.literal and dobs.left are both not being cleared (.innerHTML='')
	//when setSplit after dragging 2.34 to {abc def} to make {2.34 abc def} which displays on screen as {2.34 abc abc def def}.
	//Its {{2.34 abc} <abc> <def> def} where the <abc> is a dobs.left and the <def> is a dobs.literal, both in right child of the outer {...}.
	//Also, dobs.right should be cleared similarly. But in which paths in the code below did they not get cleared?

	countCallsOf_setSplit++;
	if(vm.loglev>1 && countCallsOf_setSplit%100===0) console.log('countCallsOf_setSplit='+countCallsOf_setSplit);
	test_rememberDobsIn_setSplit.push(this.dobs.self);
	
	if(!split) throw 'No split';
	var prevSplit = this.split;
	if(!prevSplit) throw 'No prevSplit';
	const isAllNbsp = /^(\&nbsp\;)*$/;
	if(!options.optimizeUIByDedupSplit || !split.eq(prevSplit)){
		if(vm.loglev>=2) console.log('Is updating splat (height='+this.height()+') cuz split changed, newSplit='+split+' prevSplit='+prevSplit);
		this.split = split;
		if(!this.dobs.self) throw 'No self dob';
		let prevSplate = prevSplit.splate;
		let splate = split.splate;
		
		if(options.displayOnly_setSplit_inLiteral){
			this.dobs.literal.innerHTML = 'setSplit param='+split;
		}
		
		let style = this.dobs.self.style;
		style.borderStyle = 'outset';
		if(options.putSmallExtraSpaceUnderEverything){
			style.display = 'inline-block';
		}
		let red = splate.red;
		let green = splate.green;
		let blue = splate.blue;
		let brightMul = .85;
		if(this.isSelected()){
			console.log('isSelected splat='+this);
			red = green = blue = 1;
		}
		style.backgroundColor = colorStr(red*brightMul,green*brightMul,blue*brightMul);
		//style.borderWidth = '15px';
		style.borderWidth = options.borderWidth+'px';
		//FIXME borderWidth of 0 is still getting a little tilt, is not displayed as 0
		style.borderColor = colorStr(red,green,blue);
		
		//this.dobs.self.title = 'test';
		let popupTitle = '';
		
		let syty = splate.syty;
		let fn = splate.fn;
		
		//let isShowDropDobs = splate.isShowDropDobs;
		
		
		if(splate.isLiteral){
			if(splate.isCanvasLiteral()){
				this.canvasDisplayFn(splate.fn); //adds or reuses a canvas in this.dobs.literal
			}else{
				let literal = toLiteralString(splate.fn); //FIXME with max size in chars
				this.dobs.literal.innerHTML = options.literalPrefix+literal+options.literalSuffix;
				//isShowDropDobs = false;
			}
			
			//adding this 2022-11-20-1232pEST
			this.dobs.left.innerHTML = '';
			this.dobs.right.innerHTML = '';
		//}else if(splate.isDisplayPushAndPopChars && !splate.isFoldL){ //FIXME isFoldL shouldnt be checked here
		}else if(splate.isDisplayPushAndPopChars){ //FIXME isFoldL shouldnt be checked here
			let prefix = weakHtmlEscape(sytyToPushChar(syty,fn));
			if(prefix != '') prefix = '<b>'+prefix+'</b>';
			//prefix midfix suffix
			let midfix = sytyToMidChar(syty,fn);
			if(midfix != '') midfix = '<b>'+midfix+'</b>';
			let suffixfarright = '';
			for(let i=tabSizeInSpaces-prefix.length; i>0; i--) prefix += '&nbsp;'; //TODO optimize all one string, not loop
			let suffix = weakHtmlEscape(sytyToPopChar(syty,fn));
			if(suffix != '') suffix = '<b>'+suffix+'</b>';
			for(let i=tabSizeInSpaces-suffix.length; i>0; i--) suffix += '&nbsp;'; //TODO optimize all one string, not loop
			if(splate.isDisplayName){
				//suffix += '#TODONAMEHERE';
				suffix += '#'+splate.name();
			}
			
			if(splate.isOneLine){
				//put suffix in dobs.upfarright (rightmost of 3 tds in same tr) instead of dobs.suffix (aka downleft)
				suffixfarright = suffix;
				suffix = '';
				this.dobs.suffixb.innerHTML = '';
				this.dobs.suffixc.innerHTML = '';
			}else{
				//let suffixVerticalAlign = 'bottom';
				if(splate.isUnary && splate.isDisplayChilds){
					//Example: prefix is ',' as in (T abc) being displayed as ,abc but the ',' is displayed at top of suffix dob
					//instead of top of prefix dob, so the 2x2 table that has prefix at topleft and suffix at bottomleft, has empty top row,
					//and at topright would be T aka , but cuz of isFoldL it doesnt display that. See options.isFoldT.
					//suffix = prefix;
					//prefix = '';
					//suffixVerticalAlign = 'top';
					suffix = '';
				}
				//this.dobs.suffix.style.verticalAlign = suffixVerticalAlign;
				
				let isBigSuffix = splate.isDisplayName;
				if(isAllNbsp.test(suffix)){
					suffix = '';
				}
				if(isBigSuffix){
					this.dobs.suffixb.innerHTML = '';
					this.dobs.suffixc.innerHTML = suffix;
				}else{
					this.dobs.suffixb.innerHTML = suffix;
					this.dobs.suffixc.innerHTML = '';
				}
			}
			
			//trying this 2023-4-4 to fix that theres &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in dom nodes of class wikib_prefix
			//when (in parent Split?) isFoldLL makes it display '' as prefix, cuz of  a/b/sum$ syntax (for example). [(a/b/c) d/e/f$]
			//Yes that fixed the empty space on the left of a/b/c etc, but theres still DGo displayed from [(a/b/c) d/e/f$] in dom node of class wikib_literal.
			//FIXED: b$ wrongly displays as D b $ (should be: b $). a/b$ wrongly displays as DGo a / b $ (should be: a / b $). Also DuGo and Du if use ^ instead of $.
			/*
			//Fixed in this code by changing isFoldL to true 2 places...
			if(options.foldOO && (vm.isFullD(fn) || vm.isFullDGo(fn))){ //fn is (D x), display as x$
				//isFoldL = false; //FIXME?
				//FIXME will need to display it as (...) instead of a/b/sum$ syntax if a b or c isnt certain kinds of small strings that can be literaled like that.
				isFoldL = true; //so [a/b^ hello/world/yo$] doesnt display any D or DGo
				isDisplayPushAndPopChars = true; //those will be push '' mid '' and pop '$'
				//pop char is $ cuz D or DGo
				//FIXMEFIXME display $ at end
			}else if(options.foldOO && (vm.isFullDu(fn) || vm.isFullDuGo(fn))){ //fn is (Du x), display as x^
				//isFoldL = false; //FIXME
				//FIXME will need to display it as (...) instead of a/b/sum$ syntax if a b or c isnt certain kinds of small strings that can be literaled like that.
				isFoldL = true; //so [a/b^ hello/world/yo$] doesnt display any Du or DuGo.
				isDisplayPushAndPopChars = true; //those will be push '' mid '' and pop '^'
				//pop char is ^ cuz Du or DuGo
				//FIXMEFIXME display $ at end
			}else if(options.foldOO && vm.isFullOOOrGoO(fn)){ //fn is (GoO a b) or (OO a b)
			*/
			if(isAllNbsp.test(prefix)){
				prefix = '';
			}
			
			//This has been here for a long time, as of 2023-4-4, for the suffixfarright, but I'm about to try it for prefix above too.
			// /^(\&nbsp\;)*$/.test('&nbsp;&nbsp;&nbsp;') returns true
			if(isAllNbsp.test(suffixfarright)){
				//Is all nobreakspaces, so dont put that in dobs.upfarright so it wastes less screen space.
				//This happens when isUnary.
				
				suffixfarright = '';
				
			}
			
			//TODO optimize. dont change it if its already equal to that.
			this.dobs.midfix.innerHTML = midfix;
			
			this.dobs.prefix.innerHTML = prefix;
			this.dobs.suffixfarright.innerHTML = suffixfarright;
			
			//this.dobs.suffixfarright = suffix;
			
			this.dobs.literal.innerHTML = '';
			
		}else if(!splate.isFoldL && splate.isDisplayName){ //FIXME set isDisplayName to false when making splate, depending on what, instead of checking isFoldL here?
			this.dobs.prefix.innerHTML = '';
			this.dobs.suffixfarright.innerHTML = ''; //where suffix text goes (instead of dobs.suffix) if isOneLine
			//FIXME should this go in suffix if its name? thats where name usually goes, but if its ONLY name, maybe it should go in literal?
			let literal = splate.name();
			this.dobs.literal.innerHTML = options.namelitPrefix+literal+options.literalSuffix;
			//this.dobs.suffix.innerHTML = '';
			
			/*//wait, it might be syty making it do that? Test that first.
			//adding 2022-11-20-147pEST cuz the [ ] { } etc are still displayed after a drop, that creates new ones.
			this.dobs.suffixb.innerHTML = '';
			this.dobs.suffixc.innerHTML = '';
			*/
			
		}else{
			//this.dobs.literal.innerHTML = 'FIXME_whatGoesInThisElse';
			this.dobs.literal.innerHTML = '';
			this.dobs.suffixb.innerHTML = '';
			this.dobs.suffixc.innerHTML = '';
		}
		
		
		//flex-direction: row row-reverse column colum-reverse
		this.dobs.upright.style['flex-direction'] = splate.isOneLine ? 'row' : 'column'; //https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
		
		if(options.displayEstimateWidth){
			popupTitle += '__estimateWidthIfOneLine='+this.split.estimateWidthIfOneLine();
		}
		
		if(options.displayWholeTostringAtEachRect){ //for testing
			//suffix += '__'+splate.fn;
			popupTitle += '__fn='+splate.fn;
		}
		if(options.displaySplateDetailExceptFnAtEachRect){ //for testing
			//suffix += '__'+splate.toStringExceptFn();
			popupTitle += '__parentSyty='+this.parentSyty();
			popupTitle += '__'+splate.toStringExceptFn();
		}
		if(options.display_isSelected_afterName){
			//suffix += '__isSelected='+this.isSelected();
			popupTitle += '__isSelected='+this.isSelected();
		}
		if(options.displaySplatHeight){
			popupTitle += '__height='+this.height();
		}
		if(options.displaySplatPathFromRoot){
			popupTitle += '__path='+this.pathFromRoot();
		}
		
		if(this.splate().dragStep === 'dropCircMenu') popupTitle = '';
		//if(popupTitle) this.dobs.self.title = popupTitle;
		this.dobs.self.title = popupTitle;

		if(splate.isFoldL){
			//foldS means display (S (S a b) c) as {a b c}, as vararg {...}.
			//Just display right child, not left child or anything else except maybe still display controls etc.
			if(!splate.isDisplayChilds) throw 'can only isFoldL if isDisplayChilds, splate='+splate;
			
			if(options.displayDebugInfoAboutVarargS){
				this.dobs.left.innerHTML = '(hidden by foldS)';
			}else{
				this.dobs.left.innerHTML = '';
			}
			//dont display leftSplat in this.L() cuz isFoldL hides S.
			this.R().setSplit(this.split.rightSplit);
		}else{		
			//if(this.split.splate.isOpen && this.split.leftSplit && this.split.rightSplit){
			if(this.split.splate.isDisplayChilds && this.split.leftSplit && this.split.rightSplit){
				//this.L() creates or reuses this.leftSplat, similar for .R()
				if(vm.loglev>=2) console.log('Splat displaying left child');
				//this.L().displayIn(this.dobs.left);
				this.L().setSplit(this.split.leftSplit);
				//console.log('Splat displaying right child');
				//this.R().displayIn(this.dobs.right);
				this.R().setSplit(this.split.rightSplit);
			}else{
				this.deleteChildSplats();
			}
		}
		
		//UPDATE 2022-12-17 Action (third child) and drop dobs are not used anymore since dragging creates a line between 2 places.
		if(splate.isShowDropDobs){
			if(splate.isAttractDropLeft()){
				this.dobs.dropleft.innerHTML = '(dropleft)';
			}
			if(splate.isAttractDropMid()){
				this.dobs.dropmid.innerHTML = '(dropmid)';
			}
			if(splate.isAttractDropRight()){
				this.dobs.dropright.innerHTML = '(dropright)';
			}
		}
		
		/*copied from createDobsIfNotExist...
		d.looseIcon = Pob('img', d.self);
		attr(d.looseIcon,'src',options.fromIconRelPath);
		d.looseIcon.style.position = 'absolute';
		d.looseIcon.style.verticalAlign = '50%'; //change later based on splat.looseIconYFraction etc
		d.looseIcon.style.horizontalAlign = '50%'; //change later based on splat.looseIconYFraction etc
		d.looseIcon.style.height = options.iconSize;
		d.looseIcon.style.width = options.iconSize;
		*/
		
		/*Moving looseIcon and dragLine etc from Splat and Splate to uiState 2023-1
		if(splate.isDisplayIcon){ //FIXME remove "true ||".
			let self = this.dobs.self;
			//this.dobs.looseIcon.style.verticalAlign = (splate.looseIconYFraction*100)+'%';
			//this.dobs.looseIcon.style.horizontalAlign = (splate.looseIconXFraction*100)+'%';
			
			this.dobs.looseIcon.style.height = options.iconSize+'px';
			this.dobs.looseIcon.style.width = options.iconSize+'px';
			//TODO adjust by half width and height of icon.
			this.dobs.looseIcon.style.top = Math.round(dobY(self)+dobHeight(self)*splate.looseIconYFraction-options.iconSize/2)+'px';
			this.dobs.looseIcon.style.left = Math.round(dobX(self)+dobWidth(self)*splate.looseIconXFraction-options.iconSize/2)+'px';
		}*/
		
		//let updateOverlays do it instead... this.updateDragStuffIfNeeded();
		
		
		//UPDATE 2022-12-17 Action (third child) and drop dobs are not used anymore since dragging creates a line between 2 places.
		//UPDATE 2022-10-21 planning to not display Action (third child) and instead use d.looseIcon etc during dragging.
		//
		//Action stuff goes in dropleft dropmid or dropright. Action hasnt acted yet, is just here to say action should be done as a forkEdit of this Split...
		let a = this.split.action; //FIXME 2023-4-4 remove Action. hasnt been used in a long time.
		//this.dobs.dropleft.innerHTML = ''; //FIXME should child Splats do that instead?
		//this.dobs.dropmid.innerHTML = ''; //FIXME should child Splats do that instead?
		//this.dobs.dropright.innerHTML = ''; //FIXME should child Splats do that instead?
		if(a){
			let dropdob = this.dobs[a.dobName];
			if(!dropdob) throw 'Dob in Action not found: '+a.dobName+' Action='+a;
			let childSplat = this.Child(a.dobName);
			childSplat.setSplit(a.split);
		}
	}else{
		if(vm.loglev>=2) console.log('Not updating splat (height='+this.height()+') cuz split didnt change, split='+split);
	}
	if(this === rootSplat){
		updateOverlays();
	}
};

/*
Splat.prototype.updateDragStuffIfNeeded = function(){

	//if(splate.isDisplayDragLine()){
	if(this.isDisplayDragLine()){
	
	
		/* This code in the directed graph UI html displays angled lines.
		UIEdge.prototype.display = function(){
			if(!displayUiedges) return;
			if(!this.dob){
				let parentDob = mainDiv;
				//let parentDob = document.body;
				//let parentDob = this.from.dob;
				//if(!parentDob) throw 'UINode hasnt displayed yet so cant display edge from it, this='+this;
			
				//this.dob = Dob(parentDob,'div'); //put edge's div it in the div of the UINode its from.
				this.dob = Dob(parentDob,'div');
				this.dob.style.position = cssPositionType;
				//this.dob.style.height = '50px';
				//this.dob.style.width = '13px';
				//this.dob.style.width = '5px';
				//this.dob.style.width = '2px';
				//this.dob.style.height = '154px';
				//TODO css for angle
				//this.dob.style['background-color'] = randColorStr();
				this.dob.style.background = 'url('+typeToPic[this.type]+')';
				this.dob.style['z-index'] = -1;
			}
			

			//https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
			let diffY = this.to.pos[0]-this.from.pos[0];
			let diffX = this.to.pos[1]-this.from.pos[1];
			let diffLen = Math.hypot(diffY,diffX);
			this.dob.style.height = '2px';
			this.dob.style.width = Math.ceil(diffLen)+'px';
			let normY = between(-1,diffY/diffLen,1);
			let normX = between(-1,diffX/diffLen,1);
			//let angle = Math.asin(normY);
			
			
			let a = normX;
			let b = normY;
			let c = -normY;
			let d = normX;
			
			
			//let a = 1/Math.sqrt(2), b = 0, c = 0, d = 1/Math.sqrt(2);
			//let a = 1, b = 0, c = 0, d = 1;
			//let a = Math.sin(angle), b = Math.cos(angle), c = -Math.cos(angle), d = Math.sin(angle);
			//this.dob.style.width = '90px';
			//let a = -1, b = 0, c = 0, d = -1;
			//let a = 5, b = 0, c = 0, d = 5;
			
			//let a = 1;
			//let b = 2.1;//let b = .3;
			//let c = 0; //let c = -.1;
			//let d = 1;
			
			//let tx = 0;
			//let ty = 0;
			
			//midpoint cuz [style.transform matrix or matrix3d] uses center of dob as (0,0,0) instead of top left corner as usual in html and as usual in opengl and other 3d frameworks.
			//let ty = this.from.pos[0]+diffY/2;
			//let tx = this.from.pos[1]+diffX/2;
			let ty = (this.from.pos[0]+this.to.pos[0])/2;
			let tx = (this.from.pos[1]+this.to.pos[1])/2;
			//let ty = this.from.pos[0];
			//let tx = this.from.pos[1];
			//let ty = this.to.pos[0];
			//let tx = this.to.pos[1];
			tx -= diffLen/2; //without this, it appears to the right of where it should be, in some strange coordinate system that rotates around the middle of a div, or something.
			
			
			//a = diffY*.01;
			//d = diffX*.01;
			
			//if(this.type == 'l'){ ty += 20; tx += 20; }
			//if(this.type == 'r'){ ty += 35; tx += 35; }
			//if(this.type == 'e'){ ty += 50; tx += 50; }
			this.dob.style.transform = 'matrix('+a+','+b+','+c+','+d+','+tx+','+ty+')';
			//this.dob.style.transform = 'matrix3d('+a+','+b+',0,0,  '+c+','+d+',0,0,  0,0,1,0,  '+tx+','+ty+',0,1)';
			
			this.dob.style['background-position'] = edgeBackgroundOffset+'px';
			
		};
		*
	
	
		let dob = this.dobs.dragLine;		
		//this splate should be the TO, and another splate should be the FROM. Max 1 dragLine displayed at once on screen.
		let yxyx = dragLineFromYXToYX();
		if(!yxyx){
			if(options.allow_doDropCircMenu_afterClickWithoutDrag){
				console.log('This might be an "ugly hack" where a TO exists but not a FROM cuz of a click without a drag (which happens cuz merged clickCircMenu into dropCircMenu). Check the comment on isDisplayDragLine and allow_doDropCircMenu_afterClickWithoutDrag.');
			}else{
				throw 'No dragLineFromYXToYX, so not displaying dragLine, but why is isDisplayDragLine true? this='+this;
			}
		}else{
			let diffY = yxyx[2]-yxyx[0];
			let diffX = yxyx[3]-yxyx[1];
			let diffLen = Math.hypot(diffY,diffX);
			if(diffLen > 0){
				//FIXME got it wrong which of width vs height to make the thin dimensions when created that dob. flipping that here...
				dob.style.height = options.dragLineThick+'px';
				dob.style.width = Math.ceil(diffLen)+'px';
				dob.style.visibility = 'visible';
				let normY = between(-1,diffY/diffLen,1);
				let normX = between(-1,diffX/diffLen,1);
				let a = normX;
				let b = normY;
				let c = -normY;
				let d = normX;
				let ty = (yxyx[0]+yxyx[2])/2;
				let tx = (yxyx[1]+yxyx[3])/2;
				tx -= diffLen/2; //without this, it appears to the right of where it should be, in some strange coordinate system that rotates around the middle of a div, or something.
				dob.style.transform = 'matrix('+a+','+b+','+c+','+d+','+tx+','+ty+')';
				
				/*
				let len = Math.hypot(yxyx[0]-yxyx[2], yxyx[1]-yxyx[3]);
				//width is already set by something in options, when that dob is created.
				//TODO update it here every time in case options changes?
				dob.style.height = len+'px';
				let a = 1;
				let b = 0;
				let c = 0;
				let d = 1;
				let e = yxyx[3];
				let f = yxyx[2];
				dob.style.transform = 'matrix('+a+','+b+','+c+','+d+','+e+','+f+')';
				*
			}else{
				console.log('Not completely (maybe will display wrong?) displaying dragLine of length '+diffLen);
			}

		}
	}else{
		this.dobs.dragLine.style.visibility = 'hidden';
	}
	
	this.updateDobIconsVisibility();

};*/


//FIXME the icons and dragLine are being moved to uiState, and when thats working, will remove them from Splat and Splate.
Splat.prototype.updateDobIconsVisibility = function(forceThisValTrueOrFalse){
	//let isVisible = (forceThisValTrueOrFalse!==undefined) ? forceThisValTrueOrFalse : this.splate().isDisplayIcon;
	let isVisible = true; //FIXME
	//TODO if theres also a hardIcon (that snaps onto any corner or maybe few other places), do that too here.
	//this.dobs.looseIcon.style.display = this.splate().isDisplayIcon ? 'visible' : 'hidden';
	this.dobs.looseIcon.style.visibility = isVisible ? 'visible' : 'hidden';
}

/*
Splat.prototype.displayLocal = function(){
	console.log('Splat displayLocal this='+this);
	if(!this.dobs.self) throw 'No self dob';
	this.updateSelfDivStyle();
	let syty = this.splate.syty;
	if(this.splate.isDisplayPushAndPopChars){
		if(syty == 'U'){
			throw 'Dont look into the fractal (L U (R U))->U, isDisplayPushAndPopChars should be false and isDisplayName true and name should be U.';
		}
		let prefix = sytyToPushChar(syty);
		let suffix = sytyToPopChar(syty);
		//let prefix = syty=='U' ? '' : sytyToPushChar(syty);
		//let suffix = syty=='U' ? '' : sytyToPopChar(syty);
		//if(syty=='U' && !this.splate.isDisplayName){
		//	throw 'Must display name if its U
		//}
		if(this.splate.isDisplayName){
			//suffix += '#TODONAMEHERE';
			suffix += '#'+this.splate.name();
		}
		if(options.displayWholeTostringAtEachRect){
			suffix += '__'+this.splate.fn;
		}
		if(options.displaySplateDetailExceptFnAtEachRect){
			suffix += '__'+this.splate.toStringExceptFn();
		}
		suffix += '__isSelected='+this.isSelected();
		this.dobs.prefix.innerHTML = prefix;
		this.dobs.suffix.innerHTML = suffix;
	}else{
		if(syty == 'U'){
			if(!this.splate.isDisplayName){
				throw 'Must isDisplayName for leaf/U';
			}
		}
	}
};*/

/*
Splat.prototype.removeDobs = function(){
	for(let dobName in this.dobs){
		this.dobs[dobName].remove(); //remove from dom tree
		delete this.dobs[dobName];
	}
};

Splat.prototype.displayIn = function(dob){
	if(!dob) throw 'No param dob';

	//TODO merge duplicate code between displayIn and displayLocal

	console.log('Splat displayIn '+dob);
	const ThisSplat = this;
	if(this.dobs.self != dob){
		console.log('Splat replacing its dobs');
		dob.innerHTML = '';
		dob.addEventListener(
			'click',
			function(event){
				//console.log('click '+ThisSplat);
				//requestAnimationFrame(function(){
					//console.log('ThisSplat_isRoot='+(ThisSplat===rootSplat));
					setSelSplat(ThisSplat);
				//});
				event.stopPropagation();
			}
		);
		this.removeDobs();
		this.dobs.self = dob;
		this.createDobsIfNotExist();
		this.displayLocal();
	}
	if(this.splate.isOpen){
		//if(this.leftSplat){
			console.log('Splat displaying left child');
			//this.leftSplat.displayIn(this.dobs.left);
			this.L().displayIn(this.dobs.left);
		//}
		//if(this.rightSplat){
			console.log('Splat displaying right child');
			//this.rightSplat.displayIn(this.dobs.right);
			this.R().displayIn(this.dobs.right);
		//}
	}
};
*/

/*
var newSplateForFnAsRoot = function(fn){
	let syty = fnToSyty(fn);
	//FIXME should depend on parent syty, or parent of parent of parent... How did VM do it? Check vm.View.prototype.syty.
	let isDisplayPushAndPopChars = true;
	return new Splate(fn, syty, true, false, false, false, isDisplayPushAndPopChars, false, randRed(), randGreen(), randBlue()); //FIXME which true/falses?
};*/


//See "WARNING: this might display a fn.localName without its (...expanded definition...)"... in Wikibinator203VM.js.
var aViewer = new vm.Viewer();
//var aViewer = vm.getViewer();

var fnToView = fn=>aViewer.view(fn);


//creates sytys all the way down, on L and R childs of fn, but (FIXME verify) not past blob wrappers,
//and FIXME it should depend on splate.isOpen etc and maybe that of its childs (if parent isOpen but not 1 or both of its childs).
var fnToSyty = fn=>fnToView(fn).syty();


var fnIsLiteral = fn=>(fn.n.isCbt() || fn.n.isDouble() || fn.n.isTypeUtf8() || vm.isValidCanvas(fn));


//experimental cuz theres lots of isOpen, which could use alot of screen space with duplicate views of same fn, as fn is a forest.
//This is replacing newSplateForFnAsRoot but better cuz its stateless and doesnt have to be root, can be for any Splat in tree of Splats.
//
//Remember, a Split is immutable and can have many parents,
//but a Splat is mutable (its only state is Splate and dobs/domObjects derived from Splate) and always has exactly 1 Splate,
//and Split and Splat both contain only Splate and childs (of same type, Split vs Splat)).
//
//optionalCallerSyty defaults to 'C'. VM says "C is normal call (a b c d e) aka ((((a b) c) d) e)".
//UPDATE 2023-1, theres also optionalCallerCallerSyty which is needed for the <...> syntax.
//
//the callerSyty and isRightRecursion are similar to this code in prototype VM:
//	vm.Viewer.prototype.viewToStringRecurse = function(view, viewing, callerSyty, isRightRecursion)
//
//var newSplitForFn_experimental = function(fn, optionalCallerSyty, optionalIsRightRecursion){
var newSplitForFn_experimental = function(fn, optionalCallerSyty, optionalCallerCallerSyty, optionalIsRightRecursion, optionalForceFoldL){
	let callerSyty = optionalCallerSyty || 'C';
	
	//optionalCallerCallerSyty was added 2023-1-2 so ,x in (S ,x y) knows to not display the T/,
	//(S ,x y) aka <x y>. (S (S ,x y) z) aka (x y z), notice theres no T/, in the outer (...) cuz thats a ST3+, and the inner is a ST2.
	//You dont need optionalCallerCallerSyty for (...) or [...] or {...} syntax, just the new <...> syntax.
	//WAIT... why didnt i need that in Wikibinator203VM.jsw hich only uses callerSyty?
	let callerCallerSyty = optionalCallerCallerSyty || 'C';
	
	let isRightRecursion = !!optionalIsRightRecursion;
	
	let syty = fnToSyty(fn);
	//FIXME should depend on parent syty, or parent of parent of parent... How did VM do it? Check vm.View.prototype.syty.
	let isOpen = fn!==U; //aka !fn.n.isLeaf(). U is the universal combinator/lambda.
	//FIXME should there be a level of isOpen that just displays literal but not childs? literal could be big, so closed, literalOnly, open, could be 3 levels?
	let isOneLine = false;
	if(options.displayAllAsOneLine || (options.displayAllAsOneLineRandomlyTrueOrFalsePerBranch && Math.random()<.6)){
		isOneLine = true;
	}
	//let isLiteral = false;
	let isLiteral = fnIsLiteral(fn);
	//let isDisplayName = true;
	//FIXME, use name anyways (locid) if need a name to display the same fn multiple places (split can have multi parents, splat cant).
	let isDisplayName = !nameOfFnIsLocid(fn);
	if(isDisplayName){
		isOpen = false;
	}
	let isDisplayPushAndPopChars = isOpen && !isLiteral;
	let isDisplayChilds = isDisplayPushAndPopChars; //FIXME
	let isFoldL = false;
	if(optionalForceFoldL) isFoldL = true;
	let isFoldLL = false;
	let isUnary = false; //if true, display (T abc) as ,abc
	//if(options.displayVarargLists && (syty=='IC+' || syty=='IC0') && syty == 'IC+' && !isRightRecursion){
	//if(options.displayVarargLists && syty == 'IC+' && !isRightRecursion){
	if(options.foldOO && (vm.isFullD(fn) || vm.isFullDGo(fn))){ //fn is (D x), display as x$
		//isFoldL = false; //FIXME?
		//FIXME will need to display it as (...) instead of a/b/sum$ syntax if a b or c isnt certain kinds of small strings that can be literaled like that.
		isFoldL = true; //so [a/b^ hello/world/yo$] doesnt display any D or DGo
		isDisplayPushAndPopChars = true; //those will be push '' mid '' and pop '$'
		//pop char is $ cuz D or DGo
		//FIXMEFIXME display $ at end
	/*Du and DuGo replaced by P and PGo }else if(options.foldOO && (vm.isFullDu(fn) || vm.isFullDuGo(fn))){ //fn is (Du x), display as x^
		//isFoldL = false; //FIXME
		//FIXME will need to display it as (...) instead of a/b/sum$ syntax if a b or c isnt certain kinds of small strings that can be literaled like that.
		isFoldL = true; //so [a/b^ hello/world/yo$] doesnt display any Du or DuGo.
		isDisplayPushAndPopChars = true; //those will be push '' mid '' and pop '^'
		//pop char is ^ cuz Du or DuGo
		//FIXMEFIXME display $ at end
	*/
	}else if(options.foldOO && vm.isFullGOrGGo(fn)){ //fn is (G picA width) or (GGo things/pics/picA width), display as picA^width or things/pics/picA^width, for example.
		isFoldL = false; //false cuz in ((G picA) width) want to display the picA and width, and isFoldLL will avoid displaying the G
		isFoldLL = true;
		isDisplayPushAndPopChars = true;
	}else if(options.foldOO && vm.isFullPOrPGo(fn)){ //fn is (P x), display as x% or (PGo (GoO (OO x y) z)) display as x/y/z% etc.
		isFoldL = true;
		isDisplayPushAndPopChars = true;
	}else if(options.foldOO && vm.isFullBlOrBlGo(fn)){ //fn is (Bl x), display as x@ or (BlGo (GoO (OO x y) z)) display as x/y/z@ etc.
		isFoldL = true;
		isDisplayPushAndPopChars = true;
	}else if(options.foldOO && vm.isFullOOOrGoO(fn)){ //fn is (GoO a b) or (OO a b)
		isFoldL = false; //FIXME?
		isFoldLL = true;
		isDisplayPushAndPopChars = true; //pushChar '' midChar '/' popChar ''
		//FIXME need to fold the OO or GoO, but isFoldL here would wrongly fold (GoO a) or (OO a).
		//sytyToMidChar puts the '/'
	}else if(options.displayVarargLists && (callerSyty=='IC+' || callerSyty=='IC0') && syty == 'IC+' && !isRightRecursion){
		isDisplayPushAndPopChars = false;
		/*
		switch(syty){
			//isDisplayChilds can still be true, while this is false, which (TODO) happens to display {} [] () <> as vararg syntax.
			case 'IC+': //a call of Infcur aka [] aka a vararg list. syty IC0 is [] aka an empty list.
				//[] / Infcur list
				isDisplayPushAndPopChars = false;
			break;case 'C':case 'S1':
				//normal call pair
				isDisplayPushAndPopChars = false; //isDisplayChilds can still be true, while this is false, which (TODO) happens to display {} [] () <> as vararg syntax.	
			break;case 'S2':
				//FIXME only display fn.n.L().n.R() and fn.n.R(), but NOT fn.n.L().n.L() which is vm.ops.S. This is {...} syntax aka sCurryList.
				throw 'TODO';
			default:
				throw 'FIXME, unknown syty='+syty;
		}*/
	}else if(options.displayVarargNormalCallPairs && callerSyty == 'S0' && syty == 'S1'){
		isDisplayPushAndPopChars = false;
	}else if(options.displayVarargNormalCallPairs && callerSyty == 'C' && syty == 'C' && !isRightRecursion){
		isDisplayPushAndPopChars = false;
	//}else if(options.displayVarargS && callerSyty == 'S2' && syty == 'S1' && isDisplayChilds){
	//}else if(options.displayVarargST && (callerSyty == 'S_ST2' || callerSyty == 'S_ST3+')  && !isRightRecursion && isDisplayChilds){
	}else if(options.displayVarargST && (callerSyty == 'ST2' || callerSyty == 'ST3+')  && !isRightRecursion && isDisplayChilds){
		//also 'ST1' (and 'S_T1<>') here. Experimenting. FIXME???
		
		//fnToSyty(vm.eval('(S ,<a b>)'))+'    '+fnToSyty(vm.eval('(S ,[a b])')) --> 'S_T1<>    ST1'
		
		//when self is (S ,a) and selfSyty is ST1, callerSyty is ST2, 2022-1-2-1245pEST, it didnt match any of these if/else,
		//so it displays in tree UI as: <(S <b>T</b>a) b>.
		//I want it to instead NOTisDisplayPushAndPopChars for (...) there, isFoldL on the S,
		//and (it already does) isFoldL on the (T a). For the (T a) I'll probably need a new var in Splate,
		//cuz its already folding L (not displaying the left Splat of (T a) aka not displaying the T,
		//but the <b>T</b> is displayed as a pushChar (isDisplayPushAndPopChars is true).
		//Or maybe dont need a new var in Splat and use isDisplayPushAndPopChars of false instead. Try that first. TODO.
		
		
		isFoldL = true;
		isDisplayPushAndPopChars = false;
	}else if(options.displayVarargST && (callerSyty == 'S_ST2' || callerSyty == 'S_ST3+')  && !isRightRecursion && isDisplayChilds){
		//FIXME this is duplicate of code below, as of 2023-1-2-303pEST.
		isFoldL = true;
		isDisplayPushAndPopChars = false;
	}else if(options.displayVarargST && (callerSyty == 'S_ST2' || callerSyty == 'S_ST3+')  && isRightRecursion && isDisplayChilds){
		//2023-1-2-3pEST changed from !isRightRecursion to isRightRecursion, cuz left is S, and this is a ST2 or ST3+.
	
		//FIXME also 'ST1' (and 'S_T1<>') here? (moving that to the above else).
		
		//isFoldL = true; leave this as false. Example: This is (S ,a b) aka <a b>, inside (S (S ,a b) c) aka <a b c>.
		//Leave foldL as false so the ,a (or better if just a) is displayed.
		isDisplayPushAndPopChars = false;
	}else if(options.displayVarargS && callerSyty == 'S2' && syty == 'S1' && !isRightRecursion && isDisplayChilds){
		isFoldL = true;
		isDisplayPushAndPopChars = false;
		//isDisplayName = false; //FIXME what if need the name cuz multiple parents are displayed?
		//if(callerSyty == 'S1'){ //FIXME?
		//	isDisplayPushAndPopChars = false;
		//}
		//isDisplayPushAndPopChars = false; //FIXME??
	}else if(options.displayVarargS && syty == 'S2' && callerSyty == 'S1' && isDisplayChilds){
	//}else if(options.displayVarargS && syty == 'S2' && callerSyty == 'S1' && !isRightRecursion && isDisplayChilds){
		isDisplayPushAndPopChars = false;
		//isDisplayName = false; //FIXME what if need the name cuz multiple parents are displayed?
	}
	
	/*if(options.displayVarargNormalCallPairs){
		if(syty=='C' && callerSyty=='C' && isDisplayChilds){
			//Display as (abc def ghi) instead of ((abc def) ghi)
			isDisplayPushAndPopChars = false;
		}
	}*/
	
	//isDisplayPushAndPopChars = !isLiteral; //FIXME
	
	
	if(options.displayVarargLists && (syty=='IC0' || syty=='IC+') /*&& callerSyty=='IC+'*/ && isDisplayChilds){
		//FIXME should have 3 sytys for Infcur/[] (IC0 and IC1 and IC2+), instead of 2 (IC0 and IC+),
		//so dont have to check if left is IC0 here.
		
		let leftSyty = fnToSyty(fn.n.L()); //FIXME avoid triggering lazyEval of creating fn.n.l? Does this ever do that? Thats mostly for blobs.
		if(leftSyty == 'IC0'){
			//aka left is Infcur/[]. Display as [abc] instead of ([] abc) aka instead of (Infcur abc).
			isFoldL = true;
			//isDisplayPushAndPopChars = false;
		}	
	}
	
	//if(options.foldT && syty=='T1' && isDisplayChilds){
	if(options.foldT && (syty=='T1' || syty=='T1<>') && isDisplayChilds){
		//FIXME it still displays '<b>T</b>' in the same place it displays { [ (, even though its technically folding the left child,
		//there should be another var (TODO) to tell it not to display that. Also theres syty of 'T1<>' such as (T <a b c>) aka ,<a b c>.
		isFoldL = true;
		if(callerCallerSyty == 'ST2' || callerCallerSyty == 'ST3+'){
			isDisplayPushAndPopChars = false;
		}
		isUnary = true;
	}
	
	if(isFoldL && isFoldLL){
		throw 'Cant be both isFoldL and isFoldLL. fn='+fn;
	}
	
	//let isShowDropDobs = isOpen;
	//let isShowDropDobs = false;
	let isShowDropDobs = options.alwaysShowDropDobs;
	//let isShowDropDobs = true;
	let isSelected = false;
	let red = randRed(); //FIXME should be deterministic
	let green = randGreen(); //FIXME should be deterministic
	let blue = randBlue(); //FIXME should be deterministic
	//let isDisplayIcon = true; //FIXME
	let isDisplayIcon = false; //FIXME
	//let looseIconYFraction = Math.random(); //FIXME
	//let looseIconXFraction = Math.random(); //FIXME
	let looseIconYFraction = .5;
	let looseIconXFraction = .5;
	let linePath = ''; //FIXME
	let dragStep = 'no'; //no, wouldFrom, from, wouldTo, to, dropCircMenu. also adding 'clickcirc' 2022-12-18+.
	let splate = new Splate(fn, syty, isOpen, isOneLine, isLiteral, isDisplayName, isDisplayPushAndPopChars, isDisplayChilds, isFoldL, isFoldLL, isUnary, isShowDropDobs, isSelected, red, green, blue,
		isDisplayIcon, looseIconYFraction, looseIconXFraction, linePath, dragStep);
	let leftSplit = null;
	let rightSplit = null;
	//if(isOpen && isDisplayPushAndPopChars){
	if(isDisplayChilds){
		//leftSplit = newSplitForFn_experimental(fn.n.L(),syty,false); //callerSyty
		//rightSplit = newSplitForFn_experimental(fn.n.R(),syty,true); //callerSyty
		//transfer isFoldLL to isFoldL in left child.
		leftSplit = newSplitForFn_experimental(fn.n.L(),syty,callerSyty,false,isFoldLL); //fn,callerSyty,callerCallerSyty,left,forceFoldL
		rightSplit = newSplitForFn_experimental(fn.n.R(),syty,callerSyty,true,false); //fn,callerSyty,callerCallerSyty,right,forceFoldL
	}
	return getSplit(splate,leftSplit,rightSplit);
};

/*
//After you add a dragStep to some splat, call this to remove or change dragSteps anywhere reachable from rootSplat.
//DragStep can be any of 'no', 'wouldFrom', 'from', 'wouldTo', 'to'.
//TODO find a way to do this without multiple screen updates at once (though might be fast enuf anyways?).
//
//The allowed combos of dragStep are:
//* everything is 'no'
//* everything is 'no' except 1 is 'wouldFrom'
//* everything is 'no' except 1 is 'from'
//* everything is 'no' except 1 is 'from' and 1 is 'wouldTo' (might need to change a 'wouldFrom' to a 'from')
//* everything is 'no' except 1 is 'from' and 1 is 'to' (from here, its time to call lambda based on the drag, and go back to "everything is 'no'"). (might need to change a 'wouldFrom' to a 'from')
//
//There should be at most 1 wouldFrom or from, and at most 1 wouldTo or to, and there are other rules about it.
var adjustDragStuff = ()=>{
	//count the number of *froms and *tos etc.
	let counts = countDragSteps();
	let countTwoKindsOfFroms = counts.wouldFrom+count.from;
	let countTwoKindsOfTos = counts.wouldTo+count.to;
	
	throw 'TODO';
	
	
	//check if theres a 'to'.
	throw 'TODO';
};
*/

/*
FIXME it cant be keyed by splits cuz they can exist in multiple places. has to be splats or paths/splat.ptr().
//ForkEdits a split. Only recurses using isDisplayL and isDisplayR.
//Example 2 dragSteps: 'from' and 'wouldTo'. ForkEdits rootSplat's split to change all other dragSteps to 'no' and those 2 (if they exist) to the given dragSteps.
Split.prototype.setDragStuff = (splitA, dragStepA, splitB, dragStepB)=>{
	if(splitA.eq(splitB) && dragStepA!=dragStepB) throw 'splitA eq splitB but dragStepA='+dragStepA+' and dragStepB='+dragStepB;
	let ret = this;
	if(ret.eq(splitA)){
		ret = ret.setDragStep(dragStepA); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
	}else if(ret.eq(splitB)){
		ret = ret.setDragStep(dragStepB); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
	}else{
		ret = ret.setDragStep('no'); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
	}
	//TODO optimize dont need 2 calls of getSplit if its recursing into both childs.
	if(ret.isDisplayL()){
		ret = getSplit(this.splate, this.leftSplit.setDragStuff(splitA, dragStepA, splitB, dragStepB), this.rightSplit);
	}
	if(ret.isDisplayR()){
		ret = getSplit(this.splate, this.leftSplit, this.rightSplit.setDragStuff(splitA, dragStepA, splitB, dragStepB));
	}
	return ret;
};
*/

Splat.prototype.doStartClickCirc = function(looseIconYFraction,looseIconXFraction){
	let wouldfromOrFrom = findSplatWithDragStep('from') || findSplatWithDragStep('wouldFrom'); //wouldFrom happens when mouseover, before click any mouse button.
	if(!wouldfromOrFrom) throw 'No splat with dragStep of "from" or "wouldFrom", so cant doStartClickCirc';
	 //update click position slightly, but most importantly, set that splat's dragStep to 'clickcirc' so clickCircMenu appears around it when updateOverlays is called.
	 
	//give looseIconYFraction here which may slightly differ from its current fraction
	globalVars.dropCircMenuCenterY = this.screenYOfLooseIconYFraction(looseIconYFraction);
	globalVars.dropCircMenuCenterX = this.screenXOfLooseIconXFraction(looseIconXFraction);
	
	this.transformSplate(splate=>splate.setLooseIconYFraction(looseIconYFraction).setLooseIconXFraction(looseIconXFraction).setDragStep('clickcirc'));
	//that transformSplate should have updated display since it calls setSplit
	//updateOverlays(); //FIXME should this be here? Does transformSplate do it?
};


//no, wouldFrom, from, wouldTo, to, dropCircMenu.
//var findSplatWithDragStep = dragStep=>rootSplat.findFirst(splat=>(dragStep===splat.splate().dragStep));
var findSplatWithDragStep = dragStep=>(uiState.dragSteps[dragStep] || null);

//filter(splate)->true or false. Finds the first one like that, else (TODO verify its null instead of undefined) null.
var findSplat = filter=>rootSplat.findFirst(filter);

//makes dragStep 'wouldFrom' appear here, the drag that would start here if mouse button went down.
//Normally this happens many times before dragging, many times per second while moving mouse.
Splat.prototype.doBeforeDrag = function(looseIconYFraction,looseIconXFraction){
	//console.log('doBeforeDrag looseIconYFraction='+looseIconYFraction);
	let countBefore = countCallsOf_setSplit;
	
	//this.transformSplate(splate=>splate.setLooseIconYFraction(looseIconYFraction).setLooseIconXFraction(looseIconXFraction));
	this.setIconStuffInUiStateIfs(looseIconYFraction, looseIconXFraction); //leave off optionalIsDisplayIcon param so it doesnt change that.
	
	let count = countCallsOf_setSplit-countBefore;
	if(vm.loglev>1) console.log('doBeforeDrag change of countCallsOf_setSplit is '+count);
	//TODO optimize dont update screen until setDragStuff?
	setDragStuff(this,'wouldFrom',null,null);
};

//set my dragStep to 'from'. Normally my prev dragStep is 'wouldFrom' but UI events might if fast enuf skip that
//or mouse might have moved over a different splat before it had time to create a 'wouldFrom'.
Splat.prototype.doStartDrag = function(looseIconYFraction,looseIconXFraction){
	//console.log('doStartDrag');
	//console.log('doStartDrag wouldFrom='+findSplatWithDragStep('wouldFrom'));
	//console.log('doStartDrag from='+findSplatWithDragStep('from'));
	this.transformSplate(splate=>splate.setLooseIconYFraction(looseIconYFraction).setLooseIconXFraction(looseIconXFraction));
	//TODO optimize dont update screen until setDragStuff?
	let wouldfromOrFrom = findSplatWithDragStep('from') || findSplatWithDragStep('wouldFrom');
	if(!wouldfromOrFrom) throw 'No splat with dragStep of "from" or "wouldFrom", so cant doStartDrag';
	setDragStuff(wouldfromOrFrom,'from',null,null);
};

//when mouse button down on a splat  (TODO and there might be multiple drag modes?),
//then it will create wouldFrom dragStep in whatever mouse moves over, before changing that to 'to' when mouse button up.
var isStartedDrag = ()=>!!findSplatWithDragStep('from');

const twoPi = 2*Math.PI;

const halfPi = Math.PI/2;

//makes dragStep 'wouldTo' appear here (and the first 'wouldFrom' or 'from' dragStep becomes the only 'from').
//A line (TODO) appears between the 'from' and 'wouldTo', of the possible drag that would happen if release mouse button.
//Normally this happens many times during dragging, many times per second while moving mouse.
Splat.prototype.doDuringDrag = function(looseIconYFraction,looseIconXFraction){
	//console.log('doDuringDrag');
	let wouldfromOrFrom = findSplatWithDragStep('from') || findSplatWithDragStep('wouldFrom');
	if(!wouldfromOrFrom) throw 'No splat with dragStep of "from" or "wouldFrom", so cant doDuringDrag';
	if(!options.allowDragToAndFromSameSplat && wouldfromOrFrom === this){
		if(options.logNotDraggingToAndFromSameSplat) console.log('Not dragging from and to same splat. FIXME that should be allowed (maybe have dragStepFrom and dragStepTo fields instead of just dragStep?), but for now Im just trying to get drag and drop working at all. this='+this);
	}else{
		//this.transformSplate(splate=>splate.setLooseIconYFraction(looseIconYFraction).setLooseIconXFraction(looseIconXFraction));
		this.setIconStuffInUiStateIfs(looseIconYFraction, looseIconXFraction); //leave off optionalIsDisplayIcon param so it doesnt change that.
		//TODO optimize dont update screen until setDragStuff?
		setDragStuff(wouldfromOrFrom,'from',this,'wouldTo');
	}
};

var doDropCircMenuOrHasPreChosen = ()=>{
	let hasPrechosen = preChoosePopupIcon!=-1;
	if(hasPrechosen){
		console.log('doDropCircMenuOrHasPreChosen skipping popup menu, preChoosePopupIcon='+preChoosePopupIcon+' pic='+dropCircMenu[preChoosePopupIcon].pic);
		doEndDrag(dropCircMenu[preChoosePopupIcon]);
	}else{
		doDropCircMenu();
	}
};

//changes whatever splat.splate().dragStep is 'to', changes it to 'dropCircMenu', which is second last part of a drag.
//After user chooses one of the icons displayed in the circle,
//lambda is called on lambda to find/create lambda (by doEndDrag)
//and the result is put in the tree of splats where dragged to (or whatever the action says to do there).
var doDropCircMenu = ()=>{
	//let toSplat = findSplatWithDragStep('to');
	let toSplat = anytoSplat(); //wouldTo, to, or dropCircMenu
	let dropMenuAtSplat = toSplat;
	if(!dropMenuAtSplat){
		if(options.allow_doDropCircMenu_afterClickWithoutDrag){
			dropMenuAtSplat = anyfromSplat();
		}else{
			throw 'No dragStep of "to" so cant doDropCircMenu';
		}
	}
	//let dragStep = dropMenuAtSplat.splate().dragStep;
	//if(dragStep == 'wouldTo' || dragStep == 'to'){ //is starting dropCircMenu, so set its position.
	if(uiState.dragSteps.wouldTo==dropMenuAtSplat || uiState.dragSteps.to==dropMenuAtSplat){ //is starting dropCircMenu, so set its position.
		globalVars.dropCircMenuCenterY = controls.mouseY;
		globalVars.dropCircMenuCenterX = controls.mouseX;
	}
	
	
	//dropMenuAtSplat.transformSplate(splate=>splate.setDragStep('dropCircMenu'));
	dropMenuAtSplat.setDragStepAndInSomeCasesUnsetOthers('dropCircMenu');
	
	
	updateOverlays();
};


/*var get_splatClickedWhenCircMenuAppears_elseThrow = ()=>{
	if(!uiState.splatClickedWhenCircMenuAppears){
		throw 'No uiState.splatClickedWhenCircMenuAppears, so it appears you didnt click to make clickCircMenu appear. Its normally set in doClickCircMenu to remember which splat was clicked after mouse moves to choose an icon in that menu.';
	}
	return uiState.splatClickedWhenCircMenuAppears;
};*/

//append here instead of
var debugLogg = [];
var maxDebugLogListLen = 100000;
var shrinkToDebugLogListLen = Math.ceil(maxDebugLogListLen/2);
var debugLog = x=>{
	debugLogg.push(x);
	if(debugLogg.length > maxDebugLogListLen){
		console.log('Shrinking debugLogg');
		debugLogg = debugLogg.slice(debugLogg.length-shrinkToDebugLogListLen, debugLogg.length); //keep last shrinkToDebugLogListLen
	}
	console.log('DEBUGLOG: '+JSON.stringify(x));
};

var onDomEvent = event=>{
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) debugLog({type:'domEvent', deType:event.type, deButtons:event.buttons, deButton:event.button, deEventPhase:event.eventPhase});
	if(options.do_mouseOverSplatToStringCode && event.type=='mousemove'){
		let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
		if(splatfyfx){
			let splat = splatfyfx.splat;
			let code = Dob('mouseOverSplatToStringCode').value.trim();
			if(code){
				try{
					let func = eval(code);
					let out = func(splat);
					Dob('mouseOverSplatToStringCode_out').innerHTML = ''+out;
				}catch(e){
					Dob('mouseOverSplatToStringCode_out').innerHTML = 'ERROR: '+e;
					throw e;
				}
			}
		}
	}
};

/*
//theres 2 circMenus: (left mouse button) drag and (right mouse button) click.
var doClickCircMenu = ()=>{
	//let toSplat = findSplatWithDragStep('to');
	//let toSplat = anytoSplat(); //wouldTo, to, or dropCircMenu
	//let toSplat = splatAtYX(controls.mouseY,controls.mouseX);
	
	//parent or self of splat, depending on height of mouse in spat. bottom half is parent. top half is self.
	let toSplat = getSplatMouseIsOverElseNull();
	
	if(!toSplat) throw 'In doClickCircMenu, splatAtYX didnt find a splat at y='+controls.mouseY+' x='+controls.mouseX;
	//let dragStep = toSplat.splate().dragStep;
	//if(dragStep == 'wouldTo' || dragStep == 'to'){ //is starting dropCircMenu, so set its position.
		globalVars.dropCircMenuCenterY = controls.mouseY;
		globalVars.dropCircMenuCenterX = controls.mouseX;
		
		//remember this so funcs in clickCircMenu (such as clickCopy and clickPaste)
		//use the splat clicked here instead of the splat the mouse is over when touches an icon near it.
		//nevermind, use anyclickcircSplat() instead, which uses spate.dragStep of 'clickcirc': uiState.splatClickedWhenCircMenuAppears = toSplat;
	//}
	//toSplat.transformSplate(splate=>splate.setDragStep('dropCircMenu'));
	updateOverlays();
};
*/

//called after a drag and drop.
var afterDrop = ()=>{
	if(options.refillTimeAndMemoryEtcAfterEachDrop){
		vm.refill();
	}
	if(Dob('alwaysForceUpdateDisplayAfterDrop').checked){
		console.log('forceUpdateDisplay cuz alwaysForceUpdateDisplayAfterDrop. FIXME this shouldnt be needed but the UI is buggy as of 2022-12-30. Bug: It displays extra {{a b} c} [[a b] c] ((a b) c) when theyre not needed on the left. Bug: it displays an earlier, or somehow different, form of fn before it evals, when dragging sometimes.');
		forceUpdateDisplay();
	}//else{
		//updateOverlays(); //the smaller update. FIXME?: Really I just want this part for options.highlightWhatWasJustDropped. but it didnt do that.
	//}
};

//when mouse button up on a splat (TODO and there might be multiple drag modes?).
//When this is true, call doEndDrag to call fn on fn to find/create fn, of what was dragged.
//var isAboutToEndDrag = ()=>(findSplatWithDragStep('from') && findSplatWithDragStep('to'));

//Param is anything in dropCircMenu, such as dropCircMenu[4], or anything of same datastruct.
//After doBeforeDrag, doStartDrag, doDuringDrag, and check isAboutToEndDrag (wait for it to be true), call this doEndDrag.
//This calls fn on fn to find/create fn, of what was dragged.
var doEndDrag = dropCircMenuItem=>{
	console.log('START doEndDrag dropCircMenuItem.pic='+dropCircMenuItem.pic);
	dropCircMenuItem.func(); //call lambda on lambda to find/create lambda (or whatever the menu item does, such as cancel the dragAndDrop)
	
	//FIXME? this line was added before there were 2 circ menus (dropCircMenu and clickCircMenu). This was just for dropCircMenu.
	setDragStuff(null,null,null,null); //set all dragStep to 'no', ready for next drag.
	uiState.removeClickCircMenuAsap = true;
	
	change_dropCircMenu_to_ghost();
	
	afterDrop();
	
	console.log('END doEndDrag dropCircMenuItem.pic='+dropCircMenuItem.pic);
	/*
	return;
	console.log('doEndDrag');
	//TODO optimize dont update screen until setDragStuff?
	//if(!isAboutToEndDrag()){
	//	throw 'Not isAboutToEndDrag so cant doEndDrag';
	//}
	let fromSplat = anyfromSplat();
	let toSplat = anytoSplat();
	if(!fromSplat) throw 'No from or wouldFrom Splat so cant doEndDrag';
	if(!toSplat) throw 'No to or wouldTo Splat so cant doEndDrag';
	console.log('TODO doEndDrag');
	*/
};


//finds the first Splat, in depth-first order of leftSplat and rightSplat childs (but not past where Split does not display),
//that matches query(splat)->true, else returns null if none found.
Splat.prototype.findFirst = function(query){
	if(query(this)) return this;
	if(this.isDisplayR()){
		let findInR = this.R().findFirst(query);
		if(findInR) return findInR;
	}
	if(this.isDisplayL()){
		let findInL = this.L().findFirst(query);
		if(findInL) return findInL;
	}
	return null; //not found
};

//remove it from values of uiState.dragSteps
var removeSplatFromDragSteps = splat=>{
	for(let dragStep in uiState.dragSteps){
		if(uiState.dragSteps[dragStep] == splat){
			uiState.dragSteps[dragStep] = null;
		}
	}
};

//replaces rootSplat.split. splatA andOr splatB can be null to ignore those pairs of params.
var setDragStuff = function(splatA, dragStepA, splatB, dragStepB){
	if(splatA){
		splatA.setDragStepAndInSomeCasesUnsetOthers(dragStepA);
	}
	if(splatB){
		splatB.setDragStepAndInSomeCasesUnsetOthers(dragStepB);
	}
	setDragStep(splatB,dragStepB);
	/*if(dragStepA == 'no'){
		dragStepA = null;
	}
	if(dragStepB == 'no'){
		dragStepB = null;
	}
	if(splatA){
		removeSplatFromDragSteps(splatA);
		uiState.dragSteps[dragStepA] = splatA;
	}
	if(splatB){
		removeSplatFromDragSteps(splatB);
		uiState.dragSteps[dragStepB] = splatB;
	}*/
};
/*
//replaces rootSplat.split. splatA andOr splatB can be null to ignore those pairs of params.
var setDragStuff = function(splatA, dragStepA, splatB, dragStepB){
	/*if(!splatA){
		splatA = rootSplat;
		dragStepA = 'no';
	}
	this might cause problem if splatA and splatB end up being same splat, so do this in forkDragStuff instead.
	if(!splatB){
		splatB = rootSplat;
		dragStepB = 'no';
	}*
	
	if(options.loglev > 2){
		//FIXME remove these lines of test code
		let clickcirc = anyclickcircSplat();
		if(clickcirc){
			console.log('setDragStuff circtest clickcirc='+clickcirc+' other... dragStepA='+dragStepA+' dragStepB='+dragStepB);
		}else{
			console.log('setDragStuff circtest clickcirc='+clickcirc+' other... not displaying');
		}
		//end FIXME.
	}
	
	rootSplat.transformSplit(split=>split.forkDragStuff(rootSplat, splatA, dragStepA, splatB, dragStepB));
};
*/

//returns a Split to replace this one. splatA andOr splatB can be null to ignore those (TODO test),
//and sets isDisplayIcon to false where dragStep is 'no' and everywhere else (at most 2 splats) sets it to true.
Split.prototype.forkDragStuff = function(splatSelf, splatA, dragStepA, splatB, dragStepB){
	//FIXME might need to setIsDisplayIcon(isDisplayIcon) to false. If extra icons appear, this is probably causing it,
	//but maybe ".setDragStep('no').setIsDisplayIcon(false)" fixes it?
	if(!this.eq(splatSelf.split)) throw 'splatSelf.split is not me';
	if(splatA===splatB && dragStepA!=dragStepB){
		throw 'splatA===splatB but dragStepA='+dragStepA+' and dragStepB='+dragStepB;
	}
	let ret = this;
	//let splitA = (splatA ? splatA.split : null);
	//let splitB = (splatB ? splatB.split : null);
	//if(ret.eq(splitA)){
	if(splatSelf === splatA){
		//ret = ret.setDragStep(dragStepA); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
		ret = ret.transformSplate(splate=>splate.setDragStep(dragStepA).setIsDisplayIcon(true));
	//}else if(ret.eq(splitB)){
	}else if(splatSelf === splatB){
		//ret = ret.setDragStep(dragStepB); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
		ret = ret.transformSplate(splate=>splate.setDragStep(dragStepB).setIsDisplayIcon(true));
	}else{
		//ret = ret.setDragStep('no'); //TODO optimize by setDragStep etc checking if its already that so can return same split if so.
		ret = ret.transformSplate(splate=>splate.setDragStep('no').setIsDisplayIcon(false));
	}
	//TODO optimize dont need 2 calls of getSplit if its recursing into both childs.
	if(ret.isDisplayL()){
		//FIXME check if leftSplat exists (instead of creating if it it doesnt)?
		//ret = getSplit(ret.splate, ret.leftSplit.forkDragStuff(splatSelf.L(), splatA, dragStepA, splatB, dragStepB), ret.rightSplit);
		ret = ret.setL(ret.leftSplit.forkDragStuff(splatSelf.L(), splatA, dragStepA, splatB, dragStepB));
	}
	if(ret.isDisplayR()){
		//FIXME check if rightSplat exists (instead of creating if it it doesnt)?
		//ret = getSplit(ret.splate, ret.leftSplit, ret.rightSplit.forkDragStuff(splatSelf.R(), splatA, dragStepA, splatB, dragStepB));
		ret = ret.setR(ret.rightSplit.forkDragStuff(splatSelf.R(), splatA, dragStepA, splatB, dragStepB));
	}
	return ret;
};

/*
//both params are optional.
//returns something like {no: 500, wouldFrom: 0, from: 1, wouldTo: 0, to:1}.
var countDragSteps = (splat,map)=>{
	throw 'FIXME isDisplayL etc are in split, not splat.';
	if(!splat) splat = rootSplat;
	if(!map) map = {no: 0, wouldFrom: 0, from: 0, wouldTo: 0, to:0};
	let ds = splat.splate().dragStep;
	map[ds]++;
	if(splat.isDisplayL()){
		countDragSteps(splat.leftSplat,map);
	}
	if(splat.isDisplayR()){
		countDragSteps(splat.rightSplat,map);
	}
	return map;
};*/

//Should there be funcs for start dragging, stop dragging, etc, with a splat param?


//this is for U.
var defaultSplit = newSplitForFn_experimental(U);
//var defaultSplate = new Splate(U, 'C', false, true, false, true, false);


/*
//draggable tree node, view of a fn/lambda as a var size list or literal. Literals can be text, sounds, canvas bytes, etc.
var Branch = function(split){

	FIXME, should Branch be immutable (other than maybe some dob/domObject optimizations)?
	Yes, do that. But optimize for reusing canvas(es) for low lag cuz changing dom tree maybe is not as fast as video frames in canvas.
	Might cause a problem with renaming #Names after theyre displayed.
	Maybe Names and literals(like a pic displayed in canvas, changing every 1/60 second for interactive video) should
	be in a separate js type than Branch, so they can update on their own, without changing size, and without interfering
	with the Branch objects?
	Should each Branch take a height and width in its constructor, maybe in units of monospaced chars?
		That could be a problem for magnifying/shrinking big names to fit in the same space.
	Imagine dragging a Branch (a rectangle on screen) onto another Branch to call it, in {} [] () or <>.
		Just making the tree causes the call.
	Fixing some of that using the Split class which is an immutable view of 
		
	
	//this.fn = fn;
	this.split = split;
	
	//or if its displayed as just a Name# (defined somewhere else) then no prefix or suffix.
	this.prefix = ''; //Examples: [ { ( <
	this.suffix = ''; //Examples: ] } ) >
	
	//dom object, maybe a div. div may contain canvas andOr child Branchs.
	//Contains childsDob and maybe other stuff (such as displaying this.prefix and this.suffix left of it tabbed over).
	this.dob = null;
	
	this.prefixDob = null;
	
	//TODO move Name# to end instead of start, so its (...)#Name, cuz theres more room on the closing paren/etc, often in its own line.
	//and cuz you cant use #Name before its (...) is defined, so you cant create cycles in the lambda forest.
	this.nameDob = null;
	
	//may be a canvas or text or 0x45f9 cbt or 2.34 number or localId or globalId etc.
	//This must be used if !this.treeOpen
	this.literalDob = null;
	
	//inside this.dob, near this.prefix. controlsDob has a checkbox to change this.treeOpen
	//and maybe other controls to change how things are displayed.
	//TODO where is this.fn dragged from?
	this.controlsDob = null;
	
	//tabbed over 1 tab to the right of this.prefix, and this.suffix is down right from childsDob and is on its own line,
	//or if its all on 1 line then childsDob is between this.prefix on its left and this.suffix on its right with no tabs.
	//childsDob contains all Branchs in this.childs, if this.treeOpen, else is empty/hidden/etc.
	this.childsDob = null;
	
	this.suffixDob = null;
	
	FIXME should there be Branch for every fn or just one per var size list?
	
	//child Branchs. They may or may not be displayed.
	this.childs = [];
	
	//If false, this is displayed as this.fn.n.locid() (string form of 128 bit local id). If true, childs are displayed.
	this.treeOpen = true;
	
	//If childs fit on 1 line, then set this to true. Starts false in case they dont,
	//since fn hasnt been tostringed to know how big its code is, which parts are displayed etc.
	//If one line, then this.prefix is leftmost and this.suffix is rightmost (around other contents) in same line.
	this.isOneLine = false;
};

Branch.prototype.display = function(){
	throw 'TODO';
};
*/

//FIXME use css clip of circle, or rename this to square or rect.
//a colored circle with optional text 
var Circ = function(y, x, radius, red, green, blue, optionalText){
	this.y = y;
	this.x = x;
	this.radius = radius;
	this.red = red;
	this.green = green;
	this.blue = blue;
	this.text = optionalText || '';
	//this.dob = null; //probably a div. created by display func.
};

Circ.prototype.display = function(){
	throw 'TODO';
	this.dob = null; //probably a div. created by display func.
};

/*
//a colored line between 2 circs. circFrom chooses color. thick is how many pixels thick the line is. Can be at angles.
var Line = function(circFrom, circTo, thick){
	this.circFrom = circFrom;
	this.circTo = circTo;
	this.thick = thick;
};
*/
var Line = function(yFrom, xFrom, yTo, xTo, thick, red, green, blue){
	this.yFrom = yFrom;
	this.xFrom = xFrom;
	this.yTo = yTo;
	this.xTo = xTo;
	this.thick = thick;
	this.red = red;
	this.green = green;
	this.blue = blue;
};

Line.prototype.display = function(){
	throw 'TODO';
};

//instances of Line
var lines = [];

//instances of Circ
var circs = [];


//var rebuildLinesAndCircsBy

//should only call this if !this.isDisplayL() and !this.isDisplayR(), such as if only a literal or Name# is displayed here,
//but even if so, they could be just closed (!splate.isOpen) which might have the same or similar effect?
//A call of setSplit after this would create them again if needed.
Splat.prototype.deleteChildSplats = function(){
	this.leftSplat = null;
	this.rightSplat = null;
	if(this.dobs.left){
		this.dobs.left.innerHTML = '';
	}
	if(this.dobs.right){
		this.dobs.right.innerHTML = '';
	}
};

//a root splat, such as rootSplat or dragSplat.
Splat.prototype.isRoot = function(){
	return !this.parentSplat;
};

Splat.prototype.isRightChild = function(){
	return this.parentSplat && this.parentSplat.rightSplat===this;
};

Splat.prototype.syty = function(){
	return this.splate().syty; //'C' is normalCallPair
};

Splat.prototype.callerSyty = function(){
	//TODO merge callerSyty and parentSyty and maybe parentParentSyty
	return this.parentSplat ? this.parentSplat.splate().syty : 'C'; //'C' is normalCallPair
};

Splat.prototype.pathFromRoot = function(){
	if(this.isRoot()) return 'X';
	return this.parentSplat.pathFromRoot()+(this.isRightChild() ? 'R' : 'L');
};

//returns a Split to set in a root Splat.
//Use this way: rootSplat.setSplit(aSplat.forkRootSplit_randomizeColor())
Splat.prototype.forkRootSplit_randomizeColor = function(){
	return this.forkRootSplate(this.splate().setRGB(randRed(),randGreen(),randBlue()));
};

Splat.prototype.forkRootSplit_randomizeColor_inRootSplat = function(){
	rootSplat.setSplit(this.forkRootSplit_randomizeColor());
};

//Forks me (in fork of rootSplat) to have this.preferredColorStr(), or a given color.
//2023-1-1 I like the randomizing of color when mouseover so am keeping that, at least for now,
//but some splats should be displayed a certain color, such as highlight what was just dropped.
Splat.prototype.forkRoot_setColor = function(optionalListOfRedGreenBlue){
	let color = optionalListOfRedGreenBlue || this.preferredColor();
	rootSplat.setSplit(this.forkRootSplate(this.splate().setRGB(color[0],color[1],color[2]))); //red green blue
};

//2023-1-1 I like the randomizing of color when mouseover so am keeping that, at least for now,
//but some splats should be displayed a certain color, such as highlight what was just dropped.
Splat.prototype.preferredColor = function(){
	if(false && (options.highlightWhatWasJustDropped && uiState.simpleDragUimode_cursor_splat == this)){
		/*if(options.highlightWhatWasJustDropped){
			if(uiState.simpleDragUimode_cursor_splat && uiState.simpleDragUimode_cursor_splat.dobs.self){
				uiState.simpleDragUimode_cursor_splat.dobs.self.style.backgroundColor = '#'+options.highlightWhatWasJustDropped_color.join('');
			}
		}*/
		return options.highlightWhatWasJustDropped_color; //[red,green,blue], each 0..255.
	}else{
		return [randRed(),randGreen(),randBlue()];
	}
};

//returns a Split for use in a root Splat, cuz Splat is mutable and Split and Splate are used as immutable.
//UPDATE: param is a split, not a splate. If you want a splate instead, you can reuse the 2 child splits with a different splate here.
//goes all the way up to a root splate (such as rootSplat or dragSplat).
//Returns a Split that you'd use in thatRoot.setSplit, that has deep inside it this splat's splate set to the given splate.
//Split is (used as) immutable and can have multi parents. Splat is mutable and has at most 1. Both have a splate.
//
//TODO if replaceWithThisSplit has a different fn than the current fn, do those lambda calls all the way up to root,
//which may (in some cases of VarargAx opcode) cause it to infiniteLoop
//(TODO get vm.stackTime vm.stackMem etc working so it wont infinite loop and would run out of compute resources instead).
//
Splat.prototype.forkRootSplit = function(replaceWithThisSplit){
	if(vm.loglev>=2) console.log('forkRootSplit height='+this.height());
	if(!this.parentSplat){ //this is root
		return replaceWithThisSplit;
	}
	let splate = this.splate();
	let isRightChild = this.parentSplat.rightSplat===this;
	let nextParentSplit;
	let oldParentSplit = this.parentSplat.split;
	let nextParentSplate = oldParentSplit.splate;
	
	let oldFn = splate.fn;
	let nextFn = replaceWithThisSplit.splate.fn;
	//same as comparing by 128 bit local id, not global id (fn.n.id() or fn.n.fullId()) aka forest shape.
	let fnMaybeChanged = oldFn !== nextFn;
	
	let oldParentFn = oldParentSplit.splate.fn;
	
	if(isRightChild){
		//nextParentSplit = getSplit(this.parentSplat.split.splate, this.parentSplat.leftSplat.split, replaceWithThisSplit, this.parentSplat.split.action);
		//nextParentSplit = getSplit(oldParentSplit.splate, oldParentSplit.leftSplit, replaceWithThisSplit, oldParentSplit.action);
		if(fnMaybeChanged){
			//FIXME where does recursion go nextSplate = nextSplate.setFn(
			let oldParentFnLeft = oldParentFn.n.L();
			if(vm.loglev>=2) console.log('forkRootSplit calling oldParentFnLeft='+oldParentFnLeft+' on nextFn='+nextFn);
			let nextParentFn = oldParentFnLeft(nextFn); //cuz nextFn is its new right child
			nextParentSplate = nextParentSplate.setFn(nextParentFn);
		}
		nextParentSplit = getSplit(nextParentSplate, oldParentSplit.leftSplit, replaceWithThisSplit, oldParentSplit.action);
	}else{ //is left child
		//nextParentSplit = getSplit(this.parentSplat.split.splate, replaceWithThisSplit, this.parentSplat.rightSplat.split, this.parentSplat.split.action);
		//nextParentSplit = getSplit(oldParentSplit.splate, replaceWithThisSplit, oldParentSplit.rightSplit, oldParentSplit.action);
		if(fnMaybeChanged){
			//FIXME where does recursion go nextSplate = nextSplate.setFn(
			let oldParentFnRight = oldParentFn.n.R();
			if(vm.loglev>=2) console.log('forkRootSplit calling nextFn='+nextFn+' on oldParentFnRight='+oldParentFnRight);
			let nextParentFn = nextFn(oldParentFnRight); //cuz nextFn is its new left child
			nextParentSplate = nextParentSplate.setFn(nextParentFn);
		}
		nextParentSplit = getSplit(nextParentSplate, replaceWithThisSplit, oldParentSplit.rightSplit, oldParentSplit.action);
	}
	if(vm.loglev>=2) console.log('forkRootSplit near end, nextParentSplit='+nextParentSplit);
	//return this.forkRootSplit(nextParentSplit);
	let ret = this.parentSplat.forkRootSplit(nextParentSplit);
	if(vm.loglev>=2) console.log('forkRootSplit ret='+ret);
	return ret;
	//throw 'TODO use this when "TODO use setSplit but must forkEdit which is selected first"';
};

//returns a Split for use in a root Splat, cuz Splat is mutable and Split and Splate are used as immutable.
Splat.prototype.forkRootSplate = function(replaceWithThisSplate){
	return this.forkRootSplit(this.split.setSplate(replaceWithThisSplate));
	/*fixme return this.setSplate(replaceWithThisSplate)
	Split.prototype.setSplate = function(splate){
	*/
	//throw 'TODO call forkRootSplit with the existing 2 child splits, if they exist, else nulls for those';
};

Splat.prototype.transformSplit = function(transformer){
	this.setSplit(transformer(this.split));
};


//this is how to change any Splate anywhere on screen quickly and easily,
//but it doesnt change tree shape, just the local data (splate) in a treeNodeAkaSplat.
//a way to change a splate anywhere, in the rootSplat tree, viewed from any descendant of rootSplat. Replaces split in rootSplat.
//splateTransformer(this.splate())->nextSplate
Splat.prototype.transformSplate = function(splateTransformer){
	let nextSplate = splateTransformer(this.splate());
	let nextRootSplit = this.forkRootSplate(nextSplate);
	rootSplat.setSplit(nextRootSplit);
};

//get a string of js code that returns me, something like 'rootSplat.L().R().R()'
Splat.prototype.ptr = function(){
	if(this.isRoot()){
		if(this === rootSplat) return 'rootSplat';
		if(this === dragSplat) return 'dragSplat';
		throw 'Unknown root splat: '+this;
	}
	return this.parentSplat.ptr()+(this.isRightChild() ? '.R()' : '.L()');
};

//selected splat else null if none is selected
var selSplat = null;

//null to unselect
var setSelSplat = splat=>{
	//console.log('setSelSplat '+splat);
	//console.log(splat.ptr());
	let prevSelSplat = selSplat;
	selSplat = splat;
	selSplat.transformSplate(splate=>splate.setIsDisplayIcon(true));
	//selSplat.forkRootSplit_randomizeColor_inRootSplat();
	selSplat.forkRoot_setColor();
	//if(prevSelSplat && prevSelSplat != selSplat) prevSelSplat.displayLocal();
	//throw 'TODO use setSplit but must forkEdit which is selected first';
	//selSplat.displayLocal();
	//rootDisplay(true);
};

//display rootSplat in rootDob, the main rectangle that Wikibinator203 fns/lambdas are viewed and drag-and-drop to call in.
//var rootSplat = new Splat(null, newSplateForFnAsRoot(exampleFnToDisplay));
var rootSplat = null; //cuz need rootDob to exist first, and not doing that til window.onload
//var rootSplat = new Splat(null, newSplateForFnAsRoot(exampleFnToDisplay));
//rootSplat.split = newSplitForFn(exampleFnToDisplay);
var rootDob = null; //TODO

var quickSaveLoadName = i=>('wikibQuickSave'+i);

var displayedFnToCode = ()=>(rootSplat.splate().fn+'');

var quickSaveMaxSize = 1000000;

var askYN = question=>confirm(question);

var say = text=>alert(text);

var quickSave = i=>{
	let name = quickSaveLoadName(i);
	let val = displayedFnToCode();
	if(val.length <= quickSaveMaxSize || askYN('Try to QuickSave '+name+' even though its size '+val.length+'?')){
		try{
			window.localStorage.setItem(name, val);
		}catch(e){
			say('ERROR: '+e);
			throw e;
		}
	}
};

var quickLoad = i=>{
	let name = quickSaveLoadName(i);
	let val = window.localStorage.getItem(name);
	console.log('QuickLoading '+name+' which is size '+val.length);
	let fn = vm.eval(val);
	console.log('QuickLoad '+name+' evaled it');
	setRootFnAndForceUpdateDisplay(fn);
	console.log('QuickLoad '+name+' displayed it');
};


/*TODO how will Split and Splat do the graphics of dragging, during the drag?
I want it to show either a small icon or a whole splat, during the drag.
Maybe I should include extra divs, normally empty, in every Splat, in every
possible place in that splat it could be dropped (UPDATE: those are dropleft, dropmid, and dropright),
including hidden splats?
Or maybe there should be a second rootSplat-like var called dragSplat?
Do both, and keep moving dragDob, which dragSplat is displayed in,
to these drop target dobs in the splats.
Once dropped, it forkEdits rootSplat.split and displays that in rootSplat,
and maybe there will be an undo button and history for going way back
andOr some quicksave and quickload buttons etc.
Any split should display the same even if its loaded again,
and maybe later I'll make it be made completely of fns instead of a split just wrapping a fn.
*/
var dragSplat = null; //TODO when dragging
var dragDob = null; //dragSplat.displayIn(dragDob). rootSplat.displayIn(rootDob).

/*
//expensive calculation
Splat.prototype.displayDeep = function(){
	if(!this.dobs.self) throw 'No self dob in '+this;
	this.removeDobsExceptSelf();
	this.displayIn(this.dobs.self);
	if(this.splate.isOpen){
		this.L().displayIn(this.dobs.left);
		this.R().displayIn(this.dobs.right);
	}
};
*/

/*
var rootDisplay = ()=>{
	console.log('rootDisplay');
	if(rootSplat.dobs.self){
		rootSplat.displayDeep();
	}else{
		rootDob = Dob('rootDob');
		rootSplat.displayIn(rootDob); //FIXME is this compatible with split.displayIn(splat)?
	}
};*/


var Dob = id=>document.getElementById(id);

//display rootSplat in rootDob, the main rectangle that Wikibinator203 fns/lambdas are viewed and drag-and-drop to call in.
//var rootSplat = new Splat(null, newSplateForFnAsRoot(exampleFnToDisplay));
var rootSplat = null; //cuz need rootDob to exist first, and not doing that til window.onload
//var rootSplat = new Splat(null, newSplateForFnAsRoot(exampleFnToDisplay));
//rootSplat.split = newSplitForFn(exampleFnToDisplay);
var rootDob = null; //TODO


/*/////////////////////////////////////////////////////////////////////////////////////

//This script is under the Wikibinator203 license.

//This is a different wikibinator203 tree UI I'm trying, where each UI node knows its exact pixel width and height
//and literals (including canvas bytes, #Names, 2.34 numbers, stringLiterals 'string literals' etc,
//can be displayed using dom nodes (dobs) but still must be an exact size,
//and I want to redesign the localName system so its not used here as a mutable string var in fn/lambda but is
//a specific data in these UI nodes (even if its still used that way in fns, all data in these UI nodes must be used as immutable,
//so if you change that localName in the fn this UI is still displayed correctly.
//Or maybe I want per pixel precision everywhere instead of using dom nodes at all? Start coding this and figure it out... (TODO)
//and maybe it should just store the 128 bit localId of fn instead of the fn itself?
//(but vm.cp(fn,fn) looks up fn by its 2 child fns for dedup, using 2 id128s, not a single id128)

//or maybe... NEVERMIND, JUST USE Split and Splate and Splat mostly as they are, but with exact width and height.
//If I know exact width and height, then dont need a table tr td etc to position childs and prefix suffix etc
//and instead could set the exact 2d positions and sizes of all those as child divs.
//It might create a problem putting normal dom objects inside it, like an iframe to view a pdf (as bytes, not file)
//but for sandboxing, it shouldnt have anything that can infinite loop etc (even if otherwise sandboxed)
//so canvas and text and a few other "literal viewers" are probably
//all it needs (and could still generate a pdf editor in canvas since its turing complete, if wanted that for example).
TODO that... Get rid of the table tr td but still use the same Splat.dobs (with less stuff in it),
and use overflow:hidden (or what was that) on everything, and position everything deterministicly.
Maybe have just 1 drop dob per Splat and move it around as needed, since drop events will be at a (y,x) at root dob
instead of its tree of child dobs/Splats.

TODO merge this into existing Splate

TODO change to all divs with overflow:hidden and being made an exact size, and get rid of the table tr td in splatdobs.

TODO only display literals as dobs, dont display splats as dobs. Have 1 div containing all of them to get dom events
and do math to figure out which part of the tree (which is not made of dom nodes except the literals) that (y,x) is at.
Have recursive 2d (so 6 numbers) affine transform recursively (or just dy and dx, 2 numbers? that would be simpler)
tree nodes. Also have css clip path so could for example display a 2d triangle polygon or scroll window etc.
For now, just 2 numbers (dy and dx) per child should be enough,
and have a func (only compute it on first call) for width and func for height. Per child.


//MovedOb of a SplitB or a SplatetB, at a y and x offset like a subwindow.
var MovedOb = function(dy, dx, ob){
	this.dy = dy;
	this.dx = dx;
	this.ob = ob;
};

var SplitB = function(){
	//map of string to MovedOb of child SplitB. Those strings are like 'left' 'right' 'prefix' dropmid' etc.
	this.childs = {};
	//this.data = null; //TODO if its canvas bytes or text etc, what to display instead of childs, if isLiteral.
};

var SplateB = function(){
	FIXME these comments may have got split splate splat etc mixed up, rewrite...
	same stuff as Splate (doesnt need redesign?) plus I'm moving SplitB.data to be SplateB.data instead
	//or maybe leave this in splate.fn.n.blob in byte range splate.fn.n.blobFrom or splate.fn.n.blobTo-1
	//(or it may not have a blob and be the slow way of computing that blob from the universal lambda,
	//tree expanded instead of wrapping a blob, or even if there is a blob it can be both sparsely).
	this.data = null; //TODO if its canvas bytes or text etc, what to display instead of childs, if isLiteral.
};
SplatB.prototype.setSplate

/*

//like a Split (in other code), immutable, can have many parents, no parent ptr. Knows its exact pixel size.
var Branch = function(h, w){
	this.h = h; //height
	this.w = w; //width
	TODO y and x offsets per child. or what about using css transform numbers (such as 6 numbers, or 16 numbers?) to scale rotate etc each child?
	this.c = []; //child Branches
	//this.l = null; //TODO: left child Branch, or may be null (or nonnull) if !isOpen
	//this.r = null; //TODO: right child Branch, or may be null (or nonnull) if !isOpen
	TODO where does the literal data go such as canvas, 2.34, stringLiteral, etc?
	TODO how do drag events work? How could it be used to make a canvas inside this tree, that implements some other UI system?
};
/////////////////////////////////////////////////////////////////////////////////////
*/

//There are 2 modes: normal and isPopupCircularMenu. isPopupCircularMenu happens when release mouse button
//Near the end of a drag-and-drop, pops up a circle of icons,
//and when mouse moves toward one of those, it does that action, finishing the drop.
//This is true if any splat.splate().dragStep=='dropCircMenu'.
var isPopupCircularMenu = ()=>!!(findSplatWithDragStep('dropCircMenu') || anyclickcircSplat());

//As of 2023-1 this is where dragLine, the FROM and TO looseIcons, and border outlines of FROM and TO are displayed,
//instead of in Splat/Split/Splate, but I'm still fixing bugs during that redesign.
//
//TODO everything you see while dragging, but for now 2022-11-1 I'm just putting the 2 overlay divs here
//and leaving the icons and dragLine in splat.dobs.dragLine etc, but eventually all that should be here,
//especially considering I want more icons in the splats.
var updateOverlays = ()=>{

	let wouldfromOrFrom = anyfromSplat();
	//let wouldtoOrTo = anytoSplat();
	//let wouldtoOrTo = anytoSplat() || anyclickcircSplat(); //so borders and select display even if dragStep=='clickcirc'
	let wouldtoOrTo = anytoSplat(); //removed clickCirc menu by merging it into dropCircMenu.
	
	/*
	//2022-12-29 clickCircMenu has been merged into dropCircMenu
	let clickCircSplat = anyclickcircSplat(); //any Splat whose dragStep is 'clickcirc'.
	
	if(clickCircSplat){
		console.log('updateOverlays clickcirctest clickCircSplat='+clickCircSplat);
	}
	//console.log('updateOverlays wouldfromOrFrom='+wouldfromOrFrom+' wouldtoOrTo='+wouldtoOrTo+' clickcircSplat='+clickcircSplat);
	*/
	
	let display_simpleDragUimode_cursor = options.test_alwaysDisplayWhere_simpleDragUimode_wouldInsertEvenIfNotDragging ||
		(uiState.uimode==simpleDragUimode && wouldtoOrTo && uiState.lastMouseButtonDown==metaInsertButton);
	
	//These buttons might change...
	//const popupDragButton = 'mouseRightButton'; //controls[popupDragButton] is 0 (up) or 1 (down)
	//const metaInsertButton = 'mouseLeftButton';
	
	/*
	//FIXMEFIXME
	//TODO choose which based on which mouse button: let whichMenu = 'dropCircMenu';
	//let whichMenu = 'clickCircMenu';
	//let whichMenu = 'dropCircMenu';
	let whichMenu;
	switch(uiState.lastMouseButtonDown){
		case 'mouseLeftButton':
			whichMenu = 'dropCircMenu';
		break;case 'mouseRightButton':
			whichMenu = 'clickCircMenu';
		break;default:
			whichMenu = null;
	}
	//whichMenu = 'dropCircMenu'; //FIXME
	if(options.loglev>1) console.log('updateOverlays, whichMenu='+whichMenu);
	*/
	
	/*let whichMenu = null;
	if(clickCircSplat){
		whichMenu = 'clickCircMenu';
	}else if(wouldtoOrTo && wouldtoOrTo.splate().dragStep === 'dropCircMenu'){
		whichMenu = 'dropCircMenu';
	}*/
	//let whichMenu = (wouldtoOrTo && wouldtoOrTo.splate().dragStep === 'dropCircMenu') ? 'dropCircMenu' : null;
	let whichMenu = uiState.dragSteps.dropCircMenu ? 'dropCircMenu' : null;
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('updateOverlays whichMenu='+whichMenu);
	
	//displays just outside the border of mouseover_sected rect
	let mouseOverSelect_top = Dob('mouseOverSelect_top');
	let mouseOverSelect_left = Dob('mouseOverSelect_left');
	let mouseOverSelect_right = Dob('mouseOverSelect_right');
	let mouseOverSelect_bottom = Dob('mouseOverSelect_bottom');
	let fourBorders = [mouseOverSelect_top, mouseOverSelect_left, mouseOverSelect_right, mouseOverSelect_bottom];
	
	//displays just inside the border of mouseover_sected rect
	let mouseOverSelect2_top = Dob('mouseOverSelect2_top');
	let mouseOverSelect2_left = Dob('mouseOverSelect2_left');
	let mouseOverSelect2_right = Dob('mouseOverSelect2_right');
	let mouseOverSelect2_bottom = Dob('mouseOverSelect2_bottom');
	let fourBorders2 = [mouseOverSelect2_top, mouseOverSelect2_left, mouseOverSelect2_right, mouseOverSelect2_bottom];
	
	let thick = Number.parseInt(mouseOverSelect_top.style.height);
	
	//if(whichMenu == 'dropCircMenu'){
		let fromRectOverlay = Dob('globalFromOverlay');
		let toRectOverlay = Dob('globalToOverlay');
		if(wouldfromOrFrom){
			let d = wouldfromOrFrom.dobs.self;
			let y = dobY(d);
			let x = dobX(d);
			let h = dobHeight(d);
			let w = dobWidth(d);
			if(options.displayDragFromSurface){
				fromRectOverlay.style.visibility = 'visible';
				fromRectOverlay.style.top = y+'px';
				fromRectOverlay.style.left = x+'px';
				fromRectOverlay.style.height = h+'px';
				fromRectOverlay.style.width = w+'px';
			}
			
			if(options.displayDragFromBorder){
				for(let dob of fourBorders){
					dob.style.visibility = 'visible';
				}
				
				//displays just outside the border of mouseover_sected rect. FROM, not TO.
				mouseOverSelect_top.style.top = (y-thick)+'px';
				mouseOverSelect_top.style.left = (x-thick)+'px';
				mouseOverSelect_top.style.width = (w+2*thick)+'px';
				
				mouseOverSelect_left.style.top = (y-thick)+'px';
				mouseOverSelect_left.style.left = (x-thick)+'px';
				mouseOverSelect_left.style.height = (h+2*thick)+'px';
				
				mouseOverSelect_right.style.top = (y-thick)+'px';
				mouseOverSelect_right.style.left = (x+w)+'px';
				mouseOverSelect_right.style.height = (h+2*thick)+'px';
				
				mouseOverSelect_bottom.style.top = (y+h)+'px';
				mouseOverSelect_bottom.style.left = (x-thick)+'px';
				mouseOverSelect_bottom.style.width = (w+2*thick)+'px';
			}
		}else{
			fromRectOverlay.style.visibility = 'hidden';
			for(let dob of fourBorders){
				dob.style.visibility = 'hidden';
			}
		}
		//TODO merge duplicate code

		let displayToRectBorder = wouldtoOrTo && (!display_simpleDragUimode_cursor || options.alwaysDisplayToRectBorderIfExists);
		if(displayToRectBorder){
			if(options.logLm_TO_splat){
				lm('TO', wouldtoOrTo.splate().fn);
				lm('uiState.dropDirection', uiState.dropDirection);
			}
			let d = wouldtoOrTo.dobs.self;
			let y = dobY(d);
			let x = dobX(d);
			let h = dobHeight(d);
			let w = dobWidth(d);
			if(options.displayDragToSurface){
				toRectOverlay.style.visibility = 'visible';
				toRectOverlay.style.top = y+'px';
				toRectOverlay.style.left = x+'px';
				toRectOverlay.style.height = h+'px';
				toRectOverlay.style.width = w+'px';
			}
			
			
			if(options.displayDragToBorder){
				for(let dob of fourBorders2){
					dob.style.visibility = 'visible';
				}
				
				
				//displays just inside the border of mouseover_sected rect. TO, not FROM.
				mouseOverSelect2_top.style.top = y+'px';
				mouseOverSelect2_top.style.left = x+'px';
				mouseOverSelect2_top.style.width = w+'px';
				
				mouseOverSelect2_left.style.top = y+'px';
				mouseOverSelect2_left.style.left = x+'px';
				mouseOverSelect2_left.style.height = h+'px';
				
				mouseOverSelect2_right.style.top = y+'px';
				mouseOverSelect2_right.style.left = (x+w-thick)+'px';
				mouseOverSelect2_right.style.height = h+'px';
				
				mouseOverSelect2_bottom.style.top = (y+h-thick)+'px';
				mouseOverSelect2_bottom.style.left = x+'px';
				mouseOverSelect2_bottom.style.width = w+'px';
			}
			
		}else{
			toRectOverlay.style.visibility = 'hidden';
			for(let dob of fourBorders2){
				dob.style.visibility = 'hidden';
			}
		}
	//}
	
	let simpleDragUimode_cursor = Dob('simpleDragUimode_cursor');
	if(display_simpleDragUimode_cursor){
		simpleDragUimode_cursor.style.visibility = 'visible';
		//use uiState.dropDirection with uiState.simpleDragUimode_cursor_splat to do the drop later if dropped.
		//For now, is just displaying where it would drop.
		//let splat = uiState.simpleDragUimode_cursor_splat = wouldtoOrTo || wouldfromOrFrom || clickCircSplat;
		let splat = uiState.simpleDragUimode_cursor_splat = wouldtoOrTo || wouldfromOrFrom;
		//if(wouldtoOrTo){
		if(splat){
			let d = splat.dobs.self;
			let y = dobY(d);
			let x = dobX(d);
			let h = dobHeight(d);
			let w = dobWidth(d);
			
			//let isLeft = splat.splate().looseIconXFraction < .5;
			let isLeft = undefined; //moved looseIcon from Splate to uiState
			if(splat.isDragTo()){ //or could be FROM and TO at once, but in that case use TO since its more recent
				isLeft = uiState.to.looseIconXFraction < options.leftRightSplit; //Example: options.leftRightSplit could be .5
			}else if(splat.isDragFrom()){
				isLeft = uiState.from.looseIconXFraction < options.leftRightSplit;
			}else{
				console.log('updateOverlays display_simpleDragUimode_cursor splat is not isDragFrom or isDragTo, so not setting isLeft to true or false or moving icons. splat='+splat);
			}
			if(isLeft !== undefined){
				simpleDragUimode_cursor.style.top = y+'px';
				simpleDragUimode_cursor.style.height = h+'px';
				simpleDragUimode_cursor.style.width = thick+'px';
				if(isLeft){
					uiState.dropDirection = 'left';
					simpleDragUimode_cursor.style.left = (x-thick/2)+'px';
				}else{
					uiState.dropDirection = 'right';
					simpleDragUimode_cursor.style.left = (x+w-thick/2)+'px';
				}
			}
		}else{ //random position, for testing
			simpleDragUimode_cursor.style.top = randInt(500)+'px';
			simpleDragUimode_cursor.style.left = randInt(500)+'px';
			simpleDragUimode_cursor.style.height = '30px';
			simpleDragUimode_cursor.style.width = '30px';
		}
		simpleDragUimode_cursor.style.backgroundColor = colorStr(randBetween(.9,1),randBetween(.9,1),randBetween(.9,1));
		//simpleDragUimode_cursor.style.backgroundColor = colorStr(randBetween(0,.2),randBetween(.8,1),randBetween(0,.3));
		//simpleDragUimode_cursor.style.backgroundColor = 'black';
	}else{
		simpleDragUimode_cursor.style.visibility = 'hidden';
	}
	
	//let menuDob = Dob(whichMenu);
	let menuDob = Dob('popupMenuDob');
	let menuDobHtml = menuDob.innerHTML.trim();
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('updateOverlays about to choose to display popup menu, menuDobHtml.length='+menuDobHtml.length);
	if(whichMenu != null && whichMenu!='clickCircMenu'){ //merged clickCircMenu into dropCircMenu.
		console.log('idempotent display popup menu..');
		if(options.loglev>2) console.log('updateOverlays clickcirctest whichMenu='+whichMenu);
		//FIXME it appears it keeps rebuilding this dob when it doesnt need to. 2022-12-17 for now im just going to empty it each time first.
		//menuDob.innerHTML = '';
		//if((whichMenu=='clickCircMenu' && !uiState.removeClickCircMenuAsap) || (wouldtoOrTo && wouldtoOrTo.splate().dragStep === 'dropCircMenu')){
			if(menuDobHtml == ''){
				console.log('createy popup menu');
				let menuList = eval(whichMenu);
				for(let i=0; i<menuList.length; i++){
					let picUrl = menuList[i].pic;
					let pic = Nob('img',menuDob);
					pic.style.position = 'absolute';
					attr(pic,'src',picUrl);
					let centerY = globalVars.dropCircMenuCenterY;
					let centerX = globalVars.dropCircMenuCenterX;
					let angle = -halfPi+twoPi*i/menuList.length; //first is straight up. Continue clockwise around, putting icons.
					//let radius = options.dropCircMenuRadius;
					let radius = options.radiusOfMenu[whichMenu];
					let size = options.dropCircMenuIconSize;
					pic.style.top = (centerY-size/2+radius*Math.sin(angle))+'px';
					pic.style.left = (centerX-size/2+radius*Math.cos(angle))+'px';
					pic.style.height = size+'px';
					pic.style.width = size+'px';
					const dropCircMenuItem = menuList[i];
					pic.addEventListener(
						'mouseover',
						event=>doEndDrag(dropCircMenuItem)
					);
				}
			}else{
				console.log('popup menu: Not filling popupMenuDob again, its still popped up with icons around a circle, menuDobHtml.length='+menuDobHtml.length);
			}
		//}else{
		//	//uiState.removeClickCircMenuAsap = false;
		//	menuDob.innerHTML = '';
		//}
	}else{
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('erase popup menu, was menuDobHtml.length='+menuDobHtml.length);
		if(options.loglev>2) console.log('updateOverlays clickcirctest emptying_menuDob clickCircSplat='+(clickCircSplat?'nonnull':'null'));
		menuDob.innerHTML = ''; //Without this, clickCircMenu doesnt disappear after use it.
	}
	
	let dragLineDob = Dob('dragLineDob');
	if(options.updateDragLineColorIn_updateOverlays_thisIsAnUglyHackTodoMoveDragLineToBeAnOverlay){
		//let splatWithDragLine = findSplat(splat=>splat.splate().isDisplayDragLine());
		/*let splatWithDragLine = findSplat(splat=>splat.isDisplayDragLine()); //TODO optimize since its one of the splats in uiState.dragSteps
		if(splatWithDragLine){
			//the ugly hack, cuz updating those dobs (dom objects) should only happen cuz of
			//change in splatWithDragLine.splate(), and Splate is used as immutable. Split is also used as immutable.
			splatWithDragLine.dobs.dragLine.style.backgroundColor = whatColorShouldDragLineBe();
		}*/
		dragLineDob.style.backgroundColor = whatColorShouldDragLineBe();
	}
	
	if(options.highlightWhatWasJustDropped){
		if(uiState.highlightLastSplatDropped){
			let displayOverWhat = uiState.highlightLastSplatDropped.dobs.self;
			if(displayOverWhat){
				//uiState.simpleDragUimode_cursor_splat.dobs.self.style.backgroundColor = '#'+options.highlightWhatWasJustDropped_color.join('');
				let icon = Dob('displayThisOnWhatWasLastDropped');
				icon.style.top = dobY(displayOverWhat)+'px';
				let displayOnLeft = uiState.highlightLastSplatDropped_dropDirection=='left'; //else right
				icon.style.left = (displayOnLeft ? dobX(displayOverWhat) : (dobX(displayOverWhat)+dobWidth(displayOverWhat)))+'px';
				//icon.style.width = dobWidth(displayOverWhat)+'px';
				icon.style.height = dobHeight(displayOverWhat)+'px';
				icon.style.width = '3px';
			}
		}
	}
	
	/*for(let dragStep in uiState.dragSteps){
		let splat = uiState.dragSteps[dragStep];
		if(splat){
			splat.updateDragStuffIfNeeded();
		}
	}*/
	
	/*let isDisplayDragLine = uiState.from.isDisplayIcon && uiState.to.isDisplayIcon; //TODO color depends on which kind of drag (see options map for colors)
	if(isDisplayDragLine){
		console.log('Displaying dragLineDob='+dragLineDob+' TODO move resize and rotate it to be between FROM and TO drag icons');
		dragLineDob.style.visibility = 'visible';
	}else{
		console.log('Hiding dragLineDob='+dragLineDob);
		dragLineDob.style.visibility = 'hidden';
	}*/
	
	let yxyx = dragLineFromYXToYX(); //null if dont display dragLine, else is 4 numbers.
	if(yxyx){
		//let dob = this.dobs.dragLine;		
		//let dob = dragLineDob;
		//this splate should be the TO, and another splate should be the FROM. Max 1 dragLine displayed at once on screen.
		//let yxyx = dragLineFromYXToYX();
		/*if(!yxyx){
			if(options.allow_doDropCircMenu_afterClickWithoutDrag){
				console.log('This might be an "ugly hack" where a TO exists but not a FROM cuz of a click without a drag (which happens cuz merged clickCircMenu into dropCircMenu). Check the comment on isDisplayDragLine and allow_doDropCircMenu_afterClickWithoutDrag.');
			}else{
				throw 'No dragLineFromYXToYX, so not displaying dragLine, but why is isDisplayDragLine true? this='+this;
			}
		}else{
		*/
			let diffY = yxyx[2]-yxyx[0];
			let diffX = yxyx[3]-yxyx[1];
			let diffLen = Math.hypot(diffY,diffX);
			if(diffLen > 0){
				//FIXME got it wrong which of width vs height to make the thin dimensions when created that dob. flipping that here...
				dragLineDob.style.height = options.dragLineThick+'px';
				dragLineDob.style.width = Math.ceil(diffLen)+'px';
				dragLineDob.style.visibility = 'visible';
				let normY = between(-1,diffY/diffLen,1);
				let normX = between(-1,diffX/diffLen,1);
				let a = normX;
				let b = normY;
				let c = -normY;
				let d = normX;
				let ty = (yxyx[0]+yxyx[2])/2;
				let tx = (yxyx[1]+yxyx[3])/2;
				tx -= diffLen/2; //without this, it appears to the right of where it should be, in some strange coordinate system that rotates around the middle of a div, or something.
				dragLineDob.style.transform = 'matrix('+a+','+b+','+c+','+d+','+tx+','+ty+')';
			}else{
				console.log('Not completely (maybe will display wrong?) displaying dragLine of length '+diffLen);
			}
		//}
	}else{
		dragLineDob.style.visibility = 'hidden';
	}
	//this was Splat, but moved the code to here in updateOverlays. this.updateDobIconsVisibility();

	for(let fromOrTo of ['from','to']){
		let iconDob = Dob(fromOrTo+'Icon'); //fromIcon or toIcon
		let beVisible = true;
		if(uiState[fromOrTo].isDisplayIcon){
			if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13){
				console.log('TODO display uiState.'+fromOrTo+' icon, looseIconYFraction='+uiState[fromOrTo].looseIconYFraction+' looseIconXFraction='+uiState[fromOrTo].looseIconXFraction+' icon='+iconDob);
			}
			iconDob.style.visibility = 'visible';
			/*
			let wouldfromOrFrom = anyfromSplat();
			let wouldtoOrTo = anytoSplat();
			if(wouldfromOrFrom && wouldtoOrTo){
				let dobFrom = wouldfromOrFrom.dobs.self;
				let dobTo = wouldtoOrTo.dobs.self;
				return [ //drag line
					dobY(dobFrom)+dobHeight(dobFrom)*uiState.from.looseIconYFraction, //fromY
					dobX(dobFrom)+dobWidth(dobFrom)*uiState.from.looseIconXFraction, //fromX
					dobY(dobTo)+dobHeight(dobTo)*uiState.to.looseIconYFraction, //toY
					dobX(dobTo)+dobWidth(dobTo)*uiState.to.looseIconXFraction //toX
				];
			}*/
			let splat = fromOrTo=='to' ? anytoSplat() : anyfromSplat();
			if(splat){
				let y = dobY(splat.dobs.self)+dobHeight(splat.dobs.self)*uiState[fromOrTo].looseIconYFraction;
				let x = dobX(splat.dobs.self)+dobWidth(splat.dobs.self)*uiState[fromOrTo].looseIconXFraction;
				y -= dobHeight(iconDob)/2;
				x -= dobWidth(iconDob)/2;
				iconDob.style.top = y+'px';
				iconDob.style.left = x+'px';			
				/*Moving looseIcon and dragLine etc from Splat and Splate to uiState 2023-1
				if(splate.isDisplayIcon){ //FIXME remove "true ||".
					let self = this.dobs.self;
					//this.dobs.looseIcon.style.verticalAlign = (splate.looseIconYFraction*100)+'%';
					//this.dobs.looseIcon.style.horizontalAlign = (splate.looseIconXFraction*100)+'%';
					
					this.dobs.looseIcon.style.height = options.iconSize+'px';
					this.dobs.looseIcon.style.width = options.iconSize+'px';
					//TODO adjust by half width and height of icon.
					this.dobs.looseIcon.style.top = Math.round(dobY(self)+dobHeight(self)*splate.looseIconYFraction-options.iconSize/2)+'px';
					this.dobs.looseIcon.style.left = Math.round(dobX(self)+dobWidth(self)*splate.looseIconXFraction-options.iconSize/2)+'px';
				}*/
				iconDob.style.height = options.iconSize+'px';
				iconDob.style.width = options.iconSize+'px';
			}else{
				console.log('WARNING: uiState.'+fromOrTo+'.isDisplayIcon is true but splat='+splat);
				beVisible = false;
			}
		}
		if(!beVisible){
			console.log('hide uiState.'+fromOrTo+' icon = '+iconDob);
			iconDob.style.visibility = 'hidden';
		}
	}
	
	
	Dob('vmStats').innerHTML = '<nobr title="This stops the browser tab from crashing if you write an infinite loop, gives up early."><input type=button onclick="vm.refill(); updateOverlays();" value="refill"></input> vm.stackTime='+vm.stackTime+' vm.stackMem='+vm.stackMem+'</nobr>';
	
	if(options.loglev>2) console.log('updateOverlays clickcirctest menuDob.innerHTML.length='+menuDob.innerHTML.length);
	//uiState.removeClickCircMenuAsap = false;
};


//TODO 2023-6-12 copying some of this sListToJsListReversed sListToJsList stuff to wikib VM. Merge duplicate code by calling that from this UI...

//TODO vm.isCallOfS
var isCallOfS = fn=>(fn.n.o8()==vm.o8OfS);

//TODO vm.isS2
//mostly the same as fn.n.L().n.L()===vm.ops.S but theres non-normed forms of S also.
//o8 is a byte opcode thats copied from L child starting at 8th param of U. Up to 7 params, o8 is the numbers 1 to 255. 0 means evaling.
//U.n.cur()==0. vm.ops.S.n.cur()==7. 2 more params and cur is 9. at cur 10, (S x y z) -> (x z (y z)).
var isS2 = fn=>(fn.n.o8()==vm.o8OfS && fn.n.cur()===9);

//TODO vm.isS1
//Example: (S x)
var isS1 = fn=>(fn.n.o8()==vm.o8OfS && fn.n.cur()===8);

//TODO vm.isS0
//Example: S. theres also non-normed forms of it, since the first 7 params of U each being U vs anything_except_U choose opcode,
//nd theres more than 1 anything_except_U.
var isS0 = fn=>(fn.n.o8()==vm.o8OfS && fn.n.cur()===7);

//TODO vm.sListToJsListReversed
//(S (S a b) c) -> js:[a b c]. Ends at whatevers not an S2.
//(S a b) and (S (S a b) c) are (syty='S2')s, but a is not. Doesnt check b or c cuz it recurses on the left.
//(S a) -> js:[a]. Thats in case drag and drop selects just the first thing in such a list, along with its prefix S.
var sListToJsListReversed = sList=>{
	if(isS1(sList)) return [sList.n.R()]; //get x from (S x). If it was (S x y) it displays as {x y} and is S2.
	let ret = [];
	while(isS2(sList)){
		ret.push(sList.n.R());
		sList = sList.n.L().n.R(); //(S (S a b) from (S (S a b) c), or get a from (S a b).
	}
	ret.push(sList); //a from (S a b).
	return ret;
};

//TODO vm.sListToJsList
var sListToJsList = sList=>{
	let ret = sListToJsListReversed(sList);
	ret.reverse();
	return ret;
};

//<a b c> is a stList, aka {,a b c}. Returns jsList:[a b c].
var stListToJsList = sList=>{
	let ret = sListToJsListReversed(sList);
	ret.reverse();
	if(ret[0].n.L() != vm.ops.T){
		throw 'First in stListToJsList is not prefixed by T: '+ret[0];
	}
	ret[0] = ret[0].n.R(); //remove T in (T ret[0])
	return ret;
};

//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c).
//If theMaybeS2 is not an S2, thats the baseCase, just returns (S draggedL theMaybeS2) aka {draggedL theMaybeS2}.
//2 fns.
//UPDATE 2022-12-30 this might also work for S1 list, such as (S a). TODO verify. Todo rename this func since it says only S2.
var metaLOfS2 = (draggedL,theMaybeS2)=>{
	let S = vm.ops.S;
	if(isS1(theMaybeS2)){
		let theOneThingInTheList = theMaybeS2.n.R(); //.L would be S.
		return S(draggedL)(theOneThingInTheList);
	}
	let jsList = sListToJsList(theMaybeS2);
	let ret = draggedL;
	for(let fn of jsList){
		ret = S(ret)(fn);
	}
	return ret;
};

//similar to metaLOfS2
var deleteMetaLOfS2 = theMaybeS2=>{
	return theMaybeS2.n.R();
	/*
	//TODO merge duplicate code between deleteMetaLOfS2 and deleteMetaROfS2
	let S = vm.ops.S;
	let jsList = sListToJsList(theMaybeS2);
	if(jsList.length < 2) throw 'An S2 list is always at least size 2 cuz (S a b) or (S (S a b) c) etc.';
	//delete jsList[0]
	let ret = jsList[1];
	for(let i=2; i<jsList.length; i++){
		ret = S(ret)(jsList[i]);
	}
	return ret;
	*/
};

//similar to metaLOfS2
var deleteMetaROfS2 = theMaybeS2=>{
	return theMaybeS2.n.L().n.R();
	/*//TODO merge duplicate code between deleteMetaLOfS2 and deleteMetaROfS2
	let S = vm.ops.S;
	let jsList = sListToJsList(theMaybeS2);
	if(jsList.length < 2) throw 'An S2 list is always at least size 2 cuz (S a b) or (S (S a b) c) etc.';
	//delete jsList[1]
	let ret = jsList[0];
	for(let i=2; i<jsList.length; i++){
		ret = S(ret)(jsList[i]);
	}
	return ret;
	*/
};

//wikib:[a b c] aka (Infcur a b c) -> js:[c b a].
var infcurListToJsListReversed = infcurList=>{
	//check it this way instead of === vm.ops.Infcur cuz thats only the normed form of Infcur.
	if(infcurList.n.o8() !== vm.o8OfInfcur) throw 'Not an infcurList, o8='+infcurList.n.o8()+' but expected vm.o8OfInfcur='+vm.o8OfInfcur;
	let ret = [];
	while(infcurList.n.hasMoreThan7Params()){ //The o8 opcode byte and number of params are known at 7th param of U.
		ret.push(infcurList.n.R()); //get c from (Infcur a b c)
		//get (Infcur a b) from (Infcur a b c). Aka get [a b] from [a b c]. Stop when get [] aka vm.ops.Infcur or a non-normed form of it.
		infcurList = infcurList.n.L();
	}
	return ret;
};

//wikib:[a b c] aka (Infcur a b c) -> js:[a b c].
var infcurListToJsList= infcurList=>{
	let ret = infcurListToJsListReversed(infcurList);
	ret.reverse();
	return ret;
};

//draggedL metaL-called on <Infcur list of a b c... aka [a b c...]>.
var metaLOfInfcur = (draggedL,theInfcurList)=>{
	let Infcur = vm.ops.Infcur;
	let ret = Infcur(draggedL);
	for(let fn of infcurListToJsList(theInfcurList)){
		ret = ret(fn); //append param. Infcur/[] never evals, just keeps appending nomatter how deep (TODO even so deep the list doesnt fit all on 1 computer).
	}
	return ret;
};

//replace whole splat UI with a new one for that fn.
var setRootFnAndForceUpdateDisplay = fn=>{
	let split = newSplitForFn_experimental(fn)
	rootSplat = new Splat(null, rootDob); //TODO merge duplicate code between setRootFn and window.onload
	rootSplat.setSplit(split); //display it recursively
	//if(options.do_forkTryMaxWidth_experimentOnWindowLoad){
		updateDisplayToWrap();
	//}
};

Splat.prototype.directL = function(fromSplat){
	//TODO merge duplicate code between directL and directR and maybe metaL and metaR
			
	if(options.logDirectL) console.log('NEAREND: Drag: directL');
	//let from = anyfromSplat();
	//let to = anytoSplat();
	let from = fromSplat;
	let to = this;
	let fromFn = from.splate().fn;
	let toFn = to.splate().fn;
	if(options.logDirectL) console.log('calling '+fromFn+' on '+toFn);
	let retFn = fromFn(toFn);
	if(options.logDirectL) console.log('Returned '+retFn);
	//let newSplit = to.split.transformSplate(splate=>splate.setFn(retFn));
	let callerSyty = to.callerSyty();
	let isRightRecursion = to.isRightChild();
	let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
	if(options.logDirectL) console.log('newSplit='+newSplit);
	
	//This isnt right cuz it only returns a Split, doesnt change whats in root: to.forkRootSplit(newSplit);
	//Another problem is, the fn in root needs to be changed cuz putting retFn deep inside it,
	//so have to do those lambda calls again. Have to rebuild any part of the tree thats different.
	//It already checks for equality (by localId of fn, not perfect dedup) which will work for the UI,
	//but still need to make a new js func to forkEdit the UI and fn together...
	let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
	if(options.logDirectL) console.log('Drag directL about to rootSplat.setSplit to ...');
	rootSplat.setSplit(newRootSplit);
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	if(options.logDirectL) console.log('END: Drag: directL');
};

//fromSplat --drag_metaL_way--> this. Modifies this.
//TODO copy comments from this.metaL_old_2022_1_8(fromSplat); before deleting that.
Splat.prototype.metaL = function(fromSplat){
	//return this.metaL_old_2022_1_8(fromSplat);
	//throw 'FIXME';
	
	
	let to = this;
	let from = fromSplat;
	if(!to) throw 'No TO Splat';
	if(!from) throw 'No FROM Splat';
	
	//metaL is more complex than metaR, directL, or directR. Its the counterpart of metaR. At a lower level is directL and directR.
	//
	//Theres 2 (maybe 3?) cases (as of 2022-11-17) when metaL acts different than directL, the {...} syntax and the [...] syntax,
	//and maybe the (...) syntax but that one is harder to know where it ends since if you keep looking at fn.L().L().L()... you'll always reach U,
	//but that info will be in syty and is based on how its displayed, not just the fn.
	//
	//TODO these comments are duplicated in the if/elses below, so should remove them here?...
	//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c)
	//dropLeft (Infcur a b c) -> (Infcur dropLeft a b c)
	//aka dropLeft [[a b] c] -> [[[dropLeft] a] b] c]
	//aka dropLeft [a b c] -> [dropLeft a b c]
	//aka dropLeft ((Infcur a) b) c) -> ((((Infcur dropLeft) a) b) c)
	

	//The { kind of drag and drop is the most complex.
	//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c).
	//aka dropLeft {a b c} -> {dropLeft a b c}
	//https://en.wikipedia.org/wiki/SKI_combinator_calculus
	
	
	let syty = to.syty();
	
	//Cuz of complexity in syty added by <...> syntax (added more sytys that are partially duplicates), use listType instead. 
	//( { [ < (and maybe unary types like ',' '_' etc?), whichever is displayed first when keep looking left.
	let listType = to.listType();
	let parentListType = to.parentSplat ? to.parentSplat.listType() : 'C';
	
	let toFn = to.splate().fn;
	let fromFn = from.splate().fn;
	console.log('MMMMMMMMMMM metaL fromFn='+fromFn+' toFn='+toFn);
	
	let replaceParent = true;
	let retFn;
	//if(syty == 'IC+'){ //[...] syntax. Not an empty []/Infcur.
	if(parentListType == '['){ //not empty []/infcur (syty of IC0). Should be a syty of IC+ aka infcur/[] list of at least 1 thing.
		//console.log('Drag metaL, parentListType='+parentListType+', calling the infcur/[] list way, fromFn='+fromFn+' toFn='+toFn);
		//retFn = metaLOfInfcur(fromFn,toFn);
		//replaceParent = false;
		if(to.isRightChild() && to.parentSplat.splate().fn.n.L() != vm.ops.Infcur){ //not (S To) which happens when To is leftmost in {...}
			let leftSibling = to.parentSplat.leftSplat;
			if(!leftSibling){
				throw 'No leftSibling';
			}
			leftSibling.metaR(from);
			return;
		}else{
			throw 'TODO';
			//retFn = metaLOfS2(fromFn,toFn);
			//replaceParent = false;
		}
	//}else if(syty == 'S2' || (syty == 'S1' && this.parentSyty() == 'S2')){ //{...} syntax, or (S a).
	}else if(parentListType == '{'){
		//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c)	
		if(to.isRightChild() && to.parentSplat.splate().fn.n.L() != vm.ops.S){ //not (S To) which happens when To is leftmost in {...}
			//console.log('Drag metaL, parentListType='+parentListType+', calling the sCurryList way, fromFn='+fromFn+' toFn='+toFn);
			//retFn = metaLOfS2(fromFn,toFn); //metaLOfS2 also handles of S1
			//let parentFn = to.parentSplat.splate().fn;
			
			let leftSibling = to.parentSplat.leftSplat;
			if(!leftSibling){
				throw 'No leftSibling';
			}
			leftSibling.metaR(from);
			return;
			/*
			//retFn = metaLOfS2(fromFn,parentFn);
			retFn = vm.ops.S(leftSibling)(fromFn); //retFn = metaROfS2(fromFn,parentFn); since metaROfS2 is so simple, just inline it here.
			replaceParent = true;
			//replaceParent = false;
			*/
			
			//FIXMEFIXMEFIXME
		}else{ //is left child
			retFn = metaLOfS2(fromFn,toFn);
			replaceParent = false;
			//FIXMEFIXMEFIXME
		}
	}else if(parentListType == '<'){
		let parentFn = to.parentSplat.splate().fn;
		if(to.isRightChild() && parentFn.n.L() != vm.ops.S){ //not (S To) which happens when To is leftmost in {...}
			//console.log('Drag metaL, parentListType='+parentListType+', calling the sCurryList way, fromFn='+fromFn+' toFn='+toFn);
			//retFn = metaLOfS2(fromFn,toFn); //metaLOfS2 also handles of S1
			//let parentFn = to.parentSplat.splate().fn;
			
			let leftSibling = to.parentSplat.leftSplat;
			if(!leftSibling){
				if(parentFn.n.L() == vm.ops.T){ //is probably the first T in <...>. TODO verify.
					//Replace (S (T To))  with (S (S (T From) To)), but replace the (T To) with (S (T From) To) since replaceParent is true
					//(T To) is to.parentSplat
					retFn = vm.ops.S(vm.ops.T(fromFn))(toFn);
					//retFn = vm.ops.S(vm.ops.S(vm.ops.T(fromFn))(toFn));
					replaceParent = true;
					//to.parentSplat.metaL(from);
					//return;
				}else{
					throw 'No leftSibling';
				}
			}else{
				leftSibling.metaR(from);
				return;
				/*
				//retFn = metaLOfS2(fromFn,parentFn);
				retFn = vm.ops.S(leftSibling)(fromFn); //retFn = metaROfS2(fromFn,parentFn); since metaROfS2 is so simple, just inline it here.
				replaceParent = true;
				//replaceParent = false;
				*/
				
				//FIXMEFIXMEFIXME
			}
		}else{ //is left child
			retFn = metaLOfS2(fromFn,toFn);
			replaceParent = false;
			//FIXMEFIXMEFIXME
		}
	
	}else if(parentListType == '('){
		throw 'TODO';
	}else if(parentListType == ','){
		throw 'TODO';
	}else{
		console.log('metaL else, just doing normal callpair. fromFn='+fromFn+' toFn='+toFn);
		this.directL(fromSplat);
		console.log('metaL did directL');
		return;
	}
	
	console.log('Drag metaL, parentListType='+parentListType+', returned '+retFn);

	
	let newRootSplit;
	console.log('metaL replaceParent='+replaceParent);
	if(replaceParent){
		let parent = to.parentSplat;
		let isRightRecursion = to.isRightChild();
		let callerSyty = parent.callerSyty();
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		//This isnt right??? cuz... (get whole comment from directL)
		let newRootSplitFromParent = parent.forkRootSplit(newSplit); //may call lambdas
		newRootSplit = newRootSplitFromParent;
	}else{ //this is more like directL, but it did metaL insert such as to become the first in a [...] list.
		let callerSyty = to.callerSyty();
		let isRightRecursion = to.isRightChild(); //FIXME? why is it to.isRightChild() in both replaceParent==true and ==false? Shouldnt it be parent.isRightChild() in 1 of those?
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		console.log('newSplit='+newSplit);
		newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
	}
	
	
	//rootSplat.setSplit(newRootSplitFromParent);
	rootSplat.setSplit(newRootSplit);
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	console.log('END: Drag: metaL');
};


//fromSplat --drag_metaL_way--> this. Modifies this.
//FIXME when .metaL is working, remove this.
Splat.prototype.metaL_old_2022_1_8 = function(fromSplat){

	let to = this;
	let from = fromSplat;
	if(!to) throw 'No TO Splat';
	if(!from) throw 'No FROM Splat';
	
	//metaL is more complex than metaR, directL, or directR. Its the counterpart of metaR. At a lower level is directL and directR.
	//
	//Theres 2 (maybe 3?) cases (as of 2022-11-17) when metaL acts different than directL, the {...} syntax and the [...] syntax,
	//and maybe the (...) syntax but that one is harder to know where it ends since if you keep looking at fn.L().L().L()... you'll always reach U,
	//but that info will be in syty and is based on how its displayed, not just the fn.
	//
	//TODO these comments are duplicated in the if/elses below, so should remove them here?...
	//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c)
	//dropLeft (Infcur a b c) -> (Infcur dropLeft a b c)
	//aka dropLeft [[a b] c] -> [[[dropLeft] a] b] c]
	//aka dropLeft [a b c] -> [dropLeft a b c]
	//aka dropLeft ((Infcur a) b) c) -> ((((Infcur dropLeft) a) b) c)
	

	//The { kind of drag and drop is the most complex.
	//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c).
	//aka dropLeft {a b c} -> {dropLeft a b c}
	//https://en.wikipedia.org/wiki/SKI_combinator_calculus
	
	
	console.log('NEAREND: Drag: metaL');
	//let to = anytoSplat();
	//let from = anyfromSplat();
	
	let syty = to.syty();
	
	let toFn = to.splate().fn;
	let fromFn = from.splate().fn;
	console.log('MMMMMMMMMMM metaL fromFn='+fromFn+' toFn='+toFn);
	
	//let doDirectL = false;
	let replaceParent = true;
	let retFn;
	//if(syty == 'S2'){ //{...} syntax
	//if(syty != 'IC+'){ //{...} syntax (not [...] syntax)
	/*if(syty == 'U'){ //to is U
		console.log('metaL to U');
		retFn = fromFn(toFn);
	}else if(syty == 'C'){
		console.log('metaL to syty=C');
		retFn = fromFn(toFn); //FIXME??
	}else*/ if(syty == 'IC+'){ //[...] syntax. Not an empty []/Infcur.
		console.log('Drag metaL, syty='+syty+', calling the infcur/[] list way, fromFn='+fromFn+' toFn='+toFn);
		retFn = metaLOfInfcur(fromFn,toFn);
		
		/*
		Dragged (U x y z) to [hello world] in [hello world c d e] and clicked metaL.
		newSplit.splate.fn+''
		'[(U x y z) hello world]'
		parent.splate().fn+''
		'[hello world c]'
		Without the replaceParent being set to false, it would replace [hello world c], which might have been useful for S {...} kind of stuff,
		but is a problem in Infcur/IC+/IC0/[] etc, or at least it appears that way 2022-12-30-1203pEST as I'm trying to fix this.
		*/
		replaceParent = false;
		
	//}else if(syty == 'S2'){ //{...} syntax
	}else if(syty == 'S2' || (syty == 'S1' && this.parentSyty() == 'S2')){ //{...} syntax, or (S a).
		//dropLeft (S (S a b) c) -> (S (S (S dropLeft a) b) c)	
		
		console.log('Drag metaL, syty='+syty+', calling the sCurryList way, fromFn='+fromFn+' toFn='+toFn);
		retFn = metaLOfS2(fromFn,toFn);
		
		
		//Should this stop when it finds S, or when it finds something thats not a S2 syty?
		
		//TODO use metaLOfS2?
	
		//the {...} syntax aka sCurryList. {x y z} is (S (S x y) z).
		//So just prefix another S... (S to from) aka {to from} cuz this is metaL the L part (fixme did i break this comment when i changed metaR to metaL?)
		/*
		let S = vm.ops.S;
		console.log('Drag metaL, syty='+syty+', calling the sCurryList way, calling '+S+' on '+toFn+' then what that returns called on '+fromFn);
		retFn = S(toFn)(fromFn);
		*/
	//}else if(syty == 'S1' && this.parentSyty() == 'S2'){ //(S x) or the (S x) in {x y z}. If parentSyty is S2 then its the {...}.
	//	console.log('Drag metaL, syty='+syty+', doing S1 (parent is S2) thing... fromFn='+fromFn+' toFn='+toFn);
	//	retFn = S(fromFn)(toFn);
	}/*else{ //[...] syntax.
		console.log('Drag metaL, syty='+syty+', calling the infcur/[] list way, fromFn='+fromFn+' toFn='+toFn);
		retFn = metaLOfInfcur(fromFn,toFn);
	}*/else{
		console.log('metaL else, just doing normal callpair. fromFn='+fromFn+' toFn='+toFn);
		this.directL(fromSplat);
		console.log('metaL did directL');
		return;
		//retFn = fromFn(toFn);
		//doDirectL = true;
	}
	
	/*
	Its a choice between [] and {}. If those arent around it already, do {}, cuz can drag Infcur aka [] to directL or directR call to make [...].
	Dont do this. Always do metaLOfS2. It was a bug to do directL ever when metaL is called. Correct: metaL x -> {metaL x} aka (S metaL x).
	}else if(syty == 'IC+'){ //[...] syntax
		//dropLeft (Infcur a b c) -> (Infcur dropLeft a b c)
		//aka dropLeft [[a b] c] -> [[[dropLeft] a] b] c]
		//aka dropLeft [a b c] -> [dropLeft a b c]
		//aka dropLeft ((Infcur a) b) c) -> ((((Infcur dropLeft) a) b) c)
		
		//Should this stop when it finds Infcur/[], or when it finds something thats not a IC+ syty?
		
		throw 'fixmefixme todo [...] aka syty=IC+';
	}else{
		console.log('Drag metaL, syty='+syty+', so calling same as directL, calling '+toFn+' on '+fromFn);
		retFn = toFn(fromFn);
	}*/
	
	console.log('Drag metaL, syty='+syty+', returned '+retFn);
	
	//from directL[
	//let isRightRecursion = to.isRightChild();
	//let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
	//console.log('newSplit='+newSplit);
	//]
	
	let newRootSplit;
	console.log('metaL replaceParent='+replaceParent);
	if(replaceParent){
		let parent = to.parentSplat;
		let isRightRecursion = to.isRightChild();
		let callerSyty = parent.callerSyty();
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		//This isnt right??? cuz... (get whole comment from directL)
		let newRootSplitFromParent = parent.forkRootSplit(newSplit); //may call lambdas
		newRootSplit = newRootSplitFromParent;
	}else{ //this is more like directL, but it did metaL insert such as to become the first in a [...] list.
		
		/** from directL...
		let retFn = fromFn(toFn);
		console.log('Returned '+retFn);
		//let newSplit = to.split.transformSplate(splate=>splate.setFn(retFn));
		let callerSyty = to.callerSyty();
		let isRightRecursion = to.isRightChild();
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		console.log('newSplit='+newSplit);
		
		//This isnt right cuz it only returns a Split, doesnt change whats in root: to.forkRootSplit(newSplit);
		//Another problem is, the fn in root needs to be changed cuz putting retFn deep inside it,
		//so have to do those lambda calls again. Have to rebuild any part of the tree thats different.
		//It already checks for equality (by localId of fn, not perfect dedup) which will work for the UI,
		//but still need to make a new js func to forkEdit the UI and fn together...
		let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
		console.log('Drag directL about to rootSplat.setSplit to ...');
		rootSplat.setSplit(newRootSplit);
		if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
			updateDisplayToWrap();
		}
		console.log('END: Drag: directL');
		*/
		let callerSyty = to.callerSyty();
		let isRightRecursion = to.isRightChild(); //FIXME? why is it to.isRightChild() in both replaceParent==true and ==false? Shouldnt it be parent.isRightChild() in 1 of those?
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		console.log('newSplit='+newSplit);
		newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
	}
	
	
	//rootSplat.setSplit(newRootSplitFromParent);
	rootSplat.setSplit(newRootSplit);
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	console.log('END: Drag: metaL');
	

	/*
	console.log('NEAREND: Drag: metaR');
	let to = anytoSplat();
	let from = anyfromSplat();
	
	let syty = to.syty();
	
	let toFn = to.splate().fn;
	let fromFn = from.splate().fn;
	
	let retFn;
	if(syty == 'S2'){
		//the {...} syntax aka sCurryList. {x y z} is (S (S x y) z).
		//So just prefix another S... (S to from) aka {to from} cuz this is metaR the R part.
		let S = vm.ops.S;
		console.log('Drag metaR, syty='+syty+', calling the sCurryList way, calling '+S+' on '+toFn+' then what that returns called on '+fromFn);
		retFn = S(toFn)(fromFn);
	}else{
		console.log('Drag metaR, syty='+syty+', so calling same as directR, calling '+toFn+' on '+fromFn);
		retFn = toFn(fromFn);
	}
	console.log('Drag metaR, Returned '+retFn);
	let isRightRecursion = to.isRightChild();
	let newSplit = newSplitForFn_experimental(retFn, syty, isRightRecursion); //FIXME should this use syty or callerSyty (even if its checking syty above)?
	//let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion);
	console.log('Drag metaR, newSplit='+newSplit);
	//This isnt right cuz... (get whole comment from directL)
	let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
	console.log('Drag metaR about to rootSplat.setSplit to ...');
	rootSplat.setSplit(newRootSplit);
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	console.log('END: Drag: metaR');
	*/


	/*
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	console.log('TODO metaL');
	*/
};

//fromSplat --drag_metaR_way--> this. Modifies this.
Splat.prototype.metaR = function(fromSplat){
	if(options.logMetaR) console.log('NEAREND: Drag: metaR');
	//let to = anytoSplat();
	//let from = anyfromSplat();
	let to = this;
	let from = fromSplat;
	if(!to) throw 'No TO Splat';
	if(!from) throw 'No FROM Splat';
	
	let syty = to.syty();
	
	let listType = to.listType();
	//if(listType == '<' && syty=='T1'){ //is
	//}
	
	let toFn = to.splate().fn;
	let fromFn = from.splate().fn;
	if(options.logMetaR) console.log('MMMMMMMMMMM metaR fromFn='+fromFn+' toFn='+toFn);
	
	let retFn;
	/*if(syty == 'ST2'){
		//the <...> syntax aka stCurryList. <x y z> is (S (S (T x) y) z). Only the innermost one gets T.
		let S = vm.ops.S;
		if(options.logMetaR) console.log('Drag metaR, syty='+syty+', calling the stCurryList way which is the sCurryList since only innermost gets another T, calling '+S+' on '+toFn+' then what that returns called on '+fromFn);
		retFn = S(toFn)(fromFn);
	}else if(syty == 'S2'){
	*/
	//if(syty == 'S2'){
	if(syty == 'S2' || syty == 'ST2' || syty == 'ST3+' || listType == '<'){
		//the {...} syntax aka sCurryList. {x y z} is (S (S x y) z).
		//So just prefix another S... (S to from) aka {to from} cuz this is metaR the R part.
		let S = vm.ops.S;
		if(options.logMetaR) console.log('Drag metaR, syty='+syty+', calling the sCurryList way, calling '+S+' on '+toFn+' then what that returns called on '+fromFn);
		retFn = S(toFn)(fromFn);
	//}else if(syty == 'S1'){
	}else if(syty == 'S1' || syty == 'ST1' || syty == 'S_ST2' || syty == 'S_ST3' || syty == 'S_T1'){ //FIXME is it S_T1 or ST1?
		if(options.logMetaR) console.log('Drag metaR, syty='+syty+', calling as callpair then prefix sCurryList way, calling (S (toFn fromFn)), toFn='+toFn+', fromFn='+fromFn);
		retFn = S(toFn(fromFn));
	}else{
		if(options.logMetaR) console.log('Drag metaR, syty='+syty+', so calling same as directR, calling '+toFn+' on '+fromFn);
		retFn = toFn(fromFn);
	}
	if(options.logMetaR) console.log('Drag metaR, Returned '+retFn);
	let isRightRecursion = to.isRightChild();
	let newSplit = newSplitForFn_experimental(retFn, syty, isRightRecursion); //FIXME should this use syty or callerSyty (even if its checking syty above)?
	//let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion);
	if(options.logMetaR) console.log('Drag metaR, newSplit='+newSplit);
	//This isnt right cuz... (get whole comment from directL)
	let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
	if(options.logMetaR) console.log('Drag metaR about to rootSplat.setSplit to ...');
	rootSplat.setSplit(newRootSplit);
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	if(options.logMetaR) console.log('END: Drag: metaR');
	
	/*2022-11-16-4pEST got this from browser console (filtered out lots of other console stuff),
	when dragged 2.34 to {abc def ghi} and chose metaR icon,
	and thats correct (((but when i dragged it to just the {abc def} in {abc def ghi} aka {{abc def} ghi},
	it gave the wrong answer, split the application/x-IEEE-754 and 0x...stuff...)))
				
	Wikibinator203DragAndDropTree.html:3173 START doEndDrag dropCircMenuItem.pic=pic/metaR.png
	Wikibinator203DragAndDropTree.html:3781 NEAREND: Drag: metaR
	Wikibinator203DragAndDropTree.html:3795 Drag metaR, callerSyty=S2, calling the sCurryList way, calling S on {abc def ghi} then what that returns called on 2.34
	Returned {abc def ghi 2.34}
	Wikibinator203DragAndDropTree.html:3807 Drag metaR about to rootSplat.setSplit to ...
	Wikibinator203DragAndDropTree.html:3809 END: Drag: metaR
	Wikibinator203DragAndDropTree.html:3176 END doEndDrag dropCircMenuItem.pic=pic/metaR.png
	*/
};

var dropCircMenu = [
	{
		pic: 'pic/copyTo.png',
		func: ()=>{
		
			//TODO why isnt copyTo using Splat.setFn(fn,isMeta)?
			
			console.log('NEAREND: Drag: copyTo');
			let from = anyfromSplat();
			let to = anytoSplat();
			let fromFn = from.splate().fn;
			let toFn = to.splate().fn;
			console.log('replacing '+toFn+' with '+fromFn);
			//could just put a pointer to from.split in to.split (by to.setSplit(from.split)), in theory, but that wouldnt wrap based on screen width etc.
			let retFn = fromFn;
			let callerSyty = to.callerSyty();
			let isRightRecursion = to.isRightChild();
			let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //FIXME consider width. some split maker is considering width. where does that param go in?
			console.log('newSplit='+newSplit);
			
			//This isnt right cuz... (get whole comment from directL)
			let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
			console.log('Drag copyTo about to rootSplat.setSplit to ...');
			rootSplat.setSplit(newRootSplit);
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			console.log('END: Drag: copyTo');
		}
	},
	
	{
		pic: 'pic/clickPaste.png',
		func: ()=>{
			uiState.removeClickCircMenuAsap = true; //TODO remove the removeClickCircMenuAsap var.
			//let splat = anyclickcircSplat();
			let splat = anytoSplat();
			splat.setFn(uiState.wikibClipboard, options.deleteKnowsAboutS2Etc);
		}
	},
	
	{
		pic: 'pic/metaR.png',
		func: ()=>{
			let to = anytoSplat();
			let from = anyfromSplat();
			to.metaR(from);
		}
	},
	{
		pic: 'pic/directR.png',
		func: ()=>{
		
			//TODO merge duplicate code between directL and directR and maybe metaL and metaR
		
			console.log('NEAREND: Drag: directR');
			let from = anyfromSplat();
			let to = anytoSplat();
			let fromFn = from.splate().fn;
			let toFn = to.splate().fn;
			console.log('calling '+toFn+' on '+fromFn);
			let retFn = toFn(fromFn);
			console.log('Returned '+retFn);
			let callerSyty = to.callerSyty();
			let isRightRecursion = to.isRightChild();
			let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion);
			console.log('newSplit='+newSplit);
			
			//This isnt right cuz... (get whole comment from directL)
			let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
			console.log('Drag directR about to rootSplat.setSplit to ...');
			rootSplat.setSplit(newRootSplit);
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			console.log('END: Drag: directR');
		}
	},
	/*{
		pic: 'pic/select.png', //select what you dragged TO, ignoring the FROM. calls selSplat.
		func: ()=>{
			console.log('NEAREND: Drag: select (what you dragged TO, ignoring the FROM), calls selSplat');
			let to = anytoSplat();
			setSelSplat(to);
			console.log('Drag: select: new selSplat = '+selSplat);
			console.log('END: Drag: select');
		}
	},
	{
		pic: 'pic/delete.png',
		func: ()=>{
		
		
			console.log('NEAREND: Drag: delete (ignores what you dragged, just deletes whatever you dropped it on)');
			//let from = anyfromSplat();
			let to = anytoSplat();
			let parent = to.parentSplat;
			if(!parent){
				let s = 'You dragged then chose delete, but cant cuz its the outermost/root on your screen (there is no root of the whole system)';
				alert(s);
				console.log(s);
			}else{
				let isRightRecursion = to.isRightChild();
				let retFn;
				if(isRightRecursion){
					console.log('Drag then delete, is right, so delete right and replace parent with left');
					retFn = parent.leftSplat.splate().fn;
				}else{
					console.log('Drag then delete, is left, so delete left and replace parent with right');
					retFn = parent.rightSplat.splate().fn;
				}
				console.log('Returned '+retFn);
				let callerSyty = parent.callerSyty();
				let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
				//This isnt right??? cuz... (get whole comment from directL)
				let newRootSplitFromParent = parent.forkRootSplit(newSplit); //may call lambdas
				rootSplat.setSplit(newRootSplitFromParent);
				if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
					updateDisplayToWrap();
				}
			}
			console.log('END: Drag: delete');
		}
	},*/
	{
		pic: 'pic/cancel.png',
		func: ()=>{
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			//alert('cancelled drag');
			console.log('NEAREND: Drag: cancelled.');
		}
	},
	
	{
		pic: 'pic/edit.png',
		func: ()=>{
			console.log('NEAREND: Drag: edit.');
			let splat = anytoSplat();
			let oldFn = splat.splate().fn;
			let oldCode = oldFn+'';
			let newFn;
			while(true){
				try{
					let newCode = prompt('Edit lambda', oldCode);
					newFn = vm.eval(newCode);
					break;
				}catch(e){
					alert('ERROR: '+e);
				}
			}
			console.log('Edited old='+oldCode+' to new='+newFn+' and about to put it in');
			//splat.setFn(newFn, options.deleteKnowsAboutS2Etc);
			let isMeta = false;
			splat.setFn(newFn, isMeta);
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
		}
	},
	
	{
		pic: 'pic/delete.png',
		func: ()=>{
			//let splat = anyclickcircSplat();
			let splat = anytoSplat();
			splat.deleteMe(options.deleteKnowsAboutS2Etc);
		}
	},
	

	{
		pic: 'pic/select.png', //select what you dragged TO, ignoring the FROM. calls selSplat.
		func: ()=>{
			console.log('NEAREND: clickCircMenu: select (what you dragged TO, ignoring the FROM), calls selSplat');
			let to = anytoSplat();
			//let to = anyclickcircSplat();
			setSelSplat(to);
			console.log('clickCircMenu: select: new selSplat = '+selSplat);
			console.log('END: clickCircMenu: select');
		}
	},
	
	{
		pic: 'pic/directL.png',
		func: ()=>{
		
			let from = anyfromSplat();
			let to = anytoSplat();
			to.directL(from);
		}
	},
	
	{
		pic: 'pic/metaL.png',
		func: ()=>{
		
			let to = anytoSplat();
			let from = anyfromSplat();
			to.metaL(from);
		}
	},
	
	{
		pic: 'pic/clickCopy.png',
		func: ()=>{
			console.log('START: clickCircMenu: copy');
			uiState.removeClickCircMenuAsap = true;
			
			
			//let from = anyfromSplat();
			let to = anytoSplat();
			//let to = getSplatMouseIsOverElseNull();
			//let to = anyclickcircSplat();
			//let fromFn = from.splate().fn;
			let toFn = to.splate().fn;
			uiState.wikibClipboard = toFn;
			console.log('copied into uiState.wikibClipboard');
			
			
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			console.log('END: clickCircMenu: copy');
		}
	},
];

var UIMode = function(name){
	this.name = name;
};
UIMode.prototype.onEvent = function(event){
	console.log('Default UIMode.onEvent does nothing, event='+event);
};

var simpleDragUimode = new UIMode('simpleDragUimode');
simpleDragUimode.onEvent = function(event){
	console.log('TODO simpleDragUimode.event='+event);
};

var popupDragUimode = new UIMode('popupDragUimode');
popupDragUimode.onEvent = function(event){
	console.log('TODO popupDragUimode.event='+event);
};

//Example: 'XRRL' -> _[L R R] aka (Seq [L R R]),
//so (_[R R L] rootSplat.splate().fn) would return rootSplat.splate().fn.n.R().n.R().n.L().
//xlrPathToGetter and xlrPathToSetter are similar to the / opcode in urbit, which gets/puts things by binheap address.
var xlrPathToGetter = xlrPath=>{
	let list = vm.ops.Infcur;
	for(let xlr of xlrPath){
		if(xlr == 'L'){
			list = list(L);
		}else if(xlr == 'R'){
			list = list(R);
		}//else nothing. This includes the 'X' it normally starts with.
	}
	return vm.ops.Seq(list);
};

//Given rootSplat.splate().fn, for example, returns a forkEdit of it with a certain path leading to the given val/fn.
//This works if its always at the same place, but if its a key/val in a treemap, then internal structure varies,
//so you'd want to use vm.ops.Put etc instead of this way of making a setter.
var xlrPathToSetter = (xlrPath,val)=>{
	//go backward, from end of xlrPath, forkEditing 1 more thing each recursion.
	let setter = T(val); //given the deepest thing (at end of xlrPath), ignore it and return val instead.
	let S = vm.ops.S;
	for(let i=xlrPath.length-1; i>=0; i--){
		let xlr = xlrPath[i]; //'X' meaning root, 'L', or 'R'.
		if(xlr == 'L'){ //replace left child
			let getNewLeftChild = S(T(setter))(L);
			setter = S(getNewLeftChild)(R); //The R keeps the current right child
		}else if(xlr == 'R'){ //replace right child
			let getNewRightChild = S(T(setter))(R);
			setter = S(L)(getNewRightChild); //the L keeps the current left child
		}//else nothing. This includes the 'X' it normally starts with.
	}
	return setter;
};

//by path like returned by splat.pathFromRoot(), for example 'XRRRRLLLLLLLRLR'.
var newGameUimodeByPath = (xlrPath,optionalName)=>
	newGameUimodeByGetterAndSetter(optionalName||xlrPath, xlrPathToGetter(xlrPath), xlrPathToSetter(xlrPath));
	
//Given a js event, turn it into a fn to be used as param of uimode.getter(rootSplat.splate().fn)
var newGameUimodeByGetterAndSetter_eventToFn

var newGameUimodeByGetterAndSetter = (name,getter,setter)=>{
	let uimode = new UIMode(name);
	uimode.getter = getter;
	uimode.setter = setter;
	uimode.onEvent = function(event){
		consoe.log('TODO '+name+'_gameUimode.event='+event);
	};
	return uimode;
};
//popupDragUimode.onEvent = function(event){
//	throw 'TODO';
//};

var cancelDragThenThrow = throwThis=>{
	console.log('setting uiState.lastMouseButtonDown to error to avoid mousemove doing mouseup');
	uiState.lastMouseButtonDown = 'error'; //so mousemove doesnt do mouseup after the mouseup failed cuz of error. dont do mouseup anyways.
	throw throwThis;
};

/*
//in list defined by splat.listType. Null if this is the leftmost in that list (but is not the list itself).
Splat.prototype.leftSiblingOrNull = function(){
	if(!this.parentSplat){
		return null; //there is no left sibling if theres no parent.
	}
	if(this.isRightChild()){
		if(this.parentSplat.leftSplat){
			this.parentSplat.leftSplat
		}
		FIXMEFIXME
	}else{ //is left child
		if(this.parentSplat.splate().isDisplayPushAndPopChars){
			return null;
		}
		FIXMEFIXME
	}
	FIXMEFIXME
};*/

//One of: ( { [ < (and maybe unary types like ',' '_' etc?), whichever is displayed first when keep looking left.
//Does not count those not displayed, like (TypevalB U) in (TypevalB U bytesOf_abc) which is displayed as abc,
//or AName when earlier AName#(...stuff...). Only includes lists actually displayed as lists by splat.splate().isDisplayPushAndPopChars.
//If reaches root (no parentSplat), its a '(' (syty of 'C') list, whether thats displayed or not.
//Dont cache this in Splat cuz Splat is Mutable but Split and Splate are immutable and are displayed in pooled/reused Splats.
Splat.prototype.listType = function(){
	if(this.splate().isDisplayPushAndPopChars){
		return sytyToPushChar(this.splate().syty);
	}else if(!this.parentSplat){
		return '('; //normal callpair is default if theres no parent.
	}else{
		return this.parentSplat.listType();
	}
};

/*dont need this cuz infcur/[] doesnt have isDisplayPushAndPopChars of true. its a lone token.
Splat.prototype.listTypeNoEmpty = function(){
	let lt = this.listType();
	if(lt == '[' && vm.isSameOpAndNumParams(this.splate().fn,vm.ops.Infcur)){
		if(this.parentSplat){
			return this.parentSplat.listTypeNoEmpty();
		}else{
			return '('; //normal callpair is default if theres no parent.
		}
	}else{
		return lt;
	}
}*/

/*
//related to listType. Example of an empty list is [] since its vm.ops.Infcur and is normally displayed as [] but is not a [ ... ] list containing childs.
Splat.prototype.isEmptyList = function(){
};
*/

//This is called when mouseup of btn==metaInsertButton, at the end of a drag where it has a cursor-like vertical line
//between 2 lambdas in a {...} [...] or (...) that it should do metaL or metaR in.
//Which splat to do that in, and the left vs right side of it? Theres vars in uiState for it (put there at runtime):
//uiState.simpleDragUimode_cursor_splat
//uiState.dropDirection = 'left' or 'right'
var endMetaInsert = ()=>{
	if(options.logMetaInsert) console.log('MMMMMMMMMMM endMetaInsert');
	let splat = uiState.simpleDragUimode_cursor_splat; //TO
	uiState.highlightLastSplatDropped = splat;
	uiState.highlightLastSplatDropped_dropDirection = uiState.dropDirection;
	if(splat){
		let dropWhatSplat = anyfromSplat(); //FROM
		if(!dropWhatSplat){
			cancelDragThenThrow('No dropWhatSplat=anyfromSplat so cant endMetaInsert to uiState.simpleDragUimode_cursor_splat='+splat);
		}
		let direction = uiState.dropDirection;
		if(direction == 'left'){
			
			//splat.parentSplat.metaL(dropWhatSplat);
			splat.metaL(dropWhatSplat);
			/*if(splat.isRightChild()){
				let goLeft = splat;
				//while(goLeft.parentSplat && goLeft.isRightChild() && !goLeft.leftSplat && !goLeft.splate().isDisplayPushAndPopChars){
				//while(goLeft.parentSplat && !goLeft.leftSplat && !goLeft.splate().isDisplayPushAndPopChars){
				while(goLeft.parentSplat && !goLeft.splate().isDisplayPushAndPopChars){
					goLeft = goLeft.parentSplat;
				}
				if(options.logMetaInsert) console.log('leftLeft.metaR direction=left, goLeft fn = '+goLeft.splat().fn);
				goLeft.metaR(dropWhatSplat);
			}else{
				throw 'TODO';
			}*/
			
			/*
			if(splat.isRightChild()){
				let leftSibling = splat.parentSplat.leftSplat;
				if(leftSibling){
					if(options.logMetaInsert) console.log('endMetaInsert direction=left isRightChild, so about to do metaR from left sibing instead');
					//This is cuz metaL is only for putting stuff in the leftmost part of a {...} or [...] or (...) list,
					//and if you want to put stuff anywhere farther to the right, you use metaR, or directR works too for that if its a (...) list.
					leftSibling.metaR(dropWhatSplat);
					if(options.logMetaInsert) console.log('endMetaInsert direction=left done metaR from left sibling.');
				}else{
					//one reason leftSplat might not be there is splat.splate().isFoldL. Another reason is ~someSplate.isOpen.
					//Either way, skip past the part not displayed. There might be a few edge-cases for this... TODO...
					//* if its the leftmost thing in a {} <> [] () list, and its own left isnt displayed.
					//* if its NOT the leftmost thing in a {} <> [] () list, and its own left isnt displayed.
					//and there might be some complexity around <> vs {} where <a b c> means {,a b c}.
					
					let parentParent = splat.parentSplat.parentSplat;
					if(!parentParent){
						cancelDragThenThrow('No parent of parent splat');
					}
					let leftLeft = parentParent.leftSplat;
					if(!leftLeft){
						cancelDragThenThrow('No leftLeft splat');
					}
					if(options.logMetaInsert) console.log('leftLeft.metaR direction=left, leftLeft fn = '+leftLeft.splat().fn);
					leftLeft.metaR(dropWhatSplat);
					
					//throw 'FIXMEFIXME';
					/* cancelDragThenThrow('endMetaInsert direction=left isRightChild, so about to do metaR from left sibing instead, but there is no left sibling splat of '+splat+', which normally happens when isFoldL. parent.isFoldL='+splat.parentSplat.splate().isFoldL);
					*
				}
			}else{ //is left child
				if(options.logMetaInsert) console.log('endMetaInsert direction=left isLeftChild so doing metaL');
				splat.metaL(dropWhatSplat);
			}
			*/
			
			//splat.metaL(dropWhatSplat);
		}else if(direction == 'right'){
			if(options.logMetaInsert) console.log('endMetaInsert direction=right');
			if(splat.isRightChild()){
				//This seems to work in direction=='right' when drag into a {...} or [...], but not into a (...).
				if(options.logMetaInsert) console.log('endMetaInsert, setting splat = splat.parentSplat;');
				splat = splat.parentSplat;
			}
			splat.metaR(dropWhatSplat);
		}else{
			throw 'Unknown direction='+direction;
		}
	}else{
		throw 'endMetaInsert, nothing to insert';
	}
	afterDrop();
};

//If you leave off optionalIsDisplayIcon, it doesnt set it to true or false.
//Either way, only sets stuff depending on this.isDragFrom() and this.isDragTo()
Splat.prototype.setIconStuffInUiStateIfs = function(looseIconYFraction, looseIconXFraction, optionalIsDisplayIcon){
	if(this.isDragFrom()){
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('mousemove isDragFrom splat='+this);
		//false is FROM. true is TO. It can be none, one, or both of those.
		setIconStuffInUiState(false, looseIconYFraction, looseIconXFraction, optionalIsDisplayIcon);
	}
	if(this.isDragTo()){
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('mousemove isDragTo splat='+this);
		setIconStuffInUiState(true, looseIconYFraction, looseIconXFraction, optionalIsDisplayIcon);
	}
};

//moving looseIconYFraction, looseIconXFraction, isDisplayIcon, etc from Splate to uiState.
//If you leave off optionalIsDisplayIcon, it doesnt set it to true or false.
//Splat.prototype.setIconStuffInUiState = function(isToElseFrom, looseIconYFraction, looseIconXFraction, optionalIsDisplayIcon){
var setIconStuffInUiState = function(isToElseFrom, looseIconYFraction, looseIconXFraction, optionalIsDisplayIcon){
	let toVsFrom = isToElseFrom ? 'to' : 'from';
	uiState[toVsFrom].looseIconYFraction = looseIconYFraction;
	uiState[toVsFrom].looseIconXFraction = looseIconXFraction;
	//uiState[toVsFrom].isDisplayIcon = isDisplayIcon;
	optionalIsDisplayIcon = true; //FIXME remove this line
	if(optionalIsDisplayIcon !== undefined){
		uiState[toVsFrom].isDisplayIcon = optionalIsDisplayIcon;
	}
};

//Is this Splat the only one being dragged FROM (if any) right now, in uiState?
//In the redesign 2023-1, the same Splat can be both isDragFrom and isDragTo,
//such as if you right click, or if left-drag or right-drag from and to the same splat/rectangle.
//Also see Splat.dragStep() and Splat.setDragStep(dragStepString).
Splat.prototype.isDragFrom = function(){
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13){
		console.log('isDragFrom? uiState.dragSteps.wouldFrom exists='+!!uiState.dragSteps.wouldFrom+' equalsThis?='+(uiState.dragSteps.wouldFrom==this));
		console.log('isDragFrom? uiState.dragSteps.from exists='+!!uiState.dragSteps.from+' equalsThis?='+(uiState.dragSteps.from==this));
	}
	return uiState.dragSteps.wouldFrom==this || uiState.dragSteps.from==this;
};

//Is this Splat the only one being dragged TO (if any) right now, in uiState?
Splat.prototype.isDragTo = function(){
	if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13){
		console.log('isDragTo? uiState.dragSteps.wouldTo exists='+!!uiState.dragSteps.wouldTo+' equalsThis?='+(uiState.dragSteps.wouldTo==this));
		console.log('isDragTo? uiState.dragSteps.to exists='+!!uiState.dragSteps.to+' equalsThis?='+(uiState.dragSteps.to==this));
		console.log('isDragTo? uiState.dragSteps.dropCircMenu exists='+!!uiState.dragSteps.dropCircMenu+' equalsThis?='+(uiState.dragSteps.dropCircMenu==this));
	}
	return uiState.dragSteps.wouldTo==this || uiState.dragSteps.to==this || uiState.dragSteps.dropCircMenu==this;
};

/*TODO i want it to remember dragLine and some colored rect outlines, keep them on screen,
until next drag starts, and a way to get them off the screen without doing another drag,
and I want a separate wouldFrom icon than the from icon.
Which dragSteps should this be organized as?
Normally FROM deletes WOULDFROM, but I want [FROM only] or both, depending if user
has pushed some button (or waited t time?) for the previous drag to have gone away.
..
This is getting too complex by outerjoining it with the buttons (which there will be more of later).
Divide it by lastMouseButtonDown first.
Define the various states...
STATE_notDragging_noPrevDragDisplayed -> [STATE_popupDragButton_draggingFrom_choosingTo OR STATE_metaInsertButton_draggingFrom_choosingTo]
STATE_notDragging_prevDragDisplayed -> [STATE_popupDragButton_draggingFrom_choosingTo OR STATE_metaInsertButton_draggingFrom_choosingTo]
STATE_popupDragButton_draggingFrom_choosingTo -> STATE_draggingFromTo_choosingIcon
STATE_popupDragButton_draggingFromTo_choosingIcon -> [STATE_notDragging_noPrevDragDisplayed OR STATE_notDragging_prevDragDisplayed]
..
STATE_metaInsertButton_draggingFrom_choosingTo -> STATE_draggingFromTo_choosingIcon
..
const popupDragButton = 'mouseRightButton'; //controls[popupDragButton] is 0 (up) or 1 (down)
const metaInsertButton = 'mouseLeftButton';
..
..
..
Divide it by lastMouseButtonDown first, various states
if(uiState.lastMouseButtonDown == metaInsertButton){
	STATE_notDragging_prevDragDisplayed -> [STATE_notDragging_noPrevDragDisplayed OR STATE_metaInsertButton_draggingFrom_choosingTo]
	STATE_notDragging_noPrevDragDisplayed -> STATE_metaInsertButton_draggingFrom_choosingTo
	STATE_metaInsertButton_draggingFrom_choosingTo -> STATE_notDragging_prevDragDisplayed
}else if(uiState.lastMouseButtonDown == popupDragButton){
	STATE_notDragging_prevDragDisplayed -> [STATE_notDragging_noPrevDragDisplayed OR STATE_popupDragButton_draggingFrom_choosingTo].
	STATE_notDragging_noPrevDragDisplayed -> STATE_popupDragButton_draggingFrom_choosingTo
	STATE_popupDragButton_draggingFrom_choosingTo -> STATE_popupDragButton_draggingFromTo_choosingIcon
	STATE_popupDragButton_draggingFromTo_choosingIcon -> STATE_notDragging_prevDragDisplayed
}else if(TODO add more buttons here, not just mouse button){
	//TODO
}else{
	//nothing
}
FIXME how do you choose, in STATE_notDragging_prevDragDisplayed, to go to STATE_notDragging_noPrevDragDisplayed
(aka to stop displaying the prev dragLine etc without starting another drag)?

Do I want uiState.uimode.onEvent(event) to be called, or just keep doing it all merged in uiState?
Doesnt seem they can be completely separated yet cuz of shared dragSteps.wouldFrom, uiState.wikibClipboard, etc.


Planned solution: uiState.dragSteps.ghost.
"//happens after dropCircMenu. displays earlier dragLine, selected from and to, etc. can happen during WOULDFROM, but is erased when FROM starts again.
ghost: null,"
If you want to get rid of it "choose, in STATE_notDragging_prevDragDisplayed, to go to STATE_notDragging_noPrevDragDisplayed"
then use this code: uiState.dragSteps.ghost = null; updateOverlays();
aka change_dropCircMenu_to_ghost();

TODO all dropCircMenu funcs should move dropCircMenu to ghost, so it wont display the circ menu anymore but will remember it a short time.


*/

//TODO this might also be used if theres another kind of menu with an extra step at the end later, but as of 2023-1-21 its only dropCircMenu.
var change_dropCircMenu_to_ghost = ()=>{
	if(uiState.dragSteps.dropCircMenu){
		console.log('change_dropCircMenu_to_ghost working as normal');
		uiState.dragSteps.ghost = uiState.dragSteps.dropCircMenu;
		uiState.dragSteps.dropCircMenu = null;
		updateOverlays();		
	}else{
		console.log('change_dropCircMenu_to_ghost found no uiState.dragSteps.dropCircMenu so doing nothing');
	}
};

var removeGhost = ()=>{
	if(uiState.dragSteps.ghost){
		uiState.dragSteps.ghost = null;
		updateOverlays();
	}
};


//In case clickCircMenu has multiple vars, put them all here. Start with just the fn thats copy/pasted.
var uiState = {
	dragSteps: { //splats, at most 1 splat per dragStep at a time. All others have dragStep of 'no'.
		wouldFrom: null,
		from: null,
		wouldTo: null,
		to: null,
		dropCircMenu: null,
		
		//happens after dropCircMenu. displays earlier dragLine, selected from and to, etc. can happen during WOULDFROM, but is erased when FROM starts again.
		ghost: null,
	},
	from: { //about uiState.dragSteps['wouldFrom' or 'from']
		looseIconYFraction: 0,
		looseIconXFraction: 0,
		isDisplayIcon: false,
	},
	to: { //about uiState.dragSteps['wouldTo' or 'to' or 'dropCircMenu']
		looseIconYFraction: 0,
		looseIconXFraction: 0,
		isDisplayIcon: false,
	},
	
	lastMouseButtonDown: 'unknownButton',
	wikibClipboard: U, //clickCopy and clipPaste use this.
	
	//normally is simpleDragUimode or popupDragUimode (in general, a few kinds of drag depending which button,
	//some of which have a popup circular menu at the end, and some of which dont) or
	//a newGameUimodeByPath (at a specific splat somewhere inside containing a canvas etc),
	//that the controls (keyboard, mouse, gamepad, webcam, microphone, etc) get attached to
	//while you want to play it as a game or visual/sound tool or other interactive process.
	uimode: simpleDragUimode,
};

//NEW: Bottom half of rectangle selects parent. Top half selects self.
//
//OLD...
//var getSplatMouseIsOverElseNull = ()=>splatAtYX(controls.mouseY, controls.mouseX);
//screenYXToSplatfyfx
//
var getSplatMouseIsOverElseNull = ()=>{
	let splatfyfx = screenYXToSplatfyfx(controls.mouseY, controls.mouseX);
	if(!splatfyfx) return null;
	return splatfyfx.splat; //parent splat or self splat of that Y X
	
	//return splatAtYX(controls.mouseY, controls.mouseX); //FIXME
};

//its L is vm.ops.S. Its not S itself.
var sytyHasSPrefix = syty=>(syty=='S1' || syty=='ST1' || syty=='S_T1<>' || syty=='S_ST2' || syty=='S_ST3');

//its L is vm.ops.T. Its not T itself.
var sytyHasTPrefix = syty=>(syty=='T1' || syty=='T1<>');

//Its L L is vm.ops.S. Its not S itself.
var sytyHasSPrePrefix = syty=>(syty=='S2' || syty=='ST2' || syty=='ST3+');

//TODO testcase of delete <abc def> in <<abc def> ghi jkl> returns <ghi jkl>.
Splat.prototype.deleteMe = function(isMetaDelete){
	//FIXME this changes {abc def ghi} to {S def ghi} if delete the top of abc,
	//but if its going to put it back in {...} then the S shouldnt happen again.

	console.log('splatDelete, NEAREND: clickCircMenu: delete (ignores what you dragged, just deletes whatever you dropped it on)');
	//let from = anyfromSplat();
	//let to = anytoSplat();
	//let to = anyclickcircSplat();
	let to = this;
	let parent = to.parentSplat;
	if(!parent){
		let s = 'You dragged then chose delete, but cant cuz its the outermost/root on your screen (there is no root of the whole system). TODO should this replace root with (F U) aka IdentityFunc/I?';
		alert(s);
		console.log(s);
	}else{
		let retFn;
		let thisFn = to.splate().fn;
		let doSimpleDelete = true;
		let isRightRecursion = to.isRightChild();
		//if(options.deleteKnowsAboutS2Etc){
		if(isMetaDelete){
			let parentSyty = to.parentSyty();
			
			/*sytys: IC0: '[',
			'IC+': '[',
			C: '(',
			S0: '(',
			S1: '(',
			S2: '{',
			ST1: '(',
			ST2: '<',
			'ST3+': '<',
			'S_T1<>': '(',
			S_ST2: '(',
			'S_ST3+': '(',
			T1: ',', //Change ',' to 'T' 
			'T1<>': ',', //Change ',' to 'T', in ',<...at least 2 things...>'.
			*/
			

			let listType = this.listType();
			if(sytyHasSPrePrefix(parentSyty)){ //parentSyty == 'S2' etc
				let parentFn = parent.splate().fn;
				console.log('splatDelete retFn='+retFn+' syty='+to.splate().syty+' parentSyty='+parentSyty+' toFn='+thisFn+' parentFn='+parent.splate().fn);
				//console.log('options.deleteKnowsAboutS2Etc adding an S');
				//retFn = vm.ops.S(retFn);
				if(isRightRecursion){
					retFn = deleteMetaROfS2(parentFn);
				}else{
					retFn = deleteMetaLOfS2(parentFn);
				}
				doSimpleDelete = false;
			}else if(sytyHasSPrefix(parentSyty) && sytyHasSPrePrefix(to.parentParentSyty())){ //parentSyty == 'S1' && to.parentParentSyty()=='S2' etc
			
				//maybe it works both ways?
				//if(isRightRecursion){
				//	throw 'TODO handle isRightRecursion=true here in parentSyty S1 parentParentSyty S2, but that probably wont happen cuz the S is not displayed cuz should be isFoldL.';
				//}
				
				//happens when deleting the down side (selects self and to the left)
				//of {abc def} in {abc def ghi jkl}, for example.
				//syty of {abc def} is S2, and its parentSyty is S1 cuz (S (S {abc def} ghi) jkl).
				//So want to delete the (S {abc def}) instead of just {abc def},
				//and leave {ghi jkl} aka (S ghi jkl).
				//
				//Or similar for deleting abc or {abc def ghi} instead of deleting {abc def}.
				console.log('splatDelete recursing to metaDelete parent, so dont expect to see "END: clickCircMenu: delete" cuz ending right after that.');
				to.parentSplat.deleteMe(isMetaDelete); //know to.parentSplat exists cuz its syty isnt 'C'
				console.log('splatDelete END recursing to metaDelete parent.');
				return;
			}else if(parentSyty == 'IC0' || parentSyty == 'IC+'){
				//Infcur/[] list such as [a b c] in [a b c d e] aka ([] a b c d e).
				//Infcur/[] just appends params and never evals. It has no length limit.
				//let parentIsRightRecursion = parent.isRightChild();
				//if(!parentIsRightRecursion){ //is left
				if(!isRightRecursion){ //is left
					console.log('splatDelete IC isRightRecursion');
					let parentFn = parent.splate().fn;
					let rightSibling = parentFn.n.R();
					retFn = vm.ops.Infcur(rightSibling);
					doSimpleDelete = false;
				}
				//thisFn is wrong. want to delete thisFn and keep whats right of it, but with Infcur left of that...
				//if(!isRightRecursion){
				//	retFn = vm.ops.Infcur(thisFn);
				//	doSimpleDelete = false;
				//}
				//else parentIsRightRecursion, just do normal delete, like deleting the d in [a b c d e]
				//should do ([a b c] e) which evals to [a b c e].
			}else if(listType=='<' && sytyHasTPrefix(parentSyty) && !to.parentSplat.splate().isDisplayPushAndPopChars){
				//is first thing in <...>, doesnt display the T/, prefix of that first thing cuz being first in <...> implied T/, prefix.
				console.log('splatDelete is first thing in <...>');
				
				/* When deleting <abc def> in <<abc def> ghi ...> 2023-1-9
				thisFn+''
				'<abc def>'
				to.parentSplat.splate().fn+''
				',<abc def>'
				to.parentSplat.parentSplat.splate().fn+''
				'(S ,<abc def>)'
				to.parentSplat.parentSplat.parentSplat.splate().fn+''
				'<<abc def> ghi>'
				*/
				if(to.parentSplat.parentSplat && to.parentSplat.parentSplat.parentSplat){
					console.log('splatDelete deleting first thing in <...>');
					
					//to.parentSplat is ,to
					//to.parentSplat.parentSplat is (S ,to)
					//to.parentSplat.parentSplat.parentSplat is <to x> for some x. Aka (S ,to x) aka (S (T to) x) aka ((S (T to)) x).
					//FIXME, should x get a T prefix (to keep the <...>) or should nothing have a T prefix so it becomes a {...}?
					//Define that in options.deletingFirstInSTListMovesTheTRightElseDeletesTheT. Added that option.
					//let st2 = to.parentSplat.parentSplat.parentSplat; //TODO rename this to st2or3p? Wait to see if this fixes it.
					let st2or3p = to.parentSplat.parentSplat.parentSplat; //renamed, this was called st2. It worked for deleting <abc def> in <<abc def> ghi>
					//If it was a ST3+ then its first thing wouldnt have the T prefix of the first thing in ST2.
					//if(st2.splate().syty != 'ST2'){
					if(st2or3p.splate().syty != 'ST2' && st2or3p.splate().syty != 'ST3+'){
						//TODO update comments with the "As I designed it (which I may regret later" etc, rename to st2or3p.
						throw 'Expected a syty=ST2 or =ST3+ but found a '+st2or3p.splate().syty+' in fn='+st2or3p.splate.fn;
					}
					let x = st2or3p.fn().n.R(); //st2 is <to x>.
					let fn;
					if(options.deletingFirstInSTListMovesTheTRightElseDeletesTheT){
						//st2or3p is <to x>. Replace it with ,x. It may be inside a ST3+ in which case that innermost ST3+ should become a ST2 starting with x,
						//but that maybe wont happen until update whole tree again. Theres bugs in the updating of splat/splate/split as of 2023-1-9.
						fn = vm.ops.T(x);
					}else{
						//st2or3p is <to x>. Replace it with x. It may be inside a ST3+ in which case that innermost ST3+ should become a S2 starting with x,
						//but that maybe wont happen until update whole tree again. Theres bugs in the updating of splat/splate/split as of 2023-1-9.
						fn = x;
					}
					st2or3p.setFn(fn,true); //true isMeta
					return;
					
					/*A strange combo of sytys I designed for <...> as the first thing in an outer <...>.
					I'm not sure if this is a bug or not but it was hard to get it working in vm.eval and the treeUI 2022-12,
					so I dont want to change the sytys.
					..
					As I designed it (which I may regret later, not sure if its completely consistent or the simplest way to organize it,
					and the whole <...> syntax added another depth of need callerCallerSyty instead of just callerSyty which adds complexity)
					,<abc def> has syty of T1<> and <<abc def> ghi> has syty of ST3+ as it skips ST2.
					Normally the first thing in a ST3+ is a ST2,
					but I was having some problem getting it to display as <<abc def> ghi> instead of <abc def ghi>,
					as they're both {,b c} aka {,{,abc def} ghi} so it was a problem for them to have the same syty (both ST2 before this design).
					..
					Instead, figure out how to make it work with the menu and dragAndDrop commands (delete, copy, etc).
					So it appears that what I thought was st2 (i named a js var that in code above) maybe should be st2or3p???
					....
					Deleting <abc def> out of <<abc def> ghi>...
					st2.fn()+''
					'<<abc def> ghi>'
					st2.splate().syty
					'ST3+'
					st2.leftSplat.splate().syty
					'S_T1<>'
					st2.leftSplat.splate().fn+''
					'(S ,<abc def>)'
					st2.leftSplat.rightSplat.splate().fn+''
					',<abc def>'
					st2.leftSplat.rightSplat.splate().syty+''
					'T1<>'
					st2.leftSplat.rightSplat.rightSplat.splate().syty+''
					'ST2'
					st2.leftSplat.rightSplat.rightSplat.splate().fn+''
					'<abc def>'
					*/
					
					//console.log('splatDelete getting to.parentSplat.parentSplat.parentSplat.rightSplat');
					//retFn = to.parentSplat.parentSplat.parentSplat.rightSplat.splate().fn; //If TO is <abc def> then retFn is ghi.
					
					
					/*FIXMEFIXME have to do sCurryList recursively similar to as in deleteMetaROfS2(parentFn);
					Will need to replace parent or parent of parent or something like that.
					Theres a Splat.setFn func or something like that, which could call here and return right after.
					Remember that ST3+ doesnt start with a (T something), and ST2 does. <a b c d> means {,a b c d} aka {{{,a b} c} d}
					and , is another name for T which is normally used when theres no space between them.
					todo use stListToJsList
					*/
					
					
					//doSimpleDelete = false;
				}else{
					console.log('splatDelete couldnt to.parentSplat.parentSplat.parentSplat.rightSplat so doing nothing. FIXME??');
					return;
				}
			}
			
			
			/*
			//this code worked before added <...> syntax which also uses T1<> ST1 S_T1<> ST2 ST3+.
			//but since T1 may also be T1<>, and S1 may also be ST1 or S_T1<>, thats likely to break the code below...
			if(parentSyty == 'S2'){
				let parentFn = parent.splate().fn;
				console.log('retFn='+retFn+' syty='+to.splate().syty+' parentSyty='+parentSyty+' toFn='+thisFn+' parentFn='+parent.splate().fn);
				//console.log('options.deleteKnowsAboutS2Etc adding an S');
				//retFn = vm.ops.S(retFn);
				if(isRightRecursion){
					retFn = deleteMetaROfS2(parentFn);
				}else{
					retFn = deleteMetaLOfS2(parentFn);
				}
				doSimpleDelete = false;
			}else if(parentSyty == 'S1' && to.parentParentSyty()=='S2'){
			
				//maybe it works both ways?
				//if(isRightRecursion){
				//	throw 'TODO handle isRightRecursion=true here in parentSyty S1 parentParentSyty S2, but that probably wont happen cuz the S is not displayed cuz should be isFoldL.';
				//}
				
				//happens when deleting the down side (selects self and to the left)
				//of {abc def} in {abc def ghi jkl}, for example.
				//syty of {abc def} is S2, and its parentSyty is S1 cuz (S (S {abc def} ghi) jkl).
				//So want to delete the (S {abc def}) instead of just {abc def},
				//and leave {ghi jkl} aka (S ghi jkl).
				//
				//Or similar for deleting abc or {abc def ghi} instead of deleting {abc def}.
				console.log('Recursing to metaDelete parent, so dont expect to see "END: clickCircMenu: delete" cuz ending right after that.');
				to.parentSplat.deleteMe(isMetaDelete); //know to.parentSplat exists cuz its syty isnt 'C'
				console.log('END recursing to metaDelete parent.');
				return;
			}else if(parentSyty == 'IC0' || parentSyty == 'IC+'){
				//Infcur/[] list such as [a b c] in [a b c d e] aka ([] a b c d e).
				//Infcur/[] just appends params and never evals. It has no length limit.
				//let parentIsRightRecursion = parent.isRightChild();
				//if(!parentIsRightRecursion){ //is left
				if(!isRightRecursion){ //is left
					let parentFn = parent.splate().fn;
					let rightSibling = parentFn.n.R();
					retFn = vm.ops.Infcur(rightSibling);
					doSimpleDelete = false;
				}
				//thisFn is wrong. want to delete thisFn and keep whats right of it, but with Infcur left of that...
				//if(!isRightRecursion){
				//	retFn = vm.ops.Infcur(thisFn);
				//	doSimpleDelete = false;
				//}
				//else parentIsRightRecursion, just do normal delete, like deleting the d in [a b c d e]
				//should do ([a b c] e) which evals to [a b c e].
			}
			//TODO Infcur/[] list. check syty is IC+ or IC0 etc.
			*/
				
				
			/*
			//TODO test this with X/delete on {abc def ghi jkl}
			let parentSyty = parent.splate().syty;
			//if(parentSyty == 'S2' || parentSyty == 'S1'){
			if(parentSyty == 'S2'){
				console.log('retFn='+retFn+' parentSyty='+parentSyty+' toFn='+to.splate().fn+' parentFn='+parent.splate().fn);
				//console.log('options.deleteKnowsAboutS2Etc adding an S');
				//retFn = vm.ops.S(retFn);
				doSimpleDelete = false;
			}*/
		}
		if(doSimpleDelete){ //the simple way of X/delete. Replace parent with self's sibling in that parent. Each fn has 2 child fns.
			if(isRightRecursion){
				console.log('splatDelete doSimpleDelete isRightRecursion, clickCircMenu then delete, is right, so delete right and replace parent with left');
				
				//parent.leftSplat will be null if this is displayed as {abc def ghi} and
				//you delete (top half of, to select abc, not "{abc"). It works on bottom half, as of 2022-12-21.
				//So I'm replacing "parent.leftSplat.splate().fn" with parent.splate().fn.n.L(), and similar for R.
				//It should be the same fn.
				//retFn = parent.leftSplat.splate().fn;
				retFn = parent.splate().fn.n.L();
			}else{ //is left recursion
				console.log('splatDelete doSimpleDelete LEFT!isRightRecursion, so delete left and replace parent with right');
				//retFn = parent.rightSplat.splate().fn;
				retFn = parent.splate().fn.n.R();
			}
		}
		console.log('splatDelete returned '+retFn);
		let callerSyty = parent.callerSyty();
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //fixme wrap to what max width?
		//This isnt right??? cuz... (get whole comment from directL)
		let newRootSplitFromParent = parent.forkRootSplit(newSplit); //may call lambdas
		rootSplat.setSplit(newRootSplitFromParent);
		if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
			updateDisplayToWrap();
		}
	}
	console.log('END: clickCircMenu: delete');
};


//if isMeta, its like metaDelete metaL metaR etc, except for paste/setFn.
//Not specific to paste cuz you dont have to use uiState.wikibClipboard.
Splat.prototype.setFn = function(fn, isMeta){
	console.log('START: clickCircMenu: paste');
	if(isMeta){
		let thisSyty = this.splate().syty;
		let parentSyty = this.parentSyty();
		if(parentSyty=='S2' && thisSyty=='S1'){
			console.log('Splat.setFn recursing cuz meta parentS2 selfS1');
			return this.R().setFn(fn, isMeta);
		}else if(thisSyty=='IC+'){ //but not if its IC0 cuz thats just Infcur/[] by itself.
			//console.log('Splat.setFn recursing (and put Infcur/[] left of param) cuz meta selfIC+');
			//wrong... return this.R().setFn(fn, isMeta);
			console.log('Splat.setFn putting Infcur/[] left of param fn cuz isMeta and self syty is IC+');
			fn = vm.ops.Infcur(fn);
		}
	}
	
	//TODO clean up the below code. It was moved from clickCircMenu pic/clickPaste.png
	//but now is generalized to setFn.
	
	
	//let from = anyfromSplat();
	//let to = anytoSplat();
	//let to = getSplatMouseIsOverElseNull();
	let to = this;
	//if(to != null){
		//let fromFn = from.splate().fn;
		let toFn = to.splate().fn;
		//let valToPaste = uiState.wikibClipboard;
		let valToPaste = fn;
		
		
		//uiState.wikibClipboard = toFn;
		//console.log('copied into uiState.wikibClipboard');
		
		
		let retFn = valToPaste;
		
		
		console.log('clickCircMenu: replacing '+toFn+' with '+retFn);
		//could just put a pointer to from.split in to.split (by to.setSplit(from.split)), in theory, but that wouldnt wrap based on screen width etc.
		let callerSyty = to.callerSyty();
		let isRightRecursion = to.isRightChild();
		let newSplit = newSplitForFn_experimental(retFn, callerSyty, isRightRecursion); //FIXME consider width. some split maker is considering width. where does that param go in?
		console.log('clickCircMenu: newSplit='+newSplit);
		
		//This isnt right cuz... (get whole comment from directL)
		let newRootSplit = to.forkRootSplit(newSplit); //may call lambdas
		console.log('clickCircMenu: paste, about to rootSplat.setSplit to ...');
		rootSplat.setSplit(newRootSplit);
		console.log('clickCircMenu: paste from uiState.wikibClipboard');
	//}
	
	if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
		updateDisplayToWrap();
	}
	console.log('END: clickCircMenu: paste');
};

/* 2022-12-28 starting to get rid of clickCircMenu and move its contents to dropCircMenu (applying to the TO splat).
..
//menu that appears when rightClick a fn. This is similar to dropCircMenu except that only happens when drag from a fn to a fn.
//This is for things like copy and paste. Also, quicksave1 quickload1 quicksave2 quickload2 etc at a specific fn.
var clickCircMenu = [
	{
		pic: 'pic/cancel.png',
		func: ()=>{
			console.log('START: clickCircMenu: cancel');
			uiState.removeClickCircMenuAsap = true; //TODO remove the removeClickCircMenuAsap var.
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			console.log('END: clickCircMenu: cancel');
		}
	},
	{
		pic: 'pic/clickPaste.png',
		func: ()=>{
			uiState.removeClickCircMenuAsap = true; //TODO remove the removeClickCircMenuAsap var.
			anyclickcircSplat().setFn(uiState.wikibClipboard, options.deleteKnowsAboutS2Etc);
		}
	},
	{
		pic: 'pic/select.png', //select what you dragged TO, ignoring the FROM. calls selSplat.
		func: ()=>{
			console.log('NEAREND: clickCircMenu: select (what you dragged TO, ignoring the FROM), calls selSplat');
			//let to = anytoSplat();
			let to = anyclickcircSplat();
			setSelSplat(to);
			console.log('clickCircMenu: select: new selSplat = '+selSplat);
			console.log('END: clickCircMenu: select');
		}
	},
	{
		pic: 'pic/delete.png',
		func: ()=>{
			anyclickcircSplat().deleteMe(options.deleteKnowsAboutS2Etc);
		}
	},
	{
		pic: 'pic/clickCopy.png',
		func: ()=>{
			console.log('START: clickCircMenu: copy');
			uiState.removeClickCircMenuAsap = true;
			
			
			//let from = anyfromSplat();
			//let to = anytoSplat();
			//let to = getSplatMouseIsOverElseNull();
			let to = anyclickcircSplat();
			//let fromFn = from.splate().fn;
			let toFn = to.splate().fn;
			uiState.wikibClipboard = toFn;
			console.log('copied into uiState.wikibClipboard');
			
			
			if(options.updateDisplayToWrap_afterEachDropCircMenuCommand){
				updateDisplayToWrap();
			}
			console.log('END: clickCircMenu: copy');
		}
	},
];
*/

//also triggers oninput event, such as on a textarea as dob. TODO??? maybe also works for number input etc?
var setDobValue = (dob,val)=>{
	dob.value = '';
	dob.dispatchEvent(new Event('input'));
};

var updateDisplayToWrap = ()=>{
	if(options.logTodos) console.log('TODO optimize by merging updateDisplayToWrap with the funcs in dropCircMenu, to only call setSplit on rootSplat once instead of twice (there then it calls here again)');
	rootSplat.transformSplit(split=>split.forkTryMaxWidth(options.maxWidth_for_forkTryMaxWidth_ofRoot));
};

var transpileAndDisplayIf = (fn,canThrowOnBrowserConsole,tyOrUndefined)=>{
	if(Dob('chk_codeTranspiledOut').checked){
		let lang = 'js';
		//TODO put this in try/catch and display the error
		try{
			let code = fn.n.transpile(lang,tyOrUndefined);
			Dob('codeTranspiledOut').value = code;
		}catch(e){
			let err = 'ERROR TRANSPILING: '+e;
			Dob('codeTranspiledOut').value = err;
			if(canThrowOnBrowserConsole){
				console.log(err);
				//TODO console.otherstuff... https://developer.mozilla.org/en-US/docs/Web/API/console/info
				throw e;
			}
		}
	}
};

//-1 for none (do popup menu to ask user for it), or 0..(dropCircMenu.length-1) to do it automatically without popping it up.
var preChoosePopupIcon = -1;

var display_copyOfPopupMenuToPreChoose = ()=>{
	let dob = Dob('copyOfPopupMenuToPreChoose');
	//let html = '<input type=button onclick="preChoosePopupIcon = -1; display_copyOfPopupMenuToPreChoose();" value="Ask when drag/drop"></input> or drag with '+popupDragButton+' does this:';
	let siz = options.dropCircMenuIconSize*1.5;
	let html = 'Drag and drop lambda onto lambda to find/create lambda, to build apps, games, or tiny pieces of math...<br>';
	let borderColor = options.metaInsertDragLineColor;
	html += metaInsertButton+' does <div style="border:solid;border-width:3px;display:inline-block;border-color:'+borderColor+'"><img src="pic/metaInsert.png" style="height:'+siz+'px;width:'+siz+'px"></div><br>';
	html += popupDragButton+' does ';
	dropCircMenu[-1] = {pic:'pic/askLater.png'};
	let bgColor = document.body.style.backgroundColor || 'white';
	for(let j=-1; j<dropCircMenu.length; j++){
		let i = j;
		if(j != -1){
			i = (i+Math.ceil(dropCircMenu.length/2))%dropCircMenu.length; //display icons in same order they appear on screen in the circle, aligned to top of circle
		}
		let menuItem = dropCircMenu[i];
		let picPath = menuItem.pic;
		borderColor = i==preChoosePopupIcon ? options.popupDragLineColor : bgColor;
		html += '<div style="border:solid;border-width:3px;display:inline-block;border-color:'+borderColor+'"><img src="'+picPath+'" style="height:'+siz+'px;width:'+siz+'px" onclick="preChoosePopupIcon = '+i+'; display_copyOfPopupMenuToPreChoose();"></div>';
	}
	html += ' &lt;-- choose';
	dob.innerHTML = html;
};

window.onload = ()=>{
	rootDob = Dob('rootDob');
	rootDob.addEventListener('mousedown', event=>{
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('rootDob_mousedown');
		globalOnMouseDown(event);
	});
	rootDob.addEventListener('mouseup', event=>{
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('rootDob_mouseup');
		globalOnMouseUp(event);
	}); //cuz keeps losing mouseup events, moved mouseup events to global. Then for a different reason moved mousedown and mousemove events to global.
	rootDob.addEventListener('mousemove', event=>{
		if(options.logABunchOfStuffThatIsLoggingTooMuch2023_3_13) console.log('rootDob_mousemove');
		globalOnMouseMove(event);
	});
	//Dob('extraTests').innerHTML = '<input type=button value="Put test buttons here - vm.htmlForExtraTests()" onclick="Dob(\'extraTests\').innerHTML = vm.htmlForExtraTests();">';
	Dob('extraTests').innerHTML = vm.htmlForExtraTests();
	rootSplat = new Splat(null, rootDob);
	console.log('Created rootSplat='+rootSplat+' and about to make a Split and rootSplat.setSplit to display it');
	let fn = exampleFnToDisplay;
	//TODO merge duplicate code between setRootFn and window.onload
	let split = newSplitForFn_experimental(fn);
	
	if(options.testActionOnWindowLoad){
		let splitForAction = newSplitForFn_experimental(fnForTestingAction);
		//let whichDropDob = 'dropleft';
		let whichDropDob = 'dropmid';
		//let whichDropDob = 'dropright';
		let a = new Action(splitForAction, whichDropDob, 'insert');
		split = split.setAction(a);
	}
	
	rootSplat.setSplit(split); //display it recursively
	if(options.do_forkTryMaxWidth_experimentOnWindowLoad){
		//split = split.forkTryMaxWidth(12500); //FIXME this is just a test
		//split = split.forkTryMaxWidth(1400); //FIXME this is just a test
		//split = split.forkTryMaxWidth(1800); //FIXME this is just a test
		//split = split.forkTryMaxWidth(2200); //FIXME this is just a test
		//split = split.forkTryMaxWidth(400); //FIXME this is just a test
		//split = split.forkTryMaxWidth(200); //FIXME this is just a test
		//split = split.forkTryMaxWidth(options.maxWidth_for_forkTryMaxWidth_ofRoot); //FIXME this is just a test
		updateDisplayToWrap();
	}
	
	display_copyOfPopupMenuToPreChoose();
};

var getTranspileTyTextfieldOrUndefined = function(){
	return Dob('transpileTyTextfieldId').value.trim() || undefined;
};


/*return {
	U: U,
	vm: vm,
	Split: Split,
	loadOpsByName: loadOpsByName,
};*/
//TODO move window out of that lambda then... })();
</script>
</head><body>
	<center><b>Wikibinator203 widget</b><br>(todo not so much stuff on screen at once, should be mostly the colored draggable rectangles. each is a lambda. and todo move this UI to a js file so can be used in other html files. Canvas graphics and Web Audio API ScriptProcessorNode is coming soon, when transpiler makes it fast enuf for that. Then GPU.)</center><br>
	<nobr><input type=checkbox id=licenseDetails_chk oninput="Dob('licenseDetails').style.display=(this.checked?'inline':'none');"><label for=licenseDetails_chk>display opensource <b>license</b> below (its 1 paragraph then GNU AGPL 3 then classpath exception.)</label></nobr><br>
<div id=licenseDetails style="display:none"><br>
	LICENSE AT TIME 2023-2-9:[[[
Wikibinator203 license: The whole turing-complete and hypercomputing space derived from
this universal combinator/lambda or forks of it and other software (prototype by Ben F Rayfield Y2023),
including every lambda of this kind called on a lambda to find/create a lambda or which never halts
(which the author of is defined as the universal combinator since these are tiny shared math objects),
is offered to everyone under opensource GNU AGPL 3 license, plus these extra permissions:
* Classpath/linking exception. Hook it to whatever you want, but within the space (no proprietary lambdas) is AGPL.
* License is instantly unterminated when you start obeying it.
* Free speech absolutism in the evilbit=true namespace in which all possible lambdas are allowed, even viruses etc.
<br><br>
                    GNU AFFERO GENERAL PUBLIC LICENSE
                       Version 3, 19 November 2007
<br><br>
 Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
 Everyone is permitted to copy and distribute verbatim copies
 of this license document, but changing it is not allowed.
<br><br>
                            Preamble
<br><br>
  The GNU Affero General Public License is a free, copyleft license for
software and other kinds of works, specifically designed to ensure
cooperation with the community in the case of network server software.
<br><br>
  The licenses for most software and other practical works are designed
to take away your freedom to share and change the works.  By contrast,
our General Public Licenses are intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users.
<br><br>
  When we speak of free software, we are referring to freedom, not
price.  Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
<br><br>
  Developers that use our General Public Licenses protect your rights
with two steps: (1) assert copyright on the software, and (2) offer
you this License which gives you legal permission to copy, distribute
and/or modify the software.
<br><br>
  A secondary benefit of defending all users' freedom is that
improvements made in alternate versions of the program, if they
receive widespread use, become available for other developers to
incorporate.  Many developers of free software are heartened and
encouraged by the resulting cooperation.  However, in the case of
software used on network servers, this result may fail to come about.
The GNU General Public License permits making a modified version and
letting the public access it on a server without ever releasing its
source code to the public.
<br><br>
  The GNU Affero General Public License is designed specifically to
ensure that, in such cases, the modified source code becomes available
to the community.  It requires the operator of a network server to
provide the source code of the modified version running there to the
users of that server.  Therefore, public use of a modified version, on
a publicly accessible server, gives the public access to the source
code of the modified version.
<br><br>
  An older license, called the Affero General Public License and
published by Affero, was designed to accomplish similar goals.  This is
a different license, not a version of the Affero GPL, but Affero has
released a new version of the Affero GPL which permits relicensing under
this license.
<br><br>
  The precise terms and conditions for copying, distribution and
modification follow.
<br><br>
                       TERMS AND CONDITIONS
<br><br>
  0. Definitions.
<br><br>
  "This License" refers to version 3 of the GNU Affero General Public License.
<br><br>
  "Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
<br><br>
  "The Program" refers to any copyrightable work licensed under this
License.  Each licensee is addressed as "you".  "Licensees" and
"recipients" may be individuals or organizations.
<br><br>
  To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy.  The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
<br><br>
  A "covered work" means either the unmodified Program or a work based
on the Program.
<br><br>
  To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy.  Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
<br><br>
  To "convey" a work means any kind of propagation that enables other
parties to make or receive copies.  Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
<br><br>
  An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License.  If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
<br><br>
  1. Source Code.
<br><br>
  The "source code" for a work means the preferred form of the work
for making modifications to it.  "Object code" means any non-source
form of a work.
<br><br>
  A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
<br><br>
  The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form.  A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
<br><br>
  The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities.  However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work.  For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
<br><br>
  The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
<br><br>
  The Corresponding Source for a work in source code form is that
same work.
<br><br>
  2. Basic Permissions.
<br><br>
  All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met.  This License explicitly affirms your unlimited
permission to run the unmodified Program.  The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work.  This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
<br><br>
  You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force.  You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright.  Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
<br><br>
  Conveying under any other circumstances is permitted solely under
the conditions stated below.  Sublicensing is not allowed; section 10
makes it unnecessary.
<br><br>
  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
<br><br>
  No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
<br><br>
  When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
<br><br>
  4. Conveying Verbatim Copies.
<br><br>
  You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
<br><br>
  You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
<br><br>
  5. Conveying Modified Source Versions.
<br><br>
  You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
<br><br>
    a) The work must carry prominent notices stating that you modified
    it, and giving a relevant date.
<br><br>
    b) The work must carry prominent notices stating that it is
    released under this License and any conditions added under section
    7.  This requirement modifies the requirement in section 4 to
    "keep intact all notices".
<br><br>
    c) You must license the entire work, as a whole, under this
    License to anyone who comes into possession of a copy.  This
    License will therefore apply, along with any applicable section 7
    additional terms, to the whole of the work, and all its parts,
    regardless of how they are packaged.  This License gives no
    permission to license the work in any other way, but it does not
    invalidate such permission if you have separately received it.
<br><br>
    d) If the work has interactive user interfaces, each must display
    Appropriate Legal Notices; however, if the Program has interactive
    interfaces that do not display Appropriate Legal Notices, your
    work need not make them do so.
<br><br>
  A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit.  Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
<br><br>
  6. Conveying Non-Source Forms.
<br><br>
  You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
<br><br>
    a) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by the
    Corresponding Source fixed on a durable physical medium
    customarily used for software interchange.
<br><br>
    b) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by a
    written offer, valid for at least three years and valid for as
    long as you offer spare parts or customer support for that product
    model, to give anyone who possesses the object code either (1) a
    copy of the Corresponding Source for all the software in the
    product that is covered by this License, on a durable physical
    medium customarily used for software interchange, for a price no
    more than your reasonable cost of physically performing this
    conveying of source, or (2) access to copy the
    Corresponding Source from a network server at no charge.
<br><br>
    c) Convey individual copies of the object code with a copy of the
    written offer to provide the Corresponding Source.  This
    alternative is allowed only occasionally and noncommercially, and
    only if you received the object code with such an offer, in accord
    with subsection 6b.
<br><br>
    d) Convey the object code by offering access from a designated
    place (gratis or for a charge), and offer equivalent access to the
    Corresponding Source in the same way through the same place at no
    further charge.  You need not require recipients to copy the
    Corresponding Source along with the object code.  If the place to
    copy the object code is a network server, the Corresponding Source
    may be on a different server (operated by you or a third party)
    that supports equivalent copying facilities, provided you maintain
    clear directions next to the object code saying where to find the
    Corresponding Source.  Regardless of what server hosts the
    Corresponding Source, you remain obligated to ensure that it is
    available for as long as needed to satisfy these requirements.
<br><br>
    e) Convey the object code using peer-to-peer transmission, provided
    you inform other peers where the object code and Corresponding
    Source of the work are being offered to the general public at no
    charge under subsection 6d.
<br><br>
  A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
<br><br>
  A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling.  In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage.  For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product.  A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
<br><br>
  "Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source.  The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
<br><br>
  If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information.  But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
<br><br>
  The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed.  Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
<br><br>
  Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
<br><br>
  7. Additional Terms.
<br><br>
  "Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law.  If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
<br><br>
  When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it.  (Additional permissions may be written to require their own
removal in certain cases when you modify the work.)  You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
<br><br>
  Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
<br><br>
    a) Disclaiming warranty or limiting liability differently from the
    terms of sections 15 and 16 of this License; or
<br><br>
    b) Requiring preservation of specified reasonable legal notices or
    author attributions in that material or in the Appropriate Legal
    Notices displayed by works containing it; or
<br><br>
    c) Prohibiting misrepresentation of the origin of that material, or
    requiring that modified versions of such material be marked in
    reasonable ways as different from the original version; or
<br><br>
    d) Limiting the use for publicity purposes of names of licensors or
    authors of the material; or
<br><br>
    e) Declining to grant rights under trademark law for use of some
    trade names, trademarks, or service marks; or
<br><br>
    f) Requiring indemnification of licensors and authors of that
    material by anyone who conveys the material (or modified versions of
    it) with contractual assumptions of liability to the recipient, for
    any liability that these contractual assumptions directly impose on
    those licensors and authors.
<br><br>
  All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10.  If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term.  If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
<br><br>
  If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
<br><br>
  Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
<br><br>
  8. Termination.
<br><br>
  You may not propagate or modify a covered work except as expressly
provided under this License.  Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
<br><br>
  However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
<br><br>
  Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
<br><br>
  Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License.  If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
<br><br>
  9. Acceptance Not Required for Having Copies.
<br><br>
  You are not required to accept this License in order to receive or
run a copy of the Program.  Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance.  However,
nothing other than this License grants you permission to propagate or
modify any covered work.  These actions infringe copyright if you do
not accept this License.  Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
<br><br>
  10. Automatic Licensing of Downstream Recipients.
<br><br>
  Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License.  You are not responsible
for enforcing compliance by third parties with this License.
<br><br>
  An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations.  If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
<br><br>
  You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License.  For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
<br><br>
  11. Patents.
<br><br>
  A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based.  The
work thus licensed is called the contributor's "contributor version".
<br><br>
  A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version.  For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
<br><br>
  Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
<br><br>
  In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement).  To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
<br><br>
  If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients.  "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
<br><br>
  If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
<br><br>
  A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License.  You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
<br><br>
  Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
<br><br>
  12. No Surrender of Others' Freedom.
<br><br>
  If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License.  If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all.  For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
<br><br>
  13. Remote Network Interaction; Use with the GNU General Public License.
<br><br>
  Notwithstanding any other provision of this License, if you modify the
Program, your modified version must prominently offer all users
interacting with it remotely through a computer network (if your version
supports such interaction) an opportunity to receive the Corresponding
Source of your version by providing access to the Corresponding Source
from a network server at no charge, through some standard or customary
means of facilitating copying of software.  This Corresponding Source
shall include the Corresponding Source for any work covered by version 3
of the GNU General Public License that is incorporated pursuant to the
following paragraph.
<br><br>
  Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU General Public License into a single
combined work, and to convey the resulting work.  The terms of this
License will continue to apply to the part which is the covered work,
but the work with which it is combined will remain governed by version
3 of the GNU General Public License.
<br><br>
  14. Revised Versions of this License.
<br><br>
  The Free Software Foundation may publish revised and/or new versions of
the GNU Affero General Public License from time to time.  Such new versions
will be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
<br><br>
  Each version is given a distinguishing version number.  If the
Program specifies that a certain numbered version of the GNU Affero General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation.  If the Program does not specify a version number of the
GNU Affero General Public License, you may choose any version ever published
by the Free Software Foundation.
<br><br>
  If the Program specifies that a proxy can decide which future
versions of the GNU Affero General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
<br><br>
  Later license versions may give you additional or different
permissions.  However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
<br><br>
  15. Disclaimer of Warranty.
<br><br>
  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
<br><br>
  16. Limitation of Liability.
<br><br>
  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
<br><br>
  17. Interpretation of Sections 15 and 16.
<br><br>
  If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
<br><br>
                     END OF TERMS AND CONDITIONS
<br><br>
            How to Apply These Terms to Your New Programs
<br><br>
  If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
<br><br>
  To do so, attach the following notices to the program.  It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<br><br>
    <one line to give the program's name and a brief idea of what it does.>
    Copyright (C) <year>  <name of author>
<br><br>
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
<br><br>
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.
<br><br>
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
<br><br>
Also add information on how to contact you by electronic and paper mail.
<br><br>
  If your software can interact with users remotely through a computer
network, you should also make sure that it provides a way for users to
get its source.  For example, if your program is a web application, its
interface could display a "Source" link that leads users to an archive
of the code.  There are many ways you could offer source, and different
solutions will be better for different programs; see section 13 for the
specific requirements.
<br><br>
  You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU AGPL, see
<http://www.gnu.org/licenses/>.
<br>
<br><br>
                           Classpath/Linking Exception
<br><br>
Linking this library statically or dynamically with other modules is making a 
combined work based on this library. Thus, the terms and conditions of the GNU 
Affero General Public License cover the whole combination.
<br><br>
As a special exception, the copyright holders of this library give you 
permission to link this library with independent modules to produce an 
executable, regardless of the license terms of these independent modules, 
and to copy and distribute the resulting executable under terms of your choice,
provided that you also meet, for each linked independent module, the terms 
and conditions of the license of that module. An independent module is a 
module which is not derived from or based on this library. If you modify 
this library, you may extend this exception to your version of the library, 
but you are not obligated to do so. If you do not wish to do so, delete this 
exception statement from your version.
]]]
</div>

<nobr><input type=checkbox id=introText_chk oninput="Dob('introText').style.display=(this.checked?'inline':'none');"><label for=introText_chk>display intro text including WARNING about "#wikibinator merges fiction and nonfiction in a very strange way"</label></nobr><br>
<div id=introText style="display:none"><br>
This is not the license... TODO rewrite this smaller and simpler...
<br><br>
In the evilbit=true namespace, which this prototype will use (TODO get those bits in the first byte of 32 byte ids working)...
<br><br>
#wikibinator merges fiction and nonfiction in a very strange way. Its a multiverse of all possible worlds, which is fiction, except 1 of those fictional worlds matches, to arbitrarily high precision, the nonfiction world we live in, and ppl might take it out of that context so I'm writing this. If they do take it out of context, thats their fault, and that does not give them the right to demand the false statements be removed, since this is a fictional system with truth existing in some parts, if you view it as words instead of math. As math it only computes true statements, unless its buggy. All true and false statements are supposed to be there in some fictional world. If a statement is true of the real world, then its a news service and world sim. If it doesnt match, then its fiction. Thought-police dont get to force remove the fictional parts of multiverse or any parts. The license says all possible lambdas are allowed in the evilbit=true namespace. Its all made of lambdas. You will see the partly fictional partly nonfictional multiverse when html canvas is working better in this software.
<br><br>
This system is a space of all possible patterns of info, so it has many true and many false statements. All possible combos of words are true, in that they exist in the "exponentially many monkeys will eventually type out shakespeare" way, and that they occur in the space of all possible lambdas of this kind, and that combos of randomness and goal directed thought will form sentences that dont look random and other things. You may not throw a wrench into this machine by forcing others to cut out certain lambdas you dislike. False statements are not removed just cuz they're false as words. All halted lambdas are true in this system, even if they say "two plus two equals five" since it is true thats the bytes of the utf8 text. Therefore if you believe something just cuz its written in words in the lambdas, thats your fault for taking it out of context. There will be ways of clustering many true statements together, but this is research and this system has limited access to the physical world to know whats true and false about it. If you dont agree to see both true and false statements, then dont let the door hit you on your way out. This paragraph is supported by the license includes "* Free speech absolutism in the evilbit=true namespace in which all possible lambdas are allowed, even viruses etc.". All possible lambdas, including those that contain sentences you may view as false when applied to the physical world. This is more of a fictional world, of all possible worlds, that some parts of will align to the real world (some parts very strongly so, as it can have specialized parts) and many wont.
<br><br>
I said "Rewrite his to be much shorter:" then that then ChatGPT said...
<br><br>
Fictional/nonfictional multiverse exploration.
<br><br>
June 17, 2023
<br><br>
In the evilbit=true namespace, this system merges fiction and nonfiction. It's a multiverse of all possible worlds. Some parts align with the real world, but others are purely fiction. The license allows all possible lambdas in this namespace, including false statements. True and false statements coexist here. The system has limited access to determine what's true or false in the physical world. If you can't accept both true and false statements, this may not be for you. It's a fictional world with some alignment to reality.
<br><br>
---
<br><br>
TODO replace "but others are purely fiction" with "but others are purely fiction or gradually between fiction vs nonfiction".
<br><br>
---
<br><br>
Wikibinator is a <a href="https://en.wikipedia.org/wiki/Directed_acyclic_graph">DaG</a> of 96 byte blocks, 1 block per lambda, (parent id, left child id, right child id, each 32 bytes), or twice that big if using the optional high security ids (TODO).
The ids contain 192 bits (24 bytes) of sha256 so in theory you'd have to store 2^96=79228162514264337593543950336 lambdas before finding the first duplicate id, (or 384 if high security, todo which hash algorithm), unless it contains literal data instead.
</div>
	<nobr><input type=checkbox id=extraTests_chk oninput="Dob('extraTests').style.display=(this.checked?'inline':'none');"><label for=extraTests_chk>display test buttons that turn green if test passes or red if fails"</label></nobr><br>
	<div id=extraTests style="display:none"></div>
	<br><br>
	
	<div id=globalDobs>
		<div id=globalFromOverlay style="pointer-events:none;position:absolute;background-image:url('pic/fromBackground_transparent.png');background-size:12px;z-index:10000000"></div>
		<div id=globalToOverlay style="pointer-events:none;position:absolute;background-image:url('pic/toBackground_transparent.png');background-size:12px;z-index:10000001"></div>
		
		<div id=mouseOverSelect_top style="pointer-events:none;position:absolute;z-index:10000003;width:20px;height:3px;background-color:#fff"></div>
		<div id=mouseOverSelect_left style="pointer-events:none;position:absolute;z-index:10000003;width:3px;height:20px;background-color:#fff"></div>
		<div id=mouseOverSelect_right style="pointer-events:none;position:absolute;z-index:10000003;width:3px;height:20px;background-color:#ddd"></div>
		<div id=mouseOverSelect_bottom style
		="pointer-events:none;position:absolute;z-index:10000003;width:20px;height:3px;background-color:#ddd"></div>
		
		<div id=mouseOverSelect2_top style="pointer-events:none;position:absolute;z-index:10000003;width:20px;height:3px;background-color:#1d2"></div>
		<div id=mouseOverSelect2_left style="pointer-events:none;position:absolute;z-index:10000003;width:3px;height:20px;background-color:#1d2"></div>
		<div id=mouseOverSelect2_right style="pointer-events:none;position:absolute;z-index:10000003;width:3px;height:20px;background-color:#0c1"></div>
		<div id=mouseOverSelect2_bottom style
		="pointer-events:none;position:absolute;z-index:10000003;width:20px;height:3px;background-color:#0c1"></div>
		
		<div id=simpleDragUimode_cursor style="position:absolute;z-index:10000004;background-color:white;top:0px;left:0px;opacity:.85;pointer-events:none"></div>
		
		<div id=displayThisOnWhatWasLastDropped style="position:absolute;z-index:10000005;background-color:white;top:0px;left:0px;opacity:.85;width=20px;height:3px;pointer-events:none"></div>
		
		<img id="fromIcon" src="pic/from_transparent.png" style="position:absolute;z-index:10000006;pointer-events:none"></div>
		
		<img id="toIcon" src="pic/to_transparent.png" style="position:absolute;z-index:10000007;pointer-events:none"></div>
		
		<div id=dragLineDob style="position:absolute;z-index:10000008;background-color:#0ff;top:0px;left:0px;width:50px;height:50px;pointer-events:none"></div>
		
		<div id=popupMenuDob style="position:absolute;z-index:10000009;background-color:gray;top:0px;left:0px"></div>
	</div>
	
	<center>
		<table border=3><tr><td width=30% valign=top>
			TODO the mutableWrapperLambda system... (this doesnt work yet)...<br><br>
			<nobr><b>Password creates publickey:</b><input id=passwordInput type=password cols=40 placeholder="password creates publicKey"></input></nobr>
			<div id=publickeyDob>TODO a specific YourPublicKey appears here<div>
			<div id=lambdamailDob>
				<div style="background-color:#4b0">✕ (YourPublicKey [hello YourPublicKey]) -> <nobr>???drag and drop to here???</nobr></div>
				<div style="background-color:#4bf">✕ (YourPublicKey [some game quicksave is... [the thing...]]) -> <nobr>???drag and drop to here???</nobr></div>
			</div>
			<br>
			About the above^... You can use wikibinator anonymously with no user account/publickey at all, or with a publickey, and you can hook that to an identity in external systems if you want, or not.
			This is for incoming messages. When anyone in the peer to peer network (TODO) calls (YourPublicKey IncomingMessage),
			its checked against your local filter (any Lambda you choose, TODO) and if it passes, it appears here,
			and you can drag a lambda as the response to it or click X on it to not respond.
			So YourPublicKey acts like a lambda when others call it, including that multiple calls for the same param
			are cached potentially forever and shouldnt repeat here (but may if not deduped yet?, TODO).
			(YourPublicKey IncomingMessage) -> OutgoingResponse.
			To get a publickey, type any password here, which gets hashed to make an ed25519 publickey, that will appear below (TODO).
			The lambdas can do any algorithm, so doesnt have to be ed25519 but thats what the prototype will start with.
			This password is not (TODO verify security) copied outside this browser window, unless your browser or its plugins or OS etc is spying on it.
			Only digital signatures of it are normally shared.
			All lambdas (including passwords, digital signatures, words, game quicksaves, etc) ever shared to other computers may be seen by anyone in the world. As a "wiki"-like system its a shared space, so dont share your password or things you dont want everyone to see. No take backs. Its like IPFS in that once it goes up its not coming down until computers and people stop downloading it for some time. (TODO peer to peer network)
		</td><td valign=top>
			<div id=controlsAboveRootDob>
				QuickSave and QuickLoad use cookies. In future versions, it will have the option to save/download generated file and drag files in, and to drag just parts into and out of those files or cookies and to share and stream online.<br>
				
				<input type=button onclick="rootSplat.putThisStringInAllEmptyDobsDeep('.');" value="show all dobs put . in them if empty":></input><br>
				<nobr><input type=button value="QuickSave 1" onclick="quickSave(1);"></input><input type=button value="QuickLoad 1" onclick="quickLoad(1);"></input></nobr>
				&nbsp;&nbsp;<nobr><input type=button value="QuickSave 2" onclick="quickSave(2);"></input><input type=button value="QuickLoad 2" onclick="quickLoad(2);"></input></nobr>
				&nbsp;&nbsp;<nobr><input type=button value="QuickSave 3" onclick="quickSave(3);"></input><input type=button value="QuickLoad 3" onclick="quickLoad(3);"></input></nobr>
				&nbsp;&nbsp;<nobr><input type=button value="QuickSave 4" onclick="quickSave(4);"></input><input type=button value="QuickLoad 4" onclick="quickLoad(4);"></input></nobr>
				&nbsp;&nbsp;<nobr><input type=button value="QuickSave 5" onclick="quickSave(5);"></input><input type=button value="QuickLoad 5" onclick="quickLoad(5);"></input></nobr>
				<br><br>
				<input type=button value="goToUrlOfCurrentFn()" onclick="goToUrlOfCurrentFn();"></input>
				<input type=button value="Reload page" onclick="location.reload();"></input>
				<input type=button value="Force update display" onclick="forceUpdateDisplay();"></input>
				<nobr>
					<input id=alwaysForceUpdateDisplayAfterDrop type=checkbox checked></input>
					<label for=alwaysForceUpdateDisplayAfterDrop>Always force update display after drag (FIXME shouldnt need this, and leaving this on makes it slower.</label>
				</nobr>
			</div><br>
			<div id=copyOfPopupMenuToPreChoose></div><br>
			<div id=vmStats></div><br>
			<div id=rootDob oncontextmenu="if(options.blockRightClickPopup) return false; else return true;"></div><br>
			<textarea id=mouseOverSplatToStringCode placeholder="mouseOverSplatToStringCode" rows=1 cols=50>s=>(s.splate().fn+'')</textarea><div id=mouseOverSplatToStringCode_out style="display:inline-block"></div><br>
			<div id=logOut></div><br>
			<textarea rows=5 cols=90 id=codeIn oninput="try{ let code = this.value; let fn = vm.eval(code); setRootFnAndForceUpdateDisplay(fn); Dob('codeErr').value = ''; transpileAndDisplayIf(fn,false,getTranspileTyTextfieldOrUndefined()); }catch(e){ Dob('codeErr').value = 'ERROR: '+e; throw e; }"></textarea>
			
			<div style="display:inline-block">
				<input type=button onclick="let fn = rootSplat.splate().fn; let code = fn+''; Dob('codeIn').value = code; //no event. setDobValue would do event, but dont want event cuz would compile again and update above." value="Get code"></input><br><br><br>
				<input type=button onclick="setDobValue(Dob('codeIn'),'');" value="X"></input>
			</div><br>
			<input type=button onclick="vm.eval(Dob('codeIn').value);" value="eval code without try/catch, so can see stacktrace on console"></input>
			<input type=button onclick="transpileAndDisplayIf(vm.eval(Dob('codeIn').value),true,getTranspileTyTextfieldOrUndefined());" value="transpile code without try/catch, so can see stacktrace on console"></input><br>
			
			<textarea rows=5 cols=90 readonly id=codeErr></textarea><br>

			<input type=text id=transpileTyTextfieldId oninput="Dob('codeIn').dispatchEvent(new Event('input'));"></input>
			<input type=button onclick="let d = Dob('transpileTyTextfieldId'); d.value = ''; d.dispatchEvent(new Event('input'));" value="X"></input>
			<input type=button onclick="let d = Dob('transpileTyTextfieldId'); d.value = this.value; d.dispatchEvent(new Event('input'));" value="num"></input>
			<input type=button onclick="let d = Dob('transpileTyTextfieldId'); d.value = this.value; d.dispatchEvent(new Event('input'));" value="key"></input>
			<input type=button onclick="let d = Dob('transpileTyTextfieldId'); d.value = this.value; d.dispatchEvent(new Event('input'));" value="ns"></input>
			<input type=button onclick="let d = Dob('transpileTyTextfieldId'); d.value = this.value; d.dispatchEvent(new Event('input'));" value="typedBlob"></input>
			<br>
			
			<nobr><input type=checkbox id=chk_codeTranspiledOut checked></input><label for=chk_codeTranspiledOut>transpile.</label></nobr> --
			Transpiled code out (to convert some lambdas to javascript for speed, but only works on some patterns of lambdas. Also todo gpujs and glsl and maybe python and java etc)...<br>
			<textarea rows=5 cols=90 readonly id=codeTranspiledOut></textarea>
		</td></tr></table>
	</center>

<nobr><input type=checkbox id=todosAndDisorganizedWritingDiv_chk oninput="Dob('todosAndDisorganizedWritingDiv').style.display=(this.checked?'inline':'none');"><label for=todosAndDisorganizedWritingDiv_chk>display old todos and disorganized writing below</label></nobr>
<div id=todosAndDisorganizedWritingDiv style="display:none">
<div>
(todo all as 1 js file, clean it up and isolate it): drag and drop tree UI for viewing and calling Wikibinator203 fns/lambdas...
<br><br>
wikib treeui fix the cant drop at same place to and from, by 2 dragsteps per splate. no, do in uistate 2 splats.
no, instead... xllrlr_xpos_ypos is coordinate. put 2 of those and some button stuff and highlight stuff in uistate, and onsolete those parts of splate.
<br><br>
Do all of these as vm.ops.Treemap etc, including wrappers of byte[].<br>
* small circle icon for FROM or wouldFroim.<br>
* small circle icon for TO or wouldTo.<br>
* dragLine.<br>
* outer border rect drag FROM.<br>
* inner border rect drag TO.<br>
* border of rect just BEFORE the last drop, if it still exists cuz calls might have replaced it, or maybe select ALL rects that have the same fn by localId128.<br>
* border of rect just dropped, if it still exists cuz calls might have replaced it, or maybe select ALL rects that have the same fn by localId128.<br>
* border of rect just AFTER the last drop, if it still exists cuz calls might have replaced it, or maybe select ALL rects that have the same fn by localId128.<br>
* treemap of gamepads, keyboard buttons, mouse position, etc, but only those parts whose value is nonzero at the time. Values are double.<br>
* treemap of sound channels in, in blocks of time or func of time to amplitude or something like that.<br>
* treemap of video in (webcams)<br>
* treemap of video out (canvases) as func that returns pixel bytes when called on something (or just the literal bytes?)<br>
* todo should the password and mutableWrapperLambda incoming stuff be part of this? Might need a private area (make sure not to share these parts accidentally as cache etc)? Incoming and outgoing messages are not private (cuz its WIKIbinator), but password is, so if u want privacy u have to derive an encryption lambda.<br>
* listweb-like treemap, for PrilistStacks (see those in the java version of listweb), but fns are the names.<br>
..<br>
**** Do I want a syntax andOr treeUI thing for treemaps? Maybe later, but im gonna get some or all of the aboive stuff working first. Treemap is already designed to be human readable, just not human editable directly. Its keys are in sorted order, and key/val always go together. But it doesnt yet display or maybe not even allow big blobs yet. ive been using them only up to how big an id can be but past that, it seems to have some bugs if I remember correctly.
<br><br>
XLLRLRL (to select which rect) and y and x fractions (where in it, or negative or above 1 for outside it but in its same coords), for each of FROM and TO and any other 2d points in tree coordinates. Borders dont need the x and y, or the x and y are always 0 or 1.
<br><br>
Hook in gamepads, mouse, and keyboard too. But is now a good time for that? Its part of input, and seems to fit well with this design, so YES. Also, byte arrays for microphone and webcam, and maybe also outputs for speakers and a separate canvas (not in the tree)? These could all go in either uiState or a new useAsImmutable datastruct of jsMaps. Just make {}s that have __bigHash var in them? {bigHash_: null, vars: {}, ...} or something like that? Or I could use a vm.ops.Treemap which can wrap byte arrays etc. Why not use that? Is it fast enuf? YES.
			</div>
			<h1>
				TODO [] is Infcur. -= is Rucfni (infcur spelled backward). Make lisp-like syntax like -car -cons a b== or maybe it should be .car .cons .a .b or maybe the .thing aka get var thing from Treemap (stateless) state (second param, first is linkedlist of params).<br>
				FIX THIS: make delete and COPY, both in right mouse button drag, work with &lt;...&gt; syntax, and test it with earlier syntaxes too.
			</h1>
	
	<hr><hr><hr>
	<font color=gray>DONE ENOUGH FOR NOW, but could be more efficient by not calling setSplit twice (do only once), the second call happening in updateDisplayToWrap at end of each dragAndDrop: in setSplit, which happens at end of a dragAndDrop, make it rebuild the visual tree if isOneLine and maybe other times,
	cuz its not considering the different width after the draw. Is the max width part of splate (in split), or is it some func param?
	It seems likely to be function param, and if so, maybe I should move it into splate or into split (probably into splate is better)?</font>
	<br><br>
	<font color=gray>DONE ENOUGH FOR NOW, its ok to call that many times since its updating many times per second, but i turned off some options (see options = {... map) to make it fast enuf (is still slow while browser debugger is open): figure out why setSplit is being called 3000 times per second just for mouse to move over it, and about 10-50 times per call of doBeforeDrag,
	as you can on browser console type test_rememberDobsIn_setSplit and look at the last n of them,
	with mouse over them in browser console, to see which rectangles on the page setSplit is called on.</font>
	<br><br>
	FIXME the pushEvaler optimization of vm.identityFunc() does not wrap its param: F(U)(2)==2 returns true, but should return a wrapper of 2, in case its called on another param and throws cuz 2 is not a fn.
	<br><br>
	FIXME isDisplayPushAndPopChars is true when drag 2.34 to {abc def} and click metaL. Then I selected the {2.34 abc def} in {{2.34 abc def} ghi} and did selSplat.transformSplate(splate=>splate.setIsDisplayPushAndPopChars(false)) then selected it and verified its splate has isDisplayPushAndPopChars false (which was true in prev splat). But while thats false, its still displaying 2 { and 2 } instead of 1 of each. So theres 2 problems: when drop it that way (with metaL (and maybe other ways of dropping?)) it doesnt set isDisplayPushAndPopChars to false, AND when that is false, it displays the inner { and } anyways.
	<br><br>
	<div style="background-color:blue">TODO...<br>
		TODO in the lambda dir theres some pseudocode for small parts of AugmentedBalls. Update it with the new syntax, including &lt;a b c&gt; meaning {,a b c} and Fo[x y z] meaning (Fo [x y z]) and anything of at most 3 chars (such as Fo += T _ etc) can use prefix syntax. Test it without optimizations, on a very small canvas. Then CPU optimize with vm.Mut objects and use a 512x512 or 1024x1024 canvas etc.
		<br><br>
		TODO also fix the tostringer in vm.Node.prototype.toString, cuz its not displaying all the code that goes in, things like "{ abc}" so theres a space between something displayed as 0 chars {? abc} and the abc. This will only be useful for small code. Bigger code will have to use the tree/rectangles UI cuz it can display sparsely.
		<br><br>
		SOLUTION: get rid of Mutlam. Only have λ and Stream/Treemap (aka State) loops/ifelse/etc, and add an opcode (V) to make it easy to copy all λ params to a State and to get a return value out of it. The λ will have U as its last param name to put a State in, but not all λ have to be like that.
		<br><br>
		V means to copy the vars from λ into State then get a certain return value out of it.
		<br><br>
		SumOfAParamAndAMutVar#(λ [x U] comment (V +[.x .y]))<br>
		FivePlusAMutVar#(SumOfAParamAndAMutVar 5)<br>
		_[<br>
			=[,mul ,1]<br>
			Fo[,y ,10 *=[,mul <SumOfAParamAndAMutVar ,5>]]<br>
			//10 times, multiplies mul by 5+y, for y from 0 to 9. Then returns x+y.<br>
			//<a b c> means {,a b c}.<br>
			//Fo takes var size [] and does _[] with all params at end.<br>
		]<br>
		<br><br>
		In tree/rectangle UI, anything thats 3 chars or shorter, put it as a prefix, such as T _ Fo If Ife Whi += * *= etc,
		if it would be (a b).
		<br><br>
		For all the math ops of 2 params that are opcodes, such as * + /, make them also have a +[,5 .b {...} .xyz] form that takes 1 more param, a Treemap/EmptyTreemap, AND if the first param is not a [] then just add them normally.
		<br><br>
		Any cbt64 thats a normed IEEE754 double, display it as such a double, else display it as 0x...., so dont need TypevalC prefix??? Might make it easier to optimize + * += etc???
		<br><br>
		What does V do in "SumOfAParamAndAMutVar#(λ [x U] comment (V +[.x .y]))"?
		Does it convert it all to Treemap? Or should there be another kind of State like (LambdaAndMapState allLambdaParamsExceptLast lastLambdaParam Treemap GetVar) -> val of the GetVar key in allLambdaParamsExceptLast or lastLambdaParam or Treemap? If the latter, then TreemapPut etc will have to be modified to work with LambdaAndMapState or Treemap directly.
		<br><br>
		Get the float64 math well defined. Any ops that cant be done deterministicly in CPU at least, they'll have to run slower in deterministic mode (can be done higher on stack and nondeterministic lower on stack, anywhere on stack chosen to tighten constraints, see vm.mask_*). Every math op, such as Sine, Plus, Exp, Imul, etc, must have exact bits defined in terms of math on int32s. see those opcodes that when asked about other opcodes derives them using int16s etc. That would take a param of cbt128 and return cbt64. Its expected that float32 ops in GLSL (gpu optimized in browser using GPU.js) and float32 and float64 in opencl may be nondeterministic in some computers so those optimizations would only be available in nondeterministic roundoff mode. But its also expected that int math of various sizes, such as int8 int16 int32 int64 etc can be done exactly everywhere, and since GLSL only has 24 bits of ints available for adding masking etc, and doesnt intmul the same as ints cuz of variable exponent, might have to use only up to int12 for multiplying there, and derive more from that, or maybe uint8 or something. Various derived code will be done. So using that, at a cost of extra flops (but not extra IO, which is the usual bottleneck), GPU in browser should be able to compute Sine Exp etc deterministicly faster than CPU (if very parallel calculation) or much much faster than CPU if allow nondeterministic roundoff.
	</div>
	<hr><hr><hr>
	
	
	<br><font color=gray>
	DONE/FIXED: [[[]]] etc is only showing 1 []. options.displayVarargLists is probably buggy.<br>
	DONE ENOUGH: make estimateWidth more accurate by checking for isFoldL isFoldT etc, since those cause not all childs to be displayed or not displayed the normal way.<br>
	DONE, it was conflict between flex layout and rowspan andOr colspan: dobs.suffixb is displaying too low. rowspan and colspan used in same table might be confusing it??<br>
	DONE enough, but still some vertical padding to get rid of: do_forkTryMaxWidth_experimentOnWindowLoad make some be isOneLine and some not depending on estimateWidth(true) recursively, to make good use of screen space.<br>
	DONE: forkTryMaxWidth, add estimateWidth and estimateHeight funcs to Split.prototype (added those already but theres throw todo in it), for use with isOneLine, so it doesnt get too long, and use it recursively.<br>
	CANCELLED cuz dont need to reparent dobs when using flex layout: addDolayoutFuncToWikibTreeUINodesAndSeparateLayoutDobsFromSelfDobsWhichGetReparentedInLayoutNodesAndOnlyCreateLayoutNodesIfNotAlreadyExist<br>
	DONE: eachFirstLineCanHaveMultiThingsInIt, an isOneLine syntax/layout for the first n params in a {} [] () but after that each thing is on its own line,
	cuz it has to be that way to be 2 child rectangles in each rectangle, (but later can do it without "2 child rectangles in each rectangle" and vararg number of childs per rectangle).
	This will need to at least estimate the horizontal size of the first n things, to choose n to display that way to not be wider than the window, considering how far its already tabbed over.<br>
	</font>
	<br><br>
	TODO findFastestWayToSelectASplat
	<br><br>
	TODO [[[Could potentially swarm 1000 players onto 1 shared screen, seen remotely (very compressed, just sharing their gamepad movements among eachother for speed, mostly)
Tip
wikibinator
@wikibinator
·
2m
thats 1000 players per swarm. unlimited number of swarms at once]]]<br>
	<br>
	TODO redesignWikibDroppingToDoFewSimpleThingsRecursivelyCuzCantBeLocalToTheNodeItsDroppedIn<br>
	<code>
		<br>TODO write out examples of the transforms that could happen, including ambiguously having multiple things it could -> return...
		<br>
		<br>dl means drop left. rl means drop right.
		<br>
		<br>dl (a b c) -> (dl (a b c))   //DUP
		<br>dl (a b c) -> (dl a b c)      //DUP
		<br>
		<br>dl (T a) -> just do this the same way as "dl (a b c)" etc.
		<br>
		<br>(T a) dr -> (T a dr)
		<br>
		<br>(a b c) dr -> (a b c dr)
		<br>
		<br>dl (S a b) -> (dl (S a b))      //DUP
		<br>dl (S a b) -> (S (S dl a) b)  //DUP
		<br>
		<br>dl (S (S a b) c) -> (dl (S (S a b) c))      //DUP
		<br>dl (S (S a b) c) -> (S (S (S dl a) b) c)   //DUP
		<br>
		<br>(S (S a b) c) dr -> (S (S a b) c dr)         //DUP
		<br>(S (S a b) c) dr -> (S (S (S a b) c) dr)   //DUP
		<br>
		<br>dl (Infcur a b c) -> (dl (Infcur a b c))    //DUP
		<br>dl (Infcur a b c) -> (Infcur dl a b c)       //DUP
		<br>
		<br>(Infcur a b c) dr -> (Infcur a b c dr)
	</code>
	<br><br>
	<b>TODO at end of drag, pop up a circle of allowed actions, including metaL metaR directL directR copyHere deleteHere cancel. No extra clicks, just move mouse that direction and the drag finishes. It will go into actionChooserAtEndOfDrag mode. Add that to overlays. Similar to the circular menu in insanelyTwistedShadowPlanet.</b>
	<br><br>
	<b>TODO allow it to drag from and to same splat/rect, by moving the looseY and looseX (and having 2 of each, FROM and TO) to some globalVars {} and the "overlays", and moving that out of splate.</b>
	<br><br>
	DONE, solution is options.screenYXToSplatfyfx_topIsSelfAndIfRightThenBottomIsParent, and end of drag doesnt do actions yet. UPDATE: the right side being self and left side being parent, seems to work but there should be a minimum width of rectangle, and I'm undecided if should use 4 corners for metaL metaR directL directR vs if should pop up a menu of actions to do right after the drag. TODO either do just parentOfSelfRect as left half and selfRect as right half (similar to options.fractionRecurse), OR do more angles/possibleActions in selfRect (cuz maybe only need 1 metaL and 1 metaR among both of those?, while still needing parentDirectL and directL and parentDirectR and directR, so it might just be 6 actions needed or something like that), OR use right mouse button or mousewheel etc to choose self vs parent. The meta* actions only need to know where to insert, so in {a b c} theres 4 possible places {|a b c} {a|b c} {a b|c} {a b c|}, and similar of its [a b c]. Theres more direct* actions.
	<br><br>
	DONE, its in options.fractionRecurse (set it to 1 to not use it), BUT it feels hard to use. Make the 1/2 1/4 1/8... (but maybe with .4 or 1/3 recursively instead of 1/2) way to refer to self rect or parent of self or parent of parent of self..., and within that an angle (such as snap to 1 of 4 corners for 4 possible actions: directL directR metaL/{}/[] metaR/{}/[]). Make the dragLine that mouse creats when dragging do this on both ends, and have splat.dobs.hardIcon be snapped to those 4 corners or center depending if its those 4 things vs center being drag FROM.<br>
	TODO get setDragStuff working.<br>
	TODO display (dropleft) (dropmid) and (dropright) in every node and find some way to make it unambiguous which (y,x) on screen would drop into which of those (3 of them in every node). Then use a copy of selSplat, that has some parts closed so its small enuf to see while dragging, to put in Action of where dragging near, and do the drop when release button, but show if its going to cause an eval vs waiting on more params.<br>
	TODO add a dragdrop field to Split thats a dragged split, and it chooses 1 of 3 drag places.<br>
	TODO hook in gamepad mouse keyboard etc, in a certain mode, to do this https://twitter.com/wikibinator/status/1575486566587170818 but very basic lambdas to get started, just update a sum of whatever numbers come in to verify it sees and is forkEdited by the params.<br>
	TODO keyboard left right down buttons navigate split tree, and show which is selected.<br>
	TODO Whichever split/splat is selected, have a few fast ways to insert, remove, etc from it, as code editor, but only allow changes that leave splat.fn.n.curriesLeft() (is that the right func?) being at least 1 aka CAN ONLY EDIT THE CODE IN WAYS THAT DONT CAUSE IT TO EVAL YET. Cuz there will be a separate way in UI to eval things so you dont do it by accident.<br>
	TODO given that the code editor (by selection in the tree) wont let you cause eval, make a separate way of using UI to do evals, maybe similar to iotavm/iotadesktop (an experiment on my github) where you grab a lambda with mouse, drag it to another lambda, which calls it and you are then dragging (holding with mouse) what that lambda call returned and can keep dragging.<br>
	TODO open/close branch<br>
	TODO <> for canvas literals etc.<br>
	TODO canvas or img src= changing the image each time (canvas literals in code)<br>
	TODO webAudioAPI<br>
	TODO gamepads<br>
	TODO drag and drop to call lambda on lambda to find/create lambdas, including between multiple widgets and across different webpages using the 256 bit ids to copy all reachable lambdas not copied so far<br>
	TODO checkboxes to change displayVarargS etc so users can see what is being hidden to make it more intuitive, even though whats hidden can be derived from contents of the prefix and suffix dobs, other than isLiteral displaying as canvas or webAudioAPI etc cuz that could be hard to see exact pixel brightness etc, or splate.isOpen being false.<br>
	<br>
	TODO the "some kind of simple game" mentioned in other TODO, start with just canvas/pic literals, not moving, made by drag and drop lambda onto lambda to find/create lambda that is or contains such graphics. When it starts to look like a screenshot of a game, then mark this as done and move on to the other TODO which is to make it move and playable by gamepad etc.<br>
	<br>
	TODO some kind of simple game, pacman-like or tetris-like etc, make that game by using the tree UI then play it with gamepad. Record a video of the whole thing and put up website where ppl can do that same thing or variants of it, with lambdas in general, but website wont store what they make yet as the p2p network isnt built yet.<br>
	<br>
	In theory, #wikibinator will be the first system to allow fork-editing of multiplayer games while they're being played, like if half the players kick out the other half, 
 would seamlessly fork into 2 games. AIs could be made to automatically fork and merge as way of negotiating -- https://twitter.com/wikibinator/status/1575500016558690308<br>
	<br>
	DO THIS LATER, GET eachFirstLineCanHaveMultiThingsInIt working first: TODO use flex laying or inline or something (see css) to do word-wrap but for rectangles<br>
	<br>

</div>
	
<br><br><br>

</body></html>