123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593 |
- import { SUndoStack } from "@saga-web/base";
- import { SGraphScene } from '@saga-web/graph/lib';
- import { SItemStatus, ItemOrder } from "@saga-web/big";
- import { SLineStyle } from "@saga-web/graph/lib";
- import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
- import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
- import { TipelineItem } from "@/lib/items/TipelineItem";
- import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem";
- import { SPoint, SFont } from '@saga-web/draw/lib';
- import { uuid } from "@/components/mapClass/until";
- import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
- import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem';
- export class EditScence extends SGraphScene {
- constructor() {
- super();
- this.undoStack = new SUndoStack();
-
- this.cmd = 'choice';
-
- this.focusItem = null;
-
- this.Nodes = [];
-
- this.Markers = [];
-
- this.Relations = [];
-
- this._legend = null;
-
- this.selectContainer.connect("listChange", this, this.listChange);
- }
-
- get getCmd() {
- return this.cmd;
- }
-
- set setCmd(cmd) {
- if (cmd == 'choice') {
- this.grabItem = null;
- }
- this.cmd = cmd;
- if (this.focusItem) {
-
- this.focusItem.cancelOperate();
- this.focusItem = null;
-
- }
- if (this.view) {
- this.view.update();
- }
- }
- ;
- get getlegend() {
- return this._legend;
- }
- ;
- set setlegend(obj) {
- this._legend = obj;
- console.log('aaaaaa', obj);
- }
-
- listChange(obj) {
- let itemType = 'equipment';
- if (obj.itemList[0] instanceof STextMarkerItem) {
- itemType = 'baseText';
- console.log('obj.itemList[0]', itemType, obj.itemList[0]);
- }
- 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 SImageLegendItem) {
- itemType = 'Image';
- }
- else if (obj.itemList[0] instanceof TipelineItem) {
- itemType = 'Line';
- }
- else {
- itemType = '';
- }
- ;
- if (obj.itemList.length == 1) {
-
- this.focusItem = obj.itemList[0];
- }
- let msg = {
- itemList: obj.itemList,
- itemType,
- };
- this.emitChange(msg);
- }
- emitChange(msg) {
- }
-
- addLine(event) {
- const data = {
-
- ID: uuid(),
-
- Name: '直线',
-
- Type: "Line",
-
- Pos: { X: 0, Y: 0 },
-
- Properties: {
- Line: [{ X: event.x, Y: event.y }]
- }
- };
- const item = new SLineMarkerItem(null, data);
- item.status = SItemStatus.Create;
- item.zOrder = ItemOrder.lineOrder;
- item.selectable = true;
- this.addItem(item);
- item.connect("finishCreated", this, this.finishCreated);
- this.grabItem = item;
- this.Markers.push(item);
-
-
- return true;
- }
-
- addPolylineItem(event) {
- const point = new SPoint(event.x, event.y);
- const item = new TipelineItem(null, [point]);
-
- item.selectable = true;
- item.status = SItemStatus.Create;
- item.zOrder = ItemOrder.polylineOrder;
- this.addItem(item);
- item.connect("finishCreated", this, this.finishCreated);
-
- this.grabItem = item;
- this.focusItem = item;
- return true;
- }
-
- addTipelineItem(event) {
- const LegendData = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 0,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Type: "Line",
- PointList: [{ X: event.x, Y: event.y }],
- LineType: 0,
- Properties: {
- 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;
- item.zOrder = ItemOrder.polylineOrder;
- this.addItem(item);
- this.Relations.push(item);
- item.connect("finishCreated", this, this.finishCreated);
-
- this.grabItem = item;
- this.focusItem = item;
- return true;
- }
-
- addPolygonItem(event) {
- const LegendData = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 0,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Type: "Zone",
- Pos: { X: event.x, Y: event.y },
- OutLine: [{ X: event.x, Y: event.y }],
- Properties: {
- StrokeColor: this._legend.Color,
- FillColor: this._legend.FillColor,
- LineDash: this._legend.LineDash,
- LineWidth: this._legend.LineWidth,
- },
- };
- const Polylines = new SZoneLegendItem(null, LegendData);
- Polylines.selectable = true;
-
- Polylines.status = SItemStatus.Create;
- Polylines.zOrder = ItemOrder.polygonOrder;
-
- this.addItem(Polylines);
- Polylines.connect("finishCreated", this, this.finishCreated);
- this.grabItem = Polylines;
- this.focusItem = Polylines;
- this.Nodes.push(Polylines);
- }
-
- addImgItem(event) {
- const data = {
-
- ID: uuid(),
-
- Name: '图片',
- Num: 3,
-
- Type: "Image",
-
- Pos: { X: event.x, Y: event.y },
-
- Properties: {
- Url: '',
- }
- };
- const item = new SImageMarkerItem(null, data);
- item.zOrder = ItemOrder.imageOrder;
- item.selectable = true;
- item.moveable = true;
- this.addItem(item);
- this.grabItem == null;
- this.focusItem = item;
- this.cmd = 'choice';
- this.Markers.push(item);
- }
-
- addTextItem(event) {
- const data = {
-
- ID: uuid(),
-
- Name: '文本',
-
- Type: "Text",
-
- Pos: { X: event.x, Y: event.y },
-
- Properties: {
- Text: '请在右侧属性栏输入文字!',
- Color: '',
- Font: 0,
- BackgroundColor: ''
- }
- };
- const item = new STextMarkerItem(null, data);
- item.moveTo(event.x, event.y);
- item.selectable = true;
- item.moveable = true;
- item.zOrder = ItemOrder.textOrder;
- this.addItem(item);
- this.grabItem == null;
- this.cmd = 'choice';
- this.Markers.push(item);
- }
-
- addIconItem(event) {
- console.log('this._legend.url', this._legend);
- const LegendData = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 0,
- 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 },
- Properties: {
- Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
- },
- };
- const item = new SImageLegendItem(null, LegendData);
- this.grabItem == null;
- this.cmd = 'choice';
- item.selectable = true;
- item.moveable = true;
- item.zOrder = ItemOrder.markOrder;
-
- this.addItem(item);
- this.Nodes.push(item);
- }
-
- editItemStatus() {
- }
-
- updatedText(str) {
- if (this.focusItem) {
- const old = this.focusItem.text;
- this.focusItem.text = str;
-
- }
- }
-
- updatedFontSize(size) {
- if (this.focusItem) {
- let old = new SFont(this.focusItem.font);
- let font = new SFont(this.focusItem.font);
- font.size = size;
- this.focusItem.font = font;
-
- }
- }
-
- updatedLineWidth(lineWidth) {
- if (this.focusItem) {
-
-
-
- this.focusItem.lineWidth = lineWidth;
-
- }
- }
-
- updatedFontColor(color) {
- if (this.focusItem) {
- let old = this.focusItem.color;
- this.focusItem.color = color;
-
- }
- }
-
- updatedBorderColor(color) {
- if (this.focusItem) {
- let old = this.focusItem.strokeColor;
- this.focusItem.strokeColor = color;
-
- }
- }
-
- updatedWidth(width) {
- if (this.focusItem) {
-
- this.focusItem.width = width;
-
- }
- }
-
- updatedHeight(height) {
- if (this.focusItem) {
-
- this.focusItem.height = height;
-
- }
- }
-
- updatedPosition(x, y) {
- if (this.focusItem) {
- let p = this.focusItem.mapFromScene(x, y);
-
-
- this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x;
- this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y;
- }
- }
-
- updatedbackColor(color) {
- if (this.focusItem) {
- this.focusItem.backgroundColor = color;
- }
- }
-
- upadataImageUrl(url) {
- if (this.focusItem) {
- this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url;
- }
- }
-
- upadataBorder(val) {
- 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.Soild;
- }
- this.focusItem.lineStyle = borderStyle;
- }
- }
-
- upadataLengedName(val) {
- console.log('xxxxxxx', val, this.focusItem);
- if (this.focusItem && this.focusItem.data) {
- this.focusItem.text = val;
- }
- }
-
- deleiteItem() {
- if (this.focusItem) {
- this.removeItem(this.focusItem);
- let a = -1;
- this.Nodes.forEach((item, index) => {
- if (item.id == this.focusItem.id) {
- a = index;
- }
- });
- this.Nodes.splice(a, 1);
- let b = -1;
- this.Markers.forEach((item, index) => {
- if (item.id == this.focusItem.id) {
- b = index;
- }
- });
- this.Markers.splice(b, 1);
- let c = -1;
- this.Relations.forEach((item, index) => {
- if (item.id == this.focusItem.id) {
- c = index;
- }
- });
- this.Relations.splice(c, 1);
- this.focusItem = null;
- }
- if (this.view) {
- this.view.update();
- }
- }
-
- changeAlignItem(v) {
- this.selectContainer.layout(v);
- }
-
- extractItem() {
- console.log(this);
- }
-
- saveMsgItem() {
- const Nodes = [];
- const Markers = [];
- const Relations = [];
- 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
- };
- return element;
- }
-
- lockItem() {
- }
-
- redo() {
- this.undoStack.undo();
- }
-
- undo() {
- this.undoStack.redo();
- }
-
- finishCreated(item) {
- this.setCmd = 'choice';
- this.focusItem = item;
- this.selectContainer.toggleItem(item);
- }
-
-
- onMouseDown(event) {
- if (this.grabItem) {
- return this.grabItem.onMouseDown(event);
- }
- switch (this.cmd) {
- case 'baseLine':
- this.addLine(event);
- break;
- case 'baseText':
- this.addTextItem(event);
- break;
- case 'baseImage':
- this.addImgItem(event);
- break;
- case 'Zone':
- this.addPolygonItem(event);
- break;
- case 'Image':
- this.addIconItem(event);
- break;
- case 'Line':
- this.addTipelineItem(event);
- break;
- default:
- return super.onMouseDown(event);
- }
- }
-
- onKeyDown(event) {
- if (this.grabItem) {
- this.grabItem.onKeyDown(event);
- }
-
-
-
- return false;
- }
- }
|