diff --git a/src/app/ui/collection-tools-building/collection-tools.component.ts b/src/app/ui/collection-tools-building/collection-tools.component.ts
index fb2e03b..4a50aa3 100644
--- a/src/app/ui/collection-tools-building/collection-tools.component.ts
+++ b/src/app/ui/collection-tools-building/collection-tools.component.ts
@@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
-
+import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
selector: 'app-collection-tools-building',
templateUrl: './collection-tools.component.html',
@@ -83,9 +83,11 @@ export class CollectionToolsBuildingComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
- this.gallery = new Viewer(document.getElementById('viewerjs'),{
- url: 'data-original'
- });
+ if(document.getElementById('viewerjs')){
+ this.gallery = new Viewer(document.getElementById('viewerjs'),{
+ url: 'data-original'
+ });
+ }
}
})
}, 0);
@@ -607,23 +609,79 @@ export class CollectionToolsBuildingComponent implements OnInit {
this.canvasData.isChange = true
}
-
- isSixShow = true
- isSixbtn = true //控制想定作业编辑按钮
isediticon = true //控制查看编辑模式的编辑模式小笔按钮
- ngOnInit(): void {
- if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
- this.isSixbtn = false
- }
- if(!this.isSixbtn && sessionStorage.getItem("six") == "edit"){
- this.isSixShow = true
- }
- if(!this.isSixbtn && sessionStorage.getItem("six") == "look"){
+ isMultipleAsset:boolean = false//框选多个素材属性显隐
+ multipleAsset:any = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }//多个素材共同属性
+ multipleAssetData:any//当前多选的素材
+ firstMultipleAssetData:any//当前多选的第一个素材
+ ngOnInit(): void {
+ let _this = this
+ AxMessageSystem.addListener('selectionChanged', ()=>{
+ if(this.canvas.selection.size() == 1){//如果是单选
+ this.isMultipleAsset = false
+ // console.log('单选',this.canvas.selection.first().assetData)
+ this.setAssetsProperty(this.canvas.selection.first().assetData)
+ }else if(this.canvas.selection.size()){
+ // console.log('多选')
+ this.isShowProperty = true
+ this.multipleAssetData = this.canvas.selection.all()
+ this.firstMultipleAssetData = this.canvas.selection.first()
+ this.multipleAsset = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }
+ this.isMultipleAsset = true
+ let firstAssetData = this.canvas.selection.first().assetData;//拿出第一个素材作为例子与其他素材进行对比
+ let InteractiveMode = firstAssetData.InteractiveMode //素材连接方式
+ let isInteractiveMode = this.canvas.selection.all().every(item => item.assetData.InteractiveMode === InteractiveMode)
+ if(isInteractiveMode){
+ this.multipleAsset.InteractiveMode = InteractiveMode
+ }
+ let isFillMode = this.canvas.selection.all().every(item => item.assetData.FillMode === 0) //素材填充方式都为0
+ if(isFillMode){
+ this.multipleAsset.FillMode = 0
+ }
+ this.canvas.selection.first().assetData.PropertyInfos.forEach(i => {
+ let index = 0
+ this.canvas.selection.all().forEach(item => {
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName && element.PropertyType == i.PropertyType && element.PropertyType != 3 && element.PropertyType != 4){
+ index++
+ if(index == this.canvas.selection.size()){
+ let newElement = JSON.parse(JSON.stringify(element))
+ newElement.PropertyValue = ''
+ this.multipleAsset.PropertyInfos.push(newElement)
+ }
+ }
+ });
+ })
+ })
+ }else if(this.canvas.selection.size() == 0){
+ this.isShowProperty = false
+ }
+ }, this)
+
+ if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1){ //查看模式
this.isEditPattern = false
this.isediticon = false
+ this.canvasData.gameMode = GameMode.Assignment
+ } else if (this.router.url.indexOf("keyUnit/editplaninfo")!= -1) { //编辑模式
+ this.canvasData.gameMode = GameMode.BasicInformation
}
+
//gis模块平面图
if(this.router.url.indexOf("gis") != -1 && sessionStorage.getItem("gisplan") == "look"){
this.isEditPattern = false
@@ -641,30 +699,121 @@ export class CollectionToolsBuildingComponent implements OnInit {
event.preventDefault();
};
})
-
+
this.canvasData.getMessage().subscribe((message: any)=>{
if(message == "send a message"){
this.refurbishTreeData()
}
})
}
+ //多选宽度共同改变
+ multipleAssetWidthInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Width = this.multipleAsset.Width
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选高度共同改变
+ multipleAssetHeightInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Height = this.multipleAsset.Height
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选角度共同改变
+ multipleAssetAngleInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Angle = this.multipleAsset.Angle
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选厚度共同改变
+ multipleAssetThicknessInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Thickness = this.multipleAsset.Thickness
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选颜色共同改变
+ multipleSelectedcolor:any
+ multipleAssetSelectcolor(item,key){
+ //在当前透明度基础上改变颜色
+ this.multipleSelectedcolor = item
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选颜色滑竿改变
+ multipleColorDivSliderChange(){
+ let colorOpacity = Math.round(255 * this.colorDivSliderValue * 0.01)
+ //根据滑竿值改变16进制颜色后两位
+ function replacepos(text,start,stop,replacetext){
+ let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
+ return mystr;
+ }
+ this.multipleAssetData.forEach(item=>{
+ this.multipleSelectedcolor = replacepos(this.multipleSelectedcolor,7,8,colorOpacity.toString(16))
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选状态动态属性素材input框值改变
+ multipleAssetInputChange(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材radio框值改变
+ multipleAssetRadioChange(i,value){
+ // e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = value
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材下拉框值改变
+ multipleSupplyArea(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
ngAfterViewInit(): void {
- //gis模块平面图
- if(this.router.url.indexOf("gis") == -1) {
+ //不是gis模块平面图
+ if(this.router.url.indexOf("gis") == -1) {
this.getAllBuildings(true) //获取所有建筑
- }
- // 监听canvas组件选中素材事件
- this.canvas.on("select",obj=>{
- //选中素材属性注入函数
- this.setAssetsProperty(obj.assetData)
- })
- // 监听canvas组件取消选中素材事件
- this.canvas.on("deselect",obj=>{
- this.isShowProperty = false
- })
+ }
//监听数据变化后
this.canvas.on('canvasDataChanged',()=>{
// 收到数据表示共享数据发生变化
diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.html b/src/app/ui/collection-tools-plan/collection-tools.component.html
index ac69822..4d4abdd 100644
--- a/src/app/ui/collection-tools-plan/collection-tools.component.html
+++ b/src/app/ui/collection-tools-plan/collection-tools.component.html
@@ -24,7 +24,7 @@
-
+
@@ -153,7 +153,7 @@
属性
-
+
面积(平方米)
{{canvasData.selectStorey.area}}
详情
@@ -162,14 +162,14 @@
-
+
{{assetName}}
-
+
+
+
+
宽度(像素)
+
+
高度(像素)
+
+
角度
+
+
+
+
+
+
+
+
+
+
+
透明度
+
+
{{colorDivSliderValue}}%
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.ts b/src/app/ui/collection-tools-plan/collection-tools.component.ts
index d4b9d0b..c591b0f 100644
--- a/src/app/ui/collection-tools-plan/collection-tools.component.ts
+++ b/src/app/ui/collection-tools-plan/collection-tools.component.ts
@@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
-
+import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
selector: 'app-collection-tools-plan',
templateUrl: './collection-tools.component.html',
@@ -83,9 +83,11 @@ export class CollectionToolsPlanComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
- this.gallery = new Viewer(document.getElementById('viewerjs'),{
- url: 'data-original'
- });
+ if(document.getElementById('viewerjs')){
+ this.gallery = new Viewer(document.getElementById('viewerjs'),{
+ url: 'data-original'
+ });
+ }
}
})
}, 0);
@@ -408,7 +410,10 @@ export class CollectionToolsPlanComponent implements OnInit {
//素材是否高亮改变----->本地操作行为
assetHighLightIunput(){
-
+ // console.log(this.isHighLight,this.canvasAssetObj)
+ // let arr = []
+ // arr.push(this.canvasAssetObj.Id)
+ // this.canvas.setHighlight(arr)
}
//动态属性素材input框值改变
@@ -607,22 +612,79 @@ export class CollectionToolsPlanComponent implements OnInit {
this.canvasData.isChange = true
}
- isSixShow = true
- isSixbtn = true //控制想定作业编辑按钮
isediticon = true //控制查看编辑模式的编辑模式小笔按钮
- ngOnInit(): void {
- if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
- this.isSixbtn = false
- }
+ isMultipleAsset:boolean = false//框选多个素材属性显隐
+ multipleAsset:any = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }//多个素材共同属性
+ multipleAssetData:any//当前多选的素材
+ firstMultipleAssetData:any//当前多选的第一个素材
+ ngOnInit(): void {
+ let _this = this
+ AxMessageSystem.addListener('selectionChanged', ()=>{
+ if(this.canvas.selection.size() == 1){//如果是单选
+ this.isMultipleAsset = false
+ // console.log('单选',this.canvas.selection.first().assetData)
+ this.setAssetsProperty(this.canvas.selection.first().assetData)
+ }else if(this.canvas.selection.size()){
+ // console.log('多选')
+ this.isShowProperty = true
+ this.multipleAssetData = this.canvas.selection.all()
+ this.firstMultipleAssetData = this.canvas.selection.first()
+ this.multipleAsset = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }
+ this.isMultipleAsset = true
+ let firstAssetData = this.canvas.selection.first().assetData;//拿出第一个素材作为例子与其他素材进行对比
+ let InteractiveMode = firstAssetData.InteractiveMode //素材连接方式
+ let isInteractiveMode = this.canvas.selection.all().every(item => item.assetData.InteractiveMode === InteractiveMode)
+ if(isInteractiveMode){
+ this.multipleAsset.InteractiveMode = InteractiveMode
+ }
+ let isFillMode = this.canvas.selection.all().every(item => item.assetData.FillMode === 0) //素材填充方式都为0
+ if(isFillMode){
+ this.multipleAsset.FillMode = 0
+ }
+ this.canvas.selection.first().assetData.PropertyInfos.forEach(i => {
+ let index = 0
+ this.canvas.selection.all().forEach(item => {
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName && element.PropertyType == i.PropertyType && element.PropertyType != 3 && element.PropertyType != 4){
+ index++
+ if(index == this.canvas.selection.size()){
+ let newElement = JSON.parse(JSON.stringify(element))
+ newElement.PropertyValue = ''
+ this.multipleAsset.PropertyInfos.push(newElement)
+ }
+ }
+ });
+ })
+ })
+ // console.log(666,_this.multipleAsset.PropertyInfos)
+ }else if(this.canvas.selection.size() == 0){
+ this.isShowProperty = false
+ }
+ }, this)
- if(!this.isSixbtn && sessionStorage.getItem("six") == "edit"){
- this.isSixShow = true
- }
- if(!this.isSixbtn && sessionStorage.getItem("six") == "look"){
+ if(this.router.url.indexOf("keyUnit/viewunitinfo") != -1){ //查看模式
this.isEditPattern = false
this.isediticon = false
+ this.canvasData.gameMode = GameMode.Assignment
+ } else if (this.router.url.indexOf("keyUnit/editplaninfo")!= -1) { //编辑模式
+ this.canvasData.gameMode = GameMode.BasicInformation
}
+
//gis模块平面图
if(this.router.url.indexOf("gis") != -1 && sessionStorage.getItem("gisplan") == "look"){
this.isEditPattern = false
@@ -647,23 +709,114 @@ export class CollectionToolsPlanComponent implements OnInit {
}
})
}
+ //多选宽度共同改变
+ multipleAssetWidthInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Width = this.multipleAsset.Width
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选高度共同改变
+ multipleAssetHeightInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Height = this.multipleAsset.Height
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选角度共同改变
+ multipleAssetAngleInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Angle = this.multipleAsset.Angle
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选厚度共同改变
+ multipleAssetThicknessInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Thickness = this.multipleAsset.Thickness
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选颜色共同改变
+ multipleSelectedcolor:any
+ multipleAssetSelectcolor(item,key){
+ //在当前透明度基础上改变颜色
+ this.multipleSelectedcolor = item
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选颜色滑竿改变
+ multipleColorDivSliderChange(){
+ let colorOpacity = Math.round(255 * this.colorDivSliderValue * 0.01)
+ //根据滑竿值改变16进制颜色后两位
+ function replacepos(text,start,stop,replacetext){
+ let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
+ return mystr;
+ }
+ this.multipleAssetData.forEach(item=>{
+ this.multipleSelectedcolor = replacepos(this.multipleSelectedcolor,7,8,colorOpacity.toString(16))
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选状态动态属性素材input框值改变
+ multipleAssetInputChange(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材radio框值改变
+ multipleAssetRadioChange(i,value){
+ // e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = value
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材下拉框值改变
+ multipleSupplyArea(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ // console.log(item)
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
ngAfterViewInit(): void {
- //gis模块平面图
- if(this.router.url.indexOf("gis") == -1) {
+ //不是gis模块平面图
+ if(this.router.url.indexOf("gis") == -1) {
this.getSitePlan()
- }
- // 监听canvas组件选中素材事件
- this.canvas.on("select",obj=>{
- //选中素材属性注入函数
- this.setAssetsProperty(obj.assetData)
- })
- // 监听canvas组件取消选中素材事件
- this.canvas.on("deselect",obj=>{
- this.isShowProperty = false
- })
+ }
//监听数据变化后
this.canvas.on('canvasDataChanged',()=>{
// 收到数据表示共享数据发生变化
diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
index be34123..09f418f 100644
--- a/src/app/ui/collection-tools/collection-tools.component.html
+++ b/src/app/ui/collection-tools/collection-tools.component.html
@@ -58,7 +58,7 @@
-
+
@@ -227,7 +227,7 @@
-
+
{{assetName}}
-
+
+
+
+
宽度(像素)
+
+
高度(像素)
+
+
角度
+
+
+
+
+
+
+
+
+
+
+
透明度
+
+
{{colorDivSliderValue}}%
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
{{item.PropertyName}}({{item.PhysicalUnit}})
+
+
+
+
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
+
{{item.PropertyName}}
+
+
+
+
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts
index 9ac9bd6..c8227de 100644
--- a/src/app/ui/collection-tools/collection-tools.component.ts
+++ b/src/app/ui/collection-tools/collection-tools.component.ts
@@ -16,7 +16,7 @@ import { GameMode } from 'src/app/working-area/model/gameMode';
import { ActivatedRoute, Router } from '@angular/router';
import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
-
+import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
@Component({
selector: 'app-collection-tools',
templateUrl: './collection-tools.component.html',
@@ -82,9 +82,11 @@ export class CollectionToolsComponent implements OnInit {
setTimeout(() => {
obj.PropertyInfos.forEach(item => {
if(item.PropertyType == 4){
- this.gallery = new Viewer(document.getElementById('viewerjs'),{
- url: 'data-original'
- });
+ if(document.getElementById('viewerjs')){
+ this.gallery = new Viewer(document.getElementById('viewerjs'),{
+ url: 'data-original'
+ });
+ }
}
})
}, 0);
@@ -619,28 +621,74 @@ export class CollectionToolsComponent implements OnInit {
this.canvasData.isChange = true
}
+ isMultipleAsset:boolean = false//框选多个素材属性显隐
+ multipleAsset:any = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }//多个素材共同属性
+ multipleAssetData:any//当前多选的素材
+ firstMultipleAssetData:any//当前多选的第一个素材
+ ngOnInit(): void {
- isSixShow = true
- isSixbtn = true //控制想定作业编辑按钮
- isxxx = true //控制查看编辑模式的编辑模式按钮
+ let _this = this
+ AxMessageSystem.addListener('selectionChanged', ()=>{
+ if(this.canvas.selection.size() == 1){//如果是单选
+ this.isMultipleAsset = false
+ // console.log('单选',this.canvas.selection.first().assetData)
+ this.setAssetsProperty(this.canvas.selection.first().assetData)
+ }else if(this.canvas.selection.size()){
+ // console.log('多选')
+ this.isShowProperty = true
+ this.multipleAssetData = this.canvas.selection.all()
+ this.firstMultipleAssetData = this.canvas.selection.first()
+ this.multipleAsset = {
+ Width:null,
+ Height:null,
+ Angle:null,
+ Thickness:null,
+ Color:null,
+ PropertyInfos:[]
+ }
+ this.isMultipleAsset = true
+ let firstAssetData = this.canvas.selection.first().assetData;//拿出第一个素材作为例子与其他素材进行对比
+ let InteractiveMode = firstAssetData.InteractiveMode //素材连接方式
+ let isInteractiveMode = this.canvas.selection.all().every(item => item.assetData.InteractiveMode === InteractiveMode)
+ if(isInteractiveMode){
+ this.multipleAsset.InteractiveMode = InteractiveMode
+ }
+ let isFillMode = this.canvas.selection.all().every(item => item.assetData.FillMode === 0) //素材填充方式都为0
+ if(isFillMode){
+ this.multipleAsset.FillMode = 0
+ }
+ this.canvas.selection.first().assetData.PropertyInfos.forEach(i => {
+ let index = 0
+ this.canvas.selection.all().forEach(item => {
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName && element.PropertyType == i.PropertyType && element.PropertyType != 3 && element.PropertyType != 4){
+ index++
+ if(index == this.canvas.selection.size()){
+ let newElement = JSON.parse(JSON.stringify(element))
+ newElement.PropertyValue = ''
+ this.multipleAsset.PropertyInfos.push(newElement)
+ }
+ }
+ });
+ })
+ })
+ }else if(this.canvas.selection.size() == 0){
+ this.isShowProperty = false
+ }
+ }, this)
- ngOnInit(): void {
this.canvasData.gameMode = GameMode.Assignment
- if(this.router.url.indexOf("keyUnit/viewunitinfoplan") == -1 && this.router.url.indexOf("keyUnit/viewunitinfo") != -1 || this.router.url.indexOf("keyUnit/editplaninfo")!= -1){
- this.isSixbtn = false
- }
-
- if(!this.isSixbtn && sessionStorage.getItem("six") == "edit"){
- this.isSixShow = true
- }
- if(!this.isSixbtn && sessionStorage.getItem("six") == "look"){
+ if (sessionStorage.getItem('editable') == "0") { //查看模式
this.isEditPattern = false
- this.isxxx = false
- }
+ } else {
- if (sessionStorage.getItem('editable') == "0") {
- this.isEditPattern = false
- this.isxxx = false
}
this.getAllLibrary('plan') //获取素材库
@@ -655,28 +703,115 @@ export class CollectionToolsComponent implements OnInit {
event.preventDefault();
};
})
-
+
this.canvasData.getMessage().subscribe((message: any)=>{
if(message == "send a message"){
this.refurbishTreeData()
}
})
- }
+ }
+ //多选宽度共同改变
+ multipleAssetWidthInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Width = this.multipleAsset.Width
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选高度共同改变
+ multipleAssetHeightInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Height = this.multipleAsset.Height
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选角度共同改变
+ multipleAssetAngleInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Angle = this.multipleAsset.Angle
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选厚度共同改变
+ multipleAssetThicknessInput(){
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Thickness = this.multipleAsset.Thickness
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ })
+ }
+ //多选颜色共同改变
+ multipleSelectedcolor:any
+ multipleAssetSelectcolor(item,key){
+ //在当前透明度基础上改变颜色
+ this.multipleSelectedcolor = item
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选颜色滑竿改变
+ multipleColorDivSliderChange(){
+ let colorOpacity = Math.round(255 * this.colorDivSliderValue * 0.01)
+ //根据滑竿值改变16进制颜色后两位
+ function replacepos(text,start,stop,replacetext){
+ let mystr = text.substring(0,stop-1)+replacetext+text.substring(stop+1);
+ return mystr;
+ }
+ this.multipleAssetData.forEach(item=>{
+ this.multipleSelectedcolor = replacepos(this.multipleSelectedcolor,7,8,colorOpacity.toString(16))
+ item.assetData.Color = this.multipleSelectedcolor
+ this.canvasData.isChange = true
+ this.canvas.refreshIcon(item.assetData.Id)
+ })
+ }
+ //多选状态动态属性素材input框值改变
+ multipleAssetInputChange(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材radio框值改变
+ multipleAssetRadioChange(i,value){
+ // e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = value
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
+ //多选状态动态属性素材下拉框值改变
+ multipleSupplyArea(i,e){
+ e.stopPropagation()
+ this.multipleAssetData.forEach(item=>{
+ item.assetData.PropertyInfos.forEach(element => {
+ if(element.PropertyName == i.PropertyName){
+ element.PropertyValue = i.PropertyValue
+ this.canvas.refreshIcon(item.assetData.Id)
+ this.canvasData.isChange = true
+ }
+ })
+ })
+ }
ngAfterViewInit(): void {
-
this.getSitePlan()
- // 监听canvas组件选中素材事件
- this.canvas.on("select",obj=>{
- //选中素材属性注入函数
- this.setAssetsProperty(obj.assetData)
- })
- // 监听canvas组件取消选中素材事件
- this.canvas.on("deselect",obj=>{
- this.isShowProperty = false
- })
//监听数据变化后
this.canvas.on('canvasDataChanged',()=>{
// 收到数据表示共享数据发生变化
@@ -687,7 +822,14 @@ export class CollectionToolsComponent implements OnInit {
copyAssetData:any //存储用于复制的素材
//复制素材
copyAsset(){
- this.canvas.copy()
+ if(this.canvas.selection.allowEdit()){//如果当前选中素材可以编辑
+ this.canvas.copy()
+ }else{
+ let config = new MatSnackBarConfig();
+ config.verticalPosition = 'top';
+ config.duration = 3000
+ this.snackBar.open('当前选中素材不可复制','确定',config);
+ }
}
//粘贴素材
pasteAsset(){
@@ -2280,7 +2422,7 @@ export class CollectionToolsComponent implements OnInit {
if(selectPanelPoint.Data){
for(let key in selectPanelPoint.Data.Stock){ //筛选数据 没有匹配全部放入到 其他 数组
let noMatch = this.allFireElements.find( every=> every.id===selectPanelPoint.Data.Stock[key].FireElementId )
- if (!noMatch) {
+ if (!noMatch && selectPanelPoint.Data.Stock[key].Id != "图例") {
this.allFireElements[this.allFireElements.length-1].children.push(selectPanelPoint.Data.Stock[key])
}
}
diff --git a/src/app/working-area/model/axGrid.ts b/src/app/working-area/model/axGrid.ts
index 348c709..4e178ad 100644
--- a/src/app/working-area/model/axGrid.ts
+++ b/src/app/working-area/model/axGrid.ts
@@ -8,58 +8,38 @@ const DEFAULT_LINE_STYLE = {
native: true,
};
-/**
- * @description 在屏幕上绘制网格的实用程序类。
- * @extends PIXI.Graphics
- */
export class AxGrid extends PIXI.Graphics {
- private _cellSize: number;
- private _correctedWidth: number;
- private _gridWidth: number;
- private _useCorrectedWidth: boolean;
- private _drawBoundaries: any;
- private _amtLines: any;
- /**
- * @param {number} cellSize 默认值:网格边长的平方根
- */
+ private _cellSize: number;
+ private _correctedWidth: number;
+ private _gridWidth: number;
+ private _useCorrectedWidth: boolean;
+ private _drawBoundaries: any;
+ private _amtLines: any;
+
set cellSize(cellSize) {
this._cellSize = cellSize || Math.sqrt(this._correctedWidth);
}
-
get cellSize() {
return this._cellSize;
}
-
- /**
- * 网格边等距线的数量
- */
get amtLines() {
return Math.floor(this.gridWidth / this.cellSize);
}
-
- /**
- * 由' width '构造函数参数给出的网格的请求宽度。
- */
get originalWidth() {
return this._gridWidth;
}
-
/**
- * 修正后的网格宽度，即大于最小平方根的数
- * 修正后的宽度。
+ * 修正后的网格宽度，大于最小平方根的数
*/
get correctedWidth() {
return this._correctedWidth;
}
-
get useCorrectedWidth() {
return this._useCorrectedWidth;
}
/**
* 网格中每个角落的坐标。
- * @returns {{ x1: number, y1: number, x2: number, y2: number}}
- * 最左边(**x1**)，最上面(**y1**)，最右边(**x2**)和最下面(**y2**)的坐标。
*/
get bounds() {
return {
@@ -78,50 +58,11 @@ export class AxGrid extends PIXI.Graphics {
return this._drawBoundaries;
}
- /**
- * 网格的实际宽度。
- * 当' cellSize '不是默认值时，网格的宽度将为
- * 在' width '构造函数中给出的宽度。否则，就是修改后的宽度。
- */
get gridWidth() {
if (!this.useCorrectedWidth) { return this._gridWidth; }
return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth;
}
- /**
- *
- * @param {number} width number. Required.
- *
- * The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If
- * not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width,
- * which is the smallest perfect square greater than `width`.
- *
- * @param {number} cellSize number, null. Optional, default: square root of corrected width
- *
- * The size of each cell in the grid.
- * If the value is **null**, the grid will use the default value.
- *
- * @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional.
- *
- * default:
- * **{
- * width: 1,
- * color: 0xffffff,
- * alpha: 1,
- * alignment: 0.5,
- * native: true
- * }**
- *
- * Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class.
- *
- * @param {boolean} useCorrectedWidth boolean. Optional. default: **true**
- * If **true**, the grid will use the smallest perfect square greater than `width`.
- * Otherwise, the grid will use the exact value given by `width`.
- *
- * @param {boolean} drawBoundaries boolean. Optional. default: **true**
- * If **true**, the grid will draw its boundaries.
- * Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected.
- */
constructor(
width,
cellSize= null,
@@ -151,12 +92,9 @@ export class AxGrid extends PIXI.Graphics {
lConfig.alignment,
lConfig.native
);
-
- // handle mouse move
this.interactive = true;
this.on('mousemove', (evt) => {
const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent);
- // 检查鼠标是否在此网格的范围内。如果不是，那就什么都不做。
if (
mouseCoords.x >= this.bounds.x1 &&
mouseCoords.x <= this.bounds.x2 &&
@@ -192,11 +130,6 @@ export class AxGrid extends PIXI.Graphics {
/**
* 清除网格
- *
- * @param {boolean} retainLineStyle 可选，默认：true
- *
- * 当**true**时，线条样式对象的配置将被保留。
- * 否则，对象的行样式将恢复为' PIXI '指定的默认值。图形的对象。
*/
clearGrid(retainLineStyle = true) {
const { width, alignment, color, alpha, native } = this.line;
@@ -207,14 +140,10 @@ export class AxGrid extends PIXI.Graphics {
return this;
}
-
/**
- * Transforms global coordinates to grid coordinates.
- * @param {number} x
- * The global X coordinate.
- *
- * @param {number} y
- * The global Y coordinate.
+ * 返回网格的坐标
+ * @param x 坐标x
+ * @param y 坐标y
*/
getCellCoordinates(x, y) {
return {
@@ -222,22 +151,15 @@ export class AxGrid extends PIXI.Graphics {
y: Math.floor((y - this.bounds.y1) / this.cellSize),
};
}
-
/**
- * 检测到mousemove事件后触发的回调。
- *
- * @param {PIXI.InteractionData} evt
- * 'PIXI.InteractionData '事件
- *
- * @param {{x: number, y: number}} gridCoords
- * 网格坐标
+ * 鼠标移动事件
+ * @param evt 鼠标事件
+ * @param gridCoords 鼠标所在网格坐标
*/
onMousemove(evt, gridCoords) {
}
-
- // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
- // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+ // 默认宽度
_correctWidth() {
if (!this._useCorrectedWidth) {
this._correctedWidth = this._gridWidth;
@@ -245,9 +167,7 @@ export class AxGrid extends PIXI.Graphics {
this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2;
}
-
- // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
- // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+ // 自定义宽度
correctWidth(width: number) {
if (!this._useCorrectedWidth) {
this._correctedWidth = width;
diff --git a/src/app/working-area/model/axSelection.ts b/src/app/working-area/model/axSelection.ts
index 8bd6400..f075523 100644
--- a/src/app/working-area/model/axSelection.ts
+++ b/src/app/working-area/model/axSelection.ts
@@ -1,3 +1,5 @@
+import { allowedNodeEnvironmentFlags } from "process";
+
/**
* 选择器
*/
@@ -17,6 +19,17 @@ export class AxSelection {
public has(obj: any): boolean {
return this.objects.has(obj);
}
+ // 是否所有选择对象都允许编辑
+ public allowEdit(): boolean {
+ let allowEdit = true;
+ for (const item of this.objects) {
+ if (!item.allowEdit) {
+ allowEdit = false;
+ break;
+ }
+ }
+ return allowEdit;
+ }
// 获得所有对象
public all() {
return [...this.objects];
diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts
index 3a5dae7..06176d7 100644
--- a/src/app/working-area/model/axShape.ts
+++ b/src/app/working-area/model/axShape.ts
@@ -10,10 +10,8 @@ export class AxShape extends Graphics {
assetData: any;
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
workingArea: WorkingAreaComponent;
- // 可以被移动的
- moveable = true;
- // 可以被选中的
- selectable = true;
+ // 允许选择
+ allowSelect = true;
// 允许编辑
allowEdit = true;
// 是否显示名称
@@ -38,10 +36,10 @@ export class AxShape extends Graphics {
this
.on('pointerdown', event => {
event.stopPropagation();
- if (this.selectable) {
+ if (this.allowSelect) {
this.workingArea.select(this);
}
- if (this.moveable) {
+ if (this.allowEdit) {
this.mouseDragging = true;
this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
}
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index 7f80485..d07f88e 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -453,7 +453,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/
public refreshIcon(id: string): void {
const icon = this.backgroundImage.children.find(item => item.name === id);
- console.log(icon);
+ // console.log(icon);
if (icon instanceof AxImageShape) {
icon.refresh();
} else if (icon instanceof MultipointIcon) {
@@ -490,21 +490,26 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
switch (floorData[key].InteractiveMode) {
case 0:
const singleIcon = new AxImageShape(floorData[key], this);
- singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
+ singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
break;
case 1:
const icon = new MultipointIcon(floorData[key], this);
+ icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode;
break;
case 2:
const polygonIcon = new PolygonIcon(floorData[key], this);
+ polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode;
break;
case 3:
if (floorData[key].Name === '水带') {
- const distance = new AxArrowConnector(floorData[key], this, false, true);
+ const waterLine = new AxArrowConnector(floorData[key], this, false, true);
+ waterLine.allowEdit = this.allowEdit && this.canvasData.gameMode === waterLine.assetData.GameMode;
} else if (floorData[key].Name === '距离') {
const distance = new AxArrowConnector(floorData[key], this, true, true);
+ distance.allowEdit = this.allowEdit && this.canvasData.gameMode === distance.assetData.GameMode;
} else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') {
const wall = new AxArrowConnector(floorData[key], this, false, false);
+ wall.allowEdit = this.allowEdit && this.canvasData.gameMode === wall.assetData.GameMode;
}
break;
}
@@ -522,22 +527,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
switch (nodeData[key][tempKey].InteractiveMode) {
case 0:
const singleIcon = new AxImageShape(nodeData[key][tempKey], this);
- singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
+ singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
break;
case 1:
- const icon = new MultipointIcon(nodeData[key][tempKey], this);
- break;
+ const icon = new MultipointIcon(nodeData[key][tempKey], this);
+ icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode;
+ break;
case 2:
const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
+ polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode;
break;
case 3:
const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true);
+ pipeline.allowEdit = this.allowEdit && this.canvasData.gameMode === pipeline.assetData.GameMode;
break;
}
});
});
}
- // this.emit('backgroundScale', this.backgroundImage.scale.x);
}
/**
* 创建确认绘制结束按钮
diff --git a/src/assets/font/SourceHanSansCN-Regular.otf b/src/assets/font/SourceHanSansCN-Regular.otf
new file mode 100644
index 0000000..886f82f
Binary files /dev/null and b/src/assets/font/SourceHanSansCN-Regular.otf differ
diff --git a/src/styles.scss b/src/styles.scss
index 7c77928..6e9b18a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,12 +1,19 @@
@import './app/theme.scss';
@import "./app/ngZorroTree.css"; /* 引入组件样式 */
+
+@font-face
+{
+ font-family: Regular;
+ src: url('./assets/font/SourceHanSansCN-Regular.otf'),
+}
html,body{
width: 100%;
height:100%;
margin:0 auto;
padding:0;
overflow: hidden;
+ font-family: Regular
}
ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
margin:0;
@@ -112,7 +119,7 @@ table td.mat-footer-cell:last-of-type{
border-radius: 4px;
margin: 0 5px;
font-size: 14px;
- font-family: Source Han Sans CN;
+ // font-family: Source Han Sans CN;
font-weight: 400;
line-height: 36px;
color: #0080FF;