|
@@ -4,17 +4,14 @@ import { useAutomaticData } from "./use-automatic-data";
|
|
|
import { useMouseMigrateTempLayer, useZIndex } from "./use-layer";
|
|
|
import { useAnimationMouseStyle } from "./use-mouse-status";
|
|
|
import { DrawItem } from "../components";
|
|
|
-import {
|
|
|
- useMatCompTransformer,
|
|
|
- useLineTransformer,
|
|
|
-} from "./use-transformer";
|
|
|
+import { useMatCompTransformer, useLineTransformer } from "./use-transformer";
|
|
|
import { useGetShapeCopyTransform } from "./use-copy";
|
|
|
import { Delete, DocumentCopy } from "@element-plus/icons-vue";
|
|
|
import { onlyId } from "@/utils/shared";
|
|
|
import { Shape } from "konva/lib/Shape";
|
|
|
import { Transform } from "konva/lib/Util";
|
|
|
-import { generateDescribes } from "../propertys/util";
|
|
|
-import { PropertyDescribes } from "../propertys";
|
|
|
+import { mergeDescribes, PropertyKeys } from "../propertys";
|
|
|
+
|
|
|
|
|
|
type Emit<T> = EmitFn<{
|
|
|
updateShape: (value: T) => void;
|
|
@@ -22,46 +19,25 @@ type Emit<T> = EmitFn<{
|
|
|
delShape: () => void;
|
|
|
}>;
|
|
|
|
|
|
-export type UseComponentStatusProps<T extends DrawItem, S extends EntityShape> = {
|
|
|
+export type UseComponentStatusProps<
|
|
|
+ T extends DrawItem,
|
|
|
+ S extends EntityShape
|
|
|
+> = {
|
|
|
emit: Emit<T>;
|
|
|
props: { data: T };
|
|
|
getMouseStyle: any;
|
|
|
defaultStyle: any;
|
|
|
- transformType?: 'line' | 'mat' | 'custom'
|
|
|
- customTransform?: (callback: () => void, shape: Ref<DC<S> | undefined>, data: Ref<T>) => void,
|
|
|
+ propertys: PropertyKeys,
|
|
|
+ transformType?: "line" | "mat" | "custom";
|
|
|
+ customTransform?: (
|
|
|
+ callback: () => void,
|
|
|
+ shape: Ref<DC<S> | undefined>,
|
|
|
+ data: Ref<T>
|
|
|
+ ) => void;
|
|
|
getRepShape?: () => Shape;
|
|
|
copyHandler: (transform: Transform, data: T) => T;
|
|
|
};
|
|
|
|
|
|
-const getPropertyDescribes = (data: Ref<any>): PropertyDescribes => ({
|
|
|
- stroke: { type: "color", label: "边框" },
|
|
|
- fill: { type: "color", label: "填充" },
|
|
|
- strokeWidth: { type: "num", label: "粗细", props: { min: 0.5, max: 10 } },
|
|
|
- zIndex: {
|
|
|
- type: "num",
|
|
|
- label: "层级",
|
|
|
- props: { min: -1000, max: 1000, step: 1 },
|
|
|
- },
|
|
|
- dash: {
|
|
|
- type: "num",
|
|
|
- label: "虚线比例",
|
|
|
- props: { min: 0, max: 30 },
|
|
|
- get value() {
|
|
|
- if (!data.value.dash) {
|
|
|
- return 30;
|
|
|
- }
|
|
|
- if (!data.value.dash[1]) {
|
|
|
- return 30;
|
|
|
- } else {
|
|
|
- return data.value.dash[0];
|
|
|
- }
|
|
|
- },
|
|
|
- set value(val) {
|
|
|
- data.value.dash = [val, 30 - val];
|
|
|
- },
|
|
|
- },
|
|
|
-});
|
|
|
-
|
|
|
export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
|
|
|
args: UseComponentStatusProps<T, S>
|
|
|
) => {
|
|
@@ -73,6 +49,7 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
|
|
|
defaultStyle,
|
|
|
customTransform,
|
|
|
getRepShape,
|
|
|
+ propertys,
|
|
|
copyHandler,
|
|
|
} = args;
|
|
|
|
|
@@ -84,22 +61,20 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
|
|
|
getMouseStyle,
|
|
|
}) as any;
|
|
|
|
|
|
- if (transformType === 'line') {
|
|
|
+ if (transformType === "line") {
|
|
|
useLineTransformer(
|
|
|
shape as any,
|
|
|
data as any,
|
|
|
(newData) => emit("updateShape", newData as T),
|
|
|
getRepShape as any
|
|
|
);
|
|
|
- } else if (transformType === 'mat') {
|
|
|
- useMatCompTransformer(
|
|
|
- shape,
|
|
|
- data as any,
|
|
|
- (nData) => emit("updateShape", nData as any),
|
|
|
+ } else if (transformType === "mat") {
|
|
|
+ useMatCompTransformer(shape, data as any, (nData) =>
|
|
|
+ emit("updateShape", nData as any)
|
|
|
);
|
|
|
- } else if (transformType === 'custom' && customTransform) {
|
|
|
- console.log('????')
|
|
|
- customTransform(() => emit("updateShape", data.value as any), shape, data)
|
|
|
+ } else if (transformType === "custom" && customTransform) {
|
|
|
+ console.log("????");
|
|
|
+ customTransform(() => emit("updateShape", data.value as any), shape, data);
|
|
|
}
|
|
|
|
|
|
useZIndex(shape, data);
|
|
@@ -128,11 +103,11 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
-
|
|
|
- const describes = generateDescribes(
|
|
|
+
|
|
|
+ const describes = mergeDescribes(
|
|
|
data,
|
|
|
defaultStyle,
|
|
|
- getPropertyDescribes(data)
|
|
|
+ propertys || []
|
|
|
);
|
|
|
|
|
|
return {
|