GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: shortcut update and shape corner transparent (#2847)

Browse source 
* fix: shortcut update and shape corner transparent

* no outline when using shortcut
This commit is contained in:
Mani 2023-11-25 14:05:45 +08:00 committed by GitHub
parent 9bdc8d8229
commit 046ae539fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ts/image-occlusion/MaskEditor.svelte
View file

@ -112,6 +112,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
border: 1px solid var(--border);
overflow: auto;
padding-bottom: 100px;
outline: none !important;
}
:global([dir="rtl"]) .editor-main {

20
ts/image-occlusion/Toolbar.svelte
View file

@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { mdiEye, mdiFormatAlignCenter, mdiSquare, mdiViewDashboard } from "./icons";
import { emitChangeSignal } from "./MaskEditor.svelte";
import { hideAllGuessOne, ioMaskEditorVisible } from "./store";
import { hideAllGuessOne, ioMaskEditorVisible, textEditingState } from "./store";
import { drawEllipse, drawPolygon, drawRectangle, drawText } from "./tools/index";
import { makeMaskTransparent } from "./tools/lib";
import { enableSelectable, stopDraw } from "./tools/lib";
@ -173,7 +173,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html tool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={tool.shortcut}
on:action={() => {
@ -234,7 +234,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html tool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut keyCombination={tool.shortcut} on:action={tool.action} />
{/if}
{/each}
@ -255,7 +255,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html tool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={tool.shortcut}
on:action={() => {
@ -271,7 +271,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconButton
class="top-tool-icon-button left-border-radius"
{iconSize}
tooltip={tr.editingImageOcclusionToggleTranslucent()}
tooltip="{tr.editingImageOcclusionToggleTranslucent()} ({getPlatformString(
toggleTranslucentKeyCombination,
)})"
on:click={() => {
maksOpacity = !maksOpacity;
makeMaskTransparent(canvas, maksOpacity);
@ -279,7 +281,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html mdiEye}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={toggleTranslucentKeyCombination}
on:action={() => {
@ -303,7 +305,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html tool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={tool.shortcut}
on:action={() => {
@ -331,7 +333,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html tool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={tool.shortcut}
on:action={() => {
@ -370,7 +372,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>
{@html alignTool.icon}
</IconButton>
{#if $ioMaskEditorVisible}
{#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut
keyCombination={alignTool.shortcut}
on:action={() => {

1
ts/image-occlusion/mask-editor.ts
View file

@ -115,6 +115,7 @@ function initCanvas(onChange: () => void): fabric.Canvas {
// disable rotation globally
delete fabric.Object.prototype.controls.mtr;
// add a border to corner to handle blend of control
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerStyle = "circle";
fabric.Object.prototype.cornerStrokeColor = "#000000";
moveShapeToCanvasBoundaries(canvas);

2
ts/image-occlusion/store.ts
View file

@ -19,3 +19,5 @@ export const zoomResetX = writable(0);
export const ioImageLoadedStore = writable(false);
// store opacity state of objects in canvas
export const opacityStateStore = writable(false);
// store state of text editing
export const textEditingState = writable(false);

38
ts/image-occlusion/tools/shortcuts.ts
View file

@ -1,25 +1,25 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const cursorKeyCombination = "Control+S";
export const rectangleKeyCombination = "Control+R";
export const ellipseKeyCombination = "Control+E";
export const polygonKeyCombination = "Control+P";
export const textKeyCombination = "Control+T";
export const magnifyKeyCombination = "Control+M";
export const cursorKeyCombination = "S";
export const rectangleKeyCombination = "R";
export const ellipseKeyCombination = "E";
export const polygonKeyCombination = "P";
export const textKeyCombination = "T";
export const magnifyKeyCombination = "M";
export const undoKeyCombination = "Control+Z";
export const redoKeyCombination = "Control+Y";
export const zoomOutKeyCombination = "Control+-";
export const zoomInKeyCombination = "Control++";
export const zoomResetKeyCombination = "Control+F";
export const toggleTranslucentKeyCombination = "Control+O";
export const zoomOutKeyCombination = "[";
export const zoomInKeyCombination = "]";
export const zoomResetKeyCombination = "F";
export const toggleTranslucentKeyCombination = "L";
export const deleteKeyCombination = "Delete";
export const duplicateKeyCombination = "Control+C";
export const groupKeyCombination = "Control+G";
export const ungroupKeyCombination = "Control+U";
export const alignLeftKeyCombination = "Control+Shift+L";
export const alignHorizontalCenterKeyCombination = "Control+Shift+H";
export const alignRightKeyCombination = "Control+Shift+R";
export const alignTopKeyCombination = "Control+Shift+T";
export const alignVerticalCenterKeyCombination = "Control+Shift+V";
export const alignBottomKeyCombination = "Control+Shift+B";
export const duplicateKeyCombination = "D";
export const groupKeyCombination = "G";
export const ungroupKeyCombination = "U";
export const alignLeftKeyCombination = "Shift+L";
export const alignHorizontalCenterKeyCombination = "Shift+H";
export const alignRightKeyCombination = "Shift+R";
export const alignTopKeyCombination = "Shift+T";
export const alignVerticalCenterKeyCombination = "Shift+V";
export const alignBottomKeyCombination = "Shift+B";

10
ts/image-occlusion/tools/tool-text.ts
View file

@ -2,7 +2,7 @@
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { fabric } from "fabric";
import { opacityStateStore } from "image-occlusion/store";
import { opacityStateStore, textEditingState } from "image-occlusion/store";
import { get } from "svelte/store";
import { enableUniformScaling, stopDraw, TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "./lib";
@ -38,4 +38,12 @@ export const drawText = (canvas: fabric.Canvas): void => {
text.enterEditing();
text.selectAll();
});
canvas.on("text:editing:entered", function() {
textEditingState.set(true);
});
canvas.on("text:editing:exited", function() {
textEditingState.set(false);
});
};