123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614 |
- import { SGraphScene, SGraphItem, SAnchorItem, SImageItem } from "@persagy-web/graph";
- import { SPoint } from "@persagy-web/draw";
- import { SMouseEvent, SUndoStack, } from "@persagy-web/base";
- import { SRectSelectItem, SItemStatus } from "@persagy-web/big";
- import { SBaseArrowEdit, SBasePolygonEdit, SBaseCircleEdit, SBaseLineEdit, SGraphAddCommand, SGraphEdit, SBaseIconTextEdit, SBasePolylineEdit, SBaseTextEdit, SBaseImageEdit, SBaseRectEdit, SBaseTriangleEdit } from './'
- import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil"
- import { SBasePipe } from "./../big-edit"
- export class SGraphEditScene extends SGraphScene {
-
-
-
- protected undoStack = new SUndoStack();
-
-
-
-
-
-
-
- _editCmd: string = ""
- get editCmd(): string {
- return this._editCmd
- }
- set editCmd(val: string) {
- this._editCmd = val;
- }
-
- _isEditStatus: Boolean = true;
- set isEditStatus(bol: Boolean) {
- this._isEditStatus = bol;
- }
- get isEditStatus(): Boolean {
- return this._isEditStatus;
- }
-
-
-
- constructor() {
- super()
-
- this.selectContainer.connect("selectChange", this, this.selectChange);
- }
-
- selectChange(obj: any) {
-
- }
-
- addLine(event: SMouseEvent): void {
- const data = {
-
- name: '基础直线',
-
- type: "Line",
-
- scale: { x: 1, y: 1, z: 1 },
-
- rolate: { x: 0, y: 0, z: 0 },
-
- pos: { x: 0, y: 0 },
-
- properties: {
- type: "BaseLine"
- },
- style: {
- line: [{ x: event.x, y: event.y }],
- default: {
- }
- }
- }
- const lineItem = new SBaseLineEdit(null, data);
- lineItem.status = SItemStatus.Create;
- this.addItem(lineItem);
-
- lineItem.selectable = true;
- this.grabItem = lineItem;
- lineItem.connect("finishCreated", this, this.finishCreated);
- lineItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addPolyLine(event: SMouseEvent): void {
- const data = {
- name: '基础折线',
- type: "line",
- pos: { x: 0, y: 0 },
- properties: {
- type: "BasePolyline",
- },
- style: {
- outLine: [{ x: event.x, y: event.y }],
- default: {
- }
- }
- }
- const item = new SBasePolylineEdit(null, data);
- item.status = SItemStatus.Create;
- item.selectable = true;
- this.addItem(item);
- this.grabItem = item;
- item.connect("finishCreated", this, this.finishCreated);
- item.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addImageItem(event: SMouseEvent): void {
- const data = {
-
- name: '基础图片',
- num: 1,
-
- type: "Image",
-
- pos: { x: event.x, y: event.y },
-
- properties: {
- type: "BaseImage",
- },
- style: {
- default: {
- strokecolor: "#c0ccda",
- url: '',
- }
- }
- }
- const item = new SBaseImageEdit(null, data);
- item.selectable = true;
- item.moveable = true;
- this.addItem(item);
- item.connect("onContextMenu", this, this.getItem);
- this.finishCreated(item);
- }
-
- addTextItem(event: SMouseEvent): void {
- const data = {
-
- name: '基础文本',
-
- type: "Text",
-
- pos: { x: event.x, y: event.y },
- size: { width: 0, height: 0 },
-
- properties: {
- type: "BaseText"
- },
- style: {
- default: {
- text: '请在右侧属性栏输入文字!',
- color: "#646c73",
- font: 14,
- backgroundcolor: "#f7f9facc",
- }
- }
- };
- const item = new SBaseTextEdit(null, data);
- item.moveTo(event.x, event.y);
- item.moveable = true;
- this.addItem(item);
- this.grabItem = null;
- item.connect("onContextMenu", this, this.getItem);
- this.finishCreated(item);
- }
-
- addRectItem(event: SMouseEvent): void {
- const data = {
- name: '基础矩形',
-
- type: "Zone",
-
- pos: { x: 0, y: 0 },
- properties: {
- type: "BaseRect",
- },
- style: {
- default: {
- line: [{ x: event.x, y: event.y }],
- }
- }
- }
- const rectItem = new SBaseRectEdit(null, data);
- rectItem.status = SItemStatus.Create;
- this.addItem(rectItem);
-
- rectItem.selectable = true;
- rectItem.moveable = true;
- this.grabItem = rectItem;
- rectItem.isTransform = true
- rectItem.connect("finishCreated", this, this.finishCreated);
- rectItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addTriangleItem(event: SMouseEvent): void {
- const data = {
- name: '基础三角形',
- type: "Zone",
- pos: { x: 0, y: 0 },
- properties: {
- type: "BaseTriangle",
- },
- style: {
- default: {
- line: [{ x: event.x, y: event.y }],
- }
- }
- }
- const triangleItem = new SBaseTriangleEdit(null, data);
- triangleItem.status = SItemStatus.Create;
- this.addItem(triangleItem);
-
- triangleItem.selectable = true;
- triangleItem.moveable = true;
- this.grabItem = triangleItem;
- triangleItem.connect("finishCreated", this, this.finishCreated);
- triangleItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addCircleItem(event: SMouseEvent): void {
- const data = {
- name: '基础圆形',
- type: "Zone",
- pos: { x: 0, y: 0 },
- properties: {
- type: "BaseCircle",
- },
- style: {
- default: {
- },
- line: [{ x: event.x, y: event.y }],
- }
- }
- const circleItem = new SBaseCircleEdit(null, data);
- circleItem.status = SItemStatus.Create;
- circleItem.selectable = true;
- this.grabItem = circleItem;
- this.addItem(circleItem);
-
- circleItem.connect("finishCreated", this, this.finishCreated);
- circleItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addPolygonItem(event: SMouseEvent): void {
- const data = {
- name: '基础多边形',
- type: "Zone",
- pos: { x: 0, y: 0 },
- properties: {
- type: "BasePolygon",
- },
- style: {
- outLine: [{ x: event.x, y: event.y }],
- default: {
- }
- }
- };
- const polygonItem = new SBasePolygonEdit(null, data);
- polygonItem.status = SItemStatus.Create;
- polygonItem.selectable = true;
- this.addItem(polygonItem);
-
- this.grabItem = polygonItem;
- polygonItem.connect("finishCreated", this, this.finishCreated);
- polygonItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- };
- }
-
- addBaseArrowsItem(event: SMouseEvent): void {
- const data = {
- name: '基础箭头',
- type: "Zone",
- pos: { x: 0, y: 0 },
- properties: {
- type: "BaseArrow",
- },
- style: {
- default: {
- line: [{ x: event.x, y: event.y }],
- }
- }
- }
- const arrowItem = new SBaseArrowEdit(null, data);
- arrowItem.status = SItemStatus.Create;
- arrowItem.moveable = true;
- this.addItem(arrowItem);
-
- arrowItem.selectable = true;
- this.grabItem = arrowItem;
- arrowItem.connect("finishCreated", this, this.finishCreated);
- arrowItem.connect("onContextMenu", this, this.getItem);
- if (this.view) {
- this.view.update();
- }
- }
-
- addBaseIconTextItem(event: SMouseEvent): void {
- const data = {
-
- name: 'icon',
-
- type: "Text",
-
- pos: { x: event.x, y: event.y },
- size: { width: 50, height: 50 },
-
- properties: {
- type: "BaseText"
- },
- style: {
- default: {
- textList: [{
- text: '文本一',
- color: "#646c73",
- font: 14,
- pos: {
- x: 0,
- y: 0
- }
- },
- {
- text: '文本二',
- color: "#646c73",
- font: 14,
- pos: {
- x: 100,
- y: 100
- }
- }, {
- text: '文本三',
- color: "#ccc",
- font: 18,
- pos: {
- x: 100,
- y: 500
- }
- }
- ],
- url: "data:image/png;base64,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",
- }
- }
- };
- const icon = new SBaseIconTextEdit(null, data);
- icon.status = SItemStatus.Create;
- icon.moveable = true;
- this.addItem(icon);
- icon.selectable = true;
- this.grabItem = icon;
- icon.connect("finishCreated", this, this.finishCreated);
- icon.connect("onContextMenu", this, this.getItem);
- icon.$emit('finishCreated');
- if (this.view) {
- this.view.update();
- }
- }
-
- clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
- let minAnchor = null;
- let len: number = -1;
- this.root.children.forEach(item => {
- if (item instanceof SBaseIconTextEdit && item.anchorList && item.anchorList.length) {
- if (item.img && item.img instanceof SBaseImageEdit) {
- let scenePoint = item.img.mapFromScene(event.x, event.y);
- if (item.img.contains(scenePoint.x, scenePoint.y)) {
- let anchor = item.anchorList[0]
- let anchorPoint = anchor.mapToScene(0, 0);
- let dis = SMathUtil.pointDistance(
- event.x,
- event.y,
- anchorPoint.x,
- anchorPoint.y
- );
- if (len < 0) {
- minAnchor = anchor;
- len = dis;
- }
- if (dis < len) {
- minAnchor = anchor;
- len = dis;
- }
- }
- }
- }
- })
- console.log('-----------------------')
- console.log(minAnchor)
- console.log('-----------------------')
- return minAnchor;
- }
-
- setTipeEndanchor(event: SMouseEvent): void {
- if (this.grabItem instanceof SBasePipe) {
- 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)
- }
- }
-
- changeAlignItem(v: any): void {
- this.selectContainer.layout(v);
- }
-
- saveMsgItem(): any {
-
- }
-
- redo(): void {
-
- }
-
- undo(): void {
-
- }
-
- finishCreated(item: SGraphItem): void {
-
- }
-
- copy(): void {
-
- }
-
- paste(): void { }
-
- toggleItem(item: SGraphItem): void {
- this.selectContainer.clear()
- this.selectContainer.toggleItem(item)
- }
-
- addRectSelect(event: SMouseEvent) {
- let point = new SPoint(event.x, event.y);
- let rect = new SRectSelectItem(null, point);
- this.addItem(rect);
- this.grabItem = rect;
- }
-
- getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
- }
- }
|