Skip to content

Commit

Permalink
Merge pull request #500 from CodingFactory-Repos/develop-G6
Browse files Browse the repository at this point in the history
Download the pdf
  • Loading branch information
Loule95450 committed Jun 16, 2023
2 parents f73aab5 + f2fa6f8 commit 94fae24
Show file tree
Hide file tree
Showing 16 changed files with 177 additions and 17 deletions.
12 changes: 10 additions & 2 deletions front-end/src/components/agility/UI/DefaultSelectionBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<div class="list-group-item flex flex-col gap-2 relative p-3 pl-[2.75rem] hover:bg-dark-tertiary cursor-pointer">
<span class="absolute top-2 left-[1rem] text-white font-bold text-lg">{{ element.order }}</span>
<div class="border-2 border-dark-highlight rounded-lg overflow-hidden w-full h-36">
<img :src="element.base64" class="w-full h-full object-fit">
<img :src="element.base64" class="w-full h-full object-fit" :alt="`image_frame_${element.id}`">
</div>
<div class="flex items-center justify-center">
<span class="text-xs text-white font-bold bg-[#85397c] px-3 py-0.5 rounded-lg">
Expand All @@ -51,6 +51,7 @@
text-style="text-black dark:text-white font-bold text-sm"
background="bg-light-secondary hover:bg-light-tertiary dark:bg-dark-tertiary"
class="w-32 min-w-[8rem]"
@click="generatePdf()"
/>
</div>
</div>
Expand All @@ -60,7 +61,6 @@

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import SelectionBox from '@/components/common/uix/SelectionBox.vue';
import IconButton from '@/components/common/buttons/Icon.vue';
import Draggable from 'vuedraggable';
Expand All @@ -71,6 +71,10 @@ import SvgSideBar from '@/components/common/svg/SideBar.vue';
import SvgShrink from '@/components/common/svg/Shrink.vue';
import { useProjectStore } from '@/store/modules/project.store';
import DefaultButton from '@/components/common/buttons/Default.vue';
import * as _ from 'pdfmake/build/vfs_fonts.js';
import { exportToPdf} from '@/lib/pixi-tools-v2/utils/generatePdf';
const fonts = globalThis.pdfMake.vfs ?? _.pdfMake.vfs;
const projectStore = useProjectStore();
Expand Down Expand Up @@ -147,4 +151,8 @@ const decreaseZoom = () => {
projectStore.decreaseZoom();
}
const generatePdf = () => {
exportToPdf(childImages.value);
};
</script>
11 changes: 9 additions & 2 deletions front-end/src/components/agility/UI/MiroSelectionBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,12 @@
:style="drawerOpen ? 'width: 550px;' : 'width: 0;' "
>
<div class="h-full w-full overflow-y-scroll pb-16">
{{ childImages.length }}
<Draggable :list="childImages" itemKey="id" class="list-group" @start="dragging = true" @end="dragging = false" @change="handleListChange">
<template #item="{ element }">
<div class="list-group-item flex flex-col gap-2 relative p-3 pl-[2.75rem] hover:bg-dark-tertiary cursor-pointer">
<span class="absolute top-2 left-[1rem] text-white font-bold text-lg">{{ element.order }}</span>
<div class="border-2 border-dark-highlight rounded-lg overflow-hidden w-full h-36">
<img :src="element.base64" class="w-full h-full object-fit">
<img :src="element.base64" class="w-full h-full object-fit" :alt="`image_frame_${element.id}`">
</div>
<div class="flex items-center justify-center">
<span class="text-xs text-white font-bold bg-[#85397c] px-3 py-0.5 rounded-lg">
Expand All @@ -135,6 +134,7 @@
text-style="text-black dark:text-white font-bold text-sm"
background="bg-light-secondary hover:bg-light-tertiary dark:bg-dark-tertiary"
class="w-32 min-w-[8rem]"
@click="generatePdf()"
/>
</div>
</div>
Expand Down Expand Up @@ -187,6 +187,9 @@ import SvgTriangle from '@/components/common/svg/Triangle.vue';
import SvgSideBar from '@/components/common/svg/SideBar.vue';
import SvgShrink from '@/components/common/svg/Shrink.vue';
import { useAgilityStore } from '@/store/modules/agility.store';
import * as _ from 'pdfmake/build/vfs_fonts.js';
import { exportToPdf} from '@/lib/pixi-tools-v2/utils/generatePdf';
const projectStore = useProjectStore();
const agilityStore = useAgilityStore();
Expand Down Expand Up @@ -272,6 +275,10 @@ const decreaseZoom = () => {
projectStore.decreaseZoom();
}
const generatePdf = () => {
exportToPdf(childImages.value);
};
const setDefaultMode = () => {
projectStore.default = true;
projectStore.deferredGeometry = null;
Expand Down
4 changes: 3 additions & 1 deletion front-end/src/lib/pixi-tools-v2/blueprint/elevatorPitch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FramedContainer } from '../class/framedContainer';
import { lowestNumberFinder } from '../utils/numberFinder';
import { ViewportUI } from '../viewportUI';
import { SerializedContainer } from '../types/pixi-serialize';
import { PixiEventMode } from '../types/pixi-enums';
import { PixiEventMode, TypeBlueprint } from '../types/pixi-enums';

