gs-bim-air 3.0.3 → 3.0.5

package/src/plugins/canvasDraw/index.ts

@@ -1,319 +0,0 @@
-// // import { debounce } from 'lodash';
-// import { fabric } from "fabric";
-// import CanvasOperator from "./canvasOperator";
-// import { CanvasViewer } from "./canvasViewer";
-// import { Editor, ToolType } from "./lib/editor";
-
-// export enum PenSize {
-//   Small = 2,
-//   Middle = 4,
-//   Large = 6,
-// }
-
-// export class CanvasDraw extends CanvasViewer {
-//   saveCanvas: () => void;
-//   static instance = {};
-//   static getInstance(containerId): CanvasDraw {
-//     if (CanvasDraw.instance[containerId]) {
-//       let element = document.getElementById(
-//         CanvasDraw.instance[containerId].canvasId
-//       );
-//       if (element) {
-//         return CanvasDraw.instance[containerId];
-//       }
-//     }
-//     CanvasDraw.instance[containerId] = new CanvasDraw(containerId);
-//     return CanvasDraw.instance[containerId];
-//   }
-
-//   static isHasInstance(containerId): boolean {
-//     return CanvasDraw.instance[containerId] ? true : false;
-//   }
-
-//   containerId = "";
-
-//   name: string;
-
-//   //inputs
-//   lButtonDown: boolean = false;
-//   rButtonDown: boolean = false;
-//   mButtonDown: boolean = false;
-//   touching: boolean = false;
-
-//   objectEdit: boolean = false;
-
-//   editor: Editor;
-//   _toolType: ToolType = ToolType.Rectangle;
-
-//   fabricCanvas;
-//   keyEvent;
-//   _onResize = null;
-//   keyDown;
-//   keyUp;
-//   canvasOperator: CanvasOperator;
-
-//   constructor(containerId: string) {
-//     super(containerId);
-//     this.fabricCanvas = new fabric.Canvas(this.canvasId);
-//     this.canvasOperator = new CanvasOperator(this.fabricCanvas);
-//     this.containerId = containerId;
-
-//     this.editor = new Editor(
-//       {
-//         id: this.canvasId,
-//       },
-//       this.fabricCanvas
-//     );
-//     this.chooseTool(this._toolType);
-//     this.selector();
-//     this.editor.setColor(this.penColor);
-
-//     this._onResize = () => {
-//       this.debounceResize();
-//     };
-//     window.addEventListener("resize", this._onResize);
-
-//     // this.keyEvent = new KeyEvent()
-//     // this.keyEvent.add(KeyBoardEvent.Delete, () => {
-
-//     // })
-//     this.keyDown = (e) => {
-//       if (e.key === "Delete") {
-//         this.deleteActiveFabricObject();
-//       }
-//     };
-//     window.addEventListener("keydown", this.keyDown);
-//   }
-
-//   get toolType() {
-//     return this._toolType;
-//   }
-
-//   set toolType(toolType: ToolType) {
-//     this._toolType = toolType;
-//     this.chooseTool(toolType);
-//   }
-
-//   get penColor() {
-//     let localColor = localStorage.getItem("penColor");
-//     if (localColor) {
-//       return localColor;
-//     } else {
-//       return "#ff0000";
-//     }
-//   }
-
-//   set penColor(penColor) {
-//     localStorage.setItem("penColor", penColor);
-//     this.editor.setColor(penColor);
-//   }
-
-//   get penSize() {
-//     let localPenSize = localStorage.getItem("penSize");
-//     if (localPenSize) {
-//       return Number(localPenSize);
-//     } else {
-//       return PenSize.Middle;
-//     }
-//   }
-
-//   set penSize(penSize) {
-//     localStorage.setItem("penSize", penSize.toString());
-//     this.editor.setWidth(penSize);
-//   }
-
-//   deleteActiveFabricObject() {
-//     this.fabricCanvas.remove(this.fabricCanvas.getActiveObject());
-//     // 延迟半秒保存canvas画面
-//     setTimeout(() => {
-//       if (this.saveCanvas) {
-//         this.saveCanvas();
-//       }
-//     }, 500);
-//   }
-
-//   chooseTool(name: ToolType) {
-//     // switch (name) {
-//     // 	case ToolType.Arrow:
-//     // 	case ToolType.Rectangle:
-//     // 	case ToolType.Ellipsis:
-//     // 		this.selector();
-//     // 		break;
-//     // 	case ToolType.Text:
-//     // 		this.textSelector();
-//     // 		break;
-//     // 	default:
-//     // 		break;
-//     // }
-//     const tool = this.editor.getToolByName(name);
-//     if (tool) {
-//       this.editor.chooseTool(tool);
-//     }
-//   }
-
-//   selector() {
-//     let that = this;
-//     let isDrawing = false;
-//     this.canvasOperator.clear();
-//     this.canvasOperator.lButtonDown.add((sender, e) => {
-//       if (!that.objectEdit) {
-//         that.editor.onStart(e.e);
-//         isDrawing = false;
-//       }
-//     });
-//     this.canvasOperator.lButtonDownAndMove.add((sender, e) => {
-//       if (!that.objectEdit) {
-//         that.editor.onMove(e.e);
-//         isDrawing = true;
-//       }
-//     });
-//     this.canvasOperator.lButtonUp.add((sender, e) => {
-//       that.editor.onEnd(e.e);
-//       if (this.saveCanvas && isDrawing) {
-//         this.saveCanvas();
-//       }
-//       isDrawing = false;
-//     });
-//     this.canvasOperator.selectionCreated.add((sender, e) => {
-//       that.objectEdit = true;
-//     });
-//     this.canvasOperator.selectionCleared.add((sender, e) => {
-//       that.objectEdit = false;
-
-//       // text模式下删除空白textbox
-//       if (
-//         this.toolType === ToolType.Text &&
-//         e.deselected &&
-//         e.deselected[0].text === ""
-//       ) {
-//         that.fabricCanvas.remove(e.deselected[0]);
-//       }
-//     });
-//   }
-
-//   textSelector() {
-//     let isDrawing = false;
-//     this.canvasOperator.clear();
-//     this.canvasOperator.lButtonDown.add((sender, e) => {
-//       if (!this.objectEdit) {
-//         this.editor.onStart(e.e);
-//         isDrawing = true;
-//       }
-//     });
-//     this.canvasOperator.lButtonDownAndMove.add((sender, e) => {
-//       if (!this.objectEdit) {
-//         this.editor.onMove(e.e);
-//         isDrawing = true;
-//       }
-//     });
-//     this.canvasOperator.lButtonUp.add((sender, e) => {
-//       this.editor.onEnd(e.e);
-//       if (this.saveCanvas && isDrawing) {
-//         this.saveCanvas();
-//       }
-//       isDrawing = false;
-//     });
-//     this.canvasOperator.selectionCleared.add((sender, e) => {
-//       this.objectEdit = false;
-
-//       // text模式下删除空白textbox
-//       if (e.deselected && e.deselected[0].text === "") {
-//         this.fabricCanvas.remove(e.deselected[0]);
-//       }
-//     });
-//   }
-
-//   undo() {
-//     this.editor.undo();
-//   }
-
-//   redo() {
-//     this.editor.redo();
-//   }
-
-//   serialize() {
-//     return this.fabricCanvas.toJSON();
-//   }
-
-//   deserialize(json: string) {
-//     this.clear();
-//     if (json) {
-//       this.fabricCanvas.loadFromJSON(
-//         json,
-//         this.fabricCanvas.renderAll.bind(this.fabricCanvas)
-//       );
-//     }
-//   }
-
-//   clear() {
-//     if (this.fabricCanvas) {
-//       this.fabricCanvas.clear();
-//     }
-//   }
-
-//   debounceResize() {
-//     this.resize();
-//   }
-
-//   // 页面尺寸更改时修改画布大小和对象位置
-//   resize(width?: number, height?: number) {
-//     let canvas = this.fabricCanvas;
-
-//     let lastWidth = width || canvas.width;
-//     let lastHeight = height || canvas.height;
-
-//     let factorX = this.container.offsetWidth / lastWidth;
-//     let factorY = this.container.offsetHeight / lastHeight;
-
-//     let lastCenterX = lastWidth / 2;
-//     let lastCenterY = lastHeight / 2;
-
-//     let centerX = this.container.offsetWidth / 2;
-//     let centerY = this.container.offsetHeight / 2;
-
-//     canvas.setWidth(this.container.offsetWidth);
-//     canvas.setHeight(this.container.offsetHeight);
-
-//     let objects = canvas.getObjects();
-//     for (let i of Object.keys(objects)) {
-//       let scaleX = objects[i].scaleX;
-//       let scaleY = objects[i].scaleY;
-//       let left = objects[i].left;
-//       let top = objects[i].top;
-//       let strokeWidth = objects[i].strokeWidth;
-
-//       let tempScaleX = scaleX * factorY;
-//       let tempScaleY = scaleY * factorY;
-
-//       objects[i].scaleX = tempScaleX;
-//       objects[i].scaleY = tempScaleY;
-
-//       objects[i].strokeWidth = strokeWidth / factorY;
-
-//       // console.log(centerX, lastCenterX, left, factorY);
-//       objects[i].left = centerX - (lastCenterX - left) * factorY;
-//       objects[i].top = centerY - (lastCenterY - top) * factorY;
-
-//       objects[i].scaleToWidth(objects[i].width * factorX);
-//       objects[i].scaleToHeight(objects[i].height * factorY);
-//     }
-
-//     canvas.renderAll();
-//   }
-
-//   public dispose() {
-//     this.disabled = true;
-//     window.removeEventListener("resize", this._onResize);
-//     window.removeEventListener("keydown", this.keyDown);
-//     // this.keyEvent.dispose()
-//     if (this.fabricCanvas) {
-//       this.fabricCanvas.dispose();
-//     }
-
-//     super.dispose();
-//     CanvasDraw.instance[this.containerId] = null;
-
-//     // this.canvas = null;
-//     // this.container = null;
-//   }
-// }

package/src/plugins/canvasDraw/keyEvent.ts

@@ -1,86 +0,0 @@
-// export enum KeyBoardEvent {
-//     Delete = "Delete",
-//     Controlz = "Controlz",
-//     ControlShiftZ = "ControlShiftZ",
-
-// }
-// export default class KeyEvent {
-//     // static instance = new KeyEvent()
-//     el
-//     keySet: Set<string> = new Set()
-//     keyBoardEventGroup = {}
-//     keyDown
-//     keyUp
-//     constructor() {
-
-//         this.keyDown = this.keyDownFunBind()
-//         this.keyUp = this.keyUpFunBind()
-//     }
-
-//     add(keyBoardEventName: KeyBoardEvent, fun: () => void) {
-//         if (!this.keyDown) {
-//             this.keyDown = this.keyDownFunBind()
-//         }
-//         if (!this.keyUp) {
-//             this.keyUp = this.keyUpFunBind()
-//         }
-//         if (!this.keyBoardEventGroup[keyBoardEventName]) {
-//             this.keyBoardEventGroup[keyBoardEventName] = []
-//         }
-//         this.keyBoardEventGroup[keyBoardEventName].push(fun)
-//     }
-
-//     keyDownFunBind() {
-//         return window.addEventListener("keydown", (e) => {
-//             this.keyDownFun(e)
-//         })
-//     }
-
-//     keyDownFun(e) {
-//         let that = this
-//         // debounce(() => {
-
-//         // }, 50)()
-
-//         if (that.keySet.has(e.key)) {
-//             return
-//         }
-//         that.keySet.add(e.key)
-//         let keyBoardEventName = ""
-//         that.keySet.forEach((value) => {
-//             keyBoardEventName = keyBoardEventName + value
-//         })
-
-//         let eventGroup = that.keyBoardEventGroup[keyBoardEventName]
-//         if (eventGroup) {
-//             for (let i = 0; i < eventGroup.length; i++) {
-//                 let fun = eventGroup[i];
-//                 fun()
-//             }
-//         }
-//     }
-
-//     keyUpFunBind() {
-//         return window.addEventListener("keyup",
-//             this.keyUpFun
-//         )
-//     }
-
-//     keyUpFun(e) {
-//         this.keySet.delete(e.key)
-
-//     }
-
-//     dispose() {
-//         window.removeEventListener("keydown",
-//             this.keyDownFun
-//         )
-//         window.removeEventListener("keyup",
-//             this.keyUpFun
-//         )
-//         this.keyBoardEventGroup = {}
-//         this.keyDown = null
-//         this.keyUp = null
-//     }
-
-// }

