车库门调整暂提
This commit is contained in:
joylink_fanyuhong
parent
3fb3eb8135
commit
7d2a1be457
@ -32,11 +32,6 @@
|
||||
<path d="M14.4091 23V11.3636H18.3409C19.2538 11.3636 20 11.5284 20.5795 11.858C21.1629 12.1837 21.5947 12.625 21.875 13.1818C22.1553 13.7386 22.2955 14.3598 22.2955 15.0455C22.2955 15.7311 22.1553 16.3542 21.875 16.9148C21.5985 17.4754 21.1705 17.9223 20.5909 18.2557C20.0114 18.5852 19.2689 18.75 18.3636 18.75H15.5455V17.5H18.3182C18.9432 17.5 19.4451 17.392 19.8239 17.1761C20.2027 16.9602 20.4773 16.6686 20.6477 16.3011C20.822 15.9299 20.9091 15.5114 20.9091 15.0455C20.9091 14.5795 20.822 14.1629 20.6477 13.7955C20.4773 13.428 20.2008 13.1402 19.8182 12.9318C19.4356 12.7197 18.928 12.6136 18.2955 12.6136H15.8182V23H14.4091Z" fill="white"/>
|
||||
<line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
|
||||
</symbol>
|
||||
<symbol id="icon-garage-door-box" viewBox="0 0 35 34" fill="none">
|
||||
<rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
|
||||
<path d="M17.1932 14C17.0838 13.6652 16.9396 13.3653 16.7607 13.1001C16.585 12.8317 16.3745 12.603 16.1293 12.4141C15.8873 12.2251 15.6122 12.081 15.304 11.9815C14.9957 11.8821 14.6577 11.8324 14.2898 11.8324C13.6866 11.8324 13.138 11.9882 12.6442 12.2997C12.1503 12.6113 11.7576 13.0703 11.4659 13.6768C11.1742 14.2834 11.0284 15.0275 11.0284 15.9091C11.0284 16.7907 11.1759 17.5348 11.4709 18.1413C11.7659 18.7479 12.1652 19.2069 12.669 19.5185C13.1728 19.83 13.7396 19.9858 14.3693 19.9858C14.9527 19.9858 15.4664 19.8615 15.9105 19.6129C16.358 19.361 16.706 19.0064 16.9545 18.549C17.2064 18.0883 17.3324 17.5464 17.3324 16.9233L17.7102 17.0028H14.6477V15.9091H18.5256V17.0028C18.5256 17.8414 18.3466 18.5705 17.9886 19.1903C17.634 19.8101 17.1435 20.2907 16.517 20.6321C15.8939 20.9702 15.178 21.1392 14.3693 21.1392C13.4678 21.1392 12.6757 20.9271 11.9929 20.5028C11.3134 20.0786 10.7831 19.4754 10.402 18.6932C10.0241 17.911 9.83523 16.983 9.83523 15.9091C9.83523 15.1037 9.94295 14.3795 10.1584 13.7365C10.3771 13.0902 10.6854 12.54 11.0831 12.0859C11.4808 11.6319 11.9515 11.2839 12.495 11.0419C13.0386 10.8 13.6368 10.679 14.2898 10.679C14.8267 10.679 15.3272 10.7602 15.7912 10.9226C16.2585 11.0817 16.6745 11.3087 17.0391 11.6037C17.407 11.8954 17.7135 12.245 17.9588 12.6527C18.2041 13.0571 18.3731 13.5062 18.4659 14H17.1932Z" fill="white"/>
|
||||
<line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
|
||||
</symbol>
|
||||
<symbol id="icon-esb-button" viewBox="0 0 35 34" fill="none">
|
||||
<rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
|
||||
<line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
|
||||
@ -83,7 +78,4 @@
|
||||
<symbol id="icon-car-washing" viewBox="0 0 150 150" fill="none">
|
||||
<rect x="45" y="3" width="60" height="144" fill="#FFFFFF" stroke="#FFFFFF"/>
|
||||
</symbol>
|
||||
<symbol id="icon-flood-gate" viewBox="0 0 129 139" fill="none">
|
||||
<path fill-rule="evenodd" stroke="rgba(255, 255, 255, 1)" stroke-width="5" d="M0 1.5L61.5 1.5M61.5 1.5L123 1.5M61.5 1.5L61.5 137.5L0 137.5L123 137.5"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
@ -139,18 +139,12 @@
|
||||
drawStore.selectedGraphicType === ConcentrationDividingLine.Type
|
||||
"
|
||||
/>
|
||||
<flood-gate-property
|
||||
v-else-if="drawStore.selectedGraphicType === FloodGate.Type"
|
||||
/>
|
||||
<car-washing-property
|
||||
v-else-if="drawStore.selectedGraphicType === CarWashing.Type"
|
||||
></car-washing-property>
|
||||
<garage-door-property
|
||||
v-else-if="drawStore.selectedGraphicType === GarageDoor.Type"
|
||||
></garage-door-property>
|
||||
<garage-door-box-property
|
||||
v-else-if="drawStore.selectedGraphicType === GarageDoorBox.Type"
|
||||
></garage-door-box-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
<template v-else-if="drawStore.selectedGraphics.length > 1">
|
||||
@ -229,14 +223,10 @@ import { TrackLogicSection } from 'src/graphics/trackLogicSection/TrackLogicSect
|
||||
import MultipleSelectProperty from './properties/multipleSelectProperty.vue';
|
||||
import { DepartureTimer } from 'src/graphics/departureTimer/DepartureTimer';
|
||||
import DepartureTimerProperty from './properties/DepartureTimerProperty.vue';
|
||||
import FloodGateProperty from './properties/FloodGateProperty.vue';
|
||||
import { FloodGate } from 'src/graphics/floodGate/FloodGate';
|
||||
import GarageDoorProperty from './properties/GarageDoorProperty.vue';
|
||||
import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
|
||||
import CarWashingProperty from './properties/CarWashingProperty.vue';
|
||||
import { CarWashing } from 'src/graphics/carWashing/CarWashing';
|
||||
import GarageDoorBoxProperty from './properties/GarageDoorBoxProperty.vue';
|
||||
import { GarageDoorBox } from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
</script>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input outlined readonly v-model="floodGateModel.id" label="id" hint="" />
|
||||
<q-input
|
||||
outlined
|
||||
class="q-mt-sm"
|
||||
v-model="floodGateModel.code"
|
||||
@blur="onUpdate"
|
||||
label="名称"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="floodGateModel.linkSection"
|
||||
:options="sectionList"
|
||||
:map-options="true"
|
||||
:emit-value="true"
|
||||
@update:model-value="onUpdate"
|
||||
label="关联区段"
|
||||
></q-select>
|
||||
<q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
|
||||
<template #control>
|
||||
<q-chip
|
||||
color="primary"
|
||||
text-color="white"
|
||||
v-for="(id, index) in floodGateModel.centralizedStations"
|
||||
:key="index"
|
||||
removable
|
||||
@remove="removeStation(index)"
|
||||
square
|
||||
>{{ getName(id) }}</q-chip
|
||||
>
|
||||
<q-btn round color="primary" size="xs" icon="add" @click="addStation" />
|
||||
</template>
|
||||
</q-field>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useFormData } from 'src/components/DrawAppFormUtils';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { Section } from 'src/graphics/section/Section';
|
||||
import { FloodGateData } from 'src/drawApp/graphics/FloodGateInteraction';
|
||||
import AddCentralizedStationDialog from '../dialogs/AddCentralizedStationDialog.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { Station } from 'src/graphics/station/Station';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const sectionList: { label: string; value: number }[] = reactive([]);
|
||||
|
||||
const { data: floodGateModel, onUpdate } = useFormData(
|
||||
new FloodGateData(),
|
||||
drawStore.getDrawApp()
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const sections = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryByType<Section>(Section.Type);
|
||||
sections.forEach((p) => {
|
||||
sectionList.push({
|
||||
value: p.id,
|
||||
label: `${p.datas.code}`,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function removeStation(index: number) {
|
||||
floodGateModel.centralizedStations.splice(index, 1);
|
||||
onUpdate();
|
||||
}
|
||||
const $q = useQuasar();
|
||||
function addStation() {
|
||||
$q.dialog({
|
||||
title: '',
|
||||
message: '',
|
||||
component: AddCentralizedStationDialog,
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
}).onOk((data: number) => {
|
||||
floodGateModel.centralizedStations.push(data);
|
||||
onUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
function getName(id: number) {
|
||||
try {
|
||||
const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
|
||||
return station.datas.code;
|
||||
} catch (error) {
|
||||
return id;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input
|
||||
outlined
|
||||
readonly
|
||||
v-model="garageDoorBoxModel.id"
|
||||
label="id"
|
||||
hint=""
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
class="q-mt-sm"
|
||||
v-model="garageDoorBoxModel.code"
|
||||
@blur="onUpdate"
|
||||
label="编号"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
class="q-mt-sm"
|
||||
style="margin-top: 10px"
|
||||
v-model="garageDoorBoxModel.refGarageDoorId"
|
||||
:options="garageDoorList"
|
||||
:map-options="true"
|
||||
:emit-value="true"
|
||||
@update:model-value="onUpdate"
|
||||
label="关联车库门"
|
||||
></q-select>
|
||||
<q-select
|
||||
outlined
|
||||
class="q-mt-sm"
|
||||
@blur="onUpdate"
|
||||
v-model="garageDoorBoxModel.refPslMapCode"
|
||||
:options="pslNameList"
|
||||
label="关联PSL地图"
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GarageDoorBoxData } from 'src/drawApp/graphics/GarageDoorBoxInteraction';
|
||||
import { useFormData } from 'src/components/DrawAppFormUtils';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { getPublishList } from 'src/api/PublishApi';
|
||||
import { PictureType } from 'src/protos/picture';
|
||||
import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
|
||||
|
||||
const { data: garageDoorBoxModel, onUpdate } = useFormData(
|
||||
new GarageDoorBoxData(),
|
||||
useDrawStore().getDrawApp()
|
||||
);
|
||||
|
||||
const garageDoorList: { label: string; value: number }[] = reactive([]);
|
||||
const pslNameList = ref<string[]>([]);
|
||||
onMounted(() => {
|
||||
const list2: string[] = [];
|
||||
getPublishList({
|
||||
type: PictureType.Psl,
|
||||
category: useDrawStore().categoryType,
|
||||
}).then((pslMapList) => {
|
||||
if (pslMapList && pslMapList.length) {
|
||||
pslMapList.forEach((item) => {
|
||||
list2.push(item.name);
|
||||
});
|
||||
}
|
||||
pslNameList.value = list2;
|
||||
});
|
||||
const garageDoors = useDrawStore()
|
||||
.getDrawApp()
|
||||
.queryStore.queryByType<GarageDoor>(GarageDoor.Type);
|
||||
garageDoors.forEach((p) => {
|
||||
garageDoorList.push({
|
||||
value: p.id,
|
||||
label: `${p.datas.code}[${p.datas.id}]`,
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -23,8 +23,6 @@ import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
|
||||
import { PslBox } from 'src/graphics/pslBox/PslBox';
|
||||
import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
|
||||
import { CarWashing } from 'src/graphics/carWashing/CarWashing';
|
||||
import { FloodGate } from 'src/graphics/floodGate/FloodGate';
|
||||
import { GarageDoorBox } from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
|
||||
export const drawCommonLayerList = [
|
||||
// 图层列表 默认显示的图层defaultShow: true
|
||||
@ -59,8 +57,6 @@ export const drawCommonLayerList = [
|
||||
value: ConcentrationDividingLine.Type,
|
||||
defaultShow: true,
|
||||
},
|
||||
{ label: '车库门', value: GarageDoor.Type, defaultShow: true },
|
||||
{ label: '防淹门', value: FloodGate.Type, defaultShow: true },
|
||||
{ label: '车库门/防淹门', value: GarageDoor.Type, defaultShow: true },
|
||||
{ label: '洗车机', value: CarWashing.Type, defaultShow: true },
|
||||
{ label: '车库门设置', value: GarageDoorBox.Type, defaultShow: true },
|
||||
];
|
||||
|
||||
@ -96,15 +96,6 @@ import {
|
||||
GatedBoxData,
|
||||
DrawGatedBoxInteraction,
|
||||
} from './graphics/GatedBoxInteraction';
|
||||
import {
|
||||
GarageDoorBox,
|
||||
GarageDoorBoxTemplate,
|
||||
} from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
import {
|
||||
GarageDoorBoxData,
|
||||
DrawGarageDoorBoxInteraction,
|
||||
} from './graphics/GarageDoorBoxInteraction';
|
||||
import { GarageDoorBoxDraw } from 'src/graphics/garageDoorBox/GarageDoorBoxAssistant';
|
||||
// import { EsbButton, EsbButtonTemplate } from 'src/graphics/esbButton/EsbButton';
|
||||
// import {
|
||||
// EsbButtonData,
|
||||
@ -157,9 +148,6 @@ import {
|
||||
CarWashingTemplate,
|
||||
} from 'src/graphics/carWashing/CarWashing';
|
||||
import { CarWashingDraw } from 'src/graphics/carWashing/CarWashingDrawAssistant';
|
||||
import { FloodGateData } from './graphics/FloodGateInteraction';
|
||||
import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
|
||||
import { FloodGateDraw } from 'src/graphics/floodGate/FloodGateDrawAssistant';
|
||||
import {
|
||||
GarageDoorData,
|
||||
GarageDoorState,
|
||||
@ -235,10 +223,6 @@ export function initCommonDrawApp(app: IDrawApp) {
|
||||
new StopPositionDraw(app, new StopPositionTemplate(new StopPositionData()));
|
||||
new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData()));
|
||||
new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData()));
|
||||
new GarageDoorBoxDraw(
|
||||
app,
|
||||
new GarageDoorBoxTemplate(new GarageDoorBoxData())
|
||||
);
|
||||
// new EsbButtonDraw(
|
||||
// app,
|
||||
// new EsbButtonTemplate(new EsbButtonData(), new EsbButtonState())
|
||||
@ -260,7 +244,6 @@ export function initCommonDrawApp(app: IDrawApp) {
|
||||
new ConcentrationDividingLineTemplate(new ConcentrationDividingLineData())
|
||||
);
|
||||
new CarWashingDraw(app, new CarWashingTemplate(new CarWashingData()));
|
||||
new FloodGateDraw(app, new FloodGateTemplate(new FloodGateData()));
|
||||
new GarageDoorDraw(
|
||||
app,
|
||||
new GarageDoorTemplate(new GarageDoorData(), new GarageDoorState())
|
||||
@ -269,7 +252,6 @@ export function initCommonDrawApp(app: IDrawApp) {
|
||||
DrawStopPositionInteraction.init(app);
|
||||
DrawSpksSwitchInteraction.init(app);
|
||||
DrawGatedBoxInteraction.init(app);
|
||||
DrawGarageDoorBoxInteraction.init(app);
|
||||
// DrawEsbButtonInteraction.init(app);
|
||||
|
||||
// 画布右键菜单
|
||||
@ -451,9 +433,6 @@ export function loadCommonDrawDatas(
|
||||
storage.gateBoxs.forEach((gatedBox) => {
|
||||
datas.push(new GatedBoxData(gatedBox));
|
||||
});
|
||||
storage.garageDoorBoxes.forEach((garageDoorBox) => {
|
||||
datas.push(new GarageDoorBoxData(garageDoorBox));
|
||||
});
|
||||
// storage.esbButtons.forEach((esbButton) => {
|
||||
// datas.push(new EsbButtonData(esbButton));
|
||||
// });
|
||||
@ -478,9 +457,6 @@ export function loadCommonDrawDatas(
|
||||
storage.concentrationDividingLines.forEach((concentrationDividingLine) => {
|
||||
datas.push(new ConcentrationDividingLineData(concentrationDividingLine));
|
||||
});
|
||||
storage.floodGates.forEach((flood) => {
|
||||
datas.push(new FloodGateData(flood));
|
||||
});
|
||||
storage.carWashings.forEach((carWashing) => {
|
||||
datas.push(new CarWashingData(carWashing));
|
||||
});
|
||||
@ -546,11 +522,6 @@ export function saveCommonDrawDatas(app: IDrawApp) {
|
||||
// } else if (EsbButton.Type === g.type) {
|
||||
// const esbButtonData = (g as EsbButton).saveData();
|
||||
// storage.esbButtons.push((esbButtonData as EsbButtonData).data);
|
||||
} else if (GarageDoorBox.Type === g.type) {
|
||||
const garageDoorBoxData = (g as GarageDoorBox).saveData();
|
||||
storage.garageDoorBoxes.push(
|
||||
(garageDoorBoxData as GarageDoorBoxData).data
|
||||
);
|
||||
} else if (Transponder.Type === g.type) {
|
||||
const transponderData = (g as Transponder).saveData();
|
||||
storage.transponders.push((transponderData as TransponderData).data);
|
||||
@ -581,9 +552,6 @@ export function saveCommonDrawDatas(app: IDrawApp) {
|
||||
} else if (g instanceof CarWashing) {
|
||||
const carWashingData = g.saveData();
|
||||
storage.carWashings.push((carWashingData as CarWashingData).data);
|
||||
} else if (g instanceof FloodGate) {
|
||||
const floodGateData = g.saveData();
|
||||
storage.floodGates.push((floodGateData as FloodGateData).data);
|
||||
} else if (g instanceof GarageDoor) {
|
||||
const garageDoorData = g.saveData();
|
||||
storage.garageDoors.push((garageDoorData as GarageDoorData).data);
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { FederatedMouseEvent } from 'pixi.js';
|
||||
import { FloodGate, IFloodGateData } from 'src/graphics/floodGate/FloodGate';
|
||||
import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
|
||||
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class FloodGateData extends GraphicDataBase implements IFloodGateData {
|
||||
constructor(data?: graphicData.FloodGate) {
|
||||
let floodGate;
|
||||
if (!data) {
|
||||
floodGate = new graphicData.FloodGate({
|
||||
common: GraphicDataBase.defaultCommonInfo(FloodGate.Type),
|
||||
});
|
||||
} else {
|
||||
floodGate = data;
|
||||
}
|
||||
super(floodGate);
|
||||
}
|
||||
|
||||
public get data(): graphicData.FloodGate {
|
||||
return this.getData<graphicData.FloodGate>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get linkSection(): number {
|
||||
return this.data.linkSection;
|
||||
}
|
||||
set linkSection(v: number) {
|
||||
this.data.linkSection = v;
|
||||
}
|
||||
get centralizedStations(): number[] {
|
||||
return this.data.centralizedStations;
|
||||
}
|
||||
set centralizedStations(v: number[]) {
|
||||
this.data.centralizedStations = v;
|
||||
}
|
||||
clone(): FloodGateData {
|
||||
return new FloodGateData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: FloodGateData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: FloodGateData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class FloodGateOperationInteraction extends GraphicInteractionPlugin<FloodGate> {
|
||||
static Name = 'flood_gate_operation';
|
||||
constructor(scene: IGraphicScene) {
|
||||
super(FloodGateOperationInteraction.Name, scene);
|
||||
}
|
||||
static init(scene: IGraphicScene) {
|
||||
return new FloodGateOperationInteraction(scene);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): FloodGate[] | undefined {
|
||||
return grahpics.filter((g): g is FloodGate => g.type === FloodGate.Type);
|
||||
}
|
||||
bind(g: FloodGate): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.on('mousedown', this.onPress, this);
|
||||
}
|
||||
unbind(g: FloodGate): void {
|
||||
g.eventMode = 'none';
|
||||
g.cursor = 'default';
|
||||
g.off('mousedown', this.onPress, this);
|
||||
}
|
||||
onPress(e: FederatedMouseEvent) {
|
||||
const g = e.target as FloodGate;
|
||||
g.on('mouseleave', this.onRelease, this);
|
||||
g.on('mouseup', this.onRelease, this);
|
||||
}
|
||||
onRelease(e: FederatedMouseEvent) {
|
||||
const g = e.target as FloodGate;
|
||||
g.off('mouseleave', this.onRelease, this);
|
||||
g.off('mouseup', this.onRelease, this);
|
||||
}
|
||||
}
|
||||
@ -1,150 +0,0 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
|
||||
import {
|
||||
GarageDoorBox,
|
||||
IGarageDoorBox,
|
||||
} from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
import {
|
||||
IGraphicApp,
|
||||
GraphicInteractionPlugin,
|
||||
JlGraphic,
|
||||
IGraphicScene,
|
||||
MenuItemOptions,
|
||||
ContextMenu,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
import { usePslStore } from 'src/stores/psl-store';
|
||||
|
||||
export class GarageDoorBoxData
|
||||
extends GraphicDataBase
|
||||
implements IGarageDoorBox
|
||||
{
|
||||
constructor(data?: graphicData.GarageDoorBox) {
|
||||
let garageDoorBox;
|
||||
if (!data) {
|
||||
garageDoorBox = new graphicData.GarageDoorBox({
|
||||
common: GraphicDataBase.defaultCommonInfo(GarageDoorBox.Type),
|
||||
});
|
||||
} else {
|
||||
garageDoorBox = data;
|
||||
}
|
||||
super(garageDoorBox);
|
||||
}
|
||||
|
||||
public get data(): graphicData.GarageDoorBox {
|
||||
return this.getData<graphicData.GarageDoorBox>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get flip(): boolean {
|
||||
return this.data.flip;
|
||||
}
|
||||
set flip(v: boolean) {
|
||||
this.data.flip = v;
|
||||
}
|
||||
get refGarageDoorId(): number {
|
||||
return this.data.refGarageDoorId;
|
||||
}
|
||||
set refGarageDoorId(v: number) {
|
||||
this.data.refGarageDoorId = v;
|
||||
}
|
||||
get refPslMapCode(): string {
|
||||
return this.data.refPslMapCode;
|
||||
}
|
||||
set refPslMapCode(v: string) {
|
||||
this.data.refPslMapCode = v;
|
||||
}
|
||||
clone(): GarageDoorBoxData {
|
||||
return new GarageDoorBoxData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GarageDoorBoxData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: GarageDoorBoxData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
const flipConfig: MenuItemOptions = {
|
||||
name: '上下翻转',
|
||||
};
|
||||
const GarageDoorBoxEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '设置车库门编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [flipConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
export class DrawGarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
|
||||
static Name = 'garage_door_box_draw_right_menu';
|
||||
constructor(app: IGraphicApp) {
|
||||
super(DrawGarageDoorBoxInteraction.Name, app);
|
||||
app.registerMenu(GarageDoorBoxEditMenu);
|
||||
}
|
||||
static init(app: IGraphicApp) {
|
||||
return new DrawGarageDoorBoxInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === GarageDoorBox.Type)
|
||||
.map((g) => g as GarageDoorBox);
|
||||
}
|
||||
bind(g: GarageDoorBox): void {
|
||||
g.on('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
unbind(g: GarageDoorBox): void {
|
||||
g.off('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const garageDoorBox = target.getGraphic() as GarageDoorBox;
|
||||
this.app.updateSelected(garageDoorBox);
|
||||
flipConfig.handler = () => {
|
||||
garageDoorBox.datas.flip = !garageDoorBox.datas.flip;
|
||||
garageDoorBox.repaint();
|
||||
};
|
||||
GarageDoorBoxEditMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
||||
export class GarageDoorBoxOperateInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
|
||||
static Name = 'garage_door_box_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(GarageDoorBoxOperateInteraction.Name, app);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new GarageDoorBoxOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === GarageDoorBox.Type)
|
||||
.map((g) => g as GarageDoorBox);
|
||||
}
|
||||
bind(g: GarageDoorBox): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
|
||||
unbind(g: GarageDoorBox): void {
|
||||
g.eventMode = 'none';
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
onLeftClick(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const garageDoorBox = target.getGraphic() as GarageDoorBox;
|
||||
usePslStore().setPslParam(
|
||||
garageDoorBox.datas.id,
|
||||
garageDoorBox.datas.refPslMapCode
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -21,11 +21,6 @@ import {
|
||||
Signal,
|
||||
KilometerSystem,
|
||||
} from 'src/graphics/signal/Signal';
|
||||
import {
|
||||
FloodGateData,
|
||||
FloodGateOperationInteraction,
|
||||
} from './graphics/FloodGateInteraction';
|
||||
import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
|
||||
import {
|
||||
CarWashingData,
|
||||
CarWashingOperationInteraction,
|
||||
@ -129,11 +124,6 @@ import {
|
||||
SpksSwitchOperationInteraction,
|
||||
} from './graphics/SpksSwitchInteraction';
|
||||
import { GatedBoxData } from './graphics/GatedBoxInteraction';
|
||||
import { GarageDoorBoxData } from './graphics/GarageDoorBoxInteraction';
|
||||
import {
|
||||
GarageDoorBox,
|
||||
GarageDoorBoxTemplate,
|
||||
} from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
import {
|
||||
EsbButtonData,
|
||||
EsbButtonOperationInteraction,
|
||||
@ -175,7 +165,6 @@ import {
|
||||
} from 'src/graphics/trackLogicSection/TrackLogicSection';
|
||||
import { TrackLogicSectionData } from './graphics/TrackLogicSectionInteraction';
|
||||
import { GatedBoxOperateInteraction } from './graphics/GatedBoxInteraction';
|
||||
import { GarageDoorBoxOperateInteraction } from './graphics/GarageDoorBoxInteraction';
|
||||
import { CategoryType } from 'src/components/CategoryType';
|
||||
import {
|
||||
AutoReturnBox,
|
||||
@ -261,10 +250,8 @@ export const layerList = [
|
||||
{ label: '轨道区段', value: TrackSection.Type, defaultShow: false },
|
||||
{ label: '轨道逻辑区段', value: TrackLogicSection.Type, defaultShow: false },
|
||||
{ label: '自动折返按钮箱', value: AutoReturnBox.Type, defaultShow: true },
|
||||
{ label: '车库门', value: GarageDoor.Type, defaultShow: true },
|
||||
{ label: '防淹门', value: FloodGate.Type, defaultShow: true },
|
||||
{ label: '车库门/防淹门', value: GarageDoor.Type, defaultShow: true },
|
||||
{ label: '洗车机', value: CarWashing.Type, defaultShow: true },
|
||||
{ label: '车库门设置', value: GarageDoorBox.Type, defaultShow: true },
|
||||
];
|
||||
|
||||
let lineScene: IGraphicScene;
|
||||
@ -335,8 +322,6 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
|
||||
),
|
||||
new CarWashingTemplate(new CarWashingData()),
|
||||
new GarageDoorTemplate(new GarageDoorData(), new GarageDoorState()),
|
||||
new FloodGateTemplate(new FloodGateData()),
|
||||
new GarageDoorBoxTemplate(new GarageDoorBoxData()),
|
||||
];
|
||||
lineScene.registerGraphicTemplates(...graphicTemplate);
|
||||
SignalOperateInteraction.init(lineScene);
|
||||
@ -355,8 +340,6 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
|
||||
IbpBoxOperateInteraction.init(lineScene);
|
||||
CarWashingOperationInteraction.init(lineScene);
|
||||
GarageDoorOperationInteraction.init(lineScene);
|
||||
FloodGateOperationInteraction.init(lineScene);
|
||||
GarageDoorBoxOperateInteraction.init(lineScene);
|
||||
if (categoryType === CategoryType.TH) {
|
||||
GatedBoxOperateInteraction.init(lineScene);
|
||||
}
|
||||
@ -663,12 +646,6 @@ export async function loadLineDatas(): Promise<IGraphicStorage> {
|
||||
storage.garageDoors.forEach((garageDoor) => {
|
||||
datas.push(new GarageDoorData(garageDoor));
|
||||
});
|
||||
storage.floodGates.forEach((floodGate) => {
|
||||
datas.push(new FloodGateData(floodGate));
|
||||
});
|
||||
storage.garageDoorBoxes.forEach((garageDoorBox) => {
|
||||
datas.push(new GarageDoorBoxData(garageDoorBox));
|
||||
});
|
||||
// const linkIdGenerator = new IdGenerator(Link.Type);
|
||||
// storage.CalculateLink.forEach((link) => {
|
||||
// const g = new LinkData(link);
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
import { Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
linePoint,
|
||||
} from 'jl-graphic';
|
||||
import { Section, SectionType } from '../section/Section';
|
||||
|
||||
export interface IFloodGateData extends GraphicData {
|
||||
get code(): string;
|
||||
set code(v: string);
|
||||
get linkSection(): number;
|
||||
set linkSection(v: number);
|
||||
get centralizedStations(): number[];
|
||||
set centralizedStations(v: number[]);
|
||||
clone(): IFloodGateData;
|
||||
copyFrom(data: IFloodGateData): void;
|
||||
eq(other: IFloodGateData): boolean;
|
||||
}
|
||||
|
||||
const floodGateConsts = {
|
||||
codeFontSize: 12,
|
||||
codeColor: 0xffffff,
|
||||
bodyLineColor: 0xffffff,
|
||||
bodyLineWidth: 2,
|
||||
bodyColor: 0x000000,
|
||||
bodyRectWidth: 10,
|
||||
bodyRectHeight: 20,
|
||||
};
|
||||
export class FloodGate extends JlGraphic {
|
||||
static Type = 'floodGate';
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
lineBody: Graphics = new Graphics();
|
||||
|
||||
constructor() {
|
||||
super(FloodGate.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.lineBody);
|
||||
this.codeGraph.name = 'flood_code';
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IFloodGateData {
|
||||
return this.getDatas<IFloodGateData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
codeGraph.text = this.datas.code;
|
||||
codeGraph.style.fill = floodGateConsts.codeColor;
|
||||
codeGraph.setVectorFontSize(floodGateConsts.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
const codeTransform = this.datas?.childTransforms?.find(
|
||||
(item) => item.name === 'flood_code'
|
||||
);
|
||||
if (codeTransform) {
|
||||
const position = codeTransform?.transform.position;
|
||||
const rotation = codeTransform?.transform?.rotation;
|
||||
codeGraph.position.set(position?.x, position?.y);
|
||||
codeGraph.rotation = rotation || 0;
|
||||
} else {
|
||||
codeGraph.position.set(0, -30);
|
||||
}
|
||||
this.lineBody.clear();
|
||||
this.lineBody.lineStyle(
|
||||
floodGateConsts.bodyLineWidth,
|
||||
floodGateConsts.bodyLineColor
|
||||
);
|
||||
this.lineBody.moveTo(
|
||||
-floodGateConsts.bodyRectWidth / 2,
|
||||
-floodGateConsts.bodyRectHeight / 2
|
||||
);
|
||||
this.lineBody.lineTo(
|
||||
floodGateConsts.bodyRectWidth / 2,
|
||||
-floodGateConsts.bodyRectHeight / 2
|
||||
);
|
||||
this.lineBody.moveTo(
|
||||
-floodGateConsts.bodyRectWidth / 2,
|
||||
floodGateConsts.bodyRectHeight / 2
|
||||
);
|
||||
this.lineBody.lineTo(
|
||||
floodGateConsts.bodyRectWidth / 2,
|
||||
floodGateConsts.bodyRectHeight / 2
|
||||
);
|
||||
this.lineBody.moveTo(0, -floodGateConsts.bodyRectHeight / 2);
|
||||
this.lineBody.lineTo(0, floodGateConsts.bodyRectHeight / 2);
|
||||
}
|
||||
|
||||
buildRelation() {
|
||||
const sections = this.queryStore
|
||||
.queryByType<Section>(Section.Type)
|
||||
.filter((s) => s.datas.sectionType === SectionType.Physical);
|
||||
let xj = false;
|
||||
const se = sections.find((section) => {
|
||||
const points = section.linePoints;
|
||||
points.forEach((point, index) => {
|
||||
if (index !== 0) {
|
||||
xj =
|
||||
linePoint(
|
||||
section.localToCanvasPoint(points[index - 1]),
|
||||
section.localToCanvasPoint(point),
|
||||
this.localToCanvasPoint({ x: 0, y: 0 }),
|
||||
8
|
||||
) || xj;
|
||||
}
|
||||
});
|
||||
return xj;
|
||||
});
|
||||
if (se) {
|
||||
this.datas.linkSection = se.datas.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class FloodGateTemplate extends JlGraphicTemplate<FloodGate> {
|
||||
constructor(dataTemplate: IFloodGateData) {
|
||||
super(FloodGate.Type, { dataTemplate });
|
||||
}
|
||||
new(): FloodGate {
|
||||
const floodGate = new FloodGate();
|
||||
floodGate.loadData(this.datas);
|
||||
return floodGate;
|
||||
}
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
import { FloodGate, FloodGateTemplate, IFloodGateData } from './FloodGate';
|
||||
|
||||
export interface IFloodGateDataDrawOptions {
|
||||
newData: () => IFloodGateData;
|
||||
}
|
||||
export class FloodGateDraw extends GraphicDrawAssistant<
|
||||
FloodGateTemplate,
|
||||
IFloodGateData
|
||||
> {
|
||||
_floodGate: FloodGate | null = null;
|
||||
constructor(app: IDrawApp, template: FloodGateTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-flood-gate',
|
||||
'防淹门FloodGate'
|
||||
);
|
||||
FloodGateInteraction.init(app);
|
||||
}
|
||||
public get floodGate(): FloodGate {
|
||||
if (!this._floodGate) {
|
||||
this._floodGate = this.graphicTemplate.new();
|
||||
this._floodGate.loadData(this.graphicTemplate.datas);
|
||||
this.container.addChild(this._floodGate);
|
||||
}
|
||||
return this._floodGate;
|
||||
}
|
||||
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.floodGate.repaint();
|
||||
this.container.position.set(p.x, p.y);
|
||||
}
|
||||
|
||||
prepareData(data: IFloodGateData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
data.code = 'FloodGate';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 构建吸附线
|
||||
* @param floodGate
|
||||
*/
|
||||
function buildAbsorbablePositions(floodGate: FloodGate): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const floodGates = floodGate.queryStore.queryByType<FloodGate>(
|
||||
FloodGate.Type
|
||||
);
|
||||
const canvas = floodGate.getCanvas();
|
||||
floodGates.forEach((item) => {
|
||||
if (item.id === floodGate.id) {
|
||||
return;
|
||||
}
|
||||
const ala = new AbsorbableLine(
|
||||
new Point(item.x, 0),
|
||||
new Point(item.x, canvas.height)
|
||||
);
|
||||
const alb = new AbsorbableLine(
|
||||
new Point(0, item.y),
|
||||
new Point(canvas.width, item.y)
|
||||
);
|
||||
aps.push(ala);
|
||||
aps.push(alb);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class FloodGateInteraction extends GraphicInteractionPlugin<FloodGate> {
|
||||
static Name = 'flood_gate_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(FloodGateInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new FloodGateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): FloodGate[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === FloodGate.Type)
|
||||
.map((g) => g as FloodGate);
|
||||
}
|
||||
bind(g: FloodGate): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.codeGraph.draggable = true;
|
||||
g.codeGraph.selectable = true;
|
||||
g.codeGraph.rotatable = true;
|
||||
g.codeGraph.transformSave = true;
|
||||
g.codeGraph.eventMode = 'static';
|
||||
g.on('transformstart', this.transformstart, this);
|
||||
}
|
||||
unbind(g: FloodGate): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.codeGraph.draggable = false;
|
||||
g.codeGraph.selectable = false;
|
||||
g.codeGraph.rotatable = false;
|
||||
g.codeGraph.transformSave = false;
|
||||
g.codeGraph.eventMode = 'none';
|
||||
g.off('transformstart', this.transformstart, this);
|
||||
}
|
||||
transformstart(e: GraphicTransformEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const floodGate = target.getGraphic() as FloodGate;
|
||||
floodGate.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(floodGate),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
import { Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'jl-graphic';
|
||||
|
||||
export interface IGarageDoorBox extends GraphicData {
|
||||
get code(): string;
|
||||
set code(v: string);
|
||||
get flip(): boolean;
|
||||
set flip(v: boolean);
|
||||
get refGarageDoorId(): number;
|
||||
set refGarageDoorId(v: number);
|
||||
get refPslMapCode(): string;
|
||||
set refPslMapCode(v: string);
|
||||
clone(): IGarageDoorBox;
|
||||
copyFrom(data: IGarageDoorBox): void;
|
||||
eq(other: IGarageDoorBox): boolean;
|
||||
}
|
||||
|
||||
const garageDoorBoxConsts = {
|
||||
codeFontSize: 12,
|
||||
codeColor: 0xffffff,
|
||||
bodyLineColor: 0xffffff,
|
||||
bodyLineWidth: 4,
|
||||
bodyRectLineColor: 0xffffff,
|
||||
bodyRectLineWidth: 2,
|
||||
bodyRectWidth: 20,
|
||||
bodyRectHeight: 20,
|
||||
bodyColor: 0x000000,
|
||||
};
|
||||
export class GarageDoorBox extends JlGraphic {
|
||||
static Type = 'garageDoorBox';
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
rectBody: Graphics = new Graphics();
|
||||
lineBody: Graphics = new Graphics();
|
||||
textGraph: VectorText = new VectorText('G');
|
||||
|
||||
constructor() {
|
||||
super(GarageDoorBox.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.rectBody);
|
||||
this.addChild(this.lineBody);
|
||||
this.addChild(this.textGraph);
|
||||
this.codeGraph.name = 'g_d_b_code';
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IGarageDoorBox {
|
||||
return this.getDatas<IGarageDoorBox>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
codeGraph.text = this.datas.code;
|
||||
codeGraph.style.fill = garageDoorBoxConsts.codeColor;
|
||||
codeGraph.setVectorFontSize(garageDoorBoxConsts.codeFontSize);
|
||||
const codeTransform = this.datas?.childTransforms?.find(
|
||||
(item) => item.name === 'g_d_b_code'
|
||||
);
|
||||
if (codeTransform) {
|
||||
const position = codeTransform?.transform.position;
|
||||
const rotation = codeTransform?.transform?.rotation;
|
||||
codeGraph.position.set(position?.x, position?.y);
|
||||
codeGraph.rotation = rotation || 0;
|
||||
} else {
|
||||
codeGraph.position.set(20, 0);
|
||||
}
|
||||
codeGraph.anchor.set(0.5);
|
||||
this.textGraph.style.fill = garageDoorBoxConsts.codeColor;
|
||||
this.textGraph.setVectorFontSize(garageDoorBoxConsts.codeFontSize);
|
||||
this.textGraph.anchor.set(0.5);
|
||||
this.rectBody.clear();
|
||||
this.rectBody.beginFill(garageDoorBoxConsts.bodyColor, 0);
|
||||
this.rectBody.lineStyle(
|
||||
garageDoorBoxConsts.bodyRectLineWidth,
|
||||
garageDoorBoxConsts.bodyRectLineColor
|
||||
);
|
||||
this.rectBody.drawRect(
|
||||
-garageDoorBoxConsts.bodyRectWidth / 2,
|
||||
-garageDoorBoxConsts.bodyRectHeight / 2,
|
||||
garageDoorBoxConsts.bodyRectWidth,
|
||||
garageDoorBoxConsts.bodyRectHeight
|
||||
);
|
||||
this.rectBody.endFill();
|
||||
this.lineBody.clear();
|
||||
const lineY = this.datas.flip
|
||||
? garageDoorBoxConsts.bodyRectHeight / 2
|
||||
: -garageDoorBoxConsts.bodyRectHeight / 2;
|
||||
this.lineBody.lineStyle(
|
||||
garageDoorBoxConsts.bodyLineWidth,
|
||||
garageDoorBoxConsts.bodyLineColor
|
||||
);
|
||||
this.lineBody.moveTo(-garageDoorBoxConsts.bodyRectWidth / 2, lineY);
|
||||
this.lineBody.lineTo(garageDoorBoxConsts.bodyRectWidth / 2, lineY);
|
||||
}
|
||||
}
|
||||
|
||||
export class GarageDoorBoxTemplate extends JlGraphicTemplate<GarageDoorBox> {
|
||||
constructor(dataTemplate: IGarageDoorBox) {
|
||||
super(GarageDoorBox.Type, { dataTemplate });
|
||||
}
|
||||
new(): GarageDoorBox {
|
||||
const garageDoorBox = new GarageDoorBox();
|
||||
garageDoorBox.loadData(this.datas);
|
||||
return garageDoorBox;
|
||||
}
|
||||
}
|
||||
@ -1,132 +0,0 @@
|
||||
import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
import {
|
||||
GarageDoorBox,
|
||||
GarageDoorBoxTemplate,
|
||||
IGarageDoorBox,
|
||||
} from './GarageDoorBox';
|
||||
|
||||
export interface IGarageDoorBoxDrawOptions {
|
||||
newData: () => IGarageDoorBox;
|
||||
}
|
||||
export class GarageDoorBoxDraw extends GraphicDrawAssistant<
|
||||
GarageDoorBoxTemplate,
|
||||
IGarageDoorBox
|
||||
> {
|
||||
_garageDoorBox: GarageDoorBox | null = null;
|
||||
constructor(app: IDrawApp, template: GarageDoorBoxTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-garage-door-box',
|
||||
'设置车库门GarageDoorBox'
|
||||
);
|
||||
GarageDoorBoxInteraction.init(app);
|
||||
}
|
||||
public get garageDoorBox(): GarageDoorBox {
|
||||
if (!this._garageDoorBox) {
|
||||
this._garageDoorBox = this.graphicTemplate.new();
|
||||
this._garageDoorBox.loadData(this.graphicTemplate.datas);
|
||||
this.container.addChild(this._garageDoorBox);
|
||||
}
|
||||
return this._garageDoorBox;
|
||||
}
|
||||
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.garageDoorBox.repaint();
|
||||
this.container.position.set(p.x, p.y);
|
||||
}
|
||||
|
||||
prepareData(data: IGarageDoorBox): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
data.code = 'G';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 构建吸附线
|
||||
* @param garageDoorBox
|
||||
*/
|
||||
function buildAbsorbablePositions(
|
||||
garageDoorBox: GarageDoorBox
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const garageDoorBoxs = garageDoorBox.queryStore.queryByType<GarageDoorBox>(
|
||||
GarageDoorBox.Type
|
||||
);
|
||||
const canvas = garageDoorBox.getCanvas();
|
||||
garageDoorBoxs.forEach((item) => {
|
||||
if (item.id === garageDoorBox.id) {
|
||||
return;
|
||||
}
|
||||
const ala = new AbsorbableLine(
|
||||
new Point(item.x, 0),
|
||||
new Point(item.x, canvas.height)
|
||||
);
|
||||
const alb = new AbsorbableLine(
|
||||
new Point(0, item.y),
|
||||
new Point(canvas.width, item.y)
|
||||
);
|
||||
aps.push(ala);
|
||||
aps.push(alb);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class GarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
|
||||
static Name = 'garage_door_box_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(GarageDoorBoxInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new GarageDoorBoxInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === GarageDoorBox.Type)
|
||||
.map((g) => g as GarageDoorBox);
|
||||
}
|
||||
bind(g: GarageDoorBox): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.codeGraph.draggable = true;
|
||||
g.codeGraph.selectable = true;
|
||||
g.codeGraph.rotatable = true;
|
||||
g.codeGraph.transformSave = true;
|
||||
g.codeGraph.eventMode = 'static';
|
||||
g.on('transformstart', this.transformstart, this);
|
||||
}
|
||||
unbind(g: GarageDoorBox): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.codeGraph.draggable = false;
|
||||
g.codeGraph.selectable = false;
|
||||
g.codeGraph.rotatable = false;
|
||||
g.codeGraph.transformSave = false;
|
||||
g.codeGraph.eventMode = 'none';
|
||||
g.off('transformstart', this.transformstart, this);
|
||||
}
|
||||
transformstart(e: GraphicTransformEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const garageDoorBox = target.getGraphic() as GarageDoorBox;
|
||||
garageDoorBox.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(garageDoorBox),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -275,9 +275,7 @@ import { distance2, JlGraphic } from 'jl-graphic';
|
||||
import { IbpBox } from 'src/graphics/ibpBox/IbpBox';
|
||||
import { PslBox } from 'src/graphics/pslBox/PslBox';
|
||||
import { CarWashing } from 'src/graphics/carWashing/CarWashing';
|
||||
import { FloodGate } from 'src/graphics/floodGate/FloodGate';
|
||||
import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
|
||||
import { GarageDoorBox } from 'src/graphics/garageDoorBox/GarageDoorBox';
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
@ -444,9 +442,7 @@ onMounted(() => {
|
||||
IbpBox.Type,
|
||||
PslBox.Type,
|
||||
CarWashing.Type,
|
||||
FloodGate.Type,
|
||||
GarageDoor.Type,
|
||||
GarageDoorBox.Type,
|
||||
];
|
||||
switch (drawStore.categoryType) {
|
||||
case CategoryType.TH:
|
||||
@ -842,9 +838,6 @@ function oneClickRelateCentralizedStation() {
|
||||
const carWashings = drawApp.queryStore
|
||||
.queryByType<CarWashing>(CarWashing.Type)
|
||||
.filter((g) => containDeviceIds.includes(g.datas.linkSection));
|
||||
const floodGates = drawApp.queryStore
|
||||
.queryByType<FloodGate>(FloodGate.Type)
|
||||
.filter((g) => containDeviceIds.includes(g.datas.linkSection));
|
||||
const allSetCentralizedStationsDevice = [
|
||||
...containDevices,
|
||||
...signals,
|
||||
@ -852,7 +845,6 @@ function oneClickRelateCentralizedStation() {
|
||||
...axleCountings,
|
||||
...garageDoors,
|
||||
...carWashings,
|
||||
...floodGates,
|
||||
];
|
||||
allSetCentralizedStationsDevice.forEach(
|
||||
(g) => ((g as Signal).datas.centralizedStations = [])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user