Start migrating editor canvas + editor canvas test and edit photo assets

Zekiah-A · Mar 24, 2024 · 16de445 · 16de445
1 parent 611fe1e
commit 16de445
Show file tree

Hide file tree

Showing 2 changed files with 179 additions and 0 deletions.
diff --git a/Other/editor-canvas-test.html 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>
diff --git a/Resources/EditPhoto.svg b/Resources/EditPhoto.svg