anki-maobi icon indicating copy to clipboard operation
anki-maobi copied to clipboard

Published 20 hours ago • verified publisher icon jcklie

Offset pen position when zoom≠1

Open khonkhortisan opened this issue 4 years ago • 2 comments

Describe the bug I use javascript to zoom the page to fit so that I never have to modify the font size based on how much text there is, and maobi expects the size of the character box to not change,

To Reproduce Steps to reproduce the behavior:

  1. increase zoom level through either html <body class="card card1 isWin" style="zoom:2;"> or css body {zoom:2;}. The addon AnkiWebView Inspector can help with this.
  2. draw in the top-left corner of of the character box

If possible, attach a minimal file that triggers the error. MaobiWithZoom.apkg.txt imagen

Expected behavior I'd have to take longer strokes for it to fit

Actual behavior the ink is in the bottom-right quadrant when I draw in the top-left quadrant, making it think I drew in the wrong place, flashing the correct stroke in blue over where I just attempted to draw

Please complete the following information:

  • Version: Versión 2.1.35 (84dcaa86) Python 3.8.0 Qt 5.14.2 PyQt 5.14.2
  • OS: Windows 10

Additional context decreasing the zoom on character-target-div by the same amount through html <div id="character-target-div" style="zoom:0.5;"> or css #character-target-div {zoom:0.5;} hides the problem again.

khonkhortisan avatar Feb 17 '21 10:02 khonkhortisan

Thank you for reporting. There is no easy way to detect when you are zoomed in. If you have a way, then I am happy to merge your PR. You can also open an issue with HanziWriter, we use their JS for the writing editor.

jcklie avatar Feb 17 '21 10:02 jcklie

I didn't find a normal way for a page to zoom to fit, so I'm using Content Injector to add this mess to every card _global2.js.txt I worked around it by applying the inverse zoom to character-target-div when I apply the page zoom. document.getElementById('character-target-div').style.zoom="calc(1/"+document.getElementsByClassName('card')[0].style.zoom+")"; so body may be at zoom 2.7638 while character-target-div is at 0.361821 This bug still exists, but no longer gets in my way. If I want to independently change the size of the box, I use the size variable that comes with the addon. If I want to zoom the page, I inversely zoom the box at the same time. If if was as simple as getting .style.zoom that would be easy, but it looks like it would involve multiplying the zoom levels of all parent elements, if not also browser-level zoom. Or reading the displayed width directly. Ah, it also has a problem with transform:scale() according to https://github.com/chanind/hanzi-writer/issues/172

khonkhortisan avatar Feb 17 '21 11:02 khonkhortisan