Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi
This commit is contained in:
commit
c4e0856dc5
@ -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,
|
||||
|
@ -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;
|
||||
// },
|
||||
});
|
||||
|
||||
// 画布右键菜单
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user