From 16de445fa233cd938a630f94b069d00d430ec83b Mon Sep 17 00:00:00 2001
From: Zekiah-A <zekiahamoako@outlook.com>
Date: Sun, 24 Mar 2024 21:56:47 +0000
Subject: [PATCH] Start migrating editor canvas + editor canvas test and edit
 photo assets

---
 Other/editor-canvas-test.html | 176 ++++++++++++++++++++++++++++++++++
 Resources/EditPhoto.svg       |   3 +
 2 files changed, 179 insertions(+)
 create mode 100644 Other/editor-canvas-test.html
 create mode 100644 Resources/EditPhoto.svg
diff --git a/Other/editor-canvas-test.html b/Other/editor-canvas-test.html
new file mode 100644
index 0000000..1546ab4
--- /dev/null
+++ b/Other/editor-canvas-test.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Editor canvas rendering lab</title>
+    <script src="../editor-document.js"></script>
+    <style>
+        :root {
+            --text-color: #000;
+            --background-opaque: #ffffff;
+        }
+        :root.dark {
+            --text-color: #DADADA;
+            --background-opaque: #1e1e1e;
+        }
+
+        html {
+            color: var(--text-color);
+            background-color: var(--background-opaque);
+        }
+
+        #testOption {
+            margin-bottom: 8px;
+        }
+
+        .canvas-container {
+            border: 1px solid var(--text-color);
+            width: min-content;
+            padding: 8px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Editor canvas rendering lab</h1>
+    <p style="max-width: 1024px;">
+        This page attempts to be a lab canvas rendering capabilities of the poem editor, intended to test that
+        rendering is both valid, displaying the correct content according to the document data provided, and
+        also a location to debug and implement new editor canvas features.
+    </p>
+    <select id="testOption" onchange="setTest(this.value)">
+        <option value="styledText">Styled text test</option>
+    </select>
+    <select onchange="
+        if (this.value == 'light') {
+            editor.colourHex = '#000000'
+            document.documentElement.className = 'light'
+        }
+        else if (this.value == 'dark') {
+            editor.colourHex = '#DADADA'
+            document.documentElement.className = 'dark'
+        }
+        editor.renderCanvasData(editorCanvas)
+    ">
+        <option value="light">Light mode</option>
+        <option value="dark">Dark mode</option>
+    </select>
+    <button type="button" onclick="editor.renderCanvasData(editorCanvas)">Re-render canvas</button>
+    <div class="canvas-container">
+        <canvas id="editorCanvas" width="1024"></canvas>
+    </div>
+</body>
+<script>
+    const styledTextDocument = {
+        type: "fragment",
+        styles: [],
+        children: [
+            {
+                type: "text",
+                content: "Styled text test:",
+            },
+            {
+                type: "newline",
+                count: 2,
+            },
+            {
+                type: "text",
+                content: "This is a text node, separated by a newline.",
+            },
+            {
+                type: "newline",
+                count: 3,
+            },
+            {
+                type: "text",
+                content: "This node is separated by a triple multi-newline."
+            },
+            {
+                type: "newline",
+                count: 2,
+            },
+            {
+                type: "fragment",
+                styles: [
+                    {
+                        type: "bold"
+                    }
+                ],
+                children: [
+                    {
+                        type: "text",
+                        content: "Text node within bold style fragment.",
+                    },
+                    {
+                        type: "newline",
+                        count: 1,
+                    },
+                    {
+                        type: "fragment",
+                        styles: [
+                            { type: "italic" }
+                        ],
+                        children: [
+                            {
+                                type: "text",
+                                content: "->Nested text node within italic style fragment within outer bold style fragment."
+                            }
+                        ]
+                    },
+                    {
+                        type: "newline",
+                        count: 1,
+                    },
+                    {
+                        type: "text",
+                        content: "Text node after within bold style fragment.",
+                    },
+                    {
+                        type: "newline",
+                        count: 1,
+                    },
+                    {
+                        type: "fragment",
+                        styles: [
+                            {
+                                type: "font",
+                                size: 18,
+                                name: "monospace"
+                            },
+                            {
+                                type: "colour",
+                                hex: "#d90000"
+                            }
+                        ],
+                        children: [
+                            {
+                                type: "text",
+                                content: "->Text node within font & colour styles fragment.",
+                            }
+                        ],
+                    }
+                ],
+            },
+            {
+                type: "newline",
+                count: 2,
+            },
+            {
+                type: "text",
+                content: "Text node in outer scope, no trailing newline",
+            },
+        ],
+    }
+
+    function setTest(name) {
+        if (name == "styledText") {
+            editor.data = styledTextDocument
+        }
+        editor.renderCanvasData(editorCanvas)
+    }
+
+    const editorScale = 1.5
+    const editor = new EditorDocument("", editorScale, 18)
+    setTest("styledText")
+</script>
+</html>
\ No newline at end of file
diff --git a/Resources/EditPhoto.svg b/Resources/EditPhoto.svg
new file mode 100644
index 0000000..76ad4f8
--- /dev/null
+++ b/Resources/EditPhoto.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+    <path d="M440-440ZM120-120q-33 0-56.5-23.5T40-200v-480q0-33 23.5-56.5T120-760h126l74-80h240v80H355l-73 80H120v480h640v-360h80v360q0 33-23.5 56.5T760-120H120Zm640-560v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM440-260q75 0 127.5-52.5T620-440q0-75-52.5-127.5T440-620q-75 0-127.5 52.5T260-440q0 75 52.5 127.5T440-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Z"/>
+</svg>
\ No newline at end of file
