canvas-editor-engine 1.0.38 → 1.0.40
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/canvas.component.js +1 -1
- package/dist/components/excretions.component.js +2 -2
- package/dist/filters/collection/vague.js +4 -4
- package/dist/services/crop.service.js +7 -0
- package/dist/services/store.service.d.ts +6 -0
- package/dist/services/store.service.js +11 -0
- package/dist/services/tool-layers.service.d.ts +1 -1
- package/dist/services/tool-layers.service.js +1 -2
- package/dist/store/image.state.d.ts +14 -0
- package/dist/store/image.state.js +26 -0
- package/dist/store/store.d.ts +10 -0
- package/dist/store/store.js +22 -0
- package/dist/types/general.d.ts +9 -0
- package/dist/types/general.js +1 -0
- package/dist/types/image.d.ts +10 -19
- package/dist/types/image.js +1 -0
- package/dist/utils/filter.d.ts +2 -2
- package/dist/utils/filter.js +1 -1
- package/package.json +1 -1
@@ -12,7 +12,7 @@ class CanvasComponent extends component_service_1.default {
|
|
12
12
|
static css = `
|
13
13
|
#event-listener {
|
14
14
|
position: absolute;
|
15
|
-
z-index: ${tool_layers_service_1.
|
15
|
+
z-index: ${tool_layers_service_1.default.getLayerIndex('normal')};
|
16
16
|
}
|
17
17
|
`;
|
18
18
|
static eventListener;
|
@@ -23,7 +23,7 @@ class ExcretionsComponent extends component_service_1.default {
|
|
23
23
|
background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
|
24
24
|
background-position: left top, right bottom, left bottom, right top;
|
25
25
|
animation: border-dance 1s infinite linear;
|
26
|
-
z-index: ${tool_layers_service_1.
|
26
|
+
z-index: ${tool_layers_service_1.default.getLayerIndex('low')};
|
27
27
|
}
|
28
28
|
|
29
29
|
.excretion_crop {
|
@@ -44,7 +44,7 @@ class ExcretionsComponent extends component_service_1.default {
|
|
44
44
|
width: 30px;
|
45
45
|
height: 30px;
|
46
46
|
cursor: pointer;
|
47
|
-
z-index: ${tool_layers_service_1.
|
47
|
+
z-index: ${tool_layers_service_1.default.getLayerIndex('high')};
|
48
48
|
}
|
49
49
|
|
50
50
|
.crop-button--view {
|
@@ -17,8 +17,8 @@ class VagueFilter extends filter_1.Filter {
|
|
17
17
|
}
|
18
18
|
pixel(imageData, filterOptions) {
|
19
19
|
const imageSize = {
|
20
|
-
|
21
|
-
|
20
|
+
width: imageData.width,
|
21
|
+
height: imageData.height,
|
22
22
|
};
|
23
23
|
this.setImageSize(imageSize);
|
24
24
|
const { quality } = filterOptions;
|
@@ -42,8 +42,8 @@ class VagueFilter extends filter_1.Filter {
|
|
42
42
|
return imageData;
|
43
43
|
}
|
44
44
|
getQualityBuff(buff, quality) {
|
45
|
-
const wq = Math.floor(this.imageSize.
|
46
|
-
const hq = Math.floor(this.imageSize.
|
45
|
+
const wq = Math.floor(this.imageSize.width / quality);
|
46
|
+
const hq = Math.floor(this.imageSize.height / quality);
|
47
47
|
const qualityBuff = [];
|
48
48
|
const rangeCommit = [];
|
49
49
|
let i = 0;
|
@@ -2,6 +2,7 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
const excretions_component_1 = require("../components/excretions.component");
|
4
4
|
const config_1 = require("../config");
|
5
|
+
const store_1 = require("../store/store");
|
5
6
|
const filter_1 = require("../utils/filter");
|
6
7
|
class CropService {
|
7
8
|
static setup() {
|
@@ -19,6 +20,12 @@ class CropService {
|
|
19
20
|
y: (config_1.default.CANVAS_SIZE.height / 2) - (options.height / 2),
|
20
21
|
};
|
21
22
|
filter.update(imageData, putOptions);
|
23
|
+
store_1.default.store.imageState.position = putOptions;
|
24
|
+
store_1.default.store.imageState.size = {
|
25
|
+
width: options.width,
|
26
|
+
height: options.height,
|
27
|
+
};
|
28
|
+
console.log('AppStore.store', store_1.default.store);
|
22
29
|
}
|
23
30
|
static viewCropButton() {
|
24
31
|
const cropButtons = excretions_component_1.default.excretionWrap.querySelectorAll('.crop-button');
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.StoreService = exports.StateService = void 0;
|
4
|
+
class StateService {
|
5
|
+
}
|
6
|
+
exports.StateService = StateService;
|
7
|
+
;
|
8
|
+
class StoreService {
|
9
|
+
}
|
10
|
+
exports.StoreService = StoreService;
|
11
|
+
;
|
@@ -1,6 +1,5 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.ToolLayer = void 0;
|
4
3
|
const config_1 = require("../config");
|
5
4
|
class ToolLayer {
|
6
5
|
static multiplier = 1000;
|
@@ -10,4 +9,4 @@ class ToolLayer {
|
|
10
9
|
return zIndex;
|
11
10
|
}
|
12
11
|
}
|
13
|
-
exports.
|
12
|
+
exports.default = ToolLayer;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { StateService } from "../services/store.service";
|
2
|
+
import { IPosition, ISize } from "../types/general";
|
3
|
+
export interface IImageState {
|
4
|
+
position: IPosition;
|
5
|
+
size: ISize;
|
6
|
+
tempImageData: ImageData | null;
|
7
|
+
}
|
8
|
+
export declare class ImageState implements StateService, IImageState {
|
9
|
+
private default;
|
10
|
+
position: IImageState['position'];
|
11
|
+
size: IImageState['size'];
|
12
|
+
tempImageData: IImageState['tempImageData'];
|
13
|
+
reset(): void;
|
14
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.ImageState = void 0;
|
4
|
+
;
|
5
|
+
class ImageState {
|
6
|
+
default = {
|
7
|
+
position: {
|
8
|
+
x: 0,
|
9
|
+
y: 0,
|
10
|
+
},
|
11
|
+
size: {
|
12
|
+
width: 0,
|
13
|
+
height: 0,
|
14
|
+
},
|
15
|
+
tempImageData: null,
|
16
|
+
};
|
17
|
+
position = this.default.position;
|
18
|
+
size = this.default.size;
|
19
|
+
tempImageData = this.default.tempImageData;
|
20
|
+
reset() {
|
21
|
+
this.position = this.default.position;
|
22
|
+
this.size = this.default.size;
|
23
|
+
this.tempImageData = this.default.tempImageData;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
exports.ImageState = ImageState;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { StoreService } from "../services/store.service";
|
2
|
+
import { ImageState } from "./image.state";
|
3
|
+
export declare class Store implements StoreService {
|
4
|
+
imageState: ImageState;
|
5
|
+
constructor(imageState: ImageState);
|
6
|
+
reset(): void;
|
7
|
+
}
|
8
|
+
export default class AppStore {
|
9
|
+
static store: Store;
|
10
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.Store = void 0;
|
4
|
+
const image_state_1 = require("./image.state");
|
5
|
+
class Store {
|
6
|
+
imageState;
|
7
|
+
constructor(imageState) {
|
8
|
+
this.imageState = imageState;
|
9
|
+
}
|
10
|
+
;
|
11
|
+
reset() {
|
12
|
+
this.imageState.reset();
|
13
|
+
}
|
14
|
+
}
|
15
|
+
exports.Store = Store;
|
16
|
+
class AppStore {
|
17
|
+
static store;
|
18
|
+
static {
|
19
|
+
AppStore.store = new Store(new image_state_1.ImageState());
|
20
|
+
}
|
21
|
+
}
|
22
|
+
exports.default = AppStore;
|
package/dist/types/general.d.ts
CHANGED
@@ -13,3 +13,12 @@ export interface ITool {
|
|
13
13
|
support?: (...args: any) => void;
|
14
14
|
}
|
15
15
|
export type IGUID4 = `${number}-${number}-${number}-${number}`;
|
16
|
+
export interface IPosition {
|
17
|
+
x: number;
|
18
|
+
y: number;
|
19
|
+
}
|
20
|
+
export interface ISize {
|
21
|
+
width: number;
|
22
|
+
height: number;
|
23
|
+
}
|
24
|
+
export type TStringMatrix = string[][];
|
package/dist/types/general.js
CHANGED
package/dist/types/image.d.ts
CHANGED
@@ -1,34 +1,25 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
y: number;
|
1
|
+
import { IPosition, ISize, TStringMatrix } from "./general";
|
2
|
+
export interface IOptionImageSize {
|
4
3
|
width?: number;
|
5
4
|
height?: number;
|
6
5
|
}
|
6
|
+
export interface IImageOptions extends IPosition, IOptionImageSize {
|
7
|
+
}
|
7
8
|
export interface IDrawImageArgs {
|
8
9
|
position: IArgumentImagePosition;
|
9
10
|
size?: TArgumentImageSize;
|
10
11
|
}
|
11
|
-
export interface IArgumentImagePosition {
|
12
|
-
x: number;
|
13
|
-
y: number;
|
14
|
-
}
|
15
|
-
export type TArgumentImageSize = IOptionImageSize | 'initial';
|
16
|
-
export interface IOptionImageSize {
|
17
|
-
width?: number;
|
18
|
-
height?: number;
|
12
|
+
export interface IArgumentImagePosition extends IPosition {
|
19
13
|
}
|
20
|
-
export interface
|
21
|
-
w: number;
|
22
|
-
h: number;
|
14
|
+
export interface IPixelPosition extends IPosition {
|
23
15
|
}
|
24
|
-
export
|
25
|
-
|
26
|
-
y: number;
|
16
|
+
export type TArgumentImageSize = IOptionImageSize | 'initial';
|
17
|
+
export interface IImageSize extends ISize {
|
27
18
|
}
|
28
19
|
export type TRGBABuff = TByteRGBColor[];
|
29
20
|
export type TByteRGBColor = [number, number, number, number];
|
30
|
-
export type TBuff =
|
31
|
-
export type TQualityBuff =
|
21
|
+
export type TBuff = TStringMatrix;
|
22
|
+
export type TQualityBuff = TStringMatrix;
|
32
23
|
export type TRangeCommit = IPixelPosition[][];
|
33
24
|
export type TFilterMethod = 'pixel';
|
34
25
|
export interface IFilterOptions {
|
package/dist/types/image.js
CHANGED
package/dist/utils/filter.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { IImageOptions, IImageSize,
|
1
|
+
import type { IImageOptions, IImageSize, TRGBABuff } from "../types/image";
|
2
2
|
export declare class Filter {
|
3
3
|
ctx: CanvasRenderingContext2D;
|
4
4
|
imageSize: IImageSize;
|
@@ -9,7 +9,7 @@ export declare class Filter {
|
|
9
9
|
getBuffCollection(imageData: ImageData): {
|
10
10
|
rowRGBABuff: TRGBABuff;
|
11
11
|
hexBuff: `#${string}`[];
|
12
|
-
buff:
|
12
|
+
buff: import("../types/general").TStringMatrix;
|
13
13
|
};
|
14
14
|
private getBuff;
|
15
15
|
private getRowRGBABuff;
|
package/dist/utils/filter.js
CHANGED
@@ -30,7 +30,7 @@ class Filter {
|
|
30
30
|
return { rowRGBABuff, hexBuff, buff };
|
31
31
|
}
|
32
32
|
getBuff(hexBuff) {
|
33
|
-
const distanceRow = (0, lodash_1.range)(0, this.imageSize.
|
33
|
+
const distanceRow = (0, lodash_1.range)(0, this.imageSize.height).map((i) => this.imageSize.width * i);
|
34
34
|
const buff = [];
|
35
35
|
let indexOfDistance = 0;
|
36
36
|
hexBuff.forEach((pxColor, pxIndex) => {
|