123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444 |
- /*
- * *********************************************************************************************************************
- *
- * !!
- * .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-2021. 博锐尚格科技股份有限公司
- * ~8888'
- * .!88~ All rights reserved.
- *
- * *********************************************************************************************************************
- */
- import {
- SObjectItem,
- SImageItem,
- STextItem,
- SAnchorItem,
- SGraphItem
- } from "@persagy-web/graph";
- import { SItemStatus, ItemOrder } from "../../index";
- import { SMouseEvent } from "@persagy-web/base";
- import {
- SSize,
- SRect,
- SPainter,
- SColor,
- SFont,
- SPoint
- } from "@persagy-web/draw";
- import { Anchor } from "../../types/topology/Anchor";
- /**
- * 图例 item
- *
- * @author 郝建龙 <haojianlong@sagacloud.cn>
- */
- export class SIconTextItem extends SObjectItem {
- /** 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.textItemList.forEach((t): void => {
- t.moveable = false;
- });
- this.img.moveable = false;
- } else if (v == SItemStatus.Edit) {
- // 编辑状态时
- this.moveable = false;
- this.textItemList.forEach((t): void => {
- t.moveable = true;
- });
- this.img.moveable = true;
- } else if (v == SItemStatus.Create) {
- // 创建状态时
- this.moveable = true;
- this.textItemList.forEach((t): void => {
- t.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;
- }
- this._showText = v;
- // 是否显示文字
- if (v) {
- this.textItemList.forEach((t): void => {
- t.show();
- });
- } else {
- this.textItemList.forEach((t): void => {
- t.hide();
- });
- }
- }
- /** 是否被选中 */
- 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;
- this.zOrder = ItemOrder.highLightOrder;
- } else {
- this.img.scale = 1;
- this.zOrder = ItemOrder.markOrder;
- }
- this.update();
- }
- /** 是否激活 */
- _isActive: boolean = false;
- get isActive(): boolean {
- return this._isActive;
- }
- set isActive(v: boolean) {
- this._isActive = v;
- // 激活状态
- if (v) {
- this.cursor = "pointer";
- } else {
- this.cursor = "auto";
- }
- this.update();
- }
- /** 激活显示颜色 */
- _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;
- }
- set x(v: number) {
- this.pos.x = v;
- this.$emit("changePos");
- this.update();
- }
- /** Y 轴坐标 */
- get y(): number {
- return this.pos.y;
- }
- set y(v: number) {
- this.pos.y = v;
- this.$emit("changePos");
- this.update();
- }
- /** 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): void => {
- t.visible = v;
- });
- }
- /** 文本颜色 */
- get color(): SColor {
- if (this.textItemList.length) {
- return this.textItemList[0].color;
- } else {
- return new SColor();
- }
- }
- set color(v: SColor) {
- this.textItemList.forEach((item): void => {
- item.color = v;
- });
- this.update();
- }
- /** 文本字体 */
- get font(): SFont {
- if (this.textItemList.length) {
- return this.textItemList[0].font;
- } else {
- return new SFont();
- }
- }
- set font(v: SFont) {
- this.textItemList.forEach((item): void => {
- item.font = v;
- });
- this.update();
- }
- /** img Item */
- img: SImageItem = new SImageItem(this);
- /** text Item */
- textItemList: STextItem[] = [];
- /**
- * 构造体
- *
- * @param parent 父类
- * @param data 锚点数据
- */
- constructor(parent: SGraphItem | null, data?: Anchor[]) {
- 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;
- // 锚点数据存在时
- if (data && data.length) {
- anchorPoint = data.map((t): any => {
- return {
- x: t.pos.x,
- y: t.pos.y,
- id: t.anchorId
- };
- });
- } 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): SAnchorItem => {
- 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): void => {
- item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
- });
- }
- }
- /**
- * 添加文本
- *
- * @param item 文本图例
- */
- addTextItem(item: STextItem): void {
- this.textItemList.push(item);
- }
- /**
- * 删除文本
- *
- * @param index 索引
- */
- removeTextItem(index: number): void {
- let [deleteItem] = this.textItemList.splice(index, 1);
- if (this.scene) {
- this.scene.removeItem(deleteItem);
- }
- }
- /**
- * 宽高发发生变化
- *
- * @param oldSize 改之前的大小
- * @param newSize 改之后大小
- */
- onResize(oldSize: SSize, newSize: SSize): void {
- console.log(arguments);
- }
- /**
- * Item 对象边界区域
- *
- * @return 边界矩阵
- */
- boundingRect(): SRect {
- let rect = this.img
- .boundingRect()
- .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
- // 显示文字时
- if (this.showText) {
- this.textItemList.forEach((t): void => {
- rect = rect.unioned(
- t.boundingRect().adjusted(t.pos.x, t.pos.y, 0, 0)
- );
- });
- }
- return rect.adjusted(-5, -5, 10, 10);
- }
- /**
- * Item 绘制操作
- *
- * @param painter 绘制对象
- */
- onDraw(painter: SPainter): void {
- 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(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;
- // 是否选中
- 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);
- }
- }
- }
- }
|