1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020 |
- import { SMouseEvent, SUndoStack } from "@saga-web/base";
- import { SGraphScene, SGraphLayoutType, SAnchorItem } from '@saga-web/graph/lib';
- import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder, STooltipItem, ItemColor, Transparency, SPolygonItem } from "@saga-web/big";
- import { SGraphItem, SLineStyle, SGraphPropertyCommand, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
- import { SGraphAddListCommand } from "./SGraphAddListCommand"
- import { SGraphDeleteCommand } from "./SGraphDeleteCommand"
- import { SGraphDeleteListCommand } from "./SGraphDeleteListCommand"
- import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
- import { SSCPZZoneLegendItem } from "@/lib/items/SSCPZZoneLegendItem";
- import { SFHFQZoneLegendItem } from "@/lib/items/SFHFQZoneLegendItem";
- import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
- import { TipelineItem } from "@/lib/items/TipelineItem";
- import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
- import { SPoint, SFont, SColor, SRect } from '@saga-web/draw/lib';
- import { Legend } from '@/lib/types/Legend';
- import { Relation } from '@/lib/types/Relation';
- import { uuid } from "@/components/mapClass/until";
- import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
- import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
- import { SSpaceItem } from '@saga-web/big/lib/items/floor/SSpaceItem';
- import { SMathUtil } from '@saga-web/big/lib/utils/SMathUtil';
- import { MinDis } from '@saga-web/big/lib/types/MinDis';
- import { HighlightItem } from '@/lib/items/HighlightItem';
- import { TimeSelect } from 'element-ui';
- import { STopologyParser } from '@/lib/parsers/STopologyParser';
- import { SCustomLegendItem } from '@/lib/items/SCustomLegendItem';
- import { SImageShowType } from "@saga-web/graph/lib/enums/SImageShowType";
- import { SEquipmentItem } from "@/lib/items/SEquipmentItem"; // 设备类
- /**
- * 在线绘图
- *
- * @author 韩耀龙
- */
- export class EditScence extends SGraphScene {
- undoStack = new SUndoStack();
- /** 命令 1 绘制直线 */
- private cmd = 'choice';
- /** 获取当前状态 */
- get getCmd(): string {
- return this.cmd;
- }
- /** 背景图像对象 */
- private backgroundImgItem: SImageItem | null = null;
- /** 背景图像是否加载完成 */
- private bgImg: boolean = false;
- /** 设备对象 */
- equipmentItem: any = [];
- /** 编辑当前状态 */
- set setCmd(cmd: string) {
- if (cmd == 'choice') {
- this.grabItem = null;
- }
- this.cmd = cmd;
- if (this.focusItem) {
- // 取消操作
- this.focusItem.cancelOperate();
- this.focusItem = null;
- // this.selectContainer.clear()
- }
- if (this.view) {
- this.view.update();
- }
- };
- /** 绘制区域时 是否为点选 */
- isSelecting: boolean = true;
- /** 是否开启吸附 */
- isAbsorbing: boolean = false;
- /** 吸附展示item */
- highLight: HighlightItem | null = null;
- /** 当前选中焦点Item */
- focusItem: SGraphItem | null = null;
- /** 当前选中焦点ItemList */
- focusItemList: SGraphItem[] | null = null;
- /**图例节点 */
- Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
- /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
- Markers: any = [];
- /** 管线对象 */
- Relations: any = [];
- _isEditStatus: Boolean = true; // 是否可编辑
- set isEditStatus(bol: Boolean): void {
- this._isEditStatus = bol;
- }
- get isEditStatus(): Boolean {
- return this._isEditStatus
- }
- //复制粘贴
- copyString = {
- Nodes: [],
- Markers: [],
- Relations: []
- };
- constructor() {
- super();
- // // 选择绑定选额item事件
- this.selectContainer.connect("listChange", this, this.listChange);
- ItemColor.spaceColor = new SColor("#f0f0f0")
- ItemColor.wallColor = new SColor("#d4d4d4")
- ItemColor.columnColor = new SColor("#d4d4d4")
- ItemColor.virtualWallColor = new SColor("#d4d4d4")
- ItemColor.selectColor = new SColor("#f0f0f0")
- ItemColor.spaceBorderColor = new SColor("#d4d4d4")
- }
- /** 绘制图例样式 */
- _legend: any | null = null;
- get getlegend(): any {
- return this._legend;
- };
- set setlegend(obj: any) {
- this._legend = obj;
- }
- /** fid=>item映射,由解析器存入 */
- fidToItem = {}
- /**
- * 监听变化
- * @param obj 变化后的对象
- */
- listChange(obj: any) {
- let itemType: string = 'equipment';
- this.focusItemList = obj.itemList;
- if (obj.itemList[0] instanceof STextMarkerItem) {
- itemType = 'baseText'
- } else if (obj.itemList[0] instanceof SImageMarkerItem) {
- itemType = 'baseImage'
- } else if (obj.itemList[0] instanceof SLineMarkerItem) {
- itemType = 'baseLine'
- } else if (obj.itemList[0] instanceof SZoneLegendItem) {
- itemType = 'Zone'
- } else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
- itemType = 'Zone'
- } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
- itemType = 'Zone'
- } else if (obj.itemList[0] instanceof SCustomLegendItem) {
- itemType = 'Zone'
- } else if (obj.itemList[0] instanceof SImageLegendItem) {
- itemType = 'Image'
- } else if (obj.itemList[0] instanceof TipelineItem) {
- itemType = 'Line'
- } else if (obj.itemList[0] instanceof SSpaceItem) { // 点选
- this.clickToAddArea(obj.itemList[0]);
- return
- } else if (obj.itemList[0] instanceof SEquipmentItem) {
- itemType = "Equipment";
- }
- else {
- itemType = ''
- };
- if (obj.itemList.length == 1) {
- // 获取聚焦item
- this.focusItem = obj.itemList[0]
- } else {
- this.focusItem = null
- }
- let msg = {
- itemList: obj.itemList,
- itemType,
- }
- this.emitChange(msg)
- }
- emitChange(msg: any) {
- }
- /**
- * 增加线段item
- */
- addLine(event: SMouseEvent): boolean {
- const clickItem = this.clickIsItem(event);
- if (clickItem) {
- let centerPoint = clickItem.boundingRect().center();
- const p = clickItem.mapToScene(centerPoint.x, centerPoint.y);
- event.x = p.x;
- event.y = p.y;
- }
- const data = {
- /** ID */
- ID: uuid(),
- /** 名称 */
- Name: '直线',
- /** 图标(Image),线类型(Line) */
- Type: "Line",
- /** 位置 */
- Pos: { X: 0, Y: 0 },
- /** 由应用自己定义 */
- Properties: {
- IconUrl: require("../../assets/images/t-line-hover.png"),
- Line: [{ X: event.x, Y: event.y }],
- LineWidth: 1,
- StrokeColor: "#bdc3c8"
- }
- }
- const item = new SLineMarkerItem(null, data);
- item.status = SItemStatus.Create;
- item.selectable = true;
- this.addItem(item);
- // this.Markers.push(item);
- item.connect("finishCreated", this, this.finishCreated);
- this.grabItem = item;
- this.focusItem = item;
- // 起始item点
- item.startItem = clickItem;
- if (clickItem) {
- clickItem.connect('onMove', item, item.changePos);
- }
- return true
- }
- /**
- * 增加折线item
- */
- addPolylineItem(event: SMouseEvent): boolean {
- const point = new SPoint(event.x, event.y)
- const item = new TipelineItem(null, [point]);
- //设置状态
- item.selectable = true;
- item.status = SItemStatus.Create;
- this.addItem(item);
- item.connect("finishCreated", this, this.finishCreated);
- this.grabItem = item;
- this.focusItem = item;
- return true
- }
- /**
- * 增加管道 lenged
- */
- addTipelineItem(event: SMouseEvent): boolean {
- const anc = this.clickIsAnchor(event);
- if (anc) {
- const p = anc.mapToScene(0, 0)
- anc.isConnected = true;
- event.x = p.x;
- event.y = p.y;
- }
- const LegendData: Relation = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementId: this._legend.Id,
- PointList: [{ X: event.x, Y: event.y }],
- LineType: "Line",
- Properties: {
- IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
- LineDash: this._legend.LineDash,
- LineWidth: this._legend.LineWidth,
- Color: this._legend.Color,
- },
- }
- const item = new TipelineItem(null, LegendData);
- //设置状态
- item.selectable = true;
- item.status = SItemStatus.Create;
- this.addItem(item);
- // this.Relations.push(item);
- item.connect("finishCreated", this, this.finishCreated);
- this.grabItem = item;
- this.focusItem = item;
- // 起始锚点
- item.startAnchor = anc;
- if (anc) {
- anc.parent?.connect('changePos', item, item.changePos)
- item.anchor1ID = anc.id;
- item.node1Id = anc.parent.id;
- }
- return true
- }
- /**
- * 增加多边形item lenged
- */
- addPolygonItem(event: SMouseEvent): void {
- const SubType = this._legend.SubType ? this._legend.SubType : '';
- const LegendData: Legend = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 1,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Type: "Zone",
- Pos: { X: event.x, Y: event.y },
- OutLine: [{ X: event.x, Y: event.y }],
- SubType: SubType,
- Properties: {
- IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
- StrokeColor: this._legend.Color,
- FillColor: this._legend.FillColor,
- LineDash: this._legend.LineDash,
- LineWidth: this._legend.LineWidth,
- font: 14,
- color: "#1F2429",
- TextPos: { X: 0, Y: 0 },
- InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],
- InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
- InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
- },
- }
- let Polylines = null;
- if (SubType == "SCPZ") {
- Polylines = new SSCPZZoneLegendItem(null, LegendData);
- } else if (SubType == "FHFQ") {
- Polylines = new SFHFQZoneLegendItem(null, LegendData);
- } else if (SubType == "CUSTOM") {
- Polylines = new SCustomLegendItem(null, LegendData);
- } else {
- Polylines = new SZoneLegendItem(null, LegendData);
- }
- Polylines.selectable = true;
- //设置状态
- Polylines.status = SItemStatus.Create;
- // Polylines.moveable = true;
- this.addItem(Polylines);
- Polylines.connect("finishCreated", this, this.finishCreated);
- this.grabItem = Polylines;
- this.focusItem = Polylines;
- }
- /**
- * 点选创建区域
- */
- clickToAddArea(item: SSpaceItem): void {
- if (this.cmd != 'Zone') {
- return
- }
- if (this.isSelecting && this._legend) {
- //@ts-ignore
- item.isExtracted = true
- const SubType = this._legend.SubType ? this._legend.SubType : '';
- const LegendData: Legend = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 1,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Type: "Zone",
- Pos: { X: item.x, Y: item.y },
- OutLine: item.pointArr[0],
- SubType: SubType,
- Properties: {
- IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
- StrokeColor: this._legend.Color,
- FillColor: this._legend.FillColor,
- LineDash: this._legend.LineDash,
- LineWidth: this._legend.LineWidth,
- font: 14,
- color: "#1F2429",
- FID: item.data.SourceId,
- TextPos: { X: item.data.Location.Points[0].X, Y: -item.data.Location.Points[0].Y },
- InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],
- InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
- InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
- },
- }
- let Polylines = null;
- if (SubType == "SCPZ") {
- Polylines = new SSCPZZoneLegendItem(null, LegendData);
- } else if (SubType == "FHFQ") {
- Polylines = new SFHFQZoneLegendItem(null, LegendData);
- } else {
- Polylines = new SZoneLegendItem(null, LegendData);
- }
- Polylines.selectable = true;
- //设置状态
- Polylines.status = SItemStatus.Normal;
- this.addItem(Polylines);
- // this.Nodes.push(Polylines);
- this.finishCreated(Polylines)
- this.focusItem = Polylines;
- this.scenceUpdate(this);
- }
- }
- /**
- * 增加图片Item mark
- */
- addImgItem(event: SMouseEvent) {
- const data = {
- /** ID */
- ID: uuid(),
- /** 名称 */
- Name: '图片',
- Num: 1,
- /** 图标(Image),线类型(Line) */
- Type: "Image",
- /** 位置 */
- Pos: { X: event.x, Y: event.y },
- /** 由应用自己定义 */
- Properties: {
- IconUrl: require(`../../assets/images/t-img-hover.png`),
- StrokeColor: "#c0ccda",
- Url: '',
- }
- }
- const item = new SImageMarkerItem(null, data);
- item.selectable = true;
- item.moveable = true;
- this.addItem(item);
- this.Markers.push(item);
- this.grabItem == null;
- this.focusItem = item;
- this.finishCreated(item);
- this.scenceUpdate(this);
- }
- /**
- * 增加文字item
- */
- addTextItem(event: SMouseEvent): void {
- const data = {
- /** ID */
- ID: uuid(),
- /** 名称 */
- Name: '文本',
- /** 图标 */
- Type: "Text",
- /** 位置 */
- Pos: { X: event.x, Y: event.y },
- /** 由应用自己定义 */
- Properties: {
- IconUrl: require(`../../assets/images/t-text-hover.png`),
- Text: '请在右侧属性栏输入文字!',
- Color: "#646c73",
- Font: 14,
- BackgroundColor: "#f7f9facc"
- }
- }
- const item = new STextMarkerItem(null, data);
- item.moveTo(event.x, event.y);
- item.selectable = true;
- item.moveable = true;
- this.addItem(item);
- this.Markers.push(item);
- this.grabItem = null;
- this.focusItem = item;
- this.cmd = 'choice';
- this.finishCreated(item);
- this.scenceUpdate(this);
- }
- /**
- * 增加图标lenged图标
- */
- addIconItem(event: SMouseEvent): void {
- //获取信息工程化相关参数
- const LegendData: Legend = {
- ID: uuid(),
- Name: "",
- GraphElementType: this._legend.Type,
- Num: 1,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Pos: { X: event.x, Y: event.y },
- Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
- Rolate: { X: 0, Y: 0, Z: 0 },
- Size: { Width: 0, Height: 0 }, // 大小
- Type: this._legend.Type,
- Properties: {
- IconUrl: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
- Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
- Num: 1, // 此num与信息工程化得num无关
- Size: {
- Width: this._legend.Size ? this._legend.Size.Width ? this._legend.Size.Width : 32 : 32, //icon 的宽
- Height: this._legend.Size ? this._legend.Size.Height ? this._legend.Size.Height : 32 : 32, //icon 的高
- },
- font: 16, //font
- color: "#1F2429", //字体颜色
- FrameColor: this._legend.FrameColor,
- GraphCategoryId: this._legend.GraphCategoryId,
- InfoSystemId: this._legend.InfoSystemId ? this._legend.InfoSystemId : '',
- InfoTypeId: this._legend.InfoTypeId.length ? this._legend.InfoTypeId : [],// 铺位可视化Typeid(用于编辑工程信息化时默认问题)
- InfoLocal: this._legend.InfoLocal.length ? this._legend.InfoLocal : []
- },
- }
- const cmd = this.cmd;
- const item = new SImageLegendItem(null, LegendData);
- this.cmd = 'choice';
- item.selectable = true;
- item.moveable = true;
- this.addItem(item);
- this.Nodes.push(item);
- this.grabItem = null;
- this.focusItem = item;
- this.finishCreated(item);
- this.scenceUpdate(this);
- if (event.ctrlKey) {
- this.cmd = cmd;
- }
- }
- /**
- * 更改item对应属性
- */
- editItemStatus(): void {
- }
- /**
- * 更改文本对应属性
- * @param str string 文字内容
- */
- updatedText(str: string): void {
- if (this.focusItem) {
- const oldMsg = this.focusItem.text;
- const newMsg = str;
- this.focusItem.text = str;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", oldMsg, newMsg));
- this.scenceUpdate(this);
- }
- }
- /**
- * 更改文本fontSize属性
- * @param size number 文字大小
- */
- updatedFontSize(size: number): void {
- if (this.focusItem) {
- let old = new SFont(this.focusItem.font);
- let font = new SFont(this.focusItem.font);
- font.size = size;
- this.focusItem.font = font;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font));
- }
- }
- /**
- * 更改线宽属性
- * @param lineWidth number 线宽大小
- */
- updatedLineWidth(lineWidth: number): void {
- if (this.focusItem) {
- const oldMsg = this.focusItem.lineWidth;
- const newMsg = lineWidth;
- this.focusItem.lineWidth = lineWidth;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "lineWidth", oldMsg, newMsg));
- }
- }
- /**
- * 更改文本颜色属性
- * @param str string 颜色
- */
- updatedFontColor(color: string): void {
- if (this.focusItem) {
- const oldMsg = this.focusItem.color;
- const newMsg = new SColor(color);
- this.focusItem.color = newMsg;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", oldMsg, newMsg));
- }
- }
- /**
- * 更改border颜色
- * @param color string 颜色
- */
- updatedBorderColor(color: string): void {
- if (this.focusItem) {
- const oldMsg = this.focusItem.strokeColor;
- const newMsg = new SColor(color);
- this.focusItem.strokeColor = newMsg;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "strokeColor", oldMsg, newMsg));
- }
- }
- /**
- * 更改item宽
- * @param width number 颜色
- */
- updatedWidth(width: number): void {
- if (this.focusItem) {
- let oldMsg = null;
- const newMsg = width;
- if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
- oldMsg = this.focusItem.sWidth
- this.focusItem.sWidth = width;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "sWidth", oldMsg, newMsg));
- } else {
- oldMsg = this.focusItem.width
- this.focusItem.width = width;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "width", oldMsg, newMsg));
- }
- }
- }
- /**
- * 更改item高
- * @param height number 颜色
- */
- updatedHeight(height: number): void {
- if (this.focusItem) {
- let oldMsg = null;
- const newMsg = height;
- if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
- oldMsg = this.focusItem.sHeight;
- this.focusItem.sHeight = height;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "sHeight", oldMsg, newMsg));
- } else {
- oldMsg = this.focusItem.height;
- this.focusItem.height = height;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "height", oldMsg, newMsg));
- }
- }
- }
- /**
- * 更改item坐标
- * @param x number x x坐标
- * @param y number y y坐标
- */
- updatedPosition(x: number, y: number): void {
- if (this.focusItem) {
- let p = this.focusItem.mapFromScene(x, y)
- // newx - oldx = newleft - oldleft
- // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界
- this.focusItem.x = (p.x - this.focusItem.boundingRect().left) * this.focusItem.inverseScale + this.focusItem.x;
- this.focusItem.y = (p.y - this.focusItem.boundingRect().top) * this.focusItem.inverseScale + this.focusItem.y;
- if (this.focusItem instanceof SPolylineItem || this.focusItem instanceof SPolygonItem || this.focusItem instanceof SLineItem) {
- this.focusItem.moveToOrigin(this.focusItem.x, this.focusItem.y)
- }
- }
- }
- /**
- * 更改item 背景色坐标
- * @param color string 颜色color
- */
- updatedbackColor(color: string): void {
- if (this.focusItem) {
- const newMsg = new SColor(color);
- const oldMsg = this.focusItem.backgroundColor;
- this.focusItem.backgroundColor = new SColor(color);
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "backgroundColor", oldMsg, newMsg));
- }
- }
- /**
- * 更改item Url
- * @param url string 图片key
- */
- upadataImageUrl(url: string): void {
- if (this.focusItem) {
- const newMsg = '/serve/topology-wanda/Picture/query/' + url;
- const oldMsg = this.focusItem.url;
- this.focusItem.url = newMsg;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "url", oldMsg, newMsg));
- }
- }
- /**
- * 更改item border
- * @param val string border类型
- */
- upadataBorder(val: string): void {
- if (this.focusItem) {
- let borderStyle = null;
- if (val == 'dashed') {
- borderStyle = SLineStyle.Dashed;
- } else if (val == 'dotted') {
- borderStyle = SLineStyle.Dotted;
- } else if (val == 'solid') {
- borderStyle = SLineStyle.Solid;
- }
- const newMsg = borderStyle;
- const oldMsg = this.focusItem.lineStyle;
- this.focusItem.lineStyle = borderStyle;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "lineStyle", oldMsg, newMsg));
- }
- }
- /**
- * 更改item 名称
- * @param val string border类型
- */
- upadataLengedName(val: string): void {
- if (this.focusItem && this.focusItem.data) {
- const newMsg = val;
- const oldMsg = this.focusItem.text;
- this.focusItem.text = val;
- this.focusItem.name = val;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", oldMsg, newMsg));
- this.scenceUpdate(this);
- }
- }
- /**
- * 更改item 名称
- * @param val string border类型
- */
- updateEquipmentName(val: string): void {
- console.log(this.focusItem)
- this.focusItem && (this.focusItem!.name = val)
- }
- /**
- * 信息点修改
- * @param val 修改的信息点
- */
- updateEquipmentInfoName(val: object): void {
- console.log(val)
- if (this.focusItem) {
- // @ts-ignore
- this.focusItem.info = val
- }
- }
- /**
- * 添加信息点
- */
- addEquipmentInfo(): void {
- // @ts-ignore
- this.focusItem && this.focusItem.addEquipmentInfo()
- }
- /**
- * 删除信息点
- */
- deleteEquipmentInfo() {
- // @ts-ignore
- this.focusItem && this.focusItem.deleteEquipmentInfo()
- }
- /**
- * 更改item Num数量
- * @param num number item数量 (只对icon设备类)
- */
- upadatImageNum(num: number): void {
- if (this.focusItem && this.focusItem.num) {
- const newMsg = num;
- const oldMsg = this.focusItem.num;
- this.focusItem.num = num;
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "num", oldMsg, newMsg));
- }
- }
- /**
- * 更改item Num数量
- * @param num number item数量 (只对icon设备类)
- */
- upadatfillColor(fillColor: string): void {
- if (this.focusItem && this.focusItem.fillColor) {
- let fillColorT;
- if (fillColor.length == 7) {
- fillColorT = fillColor + Transparency[15];
- if (this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
- const sc = new SColor(this.focusItem.fillColor);
- const alp = ((sc.alpha / 255) * 100).toFixed()
- fillColorT = fillColor + Transparency[alp];
- // fillColorT = fillColor + Transparency[80];
- }
- } else {
- fillColorT = fillColor;
- }
- const newMsg = new SColor(fillColorT);
- const oldMsg = this.focusItem.fillColor;
- this.focusItem.fillColor = new SColor(fillColorT);
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "fillColor", oldMsg, newMsg));
- }
- }
- /**
- * 更改图例说
- * @param num number
- */
- upadatitemExplain(ItemExplain: string): void {
- if (this.focusItem) {
- this.focusItem.data.Properties.ItemExplain = ItemExplain;
- }
- }
- /**
- * 更新工程信息化的相关数据
- * @param AttachObjectIds Array
- */
- upadatAttachObjectIds(AttachObjectIds: []): void {
- if (this.focusItem) {
- this.focusItem.data.AttachObjectIds = AttachObjectIds;
- // 重新选中focusitem
- const item = this.focusItem;
- this.selectContainer.clear();
- this.selectContainer.toggleItem(item);
- if (
- item instanceof SImageLegendItem ||
- item instanceof SZoneLegendItem ||
- item instanceof SSCPZZoneLegendItem ||
- item instanceof SFHFQZoneLegendItem
- ) {
- let arr = item.data.AttachObjectIds;
- if (arr && arr.length && arr[arr.length - 1].name) {
- let name = item.name;
- item.name = name + `\n${arr[arr.length - 1].name}`;
- item.text = name + `\n${arr[arr.length - 1].name}`;
- }
- // 绑定工程信息化数据后设置状态
- if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
- item.isActive = true;
- } else {
- item.isActive = false;
- }
- }
- }
- }
- /**
- * 自定义多边形修改背景色
- */
- updateCustomBgColor(val: string): void {
- if (this.focusItem) {
- const newMsg = new SColor(val);
- const oldMsg = this.focusItem.fillColor;
- this.focusItem.fillColor = new SColor(val)
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "fillColor", oldMsg, newMsg));
- }
- }
- /**
- * 自定义多边形修改边框色
- */
- updateCustomBdColor(val: string): void {
- if (this.focusItem) {
- const newMsg = new SColor(val);
- const oldMsg = this.focusItem.strokeColor;
- this.focusItem.strokeColor = new SColor(val)
- this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "strokeColor", oldMsg, newMsg));
- }
- }
- /**
- * 删除指定item
- */
- deleiteItem(): void {
- if (this.focusItem) {
- if ((this.focusItem instanceof SZoneLegendItem ||
- this.focusItem instanceof SSCPZZoneLegendItem ||
- this.focusItem instanceof SFHFQZoneLegendItem ||
- this.focusItem instanceof TipelineItem) &&
- this.focusItem.curIndex != -1
- ) {
- this.focusItem.deletePoint(this.focusItem.curIndex);
- } else {
- this.undoStack.push(new SGraphDeleteCommand(this, this.focusItem));
- this.removeItem(this.focusItem);
- let a = -1
- this.Nodes.forEach((item: any, index: number) => {
- if (item.id == this.focusItem.id) {
- a = index
- }
- });
- if (a > -1) {
- this.Nodes.splice(a, 1);
- }
- let b = -1;
- this.Markers.forEach((item: any, index: number) => {
- if (item.id == this.focusItem.id) {
- b = index
- }
- });
- if (b > -1) {
- this.Markers.splice(b, 1);
- }
- let c = -1;
- this.Relations.forEach((item: any, index: number) => {
- if (item.id == this.focusItem.id) {
- c = index
- }
- });
- if (c > -1) {
- this.Relations.splice(c, 1);
- }
- this.grabItem = null;
- this.focusItem = null;
- if (this.view) {
- this.view.update();
- }
- this.scenceUpdate(this);
- }
- } else {
- //批量删除
- if (!this.focusItemList) {
- return
- }
- this.undoStack.push(new SGraphDeleteListCommand(this, this.focusItemList))
- this.focusItemList.forEach((focusItem) => {
- this.removeItem(focusItem);
- let a = -1
- this.Nodes.forEach((item: any, index: number) => {
- if (item.id == focusItem.id) {
- a = index
- }
- });
- if (a > -1) {
- this.Nodes.splice(a, 1);
- }
- let b = -1;
- this.Markers.forEach((item: any, index: number) => {
- if (item.id == focusItem.id) {
- b = index
- }
- });
- if (b > -1) {
- this.Markers.splice(b, 1);
- }
- let c = -1;
- this.Relations.forEach((item: any, index: number) => {
- if (item.id == focusItem.id) {
- c = index
- }
- });
- if (c > -1) {
- this.Relations.splice(c, 1);
- }
- });
- this.focusItemList = [];
- this.grabItem = null;
- this.focusItem = null;
- if (this.view) {
- this.view.update();
- }
- this.scenceUpdate(this);
- }
- }
- scenceUpdate(scence: any) {
- }
- /**
- * 对齐指定item
- * @param v
- */
- changeAlignItem(v: any): void {
- this.selectContainer.layout(v);
- }
- /**
- * 图层排序
- * @param v
- */
- changeOrderItem(v: any): void {
- this.selectContainer.setOrder(v);
- }
- /**
- * 提取item
- */
- extractItem(): void {
- console.log(this)
- }
- /**
- * 保存数据
- */
- saveMsgItem(): any {
- const Nodes: any = [];
- const Markers: any = [];
- const Relations: any = [];
- this.Nodes.forEach(e => {
- Nodes.push(e.toData())
- });
- this.Markers.forEach(e => {
- Markers.push(e.toData())
- });
- this.Relations.forEach(e => {
- Relations.push(e.toData())
- });
- // let element = {
- // Nodes, Markers, Relations
- // }
- let backgroundImg: string = ''
- let element = {
- Nodes,
- Markers,
- Relations,
- backgroundImg
- };
- if (this.backgroundImgItem) {
- element.backgroundImg = this.backgroundImgItem.url
- }
- return element
- }
- /**
- * 执行取消操作
- */
- redo(): void {
- if (this.grabItem && this.grabItem.redo) {
- this.grabItem.redo()
- } else {
- this.undoStack.redo();
- this.scenceUpdate(this);
- }
- }
- /**
- * 执行重做操作执行
- */
- undo(): void {
- if (this.grabItem && this.grabItem.undo) {
- this.grabItem.undo()
- } else {
- this.undoStack.undo();
- this.scenceUpdate(this);
- }
- }
- /**
- * 完成事件创建的回调函数
- */
- finishCreated(item: any) {
- // let arrList = []
- if (this.cmd == 'baseLine') {
- // arrList = this.Markers;
- // 对数组遍历防止相同得id注入
- let canPush = true; //是否可注入
- this.Markers.forEach((arrItem: any) => {
- if (arrItem.id == item.id) {
- canPush = false
- }
- })
- if (canPush) {
- this.Markers.push(item);
- this.undoStack.push(new SGraphAddCommand(this, item));
- }
- }
- this.cmd = 'choice';
- this.selectContainer.clear()
- this.selectContainer.toggleItem(item)
- setTimeout(() => {
- this.focusItem = item;
- });
- if (item instanceof SZoneLegendItem || item instanceof SFHFQZoneLegendItem || item instanceof SSCPZZoneLegendItem || item instanceof SCustomLegendItem) {
- let canPush = true; //是否可注入
- this.Nodes.forEach((arrItem: any) => {
- if (arrItem.id == item.id) {
- canPush = false
- }
- })
- if (canPush) {
- this.Nodes.push(item); //完成后,方可扔到Node节点
- this.undoStack.push(new SGraphAddCommand(this, item));
- }
- }
- // 管道完成后方可保存
- if (item instanceof TipelineItem) {
- let canPush = true; //是否可注入
- this.Relations.forEach((arrItem: any) => {
- if (arrItem.id == item.id) {
- canPush = false
- }
- })
- if (canPush) {
- this.Relations.push(item);
- this.undoStack.push(new SGraphAddCommand(this, item));
- }
- }
- this.scenceUpdate(this);
- }
- ////////////////////////
- // 以下为鼠标键盘操作事件
- onMouseDown(event: SMouseEvent): any {
- if (!this.isEditStatus) {
- return true
- }
- // 判断是否开启吸附,并且有吸附的点
- if (
- this.isAbsorbing &&
- this.highLight &&
- this.highLight.visible
- ) {
- event.x = this.highLight.point.x;
- event.y = this.highLight.point.y;
- }
- if (this.grabItem) {
- if (this.grabItem instanceof TipelineItem) {
- this.setTipeEndanchor(event)
- return true;
- } else if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Create) {
- this.setLineItem(event)
- return true;
- }
- return this.grabItem.onMouseDown(event);
- }
- switch (this.cmd) {
- // 画设备
- case "equipment":
- this.addEquipment(event);
- break;
- case 'baseLine':
- this.addLine(event);
- break;
- case 'baseText':
- this.addTextItem(event);
- break;
- case 'baseImage':
- this.addImgItem(event)
- break;
- case 'Zone':
- if (!this.isSelecting) {
- this.addPolygonItem(event);
- } else {
- // 点选创建区域
- return super.onMouseDown(event)
- }
- break;
- case 'Image':
- this.addIconItem(event);
- break;
- case 'Line':
- this.addTipelineItem(event);
- break;
- default:
- return super.onMouseDown(event);
- }
- }
- onMouseMove(event: SMouseEvent): boolean {
- if (!this.isEditStatus) {
- return true
- }
- if (this.isAbsorbing) {
- if (!this.highLight) {
- this.highLight = new HighlightItem(null);
- this.addItem(this.highLight);
- }
- this.highLight.visible = false;
- this.absorbSpace(event);
- }
- if (this.grabItem) {
- if (this.grabItem instanceof TipelineItem) {
- const anc = this.clickIsAnchor(event);
- if (anc) {
- const p = anc.mapToScene(0, 0)
- event.x = p.x;
- event.y = p.y;
- return this.grabItem.onMouseMove(event);
- }
- }
- }
- return super.onMouseMove(event)
- }
- onMouseUp(event: SMouseEvent): boolean {
- if (!this.isEditStatus) {
- return true
- }
- if (this.grabItem) {
- if (this.grabItem instanceof SLineMarkerItem && this.grabItem.status == SItemStatus.Edit) {
- this.setLineItem(event)
- return true;
- } else if (this.grabItem instanceof TipelineItem) {
- this.updateTipeAnc(event);
- return true;
- }
- return this.grabItem.onMouseUp(event);
- }
- return super.onMouseUp(event)
- }
- /**
- * 键盘事件
- *
- * @param event 事件参数
- * @return boolean
- */
- onKeyDown(event: KeyboardEvent): any {
- if (!this.isEditStatus) {
- return true
- }
- if (this.grabItem) {
- this.grabItem.onKeyDown(event);
- if (event.code == "Escape") {
- const item = this.grabItem;
- this.grabItem = null
- this.removeItem(item);
- if (this.view) {
- this.view.update()
- }
- this.setCmd = 'choice'
- }
- }
- // 删除键功能
- if (event.code == 'Delete') {
- this.deleiteItem()
- }
- // 复制粘贴
- if (event.ctrlKey && !event.repeat) {
- if (event.code == 'KeyC') {
- console.log('ctrl c')
- this.copy()
- } else if (event.code == 'KeyV') {
- console.log('ctrl v')
- this.paste()
- }
- }
- return false
- }
- /**
- * 复制
- *
- */
- copy() {
- if (this.selectContainer.itemList.length) {
- this.copyString = {
- Nodes: [],
- Markers: [],
- Relations: []
- };
- this.selectContainer.itemList.forEach(t => {
- const type = this.itemToType(t);
- if (type) {
- const data = JSON.parse(JSON.stringify(t.toData()))
- data.ID = ''
- if (data.Type == 'Image') {
- data.AnchorList = []
- }
- this.copyString[type].push(data)
- }
- })
- // 生成复制字符串
- console.log(this.copyString)
- return
- // 获取input dom
- const input = document.createElement('input');
- input.setAttribute('id', 'COPYINPUT')
- input.value = JSON.stringify(this.copyString)
- document.body.appendChild(input);
- input.select()
- document.execCommand('copy');
- input.style.display = 'none';
- console.log(input.value, Date.now());
- document.body.removeChild(input)
- }
- }
- /**
- * 粘贴
- *
- */
- paste() {
- const parserData = new STopologyParser(null);
- // 需要深拷贝
- parserData.parseData(JSON.parse(JSON.stringify(this.copyString)))
- // 不需要复制区域
- // parserData.zoneLegendList.forEach(t => {
- // if (t instanceof SCustomLegendItem) {
- // if (this.view) {
- // t.pos.x += 10 / this.view.scale
- // t.pos.y += 10 / this.view.scale
- // }
- // this.addItem(t)
- // this.Nodes.push(t);
- // graphItemList.push(t)
- // }
- // // 加到node
- // // 加命令
- // })
- const graphItemList = [];
- parserData.imageLegendList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Nodes.push(t);
- graphItemList.push(t)
- })
- parserData.imageMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.lineMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.textMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.relationList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- t.moveToOrigin(t.pos.x, t.pos.y)
- }
- t.moveable = true;
- this.addItem(t)
- this.Relations.push(t);
- graphItemList.push(t)
- })
- this.scenceUpdate(this);
- if (graphItemList.length) {
- this.AddListCommand(graphItemList)
- }
- }
- /**
- * 跨页面粘贴
- *
- */
- crossPagePaste(crossPageString: string) {
- try {
- console.log(crossPageString);
- const pageObj = JSON.parse(crossPageString)
- const parserData = new STopologyParser(null);
- // 需要深拷贝
- parserData.parseData(JSON.parse(JSON.stringify(pageObj)))
- // 不需要复制区域
- // parserData.zoneLegendList.forEach(t => {
- // if (t instanceof SCustomLegendItem) {
- // if (this.view) {
- // t.pos.x += 10 / this.view.scale
- // t.pos.y += 10 / this.view.scale
- // }
- // this.addItem(t)
- // this.Nodes.push(t);
- // graphItemList.push(t)
- // }
- // // 加到node
- // // 加命令
- // })
- const graphItemList = [];
- parserData.imageLegendList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Nodes.push(t);
- graphItemList.push(t)
- })
- parserData.imageMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.lineMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.textMarkerList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- }
- t.moveable = true;
- this.addItem(t)
- this.Markers.push(t);
- graphItemList.push(t)
- })
- parserData.relationList.forEach(t => {
- if (this.view) {
- t.pos.x += 10 / this.view.scale
- t.pos.y += 10 / this.view.scale
- t.moveToOrigin(t.pos.x, t.pos.y)
- }
- t.moveable = true;
- this.addItem(t)
- this.Relations.push(t);
- graphItemList.push(t)
- })
- this.scenceUpdate(this);
- if (graphItemList.length) {
- this.AddListCommand(graphItemList)
- }
- } catch (e) {
- console.log(e);
- }
- }
- /** 类型转换 */
- itemToType(obj: SGraphItem): String {
- if (obj instanceof STextMarkerItem) {
- return 'Markers'
- } else if (obj instanceof SImageMarkerItem) {
- return 'Markers'
- } else if (obj instanceof SLineMarkerItem) {
- return 'Markers'
- } else if (obj instanceof SZoneLegendItem) {
- return 'Nodes'
- } else if (obj instanceof SFHFQZoneLegendItem) {
- return 'Nodes'
- } else if (obj instanceof SSCPZZoneLegendItem) {
- return 'Nodes'
- } else if (obj instanceof SImageLegendItem) {
- return 'Nodes'
- } else if (obj instanceof TipelineItem) {
- return 'Relations'
- }
- return '';
- }
- /**
- * 鼠标双击事件
- *
- * @param event 事件参数
- * @return boolean
- */
- onDoubleClick(event: SMouseEvent): boolean {
- if (!this.isEditStatus) {
- return true
- } else {
- return super.onDoubleClick(event);
- }
- } // Function onDoubleClick()
- /**
- * 设置管线结束锚点
- *
- */
- setTipeEndanchor(event: SMouseEvent): void {
- if (this.grabItem instanceof TipelineItem) {
- const anc = this.clickIsAnchor(event);
- if (anc) {
- const p = anc.mapToScene(0, 0)
- anc.isConnected = true;
- event.x = p.x;
- event.y = p.y;
- if (this.grabItem.status == SItemStatus.Create) {
- if (this.grabItem.pointList.length) {
- this.grabItem.endAnchor = anc;
- anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
- }
- this.grabItem.anchor2ID = anc.id
- this.grabItem.node2Id = anc.parent.id
- this.grabItem.onMouseDown(event)
- this.grabItem.status = SItemStatus.Normal;
- this.finishCreated(this.grabItem)
- return
- }
- }
- this.grabItem.onMouseDown(event)
- }
- }
- /**
- * 管线item修改锚点
- *
- */
- updateTipeAnc(event: SMouseEvent): void {
- if (this.grabItem instanceof TipelineItem) {
- const anc = this.clickIsAnchor(event);
- if (anc) {
- const p = anc.mapToScene(0, 0)
- event.x = p.x;
- event.y = p.y;
- if (this.grabItem.status == SItemStatus.Edit) {
- if (this.grabItem.curIndex == 0) {
- if (this.grabItem.startAnchor) {
- this.grabItem.startAnchor.isConnected = false
- this.grabItem.startAnchor.parent.disconnect('changePos', this.grabItem);
- }
- anc.isConnected = true;
- this.grabItem.startAnchor = anc;
- this.grabItem.anchor1ID = anc.id
- this.grabItem.node1Id = anc.parent.id
- anc.parent.connect('changePos', this.grabItem, this.grabItem.changePos)
- }
- if (this.grabItem.curIndex == this.grabItem.pointList.length - 1) {
- if (this.grabItem.endAnchor) {
- this.grabItem.endAnchor.isConnected = false
- this.grabItem.endAnchor.parent.disconnect('changePos', this.grabItem);
- }
- anc.isConnected = true;
- this.grabItem.endAnchor = anc;
- this.grabItem.anchor2ID = anc.id
- this.grabItem.node2Id = anc.parent.id
- anc.parent.connect('changePos', this.grabItem, this.grabItem.changePos)
- }
- }
- this.grabItem.onMouseUp(event)
- return
- } else {
- if (this.grabItem.status == SItemStatus.Edit) {
- if (this.grabItem.curIndex == 0) {
- if (this.grabItem.startAnchor) {
- this.grabItem.startAnchor.isConnected = false
- this.grabItem.startAnchor.parent.disconnect('changePos', this.grabItem);
- this.grabItem.startAnchor = null;
- this.grabItem.anchor1ID = ''
- this.grabItem.node1Id = ''
- }
- }
- if (this.grabItem.curIndex == this.grabItem.pointList.length - 1) {
- if (this.grabItem.endAnchor) {
- this.grabItem.endAnchor.isConnected = false
- this.grabItem.endAnchor.parent.disconnect('changePos', this.grabItem);
- this.grabItem.endAnchor = null;
- this.grabItem.anchor2ID = ''
- this.grabItem.node2Id = ''
- }
- }
- }
- this.grabItem.onMouseUp(event)
- return
- }
- }
- }
- /**
- * 设置直线结束Item
- *
- */
- setLineItem(event: SMouseEvent): void {
- if (this.grabItem instanceof SLineMarkerItem) {
- const item = this.clickIsItem(event);
- // 鼠标点是否在某个item内
- if (item) {
- let scenePoint = item.boundingRect().center();
- const p = item.mapToScene(scenePoint.x, scenePoint.y);
- event.x = p.x;
- event.y = p.y;
- if (this.grabItem.status == SItemStatus.Create) {
- // 点击在item内、创建状态且端点列表不为空时将直线结束端点和item绑定
- if (this.grabItem.line.length) {
- if (this.grabItem.startItem?.id == item.id) {
- this.grabItem.endItem = null;
- } else {
- this.grabItem.endItem = item;
- this.grabItem.line[1] = new SPoint(event.x, event.y);
- item.connect('onMove', this.grabItem, this.grabItem.changePos);
- }
- }
- this.grabItem.onMouseDown(event);
- return
- } else if (this.grabItem.status == SItemStatus.Edit) {
- // 点击在item内、编辑状态且点击的为结束端点时
- if (this.grabItem.curIndex == 1) {
- // 直线关联的起始item是直线结束端点所在的item时,不吸附在点击item中心并将直线关联的结束item置为null
- if (this.grabItem.startItem?.id == item.id) {
- this.grabItem.endItem = null;
- } else {// 反正吸附,关联
- this.grabItem.endItem = item;
- this.grabItem.line[1] = new SPoint(event.x, event.y);
- item.connect('onMove', this.grabItem, this.grabItem.changePos);
- }
- } else if (this.grabItem.curIndex == 0) {
- if (this.grabItem.endItem?.id == item.id) {
- this.grabItem.startItem = null;
- } else {
- this.grabItem.startItem = item;
- this.grabItem.line[0] = new SPoint(event.x, event.y);
- item.connect('onMove', this.grabItem, this.grabItem.changePos);
- }
- }
- }
- } else {
- // 如果不在item内且点击的是直线的某个端点,将端点的关联item置为null
- if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
- if (this.grabItem.curIndex == 1) {
- this.grabItem.endItem = null;
- } else if (this.grabItem.curIndex == 0) {
- this.grabItem.startItem = null;
- }
- } else {
- this.grabItem.onMouseDown(event);
- return
- }
- }
- // if (this.grabItem.status == SItemStatus.Create) {
- // // 鼠标点是否在某个item内
- // if (item) {
- // let scenePoint = item.boundingRect().center();
- // const p = item.mapToScene(scenePoint.x, scenePoint.y);
- // event.x = p.x;
- // event.y = p.y;
- // if (this.grabItem.line.length && this.grabItem.curIndex == -1) {
- // this.grabItem.endItem = item;
- // this.grabItem.line[1] = new SPoint(event.x, event.y);
- // item.connect('onMove', this.grabItem, this.grabItem.changePos);
- // }
- // this.grabItem.onMouseDown(event);
- // return
- // } else {
- // if (this.grabItem.line.length && this.grabItem.curIndex != -1) {
- // if (this.grabItem.curIndex == 1) {
- // this.grabItem.endItem = null;
- // } else if (this.grabItem.curIndex == 0) {
- // this.grabItem.startItem = null;
- // }
- // }
- // }
- // } else if (this.grabItem.status == SItemStatus.Edit) {
- // if (this.grabItem.curIndex == 1) {
- // this.grabItem.endItem = item;
- // this.grabItem.line[1] = new SPoint(event.x, event.y);
- // item.connect('onMove', this.grabItem, this.grabItem.changePos);
- // } else if (this.grabItem.curIndex == 0) {
- // this.grabItem.startItem = item;
- // this.grabItem.line[0] = new SPoint(event.x, event.y);
- // item.connect('onMove', this.grabItem, this.grabItem.changePos);
- // }
- // }
- this.grabItem.onMouseUp(event);
- }
- }
- /**
- * 划线时点击位置是否是锚点
- *
- * @param event 事件
- * @param len 限制距离
- * @return 点击的锚点
- * */
- clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
- let minAnchor = null;
- let len: number = -1;
- this.Nodes.forEach(image => {
- // image.showAnchor = false;
- if (image.anchorList && image.anchorList.length) {
- if (image.img && image.img instanceof SImageItem) {
- let scenePoint = image.img.mapFromScene(event.x, event.y);
- if (image.img.contains(scenePoint.x, scenePoint.y)) {
- let anchor = image.anchorList[0]
- let anchorPoint = anchor.mapToScene(0, 0);
- let dis = SMathUtil.pointDistance(
- event.x,
- event.y,
- anchorPoint.x,
- anchorPoint.y
- );
- console.log(dis)
- if (len < 0) {
- minAnchor = anchor;
- len = dis;
- }
- if (dis < len) {
- minAnchor = anchor;
- len = dis;
- }
- }
- // let scenePoint = image.mapFromScene(event.x, event.y);
- // if (image.contains(scenePoint.x, scenePoint.y)) {
- // image.anchorList.forEach(anchor => {
- // let anchorPoint = anchor.mapToScene(0, 0);
- // let dis = SMathUtil.pointDistance(
- // event.x,
- // event.y,
- // anchorPoint.x,
- // anchorPoint.y
- // );
- // if (len < 0) {
- // len = anchor.sceneDis;
- // }
- // if (dis < len) {
- // minAnchor = anchor;
- // len = dis;
- // }
- // })
- }
- }
- })
- console.log('-----------------------')
- console.log(minAnchor)
- console.log('-----------------------')
- // if (minAnchor&&minAnchor.parent) {
- // minAnchor.parent.showAnchor = true
- // }
- return minAnchor;
- }
- /**
- * 划线时点击位置是在文本,图片,,区域内
- *
- * @param event 事件
- * @return 点击的item
- * */
- clickIsItem(event: SMouseEvent): SGraphItem | null {
- let minIten = null;
- let len: number = -1;
- let itemList = this.Nodes.concat(this.Markers);
- itemList.forEach(item => {
- if (
- item instanceof STextMarkerItem ||
- item instanceof SImageMarkerItem ||
- item instanceof SZoneLegendItem ||
- item instanceof SFHFQZoneLegendItem ||
- item instanceof SSCPZZoneLegendItem ||
- item instanceof SEquipmentItem
- ) {
- let scenePoint = item.mapFromScene(event.x, event.y);
- if (item.contains(scenePoint.x, scenePoint.y)) {
- let dis = SMathUtil.pointDistance(
- scenePoint.x,
- scenePoint.y,
- item.boundingRect().center().x,
- item.boundingRect().center().y
- );
- if (len < 0) {
- minIten = item;
- len = dis;
- }
- if (dis < len) {
- minIten = item;
- len = dis;
- }
- }
- }
- })
- console.log('-----------------------')
- console.log(minIten)
- console.log('-----------------------')
- return minIten;
- }
- /**
- * 点是否在吸附区域内
- *
- * @param p 要判断的点
- * @param minX 空间区域
- * @param minY 空间区域
- * @param maxX 空间区域
- * @param maxY 空间区域
- */
- static isPointInAbsorbArea(
- p: SPoint,
- minX: number,
- maxX: number,
- minY: number,
- maxY: number
- ): boolean {
- let rect = new SRect(
- minX - 1000,
- minY - 1000,
- maxX - minX + 2000,
- maxY - minY + 2000
- );
- return rect.contains(p.x, p.y);
- } // Function isPointInAbsorbArea()
- /**
- * 吸附空间
- *
- * @param event 鼠标事件对象
- * @return boolean 是否找到吸附的对象
- */
- absorbSpace(event: SMouseEvent): boolean {
- if (!this.highLight) {
- return false;
- }
- let absorbLen = 1000;
- if (this.view) {
- absorbLen = 10 / this.view.scale;
- }
- let P = this.absorbSpacePoint(event, absorbLen);
- if (P.Point) {
- this.highLight.distance = P.MinDis;
- this.highLight.point = new SPoint(P.Point.X, -P.Point.Y);
- this.highLight.visible = true;
- return true;
- } else {
- let L = this.absorbSpaceLine(event, absorbLen);
- if (L.Line && L.Point) {
- this.highLight.distance = L.MinDis;
- this.highLight.point = L.Point;
- this.highLight.line = L.Line;
- this.highLight.visible = true;
- return true;
- }
- return false;
- }
- } // Function absorbSpace()
- /**
- * 吸附空间点
- *
- * @param event 鼠标事件对象
- * @param absorbLen 吸附距离
- * @return MinDis 吸附的点
- */
- absorbSpacePoint(event: SMouseEvent, absorbLen: number): MinDis {
- let minPointDis = Number.MAX_SAFE_INTEGER;
- let Point;
- this.spaceList.map((space): void => {
- if (
- EditScence.isPointInAbsorbArea(
- new SPoint(event.x, event.y),
- space.minX,
- space.maxX,
- space.minY,
- space.maxY
- )
- ) {
- space.data.OutLine.forEach((item): void => {
- let minDis = SMathUtil.getMinDisPoint(
- new SPoint(event.x, event.y),
- item
- );
- if (
- minDis &&
- minDis.MinDis < absorbLen &&
- minDis.MinDis < minPointDis
- ) {
- minPointDis = minDis.MinDis;
- Point = minDis.Point;
- }
- });
- }
- });
- return {
- MinDis: minPointDis,
- Point: Point
- };
- } // Function absorbSpacePoint()
- /**
- * 吸附空间线
- *
- * @param event 鼠标事件对象
- * @param absorbLen 吸附距离
- * @return PointToLine 吸附的线
- */
- absorbSpaceLine(event: SMouseEvent, absorbLen: number): PointToLine {
- let minPointDis = Number.MAX_SAFE_INTEGER;
- let Point, Line;
- this.spaceList.forEach((space): void => {
- if (
- EditScence.isPointInAbsorbArea(
- new SPoint(event.x, event.y),
- space.minX,
- space.maxX,
- space.minY,
- space.maxY
- )
- ) {
- space.data.OutLine.forEach((item): void => {
- let minDisLine = SMathUtil.getMinDisLine(
- new SPoint(event.x, event.y),
- item
- );
- if (
- minDisLine &&
- minDisLine.MinDis < absorbLen &&
- minDisLine.MinDis < minPointDis
- ) {
- minPointDis = minDisLine.MinDis;
- Point = minDisLine.Point;
- Line = minDisLine.Line;
- }
- });
- }
- });
- return {
- MinDis: minPointDis,
- Point: Point,
- Line: Line
- };
- } // Function absorbSpaceLine()
- /**
- * 添加多个item命令
- * @param focusItemList 鼠标事件对象
- */
- AddListCommand(focusItemList: any[]): void {
- this.undoStack.push(new SGraphAddListCommand(this, focusItemList));
- }
- /**
- * 选中状态方法
- * @param item 鼠标事件对象
- */
- toggleItem(item: SGraphItem): void {
- this.selectContainer.clear()
- this.selectContainer.toggleItem(item)
- }
- /**
- * 修改背景图片
- * @param {string} url 背景图像地址
- */
- setBackgroundImgItem(url: string): void {
- let imgItem = new SImageItem(null);
- imgItem.connect("imgLoadOver", this, () => {
- this.bgImg = true;
- });
- if (this.backgroundImgItem) {
- this.backgroundImgItem.parent = null;
- }
- this.backgroundImgItem = imgItem;
- imgItem.url = url;
- imgItem.showType = SImageShowType.AutoFit;
- console.log(url);
- imgItem.zOrder = -1000;
- this.addItem(imgItem);
- }
- /**
- * 添加设备类
- * @param
- */
- addEquipment(event: SMouseEvent): void {
- // this.img.url = `http://localhost:8091/serve/topology-wanda/Picture/query/
- /* // 14d978b7edd346f088d6cfb53ada4070`; //冷冻泵
- // 4fde075cdafe4e4ea46e876276feab9d`; //水冷螺杆机组
- // 4aa6051e025d4193a776a5b2d2604ed8 //冷却塔1
- // ece9f93ffc754035bcec2e8f27d66a59 //冷却塔2
- */
- // @ts-ignore
- let imgKey = window.__systemConf.imgKey;
- console.log(this._legend)
- let data = {
- ID: uuid(), // ID
- Name: this._legend.Name, // 名称
- AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
- Pos: { X: event.x, Y: event.y }, // 位置
- Size: { Width: 80, Height: 80 }, // 大小
- InfoList: this._legend.InfoList || [],
- Properties: this._legend.Properties || {
- StatusImage: [
- {
- Status: "Running", // 运行
- ImageKey: imgKey[0],
- },
- ],
- }, // 由应用自己定义
- };
- let data1 = {
- ID: uuid(), // ID
- Name: "3#冷冻泵", // 名称
- AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
- Pos: { X: event.x, Y: event.y }, // 位置
- Size: { Width: 80, Height: 80 }, // 大小
- InfoList: [
- {
- Code: "", // 对应设备的信息点
- Name: "温度", //信息点名称
- X: 30,
- Y: 20,
- Width: 100,
- Height: 25,
- FontSize: 12,
- Background: "#ffffff",
- TextAlign: "",
- Color: "#000000",
- },
- {
- Code: "", // 对应设备的信息点
- Name: "湿度", //信息点名称
- X: 40,
- Y: 28,
- Width: 100,
- Height: 25,
- FontSize: 12,
- Background: "#ffffff",
- TextAlign: "",
- Color: "#000000",
- },
- ],
- Properties: {
- StatusImage: [
- {
- Status: "Running", // 运行
- ImageKey: imgKey[0],
- },
- {
- Status: "Stop", // 停止
- ImageKey: imgKey[1] || "",
- },
- {
- Status: "Selected", // 选择
- ImageKey: imgKey[2] || "",
- },
- {
- Status: "Warning", // 报警
- ImageKey: "",
- },
- ],
- }, // 由应用自己定义
- };
- let equipmentItem = new SEquipmentItem(null, data);
- console.log(event.x, event.y);
- equipmentItem.selectable = true;
- this.Nodes.push(equipmentItem);
- this.addItem(equipmentItem);
- // this.grabItem = equipmentItem;
- // this.focusItem = equipmentItem;
- this.cmd = "choice";
- }
- }
|