Update jspaint

To https://github.com/1j01/jspaint/tree/8a0f27172d29802fb97fd9e031c872166d8a89cc jspaint now uses os-gui, so the theme is applied from the desktop into jspaint! Note: setPointerCapture for iframe integration has been reverted in 1j01/jspaint@ecb7459 See issue: 1j01/jspaint#161
1j01 · Apr 1, 2020 · 9ca3d38 · 9ca3d38
1 parent bd990e9
commit 9ca3d38
Show file tree

Hide file tree

Showing 39 changed files with 2,114 additions and 474 deletions.
diff --git a/programs/jspaint/.eslintrc.js b/programs/jspaint/.eslintrc.js
@@ -89,7 +89,8 @@ module.exports = {
 		"$ToolBox": "writable",
 		"$ColorBox": "writable",
 		"$Window": "writable",
-		"$FormWindow": "writable",
+		"$ToolWindow": "writable",
+		"$FormToolWindow": "writable",
 		"$Handles": "writable",
 		"OnCanvasSelection": "writable",
 		"OnCanvasTextBox": "writable",

diff --git a/programs/jspaint/CNAME b/programs/jspaint/CNAME
@@ -0,0 +1 @@
+jspaint.app
diff --git a/programs/jspaint/TODO.md b/programs/jspaint/TODO.md
@@ -192,7 +192,7 @@ Functionality:
 
 * JS
 	* Organize things into files better; "functions.js" is like ONE step above saying "code.js"
-	* `$Window` has a `$Button` facility; `$FormWindow` overrides it with essentially a better one
+	* `$ToolWindow` has a `$Button` facility; `$FormToolWindow` overrides it with essentially a better one
 	* Make code clearer / improve code quality
 		* https://codeclimate.com/github/1j01/jspaint
 

diff --git a/programs/jspaint/help/coUA.css b/programs/jspaint/help/coUA.css
@@ -1,13 +1,20 @@
 /* Originally: Cascading Style Sheet for IE4.01 last updated 1-28-98 */
 
+/* for scrollbars and selection color */
+@import "../lib/os-gui/windows-98.css";
+
 body {
 	background: #FFFFFF;
+	/* background: var(--Info); */
+	/* color: var(--InfoText); */
+	color: var(--WindowText);
 	font-size: 70%;
 	font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
 }
 
 a:link {
 	color: #0000CC;
+	color: var(--HotTrackingColor);
 }
 
 a:active {

diff --git a/programs/jspaint/help/nobgcolor.css b/programs/jspaint/help/nobgcolor.css
@@ -1,5 +1,8 @@
 /* Originally: Cascading Style Sheet for IE4 build 1008+ */
 
+/* for scrollbars and selection color */
+@import "../lib/os-gui/windows-98.css";
+
 body {
 	font-size: 70%;
 	font-family: Verdana, Arial, Helvetica, "MS Sans Serif";

diff --git a/programs/jspaint/help/p_monochrome.png b/programs/jspaint/help/p_monochrome.png
diff --git a/programs/jspaint/help/p_monochrome_undo.png b/programs/jspaint/help/p_monochrome_undo.png
diff --git a/programs/jspaint/help/vaporwave.js b/programs/jspaint/help/vaporwave.js
@@ -13,11 +13,11 @@ const animate = () => {
 	rAF_ID = requestAnimationFrame(animate);
 
 	if(
-		canvas.width !== canvas.parentElement.offsetWidth || 
-		canvas.height !== canvas.parentElement.offsetHeight
+		canvas.width !== mask_img.width || 
+		canvas.height !== mask_img.height
 	){
-		canvas.width = canvas.parentElement.offsetWidth;
-		canvas.height = canvas.parentElement.offsetHeight;
+		canvas.width = mask_img.width;
+		canvas.height = mask_img.height;
 	}
 
 	const clouds_scale = 1;

diff --git a/programs/jspaint/index.html b/programs/jspaint/index.html
@@ -7,6 +7,10 @@
 		<link href="styles/normalize.css" rel="stylesheet" type="text/css">
 		<link href="styles/layout.css" rel="stylesheet" type="text/css">
 		<link href="styles/print.css" rel="stylesheet" type="text/css" media="print">
+		<link href="lib/os-gui/layout.css" rel="stylesheet" type="text/css">
+		<!-- <link href="lib/os-gui/windows-98.css" rel="stylesheet" type="text/css"> -->
+		<!-- <link href="lib/os-gui/windows-default.css" rel="stylesheet" type="text/css" title="Windows Default"> -->
+		<!-- <link href="lib/os-gui/peggys-pastels.css" rel="alternate stylesheet" type="text/css" title="Peggy's Pastels"> -->
 
 		<link rel="apple-touch-icon" href="images/icons/apple-icon-180x180.png">
 		<!-- Chrome will pick the largest image for some reason, instead of the most appropriate one. -->
@@ -118,7 +122,7 @@ <h2>Improved Mobile Support</h2>
 				<p>
 					I recently made it easier to grab handles for resizing things.
 					With that, combined with multitouch panning,
-					JS Paint is now pretty useable on a phone.
+					JS Paint is much more useable on a phone.
 				</p>
 				<p><b class="bad">Caveat:</b> It's slow on some devices, and parts of the interface are still too small for touch.</p>
 			</article>
@@ -246,12 +250,14 @@ <h1>Full Clipboard Support</h1>
 		<script src="lib/FileSaver.js"></script>
 		<script src="lib/font-detective.js"></script>
 		<script src="lib/libtess.min.js"></script>
+		<script src="lib/os-gui/parse-theme.js"></script>
+		<script src="lib/os-gui/$Window.js"></script>
+		<script src="lib/os-gui/$MenuBar.js"></script>
 
 		<script src="src/helpers.js"></script>
 		<script src="src/storage.js"></script>
 		<script src="src/$Component.js"></script>
-		<script src="src/$Window.js"></script>
-		<script src="src/$MenuBar.js"></script>
+		<script src="src/$ToolWindow.js"></script>
 		<script src="src/$ToolBox.js"></script>
 		<script src="src/$ColorBox.js"></script>
 		<script src="src/$FontBox.js"></script>

diff --git a/programs/jspaint/src/$MenuBar.js → programs/jspaint/lib/os-gui/$MenuBar.js b/programs/jspaint/src/$MenuBar.js → programs/jspaint/lib/os-gui/$MenuBar.js
@@ -1,3 +1,9 @@
+(function(exports) {
+
+// TODO: E\("([a-z]+)"\) -> "<$1>" or get rid of jQuery as a dependency
+function E(t){
+	return document.createElement(t);
+}
 
 // TODO: make menus not take focus so we can support copy/pasting text in the text tool textarea from the menus
 
@@ -320,3 +326,8 @@ function $MenuBar(menus){
 	return $menus;
 
 }
+
+exports.$MenuBar = $MenuBar;
+exports.MENU_DIVIDER = MENU_DIVIDER;
+
+})(window);