|
@@ -1,15 +1,15 @@
|
|
import { SObjectItem } from "./SObjectItem";
|
|
import { SObjectItem } from "./SObjectItem";
|
|
import { SPainter, SRect, SColor, SFont } from "@saga-web/draw/lib";
|
|
import { SPainter, SRect, SColor, SFont } from "@saga-web/draw/lib";
|
|
-import { SMouseEvent } from "@saga-web/base/lib";
|
|
|
|
|
|
+import { SGraphItem } from "@saga-web/graph/lib";
|
|
|
|
|
|
/**
|
|
/**
|
|
* 文本item
|
|
* 文本item
|
|
*
|
|
*
|
|
- * @author 郝建龙(1061851420@qq.com)
|
|
|
|
|
|
+ * @author 张宇(taohuzy@163.com)
|
|
*/
|
|
*/
|
|
-export class STextItem extends SObjectItem {
|
|
|
|
- /** 文本内容 */
|
|
|
|
- _text: string = "";
|
|
|
|
|
|
+class TextItem extends SObjectItem {
|
|
|
|
+ /** 文本内容 */
|
|
|
|
+ private _text: string = "";
|
|
get text(): string {
|
|
get text(): string {
|
|
return this._text;
|
|
return this._text;
|
|
}
|
|
}
|
|
@@ -18,8 +18,18 @@ export class STextItem extends SObjectItem {
|
|
this.update();
|
|
this.update();
|
|
}
|
|
}
|
|
|
|
|
|
- /** 字体 */
|
|
|
|
- _font: SFont = new SFont();
|
|
|
|
|
|
+ /** 文本颜色 */
|
|
|
|
+ private _color: string = "#333333";
|
|
|
|
+ get color(): string {
|
|
|
|
+ return this._color;
|
|
|
|
+ }
|
|
|
|
+ set color(v: string) {
|
|
|
|
+ this._color = v;
|
|
|
|
+ this.update();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /** 字体 */
|
|
|
|
+ private _font: SFont;
|
|
get font(): SFont {
|
|
get font(): SFont {
|
|
return this._font;
|
|
return this._font;
|
|
}
|
|
}
|
|
@@ -31,29 +41,30 @@ export class STextItem extends SObjectItem {
|
|
/** 文本绘制最大宽 */
|
|
/** 文本绘制最大宽 */
|
|
maxWidth: number | undefined = undefined;
|
|
maxWidth: number | undefined = undefined;
|
|
|
|
|
|
- /** 文本颜色 */
|
|
|
|
- _color: string = "#000000";
|
|
|
|
- get color(): string {
|
|
|
|
- return this._color;
|
|
|
|
- }
|
|
|
|
- set color(v: string) {
|
|
|
|
- this._color = v;
|
|
|
|
- this.update();
|
|
|
|
- }
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 构造函数
|
|
|
|
+ *
|
|
|
|
+ * @param parent 指向父Item
|
|
|
|
+ * @param str 文本内容
|
|
|
|
+ */
|
|
|
|
+ constructor(parent: SGraphItem | null, str: string = "") {
|
|
|
|
+ super(parent);
|
|
|
|
+ this._text = str;
|
|
|
|
+ this._font = new SFont("sans-serif", 12);
|
|
|
|
+ this.height = 12;
|
|
|
|
+ this.moveable = true;
|
|
|
|
+ this.selectable = true;
|
|
|
|
+ this.selected = true;
|
|
|
|
+ } // Constructor
|
|
|
|
|
|
/**
|
|
/**
|
|
- * Item对象边界区域
|
|
|
|
|
|
+ * 对象边界区域
|
|
*
|
|
*
|
|
- * @return SRect
|
|
|
|
|
|
+ * @return 边界区域
|
|
*/
|
|
*/
|
|
boundingRect(): SRect {
|
|
boundingRect(): SRect {
|
|
- return new SRect(
|
|
|
|
- -this.width / 2,
|
|
|
|
- -this.height / 2,
|
|
|
|
- this.width,
|
|
|
|
- this.height
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
|
|
+ return new SRect(0, 0, this.width, this.height);
|
|
|
|
+ } // Function boundingRect()
|
|
|
|
|
|
/**
|
|
/**
|
|
* 判断点是否在区域内
|
|
* 判断点是否在区域内
|
|
@@ -66,42 +77,76 @@ export class STextItem extends SObjectItem {
|
|
} // Function contains()
|
|
} // Function contains()
|
|
|
|
|
|
/**
|
|
/**
|
|
- * 鼠标单击事件
|
|
|
|
|
|
+ * 绘制编辑和创建状态文本Item
|
|
|
|
+ *
|
|
|
|
+ * @param painter 绘制类
|
|
*
|
|
*
|
|
- * @param event 事件参数
|
|
|
|
- * @return boolean
|
|
|
|
*/
|
|
*/
|
|
- onMouseDown(event: SMouseEvent): boolean {
|
|
|
|
- console.log("textDown");
|
|
|
|
- this.$emit("click", event);
|
|
|
|
- return true;
|
|
|
|
- } // Function onMouseDown()
|
|
|
|
|
|
+ protected drawEditText(painter: SPainter): void {
|
|
|
|
+ //绘制文本
|
|
|
|
+ painter.brush.color = new SColor(this.color);
|
|
|
|
+ painter.font = this.font;
|
|
|
|
+ this.drawFormatText(painter);
|
|
|
|
+
|
|
|
|
+ //绘制矩形轮廓
|
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
|
+ painter.pen.color = new SColor("#17B8EA");
|
|
|
|
+ painter.pen.lineDash = [3, 2];
|
|
|
|
+ painter.pen.lineWidth = painter.toPx(1);
|
|
|
|
+ painter.drawRect(this.boundingRect());
|
|
|
|
+ } // Function drawEditText()
|
|
|
|
|
|
/**
|
|
/**
|
|
- * 鼠标抬起事件
|
|
|
|
|
|
+ * 绘制显示状态文本Item
|
|
|
|
+ *
|
|
|
|
+ * @param painter 绘制类
|
|
*
|
|
*
|
|
- * @param event 事件参数
|
|
|
|
- * @return boolean
|
|
|
|
*/
|
|
*/
|
|
- onMouseUp(event: SMouseEvent): boolean {
|
|
|
|
- console.log("textup");
|
|
|
|
- return super.onMouseUp(event);
|
|
|
|
- } // Function onClick()
|
|
|
|
|
|
+ protected drawShowText(painter: SPainter): void {
|
|
|
|
+ // 绘制文本
|
|
|
|
+ painter.brush.color = new SColor(this.color);
|
|
|
|
+ painter.font = this.font;
|
|
|
|
+ this.drawFormatText(painter);
|
|
|
|
+
|
|
|
|
+ // 绘制矩形轮廓
|
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
|
+ painter.pen.color = SColor.Transparent;
|
|
|
|
+ painter.drawRect(this.boundingRect());
|
|
|
|
+ } // Function drawShowText()
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 根据换行切割文本,绘制多行并计算外轮廓宽高
|
|
|
|
+ *
|
|
|
|
+ * @param painter 绘制类
|
|
|
|
+ *
|
|
|
|
+ */
|
|
|
|
+ protected drawFormatText(painter: SPainter): void {
|
|
|
|
+ let textArr: string[] = this.text.split(/\n/g);
|
|
|
|
+ let textMaxWidth = 0;
|
|
|
|
+ let textHeight: number = this.font.size;
|
|
|
|
+ textArr.forEach((text: string, index: number) => {
|
|
|
|
+ let textWidth: number = painter.textWidth(text);
|
|
|
|
+ if (textWidth > textMaxWidth) {
|
|
|
|
+ textMaxWidth = textWidth;
|
|
|
|
+ }
|
|
|
|
+ painter.drawText(
|
|
|
|
+ text,
|
|
|
|
+ 0,
|
|
|
|
+ index * (textHeight + 2) + 2,
|
|
|
|
+ this.maxWidth
|
|
|
|
+ );
|
|
|
|
+ });
|
|
|
|
+ // 在绘制文本后计算文本的宽高
|
|
|
|
+ this.width = textMaxWidth;
|
|
|
|
+ this.height = (textHeight + 2) * textArr.length;
|
|
|
|
+ } // Function drawFormatText()
|
|
|
|
|
|
/**
|
|
/**
|
|
* Item绘制操作
|
|
* Item绘制操作
|
|
*
|
|
*
|
|
- * @param painter painter对象
|
|
|
|
|
|
+ * @param painter 绘画类
|
|
*/
|
|
*/
|
|
onDraw(painter: SPainter): void {
|
|
onDraw(painter: SPainter): void {
|
|
- this.width = painter.toPx(painter.textWidth(this.text));
|
|
|
|
- this.height = painter.toPx(this.font.size);
|
|
|
|
- painter.font.textBaseLine = this.font.textBaseLine;
|
|
|
|
- painter.font.textDirection = this.font.textDirection;
|
|
|
|
- painter.font.textAlign = this.font.textAlign;
|
|
|
|
- painter.font.name = this.font.name;
|
|
|
|
- painter.font.size = painter.toPx(this.font.size);
|
|
|
|
- painter.brush.color = new SColor(this.color);
|
|
|
|
- painter.drawText(this.text, 0, 0, this.maxWidth);
|
|
|
|
|
|
+ this.drawShowText(painter);
|
|
} // Function onDraw()
|
|
} // Function onDraw()
|
|
} // Class STextItem
|
|
} // Class STextItem
|