Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-6012 - Watermark alignment settings

Browse Source
This commit is contained in:
Valentin Mihai 2023-05-23 15:18:38 +03:00
parent de7c3e9c36
commit 0e1a732843
16 changed files with 172 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html
View File

@ -54,20 +54,60 @@
<div class="iqser-input-group">
<label [translate]="'watermark-screen.form.alignment'" class="all-caps-label"></label>
<div class="flex">
<iqser-circle-button
*ngFor="let alignment of watermarkHorizontalAlignments"
[tooltip]="translations[alignment] | translate"
[icon]="'red:' + alignment"
[type]="currentAlignment.horizontal === alignment ? iconButtonTypes.primary : iconButtonTypes.default"
(action)="alignHorizontally(alignment)"
></iqser-circle-button>
<iqser-circle-button
*ngFor="let alignment of watermarkVerticalAlignments"
[tooltip]="translations[alignment] | translate"
[icon]="'red:' + alignment"
[type]="currentAlignment.vertical === alignment ? iconButtonTypes.primary : iconButtonTypes.default"
(action)="alignVertically(alignment)"
></iqser-circle-button>
<!-- <iqser-circle-button-->
<!-- *ngFor="let alignment of watermarkHorizontalAlignments"-->
<!-- [tooltip]="translations[alignment] | translate"-->
<!-- [icon]="'red:' + alignment"-->
<!-- [type]="currentAlignment.horizontal === alignment ? iconButtonTypes.primary : iconButtonTypes.default"-->
<!-- (action)="alignHorizontally(alignment)"-->
<!-- ></iqser-circle-button>-->
<!-- <iqser-circle-button-->
<!-- *ngFor="let alignment of watermarkVerticalAlignments"-->
<!-- [tooltip]="translations[alignment] | translate"-->
<!-- [icon]="'red:' + alignment"-->
<!-- [type]="currentAlignment.vertical === alignment ? iconButtonTypes.primary : iconButtonTypes.default"-->
<!-- (action)="alignVertically(alignment)"-->
<!-- ></iqser-circle-button>-->
<!-- <div class="alignment-buttons">-->
<!-- <iqser-circle-button-->
<!-- *ngFor="let alignment of watermarkHorizontalAlignments"-->
<!-- [tooltip]="translations[alignment] | translate"-->
<!-- [icon]="'red:' + alignment"-->
<!-- [type]="currentAlignment.horizontal === alignment ? iconButtonTypes.primary : iconButtonTypes.default"-->
<!-- (action)="alignHorizontally(alignment)"-->
<!-- ></iqser-circle-button>-->
<!-- </div>-->
<!-- <div class="alignment-buttons">-->
<!-- <iqser-circle-button-->
<!-- *ngFor="let alignment of watermarkVerticalAlignments"-->
<!-- [tooltip]="translations[alignment] | translate"-->
<!-- [icon]="'red:' + alignment"-->
<!-- [type]="currentAlignment.vertical === alignment ? iconButtonTypes.primary : iconButtonTypes.default"-->
<!-- (action)="alignVertically(alignment)"-->
<!-- ></iqser-circle-button>-->
<!-- </div>-->
<div class="alignment-buttons">
<div
*ngFor="let alignment of watermarkHorizontalAlignments"
class="alignment"
[class.active]="currentAlignment.horizontal === alignment"
[ngClass]="'horizontal-' + alignment.toLowerCase()"
(click)="alignHorizontally(alignment)"
>
<mat-icon [svgIcon]="'red:align-horizontal-' + alignment.toLowerCase()"></mat-icon>
</div>
</div>
<div class="alignment-buttons">
<div
*ngFor="let alignment of watermarkVerticalAlignments"
class="alignment"
[class.active]="currentAlignment.vertical === alignment"
[ngClass]="'vertical-' + alignment.toLowerCase()"
(click)="alignVertically(alignment)"
>
<mat-icon [svgIcon]="'red:align-vertical-' + alignment.toLowerCase()"></mat-icon>
</div>
</div>
</div>
</div>

45
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
View File

