mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-07-27 10:01:46 +08:00
refactor: 封装图标定义
This commit is contained in:
parent
4867ffdfeb
commit
ebe48eab8f
@ -1,6 +1,14 @@
|
|||||||
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
|
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
|
||||||
import { SetupComponentOptions } from '@motajs/system-ui';
|
import { SetupComponentOptions } from '@motajs/system-ui';
|
||||||
import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue';
|
import {
|
||||||
|
computed,
|
||||||
|
defineComponent,
|
||||||
|
DefineSetupFnComponent,
|
||||||
|
onMounted,
|
||||||
|
Ref,
|
||||||
|
ref,
|
||||||
|
watch
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
|
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
|
||||||
loc: ElementLocator;
|
loc: ElementLocator;
|
||||||
@ -55,12 +63,39 @@ function adjustPath(
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const RollbackIcon = defineComponent<IconsProps>(props => {
|
function defineIcon<T extends IconsProps>(
|
||||||
|
aspect: number,
|
||||||
|
pathDef: PathFn,
|
||||||
|
props: SetupComponentOptions<T> = iconsProps
|
||||||
|
): DefineSetupFnComponent<T> {
|
||||||
|
return defineComponent<T>(props => {
|
||||||
const path = ref<Path2D>();
|
const path = ref<Path2D>();
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
const width = computed(() => props.loc[2] ?? 200);
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
const height = computed(() => props.loc[3] ?? 200);
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
const generatePath = adjustPath(aspect, path, pathDef);
|
||||||
|
|
||||||
|
watch(props, () => {
|
||||||
|
generatePath(width.value, height.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
generatePath(width.value, height.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<g-path
|
||||||
|
loc={props.loc}
|
||||||
|
path={path.value}
|
||||||
|
stroke
|
||||||
|
lineJoin="round"
|
||||||
|
lineCap="round"
|
||||||
|
></g-path>
|
||||||
|
);
|
||||||
|
}, props);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RollbackIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const arrow = width / 10;
|
const arrow = width / 10;
|
||||||
@ -80,35 +115,9 @@ export const RollbackIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(end + arrow, top + arrow);
|
path.lineTo(end + arrow, top + arrow);
|
||||||
path.moveTo(left, top);
|
path.moveTo(left, top);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const RetweetIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const RetweetIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const arrow = width / 10;
|
const arrow = width / 10;
|
||||||
@ -128,35 +137,9 @@ export const RetweetIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right - arrow, top + arrow);
|
path.lineTo(right - arrow, top + arrow);
|
||||||
path.moveTo(left, top);
|
path.moveTo(left, top);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ViewMapIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ViewMapIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -169,37 +152,10 @@ export const ViewMapIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(cx, bottom);
|
path.lineTo(cx, bottom);
|
||||||
path.moveTo(left, cy);
|
path.moveTo(left, cy);
|
||||||
path.lineTo(right, cy);
|
path.lineTo(right, cy);
|
||||||
|
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const DanmakuIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const DanmakuIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const bottom = oy + height - height / 5;
|
const bottom = oy + height - height / 5;
|
||||||
@ -213,35 +169,9 @@ export const DanmakuIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(left - width / 24, bottom - height / 36);
|
path.lineTo(left - width / 24, bottom - height / 36);
|
||||||
path.closePath();
|
path.closePath();
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ReplayIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ReplayIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -268,35 +198,9 @@ export const ReplayIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right, cy);
|
path.lineTo(right, cy);
|
||||||
path.lineTo(right + arc, cy + arc);
|
path.lineTo(right + arc, cy + arc);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const NumpadIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const NumpadIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -309,35 +213,9 @@ export const NumpadIcon = defineComponent<IconsProps>(props => {
|
|||||||
path2.ellipse(cx, cy, width / 9, height / 6, 0, 0, Math.PI * 2);
|
path2.ellipse(cx, cy, width / 9, height / 6, 0, 0, Math.PI * 2);
|
||||||
path.addPath(path2);
|
path.addPath(path2);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const PlayIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const PlayIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -348,36 +226,9 @@ export const PlayIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(left, bottom);
|
path.lineTo(left, bottom);
|
||||||
path.closePath();
|
path.closePath();
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const PauseIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
fill
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const PauseIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const cx = ox + width / 2;
|
const cx = ox + width / 2;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -387,35 +238,9 @@ export const PauseIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.moveTo(cx + width / 5, top);
|
path.moveTo(cx + width / 5, top);
|
||||||
path.lineTo(cx + width / 5, bottom);
|
path.lineTo(cx + width / 5, bottom);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const DoubleArrow = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const DoubleArrow = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const path2 = new Path2D();
|
const path2 = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -434,36 +259,9 @@ export const DoubleArrow = defineComponent<IconsProps>(props => {
|
|||||||
path2.closePath();
|
path2.closePath();
|
||||||
path.addPath(path2);
|
path.addPath(path2);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const StepForward = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
fill
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const StepForward = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const path2 = new Path2D();
|
const path2 = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -478,36 +276,9 @@ export const StepForward = defineComponent<IconsProps>(props => {
|
|||||||
path2.lineTo(right, bottom);
|
path2.lineTo(right, bottom);
|
||||||
path.addPath(path2);
|
path.addPath(path2);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const SoundVolume = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
fill
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const SoundVolume = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 8;
|
const left = ox + width / 8;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -534,35 +305,9 @@ export const SoundVolume = defineComponent<IconsProps>(props => {
|
|||||||
);
|
);
|
||||||
path.arc(cx, cy, width / 3, start, end);
|
path.arc(cx, cy, width / 3, start, end);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const Fullscreen = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const Fullscreen = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -597,35 +342,9 @@ export const Fullscreen = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right, bottom);
|
path.lineTo(right, bottom);
|
||||||
path.lineTo(right - width / 8, bottom);
|
path.lineTo(right - width / 8, bottom);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ExitFullscreen = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ExitFullscreen = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -660,35 +379,9 @@ export const ExitFullscreen = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right - width / 6, bottom - height / 6);
|
path.lineTo(right - width / 6, bottom - height / 6);
|
||||||
path.lineTo(right - width / 6, bottom - height / 24);
|
path.lineTo(right - width / 6, bottom - height / 24);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowLeftTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -699,35 +392,9 @@ export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(left + width / 4, (top + right) / 2);
|
path.lineTo(left + width / 4, (top + right) / 2);
|
||||||
path.lineTo(right, bottom);
|
path.lineTo(right, bottom);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowRightTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowRightTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -738,35 +405,9 @@ export const ArrowRightTailless = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right - width / 4, (top + right) / 2);
|
path.lineTo(right - width / 4, (top + right) / 2);
|
||||||
path.lineTo(left, bottom);
|
path.lineTo(left, bottom);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowUpTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowUpTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -777,35 +418,9 @@ export const ArrowUpTailless = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo((left + right) / 2, top + height / 4);
|
path.lineTo((left + right) / 2, top + height / 4);
|
||||||
path.lineTo(right, bottom);
|
path.lineTo(right, bottom);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowDownTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowDownTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -816,25 +431,4 @@ export const ArrowDownTailless = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo((left + right) / 2, bottom - height / 4);
|
path.lineTo((left + right) / 2, bottom - height / 4);
|
||||||
path.lineTo(right, top);
|
path.lineTo(right, top);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
Loading…
Reference in New Issue
Block a user