mirror/niimblue
1
0
Fork 0
mirror of https://github.com/MultiMote/niimblue synced 2026-01-19 19:37:11 +03:00
Code Issues Projects Releases Wiki Activity

Extract some constants

Browse Source
This commit is contained in:
MultiMote
2024-10-24 17:36:26 +03:00
parent 648a8bbebd
commit bd110a6dfb
6 changed files with 77 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/defaults.ts
View File

@@ -1,6 +1,52 @@
import type { LabelPreset } from "./types";
import type { LabelPreset, LabelProps } from "./types";
/** Default presets for LabelPropsEditor */
export const DEFAULT_LABEL_PRESETS: LabelPreset[] = [
{ width: 30, height: 12, unit: "mm", dpmm: 8, printDirection: "left" },
{ width: 50, height: 30, unit: "mm", dpmm: 8, printDirection: "top" },
];
/** Default canvas dimensions */
export const DEFAULT_LABEL_PROPS: LabelProps = {
printDirection: "left",
size: {
width: 240,
height: 96,
},
};
/** Object movement snapping */
export const GRID_SIZE: number = 5;
/** Newly created Fabric object dimensions */
export const OBJECT_SIZE_DEFAULTS = {
width: 64,
height: 64,
};
/** Newly created Fabric object common properties */
export const OBJECT_DEFAULTS = {
snapAngle: 10,
top: 10,
left: 10,
};
/** Newly created Fabric vector object properties */
export const OBJECT_DEFAULTS_VECTOR = {
...OBJECT_DEFAULTS,
fill: "transparent",
stroke: "black",
strokeWidth: 3,
strokeUniform: true,
};
/** Newly created Fabric text object properties */
export const OBJECT_DEFAULTS_TEXT = {
...OBJECT_DEFAULTS,
fill: "black",
fontFamily: "Noto Sans Variable",
textAlign: "center",
originX: "center",
originY: "center",
lineHeight: 1,
};

3
src/fabric-object/barcode.class.ts
View File

@@ -1,6 +1,7 @@
import { fabric } from "fabric";
import { code128b, ean13 } from "../utils/barcode";
import { equalSpacingFillText } from "../utils/canvas_utils";
import { OBJECT_DEFAULTS_TEXT } from "../defaults";
const ALL_PROPERTIES = ["text", "encoding", "printText", "scaleFactor", "fontSize", "font", "fontFamily"];
const EAN13_LONG_BAR_INDEXES: number[] = [0, 1, 2, 45, 46, 47, 48, 49, 92, 93, 94];
@@ -49,7 +50,7 @@ export class Barcode extends fabric.Object {
this.printText = options?.printText ?? true;
this.scaleFactor = options?.scaleFactor ?? 1;
this.fontSize = options?.fontSize ?? 12;
this.fontFamily = options?.fontFamily ?? "Noto Sans Variable";
this.fontFamily = options?.fontFamily ?? OBJECT_DEFAULTS_TEXT.fontFamily;
this._createBandCode();
}

9
src/lib/ImageEditor.svelte
View File

