generated from gxc-solutions/gxc-template-repo
Update models
This commit is contained in:
parent
5f2ce822fc
commit
94a2a89238
12 changed files with 65 additions and 52 deletions
|
|
@ -1,30 +1,10 @@
|
||||||
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
||||||
import { IPoint } from "@gxc-solutions/math";
|
import { IPoint, ITransform } from "@gxc-solutions/math";
|
||||||
import { ISolidFill } from "./fill";
|
import { ISolidFill } from "./fill";
|
||||||
import { IStroke } from "./stroke";
|
import { IStroke } from "./stroke";
|
||||||
|
|
||||||
export type ModelConstructor = new (...args: any[]) => IModel;
|
export type ModelConstructor = new (...args: any[]) => IModel;
|
||||||
|
|
||||||
export type TypeOfModel = "collection-model" | "ellipse-model" | "rectangle-model" | "image-model" | "text-object";
|
|
||||||
|
|
||||||
export interface IModel {
|
|
||||||
readonly id: UUID_V4;
|
|
||||||
readonly type: TypeOfModel;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ITransform {
|
|
||||||
scaleX: number;
|
|
||||||
scaleY: number;
|
|
||||||
|
|
||||||
translateY: number;
|
|
||||||
translateX: number;
|
|
||||||
|
|
||||||
skewY: number;
|
|
||||||
skewX: number;
|
|
||||||
|
|
||||||
rotate: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IEllipse {
|
export interface IEllipse {
|
||||||
radiusX: number;
|
radiusX: number;
|
||||||
radiusY: number;
|
radiusY: number;
|
||||||
|
|
@ -38,7 +18,15 @@ export interface IRectangle {
|
||||||
left: number;
|
left: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type TypeOfModel = "collection-model" | "ellipse-model" | "rectangle-model" | "image-model" | "text-object";
|
||||||
|
|
||||||
|
export interface IModel {
|
||||||
|
readonly id: UUID_V4;
|
||||||
|
readonly type: TypeOfModel;
|
||||||
|
}
|
||||||
|
|
||||||
export interface IEllipseModel extends IModel {
|
export interface IEllipseModel extends IModel {
|
||||||
|
readonly type: "ellipse-model";
|
||||||
ellipse: IEllipse;
|
ellipse: IEllipse;
|
||||||
transform: ITransform;
|
transform: ITransform;
|
||||||
stroke: IStroke;
|
stroke: IStroke;
|
||||||
|
|
@ -48,6 +36,7 @@ export interface IEllipseModel extends IModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IRectangleModel extends IModel {
|
export interface IRectangleModel extends IModel {
|
||||||
|
readonly type: "rectangle-model";
|
||||||
rectangle: IRectangle;
|
rectangle: IRectangle;
|
||||||
transform: ITransform;
|
transform: ITransform;
|
||||||
stroke: IStroke;
|
stroke: IStroke;
|
||||||
|
|
@ -57,6 +46,7 @@ export interface IRectangleModel extends IModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IImageModel extends IModel {
|
export interface IImageModel extends IModel {
|
||||||
|
readonly type: "image-model";
|
||||||
rectangle: IRectangle;
|
rectangle: IRectangle;
|
||||||
transform: ITransform;
|
transform: ITransform;
|
||||||
stroke: IStroke;
|
stroke: IStroke;
|
||||||
|
|
|
||||||
7
lib/src/interfaces/state.ts
Normal file
7
lib/src/interfaces/state.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export interface ISelectableObject {
|
||||||
|
isSelected: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IVisibleObject {
|
||||||
|
isVisible: boolean;
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@ import { ignore } from "../../decorators";
|
||||||
import { TypeOfModel } from "../../interfaces";
|
import { TypeOfModel } from "../../interfaces";
|
||||||
import { uuidv4, UUID_V4 } from "@gxc-solutions/lett-js/web-api/uuidv4";
|
import { uuidv4, UUID_V4 } from "@gxc-solutions/lett-js/web-api/uuidv4";
|
||||||
|
|
||||||
export abstract class BaseItem {
|
export abstract class BaseModel {
|
||||||
@ignore readonly id: UUID_V4;
|
@ignore readonly id: UUID_V4;
|
||||||
abstract readonly type: TypeOfModel;
|
abstract readonly type: TypeOfModel;
|
||||||
name = "";
|
name = "";
|
||||||
|
|
@ -14,5 +14,5 @@ export abstract class BaseItem {
|
||||||
|
|
||||||
tags: Record<string, any> = {};
|
tags: Record<string, any> = {};
|
||||||
|
|
||||||
abstract copy(): BaseItem;
|
abstract copy(): BaseModel;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import { Ellipse, Point, Transform } from "@gxc-solutions/math";
|
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
||||||
|
import { Ellipse, getBounds, Point, Transform } from "@gxc-solutions/math";
|
||||||
|
import { ignore } from "../../decorators";
|
||||||
import { TypeOfModel } from "../../interfaces";
|
import { TypeOfModel } from "../../interfaces";
|
||||||
import { SolidFill } from "../solid-fill";
|
import { SolidFill } from "../solid-fill";
|
||||||
import { Stroke } from "../stroke";
|
import { Stroke } from "../stroke";
|
||||||
import { BaseItem } from "./base";
|
import { BaseModel } from "./base";
|
||||||
import { ignore } from "../../decorators";
|
import { ISelectableObject } from "../../interfaces/state";
|
||||||
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
|
||||||
|
|
||||||
export class EllipseObject extends BaseItem {
|
export class EllipseObject extends BaseModel implements ISelectableObject {
|
||||||
@ignore readonly type: TypeOfModel = "ellipse-model";
|
@ignore readonly type: TypeOfModel = "ellipse-model";
|
||||||
|
|
||||||
transform = new Transform();
|
transform = new Transform();
|
||||||
|
|
@ -23,6 +24,10 @@ export class EllipseObject extends BaseItem {
|
||||||
stroke = new Stroke();
|
stroke = new Stroke();
|
||||||
fill = new SolidFill();
|
fill = new SolidFill();
|
||||||
|
|
||||||
|
get bounds() {
|
||||||
|
return getBounds(this.ellipse.toRectangle(), this.transform);
|
||||||
|
}
|
||||||
|
|
||||||
constructor(id?: UUID_V4) {
|
constructor(id?: UUID_V4) {
|
||||||
super(id);
|
super(id);
|
||||||
}
|
}
|
||||||
|
|
@ -1,17 +1,23 @@
|
||||||
import { Rectangle, Transform } from "@gxc-solutions/math";
|
import { getBounds, Rectangle, Transform } from "@gxc-solutions/math";
|
||||||
import { ignore } from "../../decorators";
|
import { ignore } from "../../decorators";
|
||||||
import { TypeOfModel } from "../../interfaces";
|
import { TypeOfModel } from "../../interfaces";
|
||||||
import { Stroke } from "../stroke";
|
import { Stroke } from "../stroke";
|
||||||
import { BaseItem } from "./base";
|
import { BaseModel } from "./base";
|
||||||
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
||||||
import { SolidFill } from "../solid-fill";
|
import { SolidFill } from "../solid-fill";
|
||||||
|
import { ISelectableObject } from "../../interfaces/state";
|
||||||
|
|
||||||
export class ImageItem extends BaseItem {
|
export class ImageItem extends BaseModel implements ISelectableObject {
|
||||||
@ignore readonly type: TypeOfModel = "image-model";
|
@ignore readonly type: TypeOfModel = "image-model";
|
||||||
|
|
||||||
transform = new Transform();
|
transform = new Transform();
|
||||||
rectangle = new Rectangle();
|
rectangle = new Rectangle();
|
||||||
|
|
||||||
|
isSelected = false;
|
||||||
|
|
||||||
|
isVisible = true;
|
||||||
|
isLocked = false;
|
||||||
|
|
||||||
stroke = new Stroke();
|
stroke = new Stroke();
|
||||||
fill = new SolidFill();
|
fill = new SolidFill();
|
||||||
|
|
||||||
|
|
@ -24,14 +30,15 @@ export class ImageItem extends BaseItem {
|
||||||
url: string;
|
url: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
isLocked = false;
|
get bounds() {
|
||||||
isSelected = false;
|
return getBounds(this.rectangle, this.transform);
|
||||||
|
}
|
||||||
|
|
||||||
constructor(id?: UUID_V4) {
|
constructor(id?: UUID_V4) {
|
||||||
super(id);
|
super(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
copy(): BaseItem {
|
copy(): BaseModel {
|
||||||
throw new Error("Method not implemented.");
|
throw new Error("Method not implemented.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export * from "./base";
|
export * from "./base";
|
||||||
export * from "./ellipce";
|
export * from "./ellipse";
|
||||||
export * from "./image";
|
export * from "./image";
|
||||||
export * from "./rectangle";
|
export * from "./rectangle";
|
||||||
export * from "./text";
|
export * from "./text";
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
import { Rectangle, Transform } from "@gxc-solutions/math";
|
import { getBounds, Rectangle, Transform } from "@gxc-solutions/math";
|
||||||
import { ignore } from "../../decorators";
|
import { ignore } from "../../decorators";
|
||||||
import { BaseItem } from "./base";
|
import { BaseModel } from "./base";
|
||||||
import { Stroke } from "../stroke";
|
import { Stroke } from "../stroke";
|
||||||
import { SolidFill } from "../solid-fill";
|
import { SolidFill } from "../solid-fill";
|
||||||
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
import { UUID_V4 } from "@gxc-solutions/lett-js";
|
||||||
|
import { ISelectableObject } from "../../interfaces/state";
|
||||||
|
|
||||||
export class RectangleItem extends BaseItem {
|
export class RectangleItem extends BaseModel implements ISelectableObject {
|
||||||
@ignore readonly type = "rectangle-model";
|
@ignore readonly type = "rectangle-model";
|
||||||
|
|
||||||
transform = new Transform();
|
transform = new Transform();
|
||||||
|
|
@ -22,11 +23,15 @@ export class RectangleItem extends BaseItem {
|
||||||
stroke = new Stroke();
|
stroke = new Stroke();
|
||||||
fill = new SolidFill();
|
fill = new SolidFill();
|
||||||
|
|
||||||
|
get bounds() {
|
||||||
|
return getBounds(this.rectangle, this.transform);
|
||||||
|
}
|
||||||
|
|
||||||
constructor(id?: UUID_V4) {
|
constructor(id?: UUID_V4) {
|
||||||
super(id);
|
super(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
copy(): BaseItem {
|
copy(): BaseModel {
|
||||||
throw new Error("Not implemented!");
|
throw new Error("Not implemented!");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { ignore } from "../../decorators";
|
import { ignore } from "../../decorators";
|
||||||
import { BaseItem } from "./base";
|
import { BaseModel } from "./base";
|
||||||
|
|
||||||
export class TextItem extends BaseItem {
|
export class TextItem extends BaseModel {
|
||||||
@ignore readonly type = "text-object";
|
@ignore readonly type = "text-object";
|
||||||
|
|
||||||
isSelected = false;
|
isSelected = false;
|
||||||
|
|
@ -20,7 +20,7 @@ export class TextItem extends BaseItem {
|
||||||
// lineHeight: number; // ~leading
|
// lineHeight: number; // ~leading
|
||||||
// letterSpacing: number; // ~tracking
|
// letterSpacing: number; // ~tracking
|
||||||
|
|
||||||
copy(): BaseItem {
|
copy(): BaseModel {
|
||||||
throw new Error("Method not implemented.");
|
throw new Error("Method not implemented.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@gxc-solutions/model-base",
|
"name": "@gxc-solutions/model-base",
|
||||||
"version": "0.0.4",
|
"version": "0.0.5",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"author": "GXC Solutions",
|
"author": "GXC Solutions",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@gxc-solutions/colors": "0.0.1",
|
"@gxc-solutions/colors": "0.0.1",
|
||||||
"@gxc-solutions/lett-js": "^1.0.1",
|
"@gxc-solutions/lett-js": "^1.0.1",
|
||||||
"@gxc-solutions/math": "^0.0.2",
|
"@gxc-solutions/math": "^0.0.3",
|
||||||
"reflect-metadata": "^0.2.2"
|
"reflect-metadata": "^0.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,14 +13,13 @@ import {
|
||||||
IRgbColor,
|
IRgbColor,
|
||||||
ISolidFill,
|
ISolidFill,
|
||||||
IStroke,
|
IStroke,
|
||||||
ITransform,
|
|
||||||
TypeOfModel,
|
TypeOfModel,
|
||||||
} from "./interfaces";
|
} from "./interfaces";
|
||||||
import { EllipseObject } from "./models/objects/ellipce";
|
import { EllipseObject } from "./models/objects/ellipse";
|
||||||
import { ImageItem } from "./models/objects/image";
|
import { ImageItem } from "./models/objects/image";
|
||||||
import { Stroke } from "./models/stroke";
|
import { Stroke } from "./models/stroke";
|
||||||
import { SolidFill } from "./models/solid-fill";
|
import { SolidFill } from "./models/solid-fill";
|
||||||
import { Ellipse, Rectangle, Transform } from "@gxc-solutions/math";
|
import { Ellipse, ITransform, Rectangle, Transform } from "@gxc-solutions/math";
|
||||||
import { RectangleItem } from "./models/objects/rectangle";
|
import { RectangleItem } from "./models/objects/rectangle";
|
||||||
import { RgbColor } from "@gxc-solutions/colors";
|
import { RgbColor } from "@gxc-solutions/colors";
|
||||||
|
|
||||||
|
|
|
||||||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -11,7 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gxc-solutions/colors": "0.0.1",
|
"@gxc-solutions/colors": "0.0.1",
|
||||||
"@gxc-solutions/lett-js": "^1.0.1",
|
"@gxc-solutions/lett-js": "^1.0.1",
|
||||||
"@gxc-solutions/math": "^0.0.2",
|
"@gxc-solutions/math": "^0.0.3",
|
||||||
"reflect-metadata": "^0.2.2"
|
"reflect-metadata": "^0.2.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -708,9 +708,9 @@
|
||||||
"integrity": "sha512-wmRXERIrb3md5G3OI4dEBQmzh005meLm7EMK5K5U1eFX+GjuhAGSm/Wi/eag0LQmjy+L1R9koxsuhzN2vTfigA=="
|
"integrity": "sha512-wmRXERIrb3md5G3OI4dEBQmzh005meLm7EMK5K5U1eFX+GjuhAGSm/Wi/eag0LQmjy+L1R9koxsuhzN2vTfigA=="
|
||||||
},
|
},
|
||||||
"node_modules/@gxc-solutions/math": {
|
"node_modules/@gxc-solutions/math": {
|
||||||
"version": "0.0.2",
|
"version": "0.0.3",
|
||||||
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.2.tgz",
|
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.3.tgz",
|
||||||
"integrity": "sha512-R6zYvbspis+XoHZ7lwyVLAUGZkJwivbeo94VtN7cSZzOA86AgVev+UQeHt9S1Ua4d1FwgxYVasck1/l5WXR7CQ=="
|
"integrity": "sha512-B39/C/3YzfSbLgsf0sBpZILTSO8TIZVbh6tv3pXulG1qDL1tg41mLjp7M263MsC7ARzj7ME8WWsniBj0C4L+XA=="
|
||||||
},
|
},
|
||||||
"node_modules/@humanfs/core": {
|
"node_modules/@humanfs/core": {
|
||||||
"version": "0.19.1",
|
"version": "0.19.1",
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@gxc-solutions/colors": "0.0.1",
|
"@gxc-solutions/colors": "0.0.1",
|
||||||
"@gxc-solutions/lett-js": "^1.0.1",
|
"@gxc-solutions/lett-js": "^1.0.1",
|
||||||
"@gxc-solutions/math": "^0.0.2",
|
"@gxc-solutions/math": "^0.0.3",
|
||||||
"reflect-metadata": "^0.2.2"
|
"reflect-metadata": "^0.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue