Skip to content

Pixi text-editor update #458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Maghwyn wants to merge 4 commits into
base: develop-G6
Choose a base branch
from
Draft

Pixi text-editor update #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37654d5
Feature(Editor)
Thomlam Jun 9, 2023
3b36a8d
Merge branch 'G6/update/PixiTextEditorUpdate' of https://github.com/C…
Thomlam Jun 9, 2023
19ae74a
Merge branch 'develop-G6' into G6/update/PixiTextEditorUpdate
Thomlam Jun 9, 2023
a51c8ce
feature(AddMoreActionClick) : Add finaly action click for toggle obli…
Thomlam Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 134 additions & 84 deletions front-end/src/components/agility/UI/TextAreaEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,152 @@
<template>
<div class="relative">
<IconButton class="h-fit" :class="btnStyle" type="button" @click="toggleTextAreaEditor">
<div class="w-[22px] h-[22px] rounded-full border border-[#9ca3af]"></div>
</IconButton>
<div class="absolute z-10 flex justify-between mt-4" :class="position" v-if="isTextAreaEdited">
<div class="modal-body">
<div class="flex mb-2">
<button
:class="{ 'bg-blue-500 text-white': isBold }"
@click="toggleBold"
class="bg-gray-300 hover:bg-gray-400 text-black-800 font-semibold py-2 px-4 rounded mr-2"
>
Bold
</button>
<button
:class="{ 'bg-blue-500 text-white': isItalic }"
@click="toggleItalic"
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded mr-2"
>
Italic
</button>
<button
:class="{ 'bg-blue-500 text-white': isOblique }"
@click="toggleOblique"
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded mr-2"
>
Oblique
</button>
</div>
<div class="flex mb-2">
<label class="mr-2">Police :</label>
<select v-model="fontFamily" class="bg-white border border-gray-300 rounded px-2 py-1">
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</div>
<div class="flex mb-2">
<label class="mr-2">Alignment :</label>
<select v-model="fontAlignment" class="bg-white border border-gray-300 rounded px-2 py-1">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="flex mb-2">
<label class="mr-2">Taille :</label>
<select v-model="fontSize" class="bg-white border border-gray-300 rounded px-2 py-1">
<option value="12">Petit</option>
<option value="16">Moyen</option>
<option value="20">Grand</option>
</select>
</div>
</div>

</div>
</div>
</template>

<script lang="ts" setup>

defineProps<{
position: string;
btnStyle?: string;
}>()
import { ref, computed, watch } from 'vue';


import IconButton from '@/components/common/buttons/Icon.vue';
import { useProjectStore } from '@/store/modules/project.store';
import { GenericContainer } from '@/lib/pixi-tools-v2/class/genericContainer';
import { LineContainer } from '@/lib/pixi-tools-v2/class/lineContainer';
import { FramedContainer } from '@/lib/pixi-tools-v2/class/framedContainer';
import { useThemeStore } from '@/store/modules/theme.store';
import { TextContainer } from '@/lib/pixi-tools-v2/class/textContainer';

interface TextAreaEditor {
font_size: number;
}

defineProps<{
position: string;
}>();
const isTextAreaEdited = ref(false);
const isBold = ref(false);
const isItalic = ref(false);
const isOblique = ref(false);

const projectStore = useProjectStore();
const themeStore = useThemeStore();
const isDark = computed(() => themeStore.theme);

//! It's hard to watch an array of object without using deep, but deep is too exaustive there.
const projectStore = useProjectStore();
const selectedContainers = computed(() => projectStore.getSelected);
//! This is used to trigger the watch, that's its sole purpose.
const selectedUUID = computed(() => selectedContainers.value.map((ctn) => ctn.uuid));

const colorPickerOpen = ref(false);
const color = ref();

const changeColor = (col: ColorPickerUpdate) => {
if (col.hex === '' || col.hex === '#') return;
color.value = col.hex;

const len = selectedContainers.value.length;
for (let n = 0; n < len; n++) {
const graphic = selectedContainers.value[n].getGraphicChildren()[0];
graphic.color = hexToDecim(col.hex);
graphic.alpha = col?.rgba?.a ?? 1;
graphic.draw({
x: graphic.x,
y: graphic.y,
width: graphic.width,
height: graphic.height,
//@ts-ignore
radius: graphic.radius,
});

if (projectStore.scene.viewport.socketPlugin) {
const parent = graphic.parent;
// TODO: Thomas, remove this when readuy for the live editing
if (parent instanceof TextContainer) continue;
if (parent instanceof GenericContainer || parent instanceof LineContainer) {
projectStore.scene.viewport.socketPlugin.emit(
'ws-element-colorized',
parent.uuid,
parent.serializedColorimetry(),
);
} else {
const frame = parent.parent as FramedContainer;
projectStore.scene.viewport.socketPlugin.emit(
'ws-element-colorized',
frame.uuid,
frame.serializedColorimetry(),
);
}
}
}
};

const toggleColorPicker = () => {
colorPickerOpen.value = !colorPickerOpen.value;
};

watch(colorPickerOpen, (val) => {
const fontFamily = ref('Arial');
const fontAlignment = ref('left');
const fontSize = ref('12');


const toggleTextAreaEditor = () => {
isTextAreaEdited.value = !isTextAreaEdited.value;
console.log(isTextAreaEdited.value );
}

watch(isTextAreaEdited, (val) => {
projectStore.scene.viewport.manager.isEditingContainerProperties = val;
});

watch(selectedUUID, () => {
colorPickerOpen.value = false;
const len = selectedContainers.value.length;
if (len === 0 || len > 1) {
color.value = undefined;
} else {
const graphic = selectedContainers.value[0].getGraphicChildren()[0];

// TODO: The librarby doesn't seem to convert hex with opacity, it's a bit.. unfortunate.
color.value = addOpacityToHex(decimToHex(graphic.color), graphic.alpha);
}
});
</script>
})

