{"__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"}