package/src/plugins/canvasDraw/lib/arrow.ts

@@ -1,49 +0,0 @@
-// import { fabric } from "fabric"
-// import { Shape } from './shape'
-
-// export class Arrow extends Shape {
-//   private arrowHeadLegth = 20
-
-//   // start(e) {
-//   //   super.start(e)
-//   //   this.isDrawing = false
-//   // }
-
-//   // move(e) {
-//   //   super.move(e)
-//   //   this.isDrawing = true
-//   // }
-
-//   unDebouncedMove(e: MouseEvent | TouchEvent) {
-//     const { offsetX, offsetY } = this.getOffset(e)
-
-//     if (this.isDrawing) {
-//       // this.context.putImageData(this.beginState, 0, 0)
-//       // const dx = offsetX - this.startX
-//       // const dy = offsetY - this.startY
-//       // const angle = Math.atan2(dy, dx)
-//       // this.drawLine(this.startX, this.startY, offsetX, offsetY)
-//       // this.drawLine(offsetX, offsetY,
-//       //   offsetX - this.arrowHeadLegth * Math.cos(angle - Math.PI / 5),
-//       //   offsetY - this.arrowHeadLegth * Math.sin(angle - Math.PI / 5))
-//       // this.drawLine(offsetX, offsetY,
-//       //   offsetX - this.arrowHeadLegth * Math.cos(angle + Math.PI / 5),
-//       //   offsetY - this.arrowHeadLegth * Math.sin(angle + Math.PI / 5))
-
-//       const dx = offsetX - this.startX
-//       const dy = offsetY - this.startY
-//       const angle = Math.atan2(dy, dx)
-//       this.fabricCanvas.remove(this.shape)
-//       let line = this.drawLine(this.startX, this.startY, offsetX, offsetY);
-//       let line1 = this.drawLine(offsetX, offsetY,
-//         offsetX - this.arrowHeadLegth * Math.cos(angle - Math.PI / 5),
-//         offsetY - this.arrowHeadLegth * Math.sin(angle - Math.PI / 5));
-//       let line2 = this.drawLine(offsetX, offsetY,
-//         offsetX - this.arrowHeadLegth * Math.cos(angle + Math.PI / 5),
-//         offsetY - this.arrowHeadLegth * Math.sin(angle + Math.PI / 5));
-//       let group = new fabric.Group([line, line1, line2])
-//       this.fabricCanvas.add(group)
-//       this.shape = group
-//     }
-//   }
-// }

