|
@@ -0,0 +1,258 @@
|
|
|
+
|
|
|
+import { SGraphItem, SLineStyle, STextOrigin } from "@saga-web/graph/lib";
|
|
|
+import { Legend } from '../types/Legend';
|
|
|
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
|
|
|
+import { STextItem } from '@saga-web/graph/lib';
|
|
|
+import { hexify, uuid } from "@/components/mapClass/until"
|
|
|
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
|
|
|
+/**
|
|
|
+ * 图例节点Item(区域类型)
|
|
|
+ *
|
|
|
+ * * @author 张宇(taohuzy@163.com)
|
|
|
+ */
|
|
|
+export class SCustomLegendItem extends SPolygonItem {
|
|
|
+ /** 图例节点对象数据 */
|
|
|
+ data: Legend;
|
|
|
+
|
|
|
+ /** text item */
|
|
|
+ textItem: STextItem = new STextItem(this);
|
|
|
+
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ get font(): SFont {
|
|
|
+ return this.textItem.font;
|
|
|
+ }
|
|
|
+ set font(v: SFont) {
|
|
|
+ this.textItem.font = v;
|
|
|
+ }
|
|
|
+
|
|
|
+ get status(): SItemStatus {
|
|
|
+ return this._status;
|
|
|
+ }
|
|
|
+ // 编辑当前状态
|
|
|
+ set status(value: SItemStatus) {
|
|
|
+ this._status = value;
|
|
|
+ // 如果状态为show则需清栈
|
|
|
+ if (value == SItemStatus.Normal) {
|
|
|
+ // 切换显示状态显示文本
|
|
|
+ this.showText = true;
|
|
|
+ // 切换显示状态不可移动文本
|
|
|
+ this.textItem.moveable = false;
|
|
|
+
|
|
|
+ if (this.undoStack) {
|
|
|
+ this.undoStack.clear();
|
|
|
+ }
|
|
|
+ } else if (value == SItemStatus.Edit) {
|
|
|
+ // 切换编辑状态显示文本
|
|
|
+ this.showText = true;
|
|
|
+ // 切换编辑状态可移动文本
|
|
|
+ this.textItem.moveable = true;
|
|
|
+ } else if (value == SItemStatus.Create) {
|
|
|
+ // 切换创建状态不显示文本
|
|
|
+ this.showText = false;
|
|
|
+ // 切换创建状态不可移动文本
|
|
|
+ this.textItem.moveable = false;
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
+ };
|
|
|
+
|
|
|
+ /** 是否激活 */
|
|
|
+ _isActive: boolean = false;
|
|
|
+ get isActive(): boolean {
|
|
|
+ return this._isActive;
|
|
|
+ } // Get isActive
|
|
|
+ set isActive(v: boolean) {
|
|
|
+ this._isActive = v;
|
|
|
+ if (v) {
|
|
|
+ this.cursor = "pointer";
|
|
|
+ } else {
|
|
|
+ this.cursor = "auto";
|
|
|
+ }
|
|
|
+ this.update();
|
|
|
+ } // Set isActive
|
|
|
+
|
|
|
+ /** 是否显示文字 */
|
|
|
+ _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();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 是否蒙版遮罩 */
|
|
|
+ _maskFlag: boolean = false;
|
|
|
+ get maskFlag(): boolean {
|
|
|
+ return this._maskFlag;
|
|
|
+ }
|
|
|
+ set maskFlag(v: boolean) {
|
|
|
+ if (v === this._maskFlag) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this._maskFlag = v;
|
|
|
+ this.update()
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 构造函数
|
|
|
+ *
|
|
|
+ * @param parent 指向父对象
|
|
|
+ * @param data 图例节点对象数据
|
|
|
+ */
|
|
|
+ constructor(parent: SGraphItem | null, data: Legend) {
|
|
|
+ super(parent);
|
|
|
+ this.textItem.originPosition = STextOrigin.Centrum;
|
|
|
+ this.textItem.isTransform = false;
|
|
|
+ this.zOrder = ItemOrder.polygonOrder;
|
|
|
+ this.data = data;
|
|
|
+ if (!data.ID) {
|
|
|
+ data.ID = uuid()
|
|
|
+ }
|
|
|
+ this.id = data.ID;
|
|
|
+ this.name = data.Name;
|
|
|
+ this.text = data.Name;
|
|
|
+ if (data) {
|
|
|
+ this.setPointList = [];
|
|
|
+ let setPointList: SPoint[];
|
|
|
+ if (data.OutLine) {
|
|
|
+ if (data.OutLine[0] instanceof SPoint) {
|
|
|
+ // @ts-ignore
|
|
|
+ this.setPointList = data.OutLine;
|
|
|
+ } else {
|
|
|
+ setPointList = data.OutLine.map(i => {
|
|
|
+ return (new SPoint(i.X, i.Y))
|
|
|
+ })
|
|
|
+ this.setPointList = setPointList;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data.Properties.Zorder) {
|
|
|
+ this.zOrder = data.Properties.Zorder;
|
|
|
+ }
|
|
|
+ // 设置线宽
|
|
|
+ if (data.Properties.LineWidth) {
|
|
|
+ this.lineWidth = data.Properties.LineWidth;
|
|
|
+ }
|
|
|
+ if (data.Properties.StrokeColor) {
|
|
|
+ this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
|
|
|
+ }
|
|
|
+ if (data.Properties.FillColor) {
|
|
|
+ this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
|
|
|
+ }
|
|
|
+ if (data.Properties.TextPos) {
|
|
|
+ this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
|
|
|
+ }
|
|
|
+ if (data.Properties.color) {
|
|
|
+ this.color = new SColor(data.Properties.color);
|
|
|
+ }
|
|
|
+ if (data.Properties.font) {
|
|
|
+ this.font = new SFont("sans-serif", data.Properties.font);
|
|
|
+ }
|
|
|
+ if (data.Properties && data.Properties.IsActive) {
|
|
|
+ this.isActive = data.Properties.IsActive;
|
|
|
+ }
|
|
|
+ if (data.AttachObjectIds && data.AttachObjectIds.length) {
|
|
|
+ this.isActive = true;
|
|
|
+ }
|
|
|
+ switch (data.Properties.LineDash) {
|
|
|
+ case "solid":
|
|
|
+ this.lineStyle = SLineStyle.Solid;
|
|
|
+ break;
|
|
|
+ case "dotted":
|
|
|
+ this.lineStyle = SLineStyle.Dotted;
|
|
|
+ break;
|
|
|
+ case "dashed":
|
|
|
+ this.lineStyle = SLineStyle.Dashed;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.lineStyle = SLineStyle.Solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 监听多边形创建完成事件,并动态计算文本位置
|
|
|
+ this.connect("finishCreated", this, () => {
|
|
|
+ // 计算文本位置
|
|
|
+ let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
|
+ return pre + (cur.x / arr.length)
|
|
|
+ }, 0),
|
|
|
+ y: number = this.getPointList.reduce((pre, cur, index, arr) => {
|
|
|
+ return pre + (cur.y / arr.length)
|
|
|
+ }, 0);
|
|
|
+ this.textItem.moveTo(x, y);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ toData(): any {
|
|
|
+ this.data.Pos = { X: this.x, Y: this.y };
|
|
|
+ this.data.Name = this.name;
|
|
|
+ this.data.Properties.Zorder = this.zOrder;
|
|
|
+ this.data.Properties.FillColor = this.fillColor.value;
|
|
|
+ this.data.Properties.StrokeColor = this.strokeColor.value;
|
|
|
+ this.data.Properties.LineWidth = this.lineWidth;
|
|
|
+ switch (this.lineStyle) {
|
|
|
+ case SLineStyle.Solid:
|
|
|
+ this.data.Properties.LineDash = "solid";
|
|
|
+ break;
|
|
|
+ case SLineStyle.Dotted:
|
|
|
+ this.data.Properties.LineDash = "dotted";
|
|
|
+ break;
|
|
|
+ case SLineStyle.Dashed:
|
|
|
+ this.data.Properties.LineDash = "dashed";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.data.Properties.LineDash = "solid";
|
|
|
+ }
|
|
|
+ this.data.OutLine = this.getPointList.map(pos => {
|
|
|
+ return {
|
|
|
+ X: pos.x,
|
|
|
+ Y: pos.y
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
|
|
|
+ this.data.Properties.font = this.font.size;
|
|
|
+ this.data.Properties.color = this.color.value;
|
|
|
+ this.data.Properties.IsActive = this.isActive;
|
|
|
+ return this.data;
|
|
|
+ }
|
|
|
+
|
|
|
+ onDraw(painter: SPainter) {
|
|
|
+ if (this.maskFlag && this.status == SItemStatus.Normal) {
|
|
|
+ let color = new SColor(this.strokeColor)
|
|
|
+ color.alpha = color.alpha / 5
|
|
|
+ let brushcolor = new SColor(this.fillColor)
|
|
|
+ brushcolor.alpha = brushcolor.alpha / 5
|
|
|
+ painter.pen.color = color
|
|
|
+ painter.pen.lineCapStyle = SLineCapStyle.Square
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.lineWidth)
|
|
|
+ painter.brush.color = brushcolor
|
|
|
+ if (this.selected) {
|
|
|
+ painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
|
|
|
+ painter.shadow.shadowBlur = 10;
|
|
|
+ painter.shadow.shadowColor = new SColor(`#00000033`);
|
|
|
+ painter.shadow.shadowOffsetX = 5;
|
|
|
+ painter.shadow.shadowOffsetY = 5;
|
|
|
+ }
|
|
|
+ // @ts-ignore
|
|
|
+ painter.drawPolygon([...this.pointList]);
|
|
|
+ } else {
|
|
|
+ super.onDraw(painter);
|
|
|
+ }
|
|
|
+ }
|
|
|
+} // Class SZoneLegendItem
|