<style lang="scss">
.hu-color-picker {
width: fit-content !important;
const toggleItalic = () => {
isItalic.value = !isItalic.value;
const ctn = selectedContainers.value[0]
if (ctn instanceof TextContainer && isItalic) {
ctn.textGraphic.textSprite.fontStyle = "italic";
}
else ctn.textGraphic.textSprite.fontStyle = "normal";
}
const toggleBold = () => {
isBold.value = !isBold.value;
const ctn = selectedContainers.value[0]
if (ctn instanceof TextContainer && isBold) {
ctn.textGraphic.textSprite.fontWeight = "bold";
}
else if (ctn instanceof TextContainer) ctn.textGraphic.textSprite.fontWeight = "bold";
else return;
projectStore.scene.viewport.socketPlugin.emit(
'ws-text-updated',
ctn.uuid,
ctn.serializeData()
)
}
const toggleOblique= () => {
isOblique.value = !isOblique.value;
const ctn = selectedContainers.value[0]
if (ctn instanceof TextContainer && isOblique) {
ctn.textGraphic.textSprite.fontStyle = "oblique";


.multicolor {
background: linear-gradient(217deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, 1), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0) 70.71%);
}
else if (ctn instanceof TextContainer) ctn.textGraphic.textSprite.fontStyle = "normal";
else return;
projectStore.scene.viewport.socketPlugin.emit(
'ws-text-updated',
ctn.uuid,
ctn.serializeData()
)
}
</style>





const GetTextArea = ()=> {
const ctn = selectedContainers.value[0]
if (ctn instanceof TextContainer) {
}
if(parent instanceof TextContainer){

}
}
</script>
4 changes: 3 additions & 1 deletion front-end/src/components/agility/UI/ToolsEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
background="gradiant"
class="h-9"
>
<SvgArrows class="fill-white-icon dark:fill-white-icon" />
<SvgArrows class="fill-white-icon dark:fill-white-icon" />
</DefaultButton>
</div>
<div class="grow flex h-full gap-1 items-center">
Expand Down Expand Up @@ -171,6 +171,7 @@
<ShareProject v-if="isShareModalOpen" @close="closeShareModal" />
<ManageUser v-if="isOwner && isManagerModalOpen" @close="closeManagerModal" />
<BlueprintModal v-if="isBlueprintModalOpen" @close="closeBlueprintModal" />
<TextAreaEditor v-if="isTextAreaEdited" @close="openTextAreaEdited"></TextAreaEditor>
<div class="flex h-full gap-1 items-center">
<IconButton class="h-fit" type="button" @click="openManagerModal" v-if="isOwner">
<SvgGear width="22" height="22" class="!fill-gray-400" />
Expand All @@ -195,6 +196,7 @@ import { useProjectStore } from '@/store/modules/project.store';
import { type MenuOptions, ContextMenu, ContextMenuItem } from '@imengyu/vue3-context-menu';
import { DownloadType, LiteralGeometryTypes } from '@/lib/pixi-tools-v2/types/pixi-enums';

import TextAreaEditor from '@/components/agility/UI/TextAreaEditor.vue';
import BlueprintModal from '@/components/agility/modals/Blueprint.vue';
import ColorPickerOption from '@/components/agility/UI/ColorPickerOption.vue';
import ShareProject from '@/components/agility/UI/ShareProject.vue';
Expand Down
22 changes: 20 additions & 2 deletions front-end/src/components/retrospective/CreateRetro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,14 @@
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { computed, defineComponent, ref, onMounted } from 'vue';
import Overlay from '@/components/retrospective/utils/Overlay.vue';
import ChooseTemplate from './ChooseTemplate.vue';
import DefaultButton from '@/components/common/buttons/Default.vue';
import { useCourseStore } from '@/store/course.store';
import { useAuthStore } from '@/store/modules/auth.store';
import { Roles } from '@/store/interfaces/auth.interfaces';
import { http } from '@/api/network/axios';

export default defineComponent({
components: {
Expand All @@ -50,7 +51,6 @@ export default defineComponent({
const isPO = computed(() => authStore.user.role === Roles.USER ? false : true);
const allCourses = computed(() => courseStore.allCourses);


const chooseTemplate = () => {
active.value = true;
if (displayTemplate.value === false) {
Expand All @@ -60,6 +60,24 @@ export default defineComponent({
}
};

onMounted(async() => {
await isProductOwner();
})

const isProductOwner = async () => {
// Je vois avec Louis ce qu'il veut faire parce que pas compris, bref
// Utiliser une fonction fléchée
try {
const response = await http.get(`/calls/is_product_owner/`);
// TODO: Kevin - Ici, il faut définir la valeur de isPO (Kevin met en anglais ton commentaire sinon baston)
// this.isPO = response.data.isPO;
isPO.value = true;
} catch (error) {
console.error(error);
// this.isPO = false;
isPO.value = true;
}
};

return {
chooseTemplate,
Expand Down
1 change: 0 additions & 1 deletion front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
} from '../model/template';

export const GeometryTypes = {
//TODO Mettre les objet à la place via constructeur - Thomas

rectangle: Rectangle,
circle: Circle,
Expand Down