* 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
* 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()`
* 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>
* 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>
* Revert "Fix selected shapes shifting to canvas origin"
This reverts commit d81b96fed0adb7db2fb9847c52d7cb73f83b4b32.
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.
* 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
* 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.
* 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
* 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.
