|
@@ -17,8 +17,9 @@ import {
|
|
|
STextItem
|
|
|
} from "@persagy-web/graph/lib";
|
|
|
import { SItemStatus } from "@persagy-web/big/lib";
|
|
|
-import { SColor, SPainter, SRect, SSize } from "@persagy-web/draw/lib";
|
|
|
+import { SColor, SPainter, SRect, SSize, SPoint, SFont } from "@persagy-web/draw/lib";
|
|
|
import { SMouseEvent } from "@persagy-web/base/lib";
|
|
|
+import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor";
|
|
|
|
|
|
/**
|
|
|
* 图例item icon
|
|
@@ -26,46 +27,101 @@ import { SMouseEvent } from "@persagy-web/base/lib";
|
|
|
* @author 郝洁 <haojie@persagy.com>
|
|
|
*/
|
|
|
class SImgTextItem extends SObjectItem {
|
|
|
-
|
|
|
- /** item状态 */
|
|
|
+ /** item 状态 */
|
|
|
_status: SItemStatus = SItemStatus.Normal;
|
|
|
get status(): SItemStatus {
|
|
|
return this._status;
|
|
|
- }
|
|
|
-
|
|
|
+ } // Get status
|
|
|
set status(v: SItemStatus) {
|
|
|
this._status = v;
|
|
|
+ // 标准状态时
|
|
|
+ if (v == SItemStatus.Normal) {
|
|
|
+ this.moveable = true;
|
|
|
+ this.textItem.moveable = false;
|
|
|
+ this.img.moveable = false;
|
|
|
+ } else if (v == SItemStatus.Edit) {
|
|
|
+ // 编辑状态时
|
|
|
+ this.moveable = false;
|
|
|
+ this.textItem.moveable = true;
|
|
|
+ this.img.moveable = true;
|
|
|
+ } else if (v == SItemStatus.Create) {
|
|
|
+ // 创建状态时
|
|
|
+ this.moveable = true;
|
|
|
+ this.textItem.moveable = false;
|
|
|
+ this.img.moveable = false;
|
|
|
+ }
|
|
|
this.update();
|
|
|
}
|
|
|
|
|
|
- /** 是否显示文字 */
|
|
|
+ /** 是否显示文字 */
|
|
|
_showText: boolean = true;
|
|
|
get showText(): boolean {
|
|
|
return this._showText;
|
|
|
}
|
|
|
-
|
|
|
set showText(v: boolean) {
|
|
|
+ // 当文字是显示状态时
|
|
|
if (v === this._showText) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
this._showText = v;
|
|
|
- this.textItem.visible = v;
|
|
|
+ // 是否显示文字
|
|
|
+ if (v) {
|
|
|
+ this.textItem.show();
|
|
|
+ } else {
|
|
|
+ this.textItem.hide();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- /** 是否显示锚点 */
|
|
|
- _showAnchor: boolean = false;
|
|
|
- get showAnchor(): boolean {
|
|
|
- return this._showAnchor;
|
|
|
+ /** 是否被选中 */
|
|
|
+ get selected(): boolean {
|
|
|
+ return this._selected && this.selectable && this.enabled;
|
|
|
+ }
|
|
|
+ set selected(value: boolean) {
|
|
|
+ // 如果选择状态未变更
|
|
|
+ if (this.selected == value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this._selected = value;
|
|
|
+ // 选中时
|
|
|
+ if (value) {
|
|
|
+ this.img.scale = 1.25;
|
|
|
+ } else {
|
|
|
+ this.img.scale = 1;
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
}
|
|
|
|
|
|
- set showAnchor(v: boolean) {
|
|
|
- this._showAnchor = v;
|
|
|
- this.anchorList.forEach(t => {
|
|
|
- t.visible = v;
|
|
|
- })
|
|
|
+ /** 是否激活 */
|
|
|
+ _isActive: boolean = false;
|
|
|
+ get isActive(): boolean {
|
|
|
+ return this._isActive;
|
|
|
+ }
|
|
|
+ set isActive(v: boolean) {
|
|
|
+ this._isActive = v;
|
|
|
+ // 激活状态
|
|
|
+ if (v) {
|
|
|
+ this.cursor = "pointer";
|
|
|
+ this.textItem.cursor = "pointer";
|
|
|
+ this.img.cursor = "pointer";
|
|
|
+ } else {
|
|
|
+ this.cursor = "auto";
|
|
|
+ this.textItem.cursor = "auto";
|
|
|
+ this.img.cursor = "auto";
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
}
|
|
|
|
|
|
- /** X轴坐标 */
|
|
|
+ /** 激活显示颜色 */
|
|
|
+ _activeColor: SColor = new SColor("#00000033");
|
|
|
+ get activeColor(): SColor {
|
|
|
+ return this._activeColor;
|
|
|
+ }
|
|
|
+ set activeColor(v: SColor) {
|
|
|
+ this._activeColor = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** X 轴坐标 */
|
|
|
get x(): number {
|
|
|
return this.pos.x;
|
|
|
}
|
|
@@ -74,75 +130,187 @@ class SImgTextItem extends SObjectItem {
|
|
|
this.$emit("changePos");
|
|
|
this.update();
|
|
|
}
|
|
|
- /** Y轴坐标 */
|
|
|
+
|
|
|
+ /** Y 轴坐标 */
|
|
|
get y(): number {
|
|
|
return this.pos.y;
|
|
|
}
|
|
|
-
|
|
|
set y(v: number) {
|
|
|
this.pos.y = v;
|
|
|
this.$emit("changePos");
|
|
|
this.update();
|
|
|
}
|
|
|
- /** img Item */
|
|
|
- img: SImageItem = new SImageItem(this);
|
|
|
|
|
|
- /** text item */
|
|
|
+ /** icon宽 */
|
|
|
+ get sWidth(): number {
|
|
|
+ return this.img.width;
|
|
|
+ }
|
|
|
+ set sWidth(v: number) {
|
|
|
+ this.img.width = v;
|
|
|
+ this.img.origin = new SPoint(
|
|
|
+ this.img.width * 0.5,
|
|
|
+ this.img.height * 0.5
|
|
|
+ );
|
|
|
+ this.changeAnchorPoint();
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** icon高 */
|
|
|
+ get sHeight(): number {
|
|
|
+ return this.img.height;
|
|
|
+ }
|
|
|
+ set sHeight(v: number) {
|
|
|
+ this.img.height = v;
|
|
|
+ this.img.origin = new SPoint(
|
|
|
+ this.img.width * 0.5,
|
|
|
+ this.img.height * 0.5
|
|
|
+ );
|
|
|
+ this.changeAnchorPoint();
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 是否显示锚点 */
|
|
|
+ private _showAnchor: boolean = false;
|
|
|
+ get showAnchor(): boolean {
|
|
|
+ return this._showAnchor;
|
|
|
+ }
|
|
|
+ set showAnchor(v: boolean) {
|
|
|
+ this._showAnchor = v;
|
|
|
+ this.anchorList.forEach(t => {
|
|
|
+ t.visible = v;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 文本内容 */
|
|
|
+ get text(): string {
|
|
|
+ return this.textItem.text;
|
|
|
+ }
|
|
|
+ set text(v: string) {
|
|
|
+ this.textItem.text = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 文本颜色 */
|
|
|
+ get color(): SColor {
|
|
|
+ return this.textItem.color;
|
|
|
+ }
|
|
|
+ set color(v: SColor) {
|
|
|
+ this.textItem.color = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 文本字体 */
|
|
|
+ get font(): SFont {
|
|
|
+ return this.textItem.font;
|
|
|
+ }
|
|
|
+ set font(v: SFont) {
|
|
|
+ this.textItem.font = v;
|
|
|
+ this.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** img Item */
|
|
|
+ img: SImageItem = new SImageItem(this, 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2134829550,3120755721&fm=26&gp=0.jpg');
|
|
|
+
|
|
|
+ /** text Item */
|
|
|
textItem: STextItem = new STextItem(this);
|
|
|
|
|
|
/**
|
|
|
* 构造体
|
|
|
*
|
|
|
+ * @param parent 父类
|
|
|
+ * @param data 锚点数据
|
|
|
*/
|
|
|
-
|
|
|
- constructor(parent: SGraphItem | null) {
|
|
|
+ constructor(parent: SGraphItem | null, data?: Anchor[]) {
|
|
|
super(parent);
|
|
|
- this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
|
|
|
this.img.width = 32;
|
|
|
this.img.height = 32;
|
|
|
- let anchorPoint = [{x: 0, y: this.img.height / 2}, {x: 0, y: -this.img.height / 2}, {
|
|
|
- x: -this.img.width / 2,
|
|
|
- y: 0
|
|
|
- }, {x: this.img.width / 2, y: 0}];
|
|
|
+ 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;
|
|
|
+ // 锚点数据存在时
|
|
|
+ if (data && data.length) {
|
|
|
+ anchorPoint = data.map(t => {
|
|
|
+ return {
|
|
|
+ x: t.pos.x,
|
|
|
+ y: t.pos.y,
|
|
|
+ id: t.id
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ anchorPoint = [
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" },
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" },
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" },
|
|
|
+ { x: this.img.x, y: this.img.y, id: "" }
|
|
|
+ // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
|
|
|
+ // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
|
|
|
+ // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
|
|
|
+ // { x: this.img.x + this.img.width / 2, 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.update();
|
|
|
- this.textItem.text = "x2";
|
|
|
- this.textItem.moveTo(18, -6);
|
|
|
+ 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)
|
|
|
+ );
|
|
|
+ this.showSelect = false;
|
|
|
this.moveable = true;
|
|
|
this.selectable = true;
|
|
|
- this.textItem.enabled = false;
|
|
|
- this.img.enabled = false;
|
|
|
}
|
|
|
|
|
|
- onMouseEnter(event: SMouseEvent): boolean {
|
|
|
- this.showAnchor = true;
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- onMouseLeave(event: SMouseEvent): boolean {
|
|
|
- this.showAnchor = false;
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- onMouseMove(event: SMouseEvent): boolean {
|
|
|
- return super.onMouseMove(event);
|
|
|
+ /**
|
|
|
+ * 计算并移动锚点的位置
|
|
|
+ */
|
|
|
+ private changeAnchorPoint(): void {
|
|
|
+ // 判断是否有锚点
|
|
|
+ if (this.anchorList.length) {
|
|
|
+ let anchorPoint = [
|
|
|
+ { x: this.img.x, y: this.img.y },
|
|
|
+ { x: this.img.x, y: this.img.y },
|
|
|
+ { x: this.img.x, y: this.img.y },
|
|
|
+ { x: this.img.x, y: this.img.y }
|
|
|
+ // { x: this.img.x, y: this.img.y + this.img.height / 2 },
|
|
|
+ // { x: this.img.x, y: this.img.y - this.img.height / 2 },
|
|
|
+ // { x: this.img.x - this.img.width / 2, y: this.img.y },
|
|
|
+ // { x: this.img.x + this.img.width / 2, y: this.img.y }
|
|
|
+ ];
|
|
|
+ this.anchorList.forEach((item, index) => {
|
|
|
+ item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
+ * @param event 事件对象
|
|
|
+ * @return 是否处理事件
|
|
|
*/
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
- console.log(this.textItem)
|
|
|
+ console.log(123123123)
|
|
|
+ // console.log(super.onMouseDown(event));
|
|
|
+ // 如果为show状态 双击改对象则需改为编辑状态
|
|
|
if (this.status == SItemStatus.Normal) {
|
|
|
return super.onMouseDown(event);
|
|
|
} else if (this.status == SItemStatus.Edit) {
|
|
|
+ // 编辑状态时
|
|
|
return super.onMouseDown(event);
|
|
|
}
|
|
|
+ console.log('----------------')
|
|
|
return true;
|
|
|
}
|
|
|
|
|
@@ -152,7 +320,7 @@ class SImgTextItem extends SObjectItem {
|
|
|
* @param oldSize 改之前的大小
|
|
|
* @param newSize 改之后大小
|
|
|
*/
|
|
|
- onResize(oldSize: SSize, newSize: SSize) {
|
|
|
+ onResize(oldSize: SSize, newSize: SSize): void {
|
|
|
console.log(arguments);
|
|
|
}
|
|
|
|
|
@@ -163,38 +331,91 @@ class SImgTextItem extends SObjectItem {
|
|
|
* @return 是否处理事件
|
|
|
*/
|
|
|
onDoubleClick(event: SMouseEvent): boolean {
|
|
|
- this.status = SItemStatus.Edit;
|
|
|
- return true;
|
|
|
+ // 如果为show状态 双击改对象则需改为编辑状态,处于编辑状态时
|
|
|
+ if (SItemStatus.Normal == this.status) {
|
|
|
+ this.status = SItemStatus.Edit;
|
|
|
+ this.grabItem(this);
|
|
|
+ } else if (SItemStatus.Edit == this.status) {
|
|
|
+ // 处于编辑状态时
|
|
|
+ this.status = SItemStatus.Normal;
|
|
|
+ this.releaseItem();
|
|
|
}
|
|
|
+ this.update();
|
|
|
+ return true;
|
|
|
+ }
|
|
|
|
|
|
- /**
|
|
|
- * 宽高发发生变化
|
|
|
- *
|
|
|
- * @return 所有子对象的并集
|
|
|
- */
|
|
|
- boundingRect(): SRect {
|
|
|
- let rect = this.img.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))
|
|
|
- }
|
|
|
- return rect;
|
|
|
+ /**
|
|
|
+ * Item 对象边界区域
|
|
|
+ *
|
|
|
+ * @return 边界矩阵
|
|
|
+ */
|
|
|
+ boundingRect(): SRect {
|
|
|
+ let rect = this.img
|
|
|
+ .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)
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
- * Item绘制操作
|
|
|
- *
|
|
|
- * @param painter painter对象
|
|
|
- */
|
|
|
- onDraw(painter: SPainter): void {
|
|
|
+ return rect.adjusted(-5, -5, 10, 10);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item 绘制操作
|
|
|
+ *
|
|
|
+ * @param painter 绘制对象
|
|
|
+ */
|
|
|
+ onDraw(painter: SPainter): void {
|
|
|
+ // 编辑状态时
|
|
|
+ if (this.status == SItemStatus.Edit) {
|
|
|
painter.pen.lineWidth = painter.toPx(1);
|
|
|
- painter.pen.color = new SColor("#00FF00");
|
|
|
+ painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
|
|
|
+ painter.pen.color = SColor.Black;
|
|
|
painter.brush.color = SColor.Transparent;
|
|
|
- if (this.showAnchor) {
|
|
|
- painter.brush.color = SColor.Gray
|
|
|
- }
|
|
|
painter.drawRect(this.boundingRect());
|
|
|
}
|
|
|
+
|
|
|
+ // 处于激活状态时
|
|
|
+ if (this.isActive) {
|
|
|
+ painter.pen.color = SColor.Transparent;
|
|
|
+ painter.brush.color = this.activeColor;
|
|
|
+ // 是否选中
|
|
|
+ if (this.selected) {
|
|
|
+ painter.shadow.shadowBlur = 10;
|
|
|
+ painter.shadow.shadowColor = this.activeColor;
|
|
|
+ painter.shadow.shadowOffsetX = 5;
|
|
|
+ painter.shadow.shadowOffsetY = 5;
|
|
|
+ painter.drawCircle(
|
|
|
+ this.img.x,
|
|
|
+ this.img.y,
|
|
|
+ (this.sWidth / 2.0 + 3) * 1.25
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ painter.drawCircle(
|
|
|
+ this.img.x,
|
|
|
+ this.img.y,
|
|
|
+ this.sWidth / 2.0 + 3
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 是否选中
|
|
|
+ if (this.selected) {
|
|
|
+ painter.pen.color = SColor.Transparent;
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
+ painter.shadow.shadowBlur = 10;
|
|
|
+ painter.shadow.shadowColor = new SColor(`#00000033`);
|
|
|
+ painter.shadow.shadowOffsetX = 5;
|
|
|
+ painter.shadow.shadowOffsetY = 5;
|
|
|
+ painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
|
|
|
export default {
|
|
@@ -212,7 +433,6 @@ class SImgTextItem extends SObjectItem {
|
|
|
* 页面挂载
|
|
|
*/
|
|
|
mounted() {
|
|
|
- console.log(22222222222222222)
|
|
|
// @ts-ignore
|
|
|
this.view = new SGraphView("editPolygon");
|
|
|
// @ts-ignore
|
|
@@ -247,13 +467,3 @@ class SImgTextItem extends SObjectItem {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- canvas {
|
|
|
- border: 1px solid #ccc;
|
|
|
- }
|
|
|
-
|
|
|
- canvas:focus {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-</style>
|