package/src/plugins/canvasDraw/lib/color.ts

@@ -1,3 +0,0 @@
-// import { Tool } from './tool'
-
-// export class Color extends Tool { }

package/src/plugins/canvasDraw/lib/diameter.ts

@@ -1,3 +0,0 @@
-// import { Tool } from './tool'
-
-// export class Diameter extends Tool { }

package/src/plugins/canvasDraw/lib/editor.ts

@@ -1,209 +0,0 @@
-// import { Arrow } from "./arrow";
-// import { Ellipsis } from "./ellipsis";
-// import { Rectangle } from "./rectangle";
-// import { Pen } from "./pen";
-// import { Mosaic } from "./mosaic";
-// import { Text } from "./text";
-// import { Diameter } from "./diameter";
-// import { Color } from "./color";
-// import { Tool } from "./tool";
-// import { fabric } from "fabric";
-
-// interface EditorOptions {
-// 	id: string;
-// }
-
-// export enum ToolType {
-// 	Arrow,
-// 	Ellipsis,
-// 	Rectangle,
-// 	Pen,
-// 	Mosaic,
-// 	Text,
-// 	Color,
-// 	Diameter,
-// }
-
-// export class Editor {
-// 	fabricCanvas;
-
-// 	private arrowTool: Arrow;
-// 	private ellipsisTool: Ellipsis;
-// 	private rectangleTool: Rectangle;
-// 	private penTool: Pen;
-// 	private mosaicTool: Mosaic;
-// 	private textTool: Text;
-// 	private diameterTool: Diameter;
-// 	private colorTool: Color;
-// 	public currentTool: Tool;
-// 	public canvas: HTMLCanvasElement;
-// 	private context: CanvasRenderingContext2D;
-// 	private color: string = "#ff0000";
-// 	private width: number = 2;
-// 	private image: HTMLImageElement;
-// 	private filename: string;
-// 	private states: Array<ImageData> = [];
-// 	private poppedStates: Array<ImageData> = [];
-
-// 	constructor(options: EditorOptions, fabricCanvas) {
-// 		this.fabricCanvas = fabricCanvas;
-// 		this.canvas = document.getElementById(options.id) as HTMLCanvasElement;
-// 		this.context = this.canvas.getContext("2d");
-
-// 		const toolOptions = {
-// 			canvas: this.canvas,
-// 			context: this.context,
-// 			color: this.color,
-// 			width: this.width,
-// 			fabricCanvas: this.fabricCanvas,
-// 		};
-
-// 		this.arrowTool = new Arrow(toolOptions);
-// 		this.ellipsisTool = new Ellipsis(toolOptions);
-// 		this.rectangleTool = new Rectangle(toolOptions);
-// 		this.penTool = new Pen(toolOptions);
-// 		this.mosaicTool = new Mosaic(toolOptions);
-// 		this.textTool = new Text(toolOptions);
-// 		this.diameterTool = new Diameter(toolOptions);
-// 		this.colorTool = new Color(toolOptions);
-// 		this.currentTool = this.arrowTool;
-// 	}
-
-// 	public clear() {
-// 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-// 		this.states = [];
-// 		this.poppedStates = [];
-// 		// Clear begin state of each tool
-// 		this.arrowTool.clearBeginState();
-// 		this.ellipsisTool.clearBeginState();
-// 		this.rectangleTool.clearBeginState();
-// 		this.penTool.clearBeginState();
-// 		this.mosaicTool.clearBeginState();
-// 		this.textTool.clearBeginState();
-
-// 		if (this.image) {
-// 			this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
-// 		}
-// 	}
-
-// 	public save() {
-// 		const data = this.canvas.toDataURL("image/png");
-// 		const filename =
-// 			this.filename +
-// 			`_${new Date().getFullYear()}` +
-// 			`${new Date().getMonth()}` +
-// 			`${new Date().getDate()}` +
-// 			`${new Date().getHours()}` +
-// 			`${new Date().getMinutes()}` +
-// 			`.png`;
-// 		this.downloadImage(data, filename);
-// 	}
-
-// 	public getToolByName(name: ToolType): Tool | undefined {
-// 		switch (name) {
-// 			case ToolType.Arrow:
-// 				return this.arrowTool;
-// 			case ToolType.Ellipsis:
-// 				return this.ellipsisTool;
-// 			case ToolType.Rectangle:
-// 				return this.rectangleTool;
-// 			case ToolType.Pen:
-// 				return this.penTool;
-// 			case ToolType.Mosaic:
-// 				return this.mosaicTool;
-// 			case ToolType.Text:
-// 				return this.textTool;
-// 			case ToolType.Color:
-// 				return this.colorTool;
-// 			case ToolType.Diameter:
-// 				return this.diameterTool;
-// 		}
-// 	}
-
-// 	public chooseTool(tool: Tool) {
-// 		this.currentTool = tool;
-// 		this.currentTool.color = this.color;
-// 		this.currentTool.width = this.width;
-// 		// this.currentTool = this.width
-
-// 		if (this.currentTool === this.textTool) {
-// 			this.textTool.change("");
-// 		}
-// 	}
-
-// 	public setImage(img: HTMLImageElement, filename: string) {
-// 		this.image = img;
-// 		this.filename = filename;
-// 		if (img.width > this.canvas.width) {
-// 			this.canvas.height = img.height * (this.canvas.width / img.width);
-// 		} else {
-// 			this.canvas.width = img.width;
-// 			this.canvas.height = img.height;
-// 		}
-// 		this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
-// 	}
-
-// 	public setColor(color: string) {
-// 		this.color = color;
-// 		this.currentTool.color = this.color;
-// 	}
-
-// 	public setWidth(width: number) {
-// 		this.width = width;
-// 		this.currentTool.width = this.width;
-// 	}
-
-// 	public onStart(e: MouseEvent | TouchEvent) {
-// 		console.log("onStart");
-// 		this.currentTool.start(e);
-// 		this.saveState();
-// 	}
-
-// 	public onMove(e: MouseEvent | TouchEvent) {
-// 		console.log("onMove");
-// 		this.currentTool.move(e);
-// 	}
-
-// 	public onEnd(e: MouseEvent | TouchEvent) {
-// 		console.log("onEnd");
-// 		this.currentTool.end(e);
-// 		if (this.states.length > 1) {
-// 			this.states.pop();
-// 		}
-// 		this.saveState();
-// 	}
-
-// 	public saveState() {
-// 		this.states.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height));
-// 	}
-
-// 	public onChange(value: any) {
-// 		if (this.currentTool === this.textTool) {
-// 			this.textTool.change(value);
-// 		}
-// 	}
-
-// 	public downloadImage(data: string, filename = "untitled.png") {
-// 		const a = document.createElement("a");
-// 		a.href = data;
-// 		a.download = filename;
-// 		document.body.appendChild(a);
-// 		a.click();
-// 	}
-
-// 	public undo() {
-// 		const state = this.states.pop();
-// 		if (state) {
-// 			this.poppedStates.push(state);
-// 			this.context.putImageData(state, 0, 0);
-// 		}
-// 	}
-
-// 	public redo() {
-// 		const state = this.poppedStates.pop();
-// 		if (state) {
-// 			this.states.push(state);
-// 			this.context.putImageData(state, 0, 0);
-// 		}
-// 	}
-// }

package/src/plugins/canvasDraw/lib/ellipsis.ts

@@ -1,14 +0,0 @@
-// import { Shape } from './shape'
-
-// export class Ellipsis extends Shape {
-//   unDebouncedMove(e: MouseEvent | TouchEvent) {
-//     const { offsetX, offsetY } = this.getOffset(e)
-
-//     if (this.isDrawing) {
-//       // this.context.putImageData(this.beginState, 0, 0)
-//       // this.drawEllipsis(this.startX, this.startY, offsetX, offsetY)
-//       this.fabricCanvas.remove(this.shape)
-//       this.drawEllipsis(this.startX, this.startY, offsetX, offsetY)
-//     }
-//   }
-// }