Commit graph

57 commits

Author SHA1 Message Date
Damien Elmes
9f55cf26fc
Switch to SvelteKit (#3077)
* Update to latest Node LTS

* Add sveltekit

* Split tslib into separate @generated and @tslib components

SvelteKit's path aliases don't support multiple locations, so our old
approach of using @tslib to refer to both ts/lib and out/ts/lib will no
longer work. Instead, all generated sources and their includes are
placed in a separate out/ts/generated folder, and imported via @generated
instead. This also allows us to generate .ts files, instead of needing
to output separate .d.ts and .js files.

* Switch package.json to module type

* Avoid usage of baseUrl

Incompatible with SvelteKit

* Move sass into ts; use relative links

SvelteKit's default sass support doesn't allow overriding loadPaths

* jest->vitest, graphs example working with yarn dev

* most pages working in dev mode

* Some fixes after rebasing

* Fix/silence some svelte-check errors

* Get image-occlusion working with Fabric types

* Post-rebase lock changes

* Editor is now checked

* SvelteKit build integrated into ninja

* Use the new SvelteKit entrypoint for pages like congrats/deck options/etc

* Run eslint once for ts/**; fix some tests

* Fix a bunch of issues introduced when rebasing over latest main

* Run eslint fix

* Fix remaining eslint+pylint issues; tests now all pass

* Fix some issues with a clean build

* Latest bufbuild no longer requires @__PURE__ hack

* Add a few missed dependencies

* Add yarn.bat to fix Windows build

* Fix pages failing to show when ANKI_API_PORT not defined

* Fix svelte-check and vitest on Windows

* Set node path in ./yarn

* Move svelte-kit output to ts/.svelte-kit

Sadly, I couldn't figure out a way to store it in out/ if out/ is
a symlink, as it breaks module resolution when SvelteKit is run.

* Allow HMR inside Anki

* Skip SvelteKit build when HMR is defined

* Fix some post-rebase issues

I should have done a normal merge instead.
2024-03-31 09:16:31 +01:00
Mani
f413274fba
better pan zoom with space for drag, shift for horizontal scroll and ctrl for zoom (#3080)
* more better pan zoom with space for drag, shift for horizontal scroll and ctrl for zoom

* use middle mouse button for drag

* improve panning with space + mousemove, remove middle mouse implementation

* handle tool change after mouseup event
2024-03-18 14:26:41 +00:00
Mani
5eafd82521
fix: ensure proper drawing of shape tools after pan/zoom (#3066)
* fix: ensure proper drawing of shape tools after pan/zoom

* remove sticky bottom toolbar

* make bounding-box not selectable after undo/redo

* fix: resize issue, added option to pan using alt/shift + mouse wheel

* drag with touchpad

* use isDesktop and move globalThis to index.ts

* gesture event not required, use preventDefault with passive false in wheel event

* use shift in mac and ctrl in pc
2024-03-16 14:05:51 +07:00
Mani
ea8f0c1491
fix: blur in io, remove panzoom and use fabricjs for panzoom (#3052)
* fix: blur in io, remove panzoom and use fabricjs for panzoom
- remove panzoom
- implement panzoom using fabricjs
- set background image for canvas
- add bounding rect for canvas
- draw or add point inside in bounding rect
- update zoom tool

* support pinch to zoom on mobile client

* fix lagging of canvas, zoom in draw mode

* panning in touch events
2024-03-09 10:35:23 +00:00
Abdo
0018f126ea
Fix misaligned image occlusions in RTL languages (#3018) 2024-02-22 11:10:36 +07:00
Abdo
80c14aa6e9
Maintain original IO cloze order in editing mode (#2987)
* Maintain original IO cloze order in editing mode

* Fix ordinal propery name
2024-02-07 13:42:47 +10:00
Mani
ec3698502b
add select all tool (#2981)
Co-authored-by: Damien Elmes <dae@users.noreply.github.com>
2024-01-30 15:43:15 +10:00
Pedro Lameiras
5849fc6f64
Make image occlusion's option buttons tabbable (#2966)
* Make image occlusion's option buttons tabbable

* Added myself to contributors

* Removed two-way binding
2024-01-29 12:49:28 +10:00
Abdo
cc81db0f9d
Fix undo handling of group and some other IO tools (#2931)
* Fix undo handling of group and some other IO tools

* Emit change signal inside onObjectModified

* Fix group lost after moving group then undoing

* Skip undo entry if canvas has not changed

The onObjectModified() call I added in a previous commit to deleteDuplicateTools results in a duplicate undo entry for the delete tool. Checking for duplicate entries seems simpler than having to think about where onObjectModified() should be called exactly

* Fix extra undo entry added after ungroup
2024-01-09 11:19:46 +10:00
Mani
ddabbddeb1
add padding to control corner to shapes (#2919) 2024-01-01 14:08:24 +10:00
Mani
6608baa9da
fix: enable keyboard in mobile io note editor (#2916) 2023-12-28 18:00:07 +10:00
Damien Elmes
9b00425209 Hack around overflow in some languages
The problem at the moment is that the two left buttons are not part
of the scrollable area on the right, and the scrollable area has been
manually positioned. We would need to move the buttons into the toolbar
area, and then hide them when using the desktop editor. For now, I've
just added wrapping/smaller text instead.

https://forums.ankiweb.net/t/image-occlusion-editor-buttons-overlap-in-some-languages/38499
2023-12-18 13:34:05 +10:00
Damien Elmes
1ec769f1ae Fix some issues with toggle mask shortcut
- We were registered another event handler for each card, which was a
resource leak, and would lead to the shortcut failing on every second card
due to the even number of toggles.
- We were allowing toggleMasks() to run even when the button wasn't visible
(e.g., when showing the question side of a card)
2023-12-11 14:02:19 +10:00
Abdo
6f3550464d
Fix IO note count (#2884) 2023-12-10 12:55:47 +10:00
Abdo
548aca5b4f
Persist mask group scaling (#2878)
* Persist mask group scaling

Handles the first issue in #2876

* Fix selection resizing
2023-12-10 10:02:47 +10:00
Mani
046ae539fb
fix: shortcut update and shape corner transparent (#2847)
* fix: shortcut update and shape corner transparent

* no outline when using shortcut
2023-11-25 16:05:45 +10:00
Mani
be1f889211
fixes: remove unfinished shapes, remove selectable and make shapes remain inside canvas (#2809)
* remove unfinished polygon and remove selectable for shapes in polygon mode

* make group and polygon position remain inside canvas area

* click through transparent area in grouped object

* add some shortcuts for basic usages

* tools button icon in center & switch mode border

* fix load svg image

* basic rtl support, panzoom have issues in rtl mode

* better zoom option both in ltr and rtl

* handle zoom event in mask editor

* add h button to handle toggle mask

* add more mime type

* use capital M (shift+m) for toggle mask

* allow io shortcuts in mask editor only

* make other shapes also remain in canvas bound area

* better zoom implementation, zoom from center
add zoom to resize event listener

* add a border to corner to handle blend of control

* add refresh button to go to  selection menu

* add tooltip to shortcuts and also add shortcut for other tools

* make opacity remain in same state when toggled on

* opacity for group/ungroup objects

* update shortcuts implementation
2023-11-24 14:06:40 +10:00
Hikaru Y
8de5cf9690
Fix misalignment of IO masks in Qt5 when image is vertically long (#2829)
* Revert "Fix I/O not showing in Qt5"

This reverts commit c478689e5a.

* Fix misalignment of IO masks in Qt5 when image is vertically long

Also, as in Qt6, constrain the IO image to fit in the viewport.
2023-11-16 10:30:54 +10:00
snowtimeglass
b3da6f117b
Change tooltip strings for image occlusion center alignments (#2815)
- Fix the swapping of the strings

- Change the strings to make the meanings clearer

- Incidentally, add a name to CONTRIBUTORS
2023-11-09 12:02:51 +10:00
Abdo
d491622414
Hide "toggle masks" in "Hide One, Guess One" mode (#2817) 2023-11-09 09:59:01 +10:00
Damien Elmes
0cd0ad9b07 Start editing text immediately after adding text node
Closes #2781
2023-10-28 10:25:56 +10:00
Damien Elmes
6a0b96d7ea Fix I/O failing to load if image takes too longer 2023-10-28 07:59:06 +10:00
Damien Elmes
22736238c1 Disable rotation globally
As described on https://github.com/fabricjs/fabric.js/issues/6420#issuecomment-650747872

Fixes rotation marker appearing when selecting, and when ungrouping
2023-10-25 09:23:47 +10:00
Hikaru Y
252addf611
Fix shape selection malfunction after creating shapes in succession (#2773)
* Fix shape selection malfunction after creating shapes in succession

* Disable rotation when duplicating a shape
2023-10-25 09:02:44 +10:00
Abdo
0736cdb29c
Fix scaling of text objects (#2767)
* Fix scaling of text objects

* Do not transform scale factors
2023-10-25 08:47:54 +10:00
Damien Elmes
aab81f9f9a Add tooltips for image occlusions
Closes #2768
2023-10-23 12:03:22 +10:00
Aristotelis
8e828f2955
Allow disabling occlusion mask border (#2764)
* Allow setting occlusion mask border to zero

* Switch to multi-line if statements

cf. 9740393d72

* Enforce if statement braces in dprint

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-23 11:43:37 +10:00
Abdo
14940a617b
Fix IO groups breaking upon editing (#2766)
* Fix IO groups breaking upon editing

* Emit change signal after group/ungroup
2023-10-23 09:43:31 +10:00
Damien Elmes
9740393d72 Enforce curly bracket usage for one-statement ifs 2023-10-23 09:19:49 +10:00
Hikaru Y
a53806e24a
Indicate current occlusion type in pop-up menu (#2760)
* Simplify handling of occlusion types in editor code

- Unify updateIONoteInEditMode(), setOcclusionFieldInner() and
setOcclusionField() into updateOcclusionsField()
- Don't use `includeInactive` property of Shape class in editor code
- Drop `isEditMode`

+
Update the occlusions field every time a mask or text is updated, not
only in editing mode but also in adding mode, so that IO cards can be
previewed correctly in the card layout screen

* Indicate current occlusion type in pop-up menu

https://forums.ankiweb.net/t/anki-23-10-beta-5-6/35677/46

* Fix a11y warnings in Toolbar.svelte

* Drop `occludeInactive` parameter from `MaskEditorAPI.getShapes()`
2023-10-23 09:12:56 +10:00
Hikaru Y
f8edbcc686
Fix modified polygon not being saved when editing IO note (#2762) 2023-10-22 10:51:45 +10:00
Aristotelis
56f7d54900
Add APIs for IO mask editing (#2758)
* Add simple mask editor add-on API

* Signal completed mask editor image loading to Python

* Add API methods for querying mask editor state, fix formatting

* Use event forwarding to propagate image loaded event

Should fix mobile support by moving all bridgeCommand calls to `NoteEditor.svelte`

* Add shape classes to mask editor API

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-22 10:40:40 +10:00
Abdo
8e1105144a
Commit addition of IO shapes immediately (#2750) 2023-10-20 09:38:03 +10:00
Aristotelis
c828a2eb6f
Add APIs for IO card rendering (#2739)
* Refactor: Add index to shapes package

* Add shape draw callback API to setupImageCloze

* Expose IO drawing API, switch away from image cloze naming

We currently use "image occlusion" in most places, but some references to "image cloze" still remain. For consistency's sake and to make it easier to quickly find IO-related code, this commit replaces all remaining references to "image cloze", only maintaining those required for backwards compatibility with existing note types.

* Add cloze ordinal to shapes

* Do not mutate original shapes during (de)normalization

Mutating shapes would be a recipe for trouble when combined with IO API use by external consumers.

(makeNormal(makeAbsolute(makeNormal())) is not idempotent,
and keeping track of the original state would introduce
additional complexity with no discernible performance benefit
or otherwise.)

* Tweak IO API, allowing modifications to ShapeProperties

* Tweak drawShape parameters

* Switch method order

For consistency with previous implementation

* Run Rust formatters

* Simplify position (de)normalization

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-20 09:36:46 +10:00
Hikaru Y
bea4307d78
Another approach to preventing selected shapes from shifting (#2735)
* Revert "Fix selected shapes shifting to canvas origin"

This reverts commit d81b96fed0.

This introduced a regression where the selection of objects was cleared
when it should not have been. For example, if multiple objects were
selected and the mouse was released while moving them around, the
selection would be cleared.

* Another approach to preventing selected shapes from shifting

Prevent fabric objects from shifting to the wrong position when the
active selection contains multiple objects by calculating their
coordinates relative to the canvas, as in the case of the fabric.Group.
2023-10-15 10:11:23 +10:00
Hikaru Y
7cf19ea213
Fix selected shapes shifting to canvas origin (#2729)
* Fix selected shapes shifting to canvas origin

* Make only newly added shape selected even if it...

... overlaps with another
2023-10-13 09:58:43 +10:00
Aristotelis
a7e5d2a663
Change IO text background color to white (#2726)
Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-13 08:49:31 +10:00
Abdo
9e147c6335
Add text tool to image occlusion (#2705)
* Add text tool to IO

* Remove unnecessary parentheses

* Fix text objects always grouped

* Remove log

* Fix text objects hidden on back side

* Implement text scaling

* Add inverse text outline

* Warn about IO notes with only text objects

This will result in a different error message than the case where no
objects are added at all though, and the user can bypass the warning.
Maybe this is better to avoid discarding the user's work if they have
spent some time adding text.

* Add isValidType

* Use matches!

* Lock aspect ratio of text objects

* Reword misleading comment

The confusion probably comes from the Fabric docs, which apparently need updating: http://fabricjs.com/docs/fabric.Canvas.html#uniformScaling

* Do not count text objects when calculating current index

* Make text objects respond to size changes

* Fix uniform scaling not working when editing

* Use Arial font

* Escape colons and unify parsing

* Handle scale factor when restricting shape to view

* Use 'cloned'

* Add text background

* Tweak drawShape's params
2023-10-12 13:40:11 +10:00
Hikaru Y
b3f6edc323
Fix polygon tool not working (#2712)
* Fix polygon not converting correctly to cloze

* Fix first polygon disappearing when creating se...

...cond one during editing

Previously, a fabric object was passed directly to a `Shape` such as
`Rectangle` or `Polygon`, so mutating a non-primitive property of the
shape would lead to mutating the original fabric object as well.

* Commit addition of polygon immediately

Unlike the rect or ellipse tools, when the polygon tool was active,
clicking on the canvas did not fire the `object:removed` event and the
`change` event was not dispatched. As a result, an addition of a polygon
was not saved to the DB when switching to another note or closing the
editor in edit mode without performing an action that dispatched the
`change` event.
2023-10-10 13:51:35 +10:00
Aristotelis
4cd12ccd28
Refactor IO image pickers into separate component (#2710)
* Refactor IO image pickers into separate component

* Adjust import path

* Move styles to component and tweak class names

* Remove unused import

---------

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
2023-10-10 13:26:20 +10:00
Abdo
bccc5b0995
Fix wrong mask position after merging groups (#2682) 2023-09-26 13:14:13 +10:00
Damien Elmes
91538518b3 Fix "Add" button showing when editing I/O note; hide toast 2023-09-19 14:19:51 +10:00
Damien Elmes
170ab60a52 Remove the separate chevron in all/one selector 2023-09-17 11:51:48 +10:00
Damien Elmes
d441680984 Remove select image button in I/O
Closes #2620
2023-09-17 11:51:48 +10:00
Hikaru Y
3742fa9f0c
Fix some issues with undo/redo in mask editor (#2649)
Issues:
- The `change` event was not dispatched in MaskEditor.svelte when an
undo/redo was performed. Therefore, if the user then closed the editor
or switched to another note without performing an operation that would
cause the `change` event to be dispatched, the undone or redone changes
were not saved to DB.
- When `IOMode.kind === "edit"` (i.e., Edit Current or Browse), the
beginning of the undo history was a blank canvas, not a canvas with
existing masks. Therefore, if you continued to undo to the beginning of
the history, the masks that existed when you opened the editor would be
lost, and they would not be restored even when you performed a redo.
- In the 'Add' dialog, the undo history was not reset when starting to
create a new IO note after adding an IO note.

Also add a small UI improvement:
The undo/redo buttons are now disabled when there is no action to
undo/redo.
2023-09-10 13:26:41 +10:00
Mani
87e2cf7976
fix: reset image button in io note editor (#2602) 2023-08-16 07:47:46 +10:00
Mani
b9da61f993
follow-up pr for io button in note editor (#2600)
* follow-up pr for io button in note editor

* Expose change event in Svelte instead of relying on timeout (dae)
2023-07-31 14:24:26 +10:00
Mani
135de7f9ed
image occlusion button in note editor (#2485)
* 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
2023-07-27 22:45:49 +10:00
Damien Elmes
f3b6deefe9 Combine all backend methods into a single js/d.ts file, like in Python
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.
2023-07-03 13:46:38 +10:00
Damien Elmes
62c7cdc543 Add scss formatter 2023-07-03 09:44:38 +10:00