From c1bc54a4ebea3c1e376cc75762c0bbde7fae1644 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Mon, 21 Nov 2022 08:27:21 -0300
Subject: [PATCH] add new history window and fix multi-window support

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/index.css     | 219 +++++++++++++++++++++++-----------------------
 index.html        |  16 +++-
 js/settingsbar.js |   1 +
 3 files changed, 126 insertions(+), 110 deletions(-)

diff --git a/css/index.css b/css/index.css
index 6f23d25..bd5b3d8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,188 +1,191 @@
 * {
-    font-size: 100%;
-    font-family: Arial, Helvetica, sans-serif;
+	font-size: 100%;
+	font-family: Arial, Helvetica, sans-serif;
 }
 
 .container {
-    position: relative;
+	position: relative;
 }
 
 .backgroundCanvas {
-    background-color: #ccc;
+	background-color: #ccc;
 }
 
 .maskPaintCanvas {
-    border: 3px dotted #993355c0;
+	border: 3px dotted #993355c0;
 }
 
 .overlayCanvas {
-    border: 1px solid #f00;
+	border: 1px solid #f00;
 }
 
 .tempCanvas {
-    border: 3px dotted #007affc0;
+	border: 3px dotted #007affc0;
 }
 
 .targetCanvas {
-    border: 2px dashed #0f0;
+	border: 2px dashed #0f0;
 }
 
 .canvas {
-    border: 2px dotted #00f;
+	border: 2px dotted #00f;
 }
 
 .mainHSplit {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(2, 1fr);
-    grid-column-gap: 5px;
-    grid-row-gap: 5px;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: repeat(2, 1fr);
+	grid-column-gap: 5px;
+	grid-row-gap: 5px;
 }
 
 .uiWrapper {
-    display: grid;
-    grid-template-columns: 1fr 15fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 5px;
-    grid-row-gap: 5px;
+	display: grid;
+	grid-template-columns: 1fr 15fr;
+	grid-template-rows: 1fr;
+	grid-column-gap: 5px;
+	grid-row-gap: 5px;
 }
 
-#infoContainer {
-    position: absolute;
-    width: 250px;
-    height: auto;
-    z-index: 999;
-}
-#draggable {
-    cursor: move;
+.uiContainer {
+	position: absolute;
+	width: 250px;
+	height: auto;
+	z-index: 999;
 }
 
