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); border: 1px solid var(--border);
overflow: auto; overflow: auto;
padding-bottom: 100px; padding-bottom: 100px;
outline: none !important;
} }
:global([dir="rtl"]) .editor-main { :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 { mdiEye, mdiFormatAlignCenter, mdiSquare, mdiViewDashboard } from "./icons";
import { emitChangeSignal } from "./MaskEditor.svelte"; 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 { drawEllipse, drawPolygon, drawRectangle, drawText } from "./tools/index";
import { makeMaskTransparent } from "./tools/lib"; import { makeMaskTransparent } from "./tools/lib";
import { enableSelectable, stopDraw } 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} {@html tool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={tool.shortcut} keyCombination={tool.shortcut}
on:action={() => { on:action={() => {
@ -234,7 +234,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html tool.icon} {@html tool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut keyCombination={tool.shortcut} on:action={tool.action} /> <Shortcut keyCombination={tool.shortcut} on:action={tool.action} />
{/if} {/if}
{/each} {/each}
@ -255,7 +255,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html tool.icon} {@html tool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={tool.shortcut} keyCombination={tool.shortcut}
on:action={() => { on:action={() => {
@ -271,7 +271,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconButton <IconButton
class="top-tool-icon-button left-border-radius" class="top-tool-icon-button left-border-radius"
{iconSize} {iconSize}
tooltip={tr.editingImageOcclusionToggleTranslucent()} tooltip="{tr.editingImageOcclusionToggleTranslucent()} ({getPlatformString(
toggleTranslucentKeyCombination,
)})"
on:click={() => { on:click={() => {
maksOpacity = !maksOpacity; maksOpacity = !maksOpacity;
makeMaskTransparent(canvas, maksOpacity); makeMaskTransparent(canvas, maksOpacity);
@ -279,7 +281,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html mdiEye} {@html mdiEye}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={toggleTranslucentKeyCombination} keyCombination={toggleTranslucentKeyCombination}
on:action={() => { on:action={() => {
@ -303,7 +305,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html tool.icon} {@html tool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={tool.shortcut} keyCombination={tool.shortcut}
on:action={() => { on:action={() => {
@ -331,7 +333,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html tool.icon} {@html tool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={tool.shortcut} keyCombination={tool.shortcut}
on:action={() => { on:action={() => {
@ -370,7 +372,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
> >
{@html alignTool.icon} {@html alignTool.icon}
</IconButton> </IconButton>
{#if $ioMaskEditorVisible} {#if $ioMaskEditorVisible && !$textEditingState}
<Shortcut <Shortcut
keyCombination={alignTool.shortcut} keyCombination={alignTool.shortcut}
on:action={() => { on:action={() => {

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

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

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

@ -19,3 +19,5 @@ export const zoomResetX = writable(0);
export const ioImageLoadedStore = writable(false); export const ioImageLoadedStore = writable(false);
// store opacity state of objects in canvas // store opacity state of objects in canvas
export const opacityStateStore = writable(false); 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 // Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const cursorKeyCombination = "Control+S"; export const cursorKeyCombination = "S";
export const rectangleKeyCombination = "Control+R"; export const rectangleKeyCombination = "R";
export const ellipseKeyCombination = "Control+E"; export const ellipseKeyCombination = "E";
export const polygonKeyCombination = "Control+P"; export const polygonKeyCombination = "P";
export const textKeyCombination = "Control+T"; export const textKeyCombination = "T";
export const magnifyKeyCombination = "Control+M"; export const magnifyKeyCombination = "M";
export const undoKeyCombination = "Control+Z"; export const undoKeyCombination = "Control+Z";
export const redoKeyCombination = "Control+Y"; export const redoKeyCombination = "Control+Y";
export const zoomOutKeyCombination = "Control+-"; export const zoomOutKeyCombination = "[";
export const zoomInKeyCombination = "Control++"; export const zoomInKeyCombination = "]";
export const zoomResetKeyCombination = "Control+F"; export const zoomResetKeyCombination = "F";
export const toggleTranslucentKeyCombination = "Control+O"; export const toggleTranslucentKeyCombination = "L";
export const deleteKeyCombination = "Delete"; export const deleteKeyCombination = "Delete";
export const duplicateKeyCombination = "Control+C"; export const duplicateKeyCombination = "D";
export const groupKeyCombination = "Control+G"; export const groupKeyCombination = "G";
export const ungroupKeyCombination = "Control+U"; export const ungroupKeyCombination = "U";
export const alignLeftKeyCombination = "Control+Shift+L"; export const alignLeftKeyCombination = "Shift+L";
export const alignHorizontalCenterKeyCombination = "Control+Shift+H"; export const alignHorizontalCenterKeyCombination = "Shift+H";
export const alignRightKeyCombination = "Control+Shift+R"; export const alignRightKeyCombination = "Shift+R";
export const alignTopKeyCombination = "Control+Shift+T"; export const alignTopKeyCombination = "Shift+T";
export const alignVerticalCenterKeyCombination = "Control+Shift+V"; export const alignVerticalCenterKeyCombination = "Shift+V";
export const alignBottomKeyCombination = "Control+Shift+B"; 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 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { fabric } from "fabric"; import { fabric } from "fabric";
import { opacityStateStore } from "image-occlusion/store"; import { opacityStateStore, textEditingState } from "image-occlusion/store";
import { get } from "svelte/store"; import { get } from "svelte/store";
import { enableUniformScaling, stopDraw, TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "./lib"; 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.enterEditing();
text.selectAll(); text.selectAll();
}); });
canvas.on("text:editing:entered", function() {
textEditingState.set(true);
});
canvas.on("text:editing:exited", function() {
textEditingState.set(false);
});
}; };