ng-plan
Version:
This module will draw a 2D plan drawing from a geoJSON object. It was built to visualize 2D space boundaries from the Building Information Modeling (BIM) authring tool, Revit. It is quite generic, but does have some features that are mainly related to the
1 lines • 11 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"PlanModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTooltipModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"ng-plan","template":"<!-- Toolbar -->\n<div class=\"toolbar\" *ngIf=\"toolbar\">\n <div class=\"icon-div\" (click)=\"zoomIn(null)\" matTooltip=\"Zoom in\">\n <mat-icon>zoom_in</mat-icon>\n </div>\n <div class=\"icon-div\" (click)=\"zoomOut(null)\" matTooltip=\"Zoom out\">\n <mat-icon>zoom_out</mat-icon>\n </div>\n <div class=\"icon-div\" (click)=\"zoomExtents()\" matTooltip=\"Zoom extents\">\n <mat-icon svgIcon=\"zoom_extents\"></mat-icon>\n </div>\n</div>\n\n<div class=\"footer\">\n <p>Press and hold \"Alt\" to pan</p>\n</div>\n\n<svg canvasEvents\n [style.cursor]=\"panMode ? 'move' : 'default'\"\n #canvas\n class=canvas\n (click)=\"onCanvasClick($event)\"\n (zoomOut)=\"zoomOut($event)\"\n (zoomIn)=\"zoomIn($event)\"\n (panMode)=\"panMode = $event\"\n (move)=\"move($event)\"\n (moveEnd)=\"moveEnd($event)\"\n (window:resize)=\"onWindowResize()\"\n (addNodeMode)=\"addNodeMode = $event\"\n id=\"canvas\">\n\n <!--Draw rooms-->\n <g *ngFor=\"let room of rooms\"\n [attr.transform]=\"transform\"\n [id]=\"room.uri\"\n (click)=\"selectRoom($event, room)\"\n [attr.fill]=\"room.selected ? selectedColor : room.color\"\n class=\"room\">\n\n <!-- Draw polygons -->\n <!-- <polygon *ngFor=\"let polygon of room.polygons\" \n [attr.points]=\"polygon\" \n class=\"polygon\">\n </polygon> -->\n\n <!-- Draw paths -->\n <path\n [class.selected-space]=\"room.selected\"\n [attr.d]=\"room.path\"\n class=\"polygon\">\n </path> \n\n <!-- Draw centroids -->\n <circle \n *ngIf=\"centroids\" \n [attr.cx]=\"room.centroid[0]\" \n fill=\"black\" \n [attr.cy]=\"room.centroid[1]\" \n [attr.r]=\"scaled*500\">\n </circle>\n\n <!-- Add labels -->\n <text \n [style.font-size.em]=\"'12'\"\n style = \"font-family:roboto; fill: black;\"\n text-anchor=\"middle\" \n alignment-baseline=\"central\"\n [attr.x]=\"room.centroid[0]\"\n [attr.dy]=\"room.description ? -150 : 0\"\n [attr.y]=\"room.centroid[1]\">\n {{room.name}}\n </text>\n\n <!-- Add description -->\n <text \n *ngIf = \"room.description\"\n [style.font-size.em]=\"'10'\"\n style = \"font-family:roboto; fill: black;\"\n text-anchor=\"middle\" \n alignment-baseline=\"central\"\n [attr.x]=\"room.centroid[0]\"\n [attr.y]=\"room.centroid[1]\"\n dy=\"150\">\n {{room.description}}\n </text>\n </g>\n\n</svg>","styles":[".canvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1}.polygon{stroke:#000;stroke-width:1;vector-effect:non-scaling-stroke;fill-rule:evenodd}.room:hover{opacity:.5;cursor:pointer}.selected-space{stroke-width:2}.toolbar{position:absolute;color:red;right:20px;width:100%}.icon-div>.mat-icon{float:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(220,220,220,.3);border-width:1px;border-radius:5px;margin-left:5px;padding:5px;z-index:1}.mat-icon{color:rgba(0,0,0,.6);font-size:30px;height:30px;width:30px;z-index:10}.mat-icon:hover{cursor:pointer;color:rgba(0,0,0,1)}.footer{background-color:rgba(220,220,220,.3);position:absolute;font-family:consolas;font-size:12px;padding:0 10px;border-radius:5px;bottom:10px}"]}]}],"members":{"clickedRoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":5}}]}],"clickedCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"centroids":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"defaultColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"planContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":143,"character":5},"arguments":["canvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconRegistry","line":146,"character":31},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":147,"character":28}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"defineColors":[{"__symbolic":"method"}],"getCanvasSize":[{"__symbolic":"method"}],"extractRooms":[{"__symbolic":"method"}],"getScaleOffset":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"moveEnd":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"zoomExtents":[{"__symbolic":"method"}],"zoomOut":[{"__symbolic":"method"}],"zoomIn":[{"__symbolic":"method"}],"zoomHandler":[{"__symbolic":"method"}],"selectRoom":[{"__symbolic":"method"}],"onCanvasClick":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[canvasEvents]"}]}],"members":{"zoomOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":5,"character":3}}]}],"zoomIn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":6,"character":3}}]}],"moveInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":7,"character":3}}]}],"move":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":8,"character":3}}]}],"moveEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"panMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"addNodeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"onMouseWheelChrome":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":19,"character":3},"arguments":["mousewheel",["$event"]]}]}],"onMouseWheelFirefox":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":23,"character":3},"arguments":["DOMMouseScroll",["$event"]]}]}],"onMouseWheelIE":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":3},"arguments":["onmousewheel",["$event"]]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":31,"character":3},"arguments":["document:keydown",["$event"]]}]}],"onKeyUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":49,"character":3},"arguments":["document:keyup",["$event"]]}]}],"onMouseClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":62,"character":3},"arguments":["mousedown",["$event"]]}]}],"onMouseMove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":78,"character":3},"arguments":["mousemove",["$event"]]}]}],"onMouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":85,"character":3},"arguments":["mouseup",["$event"]]}]}],"mouseWheelFunc":[{"__symbolic":"method"}]}}},"origins":{"PlanModule":"./lib/plan.module","ɵa":"./lib/plan.component","ɵb":"./lib/canvas-events.directive"},"importAs":"ng-plan"}