hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
260 lines (259 loc) • 9.27 kB
TypeScript
export default ImageMapEditor;
declare class ImageMapEditor extends React.Component<any, any, any> {
constructor(props: any);
constructor(props: any, context: any);
canvasHandlers: {
onAdd: (target: any) => void;
onSelect: (target: any) => void;
onRemove: () => void;
onModified: import("lodash").DebouncedFunc<() => void>;
onZoom: (zoom: any) => void;
onChange: (selectedItem: any, changedValues: any, allValues: any) => void;
onChangeWokarea: (changedKey: any, changedValue: any, allValues: any) => void;
onTooltip: (ref: any, target: any) => JSX.Element;
onClick: (canvas: any, target: any) => void;
onContext: (ref: any, event: any, target: any) => JSX.Element;
onTransaction: (transaction: any) => void;
};
handlers: {
onChangePreview: (checked: any) => void;
onProgress: (progress: any) => void;
onImport: (files: any) => void;
onUpload: () => void;
onSaveJSON: () => void;
onEdit: (data?: {
objects: ({
type: string;
version: string;
originX: string;
originY: string;
left: number;
top: number;
width: number;
height: number;
fill: string;
stroke: any;
strokeWidth: number;
strokeDashArray: any;
strokeLineCap: string;
strokeDashOffset: number;
strokeLineJoin: string;
strokeUniform: boolean;
strokeMiterLimit: number;
scaleX: number;
scaleY: number;
angle: number;
flipX: boolean;
flipY: boolean;
opacity: number;
shadow: any;
visible: boolean;
backgroundColor: string;
fillRule: string;
paintFirst: string;
globalCompositeOperation: string;
skewX: number;
skewY: number;
cropX: number;
cropY: number;
id: string;
name: string;
file: {
uid: string;
};
src: string;
link: {
enabled?: undefined;
type?: undefined;
state?: undefined;
dashboard?: undefined;
};
tooltip: {
enabled: boolean;
type?: undefined;
template?: undefined;
};
layout: string;
workareaWidth: number;
workareaHeight: number;
crossOrigin: any;
filters: any[];
fontFamily?: undefined;
fontWeight?: undefined;
fontSize?: undefined;
text?: undefined;
underline?: undefined;
overline?: undefined;
linethrough?: undefined;
textAlign?: undefined;
fontStyle?: undefined;
lineHeight?: undefined;
textBackgroundColor?: undefined;
charSpacing?: undefined;
styles?: undefined;
direction?: undefined;
path?: undefined;
pathStartOffset?: undefined;
pathSide?: undefined;
minWidth?: undefined;
splitByGrapheme?: undefined;
animation?: undefined;
userProperty?: undefined;
trigger?: undefined;
editable?: undefined;
} | {
type: string;
version: string;
originX: string;
originY: string;
left: number;
top: number;
width: number;
height: number;
fill: string;
stroke: string;
strokeWidth: number;
strokeDashArray: any;
strokeLineCap: string;
strokeDashOffset: number;
strokeLineJoin: string;
strokeUniform: boolean;
strokeMiterLimit: number;
scaleX: number;
scaleY: number;
angle: number;
flipX: boolean;
flipY: boolean;
opacity: number;
shadow: any;
visible: boolean;
backgroundColor: string;
fillRule: string;
paintFirst: string;
globalCompositeOperation: string;
skewX: number;
skewY: number;
fontFamily: string;
fontWeight: string;
fontSize: number;
text: string;
underline: boolean;
overline: boolean;
linethrough: boolean;
textAlign: string;
fontStyle: string;
lineHeight: number;
textBackgroundColor: string;
charSpacing: number;
styles: {};
direction: string;
path: any;
pathStartOffset: number;
pathSide: string;
minWidth: number;
splitByGrapheme: boolean;
id: string;
name: string;
link: {
enabled: boolean;
type: string;
state: string;
dashboard: {};
};
tooltip: {
enabled: boolean;
type: string;
template: string;
};
animation: {
type: string;
loop: boolean;
autoplay: boolean;
duration: number;
};
userProperty: {};
trigger: {
enabled: boolean;
type: string;
script: string;
effect: string;
};
editable: boolean;
cropX?: undefined;
cropY?: undefined;
file?: undefined;
src?: undefined;
layout?: undefined;
workareaWidth?: undefined;
workareaHeight?: undefined;
crossOrigin?: undefined;
filters?: undefined;
})[];
animations: any[];
styles: any[];
dataSources: any[];
viewUser: ({
id: string;
file: {
uid: string;
};
width: number;
height: number;
x?: undefined;
y?: undefined;
color?: undefined;
stroke?: undefined;
fontSize?: undefined;
fontWeight?: undefined;
fontFamily?: undefined;
fontStyle?: undefined;
lineHeight?: undefined;
text?: undefined;
charSpacing?: undefined;
textAlign?: undefined;
styles?: undefined;
path?: undefined;
pathStartOffset?: undefined;
pathSide?: undefined;
opacity?: undefined;
rotate?: undefined;
} | {
x: number;
y: number;
color: string;
id: string;
stroke: string;
fontSize: number;
fontWeight: string;
fontFamily: string;
fontStyle: string;
lineHeight: number;
text: string;
charSpacing: number;
textAlign: string;
styles: {};
path: any;
pathStartOffset: number;
pathSide: string;
width: number;
opacity: number;
rotate: number;
height: number;
file?: undefined;
})[];
}) => void;
onDownload: () => void;
onChangeAnimations: (animations: any) => void;
onChangeStyles: (styles: any) => void;
onChangeDataSources: (dataSources: any) => void;
onSaveImage: () => void;
};
transformList: () => any;
showLoading: (loading: any) => void;
changeEditing: (editing: any) => void;
itemsRef: ImageMapItems;
container: HTMLDivElement;
canvasRef: any;
}
import React from "react";
import ImageMapItems from "./ImageMapItems";