-#DraggableTitleBar {
-    z-index: 999;
-    cursor: move;
-    background-color: rgba(104, 104, 104, 0.75);
+.uiTitleBar {
+	z-index: 999;
+	cursor: move;
+	background-color: rgba(104, 104, 104, 0.75);
 
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-bottom: auto;
-    font-size: 1.5em;
-    color: black;
-    text-align: center;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border: solid;
-    border-bottom: none;
-    border-color: black;
+	user-select: none;
+
+	padding-left: 5px;
+	padding-right: 5px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	margin-bottom: auto;
+	font-size: 1.5em;
+	color: black;
+	text-align: center;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border: solid;
+	border-bottom: none;
+	border-color: black;
+}
+
+.draggable {
+	cursor: move;
 }
 
 .toolbar {
-    display: flex;
-    justify-content: space-between;
+	display: flex;
+	justify-content: space-between;
 }
 
 .toolbar > .tool {
-    flex: 1;
+	flex: 1;
 }
 
 .toolbar > .tool:not(:last-child) {
-    margin-right: 10px;
+	margin-right: 10px;
 }
 
 button.tool {
-    background-color: rgb(0, 0, 50);
-    color: rgb(255, 255, 255);
-    border-radius: 5px;
-    cursor: pointer;
-    border: none;
-    text-align: center;
-    outline: none;
-    font-size: 15px;
-    padding: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
+	background-color: rgb(0, 0, 50);
+	color: rgb(255, 255, 255);
+	border-radius: 5px;
+	cursor: pointer;
+	border: none;
+	text-align: center;
+	outline: none;
+	font-size: 15px;
+	padding: 5px;
+	margin-top: 5px;
+	margin-bottom: 5px;
 }
 
 button.tool:hover {
-    background-color: #667;
+	background-color: #667;
 }
 
 .collapsible {
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-    border-radius: 5px;
-    cursor: pointer;
-    width: 100%;
-    border: none;
-    text-align: center;
-    outline: none;
-    font-size: 15px;
-    padding: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	border-radius: 5px;
+	cursor: pointer;
+	width: 100%;
+	border: none;
+	text-align: center;
+	outline: none;
+	font-size: 15px;
+	padding: 5px;
+	margin-top: 5px;
+	margin-bottom: 5px;
 }
 
 .collapsible:hover {
-    background-color: #777;
+	background-color: #777;
 }
 
 .content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.2s ease-out;
 }
 
 .info {
-    background-color: rgba(255, 255, 255, 0.5);
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+	background-color: rgba(255, 255, 255, 0.5);
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 5px;
+	padding-bottom: 5px;
 
-    color: black;
-    border: solid;
-    border-top: none;
-    border-color: black;
-    font-size: medium;
-    text-align: left;
-    max-height: fit-content;
-    overflow: auto;
-    cursor: auto;
+	color: black;
+	border: solid;
+	border-top: none;
+	border-color: black;
+	font-size: medium;
+	text-align: left;
+	max-height: fit-content;
+	overflow: auto;
+	cursor: auto;
 }
 
 .canvasHolder {
-    position: relative;
-    width: 2560px;
-    height: 1440px;
+	position: relative;
+	width: 2560px;
+	height: 1440px;
 }
 
 .mainCanvases {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 2560px;
-    height: 1440px;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 2560px;
+	height: 1440px;
 }
 
 .masks {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 1fr;
+	grid-column-gap: 0px;
+	grid-row-gap: 0px;
 }
 
 .maskCanvasMonitor .overMaskCanvasMonitor .initImgCanvasMonitor {
-    position: absolute;
+	position: absolute;
 }
 
 .maskPaintCanvas {
-    filter: opacity(40%);
+	filter: opacity(40%);
 }
 
 .strokeText {
-    -webkit-text-stroke: 1px #888;
-    font-size: 150%;
-    color: #000;
+	-webkit-text-stroke: 1px #888;
+	font-size: 150%;
+	color: #000;
 }
diff --git a/index.html b/index.html
index bbaa0ec..42f70b7 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,9 @@
 </head>
 
 <body>
-    <div id="infoContainer">
-        <div id="DraggableTitleBar" class="draggable">openOutpaint 🐠</div>
+    <!-- Main Toolbar -->
+    <div id="infoContainer" class="uiContainer">
+        <div id="infoTitleBar" class="draggable uiTitleBar">openOutpaint 🐠</div>
         <div id="info" class="info" style="min-width:200px;">
 
             <label for="host">Host</label>
@@ -113,6 +114,17 @@
                 <br />
                 <hr>
             </div>
+        </div>
+
+    </div>
+
+    <!-- History Toolbar -->
+    <div id="historyContainer"  class="uiContainer" style="right: 0;">
+        <div id="historyTitleBar" class="draggable uiTitleBar">History</div>
+        <div class="info" style="min-width:200px;">
+            <div id="history" class="history">
+
+            </div>
             <div class="toolbar">
                 <button type="button" onclick="commands.undo()" class="tool">undo</button>
                 <button type="button" onclick="commands.redo()" class="tool">redo</button>
diff --git a/js/settingsbar.js b/js/settingsbar.js
index 6a4aec6..b7d6e42 100644
--- a/js/settingsbar.js
+++ b/js/settingsbar.js
@@ -67,6 +67,7 @@ function makeDraggable(id) {
 }
 
 makeDraggable("infoContainer");
+makeDraggable("historyContainer");
 
 var coll = document.getElementsByClassName("collapsible");
 for (var i = 0; i < coll.length; i++) {