From 61d27e5e3b499602dac2d6a5975beaf4cb1562d0 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Wed, 7 Sep 2022 13:18:31 +0200
Subject: [PATCH] - Text changes (Text selection when new; Enter ends edit
(with shift we can add newline; Ctrl-A selection fix) - Design changes
(PositionPoint smaller; Line Width wider; Text size bigger)
---
src/lib/config/design.ts | 2 +-
src/lib/elements/basics/Text.ts | 19 +++++++++-
src/lib/elements/connections/Line.ts | 2 +-
src/lib/elements/primitives/TextPrimitive.ts | 18 +++++++---
src/lib/interactions/WriteInteraction.ts | 38 ++++++++++++--------
5 files changed, 57 insertions(+), 22 deletions(-)
diff --git a/src/lib/config/design.ts b/src/lib/config/design.ts
index 12ce70de..5dfa7564 100644
--- a/src/lib/config/design.ts
+++ b/src/lib/config/design.ts
@@ -182,7 +182,7 @@ export const Design = {
radiusAspect: 5,
buttonSizeAspect: 24,
buttonTextAspect: 2.2,
- radius: 3,
+ radius: 2,
radiusSelected: 2,
lineRectangleZIndex: 9000,
lineRectangleWidth: 4,
diff --git a/src/lib/elements/basics/Text.ts b/src/lib/elements/basics/Text.ts
index 1bd61baa..99e67690 100644
--- a/src/lib/elements/basics/Text.ts
+++ b/src/lib/elements/basics/Text.ts
@@ -2,7 +2,6 @@ import * as PIXI from "pixi.js-legacy";
import * as MedsurfDraw from "../../public-api";
import {Design} from "../../config/design";
import {BaseText, BaseTextModel} from "../../bases/elements/BaseText";
-import {debounce} from "debounce";
/**
* Text model
@@ -55,6 +54,7 @@ export class Text extends BaseText<TextModel> {
// -- Write interaction
this.writeInteraction = new MedsurfDraw.WriteInteraction(this);
this.writeInteraction.on("onText", this.onText, this);
+ this.writeInteraction.on("endText", this.endText, this);
//</editor-fold>
}
@@ -88,6 +88,7 @@ export class Text extends BaseText<TextModel> {
// -- Write interaction
if (this.writeInteraction) {
this.writeInteraction.off("onText", this.onText, this);
+ this.writeInteraction.off("endText", this.endText, this);
// TODO remove delete this.writeInteraction;
}
//</editor-fold>
@@ -182,6 +183,15 @@ export class Text extends BaseText<TextModel> {
}
//</editor-fold>
+ //<editor-fold desc="Public function">
+ /**
+ * Select all text
+ */
+ public selectAllText(): void {
+ this.writeInteraction.selectAllText();
+ }
+ //</editor-fold>
+
//<editor-fold desc="Text">
/**
* On text
@@ -190,6 +200,13 @@ export class Text extends BaseText<TextModel> {
public onText(text: string): void {
this.emit("onText", text);
}
+
+ /**
+ * End text
+ */
+ public endText(): void {
+ this.emit("endText");
+ }
//</editor-fold>
//<editor-fold desc="ImageZoom">
diff --git a/src/lib/elements/connections/Line.ts b/src/lib/elements/connections/Line.ts
index 893ddb8c..6adcbe79 100644
--- a/src/lib/elements/connections/Line.ts
+++ b/src/lib/elements/connections/Line.ts
@@ -588,7 +588,7 @@ export class Line extends BaseElementContainer<Models.Line, BaseElementContainer
end: endPositionPoint,
isBezier: bezierCourve,
interactWithLines: true,
- strokeWidth: 1 / imageWidth,
+ strokeWidth: 4 / imageWidth,
options: {
hasLine: true,
lineColor: 0xffffff,
diff --git a/src/lib/elements/primitives/TextPrimitive.ts b/src/lib/elements/primitives/TextPrimitive.ts
index 717e66d6..67be8def 100644
--- a/src/lib/elements/primitives/TextPrimitive.ts
+++ b/src/lib/elements/primitives/TextPrimitive.ts
@@ -171,6 +171,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
style: new PIXI.TextStyle(style)
});
this._textElement.on("onText", this.onText, this);
+ this._textElement.on("endText", this.endText, this);
this.addChild(this._textElement);
//</editor-fold>
@@ -379,6 +380,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// -- Text element
if (this._textElement) {
this._textElement.off("onText", this.onText, this);
+ this._textElement.off("endText", this.endText, this);
this._textElement.destroy(options);
}
//</editor-fold>
@@ -467,7 +469,7 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
},
style: {
fill: 0x000000,
- fontSize: 12 / imageWidth,
+ fontSize: 32 / imageWidth,
fontFamily: "proxima_nova_altsemibold",
align: 'left',
breakWords: false,
@@ -481,8 +483,8 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
* Edit new text
*/
public editNewText(): void {
- // Reset text
- this._textElement.text = '';
+ // Select all text
+ this._textElement.selectAllText();
// Edit Text
this.editText();
@@ -1055,8 +1057,6 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Emits
this.getImage().editPrimitive(this.model);
-
- // TODO remove this.editText();
}
//</editor-fold>
//<editor-fold desc="Layer">
@@ -1429,6 +1429,14 @@ export class TextPrimitive extends BaseElementContainer<Models.TextPrimitive, Ba
// Emit on background text
this.emit("onBackgroundText");
}
+
+ /**
+ * End text
+ */
+ public endText(): void {
+ // Select item
+ this.controlSelectItem();
+ }
//</editor-fold>
//<editor-fold desc="Background rectangle">
public onButtonAddBackgroundRectangle(): void {
diff --git a/src/lib/interactions/WriteInteraction.ts b/src/lib/interactions/WriteInteraction.ts
index 02745ed0..4aecd5a0 100644
--- a/src/lib/interactions/WriteInteraction.ts
+++ b/src/lib/interactions/WriteInteraction.ts
@@ -64,16 +64,20 @@ export class WriteInteraction<TElement extends MedsurfDraw.Text> extends BaseEle
return;
// 13
case "Enter":
- if (this.element.textSelection) {
- this.replaceSelectedText("\n");
- } else {
- this.emit("onText", this.element.text.substring(0, this.element.startTextIndex) + "\n" + this.element.text.substring(this.element.startTextIndex));
- this.moveCaretRight(false);
+ if (event.shiftKey) {
+ if (this.element.textSelection) {
+ this.replaceSelectedText("\n");
+ } else {
+ this.emit("onText", this.element.text.substring(0, this.element.startTextIndex) + "\n" + this.element.text.substring(this.element.startTextIndex));
+ this.moveCaretRight(false);
- /* TODO remove
- // Update
- this.element.getImage().updateImageObject(this.element.model);
- */
+ /* TODO remove
+ // Update
+ this.element.getImage().updateImageObject(this.element.model);
+ */
+ }
+ } else {
+ this.emit("endText");
}
return;
// 16
@@ -93,7 +97,7 @@ export class WriteInteraction<TElement extends MedsurfDraw.Text> extends BaseEle
return;
// 27 TODO
case "Escape":
- this.emit("endWrite");
+ this.emit("endText");
// TODO stop writing
return;
// 33
@@ -257,10 +261,7 @@ export class WriteInteraction<TElement extends MedsurfDraw.Text> extends BaseEle
// 65
case "a":
if (event.ctrlKey) {
- this.element.textSelection = true;
- this.element.startTextIndex = 0;
- this.element.endTextIndex = this.element.text.length;
- this.emit("onSelection");
+ this.selectAllText();
return;
}
break;
@@ -358,6 +359,15 @@ export class WriteInteraction<TElement extends MedsurfDraw.Text> extends BaseEle
}
//</editor-fold>
+ //<editor-fold desc="Public functions">
+ public selectAllText(): void {
+ this.element.textSelection = true;
+ this.element.startTextIndex = this.element.text.length;
+ this.element.endTextIndex = 0;
+ this.emit("onSelection");
+ }
+ //</editor-fold>
+
//<editor-fold desc="Private functions">
/**
* Delete selected text
--
GitLab