export const elavatorPitch = (
viewport: ViewportUI,
Expand Down Expand Up @@ -62,6 +62,8 @@ export const elavatorPitch = (
isAttachedToFrame: false,
frameNumber: frameNumber,
disabled: false,
isBlueprint: true,
typeBlueprint: TypeBlueprint.ELEVATOR_PITCH,
},
childs: [
{
Expand Down
4 changes: 3 additions & 1 deletion front-end/src/lib/pixi-tools-v2/blueprint/empathyMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FramedContainer } from '../class/framedContainer';
import { lowestNumberFinder } from '../utils/numberFinder';
import { ViewportUI } from '../viewportUI';
import { SerializedContainer } from '../types/pixi-serialize';
import { PixiEventMode } from '../types/pixi-enums';
import { PixiEventMode, TypeBlueprint } from '../types/pixi-enums';

export const empathyMap = (
viewport: ViewportUI,
Expand Down Expand Up @@ -152,6 +152,8 @@ export const empathyMap = (
isAttachedToFrame: false,
frameNumber: frameNumber,
disabled: false,
isBlueprint: true,
typeBlueprint: TypeBlueprint.EMPATHY_MAP,
},
childs: [
{
Expand Down
4 changes: 3 additions & 1 deletion front-end/src/lib/pixi-tools-v2/blueprint/impactMapping.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FramedContainer } from '../class/framedContainer';
import { lowestNumberFinder } from '../utils/numberFinder';
import { ViewportUI } from '../viewportUI';
import { SerializedContainer } from '../types/pixi-serialize';
import { PixiEventMode } from '../types/pixi-enums';
import { PixiEventMode, TypeBlueprint } from '../types/pixi-enums';

export const impactMapping = (
viewport: ViewportUI,
Expand Down Expand Up @@ -85,6 +85,8 @@ export const impactMapping = (
isAttachedToFrame: false,
frameNumber: frameNumber,
disabled: false,
isBlueprint: true,
typeBlueprint: TypeBlueprint.IMPACT_MAPPING,
},
childs: [
{
Expand Down
5 changes: 4 additions & 1 deletion front-end/src/lib/pixi-tools-v2/blueprint/personas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { FramedContainer } from '../class/framedContainer';
import { lowestNumberFinder } from '../utils/numberFinder';
import { ViewportUI } from '../viewportUI';
import { SerializedContainer } from '../types/pixi-serialize';
import { PixiEventMode } from '../types/pixi-enums';

import { PixiEventMode, TypeBlueprint } from '../types/pixi-enums';
import { DeepPartial } from '@/interfaces/advanced-types.interface';

export interface PersonaBuilder {
Expand Down Expand Up @@ -119,6 +120,8 @@ export const personas = (
isAttachedToFrame: false,
frameNumber: frameNumber,
disabled: false,
isBlueprint: true,
typeBlueprint: TypeBlueprint.PERSONA,
},
childs: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FramedContainer } from '../class/framedContainer';
import { lowestNumberFinder } from '../utils/numberFinder';
import { ViewportUI } from '../viewportUI';
import { SerializedContainer } from '../types/pixi-serialize';
import { PixiEventMode } from '../types/pixi-enums';
import { PixiEventMode, TypeBlueprint } from '../types/pixi-enums';

export const pruneTheProjectTree = (
viewport: ViewportUI,
Expand Down Expand Up @@ -79,6 +79,8 @@ export const pruneTheProjectTree = (
isAttachedToFrame: false,
frameNumber: frameNumber,
disabled: false,
isBlueprint: true,
typeBlueprint: TypeBlueprint.PRUNE_THE_PROJECT_TREE,
},
childs: [
/*******************************
Expand Down
6 changes: 6 additions & 0 deletions front-end/src/lib/pixi-tools-v2/class/framedContainer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export class FramedContainer extends PluginContainer {
public tabNumberContext: number;
public isAttachedToFrame: boolean;
public frameNumber: number;
public isBlueprint: boolean;
public typeBlueprint: number;

static registerContainer(
viewport: ViewportUI,
Expand Down Expand Up @@ -76,6 +78,8 @@ export class FramedContainer extends PluginContainer {
this.tabNumberContext = properties.tabNumberContext;
this.isAttachedToFrame = properties.isAttachedToFrame;
this.frameNumber = properties.frameNumber;
this.isBlueprint = properties.isBlueprint;
this.typeBlueprint = properties.typeBlueprint ?? 0;
this.absMinX = anchors.absMinX;
this.absMinY = anchors.absMinY;
this.absMaxX = anchors.absMaxX;
Expand Down Expand Up @@ -288,6 +292,8 @@ export class FramedContainer extends PluginContainer {
isAttachedToFrame: this.isAttachedToFrame,
frameNumber: this.frameNumber,
disabled: this.disabled,
isBlueprint: this.isBlueprint,
typeBlueprint: this.typeBlueprint,
},
childs: genericContainerSerialized,
};
Expand Down
2 changes: 2 additions & 0 deletions front-end/src/lib/pixi-tools-v2/class/normalyzer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@ export class Normalizer {
isAttachedToFrame: false,
tabNumberContext: tabContext ?? -1,
disabled: false,
isBlueprint: false,
typeBlueprint: 0,
};
}

Expand Down
17 changes: 17 additions & 0 deletions front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,23 @@ export enum PixiEventMode {
DYNAMIC = 'dynamic',
}

export enum TypeBlueprint {
EMPATHY_MAP = 1,
PERSONA = 2,
IMPACT_MAPPING = 3,
PRUNE_THE_PROJECT_TREE = 4,
ELEVATOR_PITCH = 5,
}

export const TypeBlueprintText = {
"0": "Null",
"1": "Empathy Map",
"2": "Persona",
"3": "Impact mapping",
"4": "Prune the project tree",
"5": "Elevator pitch",
} as const;

export enum BlueprintKey {
DEFAULT = 0,
IMPACT_MAPPING = 1,
Expand Down
2 changes: 2 additions & 0 deletions front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ export interface SerializedContainerProperties
tabNumberContext: number;
frameNumber?: number;
disabled: boolean;
isBlueprint?: boolean;
typeBlueprint?: number;
}

export interface SerializedGraphicProperties extends SerializedProperties, ElementColorimetry, SerializedTextGraphic {
Expand Down

Large diffs are not rendered by default.

Large diffs are not rendered by default.

105 changes: 105 additions & 0 deletions front-end/src/lib/pixi-tools-v2/utils/generatePdf.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { createPdf } from 'pdfmake/build/pdfmake';
import * as _ from 'pdfmake/build/vfs_fonts.js';
import { TypeBlueprintText } from '@/lib/pixi-tools-v2/types/pixi-enums';
import { codingToolsBase64 } from './base64codingToolsLogo';
import { codingFactoryBase64 } from './base64codingFactoryLogo';

const _fonts = globalThis.pdfMake.vfs ?? _.pdfMake.vfs;

export function exportToPdf(childImages) {
if (childImages.length === 0) return;

const styles = {
image: {
alignment: 'center',
marginBottom: 25,
},
text: {
alignment: 'center',
},
logoLeft: {
marginBottom: 50,
},
logoRight: {
marginBottom: 50,
marginLeft: 100,
},
};

const data = {
content: [],
styles: styles
};
data.content.push({
columns: [
{
style: 'logoLeft',
image: codingToolsBase64,
width: 65,
height: 50,
},{
style: 'logo',
image: codingFactoryBase64,
width: 100,
height: 50,
}
],
columnGap: 350,
})
for (let n = 0; n < childImages.length; n++) {
if (childImages[n].isBlueprint == true) {
if (childImages[n].typeBlueprint == 1) {
data.content.push({
style: 'text',
text: TypeBlueprintText["1"],
width: 200,
})
} else if (childImages[n].typeBlueprint == 2) {
data.content.push({
style: 'text',
text: TypeBlueprintText["2"],
})
} else if (childImages[n].typeBlueprint == 3) {
data.content.push({
style: 'text',
text: TypeBlueprintText["3"],
})
} else if (childImages[n].typeBlueprint == 4) {
data.content.push({
style: 'text',
text: TypeBlueprintText["4"],
})
} else if (childImages[n].typeBlueprint == 5) {
data.content.push({
style: 'text',
text: TypeBlueprintText["5"],
})
} else {
}
data.content.push({
style: 'image',
image: childImages[n].base64,
width: 520,
height: 300,

});
} else if (childImages[n].dimension.width > 520) {
data.content.push({
style: 'image',
image: childImages[n].base64,
width: 520,
height: childImages[n].dimension.height,
});
} else {
data.content.push({
style: 'image',
image: childImages[n].base64,
width: childImages[n].dimension.width,
height: childImages[n].dimension.height,
});
}
}

// @ts-ignore
const pdfGenerator = createPdf(data, null, null, _fonts).open();
}
3 changes: 2 additions & 1 deletion front-end/src/store/interfaces/project.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@ export interface ViewportDefaultPosition {
export interface FramedPDF {
id: string;
order: number;
random?: number;
base64: string;
isBlueprint: boolean,
typeBlueprint: number,
dimension: {
width: number;
height: number;
Expand Down
11 changes: 4 additions & 7 deletions front-end/src/store/modules/project.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,12 @@ export const useProjectStore = defineStore('project', {
const reactiveImages: Array<FramedPDF> = [];
for (let n = 0; n < len; n++) {
const container = frames[n];
const { width, height } = container;
const { width, height, isBlueprint, typeBlueprint } = container;
const cloneContainer = container.cloneToContainer();
const { x, y } = cloneContainer.getBounds();
cloneContainer.position.set(-x, -y);

const renderer = new Renderer({
resolution: devicePixelRatio + 1,
width: height,
height: width,
backgroundAlpha: 0,
});
const renderer = new Renderer({ resolution: devicePixelRatio + 1, width, height, backgroundAlpha: 0 });
renderer.render(cloneContainer);

const canvas = renderer.view;
Expand All @@ -75,6 +70,8 @@ export const useProjectStore = defineStore('project', {
reactiveImages.push({
id: container.uuid,
order: n + 1,
isBlueprint,
typeBlueprint,
base64: imageData,
dimension: {
width: Math.floor(width),
Expand Down

0 comments on commit 94fae24

Please sign in to comment.