This commit is contained in:
fan 2023-07-13 16:15:04 +08:00
commit c4e0856dc5
7 changed files with 63 additions and 18 deletions

View File

@ -58,19 +58,13 @@ const canvas = reactive({
});
onMounted(() => {
console.log('画布属性表单mounted');
const jc = drawStore.getJlCanvas();
canvas.width = jc.properties.width;
canvas.height = jc.properties.height;
canvas.backgroundColor = jc.properties.backgroundColor;
});
onUnmounted(() => {
console.log('画布属性表单unmounted');
});
function onUpdate() {
console.log('画布属性更新');
const app = drawStore.getDrawApp();
app.updateCanvasAndRecord({
...canvas,

View File

@ -32,6 +32,7 @@ import { StationData } from './graphics/StationInteraction';
import { SignalData } from './graphics/SignalInteraction';
import { TrainData } from './graphics/TrainInteraction';
import { graphicData } from './protos/draw_data_storage';
import { Notify } from 'quasar';
export function fromStoragePoint(p: graphicData.Point): Point {
return new Point(p.x, p.y);
@ -113,6 +114,17 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
return new TrainData();
}),
],
// isSupportDeletion: (g): boolean => {
// if (g.type === Signal.Type) {
// Notify.create({
// type: 'warning',
// message: '信号机不支持删除',
// timeout: 1000,
// });
// return false;
// }
// return true;
// },
});
// 画布右键菜单

View File

@ -456,13 +456,13 @@ export class JlDrawApp extends GraphicApp {
*
*/
deleteSelectedGraphics() {
const deletes = this.selectedGraphics.slice(
0,
this.selectedGraphics.length
);
this.deleteGraphics(...this.selectedGraphics);
const deletes = this.deleteGraphics(...this.selectedGraphics);
if (deletes.length > 0) {
// 删除图形对象操作记录
this.opRecord.record(new GraphicDeleteOperation(this, deletes));
} else {
console.debug('没有删除元素,不记录');
}
}
updateCanvasAndRecord(data: ICanvasProperties) {

View File

@ -320,6 +320,11 @@ export interface IGraphicAppConfig {
* true
*/
cullable?: boolean;
/**
*
*/
isSupportDeletion?: (g: JlGraphic) => boolean;
}
/**
@ -528,7 +533,10 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
*/
handleGraphicStates(graphicStates: GraphicState[]) {
graphicStates.forEach((state) => {
const list = this.queryStore.queryByIdOrCode(state.code);
const list = this.queryStore.queryByIdOrCodeAndType(
state.code,
state.graphicType
);
if (list.length == 0) {
const template = this.getGraphicTemplatesByType(state.graphicType);
const g = template.new();
@ -726,8 +734,19 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
*
* @param graphics
*/
deleteGraphics(...graphics: JlGraphic[]) {
graphics.forEach((g) => this.doDeleteGraphics(g));
deleteGraphics(...graphics: JlGraphic[]): JlGraphic[] {
const dels = graphics.filter((g) => {
if (
this._options?.isSupportDeletion == undefined ||
this._options.isSupportDeletion(g)
) {
this.doDeleteGraphics(g);
return true;
}
console.debug(`type=${g.type},id=${g.id}的图形不支持删除`);
return false;
});
return dels;
}
/**

View File

@ -37,6 +37,12 @@ export interface GraphicQueryStore {
* @param v
*/
queryByIdOrCode(v: string): JlGraphic[];
/**
* id或code及类型查询图形
* @param v
* @param type
*/
queryByIdOrCodeAndType(v: string, type: string): JlGraphic[];
/**
* code和类型获取图形
* @param code
@ -69,6 +75,7 @@ export class GraphicStore implements GraphicQueryStore {
this.store = new Map<string, JlGraphic>();
this.relationManage = new RelationManage(app);
}
/**
*
*/
@ -125,6 +132,15 @@ export class GraphicStore implements GraphicQueryStore {
});
return list;
}
queryByIdOrCodeAndType(s: string, type: string): JlGraphic[] {
const list: JlGraphic[] = [];
this.store.forEach((g) => {
if (g.isIdOrCode(s) && g.type === type) {
list.push(g);
}
});
return list;
}
queryByCodeAndType<T extends JlGraphic>(
code: string,
type: string

View File

@ -32,13 +32,13 @@ export abstract class GraphicEditPlugin<
this.sortableChildren = true;
this.graphic.on('transformstart', this.hideAll, this);
this.graphic.on('transformend', this.showAll, this);
this.graphic.on('repaint', this.showAll, this);
this.graphic.on('repaint', this.updateEditedPointsPosition, this);
}
destroy(options?: boolean | IDestroyOptions | undefined): void {
this.graphic.off('transformstart', this.hideAll, this);
this.graphic.off('transformend', this.showAll, this);
this.graphic.off('repaint', this.showAll, this);
this.graphic.off('repaint', this.updateEditedPointsPosition, this);
super.destroy(options);
}

View File

@ -120,6 +120,7 @@
</template>
<script setup lang="ts">
import { Base64 } from 'js-base64';
import { useQuasar } from 'quasar';
import DrawProperties from 'src/components/draw-app/DrawProperties.vue';
import { getDrawApp, loadDrawDatas } from 'src/examples/app';
@ -157,6 +158,9 @@ function toggleFullscreen(e: unknown): void {
onMounted(() => {
console.log('绘制应用layout mounted');
const basic = Base64.decode('Zm9vOmJhcg==');
console.log(basic);
const dom = document.getElementById('draw-app-container');
if (dom) {
const drawApp = drawStore.initDrawApp(dom);