mirror of https://gitee.com/cf-fz/WebCAD.git
!2976 功能:图框编辑增加只显示图层和隐藏图层,作用于一键布局的图框
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