joylink/graphic-pixi
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

图形模板对象调整（添加数据模板和状态模板）

Browse Source
This commit is contained in:
walker 2023-06-20 11:03:15 +08:00
parent 6d905a2fbe
commit 33ac26a825
14 changed files with 365 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/examples/app/app_message/protos/graphic_states.proto Normal file
View File

@ -0,0 +1,14 @@
syntax = "proto3";
package graphicStates;
// 公共属性
message CommonState {
string code = 1;
string graphicType = 2;
}
message IscsFan {
CommonState common = 1;
int32 state = 2;
}

40
src/examples/app/graphics/GraphicDataBase.ts
View File

@ -2,12 +2,14 @@ import * as pb_1 from 'google-protobuf';
import {
ChildTransform,
GraphicData,
GraphicState,
GraphicTransform,
IChildTransform,
IGraphicTransform,
} from 'src/jlgraphic';
import { toStorageTransform } from '..';
import { graphicData } from '../protos/draw_data_storage';
import { graphicStates } from '../protos/graphic_states';
export interface ICommonInfo {
id: string;
@ -99,3 +101,41 @@ export abstract class GraphicDataBase implements GraphicData {
return pb_1.Message.equals(this._data, other._data);
}
}
export interface IProtoGraphicState extends pb_1.Message {
common: graphicStates.CommonState;
}
export abstract class GraphicStateBase implements GraphicState {
_state: IProtoGraphicState;
constructor(state: IProtoGraphicState) {
this._state = state;
}
static defaultCommonState(graphicType: string): graphicStates.CommonState {
return new graphicStates.CommonState({
code: '',
graphicType: graphicType,
});
}
getState<S extends IProtoGraphicState>(): S {
return this._state as S;
}
get code(): string {
return this._state.common.code;
}
get graphicType(): string {
return this._state.common.graphicType;
}
clone(): GraphicState {
throw new Error('Method not implemented.');
}
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);
}
}

39
src/examples/app/graphics/IscsFanInteraction.ts
View File

