[新增]右侧宽度可拖动调节

src/app/ui/collection-tools/collection-tools.component.html

@@ -66,7 +66,7 @@
       <!-- H5Canvas -->
       <app-working-area #canvas></app-working-area>
       <!-- H5Canvas -->
-      <div class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}">
+      <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
 
         <!-- 平面图 -->
         <div class="planarGraph">
@@ -143,9 +143,11 @@
 
       </div>
 
-      <div class="functionalDomainRight publicCss ">
+      <div id="rightDiv" class="functionalDomainRight publicCss " style="user-select: none">
+        <!-- 右侧div鼠标拖动div -->
+        <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
         <!-- 属性 -->
-        <div class="property" style="height: 50%;">
+        <div id="property" class="property" style="height: 50%;">
           <div class="title">
             <div>
               <span style="user-select: none">属性</span>
@@ -266,12 +268,16 @@
         
         </div>
         <!-- 消防要素 -->
-        <div class="firecategories" style="height: 50%;">
+        <div id="firecategories" class="firecategories" style="height: 50%;">
+          <!-- 素材属性div鼠标拖动div -->
+          <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;background-color: red;" (mousedown)="firecategoriesDivMouseDown($event)"></div>
+          
           <div class="title">
             <div>
               <span style="user-select: none">消防要素</span>
             </div>
           </div>
+
           <div class="firecategoriesTree">
             <!-- 消防列表树写在这里 -->
             <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
@@ -297,7 +303,7 @@
             </mat-tree>
           </div>
         </div>
-    </div>
+      </div>
   </div>
   <!--功能区 -->
 

src/app/ui/collection-tools/collection-tools.component.scss

@@ -225,6 +225,7 @@
 }
 //右侧消防要素
 .firecategories{
+  position: relative;
   display: flex;
   flex-flow: column;
   .firecategoriesTree{

src/app/ui/collection-tools/collection-tools.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2 } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
@@ -14,10 +14,10 @@ import {WorkingAreaComponent} from '../../working-area/working-area.component'
   styleUrls: ['./collection-tools.component.scss']
 })
 export class CollectionToolsComponent implements OnInit {
-  
+
   @ViewChild('canvas') canvas:WorkingAreaComponent; //父组件中获得子组件的引用
 
-  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,) { }
   // tree配置
   private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
     return {
@@ -309,8 +309,42 @@ export class CollectionToolsComponent implements OnInit {
     // this.proObject.Angle = this.sliderValue
   }
 
-
-
+  //右侧div边框宽度调节
+  rightDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyWidth = document.body.clientWidth //网页宽度
+      let maxWidth = bodyWidth - 240 - this.element.nativeElement.querySelector('#leftDiv').clientWidth  //最大宽度
+      if(bodyWidth - ev.clientX >= maxWidth){
+        this.element.nativeElement.querySelector('#rightDiv').style.width = maxWidth + 'px'
+      }else{
+        this.element.nativeElement.querySelector('#rightDiv').style.width = bodyWidth - ev.clientX + 'px';
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
+  //消防要素div边框高度调节
+  firecategoriesDivMouseDown(e){
+    document.onmousemove = (ev) => {
+      let bodyHeight = document.body.clientHeight //网页宽度
+      let maxHeight = this.element.nativeElement.querySelector('#rightDiv').clientHeight - 35  //最大宽度
+      if(bodyHeight - ev.clientY >= maxHeight){
+        this.element.nativeElement.querySelector('#firecategories').style.height = maxHeight + 'px'
+        this.element.nativeElement.querySelector('#property').style.height = 35 + 'px'
+      }else{
+        let sucai = this.element.nativeElement.querySelector('#firecategories').style.height = bodyHeight - ev.clientY ;
+        
+        this.element.nativeElement.querySelector('#property').style.height = this.element.nativeElement.querySelector('#rightDiv').clientHeight - sucai
+        
+      }
+    }
+    document.onmouseup = () => {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    }
+  }
 
   //素材是否高亮改变
   assetHighLightIunput(){