* setup mask editor in note editor
- add image on mask button click (only one time)
- show hide add button for io on notetype change
- hide field in io notetype
- icon for toggle
and replace image
* add update io notes
* Tidy up i/o notetype check and fix error
- Make it a method on editor
- Use .get(), because the setting doesn't exist on older notetypes
- Pass the bool value into the ts code, instead of the enum
* reset io page after adding
* remove adjust function & add target for mask editor
* handle browse mode & merged sidetoolbar and toptoolbar to toolbar
* fix: shape, button click in browse, dropdown menu
* add arrow to add button
* store for handling visiblity of maskeditor
- remove update button in edit mode, implement autoupdate
* update var name
* simplify store
Combined with the previous changes, this allows the mobile clients to
build the web components without having to set up a Python environment,
and should speed up AnkiDroid CI.
Easier to import from, and allows us to declare the output of the build
action without having to iterate over all the proto filenames. Have
confirmed it doesn't break esbuild's tree shaking.
* eslint-plugin-svelte3 -> eslint-plugin-svelte
The former is deprecated, and blocks an update to Svelte 4.
Also drop unused svelte2tsx and types package.
* Drop unused symbols code for now
It may be added back in the future, but for now dropping it will save
200k from our editor bundle.
* Remove sass and caniuse-lite pins
The latter no longer seems to be required. The former was added to
suppress deprecation warnings when compiling the old bootstrap version
we have pinned. Those are hidden by the build tool now (though we really
need to address them at one point: https://github.com/ankitects/anki/issues/1385)
Also removed unused files section.
* Prevent proto compile from looking in node_modules/@types/sass
When deps are updated, tsc aborts because @types/sass is a dummy package
without an index.d.ts file.
* Filter Svelte warnings out of ./run
* Update to latest Bootstrap
This fixes the deprecation warnings we were getting during build:
bootstrap doesn't accept runtime CSS variables being set in Sass, as
it wants to apply transforms to the colors.
Closes#1385
* Start port to Svelte 4
- svelte-check tests have a bunch of failures; ./run works
- Svelte no longer exposes internals, so we can't use create_in_transition
- Also update esbuild and related components like esbuild-svelte
* Fix test failures
Had to add some more a11y warning ignores - have added
https://github.com/ankitects/anki/issues/2564 to address that in the
future.
* Remove some dependency pins
+ Remove sass, we don't need it directly
* Bump remaining JS deps that have a current semver
* Upgrade dprint/license-checker/marked
The new helper method avoids marked printing deprecation warnings to
the console.
Also remove unused lodash/long types, and move lodahs-es to devdeps
* Upgrade eslint and fluent packages
* Update @floating-ui/dom
The only dependencies remaining are currently blocked:
- Jest 29 gives some error about require vs import; may not be worth
investigating if we switch to Deno for the tests
- CodeMirror 6 is a big API change and will need work.
* Roll dprint back to an earlier version
GitHub dropped support for Ubuntu 18 runners, causing dprint's artifacts
to require a glibc version greater than what Anki CI currently has.
* Fix MathJax editor not closing when changing notes via shortcut
Another commit will remove the on:blur handler set for <MathjaxEditor>,
in which case the function will also be called when changing notes with
a mouse click.
* Don't close MathJax editor on blur event
Closing MathJax editor on a blur event caused it to close even when
it should not.
e.g.
- when switching to another application
- when right-clicking to bring up the context menu
- when clicking on the empty space around CodeMirror
* Fix .no-reduce-motion missing from graphs spinner, and not being honored
* Begin migration from protobuf.js -> protobuf-es
Motivation:
- Protobuf-es has a nicer API: messages are represented as classes, and
fields which should exist are not marked as nullable.
- As it uses modules, only the proto messages we actually use get included
in our bundle output. Protobuf.js put everything in a namespace, which
prevented tree-shaking, and made it awkward to access inner messages.
- ./run after touching a proto file drops from about 8s to 6s on my machine. The tradeoff
is slower decoding/encoding (#2043), but that was mainly a concern for the
graphs page, and was unblocked by
37151213cd
Approach/notes:
- We generate the new protobuf-es interface in addition to existing
protobuf.js interface, so we can migrate a module at a time, starting
with the graphs module.
- rslib:proto now generates RPC methods for TS in addition to the Python
interface. The input-arg-unrolling behaviour of the Python generation is
not required here, as we declare the input arg as a PlainMessage<T>, which
marks it as requiring all fields to be provided.
- i64 is represented as bigint in protobuf-es. We were using a patch to
protobuf.js to get it to output Javascript numbers instead of long.js
types, but now that our supported browser versions support bigint, it's
probably worth biting the bullet and migrating to bigint use. Our IDs
fit comfortably within MAX_SAFE_INTEGER, but that may not hold for future
fields we add.
- Oneofs are handled differently in protobuf-es, and are going to need
some refactoring.
Other notable changes:
- Added a --mkdir arg to our build runner, so we can create a dir easily
during the build on Windows.
- Simplified the preference handling code, by wrapping the preferences
in an outer store, instead of a separate store for each individual
preference. This means a change to one preference will trigger a redraw
of all components that depend on the preference store, but the redrawing
is cheap after moving the data processing to Rust, and it makes the code
easier to follow.
- Drop async(Reactive).ts in favour of more explicit handling with await
blocks/updating.
- Renamed add_inputs_to_group() -> add_dependency(), and fixed it not adding
dependencies to parent groups. Renamed add() -> add_action() for clarity.
* Remove a couple of unused proto imports
* Migrate card info
* Migrate congrats, image occlusion, and tag editor
+ Fix imports for multi-word proto files.
* Migrate change-notetype
* Migrate deck options
* Bump target to es2020; simplify ts lib list
Have used caniuse.com to confirm Chromium 77, iOS 14.5 and the Chrome
on Android support the full es2017-es2020 features.
* Migrate import-csv
* Migrate i18n and fix missing output types in .js
* Migrate custom scheduling, and remove protobuf.js
To mostly maintain our old API contract, we make use of protobuf-es's
ability to convert to JSON, which follows the same format as protobuf.js
did. It doesn't cover all case: users who were previously changing the
variant of a type will need to update their code, as assigning to a new
variant no longer automatically removes the old one, which will cause an
error when we try to convert back from JSON. But I suspect the large majority
of users are adjusting the current variant rather than creating a new one,
and this saves us having to write proxy wrappers, so it seems like a
reasonable compromise.
One other change I made at the same time was to rename value->kind for
the oneofs in our custom study protos, as 'value' was easily confused
with the 'case/value' output that protobuf-es has.
With protobuf.js codegen removed, touching a proto file and invoking
./run drops from about 8s to 6s.
This closes#2043.
* Allow tree-shaking on protobuf types
* Display backend error messages in our ts alert()
* Make sourcemap generation opt-in for ts-run
Considerably slows down build, and not used most of the time.
* Fix shortcut not being unregistered when Plain/RichTextBadge is detroyed
This fixes an issue where, if the "Show HTML by default" option of
fields located at the same position in two notetypes have different
values, switching between those notetypes during an editor session
would cause the keyboard shortcut (Ctrl+Shift+X) to no longer function
correctly thereafter.
* Don't restore fields' state if notetype has been modified
This fixes an issue where editor fields behave incorrectly after
opening the 'Fields' dialog and customizing the notetype. An example
of incorrect behavior is that after adding a new field and closing
the dialog, the added field would display both richtext input and
plaintext input, regardless of the options.
* Rename type, variable and function
- Apply suggestions from code review
- Also use optional chaining instead of non-null assertion
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.
* 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
* 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.
* 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
* 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
… 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'.
* 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.
* 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>
* 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
* 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
