列车控制室相关

src/components/draw-app/TccDrawProperties.vue

@@ -17,10 +17,16 @@
         <q-card-section>
           <tcc-button-property
             v-if="tccDrawStore.selectedGraphicType === TccButton.Type"
-          ></tcc-button-property>
+          />
           <tcc-text-property
             v-if="tccDrawStore.selectedGraphicType === TextContent.Type"
-          ></tcc-text-property>
+          />
+          <tcc-key-property
+            v-else-if="tccDrawStore.selectedGraphicType === TccKey.Type"
+          />
+          <tcc-handle-property
+            v-else-if="tccDrawStore.selectedGraphicType === TccHandle.Type"
+          />
         </q-card-section>
       </template>
     </q-card>
@@ -34,6 +40,10 @@ import { TccButton } from 'src/graphics/tccButton/TccButton';
 import TccButtonProperty from './properties/TccButtonProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import TccTextProperty from './properties/TccTextProperty.vue';
+import { TccKey } from 'src/graphics/tccKey/TccKey';
+import TccKeyProperty from './properties/TccKeyProperty.vue';
+import { TccHandle } from 'src/graphics/tccHandle/TccHandle';
+import TccHandleProperty from './properties/TccHandleProperty.vue';
 
 const tccDrawStore = useTccDrawStore();
 </script>

src/components/draw-app/properties/TccButtonProperty.vue

@@ -8,15 +8,6 @@
       label="紧急制动按钮"
       lazy-rules
     />
-    <q-select
-      outlined
-      v-model="tccButtonModel.buttonColor"
-      :options="optionsButtonColor"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="按钮颜色"
-    />
     <q-checkbox
       v-model="tccButtonModel.isSelfReset"
       label="是否自复位"
@@ -27,7 +18,6 @@
 
 <script setup lang="ts">
 import { TccButtonData } from 'src/drawApp/graphics/TccButtonInteraction';
-import { tccGraphicData } from 'src/protos/tccGraphics';
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { useTccDrawStore } from 'src/stores/tcc-draw-store';
 
@@ -35,9 +25,4 @@ const { data: tccButtonModel, onUpdate } = useFormData(
   new TccButtonData(),
   useTccDrawStore().getDrawApp()
 );
-
-const optionsButtonColor = [
-  { label: '绿色', value: tccGraphicData.TccElementColor.green },
-  { label: '红色', value: tccGraphicData.TccElementColor.red },
-];
 </script>

src/components/draw-app/properties/TccHandleProperty.vue

@@ -0,0 +1,24 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="tccHandleModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="tccHandleModel.code"
+      @blur="onUpdate"
+      label="Tcc手柄"
+      lazy-rules
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { TccHandleData } from 'src/drawApp/graphics/TccHandleInteraction';
+import { useTccDrawStore } from 'src/stores/tcc-draw-store';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+
+const tccDrawStore = useTccDrawStore();
+const { data: tccHandleModel, onUpdate } = useFormData(
+  new TccHandleData(),
+  tccDrawStore.getDrawApp()
+);
+</script>

src/components/draw-app/properties/TccKeyProperty.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="tccKeyModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="tccKeyModel.code"
+      @blur="onUpdate"
+      label="Tcc钥匙"
+      lazy-rules
+    />
+    <q-select
+      outlined
+      v-model="tccKeyModel.type"
+      :options="optionsKeyType"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="Tcc钥匙类型"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { TccKeyData } from 'src/drawApp/graphics/TccKeyInteraction';
+import { useTccDrawStore } from 'src/stores/tcc-draw-store';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+
+const tccDrawStore = useTccDrawStore();
+const { data: tccKeyModel, onUpdate } = useFormData(
+  new TccKeyData(),
+  tccDrawStore.getDrawApp()
+);
+const optionsKeyType = [
+  {
+    label: '司控器激活端',
+    value: tccGraphicData.TccKey.TccKeyType.driverControllerActivationClint,
+  },
+  {
+    label: '前后方向控制',
+    value: tccGraphicData.TccKey.TccKeyType.frontAndRearDirectionalControl,
+  },
+];
+</script>

src/drawApp/graphics/TccButtonInteraction.ts

