|
@@ -28,7 +28,7 @@ const rotateView = (draw: Draw) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-export const getImage = (draw: Draw, format: string) =>
|
|
|
+export const getImage = (draw: Draw, format: string) =>
|
|
|
draw.stage!.toBlob({
|
|
|
pixelRatio: 2,
|
|
|
mimeType: format,
|
|
@@ -36,7 +36,6 @@ export const getImage = (draw: Draw, format: string) =>
|
|
|
}) as Promise<Blob | null>;
|
|
|
|
|
|
export const getHeaderActions = (draw: Draw) => {
|
|
|
-
|
|
|
return {
|
|
|
undo: reactive({
|
|
|
handler: () => draw.history.undo(),
|
|
@@ -52,9 +51,10 @@ export const getHeaderActions = (draw: Draw) => {
|
|
|
}),
|
|
|
clear: reactive({
|
|
|
handler: () => {
|
|
|
- draw.store.setConfig({ compass: { ...draw.store.config.compass, rotation: 0 } })
|
|
|
- draw.store.clear()
|
|
|
-
|
|
|
+ draw.store.setConfig({
|
|
|
+ compass: { ...draw.store.config.compass, rotation: 0 },
|
|
|
+ });
|
|
|
+ draw.store.clear();
|
|
|
},
|
|
|
disabled: computed(() => draw.drawing),
|
|
|
text: "清空",
|
|
@@ -73,25 +73,25 @@ export const getHeaderActions = (draw: Draw) => {
|
|
|
toggleShow: reactive({
|
|
|
handler: () => {
|
|
|
draw.history.onceTrack(() => {
|
|
|
- const tItems = draw.store.typeItems
|
|
|
- for (const key in tItems) {
|
|
|
- const items = tItems[key as ShapeType]
|
|
|
- items?.forEach(item => {
|
|
|
- draw.store.setItem(key as ShapeType, {value: { hide: false }, id: item.id})
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ const images = draw.store
|
|
|
+ .getTypeItems("image")
|
|
|
+ .filter((item) => item.key === "kankan-floor-cover");
|
|
|
+ const hide = !images.some((image) => image.hide);
|
|
|
+ images.forEach((image) => {
|
|
|
+ draw.store.setItem("image", {
|
|
|
+ value: { ...image, hide },
|
|
|
+ id: image.id,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- disabled: computed(() => {
|
|
|
- const layer = draw.store.$state.data.layers[draw.store.currentLayer]
|
|
|
- for (const [_, vals] of Object.entries(layer)) {
|
|
|
- if (vals.some(val => val.hide)) {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return true
|
|
|
+ text: computed(() => {
|
|
|
+ const images = draw.store
|
|
|
+ .getTypeItems("image")
|
|
|
+ .filter((item) => item.key === "kankan-floor-cover");
|
|
|
+ const hide = images.some((image) => image.hide);
|
|
|
+ return hide ? '显示底图' : '隐藏底图'
|
|
|
}),
|
|
|
- text: "显示底图",
|
|
|
icon: "a-visible",
|
|
|
}),
|
|
|
expose: reactive({
|
|
@@ -101,53 +101,53 @@ export const getHeaderActions = (draw: Draw) => {
|
|
|
icon: "download",
|
|
|
children: [
|
|
|
{
|
|
|
- handler: async (filename = 'canvas') => {
|
|
|
+ handler: async (filename = "canvas") => {
|
|
|
draw.enterTemp(async () => {
|
|
|
- const oldShowGrid = draw.config.showGrid
|
|
|
- draw.config.showGrid = false
|
|
|
- const pop = draw.mode.push(Mode.readonly)
|
|
|
- await nextTick()
|
|
|
- const blob = await getImage(draw, 'image/jpeg')
|
|
|
+ const oldShowGrid = draw.config.showGrid;
|
|
|
+ draw.config.showGrid = false;
|
|
|
+ const pop = draw.mode.push(Mode.readonly);
|
|
|
+ await nextTick();
|
|
|
+ const blob = await getImage(draw, "image/jpeg");
|
|
|
if (!blob) {
|
|
|
- throw '截图失败'
|
|
|
+ throw "截图失败";
|
|
|
}
|
|
|
saveAs(blob, `${filename}.jpg`);
|
|
|
- pop()
|
|
|
- draw.config.showGrid = oldShowGrid
|
|
|
- })
|
|
|
+ pop();
|
|
|
+ draw.config.showGrid = oldShowGrid;
|
|
|
+ });
|
|
|
},
|
|
|
text: "JPG",
|
|
|
icon: "a-visible",
|
|
|
},
|
|
|
{
|
|
|
- handler: (filename = 'canvas') => {
|
|
|
+ handler: (filename = "canvas") => {
|
|
|
draw.enterTemp(async () => {
|
|
|
- const oldBack = draw.config.back && {...draw.config.back}
|
|
|
- const oldShowGrid = draw.config.showGrid
|
|
|
- const pop = draw.mode.push(Mode.readonly)
|
|
|
- draw.config.showGrid = false
|
|
|
- draw.config.back = undefined
|
|
|
- await nextTick()
|
|
|
- const blob = await getImage(draw, 'image/png')
|
|
|
+ const oldBack = draw.config.back && { ...draw.config.back };
|
|
|
+ const oldShowGrid = draw.config.showGrid;
|
|
|
+ const pop = draw.mode.push(Mode.readonly);
|
|
|
+ draw.config.showGrid = false;
|
|
|
+ draw.config.back = undefined;
|
|
|
+ await nextTick();
|
|
|
+ const blob = await getImage(draw, "image/png");
|
|
|
if (!blob) {
|
|
|
- throw '截图失败'
|
|
|
+ throw "截图失败";
|
|
|
}
|
|
|
await saveAs(blob, `${filename}.png`);
|
|
|
- pop()
|
|
|
- draw.config.back = oldBack
|
|
|
- draw.config.showGrid = oldShowGrid
|
|
|
+ pop();
|
|
|
+ draw.config.back = oldBack;
|
|
|
+ draw.config.showGrid = oldShowGrid;
|
|
|
ElMessage.success("导出成功");
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
text: "PNG",
|
|
|
icon: "a-visible",
|
|
|
},
|
|
|
{
|
|
|
- handler: async (filename = 'canvas') => {
|
|
|
+ handler: async (filename = "canvas") => {
|
|
|
draw.enterTemp(async () => {
|
|
|
- const dxf = await draw.getDXF()
|
|
|
+ const dxf = await draw.getDXF();
|
|
|
saveAs(dxf, `${filename}.zip`);
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
text: "DXF",
|
|
|
icon: "a-visible",
|