mirror of https://gitee.com/cf-fz/WebCAD.git
!2976 功能:图框编辑增加只显示图层和隐藏图层,作用于一键布局的图框
ChenX
parent
6a2ade7edf
commit
f60a266acd
@ -0,0 +1,83 @@
|
||||
#EditFrameModal {
|
||||
font-size: 14px;
|
||||
|
||||
.bp3-dialog-body {
|
||||
width: 430px;
|
||||
padding: 15px 25px 10px 27px;
|
||||
}
|
||||
|
||||
.frame-view {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>:nth-child(1) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.bp3-html-select .bp3-icon {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.frame-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
margin-left: 12px;
|
||||
|
||||
&>:nth-child(1) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.hideOptions {
|
||||
width: 220px;
|
||||
|
||||
.hide1 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: stretch;
|
||||
|
||||
.bp3-checkbox {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.layer {
|
||||
margin-top: 10px;
|
||||
|
||||
label {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.hideLayer {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.showLayer .showLayerSelect {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hideLayer .hideLayerSelect {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bp3-button {
|
||||
margin: -6px 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-dialog-footer {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
|
||||
.foot-right {
|
||||
:nth-child(2) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import { IBaseOption } from "../../UI/Store/OptionInterface/IOptionInterface";
|
||||
|
||||
export enum EditViewOptionKey
|
||||
{
|
||||
hight = "hight", //文字高度
|
||||
renderType = "renderType", //视图
|
||||
renderTypeValue = "renderTypeValue", //视图值
|
||||
viewDir = "viewDir", //视角
|
||||
viewDirValue = "viewDirValue", //视角值
|
||||
roomName = "roomName",//房间名
|
||||
cabinetName = "cabinetName",//柜名
|
||||
boardMaterialName = "boardMaterialName", //板材名
|
||||
material = "material", //材料
|
||||
color = "color",//颜色
|
||||
page = "page",//页码
|
||||
date = "date",//时间
|
||||
designer = "designer",//设计师
|
||||
sheetName = "sheetName",//图纸名称
|
||||
hideDoor = "hideDoor",//隐藏门板
|
||||
hideDrawer = "hideDrawer",//隐藏抽屉
|
||||
hideDim = "hideDim",//隐藏标注
|
||||
hideCurve = "hideCurve",//隐藏曲线
|
||||
hideModel = "hideModel",//隐藏模型
|
||||
hideLayer = "hideLayer",//隐藏图层
|
||||
hideLayerValue = "hideLayerValue",//隐藏图层值
|
||||
showLayer = "showLayer",//显示图层
|
||||
showLayerValue = "showLayerValue",//显示图层值
|
||||
}
|
||||
|
||||
export interface EditViewOption extends IBaseOption
|
||||
{
|
||||
[EditViewOptionKey.hight]: number;//文字大小
|
||||
[EditViewOptionKey.renderType]: boolean;
|
||||
[EditViewOptionKey.renderTypeValue]: string;
|
||||
[EditViewOptionKey.viewDir]: boolean;
|
||||
[EditViewOptionKey.viewDirValue]: string;
|
||||
[EditViewOptionKey.roomName]: boolean;
|
||||
[EditViewOptionKey.cabinetName]: boolean;
|
||||
[EditViewOptionKey.boardMaterialName]: boolean;
|
||||
[EditViewOptionKey.material]: boolean;
|
||||
[EditViewOptionKey.color]: boolean;
|
||||
[EditViewOptionKey.page]: boolean;
|
||||
[EditViewOptionKey.date]: boolean;
|
||||
[EditViewOptionKey.designer]: boolean;
|
||||
[EditViewOptionKey.sheetName]: boolean; //图纸名称
|
||||
[EditViewOptionKey.hideDoor]: boolean;
|
||||
[EditViewOptionKey.hideDrawer]: boolean;
|
||||
[EditViewOptionKey.hideDim]: boolean;
|
||||
[EditViewOptionKey.hideCurve]: boolean;
|
||||
[EditViewOptionKey.hideModel]: boolean;
|
||||
[EditViewOptionKey.hideLayer]: boolean;
|
||||
[EditViewOptionKey.hideLayerValue]: string;
|
||||
[EditViewOptionKey.showLayer]: boolean;
|
||||
[EditViewOptionKey.showLayerValue]: string;
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import { observable, toJS } from "mobx";
|
||||
import { DefaultEditViewOption } from "../../Editor/DefaultConfig";
|
||||
import { IConfigOption } from "../../UI/Components/Board/UserConfigComponent";
|
||||
import { IConfigStore } from "../../UI/Store/BoardStore";
|
||||
import { EditViewOption, EditViewOptionKey } from "./EditViewOption";
|
||||
|
||||
export class EditViewSettingStore implements IConfigStore
|
||||
{
|
||||
@observable configName = "默认";
|
||||
@observable configsNames = [];
|
||||
@observable m_Option: EditViewOption = { ...DefaultEditViewOption };
|
||||
HideOptions: Map<string, string> = new Map([
|
||||
[EditViewOptionKey.hideDoor, "隐藏门板"],
|
||||
[EditViewOptionKey.hideDrawer, "隐藏抽屉"],
|
||||
[EditViewOptionKey.hideDim, "隐藏标注"],
|
||||
[EditViewOptionKey.hideCurve, "隐藏曲线"],
|
||||
[EditViewOptionKey.hideModel, "隐藏模型"]
|
||||
]);
|
||||
BoardInfoOptions: Map<string, string> = new Map([
|
||||
[EditViewOptionKey.roomName, "房间名"],
|
||||
[EditViewOptionKey.cabinetName, "柜名"],
|
||||
[EditViewOptionKey.boardMaterialName, "板材名"],
|
||||
[EditViewOptionKey.material, "材料"],
|
||||
[EditViewOptionKey.color, "颜色"],
|
||||
[EditViewOptionKey.page, "页码"],
|
||||
[EditViewOptionKey.date, "日期/时间"],
|
||||
[EditViewOptionKey.designer, "设计师"],
|
||||
[EditViewOptionKey.sheetName, "图纸名称"]
|
||||
]);
|
||||
ViewAndVisionOption: Map<string, string> = new Map([
|
||||
[EditViewOptionKey.viewDir, "视图"],
|
||||
[EditViewOptionKey.renderType, "视觉样式"]
|
||||
]);
|
||||
LayerOption: Map<string, string> = new Map([
|
||||
[EditViewOptionKey.hideLayer, "隐藏图层"],
|
||||
[EditViewOptionKey.showLayer, "显示图层"]
|
||||
]);
|
||||
|
||||
InitOption()
|
||||
{
|
||||
Object.assign(this.m_Option, DefaultEditViewOption);
|
||||
}
|
||||
|
||||
SaveConfig()
|
||||
{
|
||||
let newConfig: IConfigOption = {};
|
||||
newConfig.option = toJS(this.m_Option);
|
||||
return newConfig;
|
||||
}
|
||||
|
||||
UpdateOption(conf: IConfigOption<EditViewOption>)
|
||||
{
|
||||
if (!conf.option.version)
|
||||
{
|
||||
this.InitOption();
|
||||
this.m_Option.hight = conf.option.hight;
|
||||
return;
|
||||
}
|
||||
|
||||
Object.assign(this.m_Option, conf.option);
|
||||
}
|
||||
}
|
||||
export class EditFrameStore
|
||||
{
|
||||
@observable HideOptions: [string, boolean][] = [["隐藏门板", false], ["隐藏抽屉", false], ["隐藏标注", false], ["隐藏曲线", false], ["隐藏模型", false]];
|
||||
@observable BoardInfoOptions: [string, boolean][] = [["房间名", false], ["柜名", false], ["板材名", false], ["材料", false], ["颜色", false], ["页码", false], ["日期/时间", false], ["设计师", false], ["图纸名称", false]];
|
||||
@observable ViewAndVisionOption: [string, boolean][] = [["左视图", false], ["概念", false]];
|
||||
@observable LayerOption: [string, boolean][] = [["隐藏图层", false]];
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
import { Button, MenuItem } from "@blueprintjs/core";
|
||||
import { ItemPredicate, ItemRenderer, Select } from "@blueprintjs/select";
|
||||
import * as React from "react";
|
||||
import { RefObject } from "react";
|
||||
import { EditViewOption, EditViewOptionKey } from "./EditViewOption";
|
||||
|
||||
interface LayerSelectProp
|
||||
{
|
||||
inputElement: RefObject<HTMLInputElement>;
|
||||
items: LayerInfo[];
|
||||
m_Option: EditViewOption,
|
||||
editViewOptionKey: EditViewOptionKey,
|
||||
}
|
||||
|
||||
export interface LayerInfo
|
||||
{
|
||||
title: string;
|
||||
stratNum: number;
|
||||
parentName: string;
|
||||
}
|
||||
|
||||
const FilterLayer: ItemPredicate<LayerInfo> = (query, film, _index, exactMatch) =>
|
||||
{
|
||||
const normalizedTitle = film.title.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
if (exactMatch)
|
||||
return normalizedTitle === normalizedQuery;
|
||||
else
|
||||
return `${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
|
||||
};
|
||||
|
||||
const RenderLayer: ItemRenderer<LayerInfo> = (layer, { handleClick, modifiers, query }) =>
|
||||
{
|
||||
if (!modifiers.matchesPredicate)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<MenuItem
|
||||
active={false} //控制亮显 (当前选择)
|
||||
disabled={modifiers.disabled}
|
||||
key={layer.title}
|
||||
onClick={handleClick}
|
||||
text={`${' '.repeat(layer.stratNum - 1)}${layer.title}`}
|
||||
label={layer.parentName}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const CheckParent = (alreadyExistsLayer: string[], item: LayerInfo, allItems: LayerInfo[]) =>
|
||||
{
|
||||
let parentItem = allItems.find(i => i.title === item.parentName);
|
||||
if (parentItem)
|
||||
return alreadyExistsLayer.includes(parentItem.title) || CheckParent(alreadyExistsLayer, parentItem, allItems);
|
||||
else
|
||||
return false;
|
||||
};
|
||||
|
||||
const DisabledLayer = (item: LayerInfo, allItems: LayerInfo[], text: string) =>
|
||||
{
|
||||
let alreadyExistsLayer = text?.split(" ") || [];
|
||||
;
|
||||
return alreadyExistsLayer.includes(item.title) || CheckParent(alreadyExistsLayer, item, allItems);
|
||||
};
|
||||
|
||||
const OnItemSelect = (item: LayerInfo, inputElement: React.RefObject<HTMLInputElement>, option: EditViewOption, key: EditViewOptionKey) =>
|
||||
{
|
||||
let valueList = inputElement.current.value.split(" ").filter((str) => str && str !== " ");
|
||||
let newStr = valueList.join(" ");
|
||||
|
||||
if (newStr)
|
||||
inputElement.current.value = newStr + ` ${item.title}`;
|
||||
else
|
||||
inputElement.current.value = item.title;
|
||||
|
||||
(option[key] as string) = inputElement.current.value;
|
||||
};
|
||||
|
||||
export const LayerSelect: React.FC<LayerSelectProp> = (props: LayerSelectProp) =>
|
||||
{
|
||||
return (
|
||||
<Select<LayerInfo>
|
||||
items={props.items}
|
||||
itemPredicate={FilterLayer}
|
||||
itemRenderer={RenderLayer}
|
||||
itemDisabled={(item) => DisabledLayer(item, props.items, props.inputElement?.current?.value)}
|
||||
noResults={<MenuItem disabled={true} text="没有查询到图层名称.." />}
|
||||
onItemSelect={(item) => OnItemSelect(item, props.inputElement, props.m_Option, props.editViewOptionKey)}
|
||||
>
|
||||
<Button className="selectButton" text="添加图纸的图层" />
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in new issue