@ -1,5 +1,3 @@
@use 'variables';
:host {
display: flex;
flex-direction: row !important;
@ -92,4 +90,47 @@
}
}
}
.alignment-buttons {
width: 99px;
height: 30px;
display: flex;
justify-content: space-between;
border-radius: 6px;
border: 1px solid var(--iqser-grey-4);
margin-right: 10px;
.alignment {
width: 33px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
mat-icon {
width: 17px;
}
&.active {
background-color: var(--iqser-primary);
cursor: default;
}
&.horizontal-left,
&.vertical-top {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&.horizontal-right,
&.vertical-bottom {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.alignment:not(.active):hover {
background: var(--iqser-btn-bg-hover);
}
}
}

36
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
View File

@ -49,10 +49,8 @@ export const DEFAULT_WATERMARK: Partial<IWatermark> = {
fontSize: 40,
fontType: 'helvetica',
orientation: WatermarkOrientations.HORIZONTAL,
alignment: {
horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS,
vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS,
},
horizontalTextAlignment: WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER,
verticalTextAlignment: WATERMARK_VERTICAL_ALIGNMENTS.CENTER,
} as const;
interface WatermarkForm {
@ -62,8 +60,9 @@ interface WatermarkForm {
opacity: number;
fontSize: number;
fontType: string;
alignment: WatermarkAlignment;
orientation: WatermarkOrientation;
horizontalTextAlignment: WatermarkHorizontalAlignment;
verticalTextAlignment: WatermarkVerticalAlignment;
}
@Component({
@ -93,10 +92,7 @@ export class WatermarkScreenComponent implements OnInit {
#watermark: Partial<IWatermark> = {};
readonly watermarkHorizontalAlignments = Object.values(WATERMARK_HORIZONTAL_ALIGNMENTS);
readonly watermarkVerticalAlignments = Object.values(WATERMARK_VERTICAL_ALIGNMENTS);
currentAlignment: WatermarkAlignment = {
horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS,
vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS,
};
currentAlignment: WatermarkAlignment;
constructor(
private readonly _http: HttpClient,
@ -143,7 +139,8 @@ export class WatermarkScreenComponent implements OnInit {
fontSize: [null],
fontType: [null],
orientation: [null],
alignment: [null],
horizontalTextAlignment: [null],
verticalTextAlignment: [null],
});
if (!this.currentUser.isAdmin || !this.permissionsService.has(ROLES.watermarks.write)) {
@ -208,21 +205,13 @@ export class WatermarkScreenComponent implements OnInit {
}
async alignHorizontally(alignment: WatermarkHorizontalAlignment) {
const formValue = this.form.controls['alignment'].value;
this.form.controls['alignment'].setValue({
...formValue,
horizontal: alignment,
});
this.form.controls['horizontalTextAlignment'].setValue(alignment);
this.currentAlignment.horizontal = alignment;
await this.configChanged();
}
async alignVertically(alignment: WatermarkVerticalAlignment) {
const formValue = this.form.controls['alignment'].value;
this.form.controls['alignment'].setValue({
...formValue,
vertical: alignment,
});
this.form.controls['verticalTextAlignment'].setValue(alignment);
this.currentAlignment.vertical = alignment;
await this.configChanged();
}
@ -230,6 +219,10 @@ export class WatermarkScreenComponent implements OnInit {
async #initForm(watermark: Partial<IWatermark>) {
this.#watermark = { ...watermark, dossierTemplateId: this.#dossierTemplateId };
this.form.patchValue({ ...watermark });
this.currentAlignment = {
horizontal: this.#watermark.horizontalTextAlignment,
vertical: this.#watermark.verticalTextAlignment,
};
}
async #loadViewer() {
@ -285,8 +278,9 @@ export class WatermarkScreenComponent implements OnInit {
this.form.controls.text.value || '',
this.form.controls.fontSize.value,
this.form.controls.fontType.value,
this.form.controls.alignment.value,
this.form.controls.orientation.value,
this.form.controls.horizontalTextAlignment.value,
this.form.controls.verticalTextAlignment.value,
this.form.controls.opacity.value,
this.form.controls.hexColor.value,
[1, 2],

12
apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts
View File

@ -59,11 +59,9 @@ export class StampService {
this._translateService.instant('file-preview.excluded-from-redaction') as string,
17,
'courier',
{
horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS,
vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS,
},
'TOP_LEFT',
WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER,
WATERMARK_VERTICAL_ALIGNMENTS.CENTER,
50,
'#dd4d50',
excludedPages,
@ -80,11 +78,9 @@ export class StampService {
watermark.text,
watermark.fontSize,
watermark.fontType,
{
horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS,
vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS,
},
watermark.orientation,
watermark.horizontalTextAlignment,
watermark.verticalTextAlignment,
watermark.opacity,
watermark.hexColor,
Array.from({ length: await document.getPageCount() }, (_x, i) => i + 1),

6
apps/red-ui/src/app/modules/file-preview/utils/compare-mode.utils.ts
View File

@ -27,11 +27,9 @@ export const processPage = async (
'<< Compare Placeholder Page >>',
20,
'courier',
{
horizontal: WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS,
vertical: WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS,
},
'DIAGONAL',
WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER,
WATERMARK_VERTICAL_ALIGNMENTS.CENTER,
33,
'#ffb83b',
[await mergedDocument.getPageCount()],

12
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -13,12 +13,12 @@ export class IconsModule {
const icons = [
'ai',
'alert-circle',
'align-bottom',
'align-horizontal-centers',
'align-left',
'align-right',
'align-top',
'align-vertical-centers',
'align-horizontal-center',
'align-horizontal-left',
'align-horizontal-right',
'align-vertical-bottom',
'align-vertical-center',
'align-vertical-top',
'approved',
'archive',
'arrow-up',

18
apps/red-ui/src/app/translations/watermark-translations.ts
View File

@ -1,11 +1,15 @@
import { WatermarkAlignment, WatermarkHorizontalAlignment, WatermarkVerticalAlignment } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
export const watermarkTranslations: { readonly [key in WatermarkHorizontalAlignment & WatermarkVerticalAlignment]?: string } = {
'align-left': _('watermark-screen.alignment.align-left'),
'align-horizontal-centers': _('watermark-screen.alignment.align-horizontal-centers'),
'align-right': _('watermark-screen.alignment.align-right'),
'align-top': _('watermark-screen.alignment.align-top'),
'align-vertical-centers': 'watermark-screen.alignment.align-vertical-centers',
'align-bottom': _('watermark-screen.alignment.align-bottom'),
export const watermarkTranslations: Record<string, Record<string, string>> = {
HORIZONTAL: {
LEFT: _('watermark-screen.alignment.align-left'),
CENTER: _('watermark-screen.alignment.align-horizontal-centers'),
RIGHT: _('watermark-screen.alignment.align-right'),
},
VERTICAL: {
TOP: _('watermark-screen.alignment.align-top'),
CENTER: 'watermark-screen.alignment.align-vertical-centers',
BOTTOM: _('watermark-screen.alignment.align-bottom'),
},
} as const;

27
apps/red-ui/src/app/utils/page-stamper.ts
View File

@ -1,7 +1,12 @@
import { hexToRgb } from './functions';
import { Core } from '@pdftron/webviewer';
import PDFDoc = Core.PDFNet.PDFDoc;
import { WATERMARK_HORIZONTAL_ALIGNMENTS, WATERMARK_VERTICAL_ALIGNMENTS, WatermarkAlignment } from '@red/domain';
import {
WATERMARK_HORIZONTAL_ALIGNMENTS,
WATERMARK_VERTICAL_ALIGNMENTS,
WatermarkHorizontalAlignment,
WatermarkVerticalAlignment,
} from '@red/domain';
async function createPageSet(pdfNet: typeof Core.PDFNet, pages: number[]) {
const pageSet = await pdfNet.PageSet.create();
@ -39,8 +44,9 @@ export async function stampPDFPage(
text: string,
fontSize: number,
fontType: string,
alignment: WatermarkAlignment,
orientation: 'DIAGONAL' | 'HORIZONTAL' | 'VERTICAL' | 'TOP_LEFT',
horizontalTextAlignment: WatermarkHorizontalAlignment,
verticalTextAlignment: WatermarkVerticalAlignment,
opacity: number,
color: string,
pages: number[],
@ -61,27 +67,26 @@ export async function stampPDFPage(
let horizontalAlignment: number;
let verticalAlignment: number;
console.log(alignment);
switch (alignment.horizontal) {
case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_LEFT:
switch (horizontalTextAlignment) {
case WATERMARK_HORIZONTAL_ALIGNMENTS.LEFT:
horizontalAlignment = -1;
break;
case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_HORIZONTAL_CENTERS:
case WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER:
horizontalAlignment = 0;
break;
case WATERMARK_HORIZONTAL_ALIGNMENTS.ALIGN_RIGHT:
case WATERMARK_HORIZONTAL_ALIGNMENTS.RIGHT:
horizontalAlignment = 1;
break;
}
switch (alignment.vertical) {
case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_TOP:
switch (verticalTextAlignment) {
case WATERMARK_VERTICAL_ALIGNMENTS.TOP:
verticalAlignment = 1;
break;
case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_VERTICAL_CENTERS:
case WATERMARK_VERTICAL_ALIGNMENTS.CENTER:
verticalAlignment = 0;
break;
case WATERMARK_VERTICAL_ALIGNMENTS.ALIGN_BOTTOM:
case WATERMARK_VERTICAL_ALIGNMENTS.BOTTOM:
verticalAlignment = -1;
break;
}

0
apps/red-ui/src/assets/icons/general/align-horizontal-centers.svg → apps/red-ui/src/assets/icons/general/align-horizontal-center.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 247 B

After

Width:  |  Height:  |  Size: 247 B

0
apps/red-ui/src/assets/icons/general/align-left.svg → apps/red-ui/src/assets/icons/general/align-horizontal-left.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 B

After

Width:  |  Height:  |  Size: 245 B

0
apps/red-ui/src/assets/icons/general/align-right.svg → apps/red-ui/src/assets/icons/general/align-horizontal-right.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 B

After

Width:  |  Height:  |  Size: 246 B

0
apps/red-ui/src/assets/icons/general/align-bottom.svg → apps/red-ui/src/assets/icons/general/align-vertical-bottom.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 306 B

After

Width:  |  Height:  |  Size: 306 B

0
apps/red-ui/src/assets/icons/general/align-vertical-centers.svg → apps/red-ui/src/assets/icons/general/align-vertical-center.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 296 B

0
apps/red-ui/src/assets/icons/general/align-top.svg → apps/red-ui/src/assets/icons/general/align-vertical-top.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 304 B

16
libs/red-domain/src/lib/watermarks/watermark.model.ts
View File

@ -1,4 +1,12 @@
import { IWatermark, WatermarkAlignment, WatermarkOrientation } from './watermark';
import {
IWatermark,
WATERMARK_HORIZONTAL_ALIGNMENTS,
WATERMARK_VERTICAL_ALIGNMENTS,
WatermarkAlignment,
WatermarkHorizontalAlignment,
WatermarkOrientation,
WatermarkVerticalAlignment,
} from './watermark';
import { Entity } from '@iqser/common-ui';
export class Watermark extends Entity<IWatermark, number> {
@ -10,7 +18,8 @@ export class Watermark extends Entity<IWatermark, number> {
readonly hexColor: string;
readonly opacity: number;
readonly orientation: WatermarkOrientation;
readonly alignment: WatermarkAlignment;
readonly horizontalTextAlignment: WatermarkHorizontalAlignment;
readonly verticalTextAlignment: WatermarkVerticalAlignment;
readonly text: string;
readonly name: string;
readonly createdBy?: string;
@ -29,7 +38,8 @@ export class Watermark extends Entity<IWatermark, number> {
this.hexColor = watermark.hexColor;
this.opacity = watermark.opacity;
this.orientation = watermark.orientation;
this.alignment = watermark.alignment;
this.horizontalTextAlignment = watermark.horizontalTextAlignment ?? WATERMARK_HORIZONTAL_ALIGNMENTS.CENTER;
this.verticalTextAlignment = watermark.verticalTextAlignment ?? WATERMARK_VERTICAL_ALIGNMENTS.CENTER;
this.text = watermark.text;
this.name = watermark.name;
this.createdBy = watermark.createdBy;

15
libs/red-domain/src/lib/watermarks/watermark.ts
View File

@ -7,7 +7,8 @@ export interface IWatermark {
hexColor: string;
opacity: number;
orientation: WatermarkOrientation;
alignment: WatermarkAlignment;
horizontalTextAlignment: WatermarkHorizontalAlignment;
verticalTextAlignment: WatermarkVerticalAlignment;
text: string;
name: string;
createdBy?: string;
@ -16,17 +17,17 @@ export interface IWatermark {
}
export const WATERMARK_HORIZONTAL_ALIGNMENTS = {
ALIGN_LEFT: 'align-left',
ALIGN_HORIZONTAL_CENTERS: 'align-horizontal-centers',
ALIGN_RIGHT: 'align-right',
LEFT: 'LEFT',
CENTER: 'CENTER',
RIGHT: 'RIGHT',
} as const;
export type WatermarkHorizontalAlignmentKey = keyof typeof WATERMARK_HORIZONTAL_ALIGNMENTS;
export type WatermarkHorizontalAlignment = (typeof WATERMARK_HORIZONTAL_ALIGNMENTS)[WatermarkHorizontalAlignmentKey];
export const WATERMARK_VERTICAL_ALIGNMENTS = {
ALIGN_TOP: 'align-top',
ALIGN_VERTICAL_CENTERS: 'align-vertical-centers',
ALIGN_BOTTOM: 'align-bottom',
TOP: 'TOP',
CENTER: 'CENTER',
BOTTOM: 'BOTTOM',
} as const;
export type WatermarkVerticalAlignmentKey = keyof typeof WATERMARK_VERTICAL_ALIGNMENTS;
export type WatermarkVerticalAlignment = (typeof WATERMARK_VERTICAL_ALIGNMENTS)[WatermarkVerticalAlignmentKey];