@pie-players/pie-tool-ruler 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/tool-ruler.js +12745 -0
- package/dist/tool-ruler.js.map +1 -0
- package/index.ts +8 -0
- package/package.json +66 -0
- package/ruler-cm.svg +281 -0
- package/ruler-inches.svg +94 -0
- package/tool-ruler.svelte +422 -0
package/ruler-inches.svg
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<svg width="3080" height="355" viewBox="0 0 3080 355" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="2" y="2" width="3076" height="351" fill="white" fill-opacity="0.15" stroke="black" stroke-width="4"/>
|
|
3
|
+
<path d="M56 0V60" stroke="black" stroke-width="4"/>
|
|
4
|
+
<path d="M2756 1V60" stroke="black" stroke-width="4"/>
|
|
5
|
+
<path d="M1856 1V60" stroke="black" stroke-width="4"/>
|
|
6
|
+
<path d="M1556 1V60" stroke="black" stroke-width="4"/>
|
|
7
|
+
<path d="M1256 1V60" stroke="black" stroke-width="4"/>
|
|
8
|
+
<path d="M956 0V59" stroke="black" stroke-width="4"/>
|
|
9
|
+
<path d="M656 0V59" stroke="black" stroke-width="4"/>
|
|
10
|
+
<path d="M356 0V59" stroke="black" stroke-width="4"/>
|
|
11
|
+
<path d="M2456 1V60" stroke="black" stroke-width="4"/>
|
|
12
|
+
<path d="M2156 1V60" stroke="black" stroke-width="4"/>
|
|
13
|
+
<path d="M206 0V60" stroke="black" stroke-width="2"/>
|
|
14
|
+
<path d="M2906 1V60" stroke="black" stroke-width="2"/>
|
|
15
|
+
<path d="M2006 1V60" stroke="black" stroke-width="2"/>
|
|
16
|
+
<path d="M1706 1V60" stroke="black" stroke-width="2"/>
|
|
17
|
+
<path d="M1406 1V60" stroke="black" stroke-width="2"/>
|
|
18
|
+
<path d="M1106 0V59" stroke="black" stroke-width="2"/>
|
|
19
|
+
<path d="M806 0V59" stroke="black" stroke-width="2"/>
|
|
20
|
+
<path d="M506 0V59" stroke="black" stroke-width="2"/>
|
|
21
|
+
<path d="M2606 1V60" stroke="black" stroke-width="2"/>
|
|
22
|
+
<path d="M2306 1V60" stroke="black" stroke-width="2"/>
|
|
23
|
+
<path d="M319 2V37" stroke="black"/>
|
|
24
|
+
<path d="M245 2V37" stroke="black"/>
|
|
25
|
+
<path d="M282 2V37" stroke="black"/>
|
|
26
|
+
<path d="M96 2V37" stroke="black"/>
|
|
27
|
+
<path d="M170 2V37" stroke="black"/>
|
|
28
|
+
<path d="M133 2V37" stroke="black"/>
|
|
29
|
+
<path d="M619 2V37" stroke="black"/>
|
|
30
|
+
<path d="M545 2V37" stroke="black"/>
|
|
31
|
+
<path d="M582 2V37" stroke="black"/>
|
|
32
|
+
<path d="M396 2V37" stroke="black"/>
|
|
33
|
+
<path d="M470 2V37" stroke="black"/>
|
|
34
|
+
<path d="M433 2V37" stroke="black"/>
|
|
35
|
+
<path d="M919 2V37" stroke="black"/>
|
|
36
|
+
<path d="M845 2V37" stroke="black"/>
|
|
37
|
+
<path d="M882 2V37" stroke="black"/>
|
|
38
|
+
<path d="M696 2V37" stroke="black"/>
|
|
39
|
+
<path d="M770 2V37" stroke="black"/>
|
|
40
|
+
<path d="M733 2V37" stroke="black"/>
|
|
41
|
+
<path d="M1219 2V37" stroke="black"/>
|
|
42
|
+
<path d="M1145 2V37" stroke="black"/>
|
|
43
|
+
<path d="M1182 2V37" stroke="black"/>
|
|
44
|
+
<path d="M996 2V37" stroke="black"/>
|
|
45
|
+
<path d="M1070 2V37" stroke="black"/>
|
|
46
|
+
<path d="M1033 2V37" stroke="black"/>
|
|
47
|
+
<path d="M1518 2V37" stroke="black"/>
|
|
48
|
+
<path d="M1444 2V37" stroke="black"/>
|
|
49
|
+
<path d="M1481 2V37" stroke="black"/>
|
|
50
|
+
<path d="M1295 2V37" stroke="black"/>
|
|
51
|
+
<path d="M1369 2V37" stroke="black"/>
|
|
52
|
+
<path d="M1332 2V37" stroke="black"/>
|
|
53
|
+
<path d="M1817 2V37" stroke="black"/>
|
|
54
|
+
<path d="M1743 2V37" stroke="black"/>
|
|
55
|
+
<path d="M1780 2V37" stroke="black"/>
|
|
56
|
+
<path d="M1594 2V37" stroke="black"/>
|
|
57
|
+
<path d="M1668 2V37" stroke="black"/>
|
|
58
|
+
<path d="M1631 2V37" stroke="black"/>
|
|
59
|
+
<path d="M2116 2V37" stroke="black"/>
|
|
60
|
+
<path d="M2042 2V37" stroke="black"/>
|
|
61
|
+
<path d="M2079 2V37" stroke="black"/>
|
|
62
|
+
<path d="M1893 2V37" stroke="black"/>
|
|
63
|
+
<path d="M1967 2V37" stroke="black"/>
|
|
64
|
+
<path d="M1930 2V37" stroke="black"/>
|
|
65
|
+
<path d="M2417 2V37" stroke="black"/>
|
|
66
|
+
<path d="M2343 2V37" stroke="black"/>
|
|
67
|
+
<path d="M2380 2V37" stroke="black"/>
|
|
68
|
+
<path d="M2194 2V37" stroke="black"/>
|
|
69
|
+
<path d="M2268 2V37" stroke="black"/>
|
|
70
|
+
<path d="M2231 2V37" stroke="black"/>
|
|
71
|
+
<path d="M2717 1V36" stroke="black"/>
|
|
72
|
+
<path d="M2643 1V36" stroke="black"/>
|
|
73
|
+
<path d="M2680 1V36" stroke="black"/>
|
|
74
|
+
<path d="M2494 1V36" stroke="black"/>
|
|
75
|
+
<path d="M2568 1V36" stroke="black"/>
|
|
76
|
+
<path d="M2531 1V36" stroke="black"/>
|
|
77
|
+
<path d="M3017 0V35" stroke="black"/>
|
|
78
|
+
<path d="M2943 0V35" stroke="black"/>
|
|
79
|
+
<path d="M2980 0V35" stroke="black"/>
|
|
80
|
+
<path d="M2794 0V35" stroke="black"/>
|
|
81
|
+
<path d="M2868 0V35" stroke="black"/>
|
|
82
|
+
<path d="M2831 0V35" stroke="black"/>
|
|
83
|
+
<path d="M56.5615 102.588C55.0495 102.588 53.7335 102.196 52.6135 101.412C51.5215 100.628 50.5975 99.592 49.8415 98.304C49.1135 96.988 48.5675 95.546 48.2035 93.978C47.8395 92.41 47.6575 90.856 47.6575 89.316C47.6575 87.72 47.8395 86.11 48.2035 84.486C48.5675 82.862 49.1275 81.378 49.8835 80.034C50.6395 78.69 51.6055 77.612 52.7815 76.8C53.9575 75.96 55.3715 75.54 57.0235 75.54C58.5355 75.54 59.8515 75.932 60.9715 76.716C62.0915 77.5 63.0155 78.55 63.7435 79.866C64.4715 81.154 65.0175 82.582 65.3815 84.15C65.7455 85.69 65.9275 87.216 65.9275 88.728C65.9275 90.296 65.7455 91.892 65.3815 93.516C65.0455 95.14 64.4995 96.638 63.7435 98.01C62.9875 99.382 62.0215 100.488 60.8455 101.328C59.6695 102.168 58.2415 102.588 56.5615 102.588ZM57.2755 101.202C58.3115 101.202 59.1375 100.656 59.7535 99.564C60.3975 98.444 60.8595 97.002 61.1395 95.238C61.4475 93.446 61.6015 91.528 61.6015 89.484C61.6015 87.944 61.4895 86.432 61.2655 84.948C61.0415 83.464 60.7055 82.12 60.2575 80.916C59.8095 79.712 59.2495 78.76 58.5775 78.06C57.9055 77.332 57.1355 76.968 56.2675 76.968C55.2315 76.968 54.4055 77.514 53.7895 78.606C53.1735 79.67 52.7255 81.084 52.4455 82.848C52.1655 84.612 52.0255 86.516 52.0255 88.56C52.0255 90.1 52.1375 91.626 52.3615 93.138C52.5855 94.65 52.9075 96.008 53.3275 97.212C53.7755 98.416 54.3215 99.382 54.9655 100.11C55.6095 100.838 56.3795 101.202 57.2755 101.202Z" fill="black"/>
|
|
84
|
+
<path d="M350.682 102.126C350.514 102.126 350.36 102.07 350.22 101.958C350.108 101.846 350.052 101.72 350.052 101.58C350.052 101.272 350.276 101.062 350.724 100.95C351.676 100.67 352.474 100.432 353.118 100.236C353.762 100.012 354.238 99.704 354.546 99.312C354.882 98.892 355.05 98.304 355.05 97.548V81.798C355.05 81.238 354.882 80.804 354.546 80.496C354.21 80.188 353.762 79.978 353.202 79.866C352.67 79.726 352.096 79.628 351.48 79.572C351.228 79.544 350.976 79.474 350.724 79.362C350.5 79.222 350.388 79.026 350.388 78.774C350.388 78.522 350.5 78.326 350.724 78.186C350.948 78.018 351.214 77.92 351.522 77.892C352.922 77.724 354.168 77.486 355.26 77.178C356.38 76.842 357.486 76.226 358.578 75.33C358.606 75.302 358.648 75.288 358.704 75.288C358.76 75.26 358.816 75.246 358.872 75.246C359.04 75.246 359.18 75.288 359.292 75.372C359.432 75.456 359.502 75.554 359.502 75.666C359.446 76.058 359.39 76.492 359.334 76.968C359.306 77.444 359.292 78.004 359.292 78.648V97.926C359.292 98.57 359.432 99.074 359.712 99.438C360.02 99.774 360.482 100.054 361.098 100.278C361.742 100.474 362.582 100.698 363.618 100.95C363.814 101.006 363.982 101.09 364.122 101.202C364.262 101.286 364.332 101.426 364.332 101.622C364.332 101.958 364.136 102.126 363.744 102.126C363.016 102.126 362.274 102.098 361.518 102.042C360.79 102.014 360.062 101.986 359.334 101.958C358.634 101.93 357.934 101.916 357.234 101.916C356.534 101.916 355.82 101.93 355.092 101.958C354.364 101.986 353.622 102.014 352.866 102.042C352.138 102.098 351.41 102.126 350.682 102.126Z" fill="black"/>
|
|
85
|
+
<path d="M664.122 102.126C663.954 102.126 663.618 102.112 663.114 102.084C662.61 102.084 662.022 102.07 661.35 102.042C660.706 102.014 660.034 101.986 659.334 101.958C658.634 101.93 657.99 101.916 657.402 101.916C656.842 101.916 656.1 101.93 655.176 101.958C654.28 101.986 653.356 102 652.404 102C651.48 102.028 650.668 102.042 649.968 102.042C649.296 102.07 648.862 102.084 648.666 102.084C648.582 102.084 648.414 102 648.162 101.832C647.938 101.664 647.826 101.51 647.826 101.37C647.826 101.202 647.868 101.076 647.952 100.992C648.036 100.908 648.134 100.81 648.246 100.698L655.05 93.474C656.478 91.962 657.612 90.338 658.452 88.602C659.32 86.866 659.754 85.046 659.754 83.142C659.754 81.77 659.362 80.678 658.578 79.866C657.794 79.026 656.814 78.606 655.638 78.606C654.546 78.606 653.524 78.914 652.572 79.53C651.648 80.118 650.892 80.86 650.304 81.756C650.192 81.924 650.052 82.078 649.884 82.218C649.716 82.358 649.534 82.428 649.338 82.428C649.198 82.428 649.058 82.316 648.918 82.092C648.806 81.868 648.75 81.588 648.75 81.252C648.75 80.888 648.96 80.398 649.38 79.782C649.8 79.138 650.388 78.494 651.144 77.85C651.9 77.206 652.796 76.66 653.832 76.212C654.868 75.764 655.988 75.54 657.192 75.54C658.592 75.54 659.796 75.848 660.804 76.464C661.812 77.052 662.582 77.878 663.114 78.942C663.646 79.978 663.912 81.168 663.912 82.512C663.912 83.268 663.758 84.094 663.45 84.99C663.17 85.886 662.792 86.754 662.316 87.594C661.84 88.434 661.308 89.204 660.72 89.904C660.356 90.352 659.824 90.926 659.124 91.626C658.452 92.326 657.724 93.068 656.94 93.852C656.184 94.608 655.456 95.336 654.756 96.036C654.056 96.708 653.482 97.268 653.034 97.716C652.614 98.164 652.404 98.416 652.404 98.472C652.404 98.584 652.6 98.668 652.992 98.724C653.496 98.78 654.056 98.822 654.672 98.85C655.316 98.878 656.002 98.892 656.73 98.892C657.486 98.892 658.228 98.878 658.956 98.85C659.712 98.822 660.44 98.78 661.14 98.724C661.896 98.668 662.498 98.584 662.946 98.472C663.394 98.36 663.772 98.15 664.08 97.842C664.416 97.534 664.738 97.1 665.046 96.54C665.158 96.372 665.312 96.176 665.508 95.952C665.704 95.728 665.914 95.616 666.138 95.616C666.306 95.616 666.418 95.686 666.474 95.826C666.53 95.966 666.544 96.106 666.516 96.246C666.432 96.582 666.292 97.03 666.096 97.59C665.9 98.15 665.704 98.752 665.508 99.396C665.312 100.012 665.158 100.6 665.046 101.16C664.99 101.552 664.85 101.818 664.626 101.958C664.43 102.07 664.262 102.126 664.122 102.126Z" fill="black"/>
|
|
86
|
+
<path d="M952.992 103.596C952.376 103.596 951.718 103.498 951.018 103.302C950.318 103.106 949.716 102.854 949.212 102.546C948.736 102.266 948.498 101.986 948.498 101.706C948.498 101.454 948.582 101.16 948.75 100.824C948.946 100.488 949.184 100.194 949.464 99.942C949.744 99.69 949.996 99.564 950.22 99.564C950.5 99.564 950.752 99.634 950.976 99.774C951.2 99.914 951.438 100.096 951.69 100.32C952.054 100.684 952.474 101.048 952.95 101.412C953.454 101.748 954.084 101.916 954.84 101.916C955.82 101.916 956.73 101.664 957.57 101.16C958.438 100.628 959.138 99.9 959.67 98.976C960.23 98.052 960.51 97.002 960.51 95.826C960.51 94.734 960.328 93.698 959.964 92.718C959.628 91.738 959.124 90.954 958.452 90.366C957.78 89.75 956.94 89.442 955.932 89.442C955.484 89.442 955.008 89.512 954.504 89.652C954.028 89.792 953.594 89.974 953.202 90.198C953.034 90.282 952.838 90.268 952.614 90.156C952.39 90.044 952.306 89.904 952.362 89.736C952.474 89.288 952.656 88.924 952.908 88.644C953.188 88.364 953.482 88.154 953.79 88.014C954.238 87.79 954.756 87.51 955.344 87.174C955.932 86.81 956.506 86.39 957.066 85.914C957.626 85.41 958.088 84.85 958.452 84.234C958.816 83.618 958.998 82.946 958.998 82.218C958.998 81.154 958.648 80.23 957.948 79.446C957.248 78.634 956.352 78.228 955.26 78.228C954.252 78.228 953.44 78.41 952.824 78.774C952.208 79.138 951.704 79.558 951.312 80.034C950.92 80.51 950.612 80.93 950.388 81.294C950.164 81.658 949.982 81.84 949.842 81.84C949.702 81.84 949.534 81.756 949.338 81.588C949.17 81.392 949.086 81.182 949.086 80.958C949.086 80.65 949.24 80.202 949.548 79.614C949.856 78.998 950.332 78.382 950.976 77.766C951.648 77.15 952.502 76.632 953.538 76.212C954.574 75.764 955.834 75.54 957.318 75.54C958.298 75.54 959.222 75.75 960.09 76.17C960.958 76.59 961.658 77.164 962.19 77.892C962.75 78.62 963.03 79.474 963.03 80.454C963.03 81.098 962.862 81.812 962.526 82.596C962.218 83.352 961.7 84.094 960.972 84.822C960.272 85.522 959.334 86.138 958.158 86.67C958.074 86.698 958.032 86.754 958.032 86.838C958.032 86.894 958.088 86.922 958.2 86.922C959.488 86.922 960.636 87.216 961.644 87.804C962.652 88.364 963.45 89.134 964.038 90.114C964.654 91.094 964.962 92.214 964.962 93.474C964.962 95.042 964.626 96.456 963.954 97.716C963.282 98.948 962.372 100.012 961.224 100.908C960.076 101.776 958.788 102.434 957.36 102.882C955.96 103.358 954.504 103.596 952.992 103.596Z" fill="black"/>
|
|
87
|
+
<path d="M1254.92 102.126C1254.78 102.126 1254.62 102.084 1254.42 102C1254.22 101.888 1254.13 101.734 1254.13 101.538C1254.13 101.37 1254.21 101.244 1254.38 101.16C1254.57 101.048 1254.77 100.978 1254.97 100.95C1256.2 100.754 1257.02 100.474 1257.44 100.11C1257.86 99.718 1258.07 99.158 1258.07 98.43V95.07C1258.07 94.93 1257.98 94.832 1257.78 94.776C1257.58 94.72 1257.46 94.692 1257.4 94.692C1256.34 94.692 1255.29 94.72 1254.25 94.776C1253.22 94.804 1252.14 94.846 1251.02 94.902C1249.93 94.93 1248.71 94.958 1247.36 94.986C1247.25 94.986 1247.14 94.944 1247.03 94.86C1246.92 94.776 1246.86 94.678 1246.86 94.566C1246.86 94.51 1246.9 94.44 1246.99 94.356C1247.29 93.964 1247.52 93.684 1247.66 93.516C1247.83 93.348 1247.97 93.194 1248.08 93.054C1248.19 92.914 1248.33 92.718 1248.5 92.466L1259.29 76.338C1259.49 76.03 1259.73 75.736 1260.01 75.456C1260.29 75.176 1260.55 75.036 1260.8 75.036H1261.48C1261.64 75.036 1261.7 75.134 1261.64 75.33C1261.62 75.526 1261.59 75.652 1261.56 75.708L1250.72 91.794C1250.67 91.906 1250.64 92.018 1250.64 92.13C1250.64 92.214 1250.71 92.256 1250.85 92.256H1257.61C1257.72 92.256 1257.82 92.228 1257.91 92.172C1258.02 92.088 1258.07 92.004 1258.07 91.92V85.956C1258.07 85.564 1258.09 85.312 1258.12 85.2C1258.17 85.06 1258.31 84.934 1258.54 84.822C1259.07 84.542 1259.64 84.36 1260.26 84.276C1260.87 84.192 1261.31 84.15 1261.56 84.15C1261.95 84.15 1262.18 84.402 1262.23 84.906C1262.32 85.382 1262.36 86.096 1262.36 87.048V92.088C1262.36 92.284 1262.43 92.382 1262.57 92.382C1262.9 92.41 1263.18 92.424 1263.41 92.424C1263.66 92.424 1263.93 92.424 1264.21 92.424C1264.6 92.424 1264.99 92.424 1265.38 92.424C1265.77 92.396 1266.19 92.368 1266.64 92.34C1266.95 92.34 1267.1 92.438 1267.1 92.634C1267.1 92.858 1267.05 93.138 1266.94 93.474C1266.82 93.782 1266.68 94.048 1266.52 94.272C1266.38 94.496 1266.28 94.608 1266.22 94.608C1265.91 94.608 1265.58 94.608 1265.21 94.608C1264.88 94.58 1264.53 94.566 1264.16 94.566C1263.91 94.566 1263.69 94.58 1263.49 94.608C1263.3 94.608 1263.11 94.622 1262.95 94.65C1262.83 94.678 1262.71 94.72 1262.57 94.776C1262.46 94.832 1262.4 94.874 1262.4 94.902V98.304C1262.4 99.116 1262.58 99.69 1262.95 100.026C1263.34 100.334 1264.08 100.642 1265.17 100.95C1265.37 100.978 1265.55 101.048 1265.72 101.16C1265.91 101.272 1266.01 101.426 1266.01 101.622C1266.01 101.734 1265.94 101.846 1265.8 101.958C1265.66 102.07 1265.49 102.126 1265.3 102.126C1264.57 102.126 1263.93 102.098 1263.37 102.042C1262.83 102.014 1262.32 101.986 1261.81 101.958C1261.34 101.93 1260.78 101.916 1260.13 101.916C1259.46 101.916 1258.87 101.93 1258.37 101.958C1257.86 101.986 1257.35 102.014 1256.81 102.042C1256.28 102.098 1255.65 102.126 1254.92 102.126Z" fill="black"/>
|
|
88
|
+
<path d="M1550.98 103.596C1550.64 103.596 1550.26 103.554 1549.84 103.47C1549.45 103.414 1549.25 103.274 1549.25 103.05C1549.25 102.798 1549.44 102.602 1549.8 102.462C1550.19 102.322 1550.54 102.238 1550.85 102.21C1552.87 102.154 1554.57 101.748 1555.97 100.992C1557.37 100.236 1558.42 99.298 1559.12 98.178C1559.85 97.058 1560.22 95.924 1560.22 94.776C1560.22 93.712 1559.91 92.774 1559.29 91.962C1558.68 91.122 1557.68 90.366 1556.31 89.694C1554.97 89.022 1553.15 88.378 1550.85 87.762C1550.32 87.454 1549.94 87.146 1549.72 86.838C1549.52 86.53 1549.42 86.166 1549.42 85.746C1549.42 85.354 1549.49 84.85 1549.63 84.234C1549.8 83.618 1550 82.974 1550.22 82.302C1550.44 81.602 1550.65 80.944 1550.85 80.328C1551.07 79.684 1551.24 79.18 1551.35 78.816C1551.52 78.312 1551.76 77.934 1552.07 77.682C1552.38 77.402 1552.75 77.206 1553.2 77.094C1553.79 76.954 1554.46 76.814 1555.22 76.674C1556 76.506 1556.8 76.366 1557.61 76.254C1558.45 76.114 1559.26 75.988 1560.05 75.876C1560.83 75.764 1561.53 75.68 1562.15 75.624C1562.37 75.596 1562.54 75.666 1562.65 75.834C1562.76 76.002 1562.78 76.198 1562.69 76.422C1562.61 76.702 1562.48 77.01 1562.32 77.346C1562.15 77.654 1561.99 77.962 1561.85 78.27C1561.66 78.718 1561.39 79.082 1561.06 79.362C1560.75 79.614 1560.37 79.768 1559.92 79.824C1559.42 79.88 1558.82 79.936 1558.12 79.992C1557.42 80.048 1556.72 80.104 1556.02 80.16C1555.32 80.216 1554.67 80.272 1554.08 80.328C1553.52 80.356 1553.1 80.398 1552.82 80.454C1552.63 80.482 1552.4 80.678 1552.15 81.042C1551.93 81.406 1551.73 81.798 1551.56 82.218C1551.4 82.638 1551.3 82.946 1551.27 83.142C1551.24 83.338 1551.27 83.492 1551.35 83.604C1551.44 83.716 1551.58 83.8 1551.77 83.856C1553.34 84.248 1554.76 84.668 1556.02 85.116C1557.28 85.564 1558.38 86.04 1559.33 86.544C1560.99 87.384 1562.2 88.392 1562.99 89.568C1563.77 90.744 1564.16 92.144 1564.16 93.768C1564.16 95.336 1563.69 96.806 1562.74 98.178C1561.81 99.55 1560.57 100.684 1559 101.58C1558.33 101.944 1557.56 102.28 1556.69 102.588C1555.82 102.896 1554.91 103.134 1553.96 103.302C1553.01 103.498 1552.01 103.596 1550.98 103.596Z" fill="black"/>
|
|
89
|
+
<path d="M1857.02 102.63C1855.4 102.63 1853.93 102.294 1852.61 101.622C1851.3 100.95 1850.25 99.97 1849.46 98.682C1848.68 97.366 1848.29 95.77 1848.29 93.894C1848.29 92.326 1848.47 90.912 1848.83 89.652C1849.2 88.364 1849.65 87.23 1850.18 86.25C1850.74 85.242 1851.3 84.388 1851.86 83.688C1852.42 82.988 1852.89 82.428 1853.29 82.008C1853.96 81.28 1854.83 80.482 1855.89 79.614C1856.98 78.746 1858.24 77.92 1859.67 77.136C1861.1 76.324 1862.64 75.68 1864.29 75.204C1864.6 75.092 1864.88 75.064 1865.13 75.12C1865.38 75.176 1865.48 75.274 1865.42 75.414C1865.37 75.666 1865.21 75.876 1864.96 76.044C1864.71 76.184 1864.46 76.31 1864.21 76.422C1862.44 77.178 1860.93 78.06 1859.67 79.068C1858.44 80.076 1857.32 81.322 1856.31 82.806C1855.89 83.478 1855.39 84.388 1854.8 85.536C1854.21 86.684 1853.71 87.972 1853.29 89.4C1852.87 90.828 1852.66 92.284 1852.66 93.768C1852.68 95.308 1852.96 96.61 1853.5 97.674C1854.03 98.738 1854.7 99.55 1855.51 100.11C1856.32 100.67 1857.14 100.95 1857.95 100.95C1858.98 100.978 1859.88 100.572 1860.64 99.732C1861.42 98.892 1861.81 97.618 1861.81 95.91C1861.81 95.042 1861.66 94.258 1861.35 93.558C1861.04 92.83 1860.62 92.242 1860.09 91.794C1859.56 91.318 1858.96 91.08 1858.28 91.08C1857.7 91.08 1857.18 91.122 1856.73 91.206C1856.31 91.262 1855.9 91.388 1855.51 91.584C1855.18 91.752 1854.97 91.752 1854.88 91.584C1854.83 91.388 1854.9 91.164 1855.09 90.912C1855.29 90.716 1855.46 90.548 1855.6 90.408C1855.76 90.268 1855.96 90.128 1856.18 89.988C1856.52 89.708 1857.11 89.386 1857.95 89.022C1858.79 88.63 1859.59 88.434 1860.34 88.434C1861.35 88.434 1862.27 88.672 1863.11 89.148C1863.98 89.624 1864.68 90.268 1865.21 91.08C1865.75 91.892 1866.01 92.83 1866.01 93.894C1866.01 95.126 1865.76 96.274 1865.26 97.338C1864.78 98.402 1864.12 99.34 1863.28 100.152C1862.44 100.936 1861.48 101.552 1860.38 102C1859.32 102.42 1858.2 102.63 1857.02 102.63Z" fill="black"/>
|
|
90
|
+
<path d="M2152.03 103.302C2151.69 103.302 2151.44 103.19 2151.27 102.966C2151.1 102.742 2151.02 102.462 2151.02 102.126C2151.02 102.014 2151.13 101.762 2151.35 101.37C2151.58 100.978 2151.79 100.614 2151.98 100.278L2163.24 80.118C2163.32 79.978 2163.34 79.88 2163.28 79.824C2163.25 79.74 2163.1 79.684 2162.82 79.656H2152.53C2151.83 79.656 2151.24 79.782 2150.77 80.034C2150.32 80.258 2149.86 80.734 2149.38 81.462C2149.32 81.574 2149.23 81.742 2149.09 81.966C2148.95 82.19 2148.78 82.4 2148.58 82.596C2148.39 82.792 2148.2 82.89 2148.04 82.89C2147.9 82.89 2147.78 82.82 2147.7 82.68C2147.62 82.54 2147.57 82.4 2147.57 82.26C2147.57 82.092 2147.62 81.868 2147.7 81.588C2147.78 81.308 2147.84 81.098 2147.87 80.958C2148.01 80.23 2148.16 79.418 2148.33 78.522C2148.5 77.626 2148.61 76.87 2148.67 76.254C2148.67 76.002 2148.74 75.848 2148.88 75.792C2149.04 75.708 2149.17 75.68 2149.25 75.708C2149.39 75.708 2149.83 75.778 2150.56 75.918C2151.28 76.03 2152.08 76.086 2152.95 76.086C2153.48 76.086 2154.03 76.1 2154.59 76.128C2155.15 76.128 2155.72 76.142 2156.31 76.17C2156.93 76.17 2157.54 76.17 2158.16 76.17C2159.42 76.17 2160.64 76.17 2161.81 76.17C2163.02 76.142 2164.07 76.114 2164.96 76.086C2165.86 76.03 2166.46 75.988 2166.77 75.96C2166.85 75.96 2166.92 76.044 2166.98 76.212C2167.03 76.352 2167.06 76.492 2167.06 76.632C2167.06 76.828 2166.96 77.094 2166.77 77.43C2166.6 77.766 2166.39 78.116 2166.14 78.48C2165.89 78.844 2165.68 79.194 2165.51 79.53L2152.87 102.084C2152.75 102.336 2152.6 102.602 2152.4 102.882C2152.24 103.162 2152.11 103.302 2152.03 103.302Z" fill="black"/>
|
|
91
|
+
<path d="M2456.56 102.588C2455.16 102.588 2453.86 102.308 2452.66 101.748C2451.48 101.188 2450.53 100.418 2449.8 99.438C2449.07 98.458 2448.71 97.324 2448.71 96.036C2448.71 94.86 2449.03 93.866 2449.67 93.054C2450.32 92.242 2451.09 91.556 2451.98 90.996C2452.88 90.436 2453.69 89.946 2454.42 89.526C2454.64 89.414 2454.71 89.33 2454.63 89.274C2454.57 89.19 2454.46 89.078 2454.29 88.938C2453.45 88.238 2452.66 87.552 2451.9 86.88C2451.17 86.18 2450.57 85.41 2450.09 84.57C2449.65 83.702 2449.42 82.708 2449.42 81.588C2449.42 80.412 2449.81 79.376 2450.6 78.48C2451.41 77.584 2452.43 76.87 2453.66 76.338C2454.92 75.806 2456.21 75.54 2457.53 75.54C2458.7 75.54 2459.82 75.778 2460.89 76.254C2461.98 76.73 2462.86 77.402 2463.53 78.27C2464.21 79.11 2464.54 80.118 2464.54 81.294C2464.54 82.33 2464.29 83.17 2463.79 83.814C2463.28 84.458 2462.76 84.976 2462.23 85.368C2461.87 85.648 2461.53 85.9 2461.22 86.124C2460.92 86.32 2460.55 86.572 2460.13 86.88C2459.74 87.132 2459.54 87.314 2459.54 87.426C2459.54 87.538 2459.67 87.664 2459.92 87.804C2460.96 88.532 2461.88 89.246 2462.69 89.946C2463.53 90.618 2464.18 91.36 2464.63 92.172C2465.1 92.956 2465.34 93.894 2465.34 94.986C2465.34 96.47 2464.92 97.786 2464.08 98.934C2463.24 100.082 2462.15 100.978 2460.8 101.622C2459.49 102.266 2458.07 102.588 2456.56 102.588ZM2457.19 101.16C2458.34 101.16 2459.29 100.74 2460.05 99.9C2460.83 99.032 2461.22 98.024 2461.22 96.876C2461.22 96.036 2460.97 95.238 2460.47 94.482C2459.99 93.726 2459.39 93.012 2458.66 92.34C2457.93 91.668 2457.21 91.066 2456.48 90.534C2456.31 90.394 2456.17 90.296 2456.06 90.24C2455.95 90.156 2455.82 90.114 2455.68 90.114C2455.6 90.114 2455.43 90.212 2455.18 90.408C2454.36 91.08 2453.78 91.78 2453.41 92.508C2453.05 93.236 2452.87 94.23 2452.87 95.49C2452.87 96.442 2453.03 97.352 2453.37 98.22C2453.71 99.06 2454.2 99.76 2454.84 100.32C2455.51 100.88 2456.3 101.16 2457.19 101.16ZM2458.62 86.628C2459.43 85.956 2459.96 85.144 2460.22 84.192C2460.47 83.24 2460.59 82.19 2460.59 81.042C2460.59 79.894 2460.31 78.914 2459.75 78.102C2459.22 77.262 2458.37 76.842 2457.19 76.842C2456.58 76.842 2455.97 77.01 2455.39 77.346C2454.83 77.682 2454.35 78.13 2453.96 78.69C2453.59 79.25 2453.41 79.894 2453.41 80.622C2453.41 81.574 2453.61 82.358 2454 82.974C2454.39 83.59 2454.92 84.164 2455.6 84.696C2456.3 85.2 2457.08 85.816 2457.95 86.544C2458.06 86.628 2458.17 86.684 2458.28 86.712C2458.42 86.74 2458.54 86.712 2458.62 86.628Z" fill="black"/>
|
|
92
|
+
<path d="M2749.09 103.596C2748.81 103.596 2748.61 103.54 2748.5 103.428C2748.39 103.344 2748.33 103.246 2748.33 103.134C2748.33 102.938 2748.41 102.784 2748.58 102.672C2748.75 102.56 2748.93 102.504 2749.13 102.504C2750.02 102.476 2751 102.182 2752.07 101.622C2753.16 101.034 2754.24 100.278 2755.3 99.354C2756.39 98.43 2757.36 97.436 2758.2 96.372C2758.98 95.336 2759.66 94.272 2760.22 93.18C2760.8 92.06 2761.25 90.884 2761.56 89.652C2761.9 88.42 2762.06 87.09 2762.06 85.662C2762.06 84.682 2761.91 83.702 2761.6 82.722C2761.32 81.742 2760.93 80.846 2760.43 80.034C2759.92 79.194 2759.35 78.536 2758.7 78.06C2758.06 77.556 2757.39 77.304 2756.69 77.304C2755.88 77.304 2755.18 77.528 2754.59 77.976C2754.03 78.424 2753.61 78.998 2753.33 79.698C2753.05 80.398 2752.91 81.168 2752.91 82.008C2752.91 82.848 2753.09 83.674 2753.45 84.486C2753.85 85.27 2754.34 85.928 2754.92 86.46C2755.54 86.964 2756.17 87.216 2756.81 87.216C2757.54 87.216 2758.09 87.118 2758.45 86.922C2758.82 86.726 2759.21 86.53 2759.63 86.334C2759.91 86.222 2760.09 86.264 2760.17 86.46C2760.26 86.656 2760.23 86.838 2760.09 87.006C2759.95 87.258 2759.75 87.496 2759.5 87.72C2759.28 87.944 2759.07 88.14 2758.87 88.308C2758.68 88.476 2758.35 88.672 2757.91 88.896C2757.49 89.12 2757.02 89.33 2756.52 89.526C2756.02 89.694 2755.5 89.778 2754.97 89.778C2753.99 89.778 2753.02 89.54 2752.07 89.064C2751.12 88.56 2750.33 87.888 2749.72 87.048C2749.13 86.18 2748.83 85.214 2748.83 84.15C2748.83 83.198 2749.06 82.232 2749.51 81.252C2749.95 80.244 2750.58 79.32 2751.4 78.48C2752.24 77.612 2753.2 76.912 2754.29 76.38C2755.41 75.848 2756.63 75.582 2757.95 75.582C2759.01 75.582 2760.05 75.848 2761.06 76.38C2762.06 76.912 2762.96 77.64 2763.74 78.564C2764.56 79.46 2765.19 80.482 2765.63 81.63C2766.08 82.778 2766.31 83.968 2766.31 85.2C2766.31 86.936 2766.04 88.56 2765.51 90.072C2764.98 91.584 2764.25 93.012 2763.32 94.356C2762.43 95.672 2761.39 96.946 2760.22 98.178C2759.49 98.934 2758.63 99.648 2757.65 100.32C2756.7 100.964 2755.71 101.524 2754.67 102C2753.66 102.504 2752.67 102.896 2751.69 103.176C2750.71 103.456 2749.84 103.596 2749.09 103.596Z" fill="black"/>
|
|
93
|
+
<path d="M77.764 102.126C77.54 102.126 77.344 102.084 77.176 102C77.036 101.916 76.966 101.79 76.966 101.622C76.966 101.398 77.05 101.244 77.218 101.16C77.414 101.048 77.624 100.964 77.848 100.908C78.492 100.74 78.968 100.558 79.276 100.362C79.584 100.166 79.738 99.816 79.738 99.312V90.24C79.738 89.4 79.598 88.728 79.318 88.224C79.038 87.692 78.548 87.37 77.848 87.258C77.708 87.23 77.596 87.174 77.512 87.09C77.456 86.978 77.428 86.824 77.428 86.628C77.428 86.292 77.554 86.11 77.806 86.082C79.038 85.802 80.088 85.438 80.956 84.99C81.852 84.514 82.524 84.136 82.972 83.856C83.28 83.66 83.504 83.562 83.644 83.562C83.868 83.562 83.98 83.674 83.98 83.898C83.98 84.206 83.938 84.696 83.854 85.368C83.798 86.04 83.728 86.768 83.644 87.552C83.588 88.336 83.56 89.064 83.56 89.736V99.312C83.56 99.76 83.714 100.096 84.022 100.32C84.33 100.544 84.806 100.74 85.45 100.908C85.674 100.964 85.87 101.048 86.038 101.16C86.234 101.244 86.332 101.398 86.332 101.622C86.332 101.958 86.08 102.126 85.576 102.126C85.044 102.126 84.568 102.098 84.148 102.042C83.728 102.014 83.322 101.986 82.93 101.958C82.566 101.93 82.132 101.916 81.628 101.916C81.152 101.916 80.718 101.93 80.326 101.958C79.934 101.986 79.542 102.014 79.15 102.042C78.786 102.098 78.324 102.126 77.764 102.126ZM81.544 80.664C80.844 80.664 80.242 80.426 79.738 79.95C79.262 79.446 79.024 78.844 79.024 78.144C79.024 77.416 79.262 76.814 79.738 76.338C80.242 75.834 80.844 75.582 81.544 75.582C82.272 75.582 82.888 75.834 83.392 76.338C83.896 76.814 84.148 77.416 84.148 78.144C84.148 78.844 83.896 79.446 83.392 79.95C82.888 80.426 82.272 80.664 81.544 80.664ZM88.8392 102.126C88.6152 102.126 88.4192 102.084 88.2512 102C88.0832 101.916 87.9992 101.79 87.9992 101.622C87.9992 101.398 88.0832 101.244 88.2512 101.16C88.4472 101.048 88.6852 100.95 88.9652 100.866C89.3852 100.754 89.7772 100.6 90.1412 100.404C90.5052 100.208 90.6872 99.83 90.6872 99.27V90.03C90.6872 89.33 90.6032 88.742 90.4352 88.266C90.2952 87.762 89.8892 87.426 89.2172 87.258C89.1052 87.23 89.0072 87.174 88.9232 87.09C88.8392 86.978 88.7972 86.838 88.7972 86.67C88.7972 86.306 88.9232 86.11 89.1752 86.082C90.1552 85.83 91.0372 85.522 91.8212 85.158C92.6332 84.794 93.3752 84.388 94.0472 83.94C94.1312 83.884 94.2152 83.828 94.2992 83.772C94.4112 83.716 94.5092 83.688 94.5932 83.688C94.7052 83.688 94.7752 83.73 94.8032 83.814C94.8592 83.87 94.8872 83.954 94.8872 84.066C94.8872 84.262 94.8452 84.64 94.7612 85.2C94.7052 85.76 94.6772 86.236 94.6772 86.628C94.6772 86.74 94.6772 86.852 94.6772 86.964C94.7052 87.076 94.7332 87.146 94.7612 87.174C95.7412 86.25 96.7492 85.55 97.7852 85.074C98.8492 84.598 100.039 84.36 101.355 84.36C102.755 84.36 103.917 84.906 104.841 85.998C105.765 87.09 106.227 88.504 106.227 90.24V99.312C106.227 99.872 106.409 100.236 106.773 100.404C107.165 100.572 107.571 100.726 107.991 100.866C108.215 100.95 108.425 101.048 108.621 101.16C108.817 101.272 108.915 101.44 108.915 101.664C108.915 101.86 108.817 101.986 108.621 102.042C108.453 102.098 108.285 102.126 108.117 102.126C107.557 102.126 107.081 102.098 106.689 102.042C106.325 102.014 105.961 101.986 105.597 101.958C105.261 101.93 104.841 101.916 104.337 101.916C103.861 101.916 103.441 101.93 103.077 101.958C102.713 101.986 102.335 102.014 101.943 102.042C101.579 102.098 101.117 102.126 100.557 102.126C100.417 102.126 100.249 102.098 100.053 102.042C99.8572 101.986 99.7592 101.86 99.7592 101.664C99.7592 101.44 99.8572 101.272 100.053 101.16C100.249 101.048 100.459 100.95 100.683 100.866C101.103 100.726 101.495 100.572 101.859 100.404C102.223 100.236 102.405 99.872 102.405 99.312V90.618C102.405 89.442 102.083 88.532 101.439 87.888C100.823 87.244 100.011 86.908 99.0032 86.88C98.1352 86.88 97.3652 87.02 96.6932 87.3C96.0492 87.552 95.4472 87.902 94.8872 88.35C94.7752 88.462 94.6912 88.602 94.6352 88.77C94.5792 88.938 94.5512 89.092 94.5512 89.232V99.312C94.5512 99.872 94.7332 100.25 95.0972 100.446C95.4612 100.614 95.8392 100.754 96.2312 100.866C96.8472 101.062 97.1552 101.314 97.1552 101.622C97.1552 101.79 97.0852 101.916 96.9452 102C96.8052 102.084 96.6092 102.126 96.3572 102.126C95.7972 102.126 95.3212 102.098 94.9292 102.042C94.5652 102.014 94.2152 101.986 93.8792 101.958C93.5712 101.93 93.1652 101.916 92.6612 101.916C92.1852 101.916 91.7652 101.93 91.4012 101.958C91.0372 101.986 90.6592 102.014 90.2672 102.042C89.8752 102.098 89.3992 102.126 88.8392 102.126Z" fill="black"/>
|
|
94
|
+
</svg>
|
|
@@ -0,0 +1,422 @@
|
|
|
1
|
+
<svelte:options
|
|
2
|
+
customElement={{
|
|
3
|
+
tag: 'pie-tool-ruler',
|
|
4
|
+
shadow: 'none',
|
|
5
|
+
props: {
|
|
6
|
+
visible: { type: 'Boolean', attribute: 'visible' },
|
|
7
|
+
toolId: { type: 'String', attribute: 'tool-id' },
|
|
8
|
+
coordinator: { type: 'Object' }
|
|
9
|
+
}
|
|
10
|
+
}}
|
|
11
|
+
/>
|
|
12
|
+
|
|
13
|
+
<script lang="ts">
|
|
14
|
+
import type { IToolCoordinator } from '@pie-players/pie-assessment-toolkit';
|
|
15
|
+
import { ZIndexLayer } from '@pie-players/pie-assessment-toolkit';
|
|
16
|
+
import Moveable from 'moveable';
|
|
17
|
+
import { onDestroy, onMount } from 'svelte';
|
|
18
|
+
import rulerCm from './ruler-cm.svg';
|
|
19
|
+
import rulerInches from './ruler-inches.svg';
|
|
20
|
+
|
|
21
|
+
// Props
|
|
22
|
+
let { visible = false, toolId = 'ruler', coordinator }: { visible?: boolean; toolId?: string; coordinator?: IToolCoordinator } = $props();
|
|
23
|
+
|
|
24
|
+
// Check if running in browser
|
|
25
|
+
const isBrowser = typeof window !== 'undefined';
|
|
26
|
+
|
|
27
|
+
// State
|
|
28
|
+
let containerEl = $state<HTMLDivElement | undefined>();
|
|
29
|
+
let announceText = $state('');
|
|
30
|
+
let unit = $state<'inches' | 'cm'>('inches');
|
|
31
|
+
let moveable: Moveable | null = null;
|
|
32
|
+
|
|
33
|
+
// Track registration state
|
|
34
|
+
let registered = $state(false);
|
|
35
|
+
|
|
36
|
+
// Keyboard navigation constants
|
|
37
|
+
const MOVE_STEP = 10; // pixels
|
|
38
|
+
const ROTATE_STEP = 5; // degrees
|
|
39
|
+
const FINE_ROTATE_STEP = 1; // degrees
|
|
40
|
+
|
|
41
|
+
let currentRuler = $derived(unit === 'inches' ? rulerInches : rulerCm);
|
|
42
|
+
|
|
43
|
+
function announce(message: string) {
|
|
44
|
+
announceText = message;
|
|
45
|
+
setTimeout(() => announceText = '', 1000);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function toggleUnit() {
|
|
49
|
+
unit = unit === 'inches' ? 'cm' : 'inches';
|
|
50
|
+
announce(`Switched to ${unit === 'inches' ? 'inches' : 'centimeters'}`);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Initialize Moveable.js (matching production configuration)
|
|
54
|
+
function initMoveable() {
|
|
55
|
+
if (!containerEl || !isBrowser) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Clean up any existing instance first
|
|
60
|
+
if (moveable) {
|
|
61
|
+
moveable.destroy();
|
|
62
|
+
moveable = null;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
coordinator?.bringToFront(containerEl);
|
|
66
|
+
|
|
67
|
+
moveable = new Moveable(document.body, {
|
|
68
|
+
target: containerEl,
|
|
69
|
+
draggable: true,
|
|
70
|
+
rotatable: true,
|
|
71
|
+
snappable: true,
|
|
72
|
+
originDraggable: true,
|
|
73
|
+
originRelative: true,
|
|
74
|
+
keepRatio: false,
|
|
75
|
+
bounds: {
|
|
76
|
+
left: 0,
|
|
77
|
+
top: 0,
|
|
78
|
+
right: 0,
|
|
79
|
+
bottom: 0,
|
|
80
|
+
position: 'css'
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// Associate the moveable instance with the tool ID
|
|
85
|
+
const controlBox = moveable.getControlBoxElement();
|
|
86
|
+
controlBox?.setAttribute('data-moveablejs-tool-control-box', toolId);
|
|
87
|
+
|
|
88
|
+
moveable.on('drag', ({ target, transform }) => {
|
|
89
|
+
if (target) {
|
|
90
|
+
target.style.transform = transform;
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
moveable.on('rotate', ({ target, transform }) => {
|
|
95
|
+
if (target) {
|
|
96
|
+
target.style.transform = transform;
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function destroyMoveable() {
|
|
102
|
+
if (moveable) {
|
|
103
|
+
moveable.destroy();
|
|
104
|
+
moveable = null;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
function updateBounds() {
|
|
109
|
+
if (moveable) {
|
|
110
|
+
moveable.bounds = {
|
|
111
|
+
left: 0,
|
|
112
|
+
top: 0,
|
|
113
|
+
right: 0,
|
|
114
|
+
bottom: 0,
|
|
115
|
+
position: 'css'
|
|
116
|
+
};
|
|
117
|
+
moveable.updateRect();
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Keyboard navigation (preserved for accessibility)
|
|
122
|
+
function handleKeyDown(e: KeyboardEvent) {
|
|
123
|
+
if (!moveable || !containerEl) return;
|
|
124
|
+
|
|
125
|
+
let handled = false;
|
|
126
|
+
const isShift = e.shiftKey;
|
|
127
|
+
|
|
128
|
+
// Get current transform from element
|
|
129
|
+
const transform = containerEl.style.transform || '';
|
|
130
|
+
const matrix = new DOMMatrix(transform || 'none');
|
|
131
|
+
|
|
132
|
+
// Extract position and rotation
|
|
133
|
+
let x = matrix.e || (isBrowser ? window.innerWidth / 2 : 400);
|
|
134
|
+
let y = matrix.f || (isBrowser ? window.innerHeight / 2 : 300);
|
|
135
|
+
let rotation = Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI));
|
|
136
|
+
|
|
137
|
+
switch (e.key) {
|
|
138
|
+
case 'ArrowUp':
|
|
139
|
+
if (isShift) {
|
|
140
|
+
rotation = (rotation - ROTATE_STEP + 360) % 360;
|
|
141
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
142
|
+
} else {
|
|
143
|
+
y -= MOVE_STEP;
|
|
144
|
+
announce(`Moved up to ${Math.round(y)}`);
|
|
145
|
+
}
|
|
146
|
+
handled = true;
|
|
147
|
+
break;
|
|
148
|
+
case 'ArrowDown':
|
|
149
|
+
if (isShift) {
|
|
150
|
+
rotation = (rotation + ROTATE_STEP) % 360;
|
|
151
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
152
|
+
} else {
|
|
153
|
+
y += MOVE_STEP;
|
|
154
|
+
announce(`Moved down to ${Math.round(y)}`);
|
|
155
|
+
}
|
|
156
|
+
handled = true;
|
|
157
|
+
break;
|
|
158
|
+
case 'ArrowLeft':
|
|
159
|
+
if (isShift) {
|
|
160
|
+
rotation = (rotation - ROTATE_STEP + 360) % 360;
|
|
161
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
162
|
+
} else {
|
|
163
|
+
x -= MOVE_STEP;
|
|
164
|
+
announce(`Moved left to ${Math.round(x)}`);
|
|
165
|
+
}
|
|
166
|
+
handled = true;
|
|
167
|
+
break;
|
|
168
|
+
case 'ArrowRight':
|
|
169
|
+
if (isShift) {
|
|
170
|
+
rotation = (rotation + ROTATE_STEP) % 360;
|
|
171
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
172
|
+
} else {
|
|
173
|
+
x += MOVE_STEP;
|
|
174
|
+
announce(`Moved right to ${Math.round(x)}`);
|
|
175
|
+
}
|
|
176
|
+
handled = true;
|
|
177
|
+
break;
|
|
178
|
+
case 'PageUp':
|
|
179
|
+
rotation = (rotation - FINE_ROTATE_STEP + 360) % 360;
|
|
180
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
181
|
+
handled = true;
|
|
182
|
+
break;
|
|
183
|
+
case 'PageDown':
|
|
184
|
+
rotation = (rotation + FINE_ROTATE_STEP) % 360;
|
|
185
|
+
announce(`Rotated to ${rotation} degrees`);
|
|
186
|
+
handled = true;
|
|
187
|
+
break;
|
|
188
|
+
case 'u':
|
|
189
|
+
case 'U':
|
|
190
|
+
toggleUnit();
|
|
191
|
+
handled = true;
|
|
192
|
+
break;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
if (handled && moveable) {
|
|
196
|
+
e.preventDefault();
|
|
197
|
+
// Apply new transform via Moveable
|
|
198
|
+
const newTransform = `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${rotation}deg)`;
|
|
199
|
+
containerEl.style.transform = newTransform;
|
|
200
|
+
moveable.updateRect();
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Initialize Moveable when visible changes
|
|
205
|
+
$effect(() => {
|
|
206
|
+
if (visible && containerEl && isBrowser) {
|
|
207
|
+
// Wait for the next tick to ensure DOM is updated
|
|
208
|
+
setTimeout(initMoveable, 0);
|
|
209
|
+
} else {
|
|
210
|
+
destroyMoveable();
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
// Register with coordinator when it becomes available
|
|
215
|
+
$effect(() => {
|
|
216
|
+
if (coordinator && toolId && !registered) {
|
|
217
|
+
coordinator.registerTool(toolId, 'Ruler', undefined, ZIndexLayer.TOOL);
|
|
218
|
+
registered = true;
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
onMount(() => {
|
|
223
|
+
window.addEventListener('resize', updateBounds);
|
|
224
|
+
return () => {
|
|
225
|
+
destroyMoveable();
|
|
226
|
+
window.removeEventListener('resize', updateBounds);
|
|
227
|
+
if (coordinator && toolId) {
|
|
228
|
+
coordinator.unregisterTool(toolId);
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
// Update element reference when container becomes available
|
|
234
|
+
$effect(() => {
|
|
235
|
+
if (coordinator && containerEl && toolId) {
|
|
236
|
+
coordinator.updateToolElement(toolId, containerEl);
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
// Auto-focus when tool becomes visible
|
|
241
|
+
$effect(() => {
|
|
242
|
+
if (visible && containerEl) {
|
|
243
|
+
setTimeout(() => containerEl?.focus(), 100);
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
</script>
|
|
247
|
+
|
|
248
|
+
{#if visible && isBrowser}
|
|
249
|
+
<!-- Screen reader announcements -->
|
|
250
|
+
<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
|
|
251
|
+
{announceText}
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
255
|
+
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
256
|
+
<div
|
|
257
|
+
bind:this={containerEl}
|
|
258
|
+
class="ruler-frame"
|
|
259
|
+
data-moveablejs-tool-id={toolId}
|
|
260
|
+
onpointerdown={() => coordinator?.bringToFront(containerEl)}
|
|
261
|
+
onkeydown={handleKeyDown}
|
|
262
|
+
role="application"
|
|
263
|
+
tabindex="0"
|
|
264
|
+
aria-label="Ruler tool. Use arrow keys to move, Shift+arrows to rotate, PageUp/PageDown for fine rotation, U to toggle units. Current unit: {unit}"
|
|
265
|
+
aria-roledescription="Draggable and rotatable ruler measurement tool"
|
|
266
|
+
>
|
|
267
|
+
<div class="ruler-container">
|
|
268
|
+
<img
|
|
269
|
+
class="ruler"
|
|
270
|
+
src={currentRuler}
|
|
271
|
+
alt="Ruler showing {unit}"
|
|
272
|
+
draggable="false"
|
|
273
|
+
/>
|
|
274
|
+
|
|
275
|
+
<!-- Unit toggle button group (matching production implementation style) -->
|
|
276
|
+
<div class="btn-group" onpointerdown={(e) => e.stopPropagation()}>
|
|
277
|
+
<button
|
|
278
|
+
class="unit-btn"
|
|
279
|
+
class:active={unit === 'inches'}
|
|
280
|
+
onclick={() => {
|
|
281
|
+
unit = 'inches';
|
|
282
|
+
announce('Switched to inches');
|
|
283
|
+
}}
|
|
284
|
+
title="Inches"
|
|
285
|
+
aria-label="Switch to inches"
|
|
286
|
+
aria-pressed={unit === 'inches'}
|
|
287
|
+
>
|
|
288
|
+
<span class="btn-label">Inches</span>
|
|
289
|
+
</button>
|
|
290
|
+
<button
|
|
291
|
+
class="unit-btn"
|
|
292
|
+
class:active={unit === 'cm'}
|
|
293
|
+
onclick={() => {
|
|
294
|
+
unit = 'cm';
|
|
295
|
+
announce('Switched to centimeters');
|
|
296
|
+
}}
|
|
297
|
+
title="Centimeters"
|
|
298
|
+
aria-label="Switch to centimeters"
|
|
299
|
+
aria-pressed={unit === 'cm'}
|
|
300
|
+
>
|
|
301
|
+
<span class="btn-label">Centimeters</span>
|
|
302
|
+
</button>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
{/if}
|
|
307
|
+
|
|
308
|
+
<style>
|
|
309
|
+
.sr-only {
|
|
310
|
+
position: absolute;
|
|
311
|
+
width: 1px;
|
|
312
|
+
height: 1px;
|
|
313
|
+
padding: 0;
|
|
314
|
+
margin: -1px;
|
|
315
|
+
overflow: hidden;
|
|
316
|
+
clip: rect(0, 0, 0, 0);
|
|
317
|
+
white-space: nowrap;
|
|
318
|
+
border-width: 0;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.ruler-frame {
|
|
322
|
+
border-left: 1px solid #000;
|
|
323
|
+
border-right: 1px solid #000;
|
|
324
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Matching production implementation shadow */
|
|
325
|
+
cursor: move;
|
|
326
|
+
left: 50%;
|
|
327
|
+
overflow: hidden;
|
|
328
|
+
position: absolute;
|
|
329
|
+
top: 50%;
|
|
330
|
+
transform: translate(-50%, -50%);
|
|
331
|
+
user-select: none;
|
|
332
|
+
touch-action: none;
|
|
333
|
+
width: 540px; /* Matching production implementation frame width */
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.ruler-frame:focus {
|
|
337
|
+
outline: 3px solid #4A90E2;
|
|
338
|
+
outline-offset: 2px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.ruler-frame:focus-visible {
|
|
342
|
+
outline: 3px solid #4A90E2;
|
|
343
|
+
outline-offset: 2px;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.ruler-container {
|
|
347
|
+
background-color: rgb(255 255 255 / 90%); /* Matching production implementation semi-transparent white background */
|
|
348
|
+
position: relative;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.ruler-container,
|
|
352
|
+
.ruler {
|
|
353
|
+
height: 100px; /* Matching production implementation ruler height */
|
|
354
|
+
width: 864px; /* Matching production implementation ruler width */
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.ruler {
|
|
358
|
+
position: relative;
|
|
359
|
+
z-index: 2;
|
|
360
|
+
display: block;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* Unit toggle button group (matching production implementation style) */
|
|
364
|
+
.btn-group {
|
|
365
|
+
border: 1px solid var(--pie-primary, #3f51b5); /* Matching production implementation primary color */
|
|
366
|
+
bottom: 0.5rem; /* Matching production implementation positioning */
|
|
367
|
+
left: 0.5rem; /* Matching production implementation positioning */
|
|
368
|
+
position: absolute;
|
|
369
|
+
display: flex;
|
|
370
|
+
z-index: 10;
|
|
371
|
+
background: white;
|
|
372
|
+
border-radius: 4px;
|
|
373
|
+
overflow: hidden;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.unit-btn {
|
|
377
|
+
background: white;
|
|
378
|
+
border: none;
|
|
379
|
+
border-right: 1px solid var(--pie-primary, #3f51b5);
|
|
380
|
+
color: var(--pie-primary, #3f51b5);
|
|
381
|
+
cursor: pointer;
|
|
382
|
+
padding: 4px 8px;
|
|
383
|
+
font-size: 12px;
|
|
384
|
+
transition: background-color 0.2s, color 0.2s;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.unit-btn:last-child {
|
|
388
|
+
border-right: none;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.unit-btn:hover {
|
|
392
|
+
background-color: rgba(63, 81, 181, 0.1);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.unit-btn.active {
|
|
396
|
+
background-color: var(--pie-primary, #3f51b5);
|
|
397
|
+
color: white;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.unit-btn:focus-visible {
|
|
401
|
+
outline: 2px solid var(--pie-primary, #3f51b5);
|
|
402
|
+
outline-offset: 2px;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.btn-label {
|
|
406
|
+
display: inline-block;
|
|
407
|
+
font-size: 12px;
|
|
408
|
+
line-height: 1.4;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Moveable.js control styling (matching production implementation) */
|
|
412
|
+
/* Production implementation uses black (--moveable-color: #000) globally, not red for ruler */
|
|
413
|
+
:global(body .moveable-control-box[data-moveablejs-tool-control-box="ruler"]) {
|
|
414
|
+
--moveable-color: #000; /* Black, matching production implementation default */
|
|
415
|
+
z-index: 2003; /* ZIndexLayer.CONTROL */
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
:global([data-moveablejs-tool-id="ruler"]) {
|
|
419
|
+
z-index: 2002; /* ZIndexLayer.MODAL */
|
|
420
|
+
}
|
|
421
|
+
</style>
|
|
422
|
+
|