From 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 Mon Sep 17 00:00:00 2001
From: Richard <q@1bpm.net>
Date: Sun, 13 Apr 2025 18:48:02 +0100
Subject: initial

---
 site/app/twist/twist_ui.js | 674 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 674 insertions(+)
 create mode 100644 site/app/twist/twist_ui.js

(limited to 'site/app/twist/twist_ui.js')

diff --git a/site/app/twist/twist_ui.js b/site/app/twist/twist_ui.js
new file mode 100644
index 0000000..08e5fe1
--- /dev/null
+++ b/site/app/twist/twist_ui.js
@@ -0,0 +1,674 @@
+var twistTopMenuData = [
+	{name: "File", contents: [
+		{name: "New", disableOnPlay: true, shortcut: {name: "Ctrl N", ctrlKey: true, key: "n"}, click: function(twist) {
+			twist.createNewInstance();
+		}, condition: function(twist) {
+			return (!twist.twine);
+		}},
+		{name: "Save", disableOnPlay: true, shortcut: {name: "Ctrl S", ctrlKey: true, key: "s"}, click: function(twist) {
+				twist.saveFile();
+		}},
+		{name: "Close", disableOnPlay: true, shortcut: {name: "Ctrl W", ctrlKey: true, key: "w"}, click: function(twist) {
+			twist.closeInstance();
+		}, condition: function(twist) {
+			return (!twist.twine && twist.waveforms.length != 1);
+		}},
+		{name: "Edit in twigs", click: function(twist) {
+			twist.editInTwigs();
+		}, condition: function(twist) {
+			return window.hasOwnProperty("Twigs");
+		}}
+	]},
+	{name: "Edit", contents: [
+		{name: "Undo", disableOnPlay: true, shortcut: {name: "Ctrl Z", ctrlKey: true, key: "z"}, click: function(twist) {
+			twist.undo();
+		}, condition: function(twist) {
+			return (twist.storage.maxundo > 0 && twist.undoLevel > 0);
+		}},
+		{preset: "divider"},
+		{name: "Copy", disableOnPlay: true, shortcut: {name: "Ctrl C", ctrlKey: true, key: "c"}, click: function(twist) {
+			twist.copy();
+		}},
+		{name: "Cut", disableOnPlay: true, shortcut: {name: "Ctrl X", ctrlKey: true, key: "x"}, click: function(twist) {
+			twist.cut();
+		}},
+		{name: "Paste", disableOnPlay: true, shortcut: {name: "Ctrl V", ctrlKey: true, key: "v"}, click: function(twist) {
+			twist.paste();
+		}, condition: function(twist) {
+			return twist.hasClipboard;
+		}},
+		{name: "Paste special", disableOnPlay: true, shortcut: {name: "Ctrl shift V", ctrlKey: true, shiftKey: true, key: "v"}, click: function() {
+			twist.pasteSpecial();
+		}, condition: function(twist) {
+			return twist.hasClipboard;
+		}},
+		{name: "Trim", disableOnPlay: true, shortcut: {name: "T", key: "t"}, click: function() {
+			twist.trim();
+		}},
+		{name: "Delete", disableOnPlay: true, shortcut: {name: "Del", key: "delete"}, keyCondition: function(twist) {
+			return !twist.ui.deleteSupressed;
+		}, click: function(twist) {
+			twist.delete();
+		}},
+		{preset: "divider"},
+		{name: "Select all", shortcut: {name: "Ctrl A", ctrlKey: true, key: "a"}, click: function(twist) {
+			twist.selectAll();
+		}},
+		{name: "Select to end", shortcut: {name: "W", key: "w"}, click: function(twist) {
+			twist.selectToEnd();
+		}},
+		{name: "Select from start", shortcut: {name: "Q", key: "q"}, click: function(twist) {
+			twist.selectFromStart();
+		}},
+		{name: "Select none", shortcut: {name: "Ctrl M", ctrlKey: true, key: "m"}, click: function(twist) {
+			twist.selectNone();
+		}},
+		{name: "Move to next transient", shortcut: {name: "[",key: "["}, click: function(twist) {
+			twist.moveToNextTransient();
+		}},
+		{name: "Select to next transient", shortcut: {name: "]",key: "]"}, click: function(twist) {
+			twist.selectToNextTransient();
+		}}
+	]},
+	{name: "View", contents: [
+		{name: "Zoom selection", shortcut: {name: "Z", key: "z"}, click: function(twist) {
+			twist.waveform.zoomSelection();
+		}},
+		{name: "Zoom in", shortcut: {name: "+", key: "+"}, click: function(twist) {
+			twist.waveform.zoomIn();
+		}},
+		{name: "Zoom out", shortcut: {name: "-", key: "-"}, click: function(twist) {
+			twist.waveform.zoomOut();
+		}},
+		{name: "Show all", shortcut: {name: "0", key: "0"}, click: function(twist) {
+			twist.waveform.setRegion(0, 1);
+		}},
+		{preset: "divider"},
+		{name: "Toggle analysis", click: function(twist){
+			twist.ui.toggleScope();
+		}},
+		{name: "Toggle layout", shortcut: {name: "L", key: "l"}, click: function(twist){
+			twist.ui.toggleLayout();
+		}},
+	]},
+	{name: "Action", contents: [
+		{name: "Play/stop", shortcut: {name: "Space", key: " "}, click: function(twist) {
+			if (twist.isPlaying()) {
+				twist.stop();
+			} else {
+				twist.play();
+			}
+		}},
+		{name: "Audition", disableOnPlay: true, shortcut: {name: "Enter", key: "enter"}, click: function(twist) {
+			twist.audition();
+		}},
+		{name: "Commit", disableOnPlay: true, shortcut: {name: "Alt enter", altKey: true, key: "enter"}, click: function(twist) {
+			twist.commit();
+		}},
+		{name: "Record", disableOnPlay: true, shortcut: {name: "R", key: "r"}, click: function(twist) {
+			twist.record();
+		}},
+		{preset: "divider"},
+		{name: "Scripting", shortcut: {name: "Ctrl K", ctrlKey: true, key: "k"}, click: function(twist) {
+			twist.ui.scriptEdit(); 
+		}},
+		{name: "Developer", shortcut: {name: "Ctrl L", ctrlKey: true, key: "l"}, click: function(twist) {
+			twist.ui.developerConsole();
+		}},
+	
+	]},
+	{name: "Transform", contents: [
+		{name: "Randomise", shortcut: {name: "Z", key: "z"}, click: function(twist) {
+			twist.currentTransform.randomise();
+		}, condition: function(twist) {
+			return (twist.currentTransform) ? true : false;
+		}},
+			{name: "Reset", shortcut: {name: "R", key: "r"}, click: function(twist) {
+			twist.currentTransform.reset();
+		}, condition: function(twist) {
+			return (twist.currentTransform) ? true : false;
+		}},
+		{name: "Hide automation", shortcut: {name: "H", key: "h"}, click: function(twist) {
+			twist.currentTransform.hideAllAutomation();
+		}, condition: function(twist) {
+			return (twist.currentTransform) ? true : false;
+		}}
+	]},
+	{name: "Options", contents: [
+		{name: "Settings", click: function(twist) {
+			twist.ui.showSettings();
+		}}
+	]},
+	{name: "Help", contents: [
+		{name: "Help", click: function(twist){
+			$("#twist_documentation")[0].click();
+		}},
+		{name: "Developer reference", click: function(twist){
+			$("#twist_developer_documentation")[0].click();
+		}},
+		{name: "Report bug", click: function(twist){
+			$("#twist_reportbug")[0].click();
+		}},
+		{name: "Contact owner", click: function(twist){
+			$("#twist_contact")[0].click();
+		}},
+		{name: "Submit transform code", click: function(twist){
+			$("#twist_developer_submit")[0].click();
+		}},
+		{name: "About", click: function(twist) {
+			twist.ui.showAbout();
+		}},
+	]},
+];
+
+
+var TwistUI = function(twist) {
+	var self = this;
+	var scope;
+	var elCrossfades = [];
+	var topMenu = new twirl.TopMenu(twist, twistTopMenuData, $("#twist_menubar"));
+	this.deleteSupressed = false;
+	
+	this.setPlaying = function(state) {
+		if (scope) {
+			scope.setPlaying(state);
+		}
+		if (state) {
+			$(".twist_scriptbutton").hide();
+			$("#twist_scriptstop").show();
+		} else {
+			$(".twist_scriptbutton").show();
+			$("#twist_scriptstop").hide();
+		}
+	};
+	
+	this.getCrossFadeValues = function() {
+		return [elCrossfades[0].val(), elCrossfades[1].val()];
+	};
+	
+	
+	var contractedWaveform = false;
+	function setLayout() {
+		var elViews = $("#twist_views");
+		var elWave = $("#twist_waveforms");
+		var elSpline = $("#twist_splines");
+		var elScope = $("#twist_analyser");
+		var elControls = $("#twist_controls");
+				
+		if (contractedWaveform) {
+			elViews.css({height: "20%"});
+			elControls.css({top: "20%"});		
+		} else {
+			elViews.css({height: "50%"});
+			elControls.css({top: "50%"});
+		}
+		
+		if (scope) {
+			elScope.css({height: "40%", top: "0px"});
+			elWave.css({top: "40%"});
+			elSpline.css({top: elWave.css("top")});
+		} else {
+			elWave.css({top: "0px"});
+			elSpline.css({top: "0px"});
+		}
+		
+		twist.redraw();
+	}
+	
+	this.toggleLayout = function() {
+		contractedWaveform = !contractedWaveform;
+		setLayout();
+	};
+	
+	this.toggleScope = function(noSaveState) {
+		var state;
+		if (!scope) {
+			state = true;
+			var elScope = $("<div />").addClass("twist_scope").appendTo($("#twist_analyser"));
+			var type = (twist.storage.scopeType) ? twist.storage.scopeType : 0;
+			scope = new Analyser(
+				type, twist, elScope, app
+			);
+			$("#twist_analyser").show();
+		} else {
+			$("#twist_analyser").hide();
+			state = false;
+			scope.remove();
+			delete scope;
+			scope = null;
+		}
+		
+		if (!noSaveState) {
+			twist.storage.showScope = state;
+			twist.saveStorage();
+		}
+		setLayout();
+	};
+	
+	
+	this.tooltip = twirl.tooltip;
+		
+	this.boot = function() {
+		if (twist.storage.hasOwnProperty("showShortcuts")) {
+			if (twist.storage.showShortcuts) {
+				$("#twist_wavecontrols_inner").show();
+			} else {
+				$("#twist_wavecontrols_inner").hide();
+			}
+		}
+		
+		if (twist.storage.develop) {
+			if (twist.storage.develop.csound) {
+				$("#twist_devcsound").val(twist.storage.develop.csound);
+			}
+			if (twist.storage.develop.json) {
+				$("#twist_devjson").val(twist.storage.develop.json);
+			}
+		}
+		$("#loading_background").css("opacity", 1).animate({opacity: 0.2}, 1000);
+	};
+	
+	this.postBoot = function() {
+		self.setLoadingStatus(false);
+		
+		if (!twist.storage.hasOwnProperty("firstLoadDone")) {
+			twist.storage.firstLoadDone = true;
+			twist.saveStorage();
+			self.showPrompt($("#twist_welcome").detach().show(), twist.createNewInstance);						
+		} else {
+			twist.createNewInstance();
+		}
+		
+		if (twist.storage.showScope) {
+			self.toggleScope(true);
+		}
+	};
+	
+	this.hidePrompt = function() {
+		twirl.prompt.hide();
+	};
+	
+	this.showPrompt = function(text, oncomplete, noButton) {
+		twirl.prompt.show(text, oncomplete, noButton);
+		if (twist.playheadInterval) {
+			twist.waveform.movePlayhead(0);
+			clearInterval(twist.playheadInterval);
+		}
+		if (self.waveform) {
+			self.waveform.cover(false);
+		}
+	};
+	
+	
+	this.showLoadNewPrompt = function() {
+		var elNewFile = $("<div />").css({"font-size": "var(--fontSizeDefault)"});
+		if (twist.hasClipboard) {
+			$("<button />").text("Create from clipboard").appendTo(elNewFile).click(function(){
+				twist.loadFileFromClipboard();
+				twirl.prompt.hide();
+			});
+		}
+		
+		elNewFile.append($("<h3 />").text("Drag an audio file here to load")).append($("<p />").text("or"));
+		
+		var elEmpty = $("<div />").appendTo(elNewFile);
+		$("<h4 />").text("Create an empty file").css("cursor", "pointer").appendTo(elEmpty);
+							
+		var tpDuration = new twirl.transform.Parameter({
+			definition: {name: "Duration", min: 0.1, max: 60, dfault: 10, automatable: false, fireChanges: false}, 
+			host: twist
+		});
+		
+		var tpChannels = new twirl.transform.Parameter({
+			definition: {name: "Channels", min: 1, max: 2, dfault: 2, step: 1, automatable: false, fireChanges: false}, 
+			host: twist
+		});
+		
+		var tpName = new twirl.transform.Parameter({
+			definition: {name: "Name", type: "string", dfault: "New file", fireChanges: false},
+			host: twist
+		});
+		
+		var tb = $("<tbody />");
+		$("<table />").append(tb).css("margin", "0 auto").appendTo(elEmpty);
+		tb.append(tpDuration.getElementRow(true)).append(tpChannels.getElementRow(true)).append(tpName.getElementRow(true));
+		
+		$("<button />").text("Create").appendTo(elEmpty).click(function() {
+			twist.createEmpty(tpName.getValue(), tpDuration.getValue(), tpChannels.getValue());
+		});
+				
+		
+		self.showPrompt(elNewFile, null, true);
+	}
+	
+
+	this.setTheme = function(name, nosave) {
+		twirl.setTheme(name, nosave);
+	};
+	
+	this.showSettings = function() {
+		var settings = [
+			{
+				name: "Commit history limit",
+				description: "Number of transform states to store (can be accessed via the script editor). 0 = infinite",
+				min: 0, max: 32, step: 1, dfault: 16, storageKey: "commitHistoryLevel"
+			},
+			{
+				name: "Undo levels",
+				description: "Number of undo levels stored. Large numbers may affect memory usage",
+				min: 0, max: 32, step: 1, dfault: 2, storageKey: "maxundo",
+				onChange: function(val) {
+					app.setControlChannel("twst_maxundo", val);
+				}
+			},
+			{
+				name: "Analysis type",
+				description: "Type of analysis to be shown",
+				options: ["Frequency", "Oscilloscope"],
+				dfault: 0,
+				storageKey: "scopeType",
+				onChange: function(val) {
+					if (scope) scope.setType(val);
+				}
+			},
+			{
+				name: "Show shortcuts",
+				description: "Show shortcuts toolbar below waveform",
+				bool: true,
+				storageKey: "showShortcuts",
+				dfault: 1,
+				onChange: function(val) {
+					if (val) {
+						$("#twist_wavecontrols_inner").show();
+					} else {
+						$("#twist_wavecontrols_inner").hide();
+					}
+				}
+			},
+			{
+				name: "DC block processing",
+				description: "Apply DC blocking to all processing",
+				bool: true,
+				storageKey: "dcblockoutputs",
+				dfault: 0,
+				onChange: function(val) {
+					app.setControlChannel("twst_dcblockoutputs", val);
+				}
+			},
+			{
+				name: "Tanh limit all processing",
+				description: "Apply tanh to all processing",
+				bool: true,
+				storageKey: "tanhoutputs",
+				dfault: 0,
+				onChange: function(val) {
+					app.setControlChannel("twst_tanhtanhoutputs", val);
+				}
+			},
+			{
+				name: "Autosave before each commit",
+				description: "Automatically save file locally before each new commit",
+				bool: true,
+				storageKey: "autosave",
+				dfault: 0
+			}
+		];
+		twirl.showSettings(twist, settings);
+	};
+	
+	
+	this.setPercent = function(percent) {
+		twist.watchdog.setActive(percent);
+		twirl.loading.setPercent(percent);
+	};
+	
+	this.setLoadingStatus = function(state, showpercent, text) {
+		if (state) {
+			twirl.loading.show(text, showpercent);
+		} else {
+			twirl.loading.hide();
+		}
+	};
+	
+	this.scriptEdit = function() {
+		var el = $("#twist_script").show();
+		var te = $("#twist_scriptsource");
+		
+		
+		function runScript(audition) {
+			try {
+				var script = JSON.parse(te.val());
+			} catch (e) {
+				twist.errorHandler("Cannot parse script: " + e);
+				return false;
+			}
+			twist.applyScript(script, audition);
+			return true;
+		};
+		
+		
+		$("#twist_scriptaudition").unbind().click(function(){
+			runScript(true);
+		});
+		
+		$("#twist_scriptstop").unbind().click(function(){
+			twist.stop();
+		});
+		
+		$("#twist_scriptcommit").unbind().click(function(){
+			if (runScript(false)) {
+				el.hide();
+			}
+		});
+		
+		$("#twist_scriptloadlast").unbind().click(function(){
+			te.val(JSON.stringify(twist.lastOperation(), null, 2));
+		});
+		
+		$("#twist_scriptloadall").unbind().click(function(){
+			te.val(JSON.stringify(twist.operationLog, null, 2));
+		});
+		
+		$("#twist_scriptcancel").unbind().click(function(){
+			el.hide();
+		});
+	};
+	
+	this.developerConsole = function() {
+		$("#twist_developer").show();
+		$("#twist_inject_devcsound").click(async function() {
+			var code = $("#twist_devcsound").val();
+			var result = await app.compileOrc(code);
+			if (result == 0) {
+				if (!twist.storage.develop) {
+					twist.storage.develop = {};
+				}
+				twist.storage.develop.csound = code;
+				twist.saveStorage();
+				self.showPrompt("Successfully injected Csound code");
+			}
+		});
+		$("#twist_inject_devjson").click(async function() {
+			var code = $("#twist_devjson").val();
+			try {
+				var json = JSON.parse(code);
+			} catch (e) {
+				return twist.errorHandler("Cannot parse JSON: " + e);
+			}
+			try {
+				twist.loadTransforms(json);
+			} catch (e) {
+				return twist.errorHandler("Cannot load transform: " + e);
+			}
+			if (!twist.storage.develop) {
+				twist.storage.develop = {};
+			}
+			twist.storage.develop.json = code;
+			twist.saveStorage();
+			self.showPrompt("Successfully injected transform definition");
+		});
+		$("#twist_exit_devcode").click(async function() {
+			$("#twist_developer").hide();
+		});
+	};
+	
+	function buildWavecontrols() {
+		var el = $("#twist_wavecontrols_inner");
+		var onPlayDisables = [];
+		
+		var play = twirl.createIcon({label: "Play", icon: "play", label2: "Stop", icon2: "stop", click: function(obj){
+			if (twist.isPlaying()) {
+				twist.stop();
+			} else {
+				twist.play();
+			}
+		}});
+		var audition = twirl.createIcon({label: "Audition", icon: "audition", label2: "Stop", icon2: "stop", click: function(obj){
+			if (twist.isPlaying()) {
+				twist.stop();
+			} else {
+				twist.audition();
+			}
+		}});
+
+		
+		var record = twirl.createIcon({label: "Record", icon: "record", label2: "Stop", icon2: "stop", click: function() {
+			if (twist.isPlaying()) {
+				twist.stop();
+			} else {
+				twist.record();
+			}
+		}});
+		
+		var items = [
+			{label: "Rewind", icon: "rewind", disableOnPlay: true, click: function() { twist.moveToStart() }},
+			play,
+			audition,
+			{label: "Commit", icon: "commit", disableOnPlay: true, click: function() { twist.commit() }},
+			record,
+			{preset: "spacer"},
+			{label: "Cut", icon: "cut", disableOnPlay: true, click: function() { twist.cut() }},
+			{label: "Copy", icon: "copy", disableOnPlay: true, click: function() { twist.copy() }},
+			{label: "Paste", icon: "paste", disableOnPlay: true, click: function() { twist.paste() }},
+			{label: "Paste special", icon: "pasteSpecial", disableOnPlay: true, click: function() { twist.pasteSpecial() }},
+			{label: "Trim", icon: "trim", disableOnPlay: true, click: function() { twist.trim() }},
+			{preset: "spacer"}
+		];
+							
+		for (let i of items) {
+			var icon;
+			var td = $("<td />");
+			if (i.preset && i.preset == "spacer") {
+				td.css("width", "20px");
+			} else {
+				if (i.icon) {
+					icon = twirl.createIcon(i);
+					if (i.disableOnPlay) {
+						onPlayDisables.push(icon);
+					}
+				} else {
+					icon = i;
+				}
+				td.append(icon.el);
+			}
+			td.appendTo(el);
+		}
+		
+		twist.onPlays.push(async function(playing, auditioning, recording) {
+			if (playing) {
+				if (auditioning) {
+					play.setActive(false);
+					audition.setState(false);
+					record.setActive(false);
+				} else if (recording) {
+					audition.setActive(false);
+					play.setActive(false);
+					record.setState(false);
+				} else {
+					audition.setActive(false);
+					play.setState(false);
+					record.setActive(false);
+				}
+			} else {
+				audition.setActive(true);
+				play.setActive(true);
+				play.setState(true);
+				audition.setState(true);
+				record.setActive(true);
+				record.setState(true);
+			}
+			for (let o of onPlayDisables) {
+				o.setActive(!playing);
+			}
+		});
+		
+		for (let e of ["In", "Out"]) {
+			let elRange = $("<input />").addClass("twirl_slider").attr("type", "range").attr("min", 0).attr("max", 0.45).attr("step", 0.00001).val(0).on("input", function() {
+				if (e == "In") {
+					twist.waveform.crossFadeInRatio = $(this).val();
+				} else {
+					twist.waveform.crossFadeOutRatio = $(this).val();
+				}
+			});
+			elCrossfades.push(elRange);
+			$("<td />").addClass("crossfade").append($("<div />").css("font-size", "var(--fontSizeSmall)").text("Crossfade " + e)).append(elRange).appendTo(el);
+		}
+				
+		$("<td />").css("font-size", "var(--fontSizeSmall").append("Loop playback<br />").append(
+			$("<input />").addClass("tp_checkbox").attr("type", "checkbox").change(function(){
+				twist.playbackLoop = $(this).is(":checked");
+			})
+		).appendTo(el);
+		
+	};
+	
+	function formatVersion(ver) {
+		ver = ver.toString();
+		var major = ver.substr(0, 1);
+		var remainder = ver.substr(1);
+		if (remainder.length == 2) {
+			return major + "." + remainder;
+		} else {
+			var mid = remainder.substr(1, 2);
+			var minor = remainder.substr(2);
+			return major + "." + mid + "." + minor;
+		}
+	}
+	
+	this.showAbout = async function() {
+		var csVer = await app.getCsound().getVersion();
+		var apiVer = await app.getCsound().getAPIVersion();
+		var el = $("<div />"); 
+		var x = $("<h3 />").text("twist").appendTo(el);
+		$("<p />").css("font-size", "12px").text("By Richard Knight 2024").appendTo(el);
+		$("<p />").text("Version " + twist.version.toFixed(1)).appendTo(el);
+		$("<p />").text("Csound " + formatVersion(csVer) + "; API " + formatVersion(apiVer)).appendTo(el);
+		
+		var skewMax = 30;
+		var skew = 0;
+		var skewDirection = true;
+		var twistInterval = setInterval(function(){
+			if (skewDirection) {
+				if (skew < skewMax) {
+					skew ++;
+				} else {
+					skewDirection = false;
+				}
+			} else {
+				if (skew > -skewMax) {
+					skew --;
+				} else {
+					skewDirection = true;
+				}
+			}
+			x.css("transform", "skewX(" + skew + "deg)");
+		}, 10);
+		
+		self.showPrompt(el, function(){
+			clearInterval(twistInterval);
+		});
+	};
+	
+	
+	buildWavecontrols();
+};
\ No newline at end of file
-- 
cgit v1.2.3