|
|
@@ -0,0 +1,412 @@
|
|
|
+/*
|
|
|
+ * *********************************************************************************************************************
|
|
|
+ *
|
|
|
+ * !!
|
|
|
+ * .F88X
|
|
|
+ * X8888Y
|
|
|
+ * .}888888N;
|
|
|
+ * i888888N; .:! .I$WI:
|
|
|
+ * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
|
|
|
+ * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
|
|
|
+ * +888888N; .8888888Y "&&8Y.}8,
|
|
|
+ * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
|
|
|
+ * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
|
|
|
+ * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
|
|
|
+ * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
|
|
|
+ * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
|
|
|
+ * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
|
|
|
+ * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
|
|
|
+ * .:R888888I
|
|
|
+ * .&888888I Copyright (c) 2009-2020. 博锐尚格科技股份有限公司
|
|
|
+ * ~8888'
|
|
|
+ * .!88~ All rights reserved.
|
|
|
+ *
|
|
|
+ * *********************************************************************************************************************
|
|
|
+ */
|
|
|
+
|
|
|
+import {
|
|
|
+ SObjectItem,
|
|
|
+ SImageItem,
|
|
|
+ STextItem,
|
|
|
+ SAnchorItem,
|
|
|
+ SGraphItem,
|
|
|
+
|
|
|
+} from "@persagy-web/graph";
|
|
|
+import { SItemStatus, ItemOrder, } from "@persagy-web/big";
|
|
|
+import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor";
|
|
|
+import { SMouseEvent } from "@persagy-web/base";
|
|
|
+import {
|
|
|
+ SSize,
|
|
|
+ SRect,
|
|
|
+ SPainter,
|
|
|
+ SColor,
|
|
|
+ SFont,
|
|
|
+ SPoint
|
|
|
+
|
|
|
+} from "@persagy-web/draw";
|
|
|
+import { SGraphEdit } from "..";
|
|
|
+import { Marker } from "../type/Marker";
|
|
|
+
|
|
|
+/**
|
|
|
+ * 图例item icon
|
|
|
+ *
|
|
|
+ * */
|
|
|
+export class SBaseIconTextEdit extends SGraphEdit {
|
|
|
+ /** item状态 */
|
|
|
+ _status: SItemStatus = SItemStatus.Normal;
|
|
|
+ get status(): SItemStatus {
|
|
|
+ return this._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();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 锚点list */
|
|
|
+ anchorList: SAnchorItem[] = [];
|
|
|
+
|
|
|
+ /** 是否显示文字 */
|
|
|
+ _showText: boolean = true;
|
|
|
+ get showText(): boolean {
|
|
|
+ return this._showText;
|
|
|
+ }
|
|
|
+ set showText(v: boolean) {
|
|
|
+ if (v === this._showText) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this._showText = v;
|
|
|
+ if (v) {
|
|
|
+ this.textItem.show();
|
|
|
+ } else {
|
|
|
+ this.textItem.hide();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 是否被选中 */
|
|
|
+ get selected(): boolean {
|
|
|
+ return this._selected && this.selectable && this.enabled;
|
|
|
+ } // Get selected
|
|
|
+ set selected(value: boolean) {
|
|
|
+ // 如果选择状态未变更
|
|
|
+ if (this.selected == value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this._selected = value;
|
|
|
+ if (value) {
|
|
|
+ this.img.scale = 1.25;
|
|
|
+ this.zOrder = ItemOrder.highLightOrder;
|
|
|
+ } else {
|
|
|
+ this.img.scale = 1;
|
|
|
+ this.zOrder = ItemOrder.markOrder;
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
+ } // Set selected
|
|
|
+
|
|
|
+ /** 是否激活 */
|
|
|
+ _isActive: boolean = false;
|
|
|
+ get isActive(): boolean {
|
|
|
+ return this._isActive;
|
|
|
+ } // Get 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();
|
|
|
+ } // Set isActive
|
|
|
+
|
|
|
+ /** 激活显示颜色 */
|
|
|
+ _activeColor: SColor = new SColor("#00000033");
|
|
|
+ get activeColor(): SColor {
|
|
|
+ return this._activeColor;
|
|
|
+ } // Get activeColor
|
|
|
+ set activeColor(v: SColor) {
|
|
|
+ this._activeColor = v;
|
|
|
+ this.update();
|
|
|
+ } // Set activeColor
|
|
|
+
|
|
|
+ /** X轴坐标 */
|
|
|
+ get x(): number {
|
|
|
+ return this.pos.x;
|
|
|
+ } // Get x
|
|
|
+ set x(v: number) {
|
|
|
+ this.pos.x = v;
|
|
|
+ this.$emit("changePos");
|
|
|
+ this.update();
|
|
|
+ } // Set x
|
|
|
+ /** Y轴坐标 */
|
|
|
+ get y(): number {
|
|
|
+ return this.pos.y;
|
|
|
+ } // Get y
|
|
|
+ set y(v: number) {
|
|
|
+ this.pos.y = v;
|
|
|
+ this.$emit("changePos");
|
|
|
+ this.update();
|
|
|
+ } // Set y
|
|
|
+
|
|
|
+ /** 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);
|
|
|
+
|
|
|
+ /** text item */
|
|
|
+ textItem: STextItem = new STextItem(this);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造体
|
|
|
+ *
|
|
|
+ * @param parent 父类
|
|
|
+ * @param data 锚点数据
|
|
|
+ * */
|
|
|
+ constructor(parent: SGraphItem | null, data: Marker) {
|
|
|
+ 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.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)
|
|
|
+ );
|
|
|
+ this.moveable = true;
|
|
|
+ this.selectable = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 计算并移动锚点的位置
|
|
|
+ *
|
|
|
+ * */
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } // Function changeAnchorPoint()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标按下事件
|
|
|
+ *
|
|
|
+ * @param event 事件对象
|
|
|
+ * @return 是否处理事件
|
|
|
+ * */
|
|
|
+ onMouseDown(event: SMouseEvent): boolean {
|
|
|
+ if (this.status == SItemStatus.Normal) {
|
|
|
+ return super.onMouseDown(event);
|
|
|
+ } else if (this.status == SItemStatus.Edit) {
|
|
|
+ return super.onMouseDown(event);
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ } // Function onMouseDown()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 宽高发发生变化
|
|
|
+ *
|
|
|
+ * @param oldSize 改之前的大小
|
|
|
+ * @param newSize 改之后大小
|
|
|
+ * */
|
|
|
+ onResize(oldSize: SSize, newSize: SSize) {
|
|
|
+ console.log(arguments);
|
|
|
+ } // Function onResize()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 鼠标双击事件
|
|
|
+ *
|
|
|
+ * @param event 鼠标事件
|
|
|
+ * @return 是否处理事件
|
|
|
+ * */
|
|
|
+ onDoubleClick(event: SMouseEvent): boolean {
|
|
|
+ // 如果位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;
|
|
|
+ } // Function onDoubleClick()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 宽高发生变化
|
|
|
+ *
|
|
|
+ * @return SRect 所有子对象的并集
|
|
|
+ * */
|
|
|
+ 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.adjusted(-5, -5, 10, 10);
|
|
|
+ } // Function boundingRect()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Item绘制操作
|
|
|
+ *
|
|
|
+ * @param painter 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)];
|
|
|
+ painter.pen.color = SColor.Black;
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } // Function onDraw()
|
|
|
+} // Class SIconTextItem
|
YaolongHan