@@ -32,12 +32,11 @@
import TextParamsPanel from "./TextParamsControls.svelte";
import VariableInsertControl from "./VariableInsertControl.svelte";
import ZplImportButton from "./ZplImportButton.svelte";
const GRID_SIZE: number = 5;
import { DEFAULT_LABEL_PROPS, GRID_SIZE, OBJECT_DEFAULTS } from "../defaults";
let htmlCanvas: HTMLCanvasElement;
let fabricCanvas: fabric.Canvas;
let labelProps: LabelProps = { printDirection: "left", size: { width: 240, height: 96 } };
let labelProps: LabelProps = DEFAULT_LABEL_PROPS;
let previewOpened: boolean = false;
let selectedObject: fabric.Object | undefined = undefined;
let selectedCount: number = 0;
@@ -73,7 +72,7 @@
const cloneSelected = () => {
if (selectedObject) {
selectedObject.clone((obj: fabric.Object) => {
obj.snapAngle = 10;
obj.snapAngle = OBJECT_DEFAULTS.snapAngle;
obj.top! += GRID_SIZE;
obj.left! += GRID_SIZE;
fabricCanvas.add(obj);
@@ -250,7 +249,7 @@
reader.onload = (readerEvt: ProgressEvent<FileReader>) => {
if (readerEvt?.target?.result) {
fabric.Image.fromURL(readerEvt.target.result as string, (img: fabric.Image) => {
img.set({ left: 0, top: 0, snapAngle: 10 });
img.set({ left: 0, top: 0, snapAngle: OBJECT_DEFAULTS.snapAngle });
fabricCanvas.add(img);
undo.push(fabricCanvas, labelProps);
});

6
src/lib/TextParamsControls.svelte
View File

@@ -3,14 +3,14 @@
import { tr } from "../utils/i18n";
import MdIcon from "./MdIcon.svelte";
import { Toasts } from "../utils/toasts";
import { OBJECT_DEFAULTS_TEXT } from "../defaults";
export let selectedObject: fabric.Object;
export let valueUpdated: () => void;
const DEFAULT_FONT = "Noto Sans Variable";
let selectedText: fabric.IText | undefined;
let fontFamilies: string[] = [DEFAULT_FONT];
let fontFamilies: string[] = [OBJECT_DEFAULTS_TEXT.fontFamily];
const toggleBold = () => {
if (selectedText!.fontWeight === "bold") {
@@ -77,7 +77,7 @@
const getFonts = async () => {
try {
const fonts = await queryLocalFonts();
fontFamilies = [DEFAULT_FONT, ...new Set(fonts.map((f: FontData) => f.family))].sort();
fontFamilies = [OBJECT_DEFAULTS_TEXT.fontFamily, ...new Set(fonts.map((f: FontData) => f.family))].sort();
console.log(fontFamilies);
} catch (e) {
Toasts.error(e);

3
src/utils/file_utils.ts
View File

@@ -1,5 +1,6 @@
import type { fabric } from "fabric";
import { ExportedLabelTemplateSchema, type ExportedLabelTemplate, type FabricJson, type LabelProps } from "../types";
import { OBJECT_DEFAULTS } from "../defaults";
export class FileUtils {
/** Convert label template to JSON and download it */
@@ -69,7 +70,7 @@ export class FileUtils {
resolve();
},
(src: object, obj: fabric.Object, error: any) => {
obj.set({ snapAngle: 10 });
obj.set({ snapAngle: OBJECT_DEFAULTS.snapAngle });
}
);
});

72
src/utils/image_editor_object_helper.ts
View File

@@ -3,24 +3,14 @@ import type { ITextOptions, TextOptions } from "fabric/fabric-impl";
import Barcode from "../fabric-object/barcode.class";
import { QRCode } from "../fabric-object/qrcode.class";
import type { OjectType } from "../types";
import { OBJECT_DEFAULTS, OBJECT_DEFAULTS_TEXT, OBJECT_DEFAULTS_VECTOR, OBJECT_SIZE_DEFAULTS } from "../defaults";
export class ImageEditorObjectHelper {
static readonly SIZE_DEFAULT: number = 64;
static readonly OBJECT_DEFAULTS = {
fill: "black",
snapAngle: 10,
top: 10,
left: 10,
strokeUniform: true,
};
static addSvg(canvas: fabric.Canvas, svgCode: string): void {
fabric.loadSVGFromString(svgCode, (objects, options) => {
const obj = fabric.util.groupSVGElements(objects, options);
obj.scaleToWidth(this.SIZE_DEFAULT).scaleToHeight(this.SIZE_DEFAULT);
obj.set({ ...this.OBJECT_DEFAULTS, top: 0, left: 0 });
obj.scaleToWidth(OBJECT_SIZE_DEFAULTS.width).scaleToHeight(OBJECT_SIZE_DEFAULTS.height);
obj.set({ ...OBJECT_DEFAULTS });
canvas.add(obj).renderAll();
canvas.renderAll();
});
@@ -45,8 +35,8 @@ export class ImageEditorObjectHelper {
reader.onload = (readerEvt: ProgressEvent<FileReader>) => {
if (readerEvt?.target?.result) {
fabric.Image.fromURL(readerEvt.target.result as string, (img: fabric.Image) => {
img.set({ left: 0, top: 0, snapAngle: 10 });
img.scaleToHeight(this.SIZE_DEFAULT).scaleToHeight(this.SIZE_DEFAULT);
img.set({ ...OBJECT_DEFAULTS });
img.scaleToHeight(OBJECT_SIZE_DEFAULTS.width).scaleToHeight(OBJECT_SIZE_DEFAULTS.height);
canvas.add(img);
});
}
@@ -76,12 +66,7 @@ export class ImageEditorObjectHelper {
static addText(canvas: fabric.Canvas, text?: string, options?: ITextOptions): fabric.IText {
const obj = new fabric.IText(text ?? "Text", {
...this.OBJECT_DEFAULTS,
fontFamily: "Noto Sans Variable",
textAlign: "center",
originX: "center",
originY: "center",
lineHeight: 1,
...OBJECT_DEFAULTS_TEXT,
...options,
});
canvas.add(obj);
@@ -91,12 +76,7 @@ export class ImageEditorObjectHelper {
static addStaticText(canvas: fabric.Canvas, text?: string, options?: TextOptions): fabric.Text {
const obj = new fabric.Text(text ?? "Text", {
...this.OBJECT_DEFAULTS,
fontFamily: "Noto Sans Variable",
textAlign: "center",
originX: "center",
originY: "center",
lineHeight: 1,
...OBJECT_DEFAULTS_TEXT,
...options,
});
canvas.add(obj);
@@ -105,11 +85,10 @@ export class ImageEditorObjectHelper {
}
static addHLine(canvas: fabric.Canvas): fabric.Line {
const obj = new fabric.Line([10, 10, 10 + this.SIZE_DEFAULT, 10], {
...this.OBJECT_DEFAULTS,
stroke: "#000",
strokeWidth: 3,
});
const obj = new fabric.Line(
[OBJECT_DEFAULTS.left, OBJECT_DEFAULTS.top, OBJECT_DEFAULTS.left + OBJECT_SIZE_DEFAULTS.width, OBJECT_DEFAULTS.top],
{ ...OBJECT_DEFAULTS_VECTOR }
);
obj.setControlsVisibility({
tl: false,
bl: false,
@@ -125,11 +104,8 @@ export class ImageEditorObjectHelper {
static addCircle(canvas: fabric.Canvas): fabric.Circle {
const obj = new fabric.Circle({
...this.OBJECT_DEFAULTS,
radius: this.SIZE_DEFAULT / 2,
fill: "transparent",
stroke: "black",
strokeWidth: 3,
...OBJECT_DEFAULTS_VECTOR,
radius: OBJECT_SIZE_DEFAULTS.width / 2,
});
canvas.add(obj);
obj.centerV();
@@ -138,12 +114,8 @@ export class ImageEditorObjectHelper {
static addRect(canvas: fabric.Canvas): fabric.Rect {
const obj = new fabric.Rect({
...this.OBJECT_DEFAULTS,
width: this.SIZE_DEFAULT,
height: this.SIZE_DEFAULT,
fill: "transparent",
stroke: "black",
strokeWidth: 3,
...OBJECT_SIZE_DEFAULTS,
...OBJECT_DEFAULTS_VECTOR,
});
canvas.add(obj);
obj.centerV();
@@ -153,11 +125,8 @@ export class ImageEditorObjectHelper {
static addQrCode(canvas: fabric.Canvas): QRCode {
const qr = new QRCode({
text: "NiimBlue",
top: this.OBJECT_DEFAULTS.top,
left: this.OBJECT_DEFAULTS.left,
width: this.SIZE_DEFAULT,
height: this.SIZE_DEFAULT,
snapAngle: this.OBJECT_DEFAULTS.snapAngle,
...OBJECT_SIZE_DEFAULTS,
...OBJECT_DEFAULTS,
});
canvas.add(qr);
return qr;
@@ -165,12 +134,9 @@ export class ImageEditorObjectHelper {
static addBarcode(canvas: fabric.Canvas): Barcode {
const barcode = new Barcode({
top: this.OBJECT_DEFAULTS.top,
left: this.OBJECT_DEFAULTS.left,
...OBJECT_DEFAULTS,
text: "123456789012",
width: (canvas.width ?? this.SIZE_DEFAULT) - this.OBJECT_DEFAULTS.left * 2,
height: this.SIZE_DEFAULT,
snapAngle: this.OBJECT_DEFAULTS.snapAngle,
height: OBJECT_SIZE_DEFAULTS.height,
encoding: "CODE128B",
});
canvas.add(barcode);