|
@@ -25,13 +25,10 @@
|
|
|
*/
|
|
|
|
|
|
import {
|
|
|
- SImageItem,
|
|
|
- STextItem,
|
|
|
SAnchorItem,
|
|
|
SGraphItem,
|
|
|
-
|
|
|
} from "@persagy-web/graph";
|
|
|
-import { SItemStatus, ItemOrder, } from "@persagy-web/big";
|
|
|
+import { SItemStatus, ItemOrder } from "@persagy-web/big";
|
|
|
import { SMouseEvent } from "@persagy-web/base";
|
|
|
import {
|
|
|
SSize,
|
|
@@ -40,9 +37,8 @@ import {
|
|
|
SColor,
|
|
|
SFont,
|
|
|
SPoint
|
|
|
-
|
|
|
} from "@persagy-web/draw";
|
|
|
-import { SGraphEdit } from "..";
|
|
|
+import { SGraphEdit, SBaseTextEdit, SBaseImageEdit } from "..";
|
|
|
import { Marker } from "../type/Marker";
|
|
|
|
|
|
/**
|
|
@@ -52,6 +48,17 @@ import { Marker } from "../type/Marker";
|
|
|
*/
|
|
|
|
|
|
export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
+ /** item 数据*/
|
|
|
+ _data: Marker | null = null;
|
|
|
+ get data(): Marker | null {
|
|
|
+ return this._data;
|
|
|
+ } // Get data
|
|
|
+ set data(v: Marker | null) {
|
|
|
+ this._data = v;
|
|
|
+ this.initData()
|
|
|
+ this.update();
|
|
|
+ } // Set data
|
|
|
+
|
|
|
/** item 状态 */
|
|
|
_status: SItemStatus = SItemStatus.Normal;
|
|
|
get status(): SItemStatus {
|
|
@@ -61,15 +68,21 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
this._status = v;
|
|
|
if (v == SItemStatus.Normal) {
|
|
|
this.moveable = true;
|
|
|
- this.textItem.moveable = false;
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.moveable = false
|
|
|
+ });
|
|
|
this.img.moveable = false;
|
|
|
} else if (v == SItemStatus.Edit) {
|
|
|
this.moveable = false;
|
|
|
- this.textItem.moveable = true;
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.moveable = true
|
|
|
+ });
|
|
|
this.img.moveable = true;
|
|
|
} else if (v == SItemStatus.Create) {
|
|
|
this.moveable = true;
|
|
|
- this.textItem.moveable = false;
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.moveable = false
|
|
|
+ });
|
|
|
this.img.moveable = false;
|
|
|
}
|
|
|
|
|
@@ -90,9 +103,13 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
|
|
|
this._showText = v;
|
|
|
if (v) {
|
|
|
- this.textItem.show();
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.show()
|
|
|
+ });
|
|
|
} else {
|
|
|
- this.textItem.hide();
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.hide()
|
|
|
+ });
|
|
|
}
|
|
|
} // Set showText
|
|
|
|
|
@@ -127,11 +144,15 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
this._isActive = v;
|
|
|
if (v) {
|
|
|
this.cursor = "pointer";
|
|
|
- this.textItem.cursor = "pointer";
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.cursor = "pointer"
|
|
|
+ });
|
|
|
this.img.cursor = "pointer";
|
|
|
} else {
|
|
|
this.cursor = "auto";
|
|
|
- this.textItem.cursor = "auto";
|
|
|
+ this.textItemList.map(item => {
|
|
|
+ item.cursor = "auto"
|
|
|
+ });
|
|
|
this.img.cursor = "auto";
|
|
|
}
|
|
|
|
|
@@ -197,7 +218,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
} // Set sHeight
|
|
|
|
|
|
/** 是否显示锚点 */
|
|
|
- private _showAnchor: boolean = false;
|
|
|
+ private _showAnchor: boolean = true;
|
|
|
get showAnchor(): boolean {
|
|
|
return this._showAnchor;
|
|
|
} // Get showAnchor
|
|
@@ -208,36 +229,45 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
});
|
|
|
} // Set showAnchor
|
|
|
|
|
|
- /** 文本内容 */
|
|
|
- get text(): string {
|
|
|
- return this.textItem.text;
|
|
|
- } // Get text
|
|
|
- set text(v: string) {
|
|
|
- this.textItem.text = v;
|
|
|
- this.update();
|
|
|
- } // Set text
|
|
|
-
|
|
|
/** 文本颜色 */
|
|
|
get color(): SColor {
|
|
|
- return this.textItem.color;
|
|
|
+ if (this.textItemList.length) {
|
|
|
+ return this.textItemList[0].color;
|
|
|
+ } else {
|
|
|
+ return new SColor();
|
|
|
+ }
|
|
|
} // Get color
|
|
|
set color(v: SColor) {
|
|
|
- this.textItem.color = v;
|
|
|
+ this.textItemList.forEach(item => {
|
|
|
+ item.color = v;
|
|
|
+ })
|
|
|
this.update();
|
|
|
} // Set color
|
|
|
|
|
|
/** 文本字体 */
|
|
|
get font(): SFont {
|
|
|
- return this.textItem.font;
|
|
|
+ if (this.textItemList.length) {
|
|
|
+ return this.textItemList[0].font
|
|
|
+ } else {
|
|
|
+ return new SFont
|
|
|
+ }
|
|
|
} // Get font
|
|
|
+
|
|
|
set font(v: SFont) {
|
|
|
- this.textItem.font = v;
|
|
|
+ this.textItemList.forEach(item => {
|
|
|
+ item.font = v
|
|
|
+ })
|
|
|
this.update();
|
|
|
} // Set font
|
|
|
+
|
|
|
/** 图像 */
|
|
|
- img: SImageItem = new SImageItem(this);
|
|
|
- /** 文本 */
|
|
|
- textItem: STextItem = new STextItem(this);
|
|
|
+ img: SBaseImageEdit = new SBaseImageEdit(this);
|
|
|
+
|
|
|
+ /** 文本数组 */
|
|
|
+ textItemList: SBaseTextEdit[] = [];
|
|
|
+
|
|
|
+ /** 当前选中的文本item */
|
|
|
+ curTextItem: SBaseTextEdit | null = null;
|
|
|
|
|
|
/**
|
|
|
* 构造体
|
|
@@ -245,54 +275,97 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
* @param parent 父节点
|
|
|
* @param data 锚点数据
|
|
|
*/
|
|
|
- constructor(parent: SGraphItem | null, data: Marker) {
|
|
|
+ constructor(parent: SGraphItem | null, data: Marker | null = null) {
|
|
|
super(parent);
|
|
|
- this.img.width = 32;
|
|
|
- this.img.height = 32;
|
|
|
- this.img.origin = new SPoint(
|
|
|
- this.img.width * 0.5,
|
|
|
- this.img.height * 0.5
|
|
|
- );
|
|
|
- this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
|
|
|
- let anchorPoint: any = [];
|
|
|
- if (data) {
|
|
|
- anchorPoint = [
|
|
|
- {
|
|
|
- x: data.pos.x,
|
|
|
- y: data.pos.y,
|
|
|
- id: '123'
|
|
|
- }
|
|
|
- ];
|
|
|
- this.img.url = data.style.default.url
|
|
|
- }
|
|
|
+ this.showSelect = false;
|
|
|
+ this.img.showSelect = false;
|
|
|
+ this.data = data;
|
|
|
+ } // Constructor
|
|
|
|
|
|
+ /**
|
|
|
+ * 如果 data 设置;初始化data
|
|
|
+ */
|
|
|
+ initData() {
|
|
|
+ if (!this.data) return;
|
|
|
+ if (this.data.size) {
|
|
|
+ this.sWidth = this.data.size.width;
|
|
|
+ this.sHeight = this.data.size.height;
|
|
|
+ }
|
|
|
+ this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
|
|
|
+ const anchorPoint = [
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" },
|
|
|
+ ];
|
|
|
this.anchorList = anchorPoint.map(t => {
|
|
|
let item = new SAnchorItem(this);
|
|
|
if (t.id) {
|
|
|
item.id = t.id;
|
|
|
}
|
|
|
-
|
|
|
item.moveTo(t.x, t.y);
|
|
|
return item;
|
|
|
});
|
|
|
|
|
|
this.showAnchor = false;
|
|
|
- this.textItem.text = "";
|
|
|
- this.textItem.font.size = 12;
|
|
|
- // 偏移二分之一文本高度
|
|
|
- this.textItem.moveTo(
|
|
|
- this.img.width * 0.5,
|
|
|
- -(this.font.size * 1.25 * 0.5)
|
|
|
- );
|
|
|
+ // 对文本数据进行处理
|
|
|
+ if (this.data.style && this.data.style.default && this.data.style.default.textList) {
|
|
|
+ const textList = this.data.style.default.textList;
|
|
|
+ if (textList.length) {
|
|
|
+ const textItemList: any[] = [];
|
|
|
+ textList.forEach((item: any, index: number) => {
|
|
|
+ let obj = new SBaseTextEdit(this, null);
|
|
|
+ obj.propertyData = item;
|
|
|
+ obj.text = item.text;
|
|
|
+ if (item.pos) {
|
|
|
+ obj.moveTo(item.pos.x, item.pos.x)
|
|
|
+ } else {
|
|
|
+ obj.moveTo(
|
|
|
+ this.img.width * 0.5,
|
|
|
+ -(this.font.size * 1.25 * 0.5) + (index) * 10
|
|
|
+ );
|
|
|
+ }
|
|
|
+ obj.font.size = item.font;
|
|
|
+ obj.isTransform = false;
|
|
|
+ obj.showSelect = false;
|
|
|
+ obj.color = new SColor(item.color);
|
|
|
+ obj.connect('textSelect', this, this.textSelectChange)
|
|
|
+ textItemList.push(obj)
|
|
|
+ })
|
|
|
+ this.textItemList = textItemList;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.img.url = this.data.style.default.url;
|
|
|
+
|
|
|
+ this.x = this.data.pos.x;
|
|
|
+ this.y = this.data.pos.y
|
|
|
|
|
|
this.moveable = true;
|
|
|
this.selectable = true;
|
|
|
- } // Constructor
|
|
|
+ }// Function initData()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 添加文本
|
|
|
+ *
|
|
|
+ * @param item 文本图例
|
|
|
+ */
|
|
|
+ addTextItem(item: SBaseTextEdit) {
|
|
|
+ this.textItemList.push(item)
|
|
|
+ }// Function addTextItem
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 删除文本
|
|
|
+ *
|
|
|
+ * @param index 索引
|
|
|
+ */
|
|
|
+ removeTextItem(index: number) {
|
|
|
+ let [delteItem] = this.textItemList.splice(index, 1);
|
|
|
+ if (this.scene) {
|
|
|
+ this.scene.removeItem(delteItem)
|
|
|
+ }
|
|
|
+ }// Function removeTextItem
|
|
|
|
|
|
/**
|
|
|
* 计算并移动锚点的位置
|
|
|
- */
|
|
|
- private changeAnchorPoint(): void {
|
|
|
+ */
|
|
|
+ changeAnchorPoint(): void {
|
|
|
// 判断是否有锚点
|
|
|
if (this.anchorList.length) {
|
|
|
let anchorPoint = [
|
|
@@ -308,18 +381,26 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
} // Function changeAnchorPoint()
|
|
|
|
|
|
/**
|
|
|
+ * 选中的文本item变化
|
|
|
+ */
|
|
|
+ textSelectChange(item: SBaseTextEdit): void {
|
|
|
+ this.curTextItem = item;
|
|
|
+ } // Function textSelectChange()
|
|
|
+
|
|
|
+ /**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
* @param event 事件对象
|
|
|
* @return 是否处理事件
|
|
|
*/
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ this.curTextItem = null;
|
|
|
if (this.status == SItemStatus.Normal) {
|
|
|
- return super.onMouseDown(event);
|
|
|
+ super.onMouseDown(event)
|
|
|
+ return true;
|
|
|
} else if (this.status == SItemStatus.Edit) {
|
|
|
return super.onMouseDown(event);
|
|
|
}
|
|
|
-
|
|
|
return true;
|
|
|
} // Function onMouseDown()
|
|
|
|
|
@@ -330,7 +411,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
* @param newSize 改之后大小
|
|
|
*/
|
|
|
onResize(oldSize: SSize, newSize: SSize) {
|
|
|
- console.log(arguments);
|
|
|
+ // console.log(arguments);
|
|
|
} // Function onResize()
|
|
|
|
|
|
/**
|
|
@@ -363,13 +444,14 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
.boundingRect()
|
|
|
.adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
|
|
|
if (this.showText) {
|
|
|
- rect = rect.unioned(
|
|
|
- this.textItem
|
|
|
- .boundingRect()
|
|
|
- .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
|
|
|
- );
|
|
|
+ this.textItemList.forEach(item => {
|
|
|
+ rect = rect.unioned(
|
|
|
+ item
|
|
|
+ .boundingRect()
|
|
|
+ .adjusted(item.pos.x, item.pos.y, 0, 0)
|
|
|
+ );
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
return rect.adjusted(-5, -5, 10, 10);
|
|
|
} // Function boundingRect()
|
|
|
|
|
@@ -377,16 +459,28 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
* Item 绘制操作
|
|
|
*
|
|
|
* @param painter 绘制对象
|
|
|
- */
|
|
|
+ */
|
|
|
onDraw(painter: SPainter): void {
|
|
|
- if (this.status == SItemStatus.Edit) {
|
|
|
- painter.pen.lineWidth = painter.toPx(1);
|
|
|
- painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
|
|
|
+ const rect = this.boundingRect();
|
|
|
+ const lw = painter.toPx(1);
|
|
|
+ // 编辑态和选中态出现绘制区域
|
|
|
+ if (this.status == SItemStatus.Edit || this.selected) {
|
|
|
+ // doto 如果子元素被选中
|
|
|
+ painter.pen.lineWidth = lw;
|
|
|
+ painter.pen.lineDash = [3 * lw, 7 * lw];
|
|
|
painter.pen.color = SColor.Black;
|
|
|
painter.brush.color = SColor.Transparent;
|
|
|
- painter.drawRect(this.boundingRect());
|
|
|
+ painter.drawRect(rect);
|
|
|
+ }
|
|
|
+ // 编辑态出现四个角的圆点
|
|
|
+ if (this.status == SItemStatus.Edit) {
|
|
|
+ painter.pen.lineDash = [];
|
|
|
+ painter.brush.color = SColor.White;
|
|
|
+ painter.drawCircle(rect.x, rect.y, 5 * lw)
|
|
|
+ painter.drawCircle(rect.right, rect.bottom, 5 * lw)
|
|
|
+ painter.drawCircle(rect.x, rect.bottom, 5 * lw)
|
|
|
+ painter.drawCircle(rect.right, rect.y, 5 * lw)
|
|
|
}
|
|
|
-
|
|
|
if (this.isActive) {
|
|
|
painter.pen.color = SColor.Transparent;
|
|
|
painter.brush.color = this.activeColor;
|
|
@@ -419,4 +513,43 @@ export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
}
|
|
|
}
|
|
|
} // Function onDraw()
|
|
|
-} // Class SIconTextItem
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 返回对象储存的相关数据
|
|
|
+ *
|
|
|
+ * @return 相关数据
|
|
|
+ */
|
|
|
+ toData(): any {
|
|
|
+ if (this.data) {
|
|
|
+ if (this.data.size) {
|
|
|
+ this.data.size.width = this.sWidth;
|
|
|
+ this.data.size.height = this.sHeight;
|
|
|
+ }
|
|
|
+ this.data.style.default.text = JSON.stringify(this.textItemList);
|
|
|
+ this.data.pos.x = this.pos.x;
|
|
|
+ this.data.pos.y = this.pos.y;
|
|
|
+ this.data.style.default.zorder = this.zOrder;
|
|
|
+ this.data.style.default.url = this.img.url;
|
|
|
+ }
|
|
|
+
|
|
|
+ const anchorPoint = [
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" },
|
|
|
+ ];
|
|
|
+ this.anchorList = anchorPoint.map(t => {
|
|
|
+ let item = new SAnchorItem(this);
|
|
|
+ if (t.id) {
|
|
|
+ item.id = t.id;
|
|
|
+ }
|
|
|
+ item.moveTo(t.x, t.y);
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.textItemList.font.size = this.data.style.default.font || 12;
|
|
|
+ // this.img.url = this.data.style.default.url;
|
|
|
+ if (this.data) {
|
|
|
+ this.x = this.data.pos.x;
|
|
|
+ this.y = this.data.pos.y
|
|
|
+
|
|
|
+ }
|
|
|
+ } // Function toData()
|
|
|
+} // Class SBaseIconTextEdit
|