Commit Graph

1815 Commits

Author SHA1 Message Date
Damien Elmes
e63b4b9927 Experiment with disabling prettier whitespace sensitivity
Prettier by default tries to preserve whitespace around inline tags,
which can prevent problems such as a space before the period in
'<a>text</a>.':

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

Unfortunately only standard HTML block elements are excluded from this
behaviour, so all of our Svelte components are treated the same way, even
if they are block-based, or used in a way where the extra whitespace
doesn't matter. This makes the code somewhat harder to read.

Changing this option does carry the risk that rogue spaces will creep
into our UI in the future as code is formatted, but as there don't appear
to be any such issues with this initial reformat, I think the improved
readability may justify the relatively small risk.
2023-06-01 11:11:26 +10:00
Damien Elmes
1e00b7d4c4 Expose onUpdateHook/onShownHook via package 2023-05-31 15:19:09 +10:00
Damien Elmes
f758b33346
Default to current deck in csv import if settings allow it (#2527)
* Default to current deck in csv import if settings allow it

Reuses defaults_for_adding(). In the future we might also want to update
the last deck/notetype on successful completion, if entries weren't
specified in the file.

https://forums.ankiweb.net/t/importing-new-notes-to-wrong-deck-in-anki-2-1-63/30598

* Address review feedback from Rumo
2023-05-31 13:47:12 +10:00
Damien Elmes
7f6c410ca5
Various changes to I/O handling (#2513)
* Store coordinates as ratios of full size

* Use single definition for cappedCanvasSize()

* Move I/O review code into ts/image-occlusion

A bit simpler when it's all in one place.

* Reduce number precision, and round to whole pixels

>>> n=10000
>>> for i in range(1, int(n)): assert i == round(float("%0.4f" % (i/n))*n)

* Minor typing tweak

So, it turns out that typing is mostly broken in ts/image-occlusion.
We're importing from fabric which is a js file without types, so types
like fabric.Canvas are resolving to any.

I first tried switching to `@types/fabric`, which introduced a slew of
typing errors. Wasted a few hours trying to address them, before deciding
to give up on it, since the types were not complete. Then found fabric
has a 6.0 beta that introduces typing, and spent some time with that, but
ran into some new issues as it still seems to be a work in progress.
I think we're probably best off waiting until it's out and stabilized
before sinking more effort into this.

* Refactor (de)serialization of occlusions

To make the code easier to follow/maintain, cloze deletions are now decoded/
encoded into simple data classes, which can then be converted to Fabric objects
and back. The data objects handle converting from absolute/normal positions, and
producing values suitable for writing to text (eg truncated floats).

Various other changes:

- Polygon points are now stored as 'x,y x2,y2 ...' instead of JSON in cloze
divs, as that makes the handling consistent with reading from cloze deletion
text.
- Fixed the reviewer not showing updated placement when a polygon was moved.
- Disabled rotation controls in the editor, since we don't support rotation during
review.
- Renamed hideInactive to occludeInactive, as it wasn't clear whether the former
meant to hide the occlusions, or keep them (hiding the content). It's stored
as 'oi=1' in the cloze text.

* Increase canvas size limit, and double pixels when required.

* Size canvas based on container size

This results in sharper masks when the intrinsic image size is smaller
than the container, and more legible ones when the container is smaller than
the intrinsic image size.

By using the container instead of the viewport, we account for margins,
and when the pixel ratio is 1x, the canvas size and container size should
match.

* Disable zoom animation on editor load

* Default to rectangle when adding new occlusions

* Allow users to add/update notes directly from mask editing page

* The mask editor needs to work with css pixels, not actual pixels

The canvas and image were being scaled too large, which impacted
performance.
2023-05-31 13:45:12 +10:00
Damien Elmes
15dcb09036
Detect incorrect usage of triple slash in TypeScript (#2524)
* Migrate check_copyright to Rust

* Add a new lint to check accidental usages of /// in ts/svelte comments

* Fix a bunch of incorrect jdoc comments

* Move contributor check into minilints

Will allow users to detect the issue locally with './ninja check'
before pushing to CI.

* Make Cargo.toml consistent with other crates
2023-05-26 12:49:44 +10:00
Damien Elmes
7686cb8de8
Fix misaligned image occlusions (#2512)
* Cloze styling is not required in I/O notetype

* Use raw string for IO template

* Rename to notetype.css and use more specific ids

* Move internal i/o styling into runtime

Storing it in the notetype makes it difficult to make changes, and
makes it easier for the user to break.

* Fix misaligned occlusions

At larger screen sizes, the canvas was not increasing above its configured
size, so it ended up being placed top center instead of expanding to fit
the entire container area.

To resolve this, both the image and canvas are forced to the container
size, and the container is constrained to the size of the viewport,
with the same aspect ratio as the image.

Closes #2492
2023-05-23 11:59:50 +10:00
Hikaru Y
d2176ff712
Fix page scrolling when input box loses focus (#2508)
… if page content exceeds viewport.

- Set 'opacity' to 0 instead of setting 'left' to a large negative
  value to create an invisible but focusable button.
- Prevent page from scrolling by setting 'left/top' to the values
  of 'scrollX/scrollY'.
2023-05-22 13:57:39 +10:00
Hikaru Y
2fa63af9c2
Upgrade Svelte (#2506)
* Bump Svelte version

* Ignore Svelte a11y warnings
2023-05-18 17:04:58 +10:00
Damien Elmes
61555fef7d Hack around color setting failure in Qt6.5
Closes #2505
2023-05-18 16:36:16 +10:00
Austin S
eebd143a9f
Fix null error on window resizing (#2501)
* Fix null error on window resizing

* Be more specific in type cast (dae)
2023-05-17 16:52:38 +10:00
Damien Elmes
25cd181c9f Show an error pop-up when csv import screen fails to load
https://forums.ankiweb.net/t/windows-10-2-1-62-qt6-blank-import-window/30231
2023-05-15 15:32:38 +10:00
Damien Elmes
6f650dd7df Add some missing tooltips
https://forums.ankiweb.net/t/two-editor-buttons-do-not-have-tooltips/30203
2023-05-11 15:10:27 +10:00
Damien Elmes
a7578245d0 Add es2019.string back to tsconfig
Our eslint tests were breaking, as it appears that later years do not
include APIs added in previous years, like trimStart()
2023-05-11 15:10:27 +10:00
Hikaru Y
5f02765bb1
Fix custom font preloading sometimes not working (#2493)
It didn't work if both a reference to an external style sheet and
a description of a custom font are present in a style element.
2023-05-11 14:10:29 +10:00
Hikaru Y
779ca57660
Refactor CSS/image preloading; implement custom font preloading (#2356)
* Refactor CSS preloading

- Rename css.ts to preload.ts
- Rename type/function names
- Automatically remove style/link element on load/error event

* Refactor image preloading

- Reuse template element
- Change timeout value from 100ms to 200ms, as it often takes more than
  100ms to load even a single small image on a low-spec machine
- Refactor preloadAnswerImages():
  - Use 'new Image()' instead of <link rel=preload>
  - Stop calculating images that only appear on the answer side as
    cached images are resolved immediately

* Update tsconfig.json

es2020.string -> String.matchAll()
es2018.regexp -> RegExprMatchArray.groups

* Implement custom font preloading

Font files for some languages such as Chinese and Japanese can be as
large as 20MB, so we set the timeout value to 800ms for font preloading.
2023-05-10 13:26:02 +10:00
Matthias Metelka
dc4a915de1
Prevent skewing of resized images in editor (#2488)
* Unset inline size when shrinking images

to prevent skewing (https://forums.ankiweb.net/t/is-there-a-way-to-prevent-the-squish-skew-of-the-image-in-the-browser-editor/29925)

* Unset inline width/height for all images when shrinking is enabled
2023-05-05 19:16:06 +10:00
Damien Elmes
2e1c3fa335 Avoid firing click event in floatables when user drags the mouse
Alternative approach at fixing #2484
2023-05-01 11:44:24 +10:00
Damien Elmes
bd79a063ca Revert "Prevent MathJax editor from closing unexpectedly when selecting text (#2484)"
This broke mouse selection of dropdowns, as code that set closeOnInsideClick never
got a click signal as the floating area is closed before the click fires.

https://forums.ankiweb.net/t/anki-2-1-62-beta-release-candidate/29302/21

This reverts commit e35a938368.
2023-05-01 11:17:09 +10:00
Hikaru Y
e35a938368
Prevent MathJax editor from closing unexpectedly when selecting text (#2484)
* Prevent MathJax editor from closing unexpectedly when selecting text

* Revert "Prevent MathJax editor from closing unexpectedly when selecting text"

This reverts commit b43d33a6de36d0af38933c6dae8bdd635294effd.

* Prevent floating/overlay element from closing when selecting text

Apply suggestions from code review.

Use a 'mousedown' event instead of a 'click' event so that releasing
the mouse button at the end of a text selection operation when the
pointer is outside a floating/overlay element does not close it.

Co-authored-by: Damien Elmes <dae@users.noreply.github.com>

---------

Co-authored-by: Damien Elmes <dae@users.noreply.github.com>
2023-04-28 11:39:50 +10:00
Mani
47a9db8221
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
2023-04-26 16:01:04 +10:00
Hikaru Y
9123821131
Refactor plain/rich text input toggling code; fix focus loss (#2479)
* Refactor plain/rich text input toggling code; fix focus loss

Fix:
- Issue where field loses focus when plain/rich text input is closed

Refactoring:
- Call refocus() inside the reactive statement in
  Plain/RichTextInput.svelte to eliminate the need for polling
  with requestAnimationFrame
- Introduce 'Flag' class
- Move 'on:toggle' handlers from inline to functions defined in
  the <script> section for better readability

* Improve code clarity based on feedback from code review

- Rename method and add comment to it
- Add 'private' access modifier to property
2023-04-22 16:08:25 +10:00
Damien Elmes
f6486da233
Various tweaks to I/O code (#2478)
* Allow user to select I/O notetype instead of enforcing a specific name

* Display a clearer error when I/O note is missing an image

Opening the card layout screen from "manage notetypes" was showing an
error about the Anki version being too old.

Replacement error is not currently translatable.

* Preserve existing notetype when adding I/O notetype

* Add a 'from clipboard' string

The intention is to use this in the future to allow an image occlusion
to be created from an image on the clipboard.

* Tweak I/O init

- Use union type instead of multiple nullable values
- Pass the notetype id in to initialization

* Fix image insertion in I/O note

- The regex expected double quotes, and we were using single ones
- Image tags don't need to be closed

* Use more consistent naming in image_occlusion.proto

* Tweaks to default I/O notetype

- Show the header on the front side as well (I presume this is what
users expect; if not am happy to revert)
- Don't show comments on card (again, I presume users expect to use
this field to add notes that aren't displayed during review, as they
can use back extra for that)

* Fix sticky footer missing background

Caused by earlier CSS refactoring
2023-04-19 15:30:18 +10:00
RumovZ
e361bb9514
Add emojis for graphs in hourly breakdown tooltip (#2464) 2023-04-17 16:16:10 +10:00
Damien Elmes
bf05fae91e Update to the latest TypeScript version
Required a svelte-preprocess upgrade for compatibility.
2023-04-12 16:42:28 +10:00
Damien Elmes
57d2e6bd5e Remove some dead code and an invalid import from types.ts 2023-04-12 16:36:15 +10:00
Hikaru Y
b5fa47e307
Fix MathJax editor sometimes not properly sized / getting cut off (#2467)
* Fix MathJax editor sometimes not properly sized

Also fix an issue where when 'Reduce motion' is enabled, a popover
appears momentarily out of position and then shifts to the correct
position.

* Fix MathJax editor sometimes getting cut off

* Change max-width of MathJax editor
2023-04-12 09:43:57 +10:00
Damien Elmes
d9624819e9 Add a fully-random review order
https://forums.ankiweb.net/t/bug-the-random-option-in-the-review-sort-order-setting-is-not-truly-random/29199
2023-04-11 16:16:45 +10:00
Damien Elmes
f05e5b448d Fix yarn.sh failing with linked out folder 2023-03-31 13:08:59 +10:00
Mani
2bf134dc72
Feature image occlusion (#2367)
* add note types with occlusions and image fields

* generate image occlusion cloze div data
- generate div element with data-* atrributes for canvas shape generate for reviewer

* getting image data & deck id and adding notes
the implementation added into backend
- added service index in backend.proto for image occlusion request
- created image_occlusion.proto with required message and service
- implementation in backend for getting image and adding notes, also during editing return imagecloze note and update notes
- add notes to selected deck, if no notetype then add image occlusion notetypes
- reuse notetype from stock notetypes when not exist

* script for generating shapes using canvas api in reviewer
- the flash issues fixed by loading image and using image size to draw canvas, also when image get resized, calculate scale using natural width and canvas width to draw shape at right position
- limit size of canvas for safari

* init image occlusion page in ts and build page
with
- fabricjs for editing shapes
- panzoom for drag and zoom
- pickr for color picker
- build page using web.rs

* implement top toolbar for canvas shapes
- undo & redo tools
- zoom in, zoom out and zoom fit
- group & ungroup
- copy & paste
- set transparency of shapes
- align tools

* implement side toolbar for drawing shapes
add top toolbar and the side toolbar contains following tools
- cursor for selecting shapes
- zoom for drag and zoom shapes in mask editor
- rectangle for creating it
- ellipse for creating it
- polygon for creating it using points
- shape fill color
- question mask color (currently only single color can be added for all shapes)

* add maskeditor page for editing mask
- add side toolbar and sidebar include toptoolbar
- load maskeditor in two mode
     - for adding note using path to image
     - for editing note using note id

* implement note editor page for adding notes
- the note editor page have simple button (B/I/U) and option to toggle html view
- option to select deck for adding notes into that deck
- option to generate to hide all, guess one & hide one, guess one notes

* add image occlusion page
add side toolbar, top toolbar, mask editor and note editor
- option to switch between mask editor and note editor

* implement generates notes and save notes
implemention to show toast components for messages

* removed pickr & implemented color picker component
- remove pickr
- implemented using html5 canvas
- range input for changing color
- another range input for opacity changes
- hex and rgba value support

* rename methods name & rust unwrap safety
- change plural names to singular
- create respone message in proto and return response with imagecloze note or error if not found with note id
- remove image_occlusion from post handler list
- rename service name in mediasrv.py
- rename methods name for image occlusion in backend and image_occlusion
- update frontend also for update functions' names
- handle error in frontend mask-editor.ts, when error getting notes then toast message shown to frontend

* extract to function & add comments & remove global
- extract function in mask-editor.ts to reduce duplicate
- remove unused global from css
- add comments to store.ts explaining usage
- changes id to noteId in lib.ts
- add comments for limitSize, becuase of duplicate implementation

* remove image_occlusion notetype
- remove from stock notetype, stdmodels
- add implementation for notetype to image occlusion
- add i18n for errors

* update smooth scroll, always show cursor tools
- change questionmask to qmask
- make selectable for shape true in all tools to simplify edits and draw shapes
- update image occlusion in reviewer ts to load image properly

* add and get notetype else return errors

* fix: not showing occlusion

* Use a oneof for ImageClozeNoteResponse

Makes it clearer that only one of them can be returned

* Don't crash if image filename not provided

The second unwrap should be ok, as the input is utf8

* Refactor get_image_cloze_note

- fixes crash when note doesn't exist - Ok(None) case was not covered
- decouples business logic from native error->proto error conversion
- no need for original copy
- field[x] is more idiomatic than field.get(x).unwrap()
- don't need mutable access to fields

* Fix crash if image file unreadable

+ Use our read_file helper for better error context

* Add metadata() helper

* Fix crash if file metadata can't be read

* remove color picker, qmask and shape color
- remove strings from ftl
- remove color picker component
- remove from cloze generation
- remove icons for two buttons
- use constant color for shapes

* update color in reviewer and ftl strings

* fix shape position in canvas & add border to shape
- rename mask to inactive shape and active shape color
- border witdth and border color
- change decimal point deserializing string and toFixed(2)
- add thin border in mask editor, may be image background was transparent

* fix shape position in canvas after modified
- do not draw fixed ratio shapes by turn of uniformScaling
- fix rectangle width,height
- fix ellipse rx,ry,width,height
- fix polygon postion and points
- draw outside of canvas also

* fix border width and color in reviewer canvas
- rename variable

* refactor cloze div generate and remove angle

* fix origin when drawn outside of canvas from right

* fix shape at boundry & not include rx,ry rectangle
- move shapes at boundry when pointer is outside of canvas
- include rx, ry for ellipse only
- include points for polygon only

* fix lint errors & update image size in editor canvas based on height and width

* remove unsupported layerX & layerX for touchscreen
- fix shapes at edges

* implemented undo redo with canvas state

- implemented undo redo using fabric canvas events
- polygon is special case and implemented only added and modified event
- rectangle and ellipse have object:added, object:modified and object:removed case
- change id to undo and redo

* remove background image from canvas and used css to put image tag below canvas editor

- set image width and height after adding image

* fix for polygon points, add br in cloze strings, & toogle masks button

- fix shapes at edges
- toggle masks button to show/hide masks
- hide clozes string, it contains <br>
- set height for div container (used 'relative' in css)

* refactor top toolbar, add space and border radius
- rename cursor tools
- add left and right border

* fix undo after undo happen, use transparent color in draw mode
2023-03-29 12:33:19 +10:00
Kieran Black
fe591f6be7
fix stats calendar incorrect due to daylight savings time (#2456)
* fix stats calendar daylight saving time offset bug

Previously, when computing counts for the calendar in the stats menu, it was assumed that days had 86,400 seconds. However, this assumption does not hold true on the day when daylight savings occurs.

* add self to CONTRIBUTORS and about.py

* fix stats calendar anki day to calendar day mapping

Since Anki days don't necessarily roll over at midnight, mapping an Anki day into a calendar day needs to have a linear shift applied. By providing the frontend with access to the scheduler's rollover hour, we can account for this offset.
2023-03-28 15:35:06 +10:00
Hikaru Y
0e0436f850
Allow Shift+Tab to move focus from tag area to last field (#2458) 2023-03-28 14:13:21 +10:00
Fabricio Duarte
bbaa6c24ec
Prevent the sticky from hiding in the stats page (#2457)
* Prevent the sticky from hiding in the stats page

* Replace height:auto with height:initial in the import CSV page

To match with the other pages (deck options and graphs), making it easier to possibly simplify the CSS code in the future. Doesn't really cause any changes.
2023-03-26 15:23:50 +10:00
RumovZ
20072c566d
Fix new ignore review limit help (#2452) 2023-03-22 15:48:47 +10:00
Hikaru Y
146bed12d9
Fix current tag text not committed when changing note via shortcut key (#2441) 2023-03-16 16:48:29 +10:00
Fabricio Duarte
5774e5d4af
Fix tags popover becoming separated from the tags field (#2442) 2023-03-16 16:46:44 +10:00
RumovZ
bd88c6d352
Ensure state mutator runs after card is rendered (#2421)
* Ensure state mutator runs after card is rendered

* Ensure ease buttons only show when states are ready

* Pass context into states mutator

* Revert queuing of state mutator hook

Now that context data is exposed users shouldn't rely on the question
having been rendered anymore.

* Use callbacks instead of signals and timeout

... to track whether the states mutator ran or failed.

* Make mutator async

* Remove State enum

* Reduce requests and compute seed on backend
2023-03-16 16:31:00 +10:00
RumovZ
f9126927b1
Check URLs in TS code (#2436)
* Move help page URLs in ts to new file

* Unnest linkchecker test module

* Check TS help pages

* Add a comment (dae)
2023-03-15 15:46:03 +10:00
RumovZ
c4d5eeb7a3
Revert bury restriction (#2432)
* Remove outdated comment.

* Revert removal of independent bury rules

* Revert 'hierarchical bury modes'

It's now again allowed to bury new, but not review cards e.g., but
siblings of previously gathered card queues will not be buried.

* Tweak docs (dae)

* Add missing Learn and PreviewRepeat queues
2023-03-11 17:49:18 +10:00
yellowjello
9b5148185a
Make search in stats page trigger onChange (#2428) 2023-03-11 16:07:49 +10:00
Hikaru Y
a32c7a8e63
Fix CodeMirror not properly sized when opening editor (#2426)
* Revert "Fix open editors getting carried over to different notetypes (#2393)"

This reverts commit bf5bcd3f52.

* Fix CodeMirror not properly sized when opening editor

If the initial value of a tweened store is 'undefined' or 'null', the
first value change will take effect immediately. Therefore, by setting
the initial value of 'size' to 'undefined', 'collpased' will be set to
'false' with no transition time if 'false' is passed to 'collapse' prop,
ensuring that CodeMirror is properly sized.
2023-03-08 19:46:50 +10:00
Fabricio Duarte
fd688b5fc0
Improved fix for open editors getting carried to different notetypes (#2422)
* Revert "Fix open editors getting carried over to different notetypes (#2393)"

This reverts commit bf5bcd3f52.

* Improved fix for open editors getting carried over to different notetypes

* Run ninja format
2023-03-08 19:22:02 +10:00
Daniel Tang
688199525c
Fix black on grey deck options on KDE (#2415) 2023-03-06 19:43:04 +10:00
RumovZ
bb297b95bc
Global new ignore review limit (#2417)
* Add CardAdder test helper

* Add option to have new cards ignore the review limit

Also entails a lot of refactoring because the old code was deeply
coupled to the previous behaviour.

* Add global option to ignore review limit

* Refactor decrementation

* Unify testing
2023-03-06 19:06:12 +10:00
Fabricio Duarte
ff58c664d1
Fix double scrollbars in deck options (#2406)
* Fix double scrollbars in deck options

* Remove !important

Future pages may want to override overflow-x (?) and it doesn't seem to change anything for now.

* Allow the body to expand vertically in the import CSV page
2023-02-28 15:57:06 +10:00
Fabricio Duarte
bf5bcd3f52
Fix open editors getting carried over to different notetypes (#2393)
* Fix open editors getting carried over to different notetypes

* Fix first field not getting automatically focused

* Fix collapsibles not transitioning in reduced motion mode

* Fix editor taking a longer time to start when reduced motion is enabled

If we don't transition, the editor actually takes considerably longer to create all the fields.

* Fix fields not collapsing when notetype is loaded
2023-02-27 16:49:48 +10:00
Matthias Metelka
b12476de9a
Simplify NoteEditor by replacing Pane components with Collapsible (#2395)
* Remove Pane components and use Collapsible for TagEditor

* Update translations

* Give TagEditor border and focus outline

* Use ScrollArea from #2248 for fields

* Refactor ScrollArea

* Fix error caused by calling bridgeCommand when it's not available

* Make sure tag editor fills whole width of container

which is important for the CSV import page.

* Update NoteEditor.svelte

* Add back removed ftl strings

* Fix tests (dae)
2023-02-27 16:23:19 +10:00
Matthias Metelka
f604575b41
Adjust lifecycleHooks.setup to allow async callbacks (#2388) 2023-02-22 11:38:58 +10:00
Hikaru Y
09a946574b
Fix type box losing focus when switching IMEs (#2390) 2023-02-22 11:32:16 +10:00
Fabricio Duarte
ec15f1176c
Fix deck options selector not updating the current entry sometimes (#2387) 2023-02-20 22:02:46 +10:00
Hikaru Y
f3b2dbd31f
Partially fix slow editor startup (#2382)
The variable 'collapsed' was initialized with the value 'false' because
the initial value of the store 'size' was 'undefined'. This caused an
instance of CodeMirror to be created at editor startup, regardless of
whether the option 'Use HTML editor by default' was enabled, which
significantly slowed down the startup of the editor, especially when
there were many fields in the notetype.
2023-02-20 18:23:42 +10:00