@@ -31,12 +31,6 @@ export class TccButtonData extends GraphicDataBase implements ITccButtonData {
   set code(v: string) {
     this.data.code = v;
   }
-  get buttonColor(): tccGraphicData.TccElementColor {
-    return this.data.buttonColor;
-  }
-  set buttonColor(v: tccGraphicData.TccElementColor) {
-    this.data.buttonColor = v;
-  }
   get isSelfReset(): boolean {
     return this.data.isSelfReset;
   }

src/drawApp/graphics/TccHandleInteraction.ts

@@ -0,0 +1,132 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  ITccHandleData,
+  ITccHandleState,
+  TccHandle,
+} from 'src/graphics/tccHandle/TccHandle';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
+import { type FederatedMouseEvent } from 'pixi.js';
+import { useTccStore } from 'src/stores/tcc-store';
+
+export class TccHandleData extends GraphicDataBase implements ITccHandleData {
+  constructor(data?: tccGraphicData.TccHandle) {
+    let tccHandle;
+    if (data) {
+      tccHandle = data;
+    } else {
+      tccHandle = new tccGraphicData.TccHandle({
+        common: GraphicDataBase.defaultCommonInfo(TccHandle.Type),
+      });
+    }
+    super(tccHandle);
+  }
+
+  public get data(): tccGraphicData.TccHandle {
+    return this.getData<tccGraphicData.TccHandle>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): TccHandleData {
+    return new TccHandleData(this.data.cloneMessage());
+  }
+  copyFrom(data: TccHandleData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TccHandleData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class TccHandleState
+  extends GraphicStateBase
+  implements ITccHandleState
+{
+  constructor(data?: state.KeyState) {
+    let tccHandleState;
+    if (data) {
+      tccHandleState = data;
+    } else {
+      tccHandleState = new state.KeyState();
+    }
+    super(tccHandleState, TccHandle.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get states(): state.KeyState {
+    return this.getState<state.KeyState>();
+  }
+  get gear(): number {
+    return this.states.gear;
+  }
+  set gear(v: number) {
+    this.states.gear = v;
+  }
+  clone(): TccHandleState {
+    return new TccHandleState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
+  static Name = 'TccHandleInteraction';
+  isMouseDown = false;
+  mouseDownBeginPos = 0;
+  mouseDownTccHandleBeginPos = 0;
+  constructor(app: IGraphicScene) {
+    super(TccHandleInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new TccHandleInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TccHandle[] | undefined {
+    return grahpics.filter((g): g is TccHandle => g instanceof TccHandle);
+  }
+  bind(g: TccHandle): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g._tccHandle.eventMode = 'static';
+    g._tccHandle.cursor = 'pointer';
+    g._tccHandle.on('mousedown', this.onMouseDown);
+    g._tccHandle.on('mouseup', this.onMouseUp);
+    g.onmousemove = (e) => {
+      this.onMouseOver(e);
+    };
+  }
+  unbind(g: TccHandle): void {
+    g.eventMode = 'none';
+    g._tccHandle.eventMode = 'none';
+    g._tccHandle.off('mousedown', this.onMouseDown);
+    g._tccHandle.off('mouseup', this.onMouseUp);
+    g.onmousemove = null;
+  }
+  onMouseDown(e: FederatedMouseEvent) {
+    const tccHandle = e.target as TccHandle;
+    this.isMouseDown = true;
+    this.mouseDownBeginPos = e.clientY;
+    this.mouseDownTccHandleBeginPos = tccHandle._tccHandle.y;
+  }
+  onMouseUp() {
+    this.isMouseDown = false;
+  }
+  onMouseOver(e: FederatedMouseEvent) {
+    const tccHandle = e.target as TccHandle;
+    if (this.isMouseDown) {
+      tccHandle._tccHandle.y =
+        this.mouseDownTccHandleBeginPos + e.clientY - this.mouseDownBeginPos;
+    }
+  }
+}

src/drawApp/graphics/TccKeyInteraction.ts

@@ -0,0 +1,108 @@
+import * as pb_1 from 'google-protobuf';
+import { ITccKeyData, ITccKeyState, TccKey } from 'src/graphics/tccKey/TccKey';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
+import { type FederatedMouseEvent } from 'pixi.js';
+import { useTccStore } from 'src/stores/tcc-store';
+
+export class TccKeyData extends GraphicDataBase implements ITccKeyData {
+  constructor(data?: tccGraphicData.TccKey) {
+    let tccKey;
+    if (data) {
+      tccKey = data;
+    } else {
+      tccKey = new tccGraphicData.TccKey({
+        common: GraphicDataBase.defaultCommonInfo(TccKey.Type),
+      });
+    }
+    super(tccKey);
+  }
+
+  public get data(): tccGraphicData.TccKey {
+    return this.getData<tccGraphicData.TccKey>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get type(): tccGraphicData.TccKey.TccKeyType {
+    return this.data.type;
+  }
+  set type(v: tccGraphicData.TccKey.TccKeyType) {
+    this.data.type = v;
+  }
+  clone(): TccKeyData {
+    return new TccKeyData(this.data.cloneMessage());
+  }
+  copyFrom(data: TccKeyData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TccKeyData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class TccKeyState extends GraphicStateBase implements ITccKeyState {
+  constructor(data?: state.KeyState) {
+    let tccKeyState;
+    if (data) {
+      tccKeyState = data;
+    } else {
+      tccKeyState = new state.KeyState();
+    }
+    super(tccKeyState, TccKey.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get states(): state.KeyState {
+    return this.getState<state.KeyState>();
+  }
+  get gear(): number {
+    return this.states.gear;
+  }
+  set gear(v: number) {
+    this.states.gear = v;
+  }
+  clone(): TccKeyState {
+    return new TccKeyState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
+  static Name = 'TccKeyInteraction';
+  constructor(app: IGraphicScene) {
+    super(TccKeyInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new TccKeyInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TccKey[] | undefined {
+    return grahpics.filter((g): g is TccKey => g instanceof TccKey);
+  }
+  bind(g: TccKey): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.on('_leftclick', this.onClick);
+  }
+  unbind(g: TccKey): void {
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onClick);
+  }
+  onClick(e: FederatedMouseEvent): void {
+    const g = e.target as TccKey;
+    /* const changeState = useTccStore().tccKeyOperation;
+    changeState(g.datas.id, g.state.gear === 0 ? 1 : 0); */
+  }
+}

src/drawApp/tccApp.ts

@@ -26,6 +26,16 @@ import {
 } from 'src/graphics/textContent/TextContent';
 import { TccTextData } from './graphics/TccTextContentInteraction';
 import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
+import { TccKeyDraw } from 'src/graphics/tccKey/TccKeyDrawAssistant';
+import { TccKey, TccKeyTemplate } from 'src/graphics/tccKey/TccKey';
+import { TccKeyData, TccKeyState } from './graphics/TccKeyInteraction';
+import { TccHandleDraw } from 'src/graphics/tccHandle/TccHandleDrawAssistant';
+import { TccHandle, TccHandleTemplate } from 'src/graphics/tccHandle/TccHandle';
+import {
+  TccHandleData,
+  TccHandleInteraction,
+  TccHandleState,
+} from './graphics/TccHandleInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -73,6 +83,15 @@ export function initTccDrawApp(): IDrawApp {
     new TccButtonTemplate(new TccButtonData(), new TccButtonState())
   );
   new TextContentDraw(app, new TextContentTemplate(new TccTextData()));
+  new TccKeyDraw(
+    drawApp,
+    new TccKeyTemplate(new TccKeyData(), new TccKeyState())
+  );
+  new TccHandleDraw(
+    drawApp,
+    new TccHandleTemplate(new TccHandleData(), new TccHandleState())
+  );
+  TccHandleInteraction.init(app);
 
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);
@@ -159,12 +178,14 @@ export function saveTccDrawDatas(app: IDrawApp) {
   });
   const graphics = app.queryStore.getAllGraphics();
   graphics.forEach((g) => {
-    if (TccButton.Type === g.type) {
-      const tccButtonData = (g as TccButton).saveData();
-      storage.tccButtons.push((tccButtonData as TccButtonData).data);
-    } else if (TextContent.Type === g.type) {
-      const tccTextData = (g as TextContent).saveData();
-      storage.tccTexts.push((tccTextData as TccTextData).data);
+    if (g instanceof TccButton) {
+      storage.tccButtons.push(g.saveData<TccButtonData>().data);
+    } else if (g instanceof TextContent) {
+      storage.tccTexts.push(g.saveData<TccTextData>().data);
+    } else if (g instanceof TccKey) {
+      storage.tccKeys.push(g.saveData<TccKeyData>().data);
+    } else if (g instanceof TccHandle) {
+      storage.tccHandles.push(g.saveData<TccHandleData>().data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -189,6 +210,12 @@ export async function loadTccDrawDatas(): Promise<IGraphicStorage> {
     storage.tccButtons.forEach((tccButton) => {
       datas.push(new TccButtonData(tccButton));
     });
+    storage.tccKeys.forEach((tccKey) => {
+      datas.push(new TccKeyData(tccKey));
+    });
+    storage.tccHandles.forEach((tccHandle) => {
+      datas.push(new TccHandleData(tccHandle));
+    });
     storage.tccTexts.forEach((tccText) => {
       datas.push(new TccTextData(tccText));
     });

src/drawApp/tccScene.ts

@@ -10,10 +10,27 @@ import { useTccStore } from 'src/stores/tcc-store';
 import { toUint8Array } from 'js-base64';
 import { useLineStore } from 'src/stores/line-store';
 import { state } from 'src/protos/device_state';
-import { TccButtonData, TccButtonOperateInteraction, TccButtonState } from './graphics/TccButtonInteraction';
+import {
+  TccButtonData,
+  TccButtonOperateInteraction,
+  TccButtonState,
+} from './graphics/TccButtonInteraction';
 import { tccGraphicData } from 'src/protos/tccGraphics';
 import { TccButtonTemplate } from 'src/graphics/tccButton/TccButton';
-
+import { TextContentTemplate } from 'src/graphics/textContent/TextContent';
+import { TccTextData } from './graphics/TccTextContentInteraction';
+import { TccKeyTemplate } from 'src/graphics/tccKey/TccKey';
+import {
+  TccKeyData,
+  TccKeyInteraction,
+  TccKeyState,
+} from './graphics/TccKeyInteraction';
+import { TccHandleTemplate } from 'src/graphics/tccHandle/TccHandle';
+import {
+  TccHandleData,
+  TccHandleInteraction,
+  TccHandleState,
+} from './graphics/TccHandleInteraction';
 
 export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   const tccScene = lineApp.initScene(sceneName, {
@@ -26,8 +43,13 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   });
   const graphicTemplate = [
     new TccButtonTemplate(new TccButtonData(), new TccButtonState()),
+    new TextContentTemplate(new TccTextData()),
+    new TccKeyTemplate(new TccKeyData(), new TccKeyState()),
+    new TccHandleTemplate(new TccHandleData(), new TccHandleState()),
   ];
   TccButtonOperateInteraction.init(tccScene);
+  TccKeyInteraction.init(tccScene);
+  TccHandleInteraction.init(tccScene);
   tccScene.registerGraphicTemplates(...graphicTemplate);
   tccScene.on('postdataloaded', () => {
     handleSubscribe(tccScene);
@@ -82,6 +104,15 @@ async function loadTccDatas(): Promise<IGraphicStorage> {
     storage.tccButtons.forEach((tccButton) => {
       datas.push(new TccButtonData(tccButton));
     });
+    storage.tccKeys.forEach((tccKey) => {
+      datas.push(new TccKeyData(tccKey));
+    });
+    storage.tccHandles.forEach((tccHandle) => {
+      datas.push(new TccHandleData(tccHandle));
+    });
+    storage.tccTexts.forEach((tccText) => {
+      datas.push(new TccTextData(tccText));
+    });
     return Promise.resolve({
       canvasProperty: storage.canvas,
       datas: datas,

src/graphics/tccButton/TccButton.ts

@@ -13,15 +13,11 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
 interface TccButtonTextures {
   redBtn: Texture;
   greenBtn: Texture;
-  redBtnPress: Texture;
-  greenBtnPress: Texture;
 }
 
 export interface ITccButtonData extends GraphicData {
   get code(): string;
   set code(v: string);
-  get buttonColor(): tccGraphicData.TccElementColor;
-  set buttonColor(v: tccGraphicData.TccElementColor);
   get isSelfReset(): boolean;
   set isSelfReset(v: boolean);
 }
@@ -58,18 +54,10 @@ export class TccButton extends JlGraphic {
   }
   doRepaint(): void {
     this._tccButton.rotation = 0;
-    if (this.datas.buttonColor === tccGraphicData.TccElementColor.green) {
-      if (this.states.down) {
-        this._tccButton.texture = this.tccButtonTextures.greenBtnPress;
-      } else {
-        this._tccButton.texture = this.tccButtonTextures.greenBtn;
-      }
+    if (this.states.down) {
+      this._tccButton.texture = this.tccButtonTextures.redBtn;
     } else {
-      if (this.states.down) {
-        this._tccButton.texture = this.tccButtonTextures.redBtnPress;
-      } else {
-        this._tccButton.texture = this.tccButtonTextures.redBtn;
-      }
+      this._tccButton.texture = this.tccButtonTextures.greenBtn;
     }
   }
 }
@@ -96,8 +84,6 @@ export class TccButtonTemplate extends JlGraphicTemplate<TccButton> {
     this.tccButtonTextures = {
       redBtn: result['red-btn.png'],
       greenBtn: result['green-btn.png'],
-      redBtnPress: result['red-btn-press.png'],
-      greenBtnPress: result['green-btn-press.png'],
     };
     return this.tccButtonTextures as TccButtonTextures;
   }

src/graphics/tccHandle/TccHandle.ts

@@ -0,0 +1,87 @@
+import {
+  GraphicData,
+  GraphicState,
+  JlGraphic,
+  JlGraphicTemplate,
+} from 'jl-graphic';
+import Tcc_Handle_Assets from './tcc-handle-spritesheet.png';
+import Tcc_Handle_JSON from './tcc-handle-data.json';
+
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+
+interface TccHandleTextures {
+  tccHandle: Texture;
+  handleBackground: Texture;
+}
+
+export interface ITccHandleData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+export interface ITccHandleState extends GraphicState {
+  get gear(): number;
+  set gear(v: number);
+}
+
+export class TccHandle extends JlGraphic {
+  static Type = 'TccHandle';
+  _tccHandle: Sprite;
+  _tccHandleBackground: Sprite;
+  tccHandleTextures: TccHandleTextures;
+  __state = 0;
+
+  constructor(tccHandleTextures: TccHandleTextures) {
+    super(TccHandle.Type);
+    this.tccHandleTextures = tccHandleTextures;
+    this._tccHandle = new Sprite();
+    this._tccHandle.texture = this.tccHandleTextures.tccHandle;
+    this._tccHandle.anchor.set(0.5);
+    this._tccHandleBackground = new Sprite();
+    this._tccHandleBackground.texture = this.tccHandleTextures.handleBackground;
+    this._tccHandleBackground.anchor.set(0.5);
+    this._tccHandleBackground.position.x = -20;
+    this.addChild(this._tccHandleBackground);
+    this.addChild(this._tccHandle);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas() {
+    return this.getDatas<ITccHandleData>();
+  }
+  get state() {
+    return this.getStates<ITccHandleState>();
+  }
+  doRepaint(): void {
+    this._tccHandle.rotation = (-Math.PI / 2) * this.state.gear;
+    this._tccHandle.texture = this.tccHandleTextures.tccHandle;
+  }
+}
+
+export class TccHandleTemplate extends JlGraphicTemplate<TccHandle> {
+  tccHandleTextures?: TccHandleTextures;
+  constructor(dataTemplate: ITccHandleData, stateTemplate?: ITccHandleState) {
+    super(TccHandle.Type, { dataTemplate, stateTemplate });
+    this.loadAssets();
+  }
+  new(): TccHandle {
+    if (this.tccHandleTextures) {
+      const g = new TccHandle(this.tccHandleTextures);
+      g.loadData(this.datas);
+      g.loadState(this.states);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<TccHandleTextures> {
+    const texture = await Assets.load(Tcc_Handle_Assets);
+    const tccHandleSheet = new Spritesheet(texture, Tcc_Handle_JSON);
+    const result = await tccHandleSheet.parse();
+    this.tccHandleTextures = {
+      tccHandle: result['handle.png'],
+      handleBackground: result['handleBackground.png'],
+    };
+    return this.tccHandleTextures as TccHandleTextures;
+  }
+}

src/graphics/tccHandle/TccHandleDrawAssistant.ts

@@ -0,0 +1,116 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { ITccHandleData, TccHandle, TccHandleTemplate } from './TccHandle';
+
+export class TccHandleDraw extends GraphicDrawAssistant<
+  TccHandleTemplate,
+  ITccHandleData
+> {
+  _tccHandle: TccHandle | null = null;
+  constructor(app: IDrawApp, template: TccHandleTemplate) {
+    super(app, template, 'drag_handle', 'Tcc手柄');
+    TccHandleInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._tccHandle) {
+      this._tccHandle = this.graphicTemplate.new();
+      this.container.addChild(this._tccHandle);
+    }
+  }
+
+  public get tccHandle(): TccHandle {
+    if (!this._tccHandle) {
+      this._tccHandle = this.graphicTemplate.new();
+      this.container.addChild(this._tccHandle);
+    }
+    return this._tccHandle;
+  }
+
+  redraw(cp: Point): void {
+    this.tccHandle.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.tccHandle.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: ITccHandleData): boolean {
+    data.transform = this.tccHandle.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param tccHandle
+ */
+function buildAbsorbablePositions(tccHandle: TccHandle): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const tccHandles = tccHandle.queryStore.queryByType<TccHandle>(
+    TccHandle.Type
+  );
+  const canvas = tccHandle.getCanvas();
+  tccHandles.forEach((item) => {
+    if (item.id === tccHandle.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 TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
+  static Name = 'tcc_handle_transform';
+  constructor(app: IDrawApp) {
+    super(TccHandleInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new TccHandleInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TccHandle[] | undefined {
+    return grahpics
+      .filter((g) => g.type === TccHandle.Type)
+      .map((g) => g as TccHandle);
+  }
+  bind(g: TccHandle): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: TccHandle): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic() as TccHandle;
+    tccHandle.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(tccHandle),
+    });
+  }
+}

src/graphics/tccHandle/tcc-handle-data.json

@@ -0,0 +1,28 @@
+{"frames": {
+
+"handle.png":
+{
+	"frame": {"x":0,"y":0,"w":64,"h":14},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":14},
+	"sourceSize": {"w":64,"h":14}
+},
+"handleBackground.png":
+{
+	"frame": {"x":0,"y":14,"w":120,"h":300},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":120,"h":300},
+	"sourceSize": {"w":120,"h":300}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.1",
+	"image": "tcc-handle-data.png",
+	"format": "RGBA8888",
+	"size": {"w":120,"h":314},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:35ec8faa530fc86d3b0740464eb2648e:0a63968fd7e862029434ae414b4e8d7b:5c8a7a2b19e5dc1773dcba416f4dca6e$"
+}
+}

src/graphics/tccKey/TccKey.ts

@@ -0,0 +1,101 @@
+import {
+  GraphicData,
+  GraphicState,
+  JlGraphic,
+  JlGraphicTemplate,
+} from 'jl-graphic';
+import Tcc_Key_Assets from './tcc-key-spritesheet.png';
+import Tcc_Key_JSON from './tcc-key-data.json';
+
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+
+interface TccKeyTextures {
+  tccKey: Texture;
+  tccKeyBackground: Texture;
+  tccKnob: Texture;
+}
+
+export interface ITccKeyData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get type(): tccGraphicData.TccKey.TccKeyType;
+  set type(v: tccGraphicData.TccKey.TccKeyType);
+}
+
+export interface ITccKeyState extends GraphicState {
+  get gear(): number;
+  set gear(v: number);
+}
+
+export class TccKey extends JlGraphic {
+  static Type = 'TccKey';
+  _tccKey: Sprite;
+  _tccBackground: Sprite;
+  tccKeyTextures: TccKeyTextures;
+  __state = 0;
+
+  constructor(tccKeyTextures: TccKeyTextures) {
+    super(TccKey.Type);
+    this.tccKeyTextures = tccKeyTextures;
+    this._tccKey = new Sprite();
+    this._tccKey.texture = this.tccKeyTextures.tccKey;
+    this._tccKey.scale.set(0.125);
+    this._tccKey.anchor.set(0.5);
+    this._tccBackground = new Sprite();
+    this._tccBackground.texture = this.tccKeyTextures.tccKeyBackground;
+    this._tccBackground.anchor.set(0.5);
+    this.addChild(this._tccBackground);
+    this.addChild(this._tccKey);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas() {
+    return this.getDatas<ITccKeyData>();
+  }
+  get state() {
+    return this.getStates<ITccKeyState>();
+  }
+  doRepaint(): void {
+    //this._tccKey.rotation = (-Math.PI / 2) * this.state.gear;
+    if (
+      this.datas.type ==
+      tccGraphicData.TccKey.TccKeyType.driverControllerActivationClint
+    ) {
+      this._tccKey.texture = this.tccKeyTextures.tccKey;
+      this._tccKey.rotation = Math.PI / 4;
+    } else {
+      this._tccKey.texture = this.tccKeyTextures.tccKnob;
+      this._tccKey.scale.set(0.6);
+    }
+  }
+}
+
+export class TccKeyTemplate extends JlGraphicTemplate<TccKey> {
+  tccKeyTextures?: TccKeyTextures;
+  constructor(dataTemplate: ITccKeyData, stateTemplate?: ITccKeyState) {
+    super(TccKey.Type, { dataTemplate, stateTemplate });
+    this.loadAssets();
+  }
+  new(): TccKey {
+    if (this.tccKeyTextures) {
+      const g = new TccKey(this.tccKeyTextures);
+      g.loadData(this.datas);
+      g.loadState(this.states);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<TccKeyTextures> {
+    const texture = await Assets.load(Tcc_Key_Assets);
+    const tccKeySheet = new Spritesheet(texture, Tcc_Key_JSON);
+    const result = await tccKeySheet.parse();
+    this.tccKeyTextures = {
+      tccKey: result['key.png'],
+      tccKeyBackground: result['background.png'],
+      tccKnob: result['knob.png'],
+    };
+    return this.tccKeyTextures as TccKeyTextures;
+  }
+}

src/graphics/tccKey/TccKeyDrawAssistant.ts

@@ -0,0 +1,114 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { ITccKeyData, TccKey, TccKeyTemplate } from './TccKey';
+
+export class TccKeyDraw extends GraphicDrawAssistant<
+  TccKeyTemplate,
+  ITccKeyData
+> {
+  _tccKey: TccKey | null = null;
+  constructor(app: IDrawApp, template: TccKeyTemplate) {
+    super(app, template, 'svguse:../drawIcon.svg#icon-psl-key', 'Tcc钥匙');
+    TccKeyInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._tccKey) {
+      this._tccKey = this.graphicTemplate.new();
+      this.container.addChild(this._tccKey);
+    }
+  }
+
+  public get tccKey(): TccKey {
+    if (!this._tccKey) {
+      this._tccKey = this.graphicTemplate.new();
+      this.container.addChild(this._tccKey);
+    }
+    return this._tccKey;
+  }
+
+  redraw(cp: Point): void {
+    this.tccKey.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.tccKey.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: ITccKeyData): boolean {
+    data.transform = this.tccKey.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param tccKey
+ */
+function buildAbsorbablePositions(tccKey: TccKey): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const tccKeys = tccKey.queryStore.queryByType<TccKey>(TccKey.Type);
+  const canvas = tccKey.getCanvas();
+  tccKeys.forEach((item) => {
+    if (item.id === tccKey.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 TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
+  static Name = 'tcc_key_transform';
+  constructor(app: IDrawApp) {
+    super(TccKeyInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new TccKeyInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TccKey[] | undefined {
+    return grahpics
+      .filter((g) => g.type === TccKey.Type)
+      .map((g) => g as TccKey);
+  }
+  bind(g: TccKey): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: TccKey): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const tccKey = target.getGraphic() as TccKey;
+    tccKey.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(tccKey),
+    });
+  }
+}

src/graphics/tccKey/tcc-key-data.json

@@ -0,0 +1,39 @@
+{"frames": {
+
+"background.png":
+{
+	"frame": {"x":0,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"key.png":
+{
+	"frame": {"x":0,"y":128,"w":378,"h":393},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":378,"h":393},
+	"sourceSize": {"w":378,"h":393},
+	"anchor": {"x":0.5,"y":0.5}
+},
+"knob.png":
+{
+	"frame": {"x":128,"y":0,"w":128,"h":128},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
+	"sourceSize": {"w":128,"h":128},
+	"anchor": {"x":0.5,"y":0.5}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.1",
+	"image": "tcc-key-data.png",
+	"format": "RGBA8888",
+	"size": {"w":378,"h":521},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:323ae655a9099ea9ee5548018c8bb2dc:86d9df42807e3cd9d3abb5eaf5f7db62:90c3bb9fceb7f742c704ab999fd08093$"
+}
+}

src/layouts/TrainControlCabDrawLayout.vue

@@ -123,6 +123,8 @@ import { ApiError } from 'src/boot/axios';
 import { useQuasar } from 'quasar';
 import { TccButton } from 'src/graphics/tccButton/TccButton';
 import { TextContent } from 'src/graphics/textContent/TextContent';
+import { TccKey } from 'src/graphics/tccKey/TccKey';
+import { TccHandle } from 'src/graphics/tccHandle/TccHandle';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -203,7 +205,12 @@ onMounted(() => {
     tccDrawStore.setDraftId(null);
   }
 
-  const drawAssistantsTypes = [TccButton.Type, TextContent.Type];
+  const drawAssistantsTypes = [
+    TccButton.Type,
+    TextContent.Type,
+    TccKey.Type,
+    TccHandle.Type,
+  ];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = getTccDrawApp()?.getDrawAssistant(type);
     if (drawAssistant) {

src/protos/tccGraphics.ts

@@ -6,19 +6,17 @@
 import * as dependency_1 from "./stationLayoutGraphics";
 import * as pb_1 from "google-protobuf";
 export namespace tccGraphicData {
-    export enum TccElementColor {
-        green = 0,
-        red = 1
-    }
     export class TccGraphicStorage extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             canvas?: dependency_1.graphicData.Canvas;
             tccButtons?: TccButton[];
             tccTexts?: TccText[];
+            tccKeys?: TccKey[];
+            tccHandles?: TccHandle[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -29,6 +27,12 @@ export namespace tccGraphicData {
                 if ("tccTexts" in data && data.tccTexts != undefined) {
                     this.tccTexts = data.tccTexts;
                 }
+                if ("tccKeys" in data && data.tccKeys != undefined) {
+                    this.tccKeys = data.tccKeys;
+                }
+                if ("tccHandles" in data && data.tccHandles != undefined) {
+                    this.tccHandles = data.tccHandles;
+                }
             }
         }
         get canvas() {
@@ -52,10 +56,24 @@ export namespace tccGraphicData {
         set tccTexts(value: TccText[]) {
             pb_1.Message.setRepeatedWrapperField(this, 3, value);
         }
+        get tccKeys() {
+            return pb_1.Message.getRepeatedWrapperField(this, TccKey, 4) as TccKey[];
+        }
+        set tccKeys(value: TccKey[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
+        get tccHandles() {
+            return pb_1.Message.getRepeatedWrapperField(this, TccHandle, 5) as TccHandle[];
+        }
+        set tccHandles(value: TccHandle[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 5, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
             tccButtons?: ReturnType<typeof TccButton.prototype.toObject>[];
             tccTexts?: ReturnType<typeof TccText.prototype.toObject>[];
+            tccKeys?: ReturnType<typeof TccKey.prototype.toObject>[];
+            tccHandles?: ReturnType<typeof TccHandle.prototype.toObject>[];
         }): TccGraphicStorage {
             const message = new TccGraphicStorage({});
             if (data.canvas != null) {
@@ -67,6 +85,12 @@ export namespace tccGraphicData {
             if (data.tccTexts != null) {
                 message.tccTexts = data.tccTexts.map(item => TccText.fromObject(item));
             }
+            if (data.tccKeys != null) {
+                message.tccKeys = data.tccKeys.map(item => TccKey.fromObject(item));
+            }
+            if (data.tccHandles != null) {
+                message.tccHandles = data.tccHandles.map(item => TccHandle.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -74,6 +98,8 @@ export namespace tccGraphicData {
                 canvas?: ReturnType<typeof dependency_1.graphicData.Canvas.prototype.toObject>;
                 tccButtons?: ReturnType<typeof TccButton.prototype.toObject>[];
                 tccTexts?: ReturnType<typeof TccText.prototype.toObject>[];
+                tccKeys?: ReturnType<typeof TccKey.prototype.toObject>[];
+                tccHandles?: ReturnType<typeof TccHandle.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -84,6 +110,12 @@ export namespace tccGraphicData {
             if (this.tccTexts != null) {
                 data.tccTexts = this.tccTexts.map((item: TccText) => item.toObject());
             }
+            if (this.tccKeys != null) {
+                data.tccKeys = this.tccKeys.map((item: TccKey) => item.toObject());
+            }
+            if (this.tccHandles != null) {
+                data.tccHandles = this.tccHandles.map((item: TccHandle) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -96,6 +128,10 @@ export namespace tccGraphicData {
                 writer.writeRepeatedMessage(2, this.tccButtons, (item: TccButton) => item.serialize(writer));
             if (this.tccTexts.length)
                 writer.writeRepeatedMessage(3, this.tccTexts, (item: TccText) => item.serialize(writer));
+            if (this.tccKeys.length)
+                writer.writeRepeatedMessage(4, this.tccKeys, (item: TccKey) => item.serialize(writer));
+            if (this.tccHandles.length)
+                writer.writeRepeatedMessage(5, this.tccHandles, (item: TccHandle) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -114,6 +150,12 @@ export namespace tccGraphicData {
                     case 3:
                         reader.readMessage(message.tccTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 3, TccText.deserialize(reader), TccText));
                         break;
+                    case 4:
+                        reader.readMessage(message.tccKeys, () => pb_1.Message.addToRepeatedWrapperField(message, 4, TccKey.deserialize(reader), TccKey));
+                        break;
+                    case 5:
+                        reader.readMessage(message.tccHandles, () => pb_1.Message.addToRepeatedWrapperField(message, 5, TccHandle.deserialize(reader), TccHandle));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -131,7 +173,6 @@ export namespace tccGraphicData {
         constructor(data?: any[] | {
             common?: dependency_1.graphicData.CommonInfo;
             code?: string;
-            buttonColor?: TccElementColor;
             isSelfReset?: boolean;
         }) {
             super();
@@ -143,9 +184,6 @@ export namespace tccGraphicData {
                 if ("code" in data && data.code != undefined) {
                     this.code = data.code;
                 }
-                if ("buttonColor" in data && data.buttonColor != undefined) {
-                    this.buttonColor = data.buttonColor;
-                }
                 if ("isSelfReset" in data && data.isSelfReset != undefined) {
                     this.isSelfReset = data.isSelfReset;
                 }
@@ -166,22 +204,15 @@ export namespace tccGraphicData {
         set code(value: string) {
             pb_1.Message.setField(this, 2, value);
         }
-        get buttonColor() {
-            return pb_1.Message.getFieldWithDefault(this, 3, TccElementColor.green) as TccElementColor;
-        }
-        set buttonColor(value: TccElementColor) {
-            pb_1.Message.setField(this, 3, value);
-        }
         get isSelfReset() {
-            return pb_1.Message.getFieldWithDefault(this, 4, false) as boolean;
+            return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
         }
         set isSelfReset(value: boolean) {
-            pb_1.Message.setField(this, 4, value);
+            pb_1.Message.setField(this, 3, value);
         }
         static fromObject(data: {
             common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
             code?: string;
-            buttonColor?: TccElementColor;
             isSelfReset?: boolean;
         }): TccButton {
             const message = new TccButton({});
@@ -191,9 +222,6 @@ export namespace tccGraphicData {
             if (data.code != null) {
                 message.code = data.code;
             }
-            if (data.buttonColor != null) {
-                message.buttonColor = data.buttonColor;
-            }
             if (data.isSelfReset != null) {
                 message.isSelfReset = data.isSelfReset;
             }
@@ -203,7 +231,6 @@ export namespace tccGraphicData {
             const data: {
                 common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
                 code?: string;
-                buttonColor?: TccElementColor;
                 isSelfReset?: boolean;
             } = {};
             if (this.common != null) {
@@ -212,9 +239,6 @@ export namespace tccGraphicData {
             if (this.code != null) {
                 data.code = this.code;
             }
-            if (this.buttonColor != null) {
-                data.buttonColor = this.buttonColor;
-            }
             if (this.isSelfReset != null) {
                 data.isSelfReset = this.isSelfReset;
             }
@@ -228,10 +252,8 @@ export namespace tccGraphicData {
                 writer.writeMessage(1, this.common, () => this.common.serialize(writer));
             if (this.code.length)
                 writer.writeString(2, this.code);
-            if (this.buttonColor != TccElementColor.green)
-                writer.writeEnum(3, this.buttonColor);
             if (this.isSelfReset != false)
-                writer.writeBool(4, this.isSelfReset);
+                writer.writeBool(3, this.isSelfReset);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -248,9 +270,6 @@ export namespace tccGraphicData {
                         message.code = reader.readString();
                         break;
                     case 3:
-                        message.buttonColor = reader.readEnum();
-                        break;
-                    case 4:
                         message.isSelfReset = reader.readBool();
                         break;
                     default: reader.skipField();
@@ -427,4 +446,219 @@ export namespace tccGraphicData {
             return TccText.deserialize(bytes);
         }
     }
+    export class TccKey extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.graphicData.CommonInfo;
+            code?: string;
+            type?: TccKey.TccKeyType;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("type" in data && data.type != undefined) {
+                    this.type = data.type;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.CommonInfo, 1) as dependency_1.graphicData.CommonInfo;
+        }
+        set common(value: dependency_1.graphicData.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get type() {
+            return pb_1.Message.getFieldWithDefault(this, 3, TccKey.TccKeyType.driverControllerActivationClint) as TccKey.TccKeyType;
+        }
+        set type(value: TccKey.TccKeyType) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+            code?: string;
+            type?: TccKey.TccKeyType;
+        }): TccKey {
+            const message = new TccKey({});
+            if (data.common != null) {
+                message.common = dependency_1.graphicData.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.type != null) {
+                message.type = data.type;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+                code?: string;
+                type?: TccKey.TccKeyType;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.type != null) {
+                data.type = this.type;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.type != TccKey.TccKeyType.driverControllerActivationClint)
+                writer.writeEnum(3, this.type);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): TccKey {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new TccKey();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.graphicData.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.type = reader.readEnum();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): TccKey {
+            return TccKey.deserialize(bytes);
+        }
+    }
+    export namespace TccKey {
+        export enum TccKeyType {
+            driverControllerActivationClint = 0,
+            frontAndRearDirectionalControl = 1
+        }
+    }
+    export class TccHandle extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.graphicData.CommonInfo;
+            code?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.graphicData.CommonInfo, 1) as dependency_1.graphicData.CommonInfo;
+        }
+        set common(value: dependency_1.graphicData.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+            code?: string;
+        }): TccHandle {
+            const message = new TccHandle({});
+            if (data.common != null) {
+                message.common = dependency_1.graphicData.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.graphicData.CommonInfo.prototype.toObject>;
+                code?: string;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): TccHandle {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new TccHandle();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.graphicData.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): TccHandle {
+            return TccHandle.deserialize(bytes);
+        }
+    }
 }