@ -1,7 +1,12 @@
import * as pb_1 from 'google-protobuf';
import { IIscsFanData } from 'src/graphics/iscs-fan/IscsFan';
import {
IIscsFanData,
IIscsFanState,
IscsFan,
} from 'src/graphics/iscs-fan/IscsFan';
import { graphicData } from '../protos/draw_data_storage';
import { GraphicDataBase } from './GraphicDataBase';
import { graphicStates } from '../protos/graphic_states';
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
export class IscsFanData extends GraphicDataBase implements IIscsFanData {
constructor(data?: graphicData.IscsFan) {
@ -10,7 +15,7 @@ export class IscsFanData extends GraphicDataBase implements IIscsFanData {
fan = data;
} else {
fan = new graphicData.IscsFan({
common: GraphicDataBase.defaultCommonInfo(),
common: GraphicDataBase.defaultCommonInfo(IscsFan.Type),
});
}
super(fan);
@ -36,3 +41,31 @@ export class IscsFanData extends GraphicDataBase implements IIscsFanData {
return pb_1.Message.equals(this.data, other.data);
}
}
export class IscsFanState extends GraphicStateBase implements IIscsFanState {
constructor(proto?: graphicStates.IscsFan) {
let states;
if (proto) {
states = proto;
} else {
states = new graphicStates.IscsFan({
common: GraphicStateBase.defaultCommonState(IscsFan.Type),
});
}
super(states);
}
get states(): graphicStates.IscsFan {
return this.getState<graphicStates.IscsFan>();
}
get state(): number {
return this.states.state;
}
set state(v: number) {
this.states.state = v;
}
clone(): IscsFanState {
return new IscsFanState(this.states.cloneMessage());
}
}

27
src/examples/app/index.ts
View File

@ -1,8 +1,8 @@
import { fromUint8Array, toUint8Array } from 'js-base64';
import { IPointData, Point } from 'pixi.js';
import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
import { IscsFan, IscsFanTemplate } from 'src/graphics/iscs-fan/IscsFan';
import { IscsFanDraw } from 'src/graphics/iscs-fan/IscsFanDrawAssistant';
import { Link } from 'src/graphics/link/Link';
import { Link, LinkTemplate } from 'src/graphics/link/Link';
import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant';
import { Rect } from 'src/graphics/rect/Rect';
import { RectDraw } from 'src/graphics/rect/RectDrawAssistant';
@ -11,7 +11,7 @@ import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
import { Station } from 'src/graphics/station/Station';
import { Train } from 'src/graphics/train/Train';
import { StationDraw } from 'src/graphics/station/StationDrawAssistant';
import { Signal } from 'src/graphics/signal/Signal';
import { Signal, SignalTemplate } from 'src/graphics/signal/Signal';
import { SignalDraw } from 'src/graphics/signal/SignalDrawAssistant';
import { TrainDraw } from 'src/graphics/train/TrainDrawAssistant';
import {
@ -24,7 +24,7 @@ import {
} from 'src/jlgraphic';
import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jlgraphic/ui/Menu';
import { IscsFanData } from './graphics/IscsFanInteraction';
import { IscsFanData, IscsFanState } from './graphics/IscsFanInteraction';
import { LinkData } from './graphics/LinkInteraction';
import { RectData } from './graphics/RectInteraction';
import { PlatformData } from './graphics/PlatformInteraction';
@ -103,15 +103,12 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
const app = drawApp;
app.setOptions({
drawAssistants: [
new LinkDraw(app, () => {
return new LinkData();
}),
new IscsFanDraw(app, () => {
return new IscsFanData();
}),
new SignalDraw(app, () => {
return new SignalData();
}),
new LinkDraw(app, new LinkTemplate(new LinkData())),
new IscsFanDraw(
app,
new IscsFanTemplate(new IscsFanData(), new IscsFanState())
),
new SignalDraw(app, new SignalTemplate(new SignalData())),
new TrainDraw(app, () => {
return new TrainData();
}),
@ -197,8 +194,8 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
value: '1',
onPress: () => {
app.queryStore.queryByType<IscsFan>(IscsFan.Type).forEach((fan) => {
fan.__state = fan.__state + 1;
fan.__state = fan.__state % 5;
fan.states.state = fan.states.state + 1;
fan.states.state = fan.states.state % 5;
fan.repaint();
});
},

191
src/examples/app/protos/graphic_states.ts Normal file
View File

@ -0,0 +1,191 @@
/**
* Generated by the protoc-gen-ts. DO NOT EDIT!
* compiler version: 4.22.2
* source: graphic_states.proto
* git: https://github.com/thesayyn/protoc-gen-ts */
import * as pb_1 from "google-protobuf";
export namespace graphicStates {
export class CommonState extends pb_1.Message {
#one_of_decls: number[][] = [];
constructor(data?: any[] | {
code?: string;
graphicType?: 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 ("code" in data && data.code != undefined) {
this.code = data.code;
}
if ("graphicType" in data && data.graphicType != undefined) {
this.graphicType = data.graphicType;
}
}
}
get code() {
return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
}
set code(value: string) {
pb_1.Message.setField(this, 1, value);
}
get graphicType() {
return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
}
set graphicType(value: string) {
pb_1.Message.setField(this, 2, value);
}
static fromObject(data: {
code?: string;
graphicType?: string;
}): CommonState {
const message = new CommonState({});
if (data.code != null) {
message.code = data.code;
}
if (data.graphicType != null) {
message.graphicType = data.graphicType;
}
return message;
}
toObject() {
const data: {
code?: string;
graphicType?: string;
} = {};
if (this.code != null) {
data.code = this.code;
}
if (this.graphicType != null) {
data.graphicType = this.graphicType;
}
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.code.length)
writer.writeString(1, this.code);
if (this.graphicType.length)
writer.writeString(2, this.graphicType);
if (!w)
return writer.getResultBuffer();
}
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): CommonState {
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new CommonState();
while (reader.nextField()) {
if (reader.isEndGroup())
break;
switch (reader.getFieldNumber()) {
case 1:
message.code = reader.readString();
break;
case 2:
message.graphicType = reader.readString();
break;
default: reader.skipField();
}
}
return message;
}
serializeBinary(): Uint8Array {
return this.serialize();
}
static deserializeBinary(bytes: Uint8Array): CommonState {
return CommonState.deserialize(bytes);
}
}
export class IscsFan extends pb_1.Message {
#one_of_decls: number[][] = [];
constructor(data?: any[] | {
common?: CommonState;
state?: number;
}) {
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 ("state" in data && data.state != undefined) {
this.state = data.state;
}
}
}
get common() {
return pb_1.Message.getWrapperField(this, CommonState, 1) as CommonState;
}
set common(value: CommonState) {
pb_1.Message.setWrapperField(this, 1, value);
}
get has_common() {
return pb_1.Message.getField(this, 1) != null;
}
get state() {
return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
}
set state(value: number) {
pb_1.Message.setField(this, 2, value);
}
static fromObject(data: {
common?: ReturnType<typeof CommonState.prototype.toObject>;
state?: number;
}): IscsFan {
const message = new IscsFan({});
if (data.common != null) {
message.common = CommonState.fromObject(data.common);
}
if (data.state != null) {
message.state = data.state;
}
return message;
}
toObject() {
const data: {
common?: ReturnType<typeof CommonState.prototype.toObject>;
state?: number;
} = {};
if (this.common != null) {
data.common = this.common.toObject();
}
if (this.state != null) {
data.state = this.state;
}
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.state != 0)
writer.writeInt32(2, this.state);
if (!w)
return writer.getResultBuffer();
}
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IscsFan {
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IscsFan();
while (reader.nextField()) {
if (reader.isEndGroup())
break;
switch (reader.getFieldNumber()) {
case 1:
reader.readMessage(message.common, () => message.common = CommonState.deserialize(reader));
break;
case 2:
message.state = reader.readInt32();
break;
default: reader.skipField();
}
}
return message;
}
serializeBinary(): Uint8Array {
return this.serialize();
}
static deserializeBinary(bytes: Uint8Array): IscsFan {
return IscsFan.deserialize(bytes);
}
}
}

32
src/graphics/iscs-fan/IscsFan.ts
View File

@ -1,6 +1,7 @@
import {
GraphicAnimation,
GraphicData,
GraphicState,
JlGraphic,
JlGraphicTemplate,
} from 'src/jlgraphic';
@ -23,12 +24,16 @@ export interface IIscsFanData extends GraphicData {
set code(v: string);
}
export interface IIscsFanState extends GraphicState {
get state(): number;
set state(v: number);
}
export class IscsFan extends JlGraphic {
static Type = 'IscsFan';
_border: Sprite;
_fan: Sprite;
fanTextures: FanTextures;
__state = 0;
constructor(fanTextures: FanTextures) {
super(IscsFan.Type);
@ -42,28 +47,31 @@ export class IscsFan extends JlGraphic {
this.addChild(this._border);
this.addChild(this._fan);
}
get states(): IIscsFanState {
return this.getStates<IIscsFanState>();
}
doRepaint(): void {
if (this.__state === 0) {
if (this.states.state === 0) {
// 停止
this.stopFanRun();
this._fan.rotation = 0;
this._fan.texture = this.fanTextures.gray;
} else if (this.__state === 1) {
} else if (this.states.state === 1) {
// 正常运行
this._fan.texture = this.fanTextures.green;
// 动画
this.initFanRun();
} else if (this.__state === 2) {
} else if (this.states.state === 2) {
// 报警运行
this._fan.texture = this.fanTextures.yellow;
// 动画
this.initFanRun();
} else if (this.__state === 3) {
} else if (this.states.state === 3) {
// 故障
this.stopFanRun();
this._fan.rotation = 0;
this._fan.texture = this.fanTextures.red;
} else if (this.__state === 4) {
} else if (this.states.state === 4) {
// 通信故障
// 停止
this.stopFanRun();
@ -99,12 +107,18 @@ export class IscsFan extends JlGraphic {
export class IscsFanTemplate extends JlGraphicTemplate<IscsFan> {
fanTextures?: FanTextures;
constructor() {
super(IscsFan.Type);
constructor(dataTemplate: IIscsFanData, stateTemplate: IIscsFanState) {
super(IscsFan.Type, {
dataTemplate,
stateTemplate,
});
}
new(): IscsFan {
if (this.fanTextures) {
return new IscsFan(this.fanTextures);
const g = new IscsFan(this.fanTextures);
g.loadData(this.datas);
g.loadState(this.states);
return g;
}
throw new Error('资源未加载/加载失败');
}

5
src/graphics/iscs-fan/IscsFanDrawAssistant.ts
View File

@ -16,9 +16,8 @@ export class IscsFanDraw extends GraphicDrawAssistant<
> {
_iscsFan: IscsFan | null = null;
constructor(app: JlDrawApp, createData: () => IIscsFanData) {
const template = new IscsFanTemplate();
super(app, template, createData, IscsFan.Type, '风机');
constructor(app: JlDrawApp, template: IscsFanTemplate) {
super(app, template, IscsFan.Type, '风机');
IscsFanInteraction.init(app);
}

6
src/graphics/link/Link.ts
View File

@ -89,8 +89,10 @@ export class LinkTemplate extends JlGraphicTemplate<Link> {
lineWidth: number;
lineColor: string;
segmentsCount: number;
constructor() {
super(Link.Type);
constructor(dataTemplate: ILinkData) {
super(Link.Type, {
dataTemplate,
});
this.lineWidth = 2;
this.lineColor = '#000000';
this.curve = false;

4
src/graphics/link/LinkDrawAssistant.ts
View File

@ -68,8 +68,8 @@ export class LinkDraw extends GraphicDrawAssistant<LinkTemplate, ILinkData> {
},
});
constructor(app: JlDrawApp, createData: () => ILinkData) {
super(app, new LinkTemplate(), createData, Link.Type, '轨道Link');
constructor(app: JlDrawApp, template: LinkTemplate) {
super(app, template, Link.Type, '轨道Link');
this.container.addChild(this.graphic);
this.graphicTemplate.curve = true;

6
src/graphics/signal/Signal.ts
View File

@ -91,8 +91,10 @@ export class Signal extends JlGraphic {
}
export class SignalTemplate extends JlGraphicTemplate<Signal> {
constructor() {
super(Signal.Type);
constructor(dataTemplate: ISignalData) {
super(Signal.Type, {
dataTemplate,
});
}
new(): Signal {
return new Signal();

7
src/graphics/signal/SignalDrawAssistant.ts
View File

@ -17,11 +17,10 @@ export class SignalDraw extends GraphicDrawAssistant<
> {
_signal: Signal | null = null;
constructor(app: JlDrawApp, createData: () => ISignalData) {
constructor(app: JlDrawApp, template: SignalTemplate) {
super(
app,
new SignalTemplate(),
createData,
template,
'svguse: ../../drawIcon.svg#icon-signal',
'信号机Signal'
);
@ -32,7 +31,7 @@ export class SignalDraw extends GraphicDrawAssistant<
public get signal(): Signal {
if (!this._signal) {
this._signal = this.graphicTemplate.new();
this.signal.loadData(this.createGraphicData());
this.signal.loadData(this.graphicTemplate.datas);
this.container.addChild(this.signal);
}
return this._signal;

5
src/jlgraphic/app/JlDrawApp.ts
View File

@ -45,7 +45,6 @@ export abstract class GraphicDrawAssistant<
icon: string; // 界面显示的图标
container: Container = new Container();
graphicTemplate: GT;
createGraphicData: () => GD;
escListener: KeyListener = new KeyListener({
value: 'Escape',
@ -61,7 +60,6 @@ export abstract class GraphicDrawAssistant<
constructor(
graphicApp: JlDrawApp,
graphicTemplate: GT,
createGraphicData: () => GD,
icon: string,
description: string
) {
@ -69,7 +67,6 @@ export abstract class GraphicDrawAssistant<
this.app = graphicApp;
this.type = graphicTemplate.type;
this.graphicTemplate = graphicTemplate;
this.createGraphicData = createGraphicData;
this.icon = icon;
this.description = description;
this.app.registerGraphicTemplates(this.graphicTemplate);
@ -163,7 +160,7 @@ export abstract class GraphicDrawAssistant<
* 创建并添加到图形App
*/
createAndStore(finish: boolean): JlGraphic | null {
const data = this.createGraphicData();
const data = this.graphicTemplate.datas as GD;
data.id = this.nextId();
data.graphicType = this.graphicTemplate.type;
if (!this.prepareData(data)) {

34
src/jlgraphic/core/JlGraphic.ts
View File

@ -923,15 +923,47 @@ export abstract class JlGraphic extends Container {
}
}
export type CreateData = () => GraphicData;
export type CreateState = () => GraphicState;
export interface IGraphicTemplateOptions {
dataTemplate?: GraphicData;
stateTemplate?: GraphicState;
}
/**
* 图形对象模板
*/
export abstract class JlGraphicTemplate<G extends JlGraphic> {
readonly type: string;
options: IGraphicTemplateOptions;
constructor(type: string) {
constructor(type: string, options: IGraphicTemplateOptions) {
this.type = type;
this.options = options;
}
get datas(): GraphicData {
if (this.options.dataTemplate) {
return this.options.dataTemplate.clone();
}
throw new Error(`type=${this.type}的图形模板没有数据模板`);
}
get states(): GraphicState {
if (this.options.stateTemplate) {
return this.options.stateTemplate.clone();
}
throw new Error(`type=${this.type}的图形模板没有状态模板`);
}
// getDataCreator<T extends CreateData>(): T {
// return this.options.dataCreator as T;
// }
// getStateCreator<T extends CreateState>(): T {
// return this.options.stateCreator as T;
// }
/**
* 初始化一个新的图形对象
*/

1
src/jlgraphic/plugins/GraphicEditPlugin.ts
View File

@ -10,7 +10,6 @@ import {
import { JlGraphic } from '../core';
import { DraggablePoint } from '../graphic';
import {
assertBezierPoints,
calculateDistanceFromPointToLine,
calculateFootPointFromPointToLine,
calculateLineSegmentingPoint,