From 7311cf24870d7b5a22dc074cb3aadc56be95cbd5 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Sun, 11 Jun 2023 18:57:21 +0200
Subject: [PATCH 01/21] feat(resize): Add the resize type into a separate file
---
.../lib/pixi-tools-v2/types/pixi-resize.ts | 43 +++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
new file mode 100644
index 00000000..3c1fd849
--- /dev/null
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
@@ -0,0 +1,43 @@
+import { ResizeHandle } from "./pixi-enums";
+
+export interface InitialResizeOptions {
+ parentInitialWidth: number;
+ parentInitialHeight: number;
+ childInitialX?: number;
+ childInitialY?: number;
+ childInitialWidth?: number;
+ childInitialHeight?: number;
+}
+
+export interface PrimeOptions {
+ parentPrimeWidth: number;
+ parentPrimeHeight: number;
+}
+
+export interface ProportionScaleOptions extends InitialResizeOptions, PrimeOptions {
+ anchorX: number;
+ anchorY: number;
+}
+
+export interface ParentOrthogonalPrimeOptions {
+ handleId: ResizeHandle;
+ initialWidth: number;
+ initialHeight: number;
+ dx: number;
+ dy: number;
+}
+export interface ParentPrimeOptions extends ParentOrthogonalPrimeOptions {
+ ratioA: number;
+ ratioB: number;
+ isShift: boolean;
+}
+
+export interface ResizeMetrics {
+ dx: number;
+ dy: number;
+}
+
+export interface ResizeRatioMetrics extends ResizeMetrics {
+ ratioA: number;
+ ratioB: number;
+}
\ No newline at end of file
From 18ecdef6c4c131dbe1c4ae6066304d7fcb973e5d Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Sun, 11 Jun 2023 18:57:55 +0200
Subject: [PATCH 02/21] refacto(resize): Refacto the resize plugin to be a bit
more readable instead of having a big switch
---
.../plugins/containerResizePlugin.ts | 489 +++++++++---------
.../src/lib/pixi-tools-v2/types/pixi-enums.ts | 3 +
2 files changed, 240 insertions(+), 252 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
index 74c1c939..4cc9d46f 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
@@ -11,23 +11,14 @@ import {
LeftWall,
TopWall,
BottomWall,
+ GenericResize,
+ OrthogonalResize,
} from '../types/pixi-enums';
import type { CanvasContainer, PluginContainer } from '../types/pixi-aliases';
import type { ContainerSize, InitialGraphicState } from '../types/pixi-container';
import { dragAttachedLines } from '../utils/dragAttachedLines';
-
-export interface ProportionScaleOptions {
- parentInitialWidth: number;
- parentInitialHeight: number;
- parentPrimeWidth: number;
- parentPrimeHeight: number;
- anchorX: number;
- anchorY: number;
- childInitialX: number;
- childInitialY: number;
- childInitialWidth: number;
- childInitialHeight: number;
-}
+import { ModelGraphics } from '../types/pixi-class';
+import { ResizeRatioMetrics, ResizeMetrics, InitialResizeOptions, ParentOrthogonalPrimeOptions, ParentPrimeOptions, ProportionScaleOptions } from '../types/pixi-resize';
export class ResizePlugin {
protected readonly viewport: ViewportUI;
@@ -109,6 +100,163 @@ export class ResizePlugin {
this.viewport.on('pointermove', this._updateResizeTransform);
};
+ private _getParentPrimeSize = (options: ParentPrimeOptions) => {
+ if(this.handleId === ResizeHandle.LT || this.handleId === ResizeHandle.RT) {
+ if (this.handleId === ResizeHandle.LT) {
+ return {
+ parentPrimeWidth: options.initialWidth - options.dx,
+ parentPrimeHeight: options.isShift
+ ? (options.initialWidth - options.dx) * options.ratioA
+ : options.initialHeight - options.dy
+ }
+ } else {
+ return {
+ parentPrimeWidth: options.initialWidth + options.dx,
+ parentPrimeHeight: options.isShift
+ ? (options.initialWidth + options.dx) * options.ratioA
+ : options.initialHeight - options.dy
+ }
+ }
+ } else if (this.handleId === ResizeHandle.LB || this.handleId === ResizeHandle.RB) {
+ if (this.handleId === ResizeHandle.LB) {
+ return {
+ parentPrimeWidth: options.initialWidth - options.dx,
+ parentPrimeHeight: options.isShift
+ ? (options.initialWidth - options.dx) / options.ratioB
+ : options.initialHeight + options.dy
+ }
+ } else {
+ return {
+ parentPrimeWidth: options.initialWidth + options.dx,
+ parentPrimeHeight: options.isShift
+ ? (options.initialWidth + options.dx) / options.ratioB
+ : options.initialHeight + options.dy
+ }
+ }
+ }
+
+ return null;
+ }
+
+ private _getParentOrthogonalPrimeSize = (options: ParentOrthogonalPrimeOptions) => {
+ if (this.handleId === ResizeHandle.T) {
+ return {
+ parentPrimeWidth: options.initialWidth,
+ parentPrimeHeight: options.initialHeight - options.dy,
+ }
+ } else if (this.handleId === ResizeHandle.R) {
+ return {
+ parentPrimeWidth: options.initialWidth + options.dx,
+ parentPrimeHeight: options.initialHeight,
+ }
+ } else if (this.handleId === ResizeHandle.B) {
+ return {
+ parentPrimeWidth: options.initialWidth,
+ parentPrimeHeight: options.initialHeight + options.dy,
+ }
+ } else if (this.handleId === ResizeHandle.L) {
+ return {
+ parentPrimeWidth: options.initialWidth - options.dx,
+ parentPrimeHeight: options.initialHeight,
+ }
+ }
+
+ return null;
+ }
+
+ private _genericResize = (
+ child: ModelGraphics,
+ initialOptions: InitialResizeOptions,
+ resizeMetrics: ResizeRatioMetrics,
+ isShift: boolean,
+ ) => {
+ const anchorX = this.handleId === ResizeHandle.LT || this.handleId === ResizeHandle.LB
+ ? this.container.absMaxX
+ : this.container.absMinX
+
+ const anchorY = this.handleId === ResizeHandle.LT || this.handleId === ResizeHandle.RT
+ ? this.container.absMaxY
+ : this.container.absMinY
+
+ const anchor = { anchorX, anchorY };
+ const prime = this._getParentPrimeSize({
+ ...resizeMetrics,
+ initialWidth: initialOptions.parentInitialWidth,
+ initialHeight: initialOptions.parentInitialHeight,
+ handleId: this.handleId,
+ isShift,
+ })
+
+ const { x, y, width, height } = this._proportionalScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ });
+
+ child.width = width;
+ child.height = height;
+ child.x = x;
+ child.y = y;
+ }
+
+ private _orthogonalResize = (
+ child: ModelGraphics,
+ initialOptions: InitialResizeOptions,
+ resizeMetrics: ResizeMetrics,
+ ) => {
+ const anchor = this.handleId === ResizeHandle.T || this.handleId === ResizeHandle.L
+ ? { anchorX: this.container.absMaxX, anchorY: this.container.absMaxY }
+ : { anchorX: this.container.absMinX, anchorY: this.container.absMinY }
+
+ const prime = this._getParentOrthogonalPrimeSize({
+ ...resizeMetrics,
+ initialWidth: initialOptions.parentInitialWidth,
+ initialHeight: initialOptions.parentInitialHeight,
+ handleId: this.handleId,
+ })
+
+ const { x, y, width, height } = this._proportionalScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ });
+
+ child.width = width;
+ child.height = height;
+ child.x = x;
+ child.y = y;
+ }
+
+ private _assignNewGraphicState = (isXAxis: boolean) => {
+ const newHandleId = isXAxis
+ ? ResizeHandleOppositeOf[this.handleId].x
+ : ResizeHandleOppositeOf[this.handleId].y;
+ this.handleId = newHandleId;
+
+ this.initialGraphicsState.length = 0;
+ const graphics = this.container.getGraphicChildren();
+ for (const element of graphics) {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ });
+ }
+
+ const { width, height, absMinX, absMaxY, absMaxX, absMinY } = this.container;
+ this.initialContainerSize = { width, height, absMinX, absMaxY, absMaxX, absMinY };
+
+ if (this.handleId < 4) {
+ const { x, y } = this.viewport.resizeHandles[this.handleId];
+ this.initialCursorPosition = new Point(x, y);
+ } else {
+ const { x, y } = this.viewport.resizeHitAreas[this.handleId - 4];
+ this.initialCursorPosition = new Point(x, y);
+ }
+ }
+
private _updateResizeTransform = (e: FederatedPointerEvent) => {
if (e) e.stopPropagation();
if (this.container === null) return;
@@ -120,237 +268,69 @@ export class ResizePlugin {
const cursorPosition = this.viewport.toWorld(e.global.clone());
const dx = cursorPosition.x - this.initialCursorPosition.x;
const dy = cursorPosition.y - this.initialCursorPosition.y;
+
+ const { width: initialCtnWidth, height: initialCtnHeight, absMinX, absMaxX, absMinY, absMaxY } = this.initialContainerSize;
+ const ratioA = initialCtnHeight / initialCtnWidth;
+ const ratioB = initialCtnWidth / initialCtnHeight;
+ const initialOptions: InitialResizeOptions = {
+ parentInitialWidth: initialCtnWidth,
+ parentInitialHeight: initialCtnHeight,
+ }
- const isPastLeft =
- LeftWall.includes(this.handleId) && cursorPosition.x < this.initialContainerSize.absMinX;
- const isPastRight =
- RightWall.includes(this.handleId) && cursorPosition.x > this.initialContainerSize.absMaxX;
- const isPastTop =
- TopWall.includes(this.handleId) && cursorPosition.y < this.initialContainerSize.absMinY;
- const isPastBottom =
- BottomWall.includes(this.handleId) && cursorPosition.y > this.initialContainerSize.absMaxY;
+ const isPastLeft = LeftWall.includes(this.handleId) && cursorPosition.x < absMinX;
+ const isPastRight = RightWall.includes(this.handleId) && cursorPosition.x > absMaxX;
+ const isPastTop = TopWall.includes(this.handleId) && cursorPosition.y < absMinY;
+ const isPastBottom = BottomWall.includes(this.handleId) && cursorPosition.y > absMaxY;
const isPastBounds = isPastLeft || isPastRight || isPastBottom || isPastTop;
- const ratioA = this.initialContainerSize.height / this.initialContainerSize.width;
- const ratioB = this.initialContainerSize.width / this.initialContainerSize.height;
-
for (let n = 0; n < this.initialGraphicsState.length; n++) {
- const updates = { ...this.initialGraphicsState[n] }; // create a new object reference
-
- if (isPastLeft) {
+ const { child } = this.initialGraphicsState[n];
+
+ if(isPastBounds) {
+ const sizeAndPos = isPastLeft || isPastRight ? [child.x, child.width] : [child.y, child.height];
+ const anchor = isPastLeft ? absMinX : isPastRight ? absMaxX : isPastTop ? absMinY : absMaxY;
const mirror = this._proportionalMirrorPosition({
- anchor: this.initialContainerSize.absMinX,
- childCurrentPos: updates.child.x,
- childCurrentSize: updates.child.width,
+ anchor: anchor,
+ childCurrentPos: sizeAndPos[0],
+ childCurrentSize: sizeAndPos[1],
});
- this.initialGraphicsState[n].child.x = mirror;
- } else if (isPastRight) {
- const mirror = this._proportionalMirrorPosition({
- anchor: this.initialContainerSize.absMaxX,
- childCurrentPos: updates.child.x,
- childCurrentSize: updates.child.width,
- });
- this.initialGraphicsState[n].child.x = mirror;
- } else if (isPastTop) {
- const mirror = this._proportionalMirrorPosition({
- anchor: this.initialContainerSize.absMinY,
- childCurrentPos: updates.child.y,
- childCurrentSize: updates.child.height,
- });
- this.initialGraphicsState[n].child.y = mirror;
- } else if (isPastBottom) {
- const mirror = this._proportionalMirrorPosition({
- anchor: this.initialContainerSize.absMaxY,
- childCurrentPos: updates.child.y,
- childCurrentSize: updates.child.height,
- });
- this.initialGraphicsState[n].child.y = mirror;
+
+ if (isPastLeft || isPastRight) child.x = mirror;
+ else child.y = mirror;
+ continue;
}
- if (isPastBounds) continue;
-
- const sharedOptions = {
- parentInitialWidth: this.initialContainerSize.width,
- parentInitialHeight: this.initialContainerSize.height,
- childInitialX: updates.x,
- childInitialY: updates.y,
- childInitialWidth: updates.width,
- childInitialHeight: updates.height,
- };
-
- switch (this.handleId) {
- case ResizeHandle.LT: {
- const heightRatio = shift
- ? (this.initialContainerSize.width - dx) * ratioA
- : this.initialContainerSize.height - dy;
-
- const { x, y, width, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width - dx,
- parentPrimeHeight: heightRatio,
- anchorX: this.container.absMaxX,
- anchorY: this.container.absMaxY,
- });
- updates.width = width;
- updates.height = height;
- updates.x = x;
- updates.y = updates.y === this.container.absMaxY ? updates.y : y;
- break;
- }
- case ResizeHandle.RT: {
- const heightRatio = shift
- ? (this.initialContainerSize.width + dx) * ratioA
- : this.initialContainerSize.height - dy;
-
- const { x, y, width, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width + dx,
- parentPrimeHeight: heightRatio,
- anchorX: this.container.absMinX,
- anchorY: this.container.absMaxY,
- });
- updates.width = width;
- updates.height = height;
- updates.x = x;
- updates.y = updates.y + updates.height === this.container.absMaxY ? updates.y : y;
- break;
- }
- case ResizeHandle.LB: {
- const heightRatio = shift
- ? (this.initialContainerSize.width - dx) / ratioB
- : this.initialContainerSize.height + dy;
-
- const { x, y, width, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width - dx,
- parentPrimeHeight: heightRatio,
- anchorX: this.container.absMaxX,
- anchorY: this.container.absMinY,
- });
- updates.width = width;
- updates.height = height;
- updates.x = updates.x === this.container.absMaxX ? updates.x : x;
- updates.y = updates.y === this.container.absMinY ? updates.y : y;
- break;
- }
- case ResizeHandle.RB: {
- const heightRatio = shift
- ? (this.initialContainerSize.width + dx) / ratioB
- : this.initialContainerSize.height + dy;
-
- const { x, y, width, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width + dx,
- parentPrimeHeight: heightRatio,
- anchorX: this.container.absMinX,
- anchorY: this.container.absMinY,
- });
- updates.width = width;
- updates.height = height;
- updates.x = x;
- updates.y = updates.y === this.container.absMinY ? updates.y : y;
- break;
- }
- case ResizeHandle.T: {
- const { y, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width,
- parentPrimeHeight: this.initialContainerSize.height - dy,
- anchorX: this.container.absMaxX,
- anchorY: this.container.absMaxY,
- });
- updates.height = height;
- updates.y = y;
- break;
- }
- case ResizeHandle.R: {
- const { x, width } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width + dx,
- parentPrimeHeight: this.initialContainerSize.height,
- anchorX: this.container.absMinX,
- anchorY: this.container.absMinY,
- });
- updates.width = width;
- updates.x = x;
- break;
- }
- case ResizeHandle.B: {
- const { y, height } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width,
- parentPrimeHeight: this.initialContainerSize.height + dy,
- anchorX: this.container.absMinX,
- anchorY: this.container.absMinY,
- });
- updates.height = height;
- updates.y = y;
- break;
- }
- case ResizeHandle.L: {
- const { x, width } = this._proportionalScale({
- ...sharedOptions,
- parentPrimeWidth: this.initialContainerSize.width - dx,
- parentPrimeHeight: this.initialContainerSize.height,
- anchorX: this.container.absMaxX,
- anchorY: this.container.absMaxY,
- });
- updates.width = width;
- updates.x = x;
- break;
- }
- }
+ const { x, y, width, height } = { ...this.initialGraphicsState[n] };
+
+ initialOptions.childInitialX = x;
+ initialOptions.childInitialY = y;
+ initialOptions.childInitialWidth = width;
+ initialOptions.childInitialHeight = height;
- this.initialGraphicsState[n].child.width = updates.width;
- this.initialGraphicsState[n].child.x = updates.x;
- this.initialGraphicsState[n].child.height = updates.height;
- this.initialGraphicsState[n].child.y = updates.y;
+ if(GenericResize.includes(this.handleId)) {
+ this._genericResize(child, initialOptions, {
+ dx, dy, ratioA, ratioB
+ }, shift);
+ } else if (OrthogonalResize.includes(this.handleId)) {
+ this._orthogonalResize(child, initialOptions, {
+ dx, dy
+ });
+ }
- if (this.initialGraphicsState[n].child.typeId === 'framebox') {
- const frame = this.initialGraphicsState[n].child.parent?.parent;
+ if (child.typeId === 'framebox') {
+ const frame = child.parent?.parent;
if (frame instanceof FramedContainer) {
dragAttachedLines(frame, this.viewport.socketPlugin);
continue;
}
}
- const parent = this.initialGraphicsState[n].child.parent as CanvasContainer;
-
+ const parent = child.parent as CanvasContainer;
if (parent.typeId === 'wrap') continue;
-
dragAttachedLines(parent, this.viewport.socketPlugin);
}
- if (this.container instanceof WrappedContainer) {
- for (const element of this.container.absoluteChildren) {
- if (element instanceof FramedContainer) {
- element.emit('moved', null);
- }
- }
- } else {
- if (this.container instanceof FramedContainer) {
- this.container.emit('moved', null);
- }
-
- dragAttachedLines(this.container, this.viewport.socketPlugin);
- }
-
- if (this.viewport.socketPlugin) {
- const containers =
- this.container instanceof WrappedContainer
- ? this.container.absoluteChildren
- : [this.container];
-
- for (const container of containers) {
- container.getGeometry();
- this.viewport.socketPlugin.emit(
- 'ws-element-updated',
- container.uuid,
- container.serializeBounds(),
- );
- }
- }
-
+ this._syncResize();
const geometry = this.container.getGeometry();
this.viewport.destroyBorder();
this.viewport.createBorder({ ...geometry, scale: this.viewport.scaled });
@@ -359,34 +339,7 @@ export class ResizePlugin {
this.viewport.updateBezierHandles(geometry, false);
if (isPastBounds) {
- const isXAxis = isPastLeft || isPastRight;
- const newHandleId = isXAxis
- ? ResizeHandleOppositeOf[this.handleId].x
- : ResizeHandleOppositeOf[this.handleId].y;
- this.handleId = newHandleId;
-
- this.initialGraphicsState.length = 0;
- const graphics = this.container.getGraphicChildren();
- for (const element of graphics) {
- this.initialGraphicsState.push({
- child: element,
- width: element.width,
- height: element.height,
- x: element.x,
- y: element.y,
- });
- }
-
- const { width, height, absMinX, absMaxY, absMaxX, absMinY } = this.container;
- this.initialContainerSize = { width, height, absMinX, absMaxY, absMaxX, absMinY };
-
- if (this.handleId < 4) {
- const { x, y } = this.viewport.resizeHandles[this.handleId];
- this.initialCursorPosition = new Point(x, y);
- } else {
- const { x, y } = this.viewport.resizeHitAreas[this.handleId - 4];
- this.initialCursorPosition = new Point(x, y);
- }
+ this._assignNewGraphicState(isPastLeft || isPastRight);
}
} catch (err) {
if (err instanceof Error) {
@@ -397,6 +350,38 @@ export class ResizePlugin {
}
};
+ private _syncResize = () => {
+ if (this.container instanceof WrappedContainer) {
+ for (const element of this.container.absoluteChildren) {
+ if (element instanceof FramedContainer) {
+ element.emit('moved', null);
+ }
+ }
+ } else {
+ if (this.container instanceof FramedContainer) {
+ this.container.emit('moved', null);
+ }
+
+ dragAttachedLines(this.container, this.viewport.socketPlugin);
+ }
+
+ if (this.viewport.socketPlugin) {
+ const containers =
+ this.container instanceof WrappedContainer
+ ? this.container.absoluteChildren
+ : [this.container];
+
+ for (const container of containers) {
+ container.getGeometry();
+ this.viewport.socketPlugin.emit(
+ 'ws-element-updated',
+ container.uuid,
+ container.serializeBounds(),
+ );
+ }
+ }
+ }
+
private _endResizeTransform = (e: FederatedPointerEvent) => {
if (e) e.stopPropagation();
if (this.container === null) return;
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
index e5c86097..bf61b68a 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-enums.ts
@@ -73,6 +73,9 @@ export const ResizeHandleOppositeOf = {
[ResizeHandle.L]: { x: ResizeHandle.R, y: null },
};
+export const GenericResize = [ResizeHandle.LT, ResizeHandle.RT, ResizeHandle.RB, ResizeHandle.LB];
+export const OrthogonalResize = [ResizeHandle.T, ResizeHandle.B, ResizeHandle.R, ResizeHandle.L];
+
export const LeftWall = [ResizeHandle.RT, ResizeHandle.RB, ResizeHandle.R];
export const RightWall = [ResizeHandle.LT, ResizeHandle.LB, ResizeHandle.L];
export const TopWall = [ResizeHandle.LB, ResizeHandle.RB, ResizeHandle.B];
From cb4d334e576d81a92107253af6d6b14a954fc5f7 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Mon, 12 Jun 2023 07:32:49 +0200
Subject: [PATCH 03/21] fix(modal): Fix an issue with the modal condition
---
.../src/components/agility/UI/ToolsEditor.vue | 4 ++--
.../src/components/agility/modals/Blueprint.vue | 14 ++++----------
2 files changed, 6 insertions(+), 12 deletions(-)
diff --git a/front-end/src/components/agility/UI/ToolsEditor.vue b/front-end/src/components/agility/UI/ToolsEditor.vue
index d86d924b..39aac2b0 100644
--- a/front-end/src/components/agility/UI/ToolsEditor.vue
+++ b/front-end/src/components/agility/UI/ToolsEditor.vue
@@ -124,7 +124,7 @@
/>
-
+
diff --git a/front-end/src/components/agility/modals/Blueprint.vue b/front-end/src/components/agility/modals/Blueprint.vue
index 846cad1a..b446803f 100644
--- a/front-end/src/components/agility/modals/Blueprint.vue
+++ b/front-end/src/components/agility/modals/Blueprint.vue
@@ -1,5 +1,5 @@
-
+
Available blueprints
@@ -34,21 +34,17 @@ const emit = defineEmits(['close']);
const agilityStore = useAgilityStore();
const projectStore = useProjectStore();
const metaTemplates = computed(() => agilityStore.metaTemplates);
-const showBlueprintModal = ref(false);
const isPersonaModalOpen = ref(false);
-const openBlueprintModal = () => showBlueprintModal.value = true;
-const closeBlueprintModal = () => showBlueprintModal.value = false;
const openPersonaModal = () => isPersonaModalOpen.value = true;
const closePersonaModal = () => isPersonaModalOpen.value = false;
const finishPersonaBuilder = () => {
closePersonaModal();
- beforeModalClose();
+ modalClose();
}
-const beforeModalClose = () => {
- closeBlueprintModal();
+const modalClose = () => {
emit("close");
}
@@ -60,8 +56,7 @@ const setBlueprintType = (type: LitteralBlueprintTypes) => {
projectStore.deferredBlueprint = type;
projectStore.setBlueprintEvent('pointer');
- closeBlueprintModal();
- emit("close");
+ modalClose();
}
onMounted(() => {
@@ -70,7 +65,6 @@ onMounted(() => {
}
})
-openBlueprintModal();
defineExpose({
openPersonaModal
})
From 6e8eb9cbca7704aca5669a3da3172dd141c67354 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Mon, 12 Jun 2023 07:33:10 +0200
Subject: [PATCH 04/21] feat(bezier): Add the line-width
---
.../pixi-tools-v2/model/model-constructor/lineBezier.ts | 8 +++++---
front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts | 1 +
front-end/src/lib/pixi-tools-v2/utils/modelSerializer.ts | 1 +
3 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/model/model-constructor/lineBezier.ts b/front-end/src/lib/pixi-tools-v2/model/model-constructor/lineBezier.ts
index 14c07e97..dbe19217 100644
--- a/front-end/src/lib/pixi-tools-v2/model/model-constructor/lineBezier.ts
+++ b/front-end/src/lib/pixi-tools-v2/model/model-constructor/lineBezier.ts
@@ -22,6 +22,7 @@ export class LineBezier extends ModelGraphics {
public hitArea: Polygon;
public arrowHead: boolean;
public dashed: boolean;
+ public lineWidth: number;
private timer = null;
static registerGraphic(attributes: SerializedGraphic) {
@@ -41,6 +42,7 @@ export class LineBezier extends ModelGraphics {
this.alpha = properties.alpha;
this.arrowHead = properties.arrowHead;
this.dashed = properties.dashed;
+ this.lineWidth = lineControl.lineWidth ?? 4;
this.start = lineControl.start;
this.end = lineControl.end;
this.startControl = lineControl.startControl;
@@ -52,7 +54,7 @@ export class LineBezier extends ModelGraphics {
public draw() {
this.clear();
- this.lineStyle({ width: 4, color: this.color, shader: this.dashed ? shader : undefined });
+ this.lineStyle({ width: this.lineWidth, color: this.color, shader: this.dashed ? shader : undefined });
this.line.cap = LINE_CAP.ROUND;
const arrowSize = 10; // Adjust this value as needed
@@ -108,7 +110,7 @@ export class LineBezier extends ModelGraphics {
const baseY2 = arrowY - arrowSize * Math.sin(angle + angleOffset);
// Draw the triangle shape
- this.lineStyle({ width: 4, color: this.color, join: LINE_JOIN.ROUND });
+ this.lineStyle({ width: this.lineWidth, color: this.color, join: LINE_JOIN.ROUND });
this.beginFill(this.color);
this.moveTo(arrowX, arrowY);
this.lineTo(baseX1, baseY1);
@@ -118,7 +120,7 @@ export class LineBezier extends ModelGraphics {
}
private calculateLineHitArea() {
- const distance = 4 * 2;
+ const distance = this.lineWidth * 2;
const points = this.geometry.points;
const numPoints = points.length / 2;
diff --git a/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts b/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
index 9c47a9bf..49fabd64 100644
--- a/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
+++ b/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
@@ -22,6 +22,7 @@ export const modelBounds = (model: ModelGraphics) => {
endControl: model.endControl,
start: model.start,
end: model.end,
+ lineWidth: model.lineWidth,
},
bounds: {
x: model.x,
diff --git a/front-end/src/lib/pixi-tools-v2/utils/modelSerializer.ts b/front-end/src/lib/pixi-tools-v2/utils/modelSerializer.ts
index c03bc75c..15a37910 100644
--- a/front-end/src/lib/pixi-tools-v2/utils/modelSerializer.ts
+++ b/front-end/src/lib/pixi-tools-v2/utils/modelSerializer.ts
@@ -33,6 +33,7 @@ export const modelSerializer = (model: ModelGraphics) => {
endControl: model.endControl,
start: model.start,
end: model.end,
+ lineWidth: model.lineWidth,
},
bounds: {
x: model.x,
From 67bd8ced990c627a6f93c069fbb6de3a87ed8b54 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Mon, 12 Jun 2023 07:33:44 +0200
Subject: [PATCH 05/21] feat(resize): Implement the support of the bezier line,
wip for the mirror position as it doesn't work
---
.../plugins/containerResizePlugin.ts | 312 ++++++++++++++----
.../lib/pixi-tools-v2/types/pixi-container.ts | 2 +-
.../lib/pixi-tools-v2/types/pixi-resize.ts | 24 +-
.../lib/pixi-tools-v2/types/pixi-serialize.ts | 1 +
4 files changed, 262 insertions(+), 77 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
index 4cc9d46f..a1d6ca00 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
@@ -18,7 +18,8 @@ import type { CanvasContainer, PluginContainer } from '../types/pixi-aliases';
import type { ContainerSize, InitialGraphicState } from '../types/pixi-container';
import { dragAttachedLines } from '../utils/dragAttachedLines';
import { ModelGraphics } from '../types/pixi-class';
-import { ResizeRatioMetrics, ResizeMetrics, InitialResizeOptions, ParentOrthogonalPrimeOptions, ParentPrimeOptions, ProportionScaleOptions } from '../types/pixi-resize';
+import { ResizeRatioMetrics, ResizeMetrics, InitialResizeOptions, ParentOrthogonalPrimeOptions, ParentPrimeOptions, ProportionScaleOptions, ProportionLineScaleOptions, InitialLineResizeOptions } from '../types/pixi-resize';
+import { LineBezier } from '../model/template';
export class ResizePlugin {
protected readonly viewport: ViewportUI;
@@ -72,13 +73,27 @@ export class ResizePlugin {
const graphics = this.container.getGraphicChildren();
for (const element of graphics) {
- this.initialGraphicsState.push({
- child: element,
- width: element.width,
- height: element.height,
- x: element.x,
- y: element.y,
- });
+ if(element instanceof LineBezier) {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ start: { ...element.start },
+ end: { ...element.end },
+ startControl: { ...element.startControl },
+ endControl: { ...element.endControl },
+ });
+ } else {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ });
+ }
}
const { width, height, absMinX, absMaxY, absMaxX, absMinY } = this.container;
@@ -187,21 +202,39 @@ export class ResizePlugin {
isShift,
})
- const { x, y, width, height } = this._proportionalScale({
- ...initialOptions,
- ...anchor,
- ...prime,
- });
-
- child.width = width;
- child.height = height;
- child.x = x;
- child.y = y;
+ if(child instanceof LineBezier) {
+ const lineWidth = (Math.min(this.container.width, this.container.height) / 100) / 2;
+ const minLineWidth = Math.max(0.5, lineWidth);
+
+ const { startControl, endControl, start, end } = this._proportionalLineScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ })
+
+ child.start = start;
+ child.end = end;
+ child.startControl = startControl;
+ child.endControl = endControl;
+ child.lineWidth = minLineWidth;
+ child.draw();
+ } else {
+ const { x, y, width, height } = this._proportionalScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ });
+
+ child.width = width;
+ child.height = height;
+ child.x = x;
+ child.y = y;
+ }
}
private _orthogonalResize = (
child: ModelGraphics,
- initialOptions: InitialResizeOptions,
+ initialOptions: InitialResizeOptions & InitialLineResizeOptions,
resizeMetrics: ResizeMetrics,
) => {
const anchor = this.handleId === ResizeHandle.T || this.handleId === ResizeHandle.L
@@ -215,45 +248,33 @@ export class ResizePlugin {
handleId: this.handleId,
})
- const { x, y, width, height } = this._proportionalScale({
- ...initialOptions,
- ...anchor,
- ...prime,
- });
-
- child.width = width;
- child.height = height;
- child.x = x;
- child.y = y;
- }
-
- private _assignNewGraphicState = (isXAxis: boolean) => {
- const newHandleId = isXAxis
- ? ResizeHandleOppositeOf[this.handleId].x
- : ResizeHandleOppositeOf[this.handleId].y;
- this.handleId = newHandleId;
-
- this.initialGraphicsState.length = 0;
- const graphics = this.container.getGraphicChildren();
- for (const element of graphics) {
- this.initialGraphicsState.push({
- child: element,
- width: element.width,
- height: element.height,
- x: element.x,
- y: element.y,
- });
- }
-
- const { width, height, absMinX, absMaxY, absMaxX, absMinY } = this.container;
- this.initialContainerSize = { width, height, absMinX, absMaxY, absMaxX, absMinY };
-
- if (this.handleId < 4) {
- const { x, y } = this.viewport.resizeHandles[this.handleId];
- this.initialCursorPosition = new Point(x, y);
+ if(child instanceof LineBezier) {
+ const lineWidth = (Math.min(this.container.width, this.container.height) / 100) / 2;
+ const minLineWidth = Math.max(0.5, lineWidth);
+
+ const { startControl, endControl, start, end } = this._proportionalLineScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ })
+
+ child.start = start;
+ child.end = end;
+ child.startControl = startControl;
+ child.endControl = endControl;
+ child.lineWidth = minLineWidth;
+ child.draw();
} else {
- const { x, y } = this.viewport.resizeHitAreas[this.handleId - 4];
- this.initialCursorPosition = new Point(x, y);
+ const { x, y, width, height } = this._proportionalScale({
+ ...initialOptions,
+ ...anchor,
+ ...prime,
+ });
+
+ child.width = width;
+ child.height = height;
+ child.x = x;
+ child.y = y;
}
}
@@ -272,7 +293,7 @@ export class ResizePlugin {
const { width: initialCtnWidth, height: initialCtnHeight, absMinX, absMaxX, absMinY, absMaxY } = this.initialContainerSize;
const ratioA = initialCtnHeight / initialCtnWidth;
const ratioB = initialCtnWidth / initialCtnHeight;
- const initialOptions: InitialResizeOptions = {
+ const initialOptions: InitialResizeOptions & InitialLineResizeOptions = {
parentInitialWidth: initialCtnWidth,
parentInitialHeight: initialCtnHeight,
}
@@ -289,23 +310,51 @@ export class ResizePlugin {
if(isPastBounds) {
const sizeAndPos = isPastLeft || isPastRight ? [child.x, child.width] : [child.y, child.height];
const anchor = isPastLeft ? absMinX : isPastRight ? absMaxX : isPastTop ? absMinY : absMaxY;
- const mirror = this._proportionalMirrorPosition({
- anchor: anchor,
- childCurrentPos: sizeAndPos[0],
- childCurrentSize: sizeAndPos[1],
- });
-
- if (isPastLeft || isPastRight) child.x = mirror;
- else child.y = mirror;
+
+ if(child instanceof LineBezier) {
+ const mirror = this._proportionalMirrorLinePosition(
+ anchor,
+ child.start.x,
+ child.startControl.x,
+ child.end.x,
+ child.endControl.x,
+ child.width,
+ )
+
+ child.start.x = mirror.start;
+ child.startControl.x = mirror.startControl;
+ child.end.x = mirror.end;
+ child.endControl.x = mirror.endControl;
+ child.draw();
+ } else {
+ const mirror = this._proportionalMirrorPosition({
+ anchor: anchor,
+ childCurrentPos: sizeAndPos[0],
+ childCurrentSize: sizeAndPos[1],
+ });
+
+ if (isPastLeft || isPastRight) child.x = mirror;
+ else child.y = mirror;
+ }
+
continue;
}
- const { x, y, width, height } = { ...this.initialGraphicsState[n] };
+ if (child instanceof LineBezier) {
+ const { start, end, startControl, endControl } = { ...this.initialGraphicsState[n] };
+
+ initialOptions.childInitialStart = start;
+ initialOptions.childInitialEnd = end;
+ initialOptions.childInitialStartControl = startControl;
+ initialOptions.childInitialEndControl = endControl;
+ } else {
+ const { x, y, width, height } = { ...this.initialGraphicsState[n] };
- initialOptions.childInitialX = x;
- initialOptions.childInitialY = y;
- initialOptions.childInitialWidth = width;
- initialOptions.childInitialHeight = height;
+ initialOptions.childInitialX = x;
+ initialOptions.childInitialY = y;
+ initialOptions.childInitialWidth = width;
+ initialOptions.childInitialHeight = height;
+ }
if(GenericResize.includes(this.handleId)) {
this._genericResize(child, initialOptions, {
@@ -382,6 +431,50 @@ export class ResizePlugin {
}
}
+ private _assignNewGraphicState = (isXAxis: boolean) => {
+ const newHandleId = isXAxis
+ ? ResizeHandleOppositeOf[this.handleId].x
+ : ResizeHandleOppositeOf[this.handleId].y;
+ this.handleId = newHandleId;
+
+ this.initialGraphicsState.length = 0;
+ const graphics = this.container.getGraphicChildren();
+ for (const element of graphics) {
+ if(element instanceof LineBezier) {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ start: { ...element.start },
+ end: { ...element.end },
+ startControl: { ...element.startControl },
+ endControl: { ...element.endControl },
+ });
+ } else {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ });
+ }
+ }
+
+ const { width, height, absMinX, absMaxY, absMaxX, absMinY } = this.container;
+ this.initialContainerSize = { width, height, absMinX, absMaxY, absMaxX, absMinY };
+
+ if (this.handleId < 4) {
+ const { x, y } = this.viewport.resizeHandles[this.handleId];
+ this.initialCursorPosition = new Point(x, y);
+ } else {
+ const { x, y } = this.viewport.resizeHitAreas[this.handleId - 4];
+ this.initialCursorPosition = new Point(x, y);
+ }
+ }
+
private _endResizeTransform = (e: FederatedPointerEvent) => {
if (e) e.stopPropagation();
if (this.container === null) return;
@@ -446,13 +539,57 @@ export class ResizePlugin {
+anchorY.toFixed(2)
).toFixed(2);
- // Calculate the prime width,height of the child relatively to the parent
+ // Calculate the prime width, height of the child relatively to the parent
const w_prime = +(childInitialWidth * r_width).toFixed(2);
const h_prime = +(childInitialHeight * r_height).toFixed(2);
return { x: x_prime, y: y_prime, width: w_prime, height: h_prime };
}
+ private _proportionalLineScale({
+ parentInitialWidth,
+ parentInitialHeight,
+ parentPrimeWidth,
+ parentPrimeHeight,
+ childInitialStart,
+ childInitialEnd,
+ childInitialStartControl,
+ childInitialEndControl,
+ anchorX,
+ anchorY,
+ }: ProportionLineScaleOptions) {
+ // Calculate ratio of new box size to original box size
+ const r_width = Math.max(0.1, parentPrimeWidth) / Math.max(0.1, parentInitialWidth);
+ const r_height = Math.max(0.1, parentPrimeHeight) / Math.max(0.1, parentInitialHeight);
+
+ // Calculate the prime coordinates of the control points relatively to the parent
+ const startControlPrime = {
+ x: +(+(childInitialStartControl.x - anchorX).toFixed(2) * r_width + +anchorX.toFixed(2)).toFixed(2),
+ y: +(+(childInitialStartControl.y - anchorY).toFixed(2) * r_height + +anchorY.toFixed(2)).toFixed(2)
+ };
+ const endControlPrime = {
+ x: +(+(childInitialEndControl.x - anchorX).toFixed(2) * r_width + +anchorX.toFixed(2)).toFixed(2),
+ y: +(+(childInitialEndControl.y - anchorY).toFixed(2) * r_height + +anchorY.toFixed(2)).toFixed(2)
+ };
+
+ // Calculate the prime coordinates of the line's start and end points relatively to the parent
+ const startPrime = {
+ x: +(+(childInitialStart.x - anchorX).toFixed(2) * r_width + +anchorX.toFixed(2)).toFixed(2),
+ y: +(+(childInitialStart.y - anchorY).toFixed(2) * r_height + +anchorY.toFixed(2)).toFixed(2)
+ };
+ const endPrime = {
+ x: +(+(childInitialEnd.x - anchorX).toFixed(2) * r_width + +anchorX.toFixed(2)).toFixed(2),
+ y: +(+(childInitialEnd.y - anchorY).toFixed(2) * r_height + +anchorY.toFixed(2)).toFixed(2)
+ };
+
+ return {
+ startControl: startControlPrime,
+ endControl: endControlPrime,
+ start: startPrime,
+ end: endPrime,
+ };
+ }
+
private _proportionalMirrorPosition({ anchor, childCurrentPos, childCurrentSize }) {
const diff_origin = childCurrentPos - anchor;
const reversed_pos = anchor - diff_origin;
@@ -460,4 +597,35 @@ export class ResizePlugin {
return mirror_pos;
}
+
+ private _proportionalMirrorLinePosition(
+ anchor: number,
+ childCurrentStart: number,
+ childCurrentStartControl: number,
+ childCurrentEnd: number,
+ childCurrentEndControl: number,
+ childCurrentSize: number
+ ) {
+ const diff_start_origin = childCurrentStart - anchor;
+ const diff_end_origin = childCurrentEnd - anchor;
+ const diff_start_control_origin = childCurrentStartControl - anchor;
+ const diff_end_control_origin = childCurrentEndControl - anchor;
+
+ const reversed_start = anchor - diff_start_origin;
+ const reversed_end = anchor - diff_end_origin;
+ const reversed_start_control = anchor - diff_start_control_origin;
+ const reversed_end_control = anchor - diff_end_control_origin;
+
+ const mirror_start = reversed_start - childCurrentSize;
+ const mirror_end = reversed_end - childCurrentSize;
+ const mirror_start_control = reversed_start_control - childCurrentSize;
+ const mirror_end_control = reversed_end_control - childCurrentSize;
+
+ return {
+ start: mirror_start,
+ end : mirror_end,
+ startControl: mirror_start_control,
+ endControl: mirror_end_control,
+ };
+ }
}
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
index de232423..7efb7557 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
@@ -29,7 +29,7 @@ export interface ElementDimension extends ElementSize, ElementRadius {}
export interface ElementBounds extends ElementPosition, Partial {}
export interface ContainerSize extends ElementSize, SerializedContainerAnchors {}
-export interface InitialGraphicState extends ElementBounds {
+export interface InitialGraphicState extends ElementBounds, Partial {
child: ModelGraphics;
}
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
index 3c1fd849..6be5e8fc 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
@@ -1,24 +1,40 @@
+import { ElementPosition } from "./pixi-container";
import { ResizeHandle } from "./pixi-enums";
-export interface InitialResizeOptions {
+export interface InitialParentResizeOptions {
parentInitialWidth: number;
parentInitialHeight: number;
+}
+
+export interface InitialResizeOptions extends InitialParentResizeOptions {
childInitialX?: number;
childInitialY?: number;
childInitialWidth?: number;
childInitialHeight?: number;
}
+export interface InitialLineResizeOptions extends InitialParentResizeOptions {
+ childInitialStart?: ElementPosition;
+ childInitialEnd?: ElementPosition;
+ childInitialStartControl?: ElementPosition;
+ childInitialEndControl?: ElementPosition;
+}
+
export interface PrimeOptions {
parentPrimeWidth: number;
parentPrimeHeight: number;
}
-export interface ProportionScaleOptions extends InitialResizeOptions, PrimeOptions {
- anchorX: number;
- anchorY: number;
+export interface ResizeAnchor {
+ anchorX?: number;
+ anchorY?: number;
}
+export interface ProportionScaleOptions extends InitialResizeOptions, PrimeOptions, ResizeAnchor {
+}
+
+export interface ProportionLineScaleOptions extends InitialLineResizeOptions, PrimeOptions, ResizeAnchor {}
+
export interface ParentOrthogonalPrimeOptions {
handleId: ResizeHandle;
initialWidth: number;
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
index d1c77185..62d5248c 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
@@ -116,4 +116,5 @@ export interface SerializedLineGraphic {
endControl: ElementPosition;
start: ElementPosition;
end: ElementPosition;
+ lineWidth?: number;
}
From d783d404bc86356d48a8174ceac59dd2686d797c Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Mon, 12 Jun 2023 08:35:30 +0200
Subject: [PATCH 06/21] fix(line): The line resize is now absolute, i do not
know how to reverse it properly so that will do for now.
---
.../plugins/containerResizePlugin.ts | 39 ++++++-------------
1 file changed, 12 insertions(+), 27 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
index a1d6ca00..47b15fa8 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
@@ -204,7 +204,7 @@ export class ResizePlugin {
if(child instanceof LineBezier) {
const lineWidth = (Math.min(this.container.width, this.container.height) / 100) / 2;
- const minLineWidth = Math.max(0.5, lineWidth);
+ const minLineWidth = Math.max(0, lineWidth);
const { startControl, endControl, start, end } = this._proportionalLineScale({
...initialOptions,
@@ -250,7 +250,7 @@ export class ResizePlugin {
if(child instanceof LineBezier) {
const lineWidth = (Math.min(this.container.width, this.container.height) / 100) / 2;
- const minLineWidth = Math.max(0.5, lineWidth);
+ const minLineWidth = Math.max(0, lineWidth);
const { startControl, endControl, start, end } = this._proportionalLineScale({
...initialOptions,
@@ -259,6 +259,7 @@ export class ResizePlugin {
})
child.start = start;
+ console.log(child.start)
child.end = end;
child.startControl = startControl;
child.endControl = endControl;
@@ -308,34 +309,18 @@ export class ResizePlugin {
const { child } = this.initialGraphicsState[n];
if(isPastBounds) {
+ if(child instanceof LineBezier) continue;
const sizeAndPos = isPastLeft || isPastRight ? [child.x, child.width] : [child.y, child.height];
const anchor = isPastLeft ? absMinX : isPastRight ? absMaxX : isPastTop ? absMinY : absMaxY;
- if(child instanceof LineBezier) {
- const mirror = this._proportionalMirrorLinePosition(
- anchor,
- child.start.x,
- child.startControl.x,
- child.end.x,
- child.endControl.x,
- child.width,
- )
-
- child.start.x = mirror.start;
- child.startControl.x = mirror.startControl;
- child.end.x = mirror.end;
- child.endControl.x = mirror.endControl;
- child.draw();
- } else {
- const mirror = this._proportionalMirrorPosition({
- anchor: anchor,
- childCurrentPos: sizeAndPos[0],
- childCurrentSize: sizeAndPos[1],
- });
-
- if (isPastLeft || isPastRight) child.x = mirror;
- else child.y = mirror;
- }
+ const mirror = this._proportionalMirrorPosition({
+ anchor: anchor,
+ childCurrentPos: sizeAndPos[0],
+ childCurrentSize: sizeAndPos[1],
+ });
+
+ if (isPastLeft || isPastRight) child.x = mirror;
+ else child.y = mirror;
continue;
}
From 3e1c4cefc7d6aaa7340852e6a08e6d3ee2d62972 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:13:57 +0200
Subject: [PATCH 07/21] types(pixi): Update the types for pixi
---
front-end/src/lib/pixi-tools-v2/types/pixi-container.ts | 8 ++++++--
front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts | 5 +++++
front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts | 5 ++++-
3 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
index 7efb7557..5125b77c 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-container.ts
@@ -1,6 +1,6 @@
import { ModelGraphics } from './pixi-class';
import { BezierHandle } from './pixi-enums';
-import { SerializedContainerAnchors, SerializedLineGraphic } from './pixi-serialize';
+import { SerializedContainerAnchors, SerializedLineGraphic, SerializedTextGraphic } from './pixi-serialize';
export interface ElementPosition {
x: number;
@@ -29,7 +29,7 @@ export interface ElementDimension extends ElementSize, ElementRadius {}
export interface ElementBounds extends ElementPosition, Partial {}
export interface ContainerSize extends ElementSize, SerializedContainerAnchors {}
-export interface InitialGraphicState extends ElementBounds, Partial {
+export interface InitialGraphicState extends ElementBounds, Partial, Partial {
child: ModelGraphics;
}
@@ -37,6 +37,10 @@ export interface InitialGraphicLineState
extends InitialGraphicState,
Partial {}
+export interface InitialGraphicTextState
+ extends InitialGraphicState,
+ Partial {}
+
export interface AttachedContainer {
containerUUID: string;
handleId: BezierHandle;
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
index 6be5e8fc..13b374d9 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-resize.ts
@@ -20,6 +20,11 @@ export interface InitialLineResizeOptions extends InitialParentResizeOptions {
childInitialEndControl?: ElementPosition;
}
+export interface InitialTextResizeOptions extends InitialParentResizeOptions {
+ fontSize?: string | number;
+ fontPadding?: number;
+}
+
export interface PrimeOptions {
parentPrimeWidth: number;
parentPrimeHeight: number;
diff --git a/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts b/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
index 62d5248c..d00c54c2 100644
--- a/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
+++ b/front-end/src/lib/pixi-tools-v2/types/pixi-serialize.ts
@@ -92,12 +92,15 @@ export interface SerializedContainerProperties
disabled: boolean;
}
-export interface SerializedGraphicProperties extends SerializedProperties, ElementColorimetry {
+export interface SerializedGraphicProperties extends SerializedProperties, ElementColorimetry, SerializedTextGraphic {
rotation?: number;
borderWidth?: number;
borderColor?: number;
arrowHead?: boolean;
dashed?: boolean;
+}
+
+export interface SerializedTextGraphic {
text?: string;
fontSize?: string | number;
fontWeight?: TextStyleFontWeight;
From 9991594f17be5485b54a3466cc1b1e0f9e68c688 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:14:43 +0200
Subject: [PATCH 08/21] feat(bounds): Update the bounds model
---
.../src/lib/pixi-tools-v2/utils/modelBounds.ts | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts b/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
index 49fabd64..382fb0b5 100644
--- a/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
+++ b/front-end/src/lib/pixi-tools-v2/utils/modelBounds.ts
@@ -1,4 +1,4 @@
-import { Circle, LineBezier } from '../model/template';
+import { Circle, LineBezier, TextArea } from '../model/template';
import { ModelGraphics } from '../types/pixi-class';
export const modelBounds = (model: ModelGraphics) => {
@@ -31,6 +31,20 @@ export const modelBounds = (model: ModelGraphics) => {
height: model.height,
},
};
+ } else if (model instanceof TextArea) {
+ return {
+ uuid: model.uuid,
+ properties: {
+ fontSize: model.textStyle.fontSize,
+ fontPadding: model.textStyle.padding,
+ },
+ bounds: {
+ x: model.x,
+ y: model.y,
+ width: model.width,
+ height: model.height,
+ },
+ }
} else {
return {
uuid: model.uuid,
From 0d2043bf3d4c86770fa289eca2823f1520841503 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:15:16 +0200
Subject: [PATCH 09/21] fix(plugin): Remove the purple color of the bezier line
---
.../src/lib/pixi-tools-v2/plugins/bezierManipulationPlugin.ts | 3 ---
.../src/lib/pixi-tools-v2/plugins/containerBezierLinkPlugin.ts | 2 --
2 files changed, 5 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/bezierManipulationPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/bezierManipulationPlugin.ts
index 7362a139..9553c384 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/bezierManipulationPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/bezierManipulationPlugin.ts
@@ -66,7 +66,6 @@ export class BezierManipulationPlugin {
);
if (retrieved) {
- this.lineBezier.color = 0xff00ff;
const { x, y, width, height } = closestElement.bounds;
const rectangleEdgePoints = [
{ x: x + width / 2, y: y, id: BezierHandle.T },
@@ -154,8 +153,6 @@ export class BezierManipulationPlugin {
this.container.attachContainer(closestElement.container.uuid, 'end', closestPoint.id);
}
} else {
- this.lineBezier.color = 0xffffff;
-
let startControl = { ...this.lineBezier.start };
let angleControl = { ...this.lineBezier.end };
let endControl = { ...this.lineBezier.end };
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerBezierLinkPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerBezierLinkPlugin.ts
index 4a91c8b1..84441550 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerBezierLinkPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerBezierLinkPlugin.ts
@@ -110,7 +110,6 @@ export class BezierPlugin {
);
if (retrieved) {
- this.lineBezier.color = 0xff00ff;
const { x, y, width, height } = closestElement.bounds;
const rectangleEdgePoints = [
{ x: x + width / 2, y: y, id: BezierHandle.T },
@@ -155,7 +154,6 @@ export class BezierPlugin {
this.lineContainer.attachContainer(closestElement.container.uuid, 'end', closestPoint.id);
}
} else {
- this.lineBezier.color = 0xffffff;
this.lineBezier.end = point;
const lineLength = getLengthFromPoints(this.lineBezier.start, this.lineBezier.end);
From b20a07469b69ef75e3c186e380c84a4940ad0deb Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:16:03 +0200
Subject: [PATCH 10/21] fix(text): Since we can't afford to make a perfect
resize, for now we'll keept the stretch
---
.../lib/pixi-tools-v2/model/model-constructor/textArea.ts | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/front-end/src/lib/pixi-tools-v2/model/model-constructor/textArea.ts b/front-end/src/lib/pixi-tools-v2/model/model-constructor/textArea.ts
index 54d55176..16484dac 100644
--- a/front-end/src/lib/pixi-tools-v2/model/model-constructor/textArea.ts
+++ b/front-end/src/lib/pixi-tools-v2/model/model-constructor/textArea.ts
@@ -66,7 +66,7 @@ export class TextArea extends ModelGraphics {
}
public draw(bounds: Partial) {
- const { x, y } = bounds;
+ const { x, y, width, height } = bounds;
this.position.set(x, y);
this.textStyle.fill = this.color;
this.textSprite.position.set(this.textStyle.padding, this.textStyle.padding);
@@ -78,6 +78,9 @@ export class TextArea extends ModelGraphics {
}
this.drawRect(0, 0, this.width, this.height);
this.endFill();
+
+ this.width = width ?? this.width;
+ this.height = height ?? this.height;
}
public serialized() {
From 697a0755c2e25e2f4e029855c5ba2abf5d2e8330 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:16:29 +0200
Subject: [PATCH 11/21] fix(container): Update the tree bounds to account for
the line control and text size
---
.../lib/pixi-tools-v2/class/lineContainer.ts | 19 +++++++++++++++----
.../lib/pixi-tools-v2/class/textContainer.ts | 19 +++++++++++++++----
2 files changed, 30 insertions(+), 8 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/class/lineContainer.ts b/front-end/src/lib/pixi-tools-v2/class/lineContainer.ts
index e6525cd7..13287b35 100644
--- a/front-end/src/lib/pixi-tools-v2/class/lineContainer.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/lineContainer.ts
@@ -212,7 +212,7 @@ export class LineContainer extends PluginContainer {
}
public updateTreeBounds(serializedBounds: SerializedContainerBounds) {
- const graphic = this.getGraphicChildren()[0];
+ const graphic = this.getGraphicChildren()[0] as LineBezier;
const { absMinX, absMinY, absMaxX, absMaxY } = serializedBounds.anchors;
const bounds = (serializedBounds.childs[0] as SerializedGraphic).bounds;
@@ -221,9 +221,20 @@ export class LineContainer extends PluginContainer {
this.absMaxX = absMaxX;
this.absMaxY = absMaxY;
- graphic.position.set(bounds.x, bounds.y);
- graphic.width = bounds.width;
- graphic.height = bounds.height;
+ try {
+ //@ts-ignore
+ const { start, end, startControl, endControl, lineWidth } = serializedBounds.childs[0].lineControl;
+ graphic.start = start;
+ graphic.end = end;
+ graphic.startControl = startControl;
+ graphic.endControl = endControl;
+ graphic.lineWidth = lineWidth;
+ graphic.draw();
+ graphic.width = bounds.width;
+ graphic.height = bounds.height;
+ } catch(err) {
+ console.error("Could not update the tree bounds of the graphic");
+ }
}
public updateLineTree(serializedControl: SerializedControl) {
diff --git a/front-end/src/lib/pixi-tools-v2/class/textContainer.ts b/front-end/src/lib/pixi-tools-v2/class/textContainer.ts
index 2e33b182..a881c460 100644
--- a/front-end/src/lib/pixi-tools-v2/class/textContainer.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/textContainer.ts
@@ -292,7 +292,7 @@ export class TextContainer extends PluginContainer {
}
public updateTreeBounds(serializedBounds: SerializedContainerBounds) {
- const graphic = this.getGraphicChildren()[0];
+ const graphic = this.getGraphicChildren()[0] as TextArea;
const { absMinX, absMinY, absMaxX, absMaxY } = serializedBounds.anchors;
const bounds = (serializedBounds.childs[0] as SerializedGraphic).bounds;
@@ -301,9 +301,20 @@ export class TextContainer extends PluginContainer {
this.absMaxX = absMaxX;
this.absMaxY = absMaxY;
- graphic.position.set(bounds.x, bounds.y);
- graphic.width = bounds.width;
- graphic.height = bounds.height;
+ try {
+ //@ts-ignore
+ const { fontSize, fontPadding } = serializedBounds?.childs[0]?.properties;
+ graphic.textSprite.style.fontSize = fontSize;
+ graphic.textSprite.style.padding = fontPadding;
+ graphic.draw({
+ x: bounds.x,
+ y: bounds.y,
+ width: bounds.width,
+ height: bounds.height,
+ })
+ } catch(err) {
+ console.error("Could not update the tree bounds graphic properties")
+ }
}
public attachLine(lineUUID: string) {
From 7d0bc33cb256695f57573be1cd3938a667a0fc64 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:17:14 +0200
Subject: [PATCH 12/21] fix(normalyzer): Remove the side-effect of the
width/height
---
front-end/src/lib/pixi-tools-v2/class/normalyzer.ts | 2 --
front-end/src/lib/pixi-tools-v2/class/socketManager.ts | 4 +++-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/class/normalyzer.ts b/front-end/src/lib/pixi-tools-v2/class/normalyzer.ts
index 7e702417..57586d1a 100644
--- a/front-end/src/lib/pixi-tools-v2/class/normalyzer.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/normalyzer.ts
@@ -37,8 +37,6 @@ export class Normalizer {
attributes.bounds = {
x: position.x - width / 2,
y: position.y - height / 2,
- width,
- height,
};
} else {
const width = 200; // Need to find a solution rather than hardcoded
diff --git a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
index e34e6292..311c878b 100644
--- a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
@@ -15,7 +15,7 @@ import { GenericContainer } from './genericContainer';
import { FramedContainer } from './framedContainer';
import { CanvasContainer } from '../types/pixi-aliases';
import { LineContainer } from './lineContainer';
-import { Rectangle, TextArea } from '../model/template';
+import { LineBezier, Rectangle, TextArea } from '../model/template';
import { TextContainer } from './textContainer';
export class SocketManager extends Manager {
@@ -153,6 +153,8 @@ export class SocketManager extends Manager {
}
} else if (element instanceof GenericContainer) {
element.updateTreeBounds(serializedBounds);
+ } else if (element instanceof LineContainer) {
+ element.updateTreeBounds(serializedBounds);
} else if (element instanceof TextContainer) {
element.updateTreeBounds(serializedBounds);
}
From b9b6c921c9be8dbe93c2360e448d197e4b57ce5b Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:17:58 +0200
Subject: [PATCH 13/21] fix(resize): Add a support of the text on resize, but
keep the stretch if it's a child of a frame
---
.../plugins/containerResizePlugin.ts | 47 ++++++++++++++++---
1 file changed, 40 insertions(+), 7 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
index 47b15fa8..ef925897 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerResizePlugin.ts
@@ -18,8 +18,8 @@ import type { CanvasContainer, PluginContainer } from '../types/pixi-aliases';
import type { ContainerSize, InitialGraphicState } from '../types/pixi-container';
import { dragAttachedLines } from '../utils/dragAttachedLines';
import { ModelGraphics } from '../types/pixi-class';
-import { ResizeRatioMetrics, ResizeMetrics, InitialResizeOptions, ParentOrthogonalPrimeOptions, ParentPrimeOptions, ProportionScaleOptions, ProportionLineScaleOptions, InitialLineResizeOptions } from '../types/pixi-resize';
-import { LineBezier } from '../model/template';
+import { ResizeRatioMetrics, ResizeMetrics, InitialResizeOptions, ParentOrthogonalPrimeOptions, ParentPrimeOptions, ProportionScaleOptions, ProportionLineScaleOptions, InitialLineResizeOptions, InitialTextResizeOptions } from '../types/pixi-resize';
+import { LineBezier, TextArea } from '../model/template';
export class ResizePlugin {
protected readonly viewport: ViewportUI;
@@ -85,6 +85,16 @@ export class ResizePlugin {
startControl: { ...element.startControl },
endControl: { ...element.endControl },
});
+ } else if (element instanceof TextArea) {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ fontSize: element.textSprite.style.fontSize,
+ fontPadding: element.textSprite.style.padding
+ });
} else {
this.initialGraphicsState.push({
child: element,
@@ -181,7 +191,7 @@ export class ResizePlugin {
private _genericResize = (
child: ModelGraphics,
- initialOptions: InitialResizeOptions,
+ initialOptions: InitialResizeOptions & InitialLineResizeOptions & InitialTextResizeOptions,
resizeMetrics: ResizeRatioMetrics,
isShift: boolean,
) => {
@@ -202,6 +212,8 @@ export class ResizePlugin {
isShift,
})
+ const parent = child.parent.parent.parent;
+
if(child instanceof LineBezier) {
const lineWidth = (Math.min(this.container.width, this.container.height) / 100) / 2;
const minLineWidth = Math.max(0, lineWidth);
@@ -218,6 +230,16 @@ export class ResizePlugin {
child.endControl = endControl;
child.lineWidth = minLineWidth;
child.draw();
+ } else if (child instanceof TextArea && !(parent instanceof FramedContainer)) {
+ const newWidth = initialOptions.childInitialWidth + resizeMetrics.dx;
+ const newFontSize = parseInt(initialOptions.fontSize as string) * newWidth / initialOptions.childInitialWidth;
+ const newPadding = initialOptions.fontPadding * newWidth / initialOptions.childInitialWidth;
+ child.textSprite.style.fontSize = newFontSize;
+ child.textSprite.style.padding = newPadding;
+ child.draw({
+ x: child.x,
+ y: child.y
+ });
} else {
const { x, y, width, height } = this._proportionalScale({
...initialOptions,
@@ -259,7 +281,6 @@ export class ResizePlugin {
})
child.start = start;
- console.log(child.start)
child.end = end;
child.startControl = startControl;
child.endControl = endControl;
@@ -294,7 +315,7 @@ export class ResizePlugin {
const { width: initialCtnWidth, height: initialCtnHeight, absMinX, absMaxX, absMinY, absMaxY } = this.initialContainerSize;
const ratioA = initialCtnHeight / initialCtnWidth;
const ratioB = initialCtnWidth / initialCtnHeight;
- const initialOptions: InitialResizeOptions & InitialLineResizeOptions = {
+ const initialOptions: InitialResizeOptions & InitialLineResizeOptions & InitialTextResizeOptions = {
parentInitialWidth: initialCtnWidth,
parentInitialHeight: initialCtnHeight,
}
@@ -309,7 +330,7 @@ export class ResizePlugin {
const { child } = this.initialGraphicsState[n];
if(isPastBounds) {
- if(child instanceof LineBezier) continue;
+ if(child instanceof LineBezier || child instanceof TextArea) continue;
const sizeAndPos = isPastLeft || isPastRight ? [child.x, child.width] : [child.y, child.height];
const anchor = isPastLeft ? absMinX : isPastRight ? absMaxX : isPastTop ? absMinY : absMaxY;
@@ -333,12 +354,14 @@ export class ResizePlugin {
initialOptions.childInitialStartControl = startControl;
initialOptions.childInitialEndControl = endControl;
} else {
- const { x, y, width, height } = { ...this.initialGraphicsState[n] };
+ const { x, y, width, height, fontSize, fontPadding } = { ...this.initialGraphicsState[n] };
initialOptions.childInitialX = x;
initialOptions.childInitialY = y;
initialOptions.childInitialWidth = width;
initialOptions.childInitialHeight = height;
+ initialOptions.fontSize = fontSize;
+ initialOptions.fontPadding = fontPadding;
}
if(GenericResize.includes(this.handleId)) {
@@ -437,6 +460,16 @@ export class ResizePlugin {
startControl: { ...element.startControl },
endControl: { ...element.endControl },
});
+ } else if (element instanceof TextArea) {
+ this.initialGraphicsState.push({
+ child: element,
+ width: element.width,
+ height: element.height,
+ x: element.x,
+ y: element.y,
+ fontSize: element.textSprite.style.fontSize,
+ fontPadding: element.textSprite.style.padding
+ });
} else {
this.initialGraphicsState.push({
child: element,
From e23c9378751d31f120dd89e2f9baa2e2bec1ab86 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:27:06 +0200
Subject: [PATCH 14/21] fix(text): Fix the sync of the colorimetry between
users
---
.../src/components/agility/UI/ColorPickerOption.vue | 4 +---
front-end/src/lib/pixi-tools-v2/class/socketManager.ts | 9 +++++++++
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/front-end/src/components/agility/UI/ColorPickerOption.vue b/front-end/src/components/agility/UI/ColorPickerOption.vue
index 164d633d..3c92ef9f 100644
--- a/front-end/src/components/agility/UI/ColorPickerOption.vue
+++ b/front-end/src/components/agility/UI/ColorPickerOption.vue
@@ -86,9 +86,7 @@ const changeColor = (col: ColorPickerUpdate) => {
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) {
+ if(parent instanceof GenericContainer || parent instanceof LineContainer || parent instanceof TextContainer) {
projectStore.scene.viewport.socketPlugin.emit(
'ws-element-colorized',
parent.uuid,
diff --git a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
index 311c878b..c71534fc 100644
--- a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
@@ -193,6 +193,15 @@ export class SocketManager extends Manager {
//@ts-ignore
radius: child.radius,
});
+ } else if(element instanceof TextContainer) {
+ const childData = serializedColorimetry.childs[0] as SerializedGraphicColorimetry;
+ const child = element.getGraphicChildren()[0] as TextArea;
+ child.color = childData.properties.color;
+ child.alpha = childData.properties.alpha;
+ child.draw({
+ x: child.x,
+ y: child.y
+ })
}
} catch (err) {
if (err instanceof Error) {
From e6d3dbd8e2031c5075baccf1d97810885badd2e3 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:33:42 +0200
Subject: [PATCH 15/21] fix(plugin): Fix the draging plugin for the bezier
line, the position set was killing the line inside a frame
---
front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
index cdf6c563..27b954c0 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
@@ -132,6 +132,7 @@ export class DragPlugin {
element.child.startControl.y = data.startControl.y + dy;
element.child.endControl.x = data.endControl.x + dx;
element.child.endControl.y = data.endControl.y + dy;
+ continue;
}
}
From 09127bb3bbbd75ee518fe341dfd308cbdd8ac6b1 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:35:06 +0200
Subject: [PATCH 16/21] fix(plugin): Re-draw the bezier-line
---
front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
index 27b954c0..52fdb2e5 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/containerDragPlugin.ts
@@ -132,6 +132,7 @@ export class DragPlugin {
element.child.startControl.y = data.startControl.y + dy;
element.child.endControl.x = data.endControl.x + dx;
element.child.endControl.y = data.endControl.y + dy;
+ element.child.draw();
continue;
}
}
From 4830654f94afde6f4eeced02bbdbbf04d5c16f74 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Fri, 16 Jun 2023 06:57:52 +0200
Subject: [PATCH 17/21] feat(gateway): Implement the cursor gateway
---
.../src/base/canvasRoom/canvasRoom.module.ts | 2 +
.../common/gateways/cursor.global.gateway.ts | 64 +++++++++++++++++++
2 files changed, 66 insertions(+)
create mode 100644 back-end/src/common/gateways/cursor.global.gateway.ts
diff --git a/back-end/src/base/canvasRoom/canvasRoom.module.ts b/back-end/src/base/canvasRoom/canvasRoom.module.ts
index a664783d..56e17cf0 100644
--- a/back-end/src/base/canvasRoom/canvasRoom.module.ts
+++ b/back-end/src/base/canvasRoom/canvasRoom.module.ts
@@ -12,6 +12,7 @@ import { CanvasGateway } from '@/common/gateways/canvas.global.gateway';
import { JwtService } from '@nestjs/jwt';
import { CanvasRoomInvitationRepository } from './canvasRoomInvitation.repository';
import { MailjetModule } from '@/external-modules/mailjet/mailjet.module';
+import { CursorGateway } from '@/common/gateways/cursor.global.gateway';
@Module({
imports: [DatabaseModule, MailjetModule, forwardRef(() => AuthModule)],
@@ -23,6 +24,7 @@ import { MailjetModule } from '@/external-modules/mailjet/mailjet.module';
CanvasRoomInvitationRepository,
UsersRepository,
CanvasGateway,
+ CursorGateway,
],
controllers: [CanvasRoomController],
exports: [CanvasRoomService, CanvasRoomRepository],
diff --git a/back-end/src/common/gateways/cursor.global.gateway.ts b/back-end/src/common/gateways/cursor.global.gateway.ts
new file mode 100644
index 00000000..7159cdf2
--- /dev/null
+++ b/back-end/src/common/gateways/cursor.global.gateway.ts
@@ -0,0 +1,64 @@
+import { JwtService } from '@nestjs/jwt';
+import { Server } from 'socket.io';
+import { Inject, UseFilters, forwardRef } from '@nestjs/common';
+import {
+ WebSocketGateway,
+ WebSocketServer,
+ OnGatewayInit,
+ OnGatewayConnection,
+ OnGatewayDisconnect,
+ SubscribeMessage,
+} from '@nestjs/websockets';
+
+import { WSServiceErrorCatcher } from '@/common/decorators/ws.catch.decorator';
+import { AuthSocket, WSAuthMiddleware } from '@/common/middlewares/socket.auth.middleware';
+import {
+ ElementPosition,
+} from '@/base/canvasRoom/interfaces/ws.canvasRoom.interface';
+import { UsersRepository } from '@/base/users/users.repository';
+import { ObjectId } from 'mongodb';
+
+@UseFilters(WSServiceErrorCatcher)
+@WebSocketGateway({
+ transports: ['websocket'],
+ cors: {
+ origin: '*', // to be defined later
+ },
+ namespace: 'cursor',
+})
+export class CursorGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
+ constructor(
+ @Inject(forwardRef(() => UsersRepository))
+ private usersRepository: UsersRepository,
+ private readonly jwtService: JwtService,
+ ) {}
+ @WebSocketServer() server: Server;
+
+ afterInit(server: Server) {
+ server.use(WSAuthMiddleware(this.jwtService));
+ }
+
+ async handleConnection(client: AuthSocket) {
+ const query = { _id: client.user.id as ObjectId };
+ const projection = { projection: { profile: { email: 1 } } };
+ const user = await this.usersRepository.findOne(query, projection);
+
+ client.join(client.roomId);
+ client.join(client.user.id.toString());
+ client.to(client.roomId).emit('peer-connected', client.id, user.profile.firstName);
+ }
+
+ async handleDisconnect(client: AuthSocket) {
+ client.to(client.roomId).emit('peer-disconnected', client.id);
+ }
+
+ @SubscribeMessage('update-mouse-moved')
+ handleMouseMoved(client: AuthSocket, position: ElementPosition) {
+ client.to(client.roomId).emit('peer-mouse-moved', client.id, position);
+ }
+
+ @SubscribeMessage('connect-to-peer')
+ handleConnectToPeer(client: AuthSocket, args: { peerId: string, firstName: string }) {
+ client.to(args.peerId).emit('peer-connected', client.id, args.firstName, true);
+ }
+}
From fb0e3938cbb9dba168fa7cb000accbfee8949932 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Fri, 16 Jun 2023 06:58:45 +0200
Subject: [PATCH 18/21] feat(canvas): Implement a second canvas for the cursor
---
.../class/socketCursorManager.ts | 44 ++++++++
.../src/lib/pixi-tools-v2/cursorScene.ts | 43 ++++++++
.../model/model-constructor/cursor.ts | 93 ++++++++++++++++
.../src/lib/pixi-tools-v2/viewportCursor.ts | 103 ++++++++++++++++++
4 files changed, 283 insertions(+)
create mode 100644 front-end/src/lib/pixi-tools-v2/class/socketCursorManager.ts
create mode 100644 front-end/src/lib/pixi-tools-v2/cursorScene.ts
create mode 100644 front-end/src/lib/pixi-tools-v2/model/model-constructor/cursor.ts
create mode 100644 front-end/src/lib/pixi-tools-v2/viewportCursor.ts
diff --git a/front-end/src/lib/pixi-tools-v2/class/socketCursorManager.ts b/front-end/src/lib/pixi-tools-v2/class/socketCursorManager.ts
new file mode 100644
index 00000000..f10b6525
--- /dev/null
+++ b/front-end/src/lib/pixi-tools-v2/class/socketCursorManager.ts
@@ -0,0 +1,44 @@
+import { Manager, ManagerOptions, Socket } from 'socket.io-client';
+import { ElementPosition } from '../types/pixi-container';
+import { ViewportCursor } from '../viewportCursor';
+
+export class SocketCursorManager extends Manager {
+ public readonly canvasSocket: Socket;
+ public readonly peersId: Array;
+ protected readonly viewport: ViewportCursor;
+
+ constructor(uri: string, roomId: string, options: Partial, viewport: ViewportCursor, firstName: string) {
+ super(uri, options);
+
+ this.viewport = viewport;
+ this.canvasSocket = this.socket('/cursor');
+ this.canvasSocket.auth = { roomId };
+
+ this.canvasSocket.on('peer-connected', (peerId: string, peerFirstName: string, forced: boolean = false) => {
+ this.viewport.addCursorElement(peerId, peerFirstName, { x: 0, y: 0 });
+
+ if(!forced) {
+ this.canvasSocket.emit('connect-to-peer', { peerId, firstName });
+ }
+ });
+
+ this.canvasSocket.on('peer-disconnected', (peerId: string) => {
+ const element = this.viewport.cursorElements[peerId];
+ if(element !== undefined) {
+ this.viewport.removeChild(element);
+ element.destroy();
+ }
+ });
+
+ this.canvasSocket.on('peer-mouse-moved', (peerId: string, position: ElementPosition) => {
+ const element = this.viewport.cursorElements[peerId];
+ if(element !== undefined) {
+ this.viewport.updateCursorElement(element, position);
+ }
+ });
+ }
+
+ public updateMouseMoved(position: ElementPosition) {
+ this.canvasSocket.emit('update-mouse-moved', position);
+ }
+}
diff --git a/front-end/src/lib/pixi-tools-v2/cursorScene.ts b/front-end/src/lib/pixi-tools-v2/cursorScene.ts
new file mode 100644
index 00000000..154fab43
--- /dev/null
+++ b/front-end/src/lib/pixi-tools-v2/cursorScene.ts
@@ -0,0 +1,43 @@
+import { IViewportOptions } from 'pixi-viewport';
+import { Application, EventSystem } from 'pixi.js';
+
+import { CanvasSocketOptions } from './plugins/viewportSocketPlugin';
+import { ViewportCursor } from './viewportCursor';
+
+export class CursorScene extends Application {
+ public readonly viewport: ViewportCursor;
+ public heightOffset: number;
+
+ constructor(
+ canvas: HTMLCanvasElement,
+ heightOffset: number,
+ firstName: string,
+ socketOptions?: CanvasSocketOptions,
+ ) {
+ super({
+ view: canvas,
+ width: window.innerWidth,
+ height: window.innerHeight - heightOffset,
+ autoDensity: true,
+ backgroundAlpha: 0,
+ resolution: devicePixelRatio + 1,
+ });
+
+ const event = new EventSystem(this.renderer);
+ event.domElement = this.renderer.view as HTMLCanvasElement;
+ event.resolution = devicePixelRatio + 1;
+
+ const viewportOptions: IViewportOptions = {
+ worldWidth: 1000,
+ worldHeight: 1000,
+ screenWidth: window.innerWidth,
+ screenHeight: window.innerHeight - heightOffset,
+ events: event,
+ };
+
+ this.heightOffset = heightOffset;
+ this.viewport = new ViewportCursor(this, viewportOptions, firstName, socketOptions);
+ this.stage.addChild(this.viewport);
+ this.ticker.start();
+ }
+}
diff --git a/front-end/src/lib/pixi-tools-v2/model/model-constructor/cursor.ts b/front-end/src/lib/pixi-tools-v2/model/model-constructor/cursor.ts
new file mode 100644
index 00000000..c01ff2d8
--- /dev/null
+++ b/front-end/src/lib/pixi-tools-v2/model/model-constructor/cursor.ts
@@ -0,0 +1,93 @@
+import { LINE_CAP, LINE_JOIN, TextStyle, Text } from 'pixi.js';
+import { ModelGraphics } from '../../types/pixi-class';
+import { ElementBounds } from '../../types/pixi-container';
+import { GraphicTypeId, SerializedGraphic } from '../../types/pixi-serialize';
+import { modelBounds } from '../../utils/modelBounds';
+import { modelColorimetry } from '../../utils/modelColorimetry';
+import { modelSerializer } from '../../utils/modelSerializer';
+
+export class Cursor extends ModelGraphics {
+ public readonly uuid: string;
+ public readonly typeId: GraphicTypeId;
+ public cursor: CSSStyleProperty.Cursor;
+ public borderWidth: number;
+ public borderColor: number;
+ public radius: number;
+ public color: number;
+
+ public text: string;
+ public textSprite: Text;
+ public inputField: HTMLInputElement;
+ public textStyle: TextStyle;
+
+ static registerGraphic(attributes: SerializedGraphic) {
+ return new Cursor(attributes);
+ }
+
+ constructor(attributes: SerializedGraphic) {
+ super();
+
+ const { uuid, typeId, bounds, properties } = attributes;
+
+ this.uuid = uuid;
+ this.typeId = typeId as GraphicTypeId;
+ this.eventMode = properties.eventMode;
+ this.cursor = properties.cursor;
+ this.color = properties.color;
+ this.alpha = properties.alpha;
+
+ this.text = properties.text ?? 'unknown';
+ this.textStyle = new TextStyle({
+ fill: 0x000000,
+ fontSize: 12,
+ padding: 3,
+ });
+ this.textSprite = new Text(this.text, this.textStyle);
+ this.textSprite.eventMode = properties.eventMode;
+ this.addChild(this.textSprite);
+
+ this.draw(bounds);
+ }
+
+ public draw(bounds: Partial) {
+ const { x, y, width, height } = bounds;
+ this.position.set(x, y);
+ this.textStyle.fill = 0x000000;
+ this.textSprite.position.set(10 + this.textStyle.padding, 15 + this.textStyle.padding);
+
+ this.clear();
+ this.lineStyle({ width: 3, color: this.color, join: LINE_JOIN.ROUND });
+ this.line.cap = LINE_CAP.ROUND;
+ this.beginFill(this.color);
+
+ const angle = Math.PI / 4; // 45 degrees in radians
+ const halfDiagonal = Math.sqrt(width * width + height * height) / 2;
+ const centerX = width / 2;
+ const centerY = height / 2;
+ const startX = centerX - Math.cos(angle) * halfDiagonal;
+ const startY = centerY + Math.sin(angle) * halfDiagonal;
+ const endX = centerX + Math.cos(angle) * halfDiagonal;
+ const endY = centerY + Math.sin(angle) * halfDiagonal;
+
+ this.moveTo(startX, startY);
+ this.lineTo(centerX, centerY);
+ this.lineTo(endX, endY);
+ this.lineTo(startX, startY);
+
+ this.drawRect(this.textSprite.x, this.textSprite.y + 1, this.textSprite.width, this.textSprite.height - 2);
+ this.endFill();
+ this.endFill();
+ }
+
+ public serialized() {
+ return modelSerializer(this);
+ }
+
+ public serializedBounds() {
+ return modelBounds(this);
+ }
+
+ public serializedColorimetry() {
+ return modelColorimetry(this);
+ }
+}
diff --git a/front-end/src/lib/pixi-tools-v2/viewportCursor.ts b/front-end/src/lib/pixi-tools-v2/viewportCursor.ts
new file mode 100644
index 00000000..51b2818a
--- /dev/null
+++ b/front-end/src/lib/pixi-tools-v2/viewportCursor.ts
@@ -0,0 +1,103 @@
+import { IViewportOptions, Viewport } from 'pixi-viewport';
+import {
+ ICanvas,
+ IRenderer,
+} from 'pixi.js';
+import type { Stage } from './types/pixi-aliases';
+import { CanvasSocketOptions } from './plugins/viewportSocketPlugin';
+import { CursorScene } from './cursorScene';
+import { SocketCursorManager } from './class/socketCursorManager';
+import { Circle } from './model/model-constructor/circle';
+import { ElementPosition } from './types/pixi-container';
+import { ViewportZoomPlugin } from './plugins/viewportZoomPlugin';
+import { Cursor } from './model/model-constructor/cursor';
+import { hexToDecim } from './utils/colorsConvertor';
+
+export class ViewportCursor extends Viewport {
+ public readonly scene: CursorScene;
+ public readonly renderer: IRenderer;
+ public readonly parent: Stage;
+ public readonly socketCursorManager: SocketCursorManager;
+ public cursor: CSSStyleProperty.Cursor;
+ public cursorElements: { [key:string]: Circle } = {};
+ public readonly zoomPlugin: ViewportZoomPlugin;
+
+ constructor(
+ scene: CursorScene,
+ options: IViewportOptions,
+ firstName: string,
+ socketOptions?: CanvasSocketOptions,
+ ) {
+ super(options);
+
+ this.drag().pinch({ percent: 2 }).wheel().decelerate();
+ this.scene = scene;
+ this.renderer = scene.renderer;
+
+ this.zoomPlugin = new ViewportZoomPlugin(this);
+ if (socketOptions) {
+ this.socketCursorManager = new SocketCursorManager(
+ socketOptions.uri,
+ socketOptions.roomId,
+ socketOptions.options,
+ this,
+ firstName,
+ );
+ }
+
+ window.addEventListener('resize', this._onWindowResized.bind(this));
+ }
+
+ public updateMousePosition(mouse: ElementPosition) {
+ this.socketCursorManager.updateMouseMoved(mouse);
+ }
+
+ public offWindowResized() {
+ window.removeEventListener('resize', this._onWindowResized);
+ }
+
+ private _onWindowResized() {
+ const newWidth = window.innerWidth;
+ const newHeight = window.innerHeight - this.scene.heightOffset;
+
+ this.scene.renderer.resize(newWidth, newHeight);
+ this.screenWidth = newWidth;
+ this.screenHeight = newHeight;
+ this.worldWidth = newWidth;
+ this.worldHeight = newHeight;
+ }
+
+ public addCursorElement(uuid: string, firstName: string, mouse: ElementPosition) {
+ const circle = new Cursor({
+ //@ts-ignore
+ typeId: "cursor",
+ uuid: uuid,
+ properties: {
+ cursor: 'none',
+ eventMode: 'none',
+ color: this.getRandomSoftColor(),
+ alpha: 1,
+ text: firstName
+ },
+ bounds: {
+ x: mouse.x,
+ y: mouse.y,
+ width: 10,
+ height: 10,
+ }
+ })
+
+ this.addChild(circle);
+ this.cursorElements[uuid] = circle;
+ }
+
+ getRandomSoftColor() {
+ var softColors = ["#F5A9A9", "#F5D0A9", "#F5F6CE", "#D0F5A9", "#A9F5A9", "#A9F5F2", "#A9D0F5", "#A9A9F5", "#D0A9F5", "#F5A9F2"];
+ var randomIndex = Math.floor(Math.random() * softColors.length);
+ return hexToDecim(softColors[randomIndex]);
+ }
+
+ public updateCursorElement(element: Circle, mouse: ElementPosition) {
+ element.position.set(mouse.x - element.width / 2, mouse.y - element.height / 2);
+ }
+}
From bd0e1bf7c5d914208b37f078d21885afffb88fe0 Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Fri, 16 Jun 2023 06:59:11 +0200
Subject: [PATCH 19/21] feat(cusor): Full implementation of the peer cusor on
canvas
---
.../src/components/agility/AgilityCanvas.vue | 29 +++++++++++++++--
.../lib/pixi-tools-v2/class/socketManager.ts | 11 +------
.../plugins/viewportSocketPlugin.ts | 5 ---
.../plugins/viewportZoomPlugin.ts | 31 ++++++++++---------
front-end/src/lib/pixi-tools-v2/scene.ts | 2 +-
front-end/src/lib/pixi-tools-v2/viewportUI.ts | 27 +++++++++++++---
front-end/src/store/modules/project.store.ts | 3 ++
7 files changed, 72 insertions(+), 36 deletions(-)
diff --git a/front-end/src/components/agility/AgilityCanvas.vue b/front-end/src/components/agility/AgilityCanvas.vue
index 2513cad8..34d59ef7 100644
--- a/front-end/src/components/agility/AgilityCanvas.vue
+++ b/front-end/src/components/agility/AgilityCanvas.vue
@@ -2,6 +2,7 @@
+
@@ -20,10 +21,12 @@ import { useProjectStore } from '@/store/modules/project.store';
import { useAgilityStore } from '@/store/modules/agility.store';
import AgilityCanvasUI from '@/components/agility/AgilityCanvasUI.vue';
import CanvasLoader from '@/components/agility/UI/CanvasLoader.vue';
-import { LineContainer } from '../../lib/pixi-tools-v2/class/lineContainer';
+import { LineContainer } from '@/lib/pixi-tools-v2/class/lineContainer';
import { CanvasContainer } from '@/lib/pixi-tools-v2/types/pixi-aliases';
import { useThemeStore } from '@/store/modules/theme.store';
import { config } from '@/config/config';
+import { CursorScene } from '@/lib/pixi-tools-v2/cursorScene';
+import { useAuthStore } from '../../store/modules/auth.store';
const route = useRoute();
const projectStore = useProjectStore();
@@ -33,19 +36,35 @@ const themeStore = useThemeStore();
const isDark = computed(() => themeStore.theme);
const scene = computed(() => projectStore.scene);
const projectLoading = computed(() => agilityStore.projectLoading);
+const viewportBounds = computed(() => projectStore.getViewportBounds);
const project = computed(() => agilityStore.currentProject);
const canvas = ref();
+const cursorCanvas = ref();
const roomId = ref(route.path.match(/[^/]+(?=\?)|[^/]+$/)[0]);
const loading = computed(() => projectLoading.value || projectStore.internalLoading);
let timeout: NodeJS.Timeout = null;
let rawScene: Scene = null;
+let rawCursorScene: CursorScene = null;
watch(isDark, val => {
if(scene.value) {
scene.value.changeTheme(val);
}
-})
+});
+
+watch(viewportBounds, val => {
+ rawCursorScene.viewport.x = val.x;
+ rawCursorScene.viewport.y = val.y;
+
+ if(val.scaleX !== undefined && val.scaleY !== undefined) {
+ rawCursorScene.viewport.scale.set(val.scaleX, val.scaleY);
+ }
+
+ if(val.mouseX !== undefined && val.mouseY !== undefined) {
+ rawCursorScene.viewport.updateMousePosition({ x: val.mouseX, y: val.mouseY });
+ }
+}, { deep: true });
onMounted(() => {
document.addEventListener('fullscreenchange', onFullscreenChange);
@@ -60,12 +79,17 @@ onMounted(() => {
},
};
+ const authStore = useAuthStore();
+ const firstName = authStore.user?.profile?.firstName ?? 'unknown';
+
// 84 represent the offset height due to tabs
+ const cursorScene = new CursorScene(cursorCanvas.value as HTMLCanvasElement, 84, firstName, socketOptions);
const scene = new Scene(canvas.value as HTMLCanvasElement, 84, isDark.value, socketOptions);
projectStore.scene = scene;
projectStore.canvas = canvas.value;
projectStore.enableSelectionBox();
rawScene = scene;
+ rawCursorScene = cursorScene;
})
const autoFillProject = async () => {
@@ -144,6 +168,7 @@ const onFullscreenChange = () => {
onBeforeRouteLeave(() => {
const vp = projectStore.scene.viewport;
vp.socketPlugin.disconnect();
+ rawCursorScene.viewport.socketCursorManager._close();
if (document.exitFullscreen && projectStore.onFullscreen) {
projectStore.onFullscreen = false;
diff --git a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
index c71534fc..08f5c71f 100644
--- a/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
+++ b/front-end/src/lib/pixi-tools-v2/class/socketManager.ts
@@ -10,12 +10,11 @@ import {
} from '../types/pixi-serialize';
import { Normalizer } from './normalyzer';
import { temporaryNotification } from '../utils/temporary.notification';
-import { ElementPosition } from '../types/pixi-container';
import { GenericContainer } from './genericContainer';
import { FramedContainer } from './framedContainer';
import { CanvasContainer } from '../types/pixi-aliases';
import { LineContainer } from './lineContainer';
-import { LineBezier, Rectangle, TextArea } from '../model/template';
+import { Rectangle, TextArea } from '../model/template';
import { TextContainer } from './textContainer';
export class SocketManager extends Manager {
@@ -130,10 +129,6 @@ export class SocketManager extends Manager {
}
});
- this.canvasSocket.on('peer-mouse-moved', (peerId: string, position: ElementPosition) => {
- console.info(`Peer ${peerId} mouse mooved at position: ${position.x},${position.y}`);
- });
-
this.canvasSocket.on(
'element-colorimetry-updated',
(uuid: string, serializedColorimetry: SerializedColorimetry) => {
@@ -272,10 +267,6 @@ export class SocketManager extends Manager {
this.canvasSocket.emit('delete-element', { uuid, uuidFrame });
}
- public updateMouseMoved(position: ElementPosition) {
- this.canvasSocket.emit('update-mouse-moved', position);
- }
-
public updateFrameOnChildAdded(uuid: string, uuidChild: string, serialized: SerializedContainer) {
this.canvasSocket.emit('add-frame-children', { uuid, uuidChild, serialized });
}
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
index 8373c9a3..b33bbaa0 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
@@ -23,7 +23,6 @@ interface CanvasSocketEvents {
'ws-element-updated': (uuid: string, serializedBounds: SerializedContainerBounds) => void;
'ws-line-updated': (uuid: string, serializedBounds: SerializedControl) => void;
'ws-element-modified': () => void;
- 'ws-mouse-moved': (position: ElementPosition) => void;
'ws-frame-child-added': (
uuid: string,
uuidChild: string,
@@ -71,10 +70,6 @@ export class ViewportSocketPlugin extends utils.EventEmitter
this.socketManager.updateElementBounds(uuid, serializedBounds);
});
- this.on('ws-mouse-moved', (position) => {
- this.socketManager.updateMouseMoved(position);
- });
-
this.on('ws-frame-child-added', (uuid, uuidChild, serialized) => {
this.socketManager.updateFrameOnChildAdded(uuid, uuidChild, serialized);
});
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/viewportZoomPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/viewportZoomPlugin.ts
index 0dfd0df4..9a9cafa5 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/viewportZoomPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/viewportZoomPlugin.ts
@@ -1,9 +1,10 @@
import { reactive } from 'vue';
import { ContainerManager } from '../class/containerManager';
import { ViewportUI } from '../viewportUI';
+import { ViewportCursor } from '../viewportCursor';
export class ViewportZoomPlugin {
- protected readonly viewport: ViewportUI;
+ protected readonly viewport: ViewportUI | ViewportCursor;
protected readonly manager: ContainerManager;
protected readonly MAX_ZOOM: number;
protected readonly MIN_ZOOM: number;
@@ -14,7 +15,7 @@ export class ViewportZoomPlugin {
protected CURRENT_STEP: number;
public ZOOM = reactive({ value: 0 });
- constructor(viewport: ViewportUI, manager: ContainerManager) {
+ constructor(viewport: ViewportUI | ViewportCursor, manager?: ContainerManager) {
this.viewport = viewport;
this.manager = manager;
@@ -63,21 +64,23 @@ export class ViewportZoomPlugin {
}
public updateZoomStep(value: -1 | 1) {
- const isInBounds = value + this.CURRENT_STEP <= this.MAX_STEP && value + this.CURRENT_STEP >= 0;
- if (!isInBounds) return;
+ if(this.viewport instanceof ViewportUI) {
+ const isInBounds = value + this.CURRENT_STEP <= this.MAX_STEP && value + this.CURRENT_STEP >= 0;
+ if (!isInBounds) return;
- const gotoStep = value > 0 ? this.NEXT_STEP : this.PREV_STEP;
+ const gotoStep = value > 0 ? this.NEXT_STEP : this.PREV_STEP;
- let scale = this.MIN_ZOOM;
- for (let n = 0; n < gotoStep; n++) {
- scale *= this.MULTIPLICATOR;
- }
+ let scale = this.MIN_ZOOM;
+ for (let n = 0; n < gotoStep; n++) {
+ scale *= this.MULTIPLICATOR;
+ }
- const point = this.manager.getSelectedCenter();
- if (point) this.viewport.center = point;
+ const point = this.manager.getSelectedCenter();
+ if (point) this.viewport.center = point;
- this.viewport.setZoom(scale, true);
- this.viewport.emit('zoomed', null);
- this.viewport.drawGrid();
+ this.viewport.setZoom(scale, true);
+ this.viewport.emit('zoomed', null);
+ this.viewport.drawGrid();
+ }
}
}
diff --git a/front-end/src/lib/pixi-tools-v2/scene.ts b/front-end/src/lib/pixi-tools-v2/scene.ts
index 499158b0..185f3930 100644
--- a/front-end/src/lib/pixi-tools-v2/scene.ts
+++ b/front-end/src/lib/pixi-tools-v2/scene.ts
@@ -12,7 +12,7 @@ export class Scene extends Application {
canvas: HTMLCanvasElement,
heightOffset: number,
isDark: boolean,
- socketOptions?: CanvasSocketOptions,
+ socketOptions?: CanvasSocketOptions
) {
super({
view: canvas,
diff --git a/front-end/src/lib/pixi-tools-v2/viewportUI.ts b/front-end/src/lib/pixi-tools-v2/viewportUI.ts
index 07a0c993..cc8bb007 100644
--- a/front-end/src/lib/pixi-tools-v2/viewportUI.ts
+++ b/front-end/src/lib/pixi-tools-v2/viewportUI.ts
@@ -25,6 +25,7 @@ import { GenericContainer } from './class/genericContainer';
import { decimToHex } from './utils/colorsConvertor';
import { dragAttachedLines } from './utils/dragAttachedLines';
import { TextContainer } from './class/textContainer';
+import { MovedEvent } from 'pixi-viewport/dist/types';
export interface TextEditorOptions {
text: string;
@@ -47,6 +48,15 @@ export interface TextEditorOptions {
lineHeight: number;
}
+export interface ViewportBounds {
+ x: number;
+ y: number;
+ mouseX: number;
+ mouseY: number;
+ scaleX: number;
+ scaleY: number;
+}
+
export class ViewportUI extends Viewport {
public readonly scene: Scene;
private _isHiddenUI = false;
@@ -71,6 +81,7 @@ export class ViewportUI extends Viewport {
public readonly activeFrames: Array = reactive([]);
public readonly childFrames: Array = shallowReactive([]);
+ public viewportBounds = reactive>({});
constructor(
scene: Scene,
@@ -100,6 +111,8 @@ export class ViewportUI extends Viewport {
this.grid = new Grid({ color: isDark ? 0x27282d : 0xd9d9d9 });
this.addChildAt(this.grid, 0);
+ this.viewportBounds.x = this.x;
+ this.viewportBounds.y = this.y;
window.addEventListener('resize', this._onWindowResized.bind(this));
this.on('moved', this._onViewportMoved);
@@ -108,10 +121,9 @@ export class ViewportUI extends Viewport {
this.on('pointerdown', this._onViewportUnselect);
this.on('pointermove', (e: FederatedPointerEvent) => {
this.mouse = e.global;
-
- if (this.socketPlugin) {
- this.socketPlugin.emit('ws-mouse-moved', this.mouse);
- }
+ const worldPos = this.toWorld(e.global);
+ this.viewportBounds.mouseX = worldPos.x;
+ this.viewportBounds.mouseY = worldPos.y;
});
this.on('childAdded', (child: CanvasContainer) => {
@@ -242,6 +254,8 @@ export class ViewportUI extends Viewport {
}
private _onViewportMoved() {
+ this.viewportBounds.x = this.x;
+ this.viewportBounds.y = this.y;
this.drawGrid();
}
@@ -273,6 +287,11 @@ export class ViewportUI extends Viewport {
this.updateUI(size);
}
+
+ this.viewportBounds.x = this.x;
+ this.viewportBounds.y = this.y;
+ this.viewportBounds.scaleX = this.scale.x;
+ this.viewportBounds.scaleY = this.scale.y;
}
private updateUI(size: ElementSize) {
diff --git a/front-end/src/store/modules/project.store.ts b/front-end/src/store/modules/project.store.ts
index ddbffff6..247389ae 100644
--- a/front-end/src/store/modules/project.store.ts
+++ b/front-end/src/store/modules/project.store.ts
@@ -43,6 +43,9 @@ export const useProjectStore = defineStore('project', {
getSelected(this: ProjectStore) {
return this.scene?.viewport?.manager?.selectedContainers || [];
},
+ getViewportBounds(this: ProjectStore) {
+ return this.scene?.viewport.viewportBounds;
+ },
getImages(this: ProjectStore) {
if (!this.pdfViewerOpen) return [];
this.refreshPdfViewer;
From 51ef84cdff1e40a1a2416716048a9a1ad58ab396 Mon Sep 17 00:00:00 2001
From: codefactor-io
Date: Fri, 16 Jun 2023 05:01:39 +0000
Subject: [PATCH 20/21] [CodeFactor] Apply fixes
---
front-end/src/lib/pixi-tools-v2/viewportCursor.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/viewportCursor.ts b/front-end/src/lib/pixi-tools-v2/viewportCursor.ts
index 51b2818a..f10b4f16 100644
--- a/front-end/src/lib/pixi-tools-v2/viewportCursor.ts
+++ b/front-end/src/lib/pixi-tools-v2/viewportCursor.ts
@@ -92,8 +92,8 @@ export class ViewportCursor extends Viewport {
}
getRandomSoftColor() {
- var softColors = ["#F5A9A9", "#F5D0A9", "#F5F6CE", "#D0F5A9", "#A9F5A9", "#A9F5F2", "#A9D0F5", "#A9A9F5", "#D0A9F5", "#F5A9F2"];
- var randomIndex = Math.floor(Math.random() * softColors.length);
+ const softColors = ["#F5A9A9", "#F5D0A9", "#F5F6CE", "#D0F5A9", "#A9F5A9", "#A9F5F2", "#A9D0F5", "#A9A9F5", "#D0A9F5", "#F5A9F2"];
+ const randomIndex = Math.floor(Math.random() * softColors.length);
return hexToDecim(softColors[randomIndex]);
}
From 761344f77b67e4345828be45a4e1ae594d6fedcf Mon Sep 17 00:00:00 2001
From: Samson Christopher <91219719+Maghwyn@users.noreply.github.com>
Date: Fri, 16 Jun 2023 07:02:48 +0200
Subject: [PATCH 21/21] fix(import): Remove unused import
---
front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts | 1 -
front-end/src/lib/pixi-tools-v2/viewportUI.ts | 1 -
2 files changed, 2 deletions(-)
diff --git a/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts b/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
index b33bbaa0..d4786a40 100644
--- a/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
+++ b/front-end/src/lib/pixi-tools-v2/plugins/viewportSocketPlugin.ts
@@ -3,7 +3,6 @@ import { ManagerOptions } from 'socket.io-client';
import { ViewportUI } from '../viewportUI';
import { CanvasContainer } from '../types/pixi-aliases';
-import { ElementPosition } from '../types/pixi-container';
import { SocketManager } from '../class/socketManager';
import { ModelGraphics } from '../types/pixi-class';
import { FramedContainer } from '../class/framedContainer';
diff --git a/front-end/src/lib/pixi-tools-v2/viewportUI.ts b/front-end/src/lib/pixi-tools-v2/viewportUI.ts
index cc8bb007..fc8db79c 100644
--- a/front-end/src/lib/pixi-tools-v2/viewportUI.ts
+++ b/front-end/src/lib/pixi-tools-v2/viewportUI.ts
@@ -25,7 +25,6 @@ import { GenericContainer } from './class/genericContainer';
import { decimToHex } from './utils/colorsConvertor';
import { dragAttachedLines } from './utils/dragAttachedLines';
import { TextContainer } from './class/textContainer';
-import { MovedEvent } from 'pixi-viewport/dist/types';
export interface TextEditorOptions {
text: string;