Reference image tool

.gitignore

@@ -5,3 +5,4 @@ node_modules
 server*.ans
 Thumbs.db
 moebius.code-workspace
+.idea

app/controller.js

@@ -16,6 +16,8 @@ require("./document/tools/ellipse_filled");
 require("./document/tools/ellipse_outline");
 require("./document/tools/fill");
 require("./document/tools/sample");
+require("./document/tools/reference");
+require("./document/input/drag_and_drop");
 
 doc.on("start_rendering", () => send_sync("show_rendering_modal"));
 doc.on("end_rendering", () => send("close_modal"));
@@ -95,7 +97,7 @@ async function save_without_sauce() {
         doc.edited = false;
         save(false, true);
     } else {
-        await doc.save_backup(file)
+        await doc.save_backup_without_sauce(file)
         await doc.open(file);
     }
 }

app/css/document.css

@@ -5,6 +5,7 @@
     --preview-width: 300px;
     --charlist-width: 128px;
     --chat-height: 0px;
+    --reference-control-opacity: 0.4;
 }
 #sidebar {
     float: left;
@@ -78,6 +79,9 @@ body.dark .tool.selected {
 #sample_mode {
     background-image: url("../img/sample.png");
 }
+#reference_mode {
+    background-image: url("../img/reference.png");
+}
 #sidebar, #toolbar {
     background-color: var(--mid-color);
 }
@@ -161,6 +165,12 @@ body.dark #current_colors > canvas {
     touch-action: none;
     cursor: -webkit-image-set(url("../img/crosshair.png") 1x, url("../img/crosshair_2x.png") 2x) 15 15, crosshair;
 }
+#viewport.reference-tool {
+    cursor: grab;
+}
+#viewport.reference-tool.grabbing {
+    cursor: grabbing;
+}
 #chat {
     width: calc(100% - var(--sidebar-width) -  var(--preview-width) - var(--charlist-width));
     height: var(--chat-height);
@@ -344,7 +354,8 @@ body.dark #preview {
 }
 #canvas_container.canvas_zoom {
     transform: scale(2);
-    transform-origin: top;
+    transform-origin: top left;
+    margin: 0;
 }
 .hidden {
     display: none !important;
@@ -427,12 +438,27 @@ body.dark #statusbar > div > div {
 #editing_layer > canvas.selection.operation {
     border-image-source: url("../img/selection_border_operation.gif");
 }
+#reference_layer {
+    position: relative;
+}
 #reference_image {
-    background-size: 100%;
-    background-repeat: no-repeat;
-    opacity: 0.4;
     image-rendering: pixelated;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: auto;
+    object-fit: cover;
+}
+
+#reference_image.selected {
+    outline: 1px solid;
+    outline-style: dashed;
 }
+
+#reference_image.closed {
+    display: none;
+}
+
 #guide.hidden {
     display: none;
 }

app/css/toolbar.css

@@ -104,6 +104,86 @@ body.dark .panel > div {
     cursor: pointer;
 }
 
+.label {
+    float: left;
+    line-height: 1.1em;
+    text-align: center !important;
+    margin: 8px;
+    margin-right: 0px;
+    height: 30px;
+    display: inline-flex !important;
+    justify-content: center;
+    align-items: center;
+}
+
+.number-input {
+    float: left;
+    gap: 10px;
+    margin: 8px 0;
+    padding: 1px;
+    color: rgba(255, 255, 255, 0.3);
+    background-image: -webkit-linear-gradient(top, rgb(34, 37, 43), rgb(30, 31, 35));
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    text-align: center;
+    width: 4ch;
+    height: 28px;
+}
+
+.number-input:focus {
+    outline: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.reference-control {
+    opacity: var(--reference-control-opacity);
+}
+
+.reference-control.button-left {
+    margin-right: 0px;
+    border-right: none;
+    padding: 0 6px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.reference-control.button-right {
+    border-left: none;
+    margin-left: 0px;
+    padding: 0 6px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+#reference_show {
+    margin-right: 0px;
+    border-right: none;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+#reference_hide {
+    border-left: none;
+    margin-left: 0px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+#reference_open, #reference_reset {
+    border-radius: 4px;
+}
+
+#reference_open:active, #reference_reset:active {
+    border-color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.8);
+    text-shadow: 0px -1px rgba(0, 0, 0, 0.2);
+    background-image: -webkit-linear-gradient(top, rgba(96, 108, 136, 0.6), rgba(83, 96, 127, 0.6));
+}
+
 #half_block {
     margin-right: 0px;
     border-right: none;

app/css/warning.css

