Backup branch - DO NOT MERGE - temporary-snapshot

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+name: Build/release
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v4
+        with:
+          node-version: 23
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.github_token }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.gitignore

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

README.md

@@ -7,6 +7,7 @@ Moebius XBIN is an XBIN Editor for MacOS, Linux and Windows. This is a forked ve
 - `Moebius XBIN GJ Edition` which originally was just me wanting to stop the function keys from re-mapping -- but now has become a bit more.
 
 ## Moebius XBIN GJ Edition:
+- Recent files support
 - Stops the function keys from being remapped when clicking in the character list.
 - Makes default font IBM VGA instead of TOPAZ 437 (preference)
 - Lets you use the character list picker to load the custom paint brush block.
@@ -15,6 +16,15 @@ Moebius XBIN is an XBIN Editor for MacOS, Linux and Windows. This is a forked ve
 - Adds a 1x1 drawing grid
 - Adds character code to status bar
 - Smaller character list (actual size of font vs 2x zoom previously)
+- Added hokey `CTRL+'` to toggle the drawing grid - Defaults to 1x1 grid when first toggled on
+- Added hotkey `CTRL+;` to toggle guides - Defaults to Smallscale guide (80x25) when first toggled on
+- Reference image tool by @michael-lazar
+- Fixes for BIN / XBIN encoding by @michael-lazar
+- Re-render drawing grid on font change by @michael-lazar
+- Drag and drop files from desktop by @michael-lazar
+- Add ability to open reference images in separate windows by @michael-lazar
+- Fixes scrolling for 200% zoom. by @michael-lazar
+- Add outline/border to the brush tool by @michael-lazar
 - ... more things to come perhaps!
 
 ## Download packages

app/controller.js

@@ -16,11 +16,13 @@ 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"));
+doc.on("end_rendering", () => send("close_modal", {}));
 doc.on("connecting", () => send_sync("show_connecting_modal"));
-doc.on("connected", () => send("close_modal"));
+doc.on("connected", () => send("close_modal", {}));
 doc.on("unable_to_connect", () => {
     const choice = msg_box("Connect to Server", "Cannot connect to Server", { buttons: ["Retry", "Cancel"], defaultId: 0, cancelId: 1 });
     if (choice == 1) send("destroy");
@@ -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,8 +1,9 @@
 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");
+const fs = require("fs");
 let doc, render;
 const actions = { CONNECTED: 0, REFUSED: 1, JOIN: 2, LEAVE: 3, CURSOR: 4, SELECTION: 5, RESIZE_SELECTION: 6, OPERATION: 7, HIDE_CURSOR: 8, DRAW: 9, CHAT: 10, STATUS: 11, SAUCE: 12, ICE_COLORS: 13, USE_9PX_FONT: 14, CHANGE_FONT: 15, SET_CANVAS_SIZE: 16, PASTE_AS_SELECTION: 17, ROTATE: 18, FLIP_X: 19, FLIP_Y: 20, SET_BG: 21, CHANGE_PALETTE: 22 };
 const statuses = { ACTIVE: 0, IDLE: 1, AWAY: 2, WEB: 3 };
@@ -1124,6 +1125,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,11 +1159,39 @@ 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();
-        doc.font_name = path.parse(filename).name;
-        doc.font_bytes = bytes;
-        this.start_rendering().then(() => this.emit("change_font", doc.font_name));
+    async load_custom_font(options = {}) {
+        let file = options.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 || files.length === 0) return;
+            file = files[0];
+        }
+
+        // Show loading dialog
+        const id = send_sync("show_loading_dialog", { title: "Loading Custom Font", message: "Please wait while the font is being loaded..." });
+
+        try {
+            const { bytes, filename } = await libtextmode.load_custom_font(file);
+            doc.font_name = path.parse(filename).name;
+            doc.font_bytes = bytes;
+            await this.start_rendering();
+            this.emit("change_font", doc.font_name);
+        } catch (error) {
+            send("show_warning", { title: "Font Loading Error", content: `Failed to load font: ${error.message || error}` });
+        } finally {
+            // Hide loading dialog
+            send("close_modal", { id });
+        }
     }
 
     constructor() {
@@ -1182,4 +1215,9 @@ class TextModeDoc extends events.EventEmitter {
     }
 }
 
+function save_file(bytes, filename) {
+    fs.writeFileSync(filename, bytes);
+    add_to_recent_files(filename);
+}
+
 module.exports = new TextModeDoc();