From 47a9db82218c4e93b6b6620748039778b7d15b13 Mon Sep 17 00:00:00 2001
From: Mani <12841290+krmanik@users.noreply.github.com>
Date: Wed, 26 Apr 2023 14:01:04 +0800
Subject: [PATCH] fix image height issues in iOS safari (#2480)

* use i18n message when not showing image

* fix height for iOS

* some ui styling

* fix polygon draw in panzoom

* more ui styling and fixes
---
 ftl/core/notetypes.ftl                        |  1 +
 ts/image-occlusion/ImageOcclusionPage.svelte  | 81 +++++++------------
 ts/image-occlusion/MaskEditor.svelte          |  3 +-
 ts/image-occlusion/Notes.svelte               | 74 +++++++++--------
 ts/image-occlusion/SideToolbar.svelte         |  8 +-
 ts/image-occlusion/StickyFooter.svelte        | 18 ++---
 ts/image-occlusion/Tags.svelte                |  2 +-
 ts/image-occlusion/TopToolbar.svelte          | 10 +--
 ts/image-occlusion/image-occlusion-base.scss  |  6 ++
 ts/image-occlusion/mask-editor.ts             |  2 +-
 .../notes-toolbar/MoreTools.svelte            |  2 +-
 .../notes-toolbar/TextFormatting.svelte       | 11 ++-
 ts/image-occlusion/tools/tool-polygon.ts      |  7 +-
 ts/reviewer/image_occlusion.ts                |  8 +-
 14 files changed, 116 insertions(+), 117 deletions(-)

diff --git a/ftl/core/notetypes.ftl b/ftl/core/notetypes.ftl
index 353ea308d..59036f9f1 100644
--- a/ftl/core/notetypes.ftl
+++ b/ftl/core/notetypes.ftl
@@ -50,3 +50,4 @@ notetypes-hide-one-guess-one = Hide One, Guess One
 notetypes-error-generating-cloze = An error occurred when generating an image occlusion note
 notetypes-error-getting-imagecloze = An error occurred while fetching an image occlusion note
 notetypes-error-loading-image-occlusion = Error loading image occlusion. Is your Anki version up to date?
+notetype-error-no-image-to-show = No image to show.
diff --git a/ts/image-occlusion/ImageOcclusionPage.svelte b/ts/image-occlusion/ImageOcclusionPage.svelte
index 802610962..93ed9c20a 100644
--- a/ts/image-occlusion/ImageOcclusionPage.svelte
+++ b/ts/image-occlusion/ImageOcclusionPage.svelte
@@ -32,29 +32,48 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <Container class="image-occlusion">
-    <ul>
+    <div class="tab-buttons">
         {#each items as item}
-            <li class={activeTabValue === item.value ? "active" : ""}>
-                <span on:click={tabChange(item.value)}>{item.label}</span>
-            </li>
+            <button
+                class="tab-item {activeTabValue === item.value ? 'active' : ''} 
+                    {item.value === 1 ? 'left-border-radius' : 'right-border-radius'}"
+                on:click={tabChange(item.value)}
+            >
+                {item.label}
+            </button>
         {/each}
-    </ul>
+    </div>
 
     <div hidden={activeTabValue != 1}>
         <MasksEditor {mode} />
     </div>
 
     <div hidden={activeTabValue != 2}>
-        <div class="notes-page"><Notes /></div>
-        <StickyFooter
-            {hideAllGuessOne}
-            {hideOneGuessOne}
-            editing={mode.kind == "edit"}
-        />
+        <Notes />
+        <StickyFooter {hideAllGuessOne} {hideOneGuessOne} />
     </div>
 </Container>
 
 <style lang="scss">
+    .tab-buttons {
+        display: flex;
+        position: absolute;
+        top: 2px;
+        left: 2px;
+    }
+    .tab-buttons .active {
+        background: var(--button-primary-bg);
+        color: white;
+    }
+
+    .tab-item {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        padding: 0px 6px 0px 6px;
+        height: 38px;
+    }
+
     :global(.image-occlusion) {
         --gutter-inline: 0.5rem;
 
@@ -67,44 +86,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             align-items: center;
         }
     }
-    ul {
-        display: flex;
-        flex-wrap: wrap;
-        padding-left: 0;
-        list-style: none;
-        border-bottom: 1px solid var(--border);
-        margin-top: 2px;
-    }
-    li {
-        margin-bottom: -1px;
-    }
-
-    span {
-        border: 1px solid transparent;
-        border-top-left-radius: 0.25rem;
-        border-top-right-radius: 0.25rem;
-        display: block;
-        padding: 0.5rem 1rem;
-        cursor: pointer;
-        color: var(--fg-subtle);
-    }
-
-    span:hover {
-        border-color: var(--border) var(--border) var(--canvas);
-    }
-
-    li.active > span {
-        color: var(--fg);
-        background-color: var(--canvas);
-        border-color: var(--border) var(--border) var(--canvas);
-    }
-
-    :global(.notes-page) {
-        @media only screen and (min-width: 1024px) {
-            width: min(100vw, 70em);
-            margin: 6px auto;
-            padding-bottom: 5em;
-            padding-right: 12px;
-        }
-    }
 </style>
diff --git a/ts/image-occlusion/MaskEditor.svelte b/ts/image-occlusion/MaskEditor.svelte
index ec8d3446f..360cec235 100644
--- a/ts/image-occlusion/MaskEditor.svelte
+++ b/ts/image-occlusion/MaskEditor.svelte
@@ -50,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .editor-main {
         position: absolute;
-        top: 84px;
+        top: 42px;
         left: 36px;
         bottom: 2px;
         right: 2px;
@@ -71,6 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     :global(.upper-canvas) {
         border: 0.5px solid var(--border-strong);
+        border-width: thin;
     }
 
     :global(.canvas-container) {
diff --git a/ts/image-occlusion/Notes.svelte b/ts/image-occlusion/Notes.svelte
index 71d308e54..9333348b1 100644
--- a/ts/image-occlusion/Notes.svelte
+++ b/ts/image-occlusion/Notes.svelte
@@ -6,7 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@tslib/ftl";
 
     import Col from "../components/Col.svelte";
-    import Container from "../components/Container.svelte";
     import Row from "../components/Row.svelte";
     import NotesToolbar from "./notes-toolbar/NotesToolbar.svelte";
     import { notesDataStore, tagsWritable } from "./store";
@@ -33,38 +32,34 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <NotesToolbar />
 </div>
 
-<Container>
-    {#each notesFields as field}
-        <Container>
-            <Row --cols={1}>
-                <Col --col-size={1}>
-                    {field.title}
-                </Col>
-            </Row>
-            <Row --cols={1}>
-                <div id="note-container">
-                    <div
-                        id="{field.id}--div"
-                        bind:innerHTML={field.divValue}
-                        class="text-editor"
-                        on:input={() => {
-                            field.textareaValue = field.divValue;
-                        }}
-                        contenteditable
-                    />
-                    <textarea
-                        id="{field.id}--textarea"
-                        class="text-area"
-                        bind:value={field.textareaValue}
-                    />
-                </div>
-            </Row>
-        </Container>
-    {/each}
-    <Container>
-        <Tags {tagsWritable} />
-    </Container>
-</Container>
+{#each notesFields as field}
+    <Row --cols={1}>
+        <Col --col-size={1}>
+            {field.title}
+        </Col>
+    </Row>
+    <Row --cols={1}>
+        <div id="note-container">
+            <div
+                id="{field.id}--div"
+                bind:innerHTML={field.divValue}
+                class="text-editor"
+                on:input={() => {
+                    field.textareaValue = field.divValue;
+                }}
+                contenteditable
+            />
+            <textarea
+                id="{field.id}--textarea"
+                class="text-area"
+                bind:value={field.textareaValue}
+            />
+        </div>
+    </Row>
+{/each}
+<div style="margin-top: 10px;">
+    <Tags {tagsWritable} />
+</div>
 
 <style lang="scss">
     .text-area {
@@ -73,6 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: none;
         background: var(--canvas-elevated);
         border: 2px solid var(--border);
+        border-radius: var(--border-radius);
         outline: none;
         resize: none;
         overflow: auto;
@@ -81,6 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .text-editor {
         height: 80px;
         border: 1px solid var(--border);
+        border-radius: var(--border-radius);
         padding: 5px;
         overflow: auto;
         outline: none;
@@ -88,6 +85,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .note-toolbar {
-        margin-left: 14px;
+        margin-left: 98px;
+        margin-top: 2px;
+        display: flex;
+        overflow-x: auto;
+        height: 38px;
+    }
+
+    ::-webkit-scrollbar {
+        width: 0.1em !important;
+        height: 0.1em !important;
     }
 </style>
diff --git a/ts/image-occlusion/SideToolbar.svelte b/ts/image-occlusion/SideToolbar.svelte
index 3701e9d43..fe8bc4330 100644
--- a/ts/image-occlusion/SideToolbar.svelte
+++ b/ts/image-occlusion/SideToolbar.svelte
@@ -65,8 +65,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style>
     .tool-bar-container {
         position: fixed;
-        top: 46px;
-        left: 0;
+        top: 42px;
+        left: 2px;
         height: 100%;
         border-right: 1px solid var(--border);
         overflow-y: auto;
@@ -86,8 +86,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     :global(.active-tool) {
-        color: red !important;
-        background: unset !important;
+        color: white !important;
+        background: var(--button-primary-bg) !important;
     }
 
     ::-webkit-scrollbar {
diff --git a/ts/image-occlusion/StickyFooter.svelte b/ts/image-occlusion/StickyFooter.svelte
index 5336b68ac..10b7d2530 100644
--- a/ts/image-occlusion/StickyFooter.svelte
+++ b/ts/image-occlusion/StickyFooter.svelte
@@ -10,16 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let hideAllGuessOne: () => void;
     export let hideOneGuessOne: () => void;
-    export let editing: boolean;
 </script>
 
 <div style:flex-grow="1" />
 <div class="sticky-footer">
-    {#if editing}
-        <div class="update-note-text">
-            {tr.actionsUpdateNote()}
-        </div>
-    {/if}
     <ButtonGroup size={2}>
         <LabelButton
             --border-left-radius="5px"
@@ -56,12 +50,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         justify-content: flex-end;
     }
+
+    @media only screen and (max-width: 640px) {
+        .sticky-footer {
+            justify-content: center;
+        }
+    }
+
     :global(.bottom-btn) {
         margin: 2px;
     }
-
-    :global(.update-note-text) {
-        align-self: center;
-        padding-right: 20px;
-    }
 </style>
diff --git a/ts/image-occlusion/Tags.svelte b/ts/image-occlusion/Tags.svelte
index d7df5e585..2270e0eef 100644
--- a/ts/image-occlusion/Tags.svelte
+++ b/ts/image-occlusion/Tags.svelte
@@ -23,6 +23,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     :global(.tag-editor) {
-        margin-top: 14px;
+        margin: 10px 0px 10px 0px;
     }
 </style>
diff --git a/ts/image-occlusion/TopToolbar.svelte b/ts/image-occlusion/TopToolbar.svelte
index 5ef1613b5..0461915eb 100644
--- a/ts/image-occlusion/TopToolbar.svelte
+++ b/ts/image-occlusion/TopToolbar.svelte
@@ -139,15 +139,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style>
     .top-tool-bar-container {
         display: flex;
-        position: fixed;
-        top: 46px;
-        width: 98%;
-        overflow-y: auto;
+        overflow-y: scroll;
         z-index: 99;
+        margin-left: 98px;
+        margin-top: 2px;
     }
 
     .undo-redo-button {
-        margin-left: 28px;
         margin-right: 2px;
         display: flex;
     }
@@ -179,7 +177,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: none;
         position: absolute;
         z-index: 100;
-        top: 82px;
+        top: 40px;
         margin-top: 1px;
     }
 
diff --git a/ts/image-occlusion/image-occlusion-base.scss b/ts/image-occlusion/image-occlusion-base.scss
index 900c430e4..aa7d8ddc0 100644
--- a/ts/image-occlusion/image-occlusion-base.scss
+++ b/ts/image-occlusion/image-occlusion-base.scss
@@ -17,3 +17,9 @@
 html {
     overflow: hidden;
 }
+
+/** consistent font size **/
+:root { --font-size: 16px; }
+body { 
+    font-size: 16px;
+}
diff --git a/ts/image-occlusion/mask-editor.ts b/ts/image-occlusion/mask-editor.ts
index ff183a177..f4a70c0dd 100644
--- a/ts/image-occlusion/mask-editor.ts
+++ b/ts/image-occlusion/mask-editor.ts
@@ -94,7 +94,7 @@ const setCanvasZoomRatio = (
     canvas: fabric.Canvas,
     instance: PanZoom,
 ): void => {
-    const zoomRatioW = (innerWidth - 60) / canvas.width!;
+    const zoomRatioW = (innerWidth - 40) / canvas.width!;
     const zoomRatioH = (innerHeight - 100) / canvas.height!;
     const zoomRatio = zoomRatioW < zoomRatioH ? zoomRatioW : zoomRatioH;
     zoomResetValue.set(zoomRatio);
diff --git a/ts/image-occlusion/notes-toolbar/MoreTools.svelte b/ts/image-occlusion/notes-toolbar/MoreTools.svelte
index ce1b56942..6abba6155 100644
--- a/ts/image-occlusion/notes-toolbar/MoreTools.svelte
+++ b/ts/image-occlusion/notes-toolbar/MoreTools.svelte
@@ -21,7 +21,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 {#each moreTools as tool}
     <IconButton
-        class="note-tool-icon-button"
+        class="note-tool-icon-button right-border-radius"
         {iconSize}
         on:click={() => tool.action()}
         tooltip={tool.title}>{@html tool.icon}</IconButton
diff --git a/ts/image-occlusion/notes-toolbar/TextFormatting.svelte b/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
index 333db6d6b..3d0b62a23 100644
--- a/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
+++ b/ts/image-occlusion/notes-toolbar/TextFormatting.svelte
@@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {#each textFormatting as tool}
     <IconButton
         id={"note-tool-" + tool.name}
-        class="note-tool-icon-button"
+        class="note-tool-icon-button {tool.name === 'b' ? 'left-border-radius' : ''}"
         {iconSize}
         tooltip={tool.title}
         on:click={() => {
@@ -54,5 +54,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     :global(.note-tool-icon-button) {
         padding: 4px !important;
         border-radius: 2px !important;
+        padding: 0px 6px 0px 6px !important;
+    }
+
+    :global(.left-border-radius) {
+        border-radius: 5px 0 0 5px !important;
+    }
+
+    :global(.right-border-radius) {
+        border-radius: 0 5px 5px 0 !important;
     }
 </style>
diff --git a/ts/image-occlusion/tools/tool-polygon.ts b/ts/image-occlusion/tools/tool-polygon.ts
index 66e6fb415..879f9a4db 100644
--- a/ts/image-occlusion/tools/tool-polygon.ts
+++ b/ts/image-occlusion/tools/tool-polygon.ts
@@ -13,7 +13,6 @@ let linesList: fabric.Line = [];
 let pointsList: fabric.Circle = [];
 let drawMode = false;
 let zoomValue = 1;
-let panzoomX = 1, panzoomY = 1;
 const addedPolygonIds: string[] = [];
 
 export const drawPolygon = (canvas: fabric.Canvas, panzoom: PanZoom): void => {
@@ -67,15 +66,13 @@ const toggleDrawPolygon = (canvas: fabric.Canvas): void => {
 
 const addPoint = (canvas: fabric.Canvas, options, panzoom): void => {
     zoomValue = panzoom.getTransform().scale;
-    panzoomX = panzoom.getTransform().x;
-    panzoomY = panzoom.getTransform().y;
 
     const canvasContainer = document.querySelector(".canvas-container")!.getBoundingClientRect()!;
     let clientX = options.e.touches ? options.e.touches[0].clientX : options.e.clientX;
     let clientY = options.e.touches ? options.e.touches[0].clientY : options.e.clientY;
 
-    clientX = (clientX - canvasContainer.left - panzoomX) / zoomValue;
-    clientY = (clientY - canvasContainer.top - panzoomY) / zoomValue;
+    clientX = (clientX - canvasContainer.left) / zoomValue;
+    clientY = (clientY - canvasContainer.top) / zoomValue;
 
     const point = new fabric.Circle({
         radius: 5,
diff --git a/ts/reviewer/image_occlusion.ts b/ts/reviewer/image_occlusion.ts
index 5c7fedbfe..b0a83034b 100644
--- a/ts/reviewer/image_occlusion.ts
+++ b/ts/reviewer/image_occlusion.ts
@@ -1,11 +1,17 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import * as tr from "@tslib/ftl";
+
 window.addEventListener("load", () => {
     window.addEventListener("resize", setupImageCloze);
 });
 
 export function setupImageCloze(): void {
+    window.requestAnimationFrame(setupImageClozeInner);
+}
+
+function setupImageClozeInner(): void {
     const canvas: HTMLCanvasElement = document.querySelector("canvas")! as HTMLCanvasElement;
     canvas.style.maxWidth = "100%";
     canvas.style.maxHeight = "95vh";
@@ -14,7 +20,7 @@ export function setupImageCloze(): void {
     const container = document.getElementById("container") as HTMLDivElement;
     const image = document.getElementById("img") as HTMLImageElement;
     if (image == null) {
-        container.innerText = "No image to show.";
+        container.innerText = tr.notetypeErrorNoImageToShow();
         return;
     }