@@ -0,0 +1,37 @@
+body {
+    user-select: none;
+    font-size: 14px;
+    color: #aaaaaa;
+    background-color: var(--dark-mid-color);
+    overflow: hidden;
+    padding: 1em;
+}
+
+button {
+    position: absolute;
+    bottom: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 4px;
+    background: none;
+    color: var(--text);
+    padding: 6px 10px;
+    margin: 6px;
+    outline: none;
+    transition-property: background-color;
+    transition-duration: 20ms;
+    transition-timing-function: linear;
+}
+
+button:active {
+    border: 1px solid white;
+    background-color: var(--status);
+    color: var(--text);
+}
+
+#content {
+    width: 450px;
+}
+
+#cancel {
+    right: 0px;
+}

app/document/doc.js

@@ -1,5 +1,5 @@
 const libtextmode = require("../libtextmode/libtextmode");
-const { on, send, send_sync } = require("../senders");
+const { on, send, send_sync, open_box} = require("../senders");
 const events = require("events");
 const chat = require("./ui/chat");
 const path = require("path");
@@ -1124,6 +1124,10 @@ class TextModeDoc extends events.EventEmitter {
         await libtextmode.write_file(this, file);
     }
 
+    async save_backup_without_sauce(file) {
+        await libtextmode.write_file(this, file, { save_without_sauce: true });
+    }
+
     async export_as_utf8(file) {
         await libtextmode.write_file(this, file, { utf8: true });
     }
@@ -1154,8 +1158,25 @@ class TextModeDoc extends events.EventEmitter {
         this.start_rendering().then(() => this.emit("change_font", doc.font_name));
     }
 
-    async load_custom_font() {
-        const { bytes, filename } = await libtextmode.load_custom_font();
+    async load_custom_font({ file }) {
+        if (!file) {
+            const files = open_box({
+                filters: [{
+                    name: "Custom Font",
+                    extensions: [
+                        "f06", "f07", "f08", "f09", "f10", "f11", "f12", "f13",
+                        "f14", "f15","f16", "f17", "f18", "f19", "f20", "f21",
+                        "f22", "f23", "f24", "f25", "f26", "f27", "f28", "f29",
+                        "f30", "f31", "f32"
+                    ]
+                }]
+            });
+            if (files.length === 0) return;
+            file = files[0]
+        }
+
+        const { bytes, filename } = await libtextmode.load_custom_font(file);
+        console.log(bytes, filename)
         doc.font_name = path.parse(filename).name;
         doc.font_bytes = bytes;
         this.start_rendering().then(() => this.emit("change_font", doc.font_name));

app/document/input/drag_and_drop.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const { send, msg_box} = require("../../senders");
+const doc = require("../doc");
+const {open_reference_image} = require("../ui/ui");
+
+const document_extensions = [
+    ".ans", ".asc", ".diz", ".nfo", ".txt", ".xb", ".bin"
+]
+const reference_extensions = [".png", ".jpg", ".jpeg"]
+const font_extensions = [
+    ".f06", ".f07", ".f08", ".f09", ".f10", ".f11", ".f12",
+    ".f13", ".f14", ".f15", ".f16", ".f17", ".f18", ".f19",
+    ".f20", ".f21", ".f22", ".f23", ".f24", ".f25", ".f26",
+    ".f27", ".f28", ".f29", ".f30", ".f31", ".f32"
+]
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    document.body.addEventListener("dragover", event => {
+        event.preventDefault();
+    });
+
+    document.body.addEventListener("drop", event => {
+        event.preventDefault();
+
+        const files = event.dataTransfer.files;
+        if (files.length === 0) return;
+
+        const file = files[0];
+        const ext = path.extname(file.name).toLowerCase();
+
+        if (document_extensions.includes(ext)) {
+            const choice = msg_box(
+                "Open file",
+                `Open ${file.name} in the editor.`,
+                {
+                    buttons: ["Open in New Window", "Replace Current File", "Cancel"],
+                });
+            if (choice === 0) {
+                send("open_file", {file: file.path})
+            } else if (choice === 1) {
+                doc.open(file.path)
+            }
+        } else if (reference_extensions.includes(ext)) {
+            const choice = msg_box(
+                "Open Reference",
+                `Open ${file.name} as the current reference image.`,
+                {
+                    buttons: ["Open Reference", "Cancel"],
+                });
+            if (choice === 0) {
+                open_reference_image({file: file.path});
+            }
+        } else if (font_extensions.includes(ext)) {
+            const choice = msg_box(
+                "Load Font",
+                `Load file ${file.name} as the current font.`,
+                {
+                    buttons: ["Load Font", "Cancel"],
+                });
+            if (choice === 0) {
+                doc.load_custom_font({file: file.path});
+            }
+        }
+    });
+});