style: reformat PltPreview and fix SVG rendering
- Reformat code to use double quotes and consistent indentation - Improve SVG path styling for travel paths and borders - Fix layout nesting and indentation in the component template - Add missing circle element to card index labels
This commit is contained in:
hyper
parent
1582191655
commit
a5021ff5b4
|
|
@ -1,9 +1,9 @@
|
|||
import { createSignal, For, Show, createMemo } from 'solid-js';
|
||||
import { Portal } from 'solid-js/web';
|
||||
import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
|
||||
import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
|
||||
import type { CardPath } from '../../plotcutter/types';
|
||||
import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
|
||||
import { createSignal, For, Show, createMemo } from "solid-js";
|
||||
import { Portal } from "solid-js/web";
|
||||
import { parsePlt, extractCutPaths } from "../../plotcutter/parser";
|
||||
import { generateTravelPaths, travelPathsToSvg } from "../../plotcutter/layout";
|
||||
import type { CardPath } from "../../plotcutter/types";
|
||||
import { calculateCenter, contourToSvgPath } from "../../plotcutter/contour";
|
||||
|
||||
export interface PltPreviewProps {
|
||||
/** PLT 文件内容 */
|
||||
|
|
@ -39,7 +39,7 @@ function parsePltToCardPaths(pltCode: string): {
|
|||
centerY: center.y,
|
||||
pathD,
|
||||
startPoint,
|
||||
endPoint
|
||||
endPoint,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ function parsePltToCardPaths(pltCode: string): {
|
|||
cutPaths,
|
||||
cardPaths,
|
||||
width: parsed.width || 0,
|
||||
height: parsed.height || 0
|
||||
height: parsed.height || 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,12 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
// 解析传入的 PLT 代码
|
||||
const parsedData = createMemo(() => {
|
||||
if (!props.pltCode) {
|
||||
return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
|
||||
return {
|
||||
cutPaths: [] as [number, number][][],
|
||||
cardPaths: [] as CardPath[],
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
}
|
||||
return parsePltToCardPaths(props.pltCode);
|
||||
});
|
||||
|
|
@ -69,22 +74,22 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
const travelPathD = createMemo(() => {
|
||||
const cardPaths = parsedData().cardPaths;
|
||||
const height = parsedData().height;
|
||||
if (cardPaths.length === 0) return '';
|
||||
if (cardPaths.length === 0) return "";
|
||||
const travelPaths = generateTravelPaths(cardPaths, height);
|
||||
return travelPathsToSvg(travelPaths);
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!props.pltCode) {
|
||||
alert('没有可导出的卡片');
|
||||
alert("没有可导出的卡片");
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([props.pltCode], { type: 'application/vnd.hp-HPGL' });
|
||||
const blob = new Blob([props.pltCode], { type: "application/vnd.hp-HPGL" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, "-")}.plt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
|
@ -101,7 +106,8 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
<div class="flex items-center gap-2 flex-1">
|
||||
<Show when={parsedData().width > 0}>
|
||||
<span class="text-sm text-gray-500">
|
||||
尺寸：{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm
|
||||
尺寸：{parsedData().width.toFixed(1)}mm ×{" "}
|
||||
{parsedData().height.toFixed(1)}mm
|
||||
</span>
|
||||
</Show>
|
||||
<button
|
||||
|
|
@ -136,7 +142,7 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
|
||||
style={{
|
||||
width: `${Math.min(parsedData().width, 800)}mm`,
|
||||
height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`
|
||||
height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`,
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
|
|
@ -156,8 +162,9 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
<path
|
||||
d={travelPathD()}
|
||||
fill="none"
|
||||
stroke="#f884"
|
||||
stroke-width="1"
|
||||
stroke="#999"
|
||||
stroke-width="0.5"
|
||||
stroke-dasharray="2,2"
|
||||
/>
|
||||
</Show>
|
||||
|
||||
|
|
@ -175,16 +182,18 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
/>
|
||||
|
||||
{/* 动画小球 */}
|
||||
<circle
|
||||
r="0.8"
|
||||
fill="#ef4444"
|
||||
>
|
||||
<animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
|
||||
</animateMotion>
|
||||
<circle r="0.8" fill="#ef4444">
|
||||
<animateMotion
|
||||
dur="4s"
|
||||
repeatCount="indefinite"
|
||||
path={path.pathD}
|
||||
></animateMotion>
|
||||
</circle>
|
||||
|
||||
{/* 序号标签 */}
|
||||
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
||||
<g
|
||||
transform={`translate(${path.centerX}, ${path.centerY})`}
|
||||
>
|
||||
<circle
|
||||
r="2"
|
||||
fill="white"
|
||||
|
|
@ -212,11 +221,17 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
{/* 图例说明 */}
|
||||
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #999" }}></div>
|
||||
<div
|
||||
class="w-6 h-0.5"
|
||||
style={{ "border-bottom": "2px dashed #999" }}
|
||||
></div>
|
||||
<span class="text-sm text-gray-600">空走路径</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px solid #3b82f6" }}></div>
|
||||
<div
|
||||
class="w-6 h-0.5"
|
||||
style={{ "border-bottom": "2px solid #3b82f6" }}
|
||||
></div>
|
||||
<span class="text-sm text-gray-600">切割路径</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
|||
Loading…
Reference in New Issue