新增 图稿设计组件及相关依赖，
This commit is contained in:
YuanFeng
parent
c701b1a873
commit
573ed8f5b6
|
|
@ -67,7 +67,8 @@ export function createVitePlugins() {
|
|||
globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**']
|
||||
}),
|
||||
EslintPlugin({
|
||||
cache: false,
|
||||
fix: false, // 禁用实时修复
|
||||
cache: true, // 开启缓存
|
||||
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||
}),
|
||||
VueI18nPlugin({
|
||||
|
|
|
|||
|
|
@ -25,6 +25,17 @@
|
|||
"lint:lint-staged": "lint-staged -c "
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/x6": "^2.18.1",
|
||||
"@antv/x6-plugin-clipboard": "^2.1.6",
|
||||
"@antv/x6-plugin-dnd": "^2.1.1",
|
||||
"@antv/x6-plugin-export": "^2.1.6",
|
||||
"@antv/x6-plugin-history": "^2.2.4",
|
||||
"@antv/x6-plugin-keyboard": "^2.2.3",
|
||||
"@antv/x6-plugin-scroller": "^2.0.10",
|
||||
"@antv/x6-plugin-selection": "^2.2.2",
|
||||
"@antv/x6-plugin-snapline": "^2.1.7",
|
||||
"@antv/x6-plugin-transform": "^2.1.8",
|
||||
"@antv/x6-vue-shape": "^2.1.2",
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@form-create/designer": "^3.1.3",
|
||||
"@form-create/element-ui": "^3.1.24",
|
||||
|
|
@ -83,8 +94,8 @@
|
|||
"@types/qs": "^6.9.12",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@unocss/eslint-config": "^0.57.4",
|
||||
"@unocss/transformer-variant-group": "^0.58.5",
|
||||
"@vitejs/plugin-legacy": "^5.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 56.51818 8.1102295 C 56.25377 9.344158 56.121563 11.3933525 56.121563 14.25782 L 56.121563 25.561459 C 56.121563 27.853033 56.25377 29.681889 56.51818 31.04802 C 54.40288 30.783606 52.001137 30.673435 49.31294 30.717505 L 35.563488 30.717505 L 35.563488 35.67524 L 46.80102 35.67524 C 51.692657 35.67524 54.7334 35.5871 55.923252 35.410828 C 55.967327 35.410828 55.98936 35.410828 55.98936 35.410828 L 55.98936 40.500767 C 55.98936 40.500767 55.945286 40.500767 55.85715 40.500767 C 53.874058 40.236355 50.855347 40.10415 46.80102 40.10415 L 35.563488 40.10415 L 35.563488 45.3924 L 48.3875 45.3924 C 55.923252 45.3924 60.4403 45.216125 61.93864 44.863575 L 61.93864 50.21793 C 61.93864 50.21793 61.916607 50.21793 61.872536 50.21793 C 60.506405 49.953514 56.05546 49.82131 48.519703 49.82131 L 15.203721 49.82131 C 8.725614 49.82131 4.957735 49.953514 3.9000852 50.21793 C 3.8560164 50.21793 3.833982 50.21793 3.833982 50.21793 L 3.833982 44.863575 C 4.8475633 45.216125 8.593408 45.3924 15.071516 45.3924 L 30.804064 45.3924 L 30.804064 40.10415 L 19.434322 40.10415 C 16.30544 40.10415 13.507073 40.214317 11.039225 40.43466 C 10.554468 40.522804 10.290055 40.544838 10.245986 40.500767 L 10.245986 35.278618 C 10.642605 35.54303 13.793521 35.67524 19.698736 35.67524 L 30.804064 35.67524 L 30.804064 30.717505 L 16.261372 30.717505 C 13.352834 30.717505 11.259567 30.827675 9.981574 31.04802 C 10.245986 29.241198 10.378192 27.28014 10.378192 25.16484 L 10.378192 13.927303 C 10.378192 11.635727 10.245986 9.696709 9.981574 8.1102295 C 11.215499 8.374645 13.396903 8.506847 16.525784 8.506847 L 49.44515 8.506847 C 52.221478 8.506847 54.579163 8.374645 56.51818 8.1102295 M 35.563488 13.001865 L 35.563488 26.222488 L 51.42824 26.222488 L 51.42824 13.001865 L 35.563488 13.001865 M 15.071516 13.001865 L 15.071516 26.222488 L 30.804064 26.222488 L 30.804064 13.001865 L 15.071516 13.001865 M 42.37211 15.183266 C 46.029816 16.020573 47.990875 16.593464 48.25529 16.901943 C 48.25529 17.122292 48.079014 17.36467 47.726467 17.629082 C 47.153572 18.06977 46.712887 18.576561 46.404404 19.149456 L 43.958588 24.900425 L 38.80254 23.578362 C 40.124603 21.463066 41.31446 18.6647 42.37211 15.183266 M 24.127645 15.71209 C 25.317501 18.047733 26.375153 20.49355 27.300594 23.049538 L 22.012344 24.371601 C 21.219109 21.63934 20.271627 19.23759 19.16991 17.166359 L 24.127645 15.71209 M 9.849368 52.201023 L 15.99696 54.184116 C 14.366415 58.150307 12.493492 61.85208 10.378192 65.289444 L 4.164498 63.10804 C 6.279798 60.419846 8.174755 56.784172 9.849368 52.201023 M 53.874058 52.465435 C 56.51818 56.123142 58.633484 59.58254 60.219955 62.843628 L 53.67575 65.02503 C 52.574028 60.48595 50.767212 56.96045 48.25529 54.44853 L 53.874058 52.465435 M 40.52122 52.465435 C 42.01956 56.299416 43.121277 59.802883 43.82638 62.975834 L 37.612686 64.49621 C 36.863518 59.4283 35.87197 55.902798 34.638046 53.919704 L 40.52122 52.465435 M 27.300594 53.655293 C 28.005693 55.462112 28.688763 58.789303 29.349794 63.636864 L 23.202202 64.62841 C 23.025928 61.14698 22.453032 57.841824 21.483519 54.712944 L 27.300594 53.655293 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 81.439064 5.9949265 C 86.28663 7.757683 88.55617 8.94754 88.24768 9.564499 C 88.159546 9.784843 87.91717 10.093327 87.52055 10.489944 C 86.81545 11.106907 86.28663 11.767937 85.934074 12.473038 C 85.36118 13.486618 84.612015 14.830715 83.68657 16.505325 C 82.9374 17.87146 82.320435 18.973179 81.83568 19.810486 L 81.83568 50.48234 C 90.16467 44.665264 95.40886 35.653202 97.56823 23.44616 L 93.27152 23.44616 C 91.55284 23.402088 88.666336 23.578362 84.612015 23.974983 L 84.612015 18.356216 C 85.09677 18.400288 85.86797 18.444351 86.92562 18.488422 C 89.83416 18.6647 91.905396 18.752834 93.13932 18.752834 L 102.32765 18.752834 L 102.32765 10.489944 C 102.32765 9.167881 102.19545 7.7136116 101.93103 6.127136 C 106.11757 6.391552 108.34304 6.78817 108.60745 7.31699 C 108.65152 7.581402 108.49728 8.000057 108.14473 8.572952 C 107.74811 9.278053 107.549805 9.828911 107.549805 10.225529 L 107.549805 18.620628 L 117.79579 18.620628 C 121.32129 18.620628 124.75865 18.444351 128.10788 18.091805 L 128.10788 23.842777 C 127.9316 23.842777 127.64516 23.820744 127.248535 23.776676 C 122.53318 23.46819 119.42633 23.313953 117.92799 23.313953 L 111.978714 23.313953 C 113.21264 35.609135 119.02972 44.577126 129.42993 50.21793 C 129.2096 50.394203 128.92316 50.658615 128.5706 51.011166 C 126.19089 53.03833 124.780685 54.5587 124.34 55.57228 C 121.87215 53.589188 119.646675 51.407784 117.66358 49.028072 L 117.66358 53.919704 C 117.39917 53.919704 116.980515 53.89767 116.40762 53.8536 C 113.45502 53.633255 111.56006 53.523087 110.72275 53.523087 L 107.81422 53.523087 L 107.81422 56.233315 C 107.81422 58.92151 107.99049 62.424976 108.34304 66.74371 L 102.19545 66.74371 C 102.37172 61.984287 102.459854 58.48082 102.459854 56.233315 L 102.459854 53.523087 L 99.68353 53.523087 C 96.11396 53.523087 93.4478 53.61122 91.68505 53.7875 L 91.68505 48.895866 C 89.613815 51.804405 87.82903 54.029877 86.330696 55.57228 C 85.09677 53.8536 83.598434 52.377296 81.83568 51.14337 L 81.83568 53.7875 C 81.83568 55.109562 81.945854 58.546925 82.1662 64.09959 C 82.210266 65.157234 82.2323 65.9064 82.2323 66.34709 L 76.21691 66.34709 C 76.48132 62.51311 76.61353 58.41472 76.61353 54.05191 L 76.61353 28.602203 C 75.027054 31.951427 73.088036 35.410828 70.796455 38.980392 C 70.26763 38.099022 69.342186 36.75492 68.02013 34.948105 C 67.66757 34.37521 67.38113 33.95656 67.16078 33.692146 C 72.84566 27.698795 77.60508 18.466389 81.439064 5.9949265 M 102.459854 23.313953 L 101.666626 23.313953 C 100.388626 33.58197 97.23772 41.88893 92.213875 48.234833 C 93.359665 48.32297 94.76986 48.433144 96.44447 48.56535 C 98.07501 48.697556 99.02249 48.76366 99.28691 48.76366 L 102.459854 48.76366 L 102.459854 23.313953 M 107.68201 48.76366 L 109.92952 48.76366 C 111.56006 48.76366 113.87367 48.587383 116.870346 48.234833 C 111.978714 41.2279 109.268486 32.92094 108.739655 23.313953 L 107.68201 23.313953 L 107.68201 48.76366 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="-0.06610314 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 10.11 57.91 C 3.33 57.33 -0.07 53.85 -0.07 47.46 C -0.07 43.67 1.12 39.66 3.50 35.43 C 4.91 32.88 6.68 30.39 8.79 27.96 C 10.95 25.54 13.29 23.36 15.80 21.42 C 18.35 19.43 20.95 17.87 23.60 16.72 C 26.29 15.58 28.87 15.01 31.33 15.01 C 35.70 15.01 37.88 16.61 37.88 19.83 C 37.88 21.99 37.22 24.39 35.89 27.04 C 34.57 29.68 33.23 31.35 31.86 32.06 C 31.73 32.10 31.58 32.13 31.40 32.13 C 31.27 32.13 31.20 32.08 31.20 31.99 L 33.38 28.42 C 34.88 25.96 35.63 23.80 35.63 21.95 C 35.63 20.62 35.28 19.37 34.57 18.18 C 33.87 16.99 32.61 16.39 30.80 16.39 C 28.60 16.39 26.33 17.01 24.00 18.24 C 21.70 19.48 19.48 21.11 17.32 23.14 C 15.16 25.16 13.20 27.41 11.44 29.88 C 9.67 32.30 8.26 34.70 7.21 37.08 C 4.96 42.15 3.83 46.25 3.83 49.38 C 3.83 54.09 6.24 56.45 11.04 56.45 C 15.62 56.45 21.84 53.50 29.68 47.59 C 31.49 46.23 33.80 44.31 36.62 41.84 C 39.49 39.38 42.83 36.38 46.67 32.85 C 46.14 32.90 45.48 32.96 44.69 33.05 C 43.89 33.10 42.97 33.21 41.91 33.38 C 41.47 33.47 41.05 33.56 40.65 33.65 C 40.26 33.69 39.88 33.71 39.53 33.71 C 38.65 33.62 38.27 33.40 38.41 33.05 C 38.58 31.42 39.42 30.61 40.92 30.61 C 42.28 30.78 43.56 30.91 44.75 31.00 C 45.99 31.09 47.15 31.13 48.26 31.13 C 49.97 29.55 52.24 27.34 55.06 24.52 C 57.93 21.66 61.32 18.16 65.24 14.01 C 70.31 8.68 73.40 6.02 74.50 6.02 C 74.98 6.02 75.23 6.46 75.23 7.34 C 75.23 7.69 75.18 8.13 75.09 8.66 C 75.01 9.19 74.87 9.81 74.70 10.51 C 74.26 12.19 73.79 13.20 73.31 13.55 C 71.94 14.52 70.80 15.78 69.87 17.32 C 68.99 18.82 68.09 20.49 67.16 22.34 C 66.24 24.24 65.38 25.93 64.58 27.43 C 63.83 28.89 63.15 30.19 62.53 31.33 L 68.95 31.20 C 70.53 31.20 71.33 31.31 71.33 31.53 C 71.33 31.58 71.28 31.64 71.19 31.73 C 70.44 32.21 67.27 32.65 61.67 33.05 C 57.58 41.03 55.53 46.49 55.53 49.45 C 55.53 51.47 56.17 52.49 57.44 52.49 C 57.93 52.49 58.55 52.18 59.29 51.56 C 60.00 50.99 60.44 50.70 60.62 50.70 C 60.62 50.61 60.64 50.59 60.68 50.64 C 60.73 50.68 60.70 50.70 60.62 50.70 C 60.40 51.49 59.74 52.22 58.63 52.88 C 57.58 53.50 56.45 53.81 55.26 53.81 C 54.16 53.81 53.43 53.46 53.08 52.75 C 52.73 52.05 52.55 51.08 52.55 49.84 C 52.55 45.39 54.25 39.73 57.64 32.85 L 49.71 33.05 C 43.80 38.82 37.88 43.89 31.93 48.26 C 22.45 55.13 15.18 58.35 10.11 57.91 M 58.24 31.13 C 58.77 30.12 59.82 28.29 61.41 25.65 C 63.00 22.96 65.13 19.48 67.82 15.20 L 50.90 31.07 L 58.24 31.13 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 72.45 50.37 C 71.17 50.37 69.98 50.06 68.88 49.45 C 67.78 48.78 67.23 47.70 67.23 46.21 C 67.23 44.13 67.95 41.67 69.41 38.80 C 70.91 35.94 72.60 32.96 74.50 29.88 C 79.65 21.51 83.31 17.32 85.47 17.32 C 85.91 17.32 86.35 17.50 86.79 17.85 C 87.28 18.16 87.54 18.51 87.59 18.91 L 82.96 25.12 C 81.15 27.54 79.52 29.79 78.07 31.86 C 76.61 33.89 75.36 35.72 74.30 37.35 C 73.77 38.19 73.18 39.13 72.52 40.19 C 71.85 41.25 71.26 42.35 70.73 43.50 C 70.25 44.60 70.00 45.72 70.00 46.87 C 70.00 47.40 70.16 47.88 70.47 48.32 C 70.77 48.72 71.33 48.92 72.12 48.92 C 73.53 48.92 75.38 48.17 77.67 46.67 C 79.96 45.13 82.23 43.01 84.48 40.32 C 84.70 40.06 84.94 39.82 85.21 39.60 C 85.47 39.38 85.69 39.27 85.87 39.27 C 86.09 39.27 86.20 39.40 86.20 39.66 C 86.20 39.79 86.04 40.06 85.74 40.46 C 85.47 40.81 85.25 41.09 85.07 41.31 L 83.49 43.10 C 82.61 44.07 81.55 45.13 80.32 46.27 C 79.13 47.42 77.85 48.39 76.48 49.18 C 75.16 49.97 73.82 50.37 72.45 50.37 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 86.86 51.10 C 85.45 51.10 84.17 50.66 83.03 49.78 C 81.88 48.85 81.31 47.64 81.31 46.14 C 81.31 43.01 83.22 39.44 87.06 35.43 C 90.98 31.38 94.48 29.35 97.57 29.35 C 98.58 29.35 99.40 29.64 100.01 30.21 C 100.68 30.74 101.01 31.40 101.01 32.19 C 101.01 34.66 99.04 37.08 95.12 39.46 C 91.64 41.58 88.71 42.64 86.33 42.64 C 85.98 42.64 85.67 42.59 85.41 42.50 C 84.74 43.69 84.41 44.95 84.41 46.27 C 84.41 48.56 85.49 49.71 87.65 49.71 C 89.86 49.71 92.70 48.23 96.18 45.28 C 98.87 43.12 101.16 40.83 103.05 38.41 C 103.45 37.88 103.80 37.61 104.11 37.61 C 104.38 37.61 104.51 37.74 104.51 38.01 C 104.51 38.27 104.33 38.65 103.98 39.13 C 102.75 40.76 101.42 42.26 100.01 43.63 C 98.60 44.99 97.08 46.25 95.45 47.40 C 92.06 49.86 89.20 51.10 86.86 51.10 M 87.26 41.18 C 88.93 41.18 91.11 40.34 93.80 38.67 C 94.68 38.05 95.54 37.37 96.38 36.62 C 97.26 35.83 97.96 35.03 98.49 34.24 C 99.07 33.45 99.35 32.74 99.35 32.13 C 99.35 31.55 98.89 31.27 97.96 31.27 C 96.64 31.27 94.79 32.26 92.41 34.24 C 91.27 35.21 90.16 36.27 89.11 37.41 C 88.05 38.56 87.15 39.77 86.40 41.05 C 86.66 41.14 86.95 41.18 87.26 41.18 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 99.29 56.98 C 98.76 56.98 98.49 56.74 98.49 56.25 C 98.49 56.12 98.54 56.01 98.63 55.92 C 102.72 49.45 107.15 43.76 111.91 38.87 C 111.96 37.81 112.00 36.44 112.04 34.77 C 112.09 33.05 112.15 31.02 112.24 28.69 C 111.76 28.78 110.94 29.53 109.80 30.94 C 108.65 32.30 107.31 34.11 105.77 36.36 C 104.27 38.56 102.86 40.39 101.53 41.84 C 100.26 43.30 99.53 44.09 99.35 44.22 C 99.04 44.49 98.76 44.62 98.49 44.62 C 98.27 44.62 98.16 44.51 98.16 44.29 C 98.16 44.11 98.23 43.94 98.36 43.76 C 98.54 43.54 98.91 43.12 99.49 42.50 C 100.28 41.62 100.96 40.85 101.53 40.19 C 102.11 39.49 102.66 38.74 103.19 37.94 C 103.76 37.15 104.42 36.18 105.17 35.03 C 105.65 34.33 106.25 33.45 106.95 32.39 C 107.70 31.29 108.45 30.23 109.20 29.22 C 110.00 28.20 110.68 27.45 111.25 26.97 C 111.69 26.57 112.15 26.29 112.64 26.11 C 113.17 25.93 113.65 25.85 114.09 25.85 C 114.62 25.85 115.11 25.96 115.55 26.18 C 116.03 26.40 116.21 26.88 116.08 27.63 C 116.08 27.68 115.97 28.38 115.75 29.75 C 115.57 31.07 115.39 33.03 115.22 35.63 C 116.06 34.84 117.71 33.36 120.18 31.20 C 122.69 29.00 125.90 26.22 129.83 22.87 C 129.91 22.78 130.02 22.74 130.16 22.74 C 130.47 22.74 130.80 22.94 131.15 23.33 C 131.50 23.69 131.68 24.06 131.68 24.46 C 131.68 24.81 131.50 25.16 131.15 25.52 C 129.78 26.62 127.14 28.60 123.22 31.47 C 121.45 32.70 119.87 33.89 118.46 35.03 C 117.09 36.18 115.97 37.17 115.09 38.01 C 115.04 38.45 115.02 38.89 115.02 39.33 C 115.02 39.77 115.02 40.19 115.02 40.59 C 115.02 43.32 115.28 45.37 115.81 46.73 C 116.39 48.06 117.29 48.72 118.52 48.72 C 119.89 48.72 121.61 47.86 123.68 46.14 C 125.79 44.38 127.95 42.22 130.16 39.66 C 130.60 39.22 130.93 39.00 131.15 39.00 C 131.37 39.00 131.48 39.13 131.48 39.40 C 131.48 39.49 131.44 39.62 131.35 39.79 C 131.30 39.97 131.17 40.19 130.95 40.46 C 129.54 42.09 128.00 43.74 126.32 45.41 C 124.69 47.09 123.04 48.50 121.37 49.64 C 119.69 50.75 118.08 51.30 116.54 51.30 C 115.22 51.30 114.23 50.81 113.57 49.84 C 112.90 48.83 112.46 47.55 112.24 46.01 C 112.07 44.47 111.96 42.86 111.91 41.18 C 106.54 46.91 102.50 52.09 99.82 56.72 C 99.68 56.89 99.51 56.98 99.29 56.98 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 169.82 53.35 C 162.86 53.35 158.12 50.97 155.61 46.21 C 151.07 50.00 147.83 51.89 145.89 51.89 C 144.96 51.89 144.24 51.45 143.71 50.57 C 143.22 49.69 142.98 48.70 142.98 47.59 C 142.98 44.95 143.99 41.87 146.02 38.34 C 146.90 36.80 147.87 35.39 148.93 34.11 C 149.99 32.83 151.18 32.19 152.50 32.19 C 153.78 32.19 154.75 33.25 155.41 35.37 L 157.39 41.71 C 158.10 40.96 158.87 40.06 159.71 39.00 C 160.59 37.90 161.56 36.62 162.61 35.17 L 168.50 27.23 C 175.72 17.85 180.46 12.71 182.71 11.83 C 183.50 11.52 184.30 11.37 185.09 11.37 C 185.97 11.37 186.68 11.57 187.20 11.96 C 187.78 12.32 188.06 12.74 188.06 13.22 C 188.06 14.01 187.42 14.48 186.15 14.61 C 184.82 15.36 182.25 17.58 178.41 21.29 C 176.65 23.00 175.22 24.44 174.12 25.58 C 173.06 26.68 172.33 27.52 171.93 28.09 C 167.00 34.97 162.44 40.26 158.25 43.96 C 160.94 49.29 164.97 51.96 170.35 51.96 C 172.37 51.96 174.42 51.54 176.50 50.70 C 178.61 49.82 180.55 48.67 182.31 47.26 C 184.12 45.85 185.57 44.29 186.68 42.57 C 187.78 40.81 188.33 39.07 188.33 37.35 C 188.33 35.54 187.69 33.91 186.41 32.46 C 185.13 31.00 183.57 29.97 181.72 29.35 C 181.72 29.35 181.39 29.31 180.73 29.22 C 180.06 29.13 179.05 29.00 177.69 28.82 C 175.61 28.56 174.58 28.14 174.58 27.57 C 174.58 27.17 174.82 26.82 175.31 26.51 C 175.83 26.20 176.36 26.04 176.89 26.04 C 177.29 26.04 177.75 26.13 178.28 26.31 C 178.81 26.49 179.27 26.66 179.67 26.84 C 180.11 26.97 180.33 27.04 180.33 27.04 C 180.68 27.08 181.08 27.12 181.52 27.17 C 181.96 27.17 182.40 27.17 182.84 27.17 C 185.75 27.17 188.39 26.71 190.77 25.78 C 193.07 24.85 194.74 23.58 195.80 21.95 C 196.86 20.32 197.38 18.42 197.38 16.26 C 197.38 14.06 196.68 12.32 195.27 11.04 C 193.90 9.76 192.07 8.86 189.78 8.33 C 187.53 7.76 185.09 7.47 182.44 7.47 C 177.29 7.47 172.37 8.22 167.70 9.72 C 163.08 11.22 159.07 13.71 155.67 17.19 C 153.07 19.88 151.77 22.12 151.77 23.93 C 151.77 25.21 152.10 26.29 152.76 27.17 C 152.94 27.39 153.14 27.61 153.36 27.83 C 153.58 28.05 153.84 28.27 154.15 28.49 C 154.37 28.62 154.24 28.69 153.76 28.69 C 151.02 28.07 149.66 26.24 149.66 23.20 C 149.66 20.16 151.20 17.30 154.28 14.61 C 156.66 12.54 159.37 10.86 162.42 9.58 C 165.50 8.31 168.74 7.38 172.13 6.81 C 175.57 6.24 178.96 5.95 182.31 5.95 C 184.69 5.95 186.98 6.13 189.19 6.48 C 191.39 6.83 193.37 7.43 195.14 8.26 C 196.90 9.06 198.29 10.11 199.30 11.44 C 200.36 12.76 200.89 14.39 200.89 16.33 C 200.89 19.06 200.16 21.24 198.71 22.87 C 197.25 24.50 195.29 25.76 192.82 26.64 C 189.91 27.65 186.79 28.18 183.44 28.23 C 185.29 28.31 186.90 28.80 188.26 29.68 C 189.67 30.56 190.75 31.71 191.50 33.12 C 192.29 34.53 192.69 36.07 192.69 37.74 C 192.69 39.99 192.01 42.09 190.64 44.02 C 189.32 45.92 187.53 47.57 185.29 48.98 C 183.04 50.35 180.57 51.43 177.88 52.22 C 175.20 52.97 172.51 53.35 169.82 53.35 M 146.75 50.37 C 148.16 50.37 150.87 48.37 154.88 44.36 L 154.68 44.09 C 152.92 38.23 151.51 35.30 150.45 35.30 C 150.41 35.30 150.30 35.34 150.12 35.43 C 146.86 40.15 145.23 43.94 145.23 46.80 C 145.23 47.42 145.34 48.17 145.56 49.05 C 145.82 49.93 146.22 50.37 146.75 50.37 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 209.41 50.57 C 207.52 50.57 206.22 50.08 205.51 49.11 C 204.81 48.10 204.46 46.76 204.46 45.08 C 204.46 43.23 205.03 41.03 206.18 38.47 C 206.62 37.46 207.08 36.56 207.56 35.76 C 208.05 34.92 208.56 34.15 209.08 33.45 C 208.91 33.49 208.75 33.51 208.62 33.51 C 208.49 33.51 208.36 33.51 208.22 33.51 C 207.17 33.51 206.29 32.77 205.58 31.27 L 200.69 37.61 C 198.09 41.01 196.50 42.70 195.93 42.70 C 195.71 42.70 195.60 42.61 195.60 42.44 C 195.60 42.22 195.71 41.93 195.93 41.58 C 196.06 41.31 196.33 40.96 196.72 40.52 C 198.40 38.58 199.94 36.67 201.35 34.77 C 202.76 32.88 203.93 31.02 204.85 29.22 C 205.87 25.38 207.15 23.47 208.69 23.47 C 209.70 23.47 210.21 23.93 210.21 24.85 C 210.21 25.69 209.66 26.79 208.56 28.16 C 207.50 29.53 206.97 30.23 206.97 30.28 C 206.97 31.20 207.65 31.66 209.02 31.66 C 209.81 31.66 210.69 31.38 211.66 30.80 L 213.38 29.75 C 213.47 29.70 213.60 29.68 213.78 29.68 C 214.31 29.68 214.77 29.90 215.17 30.34 C 215.56 30.78 215.69 31.18 215.56 31.53 L 211.00 37.28 C 208.18 40.90 206.77 43.80 206.77 46.01 C 206.77 47.99 207.74 48.98 209.68 48.98 C 211.00 48.98 212.41 48.59 213.91 47.79 C 215.45 47.00 216.93 46.03 218.34 44.88 C 219.79 43.69 221.00 42.55 221.97 41.45 L 223.56 39.60 C 223.65 39.51 223.76 39.40 223.89 39.27 C 224.02 39.13 224.13 39.07 224.22 39.07 C 224.53 39.07 224.68 39.22 224.68 39.53 C 224.68 39.62 224.64 39.77 224.55 39.99 C 224.46 40.21 224.31 40.46 224.09 40.72 L 221.97 43.10 C 220.96 44.25 219.70 45.41 218.21 46.60 C 216.75 47.75 215.23 48.70 213.65 49.45 C 212.10 50.19 210.69 50.57 209.41 50.57 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 225.08 50.97 C 223.10 50.97 222.11 49.71 222.11 47.20 C 222.11 46.23 222.39 45.08 222.97 43.76 C 223.58 42.39 224.44 40.96 225.54 39.46 C 225.54 39.46 225.15 39.84 224.35 40.59 C 223.56 41.34 222.66 42.28 221.64 43.43 C 221.47 43.61 221.25 43.69 220.98 43.69 C 220.81 43.69 220.72 43.58 220.72 43.36 C 220.72 43.14 220.92 42.77 221.31 42.24 L 230.44 31.53 C 231.58 30.21 232.84 29.55 234.20 29.55 C 235.22 29.55 235.72 29.94 235.72 30.74 C 235.72 31.05 235.59 31.33 235.33 31.60 C 234.49 32.39 233.45 33.51 232.22 34.97 C 231.03 36.42 229.86 37.99 228.72 39.66 C 227.57 41.34 226.60 42.95 225.81 44.49 C 225.06 45.99 224.68 47.20 224.68 48.12 C 224.68 48.92 224.95 49.31 225.48 49.31 C 225.79 49.31 226.27 49.20 226.93 48.98 C 227.59 48.72 228.47 48.21 229.58 47.46 C 230.68 46.67 232.00 45.46 233.54 43.83 C 233.81 43.56 234.51 42.77 235.66 41.45 C 236.80 40.12 238.35 38.23 240.28 35.76 C 243.72 31.49 245.97 29.35 247.03 29.35 C 248.48 29.35 249.27 29.94 249.41 31.13 C 249.50 31.53 248.57 32.83 246.63 35.03 C 244.12 38.08 242.40 40.26 241.47 41.58 C 239.76 44.09 238.90 46.05 238.90 47.46 C 238.90 48.43 239.23 48.92 239.89 48.92 C 240.55 48.92 241.39 48.61 242.40 47.99 C 243.46 47.33 244.56 46.51 245.71 45.55 C 246.85 44.53 247.95 43.50 249.01 42.44 C 250.11 41.34 251.06 40.32 251.85 39.40 C 252.12 39.09 252.38 38.93 252.65 38.93 C 252.91 38.93 253.04 39.07 253.04 39.33 C 253.04 39.42 253.02 39.55 252.98 39.73 C 252.93 39.90 252.80 40.10 252.58 40.32 C 251.87 41.12 250.97 42.11 249.87 43.30 C 248.77 44.44 247.58 45.59 246.30 46.73 C 245.02 47.88 243.79 48.83 242.60 49.58 C 241.41 50.33 240.40 50.70 239.56 50.70 C 238.54 50.70 237.66 50.44 236.91 49.91 C 236.16 49.33 235.79 48.56 235.79 47.59 C 235.79 46.62 235.94 45.66 236.25 44.69 C 236.56 43.67 236.80 42.81 236.98 42.11 C 234.91 44.53 233.08 46.38 231.49 47.66 C 229.95 48.94 228.65 49.82 227.59 50.30 C 226.54 50.75 225.70 50.97 225.08 50.97 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 257.67 50.37 C 255.60 50.37 254.06 49.69 253.04 48.32 C 252.07 46.96 251.28 45.06 250.66 42.64 C 249.87 43.43 249.32 43.83 249.01 43.83 C 248.79 43.83 248.68 43.65 248.68 43.30 C 248.68 43.03 248.79 42.79 249.01 42.57 C 249.01 42.57 249.56 41.89 250.66 40.52 C 251.81 39.16 253.73 37.24 256.41 34.77 L 264.74 26.97 C 265.89 25.87 266.79 25.03 267.45 24.46 C 268.16 23.89 268.67 23.60 268.97 23.60 C 270.38 23.60 271.09 24.13 271.09 25.19 C 271.09 25.71 270.80 26.33 270.23 27.04 C 269.79 27.57 269.46 27.98 269.24 28.29 C 269.06 28.56 268.95 28.71 268.91 28.75 C 268.11 30.12 267.39 32.57 266.73 36.09 C 266.24 38.69 265.82 40.83 265.47 42.50 C 265.12 44.18 264.83 45.39 264.61 46.14 C 266.46 46.10 268.29 45.52 270.10 44.42 C 271.90 43.32 273.84 41.51 275.91 39.00 C 276.00 38.91 276.13 38.78 276.31 38.60 C 276.49 38.43 276.66 38.34 276.84 38.34 C 277.10 38.34 277.24 38.45 277.24 38.67 C 277.24 38.89 277.17 39.11 277.04 39.33 C 276.91 39.55 276.77 39.75 276.64 39.93 C 275.28 41.56 274.00 42.90 272.81 43.96 C 271.62 44.97 270.36 45.79 269.04 46.40 C 267.72 46.98 266.15 47.46 264.35 47.86 L 262.23 49.25 C 261.66 49.64 260.98 49.93 260.18 50.11 C 259.39 50.28 258.55 50.37 257.67 50.37 M 258.46 47.00 C 259.48 47.00 260.31 46.76 260.98 46.27 C 261.46 46.01 261.92 45.28 262.36 44.09 C 262.85 42.86 263.31 41.34 263.75 39.53 C 264.10 37.99 264.37 36.49 264.54 35.03 C 264.77 33.54 264.96 32.10 265.14 30.74 L 265.40 28.49 C 264.39 29.24 263.11 30.32 261.57 31.73 C 260.03 33.14 258.51 34.62 257.01 36.16 C 255.51 37.70 254.54 38.85 254.10 39.60 C 253.66 40.30 253.42 40.83 253.37 41.18 C 253.20 42.95 253.62 44.36 254.63 45.41 C 255.69 46.47 256.96 47.00 258.46 47.00 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 272.01 50.57 C 270.74 50.57 270.10 50.19 270.10 49.45 C 270.10 49.00 270.36 48.30 270.89 47.33 C 272.92 43.72 274.72 40.52 276.31 37.74 C 277.94 34.92 279.37 32.54 280.61 30.61 C 285.85 22.19 289.55 17.63 291.71 16.92 C 291.80 16.92 291.87 16.92 291.91 16.92 C 291.96 16.88 292.00 16.86 292.04 16.86 C 292.62 16.86 292.99 17.32 293.17 18.24 C 293.04 19.17 290.74 22.52 286.29 28.29 C 283.96 31.24 282.13 33.69 280.81 35.63 C 279.53 37.52 278.73 38.91 278.43 39.79 C 279.88 38.74 281.45 37.61 283.12 36.42 C 284.79 35.23 286.42 34.11 288.01 33.05 C 289.60 31.95 291.03 31.07 292.31 30.41 C 293.59 29.70 294.58 29.31 295.28 29.22 C 295.37 29.22 295.48 29.22 295.61 29.22 C 295.75 29.17 295.83 29.15 295.88 29.15 C 297.11 29.15 297.73 29.72 297.73 30.87 C 297.73 31.18 297.33 31.86 296.54 32.92 C 295.75 33.98 294.53 35.61 292.90 37.81 C 289.99 41.69 288.54 44.60 288.54 46.54 C 288.54 47.55 288.91 48.06 289.66 48.06 C 290.46 48.01 291.36 47.66 292.37 47.00 C 293.43 46.34 294.49 45.52 295.55 44.55 C 296.60 43.58 297.55 42.64 298.39 41.71 C 299.27 40.74 299.93 39.99 300.37 39.46 C 300.77 39.07 301.08 38.87 301.30 38.87 C 301.47 38.87 301.56 38.96 301.56 39.13 C 301.56 39.49 301.39 39.90 301.03 40.39 C 300.50 41.05 299.71 41.91 298.65 42.97 C 297.64 44.02 296.52 45.10 295.28 46.21 C 294.09 47.26 292.95 48.17 291.85 48.92 C 290.79 49.62 289.99 49.97 289.47 49.97 C 286.87 49.97 285.57 48.45 285.57 45.41 C 285.57 43.69 286.36 41.45 287.95 38.67 C 288.56 37.61 289.20 36.56 289.86 35.50 C 290.52 34.44 291.18 33.38 291.85 32.32 C 286.20 35.14 281.09 39.31 276.51 44.82 C 275.94 45.61 275.34 46.47 274.72 47.40 C 274.11 48.28 273.56 49.03 273.07 49.64 C 272.59 50.26 272.23 50.57 272.01 50.57 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 20.425869 24.29472 L 20.425869 17.419994 C 20.425869 16.450478 19.87501 15.965725 18.77329 15.965725 L 14.013865 15.965725 L 14.013865 25.74899 L 18.77329 25.74899 C 19.87501 25.74899 20.425869 25.264233 20.425869 24.29472 M 20.425869 41.74595 L 20.425869 34.80512 C 20.425869 33.83561 19.87501 33.350853 18.77329 33.350853 L 14.013865 33.350853 L 14.013865 43.20022 L 18.77329 43.20022 C 19.87501 43.20022 20.425869 42.71546 20.425869 41.74595 M 2.6441255 8.363861 L 22.07845 8.363861 C 28.556555 8.363861 31.79561 11.096127 31.79561 16.560654 L 31.79561 21.98111 C 31.79561 25.815094 30.737959 28.304976 28.622658 29.450766 C 29.856585 29.97959 30.69389 30.794863 31.134579 31.896582 C 31.575264 32.95423 31.79561 34.4085 31.79561 36.259388 L 31.79561 42.60529 C 31.79561 48.069817 28.556555 50.80208 22.07845 50.80208 L 2.6441255 50.80208 L 2.6441255 8.363861 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 45.80947 17.816612 L 54.204567 17.816612 C 57.553795 17.816612 59.955544 18.521713 61.40981 19.931913 C 62.86408 21.342113 63.591217 23.369276 63.591217 26.013403 L 63.591217 42.60529 C 63.591217 45.249413 62.86408 47.276577 61.40981 48.68678 C 59.955544 50.096977 57.553795 50.80208 54.204567 50.80208 L 45.80947 50.80208 C 42.460243 50.80208 40.0585 50.096977 38.60423 48.68678 C 37.14996 47.276577 36.422825 45.249413 36.422825 42.60529 L 36.422825 26.013403 C 36.422825 23.369276 37.14996 21.342113 38.60423 19.931913 C 40.0585 18.521713 42.460243 17.816612 45.80947 17.816612 M 52.55199 41.547638 L 52.55199 27.07105 C 52.55199 26.101542 52.00113 25.616781 50.899414 25.616781 L 49.114628 25.616781 C 48.01291 25.616781 47.462048 26.101542 47.462048 27.07105 L 47.462048 41.547638 C 47.462048 42.51715 48.01291 43.001907 49.114628 43.001907 L 50.899414 43.001907 C 52.00113 43.001907 52.55199 42.51715 52.55199 41.547638 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 79.78648 50.80208 L 68.54895 50.80208 L 68.54895 6.5790787 L 79.78648 6.5790787 L 79.78648 50.80208 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 100.21235 6.5790787 L 111.44988 6.5790787 L 111.44988 50.80208 L 100.41066 50.80208 L 100.41066 46.571476 C 99.79369 49.391876 97.78857 50.80208 94.39527 50.80208 L 93.205414 50.80208 C 87.34427 50.80208 84.4137 48.069817 84.4137 42.60529 L 84.4137 26.013403 C 84.4137 20.548876 87.34427 17.816612 93.205414 17.816612 L 94.39527 17.816612 C 97.43601 17.816612 99.375046 19.006468 100.21235 21.386183 L 100.21235 6.5790787 M 97.30381 42.539185 L 98.42757 42.539185 C 99.61742 42.539185 100.21235 41.878155 100.21235 40.55609 L 100.21235 28.0626 C 100.21235 26.740536 99.61742 26.079504 98.42757 26.079504 L 97.30381 26.079504 C 96.20209 26.079504 95.65123 26.56426 95.65123 27.533773 L 95.65123 41.084915 C 95.65123 42.05443 96.20209 42.539185 97.30381 42.539185 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 8.130686 46.901993 L 17.583435 46.901993 L 17.583435 50.80208 L 3.6356726 50.80208 L 3.6356726 9.685928 L 8.130686 9.685928 L 8.130686 46.901993 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 20.756386 11.867329 L 20.756386 6.5129776 L 25.581913 6.5129776 L 25.581913 11.867329 L 20.756386 11.867329 M 25.449707 50.80208 L 20.888592 50.80208 L 20.888592 18.742058 L 25.449707 18.742058 L 25.449707 50.80208 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 42.57042 18.742058 L 47.131535 18.742058 L 47.131535 54.900475 C 47.131535 58.381905 45.390816 60.12262 41.909386 60.12262 L 32.06002 60.12262 L 32.06002 56.222534 L 40.52122 56.222534 C 41.35853 56.222534 41.909386 56.09033 42.1738 55.825916 C 42.438213 55.561504 42.57042 55.010643 42.57042 54.17334 L 42.57042 48.620674 C 42.085663 50.074944 40.87377 50.80208 38.934746 50.80208 L 36.29062 50.80208 C 32.80919 50.80208 31.068472 49.061363 31.068472 45.57993 L 31.068472 23.964203 C 31.068472 20.482775 32.80919 18.742058 36.29062 18.742058 L 38.934746 18.742058 C 40.87377 18.742058 42.085663 19.46919 42.57042 20.92346 L 42.57042 18.742058 M 37.678787 46.901993 L 40.32291 46.901993 C 41.11615 46.901993 41.689045 46.72572 42.041595 46.37317 C 42.394142 46.02062 42.57042 45.403656 42.57042 44.52228 L 42.57042 25.021854 C 42.57042 24.140478 42.394142 23.523518 42.041595 23.170967 C 41.689045 22.818415 41.11615 22.642141 40.32291 22.642141 L 37.678787 22.642141 C 36.79741 22.642141 36.224518 22.774347 35.960106 23.038761 C 35.73976 23.303171 35.62959 23.854033 35.62959 24.69134 L 35.62959 44.852795 C 35.62959 45.734173 35.73976 46.307064 35.960106 46.571476 C 36.224518 46.79182 36.79741 46.901993 37.678787 46.901993 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 61.277607 18.742058 L 63.921734 18.742058 C 67.40317 18.742058 69.14388 20.482775 69.14388 23.964203 L 69.14388 50.80208 L 64.58276 50.80208 L 64.58276 24.69134 C 64.58276 23.854033 64.45056 23.303171 64.18615 23.038761 C 63.965805 22.774347 63.414944 22.642141 62.53357 22.642141 L 59.889442 22.642141 C 59.096207 22.642141 58.52331 22.818415 58.17076 23.170967 C 57.81821 23.523518 57.641937 24.140478 57.641937 25.021854 L 57.641937 50.80208 L 53.08082 50.80208 L 53.08082 6.5790787 L 57.641937 6.5790787 L 57.641937 20.92346 C 58.126694 19.46919 59.338585 18.742058 61.277607 18.742058 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 84.47981 22.642141 L 79.91869 22.642141 L 79.91869 44.52228 C 79.91869 45.35959 80.050896 45.910446 80.315315 46.17486 C 80.57973 46.43927 81.130585 46.571476 81.96789 46.571476 L 84.47981 46.571476 L 84.47981 50.80208 L 80.57973 50.80208 C 77.09829 50.80208 75.357574 49.061363 75.357574 45.57993 L 75.357574 22.642141 L 72.449036 22.642141 L 72.449036 18.742058 L 75.357574 18.742058 L 75.357574 13.519909 L 79.91869 13.519909 L 79.91869 18.742058 L 84.47981 18.742058 L 84.47981 22.642141 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 9.91547 50.80208 L 3.1729507 50.80208 L 3.1729507 9.090996 L 11.5019455 9.090996 L 18.508879 33.879677 L 25.515812 9.090996 L 33.844807 9.090996 L 33.844807 50.80208 L 27.16839 50.80208 L 27.16839 21.518389 L 21.615726 41.74595 L 15.468134 41.74595 L 9.91547 21.584492 L 9.91547 50.80208 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 46.801018 18.345436 L 53.807953 18.345436 C 58.567375 18.345436 60.94709 20.526842 60.94709 24.889648 L 60.94709 36.72211 L 46.867123 36.72211 L 46.867123 43.39853 C 46.867123 44.103626 46.977295 44.588383 47.19764 44.852795 C 47.46205 45.07314 47.96884 45.18331 48.71801 45.18331 L 51.758755 45.18331 C 52.463856 45.18331 52.948612 45.07314 53.213024 44.852795 C 53.47744 44.588383 53.609642 44.103626 53.609642 43.39853 L 53.609642 40.95271 L 60.88099 40.95271 L 60.88099 44.257866 C 60.88099 48.620674 58.47924 50.80208 53.675747 50.80208 L 46.801018 50.80208 C 41.997524 50.80208 39.59578 48.620674 39.59578 44.257866 L 39.59578 24.889648 C 39.59578 20.526842 41.997524 18.345436 46.801018 18.345436 M 46.867123 31.896582 L 53.74185 31.896582 L 53.74185 25.682886 C 53.74185 24.977787 53.609642 24.515064 53.34523 24.29472 C 53.08082 24.030308 52.59606 23.898102 51.89096 23.898102 L 48.71801 23.898102 C 48.01291 23.898102 47.528152 24.030308 47.26374 24.29472 C 46.99933 24.515064 46.867123 24.977787 46.867123 25.682886 L 46.867123 31.896582 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 78.72883 6.5790787 L 86.26459 6.5790787 L 86.26459 50.80208 L 78.86104 50.80208 L 78.86104 47.563026 C 78.332214 49.722393 76.76777 50.80208 74.16772 50.80208 L 72.118515 50.80208 C 67.623505 50.80208 65.376 48.620674 65.376 44.257866 L 65.376 24.823545 C 65.376 20.460737 67.623505 18.279335 72.118515 18.279335 L 74.16772 18.279335 C 76.547424 18.279335 78.0678 19.204779 78.72883 21.055666 L 78.72883 6.5790787 M 74.69654 44.985 L 76.679634 44.985 C 78.04577 44.985 78.72883 44.257866 78.72883 42.803596 L 78.72883 26.343918 C 78.72883 25.50661 78.57459 24.933716 78.26611 24.625235 C 77.95763 24.272684 77.4288 24.09641 76.679634 24.09641 L 74.69654 24.09641 C 73.99144 24.09641 73.50668 24.228617 73.24227 24.49303 C 72.97786 24.713373 72.84565 25.176096 72.84565 25.881195 L 72.84565 43.20022 C 72.84565 43.90532 72.97786 44.390076 73.24227 44.654488 C 73.50668 44.874832 73.99144 44.985 74.69654 44.985 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 91.68504 13.057186 L 91.68504 6.5129776 L 99.551315 6.5129776 L 99.551315 13.057186 L 91.68504 13.057186 M 99.353004 50.80208 L 91.883354 50.80208 L 91.883354 18.345436 L 99.353004 18.345436 L 99.353004 50.80208 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 118.25851 18.345436 L 125.794266 18.345436 L 125.794266 50.80208 L 118.39071 50.80208 L 118.39071 47.563026 C 117.861885 49.722393 116.29745 50.80208 113.69739 50.80208 L 111.64819 50.80208 C 107.153175 50.80208 104.90567 48.620674 104.90567 44.257866 L 104.90567 18.345436 L 112.37533 18.345436 L 112.37533 43.20022 C 112.37533 43.90532 112.50753 44.390076 112.77194 44.654488 C 113.036354 44.874832 113.52111 44.985 114.22621 44.985 L 116.209305 44.985 C 117.57544 44.985 118.25851 44.257866 118.25851 42.803596 L 118.25851 18.345436 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 156.86273 18.345436 L 158.91193 18.345436 C 163.40694 18.345436 165.65445 20.526842 165.65445 24.889648 L 165.65445 50.80208 L 158.18478 50.80208 L 158.18478 25.947298 C 158.18478 25.242197 158.05258 24.779478 157.78818 24.559132 C 157.52376 24.29472 157.039 24.162516 156.33391 24.162516 L 154.35081 24.162516 C 152.98468 24.162516 152.30162 24.889648 152.30162 26.343918 L 152.30162 50.80208 L 144.76585 50.80208 L 144.76585 25.947298 C 144.76585 25.242197 144.63365 24.779478 144.36923 24.559132 C 144.10483 24.29472 143.62007 24.162516 142.91496 24.162516 L 140.93187 24.162516 C 139.56573 24.162516 138.88268 24.889648 138.88268 26.343918 L 138.88268 50.80208 L 131.41302 50.80208 L 131.41302 18.345436 L 138.81657 18.345436 L 138.81657 21.320078 C 139.43353 19.336985 140.99797 18.345436 143.5099 18.345436 L 145.493 18.345436 C 148.75407 18.345436 150.82532 19.447157 151.70668 21.650593 C 152.32365 19.447157 154.04233 18.345436 156.86273 18.345436 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 37.183014 60.31911 L 44.15483 65.225204 C 46.3927 60.92161 48.458424 52.916935 50.351997 41.211174 C 44.499115 41.899742 41.142315 42.50225 40.281597 43.018677 L 37.44123 40.952957 C 36.580513 46.117264 34.859077 51.10943 32.27692 55.929447 C 29.86691 60.74947 26.165827 65.39735 21.17366 69.87308 L 20.399015 68.582 C 25.046892 63.934124 28.661907 58.769817 31.24406 53.08908 C 33.826214 47.2362 35.63372 39.66188 36.666584 30.366127 C 30.297272 31.226845 26.768326 31.915419 26.079754 32.431847 L 22.464737 29.333263 C 24.358318 29.333263 30.555489 28.730762 41.056244 27.525757 C 51.729145 26.14861 57.49596 25.201817 58.356674 24.685387 L 61.45526 27.783974 C 59.21739 27.611828 51.21271 28.472546 37.44123 30.366127 L 40.281597 32.690063 C 39.765167 32.690063 39.33481 33.29257 38.99052 34.497574 C 38.646236 35.702576 38.215878 37.596157 37.699444 40.17831 L 50.093784 38.887234 L 52.41772 36.046864 L 55.25809 39.403664 L 53.192368 40.952957 C 50.26593 57.3066 47.33948 67.03271 44.413044 70.131294 C 42.51947 67.20485 39.937313 64.19234 36.666584 61.093758 L 37.183014 60.31911 M 4.906092 40.17831 C 8.348964 36.563293 11.275406 33.29257 13.685415 30.366127 C 16.095425 27.26754 18.591507 23.480381 21.17366 19.00465 C 23.755816 14.356773 24.87475 11.344257 24.53046 9.96711 L 25.305107 9.708897 L 27.88726 15.13142 C 27.37083 14.614986 26.251896 15.64785 24.53046 18.230003 C 22.981169 20.812157 21.431877 23.308239 19.882584 25.71825 L 19.366154 65.74163 C 19.366154 68.495926 19.107939 69.61486 18.591507 69.098434 L 16.009354 64.19234 C 16.870071 63.503765 17.214357 62.126617 17.042215 60.060894 L 17.558645 28.816833 C 13.599344 33.636852 9.64004 37.7683 5.6807384 41.211174 L 4.906092 40.17831 M 36.408367 10.225327 C 40.023384 13.840343 42.605537 16.594643 44.15483 18.48822 C 43.46625 20.381794 42.691605 21.75895 41.83089 22.619663 C 40.453743 18.8325 38.47409 14.873203 35.891937 10.741756 L 36.408367 10.225327 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 98.638275 34.497574 C 98.81041 30.882557 98.38005 28.558617 97.3472 27.525757 L 97.863625 26.75111 L 102.25329 30.10791 C 101.22043 30.62434 100.79007 32.00149 100.96221 34.239357 L 100.703995 37.85437 C 110.688324 36.82151 116.11085 36.13294 116.971565 35.78865 L 119.811935 38.62902 C 117.91836 38.62902 111.9794 39.059376 101.99507 39.920097 C 109.052956 49.043705 113.09833 54.20801 114.131195 55.413017 C 115.336205 56.618023 116.369064 57.650883 117.22978 58.5116 C 118.26264 59.200176 121.447296 59.716606 126.78375 60.060894 L 126.78375 61.35197 L 115.42227 62.126617 C 115.25012 61.093758 113.87298 58.94196 111.290825 55.671234 C 108.88081 52.228363 105.35187 47.32227 100.703995 40.952957 L 100.44578 67.03271 C 100.44578 69.61486 100.101494 70.56165 99.41292 69.87308 L 96.830765 65.74163 C 97.863625 64.53663 98.29398 63.073406 98.12184 61.35197 L 98.38005 41.7276 C 90.80574 51.71193 82.02641 59.630535 72.04209 65.48341 L 71.52566 64.450554 C 80.82141 58.253387 88.91216 50.33478 95.797905 40.69474 C 89.25645 41.211174 85.125 41.7276 83.403564 42.244034 L 80.04677 39.145447 C 82.11249 39.48974 88.22359 39.145447 98.38005 38.112587 L 98.638275 34.497574 M 120.58658 18.230003 L 124.45981 21.586803 C 123.42695 21.75895 120.672646 25.201817 116.196915 31.915419 L 115.42227 31.140774 L 119.037285 23.652527 L 82.62892 26.23468 C 81.940346 30.02184 80.82141 32.77614 79.27212 34.497574 L 77.464615 30.10791 C 79.530334 28.902905 80.99355 25.029675 81.85427 18.48822 L 82.88713 18.48822 L 82.62892 23.91074 L 118.77907 21.328587 L 120.58658 18.230003 M 94.765045 9.708897 L 95.53969 9.192467 C 98.12184 11.60247 100.61792 13.926411 103.02793 16.16428 C 102.511505 17.541424 101.909 19.00465 101.22043 20.55394 C 99.49899 17.111073 97.3472 13.496059 94.765045 9.708897 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.7 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="79.32376" viewBox="0 0 1500 79.32376" width="1500">
|
||||
<defs/>
|
||||
<g>
|
||||
<path d="M 56.51818 8.1102295 C 56.25377 9.344158 56.121563 11.3933525 56.121563 14.25782 L 56.121563 25.561459 C 56.121563 27.853033 56.25377 29.681889 56.51818 31.04802 C 54.40288 30.783606 52.001137 30.673435 49.31294 30.717505 L 35.563488 30.717505 L 35.563488 35.67524 L 46.80102 35.67524 C 51.692657 35.67524 54.7334 35.5871 55.923252 35.410828 C 55.967327 35.410828 55.98936 35.410828 55.98936 35.410828 L 55.98936 40.500767 C 55.98936 40.500767 55.945286 40.500767 55.85715 40.500767 C 53.874058 40.236355 50.855347 40.10415 46.80102 40.10415 L 35.563488 40.10415 L 35.563488 45.3924 L 48.3875 45.3924 C 55.923252 45.3924 60.4403 45.216125 61.93864 44.863575 L 61.93864 50.21793 C 61.93864 50.21793 61.916607 50.21793 61.872536 50.21793 C 60.506405 49.953514 56.05546 49.82131 48.519703 49.82131 L 15.203721 49.82131 C 8.725614 49.82131 4.957735 49.953514 3.9000852 50.21793 C 3.8560164 50.21793 3.833982 50.21793 3.833982 50.21793 L 3.833982 44.863575 C 4.8475633 45.216125 8.593408 45.3924 15.071516 45.3924 L 30.804064 45.3924 L 30.804064 40.10415 L 19.434322 40.10415 C 16.30544 40.10415 13.507073 40.214317 11.039225 40.43466 C 10.554468 40.522804 10.290055 40.544838 10.245986 40.500767 L 10.245986 35.278618 C 10.642605 35.54303 13.793521 35.67524 19.698736 35.67524 L 30.804064 35.67524 L 30.804064 30.717505 L 16.261372 30.717505 C 13.352834 30.717505 11.259567 30.827675 9.981574 31.04802 C 10.245986 29.241198 10.378192 27.28014 10.378192 25.16484 L 10.378192 13.927303 C 10.378192 11.635727 10.245986 9.696709 9.981574 8.1102295 C 11.215499 8.374645 13.396903 8.506847 16.525784 8.506847 L 49.44515 8.506847 C 52.221478 8.506847 54.579163 8.374645 56.51818 8.1102295 M 35.563488 13.001865 L 35.563488 26.222488 L 51.42824 26.222488 L 51.42824 13.001865 L 35.563488 13.001865 M 15.071516 13.001865 L 15.071516 26.222488 L 30.804064 26.222488 L 30.804064 13.001865 L 15.071516 13.001865 M 42.37211 15.183266 C 46.029816 16.020573 47.990875 16.593464 48.25529 16.901943 C 48.25529 17.122292 48.079014 17.36467 47.726467 17.629082 C 47.153572 18.06977 46.712887 18.576561 46.404404 19.149456 L 43.958588 24.900425 L 38.80254 23.578362 C 40.124603 21.463066 41.31446 18.6647 42.37211 15.183266 M 24.127645 15.71209 C 25.317501 18.047733 26.375153 20.49355 27.300594 23.049538 L 22.012344 24.371601 C 21.219109 21.63934 20.271627 19.23759 19.16991 17.166359 L 24.127645 15.71209 M 9.849368 52.201023 L 15.99696 54.184116 C 14.366415 58.150307 12.493492 61.85208 10.378192 65.289444 L 4.164498 63.10804 C 6.279798 60.419846 8.174755 56.784172 9.849368 52.201023 M 53.874058 52.465435 C 56.51818 56.123142 58.633484 59.58254 60.219955 62.843628 L 53.67575 65.02503 C 52.574028 60.48595 50.767212 56.96045 48.25529 54.44853 L 53.874058 52.465435 M 40.52122 52.465435 C 42.01956 56.299416 43.121277 59.802883 43.82638 62.975834 L 37.612686 64.49621 C 36.863518 59.4283 35.87197 55.902798 34.638046 53.919704 L 40.52122 52.465435 M 27.300594 53.655293 C 28.005693 55.462112 28.688763 58.789303 29.349794 63.636864 L 23.202202 64.62841 C 23.025928 61.14698 22.453032 57.841824 21.483519 54.712944 L 27.300594 53.655293 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
<path d="M 81.439064 5.9949265 C 86.28663 7.757683 88.55617 8.94754 88.24768 9.564499 C 88.159546 9.784843 87.91717 10.093327 87.52055 10.489944 C 86.81545 11.106907 86.28663 11.767937 85.934074 12.473038 C 85.36118 13.486618 84.612015 14.830715 83.68657 16.505325 C 82.9374 17.87146 82.320435 18.973179 81.83568 19.810486 L 81.83568 50.48234 C 90.16467 44.665264 95.40886 35.653202 97.56823 23.44616 L 93.27152 23.44616 C 91.55284 23.402088 88.666336 23.578362 84.612015 23.974983 L 84.612015 18.356216 C 85.09677 18.400288 85.86797 18.444351 86.92562 18.488422 C 89.83416 18.6647 91.905396 18.752834 93.13932 18.752834 L 102.32765 18.752834 L 102.32765 10.489944 C 102.32765 9.167881 102.19545 7.7136116 101.93103 6.127136 C 106.11757 6.391552 108.34304 6.78817 108.60745 7.31699 C 108.65152 7.581402 108.49728 8.000057 108.14473 8.572952 C 107.74811 9.278053 107.549805 9.828911 107.549805 10.225529 L 107.549805 18.620628 L 117.79579 18.620628 C 121.32129 18.620628 124.75865 18.444351 128.10788 18.091805 L 128.10788 23.842777 C 127.9316 23.842777 127.64516 23.820744 127.248535 23.776676 C 122.53318 23.46819 119.42633 23.313953 117.92799 23.313953 L 111.978714 23.313953 C 113.21264 35.609135 119.02972 44.577126 129.42993 50.21793 C 129.2096 50.394203 128.92316 50.658615 128.5706 51.011166 C 126.19089 53.03833 124.780685 54.5587 124.34 55.57228 C 121.87215 53.589188 119.646675 51.407784 117.66358 49.028072 L 117.66358 53.919704 C 117.39917 53.919704 116.980515 53.89767 116.40762 53.8536 C 113.45502 53.633255 111.56006 53.523087 110.72275 53.523087 L 107.81422 53.523087 L 107.81422 56.233315 C 107.81422 58.92151 107.99049 62.424976 108.34304 66.74371 L 102.19545 66.74371 C 102.37172 61.984287 102.459854 58.48082 102.459854 56.233315 L 102.459854 53.523087 L 99.68353 53.523087 C 96.11396 53.523087 93.4478 53.61122 91.68505 53.7875 L 91.68505 48.895866 C 89.613815 51.804405 87.82903 54.029877 86.330696 55.57228 C 85.09677 53.8536 83.598434 52.377296 81.83568 51.14337 L 81.83568 53.7875 C 81.83568 55.109562 81.945854 58.546925 82.1662 64.09959 C 82.210266 65.157234 82.2323 65.9064 82.2323 66.34709 L 76.21691 66.34709 C 76.48132 62.51311 76.61353 58.41472 76.61353 54.05191 L 76.61353 28.602203 C 75.027054 31.951427 73.088036 35.410828 70.796455 38.980392 C 70.26763 38.099022 69.342186 36.75492 68.02013 34.948105 C 67.66757 34.37521 67.38113 33.95656 67.16078 33.692146 C 72.84566 27.698795 77.60508 18.466389 81.439064 5.9949265 M 102.459854 23.313953 L 101.666626 23.313953 C 100.388626 33.58197 97.23772 41.88893 92.213875 48.234833 C 93.359665 48.32297 94.76986 48.433144 96.44447 48.56535 C 98.07501 48.697556 99.02249 48.76366 99.28691 48.76366 L 102.459854 48.76366 L 102.459854 23.313953 M 107.68201 48.76366 L 109.92952 48.76366 C 111.56006 48.76366 113.87367 48.587383 116.870346 48.234833 C 111.978714 41.2279 109.268486 32.92094 108.739655 23.313953 L 107.68201 23.313953 L 107.68201 48.76366 Z" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M4.30948 4.71405L7.25576 1.76777C7.5812 1.44233 7.5812 0.914693 7.25576 0.589256C6.93032 0.263819 6.40269 0.263819 6.07725 0.589256L2.54171 4.12479C2.21628 4.45023 2.21628 4.97786 2.54171 5.3033L6.07725 8.83883C6.40269 9.16427 6.93032 9.16427 7.25576 8.83883C7.5812 8.5134 7.5812 7.98576 7.25576 7.66032L4.30948 4.71405Z" fill="#505A71"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M4.30948 4.71405L7.25576 1.76777C7.5812 1.44233 7.5812 0.914693 7.25576 0.589256C6.93032 0.263819 6.40269 0.263819 6.07725 0.589256L2.54171 4.12479C2.21628 4.45023 2.21628 4.97786 2.54171 5.3033L6.07725 8.83883C6.40269 9.16427 6.93032 9.16427 7.25576 8.83883C7.5812 8.5134 7.5812 7.98576 7.25576 7.66032L4.30948 4.71405Z" fill="#505A71"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="88" viewBox="0 0 16 88" fill="none">
|
||||
<path d="M16 66.7076V21.2924C16 17.0397 12.5904 13.5873 8.62767 12.0437C4.42982 10.4086 5.62979e-05 7.19397 2.49106e-05 0.908136C-2.72744e-05 -9.54278 1.76296e-05 73.3926 2.46294e-05 86.3208L2.49106e-05 87.0919C2.09343e-05 80.806 4.42977 77.5914 8.62762 75.9563C12.5904 74.4128 16 70.9603 16 66.7076Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 423 B |
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -3,7 +3,9 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div>
|
||||
order
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-color-picker
|
||||
v-model="localColor"
|
||||
@change="handleChange"
|
||||
@active-change="handleActiveChange"
|
||||
show-alpha
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
<el-button v-if="useEyeDropper" style="padding: 8px" link @click="addNewColor">
|
||||
<i class="icon-lk_color_eyedropper_tool"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, watch, onMounted} from 'vue';
|
||||
import {useVModel} from "@vueuse/core";
|
||||
|
||||
const PreDefineColorsLocalItemKey = 'draftDesign_pre_define_colors_local_item_key';
|
||||
let eyeDropper = null;
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
uuid: { // 组件的标识
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'color'
|
||||
},
|
||||
predefine: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'active-change']);
|
||||
|
||||
const localColor = useVModel(props,"modelValue",emit);
|
||||
const predefineColors = ref([...props.predefine]);
|
||||
const useEyeDropper = ref(true);
|
||||
|
||||
watch(() => props.predefine, (newVal) => {
|
||||
predefineColors.value = newVal;
|
||||
});
|
||||
|
||||
const handleChange = (newVal) => {
|
||||
addPreColor(newVal);
|
||||
emit('change', newVal,props.uuid);
|
||||
};
|
||||
|
||||
const handleActiveChange = (newVal) => {
|
||||
emit('active-change', newVal, props.uuid);
|
||||
};
|
||||
|
||||
const addNewColor = () => {
|
||||
if (useEyeDropper.value && eyeDropper) {
|
||||
try {
|
||||
eyeDropper.open().then((res) => {
|
||||
localColor.value = res.sRGBHex;
|
||||
handleChange(res.sRGBHex);
|
||||
handleActiveChange(res.sRGBHex);
|
||||
console.log('获取到了颜色', res);
|
||||
});
|
||||
} catch (error) {
|
||||
console.log('用户取消了，按下了 esc 键');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const addPreColor = (color) => {
|
||||
const item = localStorage.getItem(PreDefineColorsLocalItemKey);
|
||||
if (item) {
|
||||
const arr = JSON.parse(item);
|
||||
predefineColors.value = [...new Set([...arr, ...predefineColors.value])];
|
||||
}
|
||||
const index = predefineColors.value.indexOf(color);
|
||||
if (index !== -1) {
|
||||
predefineColors.value.splice(index, 1);
|
||||
}
|
||||
predefineColors.value.unshift(color);
|
||||
if (predefineColors.value.length > 20) {
|
||||
predefineColors.value.slice(0, -1);
|
||||
}
|
||||
localStorage.setItem(PreDefineColorsLocalItemKey, JSON.stringify(predefineColors.value));
|
||||
};
|
||||
|
||||
const handlerAddPreDefineColors = () => {
|
||||
const item = localStorage.getItem(PreDefineColorsLocalItemKey);
|
||||
if (item) {
|
||||
const arr = JSON.parse(item);
|
||||
predefineColors.value = [...new Set([...arr, ...predefineColors.value])];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
eyeDropper = new EyeDropper();
|
||||
} catch (error) {
|
||||
useEyeDropper.value = false;
|
||||
}
|
||||
handlerAddPreDefineColors();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 这里可以添加一些样式来定制 ColorPickerTool 的外观 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="context-box">
|
||||
<div v-if="description" class="context-text">{{description}}</div>
|
||||
<div v-else class="context-text">{{getRandomTip()}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 空元素
|
||||
const emptyElementTips =[
|
||||
"🌟 这里什么都没有，你可以自己添加内容哦！",
|
||||
"🎨 这里是一片空白的领域，等待你的创造！",
|
||||
"😊 嗨，这里看起来有点空空如也，你来给它添加一些内容吧！",
|
||||
"🔍 这是一个秘密的空间，等待你的探索和填充。",
|
||||
"🌱 哇哦，这里是空荡荡的，快来为它增添生机吧！",
|
||||
"🌈 嗨，这里是未知的领域，你可以让它变得充满活力！",
|
||||
"💭 这里什么都没有，除了你的想象力！",
|
||||
"🚀 欢迎来到这片空地，你是第一个来过的人！",
|
||||
"🖼️ 嘘，这里是一片空白的画布，等待着你的艺术作品。",
|
||||
"😴 哦，看起来这里有点无聊，快来填充它们，让它变得有趣起来吧！"
|
||||
];
|
||||
|
||||
export default {
|
||||
name:'EmptyPrompt',
|
||||
props: {
|
||||
description:{
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getRandomTip() {
|
||||
const randomIndex = Math.floor(Math.random() * emptyElementTips.length);
|
||||
return emptyElementTips[randomIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.context-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.context-text{
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
<template>
|
||||
<el-aside class="leftPanel" :class="{ 'close': !layout.leftPanelClose}">
|
||||
<div style="height: 100%;">
|
||||
<div class="leftPanel-content" :class="{
|
||||
'close': !layout.leftPanelClose
|
||||
}">
|
||||
<div style="margin: 8px;padding-top: 12px">
|
||||
组件列表
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute">
|
||||
<div class="leftPanel-menu"
|
||||
v-for="item in layout.leftBtnList"
|
||||
:key="item.key"
|
||||
@click="clickMenu(item)"
|
||||
@mousedown.stop="handlerAddNode($event,item)"
|
||||
>
|
||||
<div class="leftPanel-menu__button" :class="{
|
||||
'active' : layout.leftActive === item.key
|
||||
}">
|
||||
<i :class="item.icon" style="font-size: 2rem"></i>
|
||||
<div>
|
||||
<span style="font-size: 0.8rem">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="layout.leftPanelClose = !layout.leftPanelClose"
|
||||
class="leftPanel-mainContent-toggle" :class="{
|
||||
'close': !layout.leftPanelClose
|
||||
}"></div>
|
||||
</div>
|
||||
</el-aside>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts" name="DraftDesignLeftPanel">
|
||||
//图稿设计器 DraftDesignLeftPanel 左侧面板
|
||||
import {
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElCollapseItem,
|
||||
ElButton,
|
||||
ElSelect,
|
||||
ElPopover,
|
||||
ElInput,
|
||||
ElForm,
|
||||
ElSelectV2
|
||||
} from "element-plus";
|
||||
|
||||
import {provide, computed, watch, onMounted} from 'vue'
|
||||
import '../../icons/style.css'
|
||||
import { ShapeType} from "@/components/DraftDesign/config";
|
||||
|
||||
const emit = defineEmits(['onAddNode', 'changeZoom', 'onChangeCell'])
|
||||
|
||||
const props = defineProps({})
|
||||
const clickMenu = (item) => {
|
||||
layout.leftActive = item.key
|
||||
console.log(item)
|
||||
}
|
||||
|
||||
|
||||
const hasKey = (obj, path) => {
|
||||
if (!obj || !path) return null;
|
||||
|
||||
const keys = path.split('.');
|
||||
let result = obj;
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const k = keys[i];
|
||||
if (result.hasOwnProperty(k) && i === keys.length - 1) {
|
||||
return true;
|
||||
}
|
||||
if (result[k] !== undefined) {
|
||||
result = result[k];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
const that = reactive({
|
||||
effect: 'dark',
|
||||
})
|
||||
|
||||
|
||||
const layout = reactive({
|
||||
leftPanelClose: false,
|
||||
leftActive: '',
|
||||
leftBtnList: [
|
||||
{
|
||||
key: 'text',
|
||||
shape: ShapeType.vueTextCell,
|
||||
data: {
|
||||
label: 'Text',
|
||||
width: 100,
|
||||
height: 18,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
color: '#000000',
|
||||
}
|
||||
},
|
||||
icon: 'icon-lk_text',
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
key: 'line',
|
||||
shape: ShapeType.vueLineCell,
|
||||
data: {
|
||||
label: 'Line',
|
||||
width: 80,
|
||||
height: 6,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
backgroundColor: '#000000',
|
||||
}
|
||||
},
|
||||
icon: 'icon-lk_line',
|
||||
label: 'Line'
|
||||
}
|
||||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
|
||||
defineExpose({})
|
||||
const handlerAddNode = (e, item) => {
|
||||
emit("onAddNode", e, item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./fontFamilyIcon.scss";
|
||||
|
||||
$height: 600px;
|
||||
$leftPanelWidth: 368px;
|
||||
$leftPanelToggleLeft: 367px;
|
||||
$leftPanelLeft: 67px;
|
||||
$panelZIndex: 10;
|
||||
|
||||
.top-btn-active {
|
||||
background-color: rgba(255, 199, 121, 0.88) !important;
|
||||
border: 1px solid !important;
|
||||
}
|
||||
|
||||
.common-layout {
|
||||
position: relative;
|
||||
z-index: $panelZIndex;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
background-color: #ffffff;
|
||||
width: $leftPanelWidth;
|
||||
height: 600px;
|
||||
transition: width .3s ease;
|
||||
}
|
||||
|
||||
.leftPanel-content {
|
||||
border-left: 1px solid #eee;
|
||||
position: absolute;
|
||||
left: $leftPanelLeft;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftPanel-content.close {
|
||||
left: -300px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.leftPanel.close {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle {
|
||||
width: 10px;
|
||||
height: 88px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
left: $leftPanelToggleLeft;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: width 0.3s ease, left 0.3s ease, right 0.1s linear;
|
||||
z-index: $panelZIndex;
|
||||
background: url("/x6/tools/toggle.svg");
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle.close {
|
||||
left: $leftPanelLeft;
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle.close:after {
|
||||
transform: translate(-50%, -50%) rotate(180deg); /* 或者使用 scaleX(-1) */
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle:after {
|
||||
background: url("/x6/tools/gt.svg");
|
||||
background-size: cover;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform .6s ease;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.leftPanel-menu {
|
||||
width: 68px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leftPanel-menu__button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: inherit;
|
||||
color: rgb(27, 35, 55);
|
||||
border-radius: 4px;
|
||||
margin: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.leftPanel-menu__button.active {
|
||||
background-color: rgb(241, 243, 247);
|
||||
}
|
||||
|
||||
.font-item {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 18px;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.top-tool-bar {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bottom-tool-bar {
|
||||
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-panel {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: #6fa9ba;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.x6-widget-transform-resize) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.x6-widget-transform-rotate) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: 2px solid #fbab00;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
transform: rotate(133deg);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.font-FangSong{
|
||||
background-image: url("/x6/font_title/FangSong.svg");
|
||||
}
|
||||
.font-SimHei{
|
||||
background-image: url("/x6/font_title/SimHei.svg");
|
||||
}
|
||||
.font-KaiTi{
|
||||
background-image: url("/x6/font_title/KaiTi.svg");
|
||||
}
|
||||
.font-en-AlexBrush-Regular{
|
||||
background-image: url("/x6/font_title/En_AlexBrush-Regular.svg");
|
||||
}
|
||||
.font-en-Bold{
|
||||
background-image: url("/x6/font_title/En_Bold.svg");
|
||||
}
|
||||
.font-en-Light{
|
||||
background-image: url("/x6/font_title/En_Light.svg");
|
||||
}
|
||||
.font-en-Sedium{
|
||||
background-image: url("/x6/font_title/En_Sedium.svg");
|
||||
}
|
||||
|
|
@ -0,0 +1,977 @@
|
|||
<template>
|
||||
|
||||
<div class="common-layout">
|
||||
|
||||
<el-dialog
|
||||
v-model="that.showDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<template #title>
|
||||
<div>
|
||||
Setting
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-form>
|
||||
<div>
|
||||
<div>
|
||||
<el-form-item label="backgroundColor">
|
||||
<ColorPickerTool
|
||||
v-model="that.pageConfig.background.color"
|
||||
:uuid="`background.color`"
|
||||
@active-change="changePageColor"
|
||||
show-alpha
|
||||
:predefine="predefineColors"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<div style="width: 150px;">
|
||||
<div>
|
||||
width
|
||||
<el-input-number v-model="that.pageConfig.editArea.width"
|
||||
@change="changePageConfig"/>
|
||||
</div>
|
||||
<div>
|
||||
height
|
||||
<el-input-number v-model="that.pageConfig.editArea.height"
|
||||
@change="changePageConfig"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-select
|
||||
v-model="that.sizeMode"
|
||||
filterable
|
||||
placeholder="选择预设尺寸"
|
||||
style="width: 240px"
|
||||
@change="defaultSizeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sizeModeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div style="display: flex;align-items: center">
|
||||
<i class="icon-lk_warning_tips"
|
||||
style="color: #F5A218; font-size: 1.2rem; margin: 4px"></i>
|
||||
<span>印刷场景下，非标准尺寸。具体与实际为准</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-container>
|
||||
<el-header class="top-tool-bar">
|
||||
<div style="display: flex;align-items: center;height: 100%">
|
||||
<div style="background-color: #34bfa3;width: 68px;height: 100%;">
|
||||
</div>
|
||||
<div style="margin-left: 6px;display: flex;align-items: center;height: 100%">
|
||||
<div>
|
||||
<el-button @click="that.showDialog = true">Settings</el-button>
|
||||
</div>
|
||||
<div v-if="hasKey(that.cellInfo, 'size.height')">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="80"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
content="size"
|
||||
>
|
||||
<template #reference>
|
||||
<el-select-v2
|
||||
v-model="that.cellInfo.size.height"
|
||||
filterable
|
||||
:options="fontSizeList"
|
||||
placeholder="Please select"
|
||||
style="width: 80px"
|
||||
@change="changeSize"
|
||||
/>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<div v-if="hasKey(that.cellInfo, 'data.style.backgroundColor')">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="60"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
content="lineColor"
|
||||
>
|
||||
<template #reference>
|
||||
<ColorPickerTool
|
||||
v-model="that.cellInfo.data.style.backgroundColor"
|
||||
:uuid="`data.style.backgroundColor`"
|
||||
@active-change="changeColor"
|
||||
show-alpha
|
||||
:predefine="predefineColors"/>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-if="hasKey(that.cellInfo, 'data.style.borderRadius')">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="60"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
content="borderAngle"
|
||||
>
|
||||
<template #reference>
|
||||
<div>
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="buttonRef"
|
||||
trigger="click"
|
||||
:width="380"
|
||||
virtual-triggering
|
||||
>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<div>leftTop</div>
|
||||
<div>
|
||||
<el-input-number :min="0" v-model="that.borderAngle[0]"
|
||||
@change="changeBorderAngle"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<div>rightTop</div>
|
||||
<div>
|
||||
<el-input-number :min="0" v-model="that.borderAngle[1]"
|
||||
@change="changeBorderAngle"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<div>leftBottom</div>
|
||||
<div>
|
||||
<el-input-number :min="0" v-model="that.borderAngle[3]"
|
||||
@change="changeBorderAngle"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<div>rightBottom</div>
|
||||
<div>
|
||||
<el-input-number :min="0" v-model="that.borderAngle[2]"
|
||||
@change="changeBorderAngle"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-button link ref="buttonRef" v-click-outside="onClickOutside">
|
||||
<i class="icon-lk_border_angle"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="hasKey(that.cellInfo, 'data.style.text.color')">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="60"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
content="fontColor"
|
||||
>
|
||||
<template #reference>
|
||||
<ColorPickerTool
|
||||
v-model="that.cellInfo.data.style.text.color"
|
||||
:uuid="`data.style.text.color`"
|
||||
@active-change="changeColor"
|
||||
show-alpha
|
||||
:predefine="predefineColors"/>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<div v-if="hasKey(that.cellInfo, 'data.style.text.fontFamily')">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="50"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
content="fontFamily"
|
||||
>
|
||||
<template #reference>
|
||||
<div>
|
||||
<el-select-v2
|
||||
v-model="that.cellInfo.data.style.text.fontFamily"
|
||||
filterable
|
||||
:options="fontFamilyList"
|
||||
placeholder=""
|
||||
style="width: 180px"
|
||||
@change="changeCellInfo"
|
||||
>
|
||||
<template #default="{item}">
|
||||
<div>
|
||||
<div class="font-item" :class="[item.icon]">
|
||||
<i style="float: right;" class="icon-lk_success"
|
||||
v-if="item.value === that.cellInfo.data.style.text.fontFamily"> </i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
</el-select-v2>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<div v-for="btn in topBtnList" :key="btn.key">
|
||||
|
||||
<el-button link v-if="!btn.tips" :disabled="btn.disabled" style="margin-left: 4px;"
|
||||
:class="{
|
||||
'top-btn-active' : btn.active
|
||||
}" @click="topBtnClick(btn)">
|
||||
<i :class="btn.icon" style="padding: 4px"></i>
|
||||
</el-button>
|
||||
<el-popover v-else
|
||||
placement="bottom-start"
|
||||
:width="btn.tipsWidth"
|
||||
:effect="that.effect"
|
||||
trigger="hover"
|
||||
:content="btn.tips"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button link :disabled="btn.disabled" style="margin-left: 4px;" :class="{
|
||||
'top-btn-active' : btn.active
|
||||
}" @click="topBtnClick(btn)">
|
||||
<i :class="btn.icon" style="padding: 4px"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<DraftDesignLeftPanel @on-add-node="handlerAddNode"/>
|
||||
<el-container>
|
||||
<el-main class="center-panel">
|
||||
<div>
|
||||
<slot>
|
||||
<div>main</div>
|
||||
</slot>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer class="bottom-tool-bar">
|
||||
|
||||
<div style="display: flex; align-items: center; height: 100%;justify-content: flex-end;">
|
||||
|
||||
<div>
|
||||
<div><el-button> <i class="icon-lk_layer_set" style="font-size: 1.2rem"></i> </el-button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<el-button @click="that.currentZoom -= 0.1" :disabled="that.currentZoom <= 0.3">-
|
||||
</el-button>
|
||||
<el-select v-model="that.currentZoom" style="width: 90px">
|
||||
<el-option
|
||||
v-for="item in zoomList"
|
||||
:key="item.value"
|
||||
:label="(Math.floor(item.value * 100))+'%'"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-option
|
||||
v-if="!zoomList.some(o => o.value === that.currentZoom)"
|
||||
:label="(Math.floor(that.currentZoom * 100))+'%'"
|
||||
:value="that.currentZoom"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button @click="that.currentZoom += 0.1" :disabled="that.currentZoom >= 10">+
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-footer>
|
||||
</el-container>
|
||||
|
||||
</el-container>
|
||||
|
||||
</el-container>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts" name="DraftDesignLayout">
|
||||
//图稿设计器 DraftDesign
|
||||
import {
|
||||
ElTabs,
|
||||
ElTabPane,
|
||||
ElCollapseItem,
|
||||
ElButton,
|
||||
ElSelect,
|
||||
ElPopover,
|
||||
ElInput,
|
||||
ElForm,
|
||||
ElSelectV2
|
||||
} from "element-plus";
|
||||
|
||||
import {Graph, DataUri} from '@antv/x6'
|
||||
import {Scroller} from '@antv/x6-plugin-scroller'
|
||||
import {Snapline} from '@antv/x6-plugin-snapline'
|
||||
import {Transform} from '@antv/x6-plugin-transform'
|
||||
import {Keyboard} from '@antv/x6-plugin-keyboard'
|
||||
import {History} from '@antv/x6-plugin-history'
|
||||
import {Selection} from '@antv/x6-plugin-selection'
|
||||
import {Dnd} from '@antv/x6-plugin-dnd'
|
||||
import {Export} from '@antv/x6-plugin-export'
|
||||
import {Clipboard} from '@antv/x6-plugin-clipboard'
|
||||
import DraftDesignLibrary from './components/Library.vue'
|
||||
import NodePropConfig from './components/NodePropConfig.vue'
|
||||
import {provide, computed, watch, onMounted} from 'vue'
|
||||
import {nextId, getSafeValue, hexToRGBA} from "@/components/DraftDesign/utils/FuncUtil";
|
||||
import {useDebounceFn} from '@vueuse/core'
|
||||
import {ElMessageBox} from 'element-plus'
|
||||
import {register, getTeleport} from '@antv/x6-vue-shape'
|
||||
import ProgressNode from './components/node/ProgressNode.vue'
|
||||
import '../../icons/style.css'
|
||||
import {predefineColors, ShapeType} from "@/components/DraftDesign/config";
|
||||
import ColorPickerTool from "@/components/DraftDesign/components/ColorPickerTool.vue";
|
||||
import DraftDesignLeftPanel from "./LeftPanel.vue";
|
||||
|
||||
const emit = defineEmits(['onAddNode', 'changeZoom', 'onChangePageConfig', 'onChangeCell'])
|
||||
|
||||
const props = defineProps({})
|
||||
const clickMenu = (item) => {
|
||||
layout.leftActive = item.key
|
||||
console.log(item)
|
||||
}
|
||||
|
||||
const buttonRef = ref()
|
||||
const popoverRef = ref()
|
||||
const onClickOutside = () => {
|
||||
unref(popoverRef).popperRef?.delayHide?.()
|
||||
}
|
||||
|
||||
|
||||
const hasKey = (obj, path) => {
|
||||
if (!obj || !path) return null;
|
||||
|
||||
const keys = path.split('.');
|
||||
let result = obj;
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const k = keys[i];
|
||||
if (result.hasOwnProperty(k) && i === keys.length - 1) {
|
||||
return true;
|
||||
}
|
||||
if (result[k] !== undefined) {
|
||||
result = result[k];
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
const topBtnClick = (btn) => {
|
||||
console.log(btn)
|
||||
btn.handler();
|
||||
changeCellInfo()
|
||||
}
|
||||
const changePageColor = (val, key) => {
|
||||
const split = key.split(".");
|
||||
if (split.length === 1) {
|
||||
that.pageConfig[split[0]] = val;
|
||||
} else {
|
||||
let obj = that.pageConfig;
|
||||
for (let i = 0; i < split.length - 1; i++) {
|
||||
obj = obj[split[i]];
|
||||
}
|
||||
obj[split[split.length - 1]] = val;
|
||||
}
|
||||
changePageConfig()
|
||||
}
|
||||
|
||||
const changeColor = (val, key) => {
|
||||
const split = key.split(".");
|
||||
if (split.length === 1) {
|
||||
that.cellInfo[split[0]] = val;
|
||||
} else {
|
||||
let obj = that.cellInfo;
|
||||
for (let i = 0; i < split.length - 1; i++) {
|
||||
obj = obj[split[i]];
|
||||
}
|
||||
obj[split[split.length - 1]] = val;
|
||||
}
|
||||
changeCellInfo()
|
||||
}
|
||||
const topBtnList = computed(() => {
|
||||
let arr = [];
|
||||
if (hasKey(that.cellInfo, 'data.style.text.fontWeight')) {
|
||||
arr.push({
|
||||
key: 'data.style.text.fontWeight',
|
||||
tipsWidth: 80,
|
||||
tips: 'fontBold',
|
||||
active: that.cellInfo.data.style.text.fontWeight === 'bold',
|
||||
disabled: false,
|
||||
icon: 'icon-lk_font_bold',
|
||||
handler: () => {
|
||||
if (that.cellInfo.data.style.text.fontWeight === 'bold') {
|
||||
that.cellInfo.data.style.text.fontWeight = 'normal'
|
||||
} else {
|
||||
that.cellInfo.data.style.text.fontWeight = 'bold'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (hasKey(that.cellInfo, 'data.style.text.fontStyle')) {
|
||||
arr.push({
|
||||
key: 'data.style.text.fontStyle',
|
||||
tipsWidth: 80,
|
||||
tips: 'fontItalic',
|
||||
active: that.cellInfo.data.style.text.fontStyle === 'italic',
|
||||
disabled: false,
|
||||
icon: 'icon-lk_font_italic',
|
||||
handler: () => {
|
||||
if (that.cellInfo.data.style.text.fontStyle === 'italic') {
|
||||
that.cellInfo.data.style.text.fontStyle = 'normal'
|
||||
} else {
|
||||
that.cellInfo.data.style.text.fontStyle = 'italic'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return arr
|
||||
})
|
||||
const borderRadiusRangeList = computed(() => {
|
||||
let arr = [];
|
||||
arr.push({
|
||||
value: '0',
|
||||
label: '0'
|
||||
})
|
||||
arr.push({
|
||||
value: '10px',
|
||||
label: '10px'
|
||||
})
|
||||
arr.push({
|
||||
value: '20px',
|
||||
label: '20px'
|
||||
})
|
||||
return arr;
|
||||
})
|
||||
const fontFamilyList = computed(() => {
|
||||
return [
|
||||
{
|
||||
value: '仿宋',
|
||||
icon: 'font-FangSong',
|
||||
label: '仿宋'
|
||||
},
|
||||
|
||||
{
|
||||
value: '黑体',
|
||||
icon: 'font-SimHei',
|
||||
label: '黑体'
|
||||
},
|
||||
{
|
||||
value: '楷体',
|
||||
icon: 'font-KaiTi',
|
||||
label: '楷体'
|
||||
}, {
|
||||
value: 'Bold',
|
||||
icon: 'font-en-Bold',
|
||||
label: 'en-Bold'
|
||||
}, {
|
||||
value: 'Light',
|
||||
icon: 'font-en-Light',
|
||||
label: 'Light'
|
||||
}, {
|
||||
value: 'Sedium',
|
||||
icon: 'font-en-Sedium',
|
||||
label: 'Sedium'
|
||||
},
|
||||
]
|
||||
})
|
||||
const fontSizeList = computed(() => {
|
||||
const arr = []
|
||||
let i = 4;
|
||||
while (i < 20) {
|
||||
i += 2
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
while (i < 80) {
|
||||
i += 4
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
while (i < 100) {
|
||||
i += 8
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
while (i < 200) {
|
||||
i += 20
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
while (i < 300) {
|
||||
i += 40
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
while (i < 500) {
|
||||
i += 80
|
||||
arr.push({
|
||||
value: i,
|
||||
label: `${i}`
|
||||
})
|
||||
}
|
||||
return arr
|
||||
})
|
||||
const sizeModeList = [
|
||||
|
||||
{
|
||||
value: '500_500',
|
||||
label: 'LOGO设计500 * 500'
|
||||
},
|
||||
{
|
||||
value: '90_54',
|
||||
label: '名片90 * 54'
|
||||
},
|
||||
{
|
||||
value: '800_800',
|
||||
label: '海报800 * 800'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
const zoomList = [
|
||||
{
|
||||
value: 0.3,
|
||||
label: '0.3'
|
||||
},
|
||||
{
|
||||
value: 0.5,
|
||||
label: '0.5'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '1'
|
||||
},
|
||||
{
|
||||
value: 1.2,
|
||||
label: '1.2'
|
||||
}, {
|
||||
value: 1.5,
|
||||
label: '1.5'
|
||||
}, {
|
||||
value: 2,
|
||||
label: '2'
|
||||
},
|
||||
]
|
||||
const that = reactive({
|
||||
effect: 'dark',
|
||||
containerId: nextId(),
|
||||
currentZoom: 1,
|
||||
showDialog: false,
|
||||
sizeMode: '',
|
||||
borderAngle: [0, 0, 0, 0],
|
||||
pageConfig: {
|
||||
background: {
|
||||
color: ''
|
||||
},
|
||||
editArea: {
|
||||
width: 100,
|
||||
height: 300,
|
||||
}
|
||||
},
|
||||
cellInfo: {}
|
||||
})
|
||||
watch(() => that.pageConfig, () => {
|
||||
emit('onChangePageConfig', that.pageConfig)
|
||||
})
|
||||
watch(() => that.currentZoom, () => {
|
||||
console.log("that.currentZoom", that.currentZoom)
|
||||
emit('changeZoom', that.currentZoom.toFixed(2))
|
||||
})
|
||||
const defaultSizeChange = (val) => {
|
||||
if (that.sizeMode) {
|
||||
const split = that.sizeMode.split('_');
|
||||
that.pageConfig.editArea.width = split[0]
|
||||
that.pageConfig.editArea.height = split[1]
|
||||
changePageConfig()
|
||||
that.showDialog = false
|
||||
}
|
||||
|
||||
}
|
||||
const changeSize = (val) => {
|
||||
changeCellInfo()
|
||||
}
|
||||
const changeCellInfo = () => {
|
||||
console.log("that.cellInfo", that.cellInfo)
|
||||
emit('onChangeCell', that.cellInfo)
|
||||
}
|
||||
const changePageConfig = () => {
|
||||
emit('onChangePageConfig', that.pageConfig)
|
||||
}
|
||||
const layout = reactive({
|
||||
leftPanelClose: false,
|
||||
rightPanelClose: false,
|
||||
leftActive: '',
|
||||
leftBtnList: [
|
||||
{
|
||||
key: 'text',
|
||||
shape: ShapeType.vueTextCell,
|
||||
data: {
|
||||
label: 'Text',
|
||||
width: 100,
|
||||
height: 18,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
color: '#000000',
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#000000',
|
||||
}
|
||||
},
|
||||
icon: 'icon-lk_text',
|
||||
label: 'Text'
|
||||
}, {
|
||||
key: 'line',
|
||||
shape: ShapeType.vueLineCell,
|
||||
data: {
|
||||
label: 'Line',
|
||||
width: 80,
|
||||
height: 6,
|
||||
|
||||
},
|
||||
icon: 'icon-lk_line',
|
||||
label: 'Line'
|
||||
}
|
||||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
// init(false, {});
|
||||
})
|
||||
|
||||
const selectedNode = (e) => {
|
||||
that.cellInfo = {...e};
|
||||
if (hasKey(that.cellInfo, 'data.style.borderRadius')) {
|
||||
if (that.cellInfo.data.style.borderRadius) {
|
||||
that.borderAngle = [0, 0, 0, 0]
|
||||
let tmp = that.cellInfo.data.style.borderRadius.split(' ');
|
||||
for (let i = 0; i < tmp.length; i++) {
|
||||
if (parseInt(tmp[i])) {
|
||||
that.borderAngle[i] = parseInt(tmp[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const changeBorderAngle = () => {
|
||||
if (hasKey(that.cellInfo, 'data.style.borderRadius')) {
|
||||
let str = ''
|
||||
console.log("that.borderAngle", that.borderAngle)
|
||||
for (let i = 0; i < that.borderAngle.length; i++) {
|
||||
str += `${that.borderAngle[i]}px `
|
||||
}
|
||||
that.cellInfo.data.style.borderRadius = str;
|
||||
console.log("that.cellInfo.data.style.borderRadius", that.cellInfo.data.style.borderRadius)
|
||||
changeCellInfo()
|
||||
}
|
||||
}
|
||||
const updateZoom = useDebounceFn((zoom) => {
|
||||
that.currentZoom = zoom
|
||||
}, 100)
|
||||
|
||||
const updatePageConfig = useDebounceFn((conf) => {
|
||||
if (!conf) {
|
||||
conf = {
|
||||
editArea: {
|
||||
width: 100,
|
||||
height: 300,
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(conf)
|
||||
that.pageConfig = {
|
||||
...conf,
|
||||
background: {
|
||||
showWatermark: false,
|
||||
image: ``,
|
||||
repeat: 'no-repeat',
|
||||
position: 'center',
|
||||
size: 'auto auto',
|
||||
opacity: 1,
|
||||
angle: 20,
|
||||
color: '#eeeaec',
|
||||
},
|
||||
editArea: {
|
||||
width: 100,
|
||||
height: 300,
|
||||
...conf.editArea
|
||||
},
|
||||
}
|
||||
}, 100)
|
||||
defineExpose({
|
||||
updateZoom,
|
||||
updatePageConfig,
|
||||
selectedNode
|
||||
})
|
||||
const handlerAddNode = (e, item) => {
|
||||
emit("onAddNode", e, item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./fontFamilyIcon.scss";
|
||||
|
||||
$height: 600px;
|
||||
$leftPanelWidth: 368px;
|
||||
$leftPanelToggleLeft: 367px;
|
||||
$leftPanelLeft: 67px;
|
||||
$panelZIndex: 10;
|
||||
|
||||
.top-btn-active {
|
||||
background-color: rgba(255, 199, 121, 0.88) !important;
|
||||
border: 1px solid !important;
|
||||
}
|
||||
|
||||
.common-layout {
|
||||
position: relative;
|
||||
z-index: $panelZIndex;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
background-color: #ffffff;
|
||||
width: $leftPanelWidth;
|
||||
height: 600px;
|
||||
transition: width .3s ease;
|
||||
}
|
||||
|
||||
.leftPanel-content {
|
||||
border-left: 1px solid #eee;
|
||||
position: absolute;
|
||||
left: $leftPanelLeft;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftPanel-content.close {
|
||||
left: -300px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.leftPanel.close {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle {
|
||||
width: 10px;
|
||||
height: 88px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
left: $leftPanelToggleLeft;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: width 0.3s ease, left 0.3s ease, right 0.1s linear;
|
||||
z-index: $panelZIndex;
|
||||
background: url("/x6/tools/toggle.svg");
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle.close {
|
||||
left: $leftPanelLeft;
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle.close:after {
|
||||
transform: translate(-50%, -50%) rotate(180deg); /* 或者使用 scaleX(-1) */
|
||||
}
|
||||
|
||||
.leftPanel-mainContent-toggle:after {
|
||||
background: url("/x6/tools/gt.svg");
|
||||
background-size: cover;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform .6s ease;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.leftPanel-menu {
|
||||
width: 68px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leftPanel-menu__button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: inherit;
|
||||
color: rgb(27, 35, 55);
|
||||
border-radius: 4px;
|
||||
margin: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.leftPanel-menu__button.active {
|
||||
background-color: rgb(241, 243, 247);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rightPanel {
|
||||
background-color: #ffffff;
|
||||
width: $leftPanelWidth;
|
||||
height: 600px;
|
||||
transition: width .3s ease;
|
||||
}
|
||||
|
||||
.rightPanel-content {
|
||||
border-left: 1px solid #eee;
|
||||
position: absolute;
|
||||
left: $leftPanelLeft;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rightPanel-content.close {
|
||||
left: -300px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.rightPanel.close {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.rightPanel-mainContent-toggle {
|
||||
width: 10px;
|
||||
height: 88px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
left: $leftPanelToggleLeft;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: width 0.3s ease, left 0.3s ease, right 0.1s linear;
|
||||
z-index: $panelZIndex;
|
||||
background: url("/x6/tools/toggle.svg");
|
||||
}
|
||||
|
||||
.rightPanel-mainContent-toggle.close {
|
||||
left: $leftPanelLeft;
|
||||
}
|
||||
|
||||
.rightPanel-mainContent-toggle.close:after {
|
||||
transform: translate(-50%, -50%) rotate(180deg); /* 或者使用 scaleX(-1) */
|
||||
}
|
||||
|
||||
.rightPanel-mainContent-toggle:after {
|
||||
background: url("/x6/tools/gt.svg");
|
||||
background-size: cover;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform .6s ease;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.rightPanel-menu {
|
||||
width: 68px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rightPanel-menu__button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: inherit;
|
||||
color: rgb(27, 35, 55);
|
||||
border-radius: 4px;
|
||||
margin: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.rightPanel-menu__button.active {
|
||||
background-color: rgb(241, 243, 247);
|
||||
}
|
||||
|
||||
.font-item {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 18px;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.top-tool-bar {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bottom-tool-bar {
|
||||
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-panel {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: #6fa9ba;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.x6-widget-transform-resize) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.x6-widget-transform-rotate) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: 2px solid #fbab00;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
transform: rotate(133deg);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div :id="cellInfo.id" class="node-content" v-reSize="changSize">
|
||||
<div style="position: absolute;"
|
||||
:style="cellInfo.style">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import {
|
||||
filterUnsafeHtml,
|
||||
getSafeValue,
|
||||
mergeDeepObject,
|
||||
nextId
|
||||
} from "@/components/DraftDesign/utils/FuncUtil";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LineCellNode',
|
||||
inject: ['getNode'],
|
||||
data() {
|
||||
return {
|
||||
cellInfo:{
|
||||
id: '',
|
||||
label: '',
|
||||
showInput: false,
|
||||
style:{ }
|
||||
},
|
||||
nodeInfo: {
|
||||
store:{
|
||||
data:{
|
||||
data:{
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fontSize: 12,
|
||||
targetElement: null
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const node = (this as any).getNode()
|
||||
this.nodeInfo = node
|
||||
|
||||
console.log("自定义节点",node.data)
|
||||
if(node && node.data){
|
||||
this.setCellInfo(node.data)
|
||||
}
|
||||
node.on('change:data', ({ current }) => {
|
||||
this.setCellInfo(current)
|
||||
})
|
||||
|
||||
},
|
||||
unmounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
safeHtml(val){
|
||||
if(val){
|
||||
val = val.replace(/[\n\r]/g, "<br/>")
|
||||
}
|
||||
return filterUnsafeHtml(val)
|
||||
},
|
||||
inputBlur(){
|
||||
this.cellInfo.showInput = false
|
||||
},
|
||||
inputChange(){
|
||||
if(this.nodeInfo.store && this.nodeInfo.store.data){
|
||||
this.nodeInfo.store.data.data.label = this.cellInfo.label
|
||||
}
|
||||
},
|
||||
setInput(val:boolean){
|
||||
this.cellInfo.showInput = val
|
||||
|
||||
},
|
||||
changSize(size:any){
|
||||
|
||||
},
|
||||
changeFontSize(){
|
||||
// this.cellInfo.style.height = `${this.fontSize }px`
|
||||
},
|
||||
removeTransform(val:string){
|
||||
let t = this.cellInfo.style.text.transform;
|
||||
if(t){
|
||||
const split = t.split(' ');
|
||||
const split1 = val.split("(");
|
||||
let str = ""
|
||||
for (let i = 0; i < split.length; i++) {
|
||||
if (split[i].startsWith(split1[0])) {
|
||||
continue
|
||||
}
|
||||
str += `${split[i]} `
|
||||
}
|
||||
this.cellInfo.style.text.transform = str;
|
||||
}
|
||||
},
|
||||
addTransform(val:string){
|
||||
let t = this.cellInfo.style.text.transform;
|
||||
if(t){
|
||||
const split = t.split(' ');
|
||||
const split1 = val.split("(");
|
||||
let add =true;
|
||||
let str = ""
|
||||
for (let i = 0; i < split.length; i++) {
|
||||
if (split[i].startsWith(split1[0])) {
|
||||
split[i] = val;
|
||||
add = false
|
||||
}
|
||||
str += `${split[i]} `
|
||||
}
|
||||
if(add){
|
||||
str += `${val} `;
|
||||
}
|
||||
this.cellInfo.style.text.transform = str;
|
||||
}
|
||||
|
||||
},
|
||||
setCellInfo(info:any) {
|
||||
if(!info){
|
||||
info = {
|
||||
style:{
|
||||
text:{}
|
||||
}
|
||||
}
|
||||
}
|
||||
const text = getSafeValue(info, 'style.text') || {}
|
||||
const style = getSafeValue(info, 'style') || {}
|
||||
this.cellInfo = mergeDeepObject({
|
||||
showInput: false,
|
||||
id: nextId(),
|
||||
label: '',
|
||||
style:{
|
||||
bottom: 0,/* 直线在容器底部 */
|
||||
width: '100%', /* 直线宽度匹配容器宽度 */
|
||||
height: '20%', /* 直线的高度 */
|
||||
backgroundColor: '#000', /* 直线的颜色 */
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%) scale(1)',
|
||||
borderRadius: '0px 0px 0px 0px',
|
||||
}
|
||||
}, info)
|
||||
setTimeout(()=>{
|
||||
if(this.nodeInfo.store && this.nodeInfo.store.data){
|
||||
this.nodeInfo.store.data.data = this.cellInfo
|
||||
}
|
||||
},300)
|
||||
this.setInput(this.cellInfo.showInput)
|
||||
this.changeFontSize();
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.node-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<template>
|
||||
<div :id="cellInfo.id" class="node-content" v-reSize="changSize">
|
||||
<span style="position: absolute;"
|
||||
:style="cellInfo.style.text"
|
||||
v-html="safeHtml(cellInfo.label)" >
|
||||
</span>
|
||||
|
||||
<el-dialog v-model="cellInfo.showInput"
|
||||
append-to-body
|
||||
>
|
||||
<el-input v-if="cellInfo.showInput"
|
||||
v-model="cellInfo.label"
|
||||
@input="inputChange"
|
||||
style="width:100%;height: 100%;z-index: 9999;"
|
||||
autosize
|
||||
resize="none"
|
||||
placeholder="输入文字"
|
||||
@blur="inputBlur"
|
||||
type="textarea"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="setInput(false)">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import {
|
||||
filterUnsafeHtml,
|
||||
getSafeValue,
|
||||
mergeDeepObject,
|
||||
nextId
|
||||
} from "@/components/DraftDesign/utils/FuncUtil";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TextCellNode',
|
||||
inject: ['getNode'],
|
||||
data() {
|
||||
return {
|
||||
cellInfo:{
|
||||
id: '',
|
||||
label: '新文本',
|
||||
showInput: false,
|
||||
style:{
|
||||
text:{
|
||||
minWidth: 'max-content',
|
||||
minHeight: 'max-content',
|
||||
fontSize: '14px',
|
||||
marginLeft: 'auto',
|
||||
fontWeight: 600,
|
||||
fontFamily: '仿宋',
|
||||
color: '#ffffff',
|
||||
textAlign: 'left',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
padding: '0 0',
|
||||
transform: 'scaleX(1) scaleY(1) translate(-50%, -50%)',
|
||||
textIndent: 0,
|
||||
textDecoration: 'none',
|
||||
textTransform: 'none',
|
||||
textShadow: 'none',
|
||||
textOverflow: 'clip',
|
||||
whiteSpace: 'normal',
|
||||
wordBreak: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeInfo: {
|
||||
store:{
|
||||
data:{
|
||||
data:{
|
||||
label: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fontSize: 12,
|
||||
targetElement: null
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const node = (this as any).getNode()
|
||||
this.nodeInfo = node
|
||||
|
||||
console.log("自定义节点",node.data)
|
||||
if(node && node.data){
|
||||
this.setCellInfo(node.data)
|
||||
}
|
||||
node.on('change:data', ({ current }) => {
|
||||
console.log("change:data",current)
|
||||
this.setCellInfo(current)
|
||||
})
|
||||
|
||||
},
|
||||
unmounted() {
|
||||
},
|
||||
methods: {
|
||||
safeHtml(val){
|
||||
if(val){
|
||||
val = val.replace(/[\n\r]/g, "<br/>")
|
||||
}
|
||||
return filterUnsafeHtml(val)
|
||||
},
|
||||
inputBlur(){
|
||||
this.cellInfo.showInput = false
|
||||
},
|
||||
inputChange(){
|
||||
if(this.nodeInfo.store && this.nodeInfo.store.data){
|
||||
// this.nodeInfo.store.data.data.label = this.cellInfo.label
|
||||
this.nodeInfo.store.data.data = {
|
||||
...this.nodeInfo.store.data.data,
|
||||
...this.cellInfo
|
||||
}
|
||||
}
|
||||
},
|
||||
setInput(val:boolean){
|
||||
this.cellInfo.showInput = val
|
||||
},
|
||||
changSize(size:any){
|
||||
console.log("cellInfo.label",this.cellInfo.label)
|
||||
let s = size.height+12;
|
||||
if(s > 60){
|
||||
s= s + s / 3
|
||||
}
|
||||
if(s < 6){
|
||||
s = 6
|
||||
}else if(s >= 1000){
|
||||
s = 1000
|
||||
}
|
||||
|
||||
// this.nodeInfo.store.data.size.width = size.width;
|
||||
console.log(" this.nodeInfo.width", this.nodeInfo)
|
||||
this.fontSize = s;
|
||||
this.changeFontSize();
|
||||
},
|
||||
changeFontSize(){
|
||||
this.cellInfo.style.text.fontSize = `${this.fontSize }px`
|
||||
},
|
||||
removeTransform(val:string){
|
||||
let t = this.cellInfo.style.text.transform;
|
||||
if(t){
|
||||
const split = t.split(' ');
|
||||
const split1 = val.split("(");
|
||||
let str = ""
|
||||
for (let i = 0; i < split.length; i++) {
|
||||
if (split[i].startsWith(split1[0])) {
|
||||
continue
|
||||
}
|
||||
str += `${split[i]} `
|
||||
}
|
||||
this.cellInfo.style.text.transform = str;
|
||||
}
|
||||
},
|
||||
addTransform(val:string){
|
||||
let t = this.cellInfo.style.text.transform;
|
||||
if(t){
|
||||
const split = t.split(' ');
|
||||
const split1 = val.split("(");
|
||||
let add =true;
|
||||
let str = ""
|
||||
for (let i = 0; i < split.length; i++) {
|
||||
if (split[i].startsWith(split1[0])) {
|
||||
split[i] = val;
|
||||
add = false
|
||||
}
|
||||
str += `${split[i]} `
|
||||
}
|
||||
if(add){
|
||||
str += `${val} `;
|
||||
}
|
||||
this.cellInfo.style.text.transform = str;
|
||||
}
|
||||
|
||||
},
|
||||
setCellInfo(info:any) {
|
||||
if(!info){
|
||||
info = {
|
||||
style:{
|
||||
text:{}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.cellInfo = mergeDeepObject({
|
||||
showInput: false,
|
||||
id: nextId(),
|
||||
label: '新文本',
|
||||
style:{
|
||||
text:{
|
||||
minWidth: 'max-content',
|
||||
minHeight: 'max-content',
|
||||
fontSize: '14px',
|
||||
marginLeft: 'auto',
|
||||
fontWeight: 100,
|
||||
fontStyle: 'normal', // italic 斜体
|
||||
fontFamily: '仿宋',
|
||||
color: '#d60808',
|
||||
textAlign: 'left',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
padding: '0px 0px',
|
||||
transform: 'translate(-50%, -50%) scale(1)',
|
||||
textIndent: 0,
|
||||
textDecoration: 'none',
|
||||
textTransform: 'none',
|
||||
textShadow: 'none',
|
||||
textOverflow: 'clip',
|
||||
whiteSpace: 'normal',
|
||||
wordBreak: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
}
|
||||
}
|
||||
}, info)
|
||||
console.log("text##",this.nodeInfo)
|
||||
setTimeout(()=>{
|
||||
if(this.nodeInfo.store && this.nodeInfo.store.data){
|
||||
this.nodeInfo.store.data.data = this.cellInfo
|
||||
}
|
||||
},300)
|
||||
// this.fontSize = parseInt(getSafeValue(this.cellInfo.style.text, 'fontSize') || '14')
|
||||
this.setInput(this.cellInfo.showInput)
|
||||
this.changeFontSize();
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.node-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
import {Shape} from '@antv/x6'
|
||||
|
||||
export const graphOptions = (elId:string, viewMode = false) => {
|
||||
return {
|
||||
container: document.getElementById(elId),
|
||||
fitView: true,
|
||||
width: 1600,
|
||||
height: 1600,
|
||||
autoResize: false,
|
||||
background: {
|
||||
//
|
||||
showWatermark: false,
|
||||
image: ``,
|
||||
repeat: 'no-repeat',
|
||||
position: 'center',
|
||||
size: 'auto auto',
|
||||
opacity: 1,
|
||||
angle: 20,
|
||||
color: '#eeeaec',
|
||||
},
|
||||
embedding: { // 融合组
|
||||
enabled: true,
|
||||
findParent({node}) {
|
||||
const bbox = node.getBBox()
|
||||
//@ts-ignore
|
||||
return this.getNodes().filter((node) => {
|
||||
// 只有 data.parent 为 true 的节点才是父节点
|
||||
const data = node.getData()
|
||||
if (data && data.parent) {
|
||||
const targetBBox = node.getBBox()
|
||||
return bbox.isIntersectWithRect(targetBBox)
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
},
|
||||
transforming: {
|
||||
clearAll: false,
|
||||
clearOnBlankMouseDown: false,
|
||||
},
|
||||
async: true, // 定制节点和边的交互行为 ==> boolean 节点或边是否可交互
|
||||
interacting: viewMode ? {
|
||||
// nodeMovable: false,
|
||||
// edgeMovable: false,
|
||||
// magnetConnectable: false,
|
||||
// vertexDeletable: false,
|
||||
nodeMovable: false, // 节点是否可以被移动
|
||||
magnetConnectable: false, // 当在具有 magnet 属性的元素上按下鼠标开始拖动时，是否触发连线交互
|
||||
edgeMovable: false, // 边是否可以被移动
|
||||
edgeLabelMovable: false, // 边的标签是否可以被移动
|
||||
arrowheadMovable: false, // 边的起始/终止箭头（在使用 arrowhead 工具后）是否可以被移动
|
||||
vertexMovable: false, // 边的路径点是否可以被移动
|
||||
vertexAddable: false, // 是否可以添加边的路径点
|
||||
vertexDeletable: false // 边的路径点是否可以被删除
|
||||
|
||||
} : {
|
||||
// nodeMovable: false,
|
||||
// edgeMovable: false,
|
||||
// magnetConnectable: false,
|
||||
// vertexDeletable: false,
|
||||
nodeMovable: true, // 节点是否可以被移动
|
||||
magnetConnectable: true, // 当在具有 magnet 属性的元素上按下鼠标开始拖动时，是否触发连线交互
|
||||
edgeMovable: true, // 边是否可以被移动
|
||||
edgeLabelMovable: true, // 边的标签是否可以被移动
|
||||
arrowheadMovable: true, // 边的起始/终止箭头（在使用 arrowhead 工具后）是否可以被移动
|
||||
vertexMovable: true, // 边的路径点是否可以被移动
|
||||
vertexAddable: true, // 是否可以添加边的路径点
|
||||
vertexDeletable: true // 边的路径点是否可以被删除
|
||||
|
||||
}, // 对齐线
|
||||
snapline: true, // 撤销/重做
|
||||
history: !viewMode, //
|
||||
|
||||
// 显示网格
|
||||
grid: {
|
||||
visible: false,
|
||||
size: 2, // 网格大小
|
||||
type: 'doubleMesh', // // 'dot' | 'fixedDot' | 'mesh'
|
||||
args: [{
|
||||
color: '#c5c5c5', // 主网格线颜色
|
||||
thickness: 1, // 主网格线宽度
|
||||
}, {
|
||||
color: '#b7b7b7', // 次网格线颜色
|
||||
thickness: 8, // 次网格线宽度
|
||||
factor: 32, // 主次网格线间隔
|
||||
},],
|
||||
},
|
||||
// 滚轮缩放 MouseWheel
|
||||
mousewheel: {
|
||||
enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl', 'meta'], maxScale: 10, minScale: 0.3
|
||||
},
|
||||
panning: {
|
||||
// 画布移动
|
||||
enabled: false,
|
||||
pageVisible: false, // 是否分页
|
||||
pageBreak: true,
|
||||
pannable: true,// 是否平移
|
||||
eventTypes: ['rightMouseDown','leftMouseDown']
|
||||
}, // 连线规则
|
||||
connecting: {
|
||||
// 路由类型
|
||||
router: {
|
||||
// 连线类型在此修改
|
||||
// 曼哈顿路由 'manhattan' 路由是正交路由 'orth' 的智能版本，该路由由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。
|
||||
name: 'manhattan',
|
||||
args: {
|
||||
padding: 1
|
||||
}
|
||||
}, // 圆角连接器，将起点、路由点、终点通过直线按顺序连接，并在线段连接处通过圆弧连接（倒圆角）。
|
||||
connector: {
|
||||
name: 'rounded',
|
||||
args: {
|
||||
radius: 8
|
||||
}
|
||||
},
|
||||
anchor: 'center',
|
||||
connectionPoint: 'anchor', // 是否允许连接到画布空白位置的点，默认为 true。
|
||||
allowBlank: false, // 距离节点或者连接桩 20px 时会触发自动吸附
|
||||
snap: {
|
||||
radius: 20
|
||||
}, // 拽出新的边
|
||||
createEdge() {
|
||||
|
||||
let conf = {};
|
||||
const item = localStorage.getItem("_pre_line_config_info")
|
||||
if(item){
|
||||
conf = JSON.parse(item)
|
||||
}
|
||||
return new Shape.Edge({
|
||||
// ...CustomEdgeOptions,
|
||||
...conf
|
||||
})
|
||||
}, validateConnection({targetMagnet}) {
|
||||
return !!targetMagnet
|
||||
}
|
||||
}, // 连线高亮
|
||||
highlighting: {
|
||||
// 连线过程中，自动吸附到链接桩时被使用。
|
||||
magnetAdsorbed: {
|
||||
name: 'stroke', args: {
|
||||
attrs: {
|
||||
width: 12,
|
||||
r: 6,
|
||||
magnet: true,
|
||||
stroke: '#008CFF',
|
||||
strokeWidth: 2,
|
||||
fill: '#0F67FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}, // 修改大小
|
||||
resizing: viewMode ? false : {
|
||||
enabled: true,
|
||||
minWidth: 0, // 最小宽
|
||||
minHeight: 0, // 最小高
|
||||
maxWidth: 105 * 20, // 最大宽
|
||||
maxHeight: 105 * 20, // 最大高
|
||||
orthogonal: true, // 是否显示中间调整点，默认为 true
|
||||
restricted: false, // 调整大小边界是否可以超出画布边缘
|
||||
preserveAspectRatio: false, // 调整大小过程中是否保持节点的宽高比例
|
||||
allowReverse: true
|
||||
}, // 查看模式不能旋转
|
||||
rotating: viewMode ? false : {
|
||||
enabled: true, // 是否开启节点旋转
|
||||
grid: 1 // 每次旋转15度
|
||||
},
|
||||
keyboard: !viewMode, // 按键操作
|
||||
clipboard: {
|
||||
enabled: !viewMode,
|
||||
useLocalStorage: false,
|
||||
} , // 剪切板
|
||||
onToolItemCreated({tool}) {
|
||||
const options = tool.options
|
||||
if (options && options.index % 2 === 1) {
|
||||
tool.setAttrs({fill: '#ff0000'})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 链接桩样式
|
||||
export const portStyle = {
|
||||
width: 12,
|
||||
r: 8, // 半径
|
||||
// 当 magnet 属性为 true 时，表示该元素可以被链接，即在连线过程中可以被当做连线的起点或终点，与链接桩类似。
|
||||
magnet: true,
|
||||
stroke: '#008CFF',
|
||||
strokeWidth: 2,
|
||||
fill: '#fff',
|
||||
zIndex: 9999
|
||||
}
|
||||
// 链接桩配置
|
||||
export const ports = {
|
||||
// 设置链接桩分组
|
||||
groups: {
|
||||
top: {
|
||||
// 定义连接柱的位置，如果不配置，将显示为默认样式
|
||||
position: 'top', // 定义连接柱的样式
|
||||
attrs: {
|
||||
circle: {
|
||||
...portStyle
|
||||
}
|
||||
}
|
||||
}, right: {
|
||||
position: 'right', attrs: {
|
||||
circle: {
|
||||
...portStyle
|
||||
}
|
||||
}
|
||||
}, bottom: {
|
||||
position: 'bottom', attrs: {
|
||||
circle: {
|
||||
...portStyle
|
||||
}
|
||||
}
|
||||
}, left: {
|
||||
position: 'left', attrs: {
|
||||
circle: {
|
||||
...portStyle
|
||||
}
|
||||
}
|
||||
}, absolute: {
|
||||
position: 'absolute',
|
||||
attrs: {
|
||||
circle: {
|
||||
r: 6, magnet: true, stroke: '#008CFF', strokeWidth: 2, fill: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}, // 链接桩
|
||||
items: [{
|
||||
group: 'top'
|
||||
}, {
|
||||
group: 'right'
|
||||
}, {
|
||||
group: 'bottom'
|
||||
}, {
|
||||
group: 'left'
|
||||
}]
|
||||
}
|
||||
// 动态计算宽高比
|
||||
export const transformToPercent = (target:number, sum:number, font=12) => {
|
||||
//@ts-ignore 相对节点的大小
|
||||
const percent = (target / sum).toFixed(2) * 100
|
||||
return `${percent}${font ? 'px' : '%'}`
|
||||
}
|
||||
|
||||
|
||||
export const predefineColors = [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
|
||||
export const ShapeType = {
|
||||
'vueTextCell': 'vue-node_text_cell',
|
||||
'vueLineCell': 'vue-node_line_cell',
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
|
||||
|
||||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
|
||||
|
||||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
|
||||
|
||||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
}
|
||||
small {
|
||||
font-size: .66666667em;
|
||||
}
|
||||
a {
|
||||
color: #e74c3c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
box-shadow: 0 1px #e74c3c;
|
||||
}
|
||||
.bshadow0, input {
|
||||
box-shadow: inset 0 -2px #e7e7e7;
|
||||
}
|
||||
input:hover {
|
||||
box-shadow: inset 0 -2px #ccc;
|
||||
}
|
||||
input, fieldset {
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input {
|
||||
color: inherit;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
padding: .25em 0;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 -2px #449fdb;
|
||||
}
|
||||
.glyph {
|
||||
font-size: 16px;
|
||||
width: 15em;
|
||||
padding-bottom: 1em;
|
||||
margin-right: 4em;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.liga {
|
||||
width: 80%;
|
||||
width: calc(100% - 2.5em);
|
||||
}
|
||||
.talign-right {
|
||||
text-align: right;
|
||||
}
|
||||
.talign-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bgc1 {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.fgc1 {
|
||||
color: #999;
|
||||
}
|
||||
.fgc0 {
|
||||
color: #000;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.mvm {
|
||||
margin-top: .75em;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
.mtn {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mtl, .mal {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.mbl, .mal {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.mal, .mhl {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.mhmm {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.mls {
|
||||
margin-left: .25em;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
.pbs, .pvs {
|
||||
padding-bottom: .25em;
|
||||
}
|
||||
.pvs, .pts {
|
||||
padding-top: .25em;
|
||||
}
|
||||
.unit {
|
||||
float: left;
|
||||
}
|
||||
.unitRight {
|
||||
float: right;
|
||||
}
|
||||
.size1of2 {
|
||||
width: 50%;
|
||||
}
|
||||
.size1of1 {
|
||||
width: 100%;
|
||||
}
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.hidden-true {
|
||||
display: none;
|
||||
}
|
||||
.textbox0 {
|
||||
width: 3em;
|
||||
background: #f1f1f1;
|
||||
padding: .25em .5em;
|
||||
line-height: 1.5;
|
||||
height: 1.5em;
|
||||
}
|
||||
#testDrive {
|
||||
display: block;
|
||||
padding-top: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.fs0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
if (!('boxShadow' in document.body.style)) {
|
||||
document.body.setAttribute('class', 'noBoxShadow');
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", function(e) {
|
||||
var target = e.target;
|
||||
if (target.tagName === "INPUT" &&
|
||||
target.getAttribute('class').indexOf('liga') === -1) {
|
||||
target.select();
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
var fontSize = document.getElementById('fontSize'),
|
||||
testDrive = document.getElementById('testDrive'),
|
||||
testText = document.getElementById('testText');
|
||||
function updateTest() {
|
||||
testDrive.innerHTML = testText.value || String.fromCharCode(160);
|
||||
if (window.icomoonLiga) {
|
||||
window.icomoonLiga(testDrive);
|
||||
}
|
||||
}
|
||||
function updateSize() {
|
||||
testDrive.style.fontSize = fontSize.value + 'px';
|
||||
}
|
||||
fontSize.addEventListener('change', updateSize, false);
|
||||
testText.addEventListener('input', updateTest, false);
|
||||
testText.addEventListener('change', updateTest, false);
|
||||
updateSize();
|
||||
}());
|
||||
|
|
@ -0,0 +1,500 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>IcoMoon Demo</title>
|
||||
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="demo-files/demo.css">
|
||||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 33)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_layer_set"></span>
|
||||
<span class="mls"> icon-lk_layer_set</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e920" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_border_angle"></span>
|
||||
<span class="mls"> icon-lk_border_angle</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_line"></span>
|
||||
<span class="mls"> icon-lk_line</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_text"></span>
|
||||
<span class="mls"> icon-lk_text</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_warning_tips"></span>
|
||||
<span class="mls"> icon-lk_warning_tips</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91c" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_data_output"></span>
|
||||
<span class="mls"> icon-lk_data_output</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e919" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_data_input"></span>
|
||||
<span class="mls"> icon-lk_data_input</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_start"></span>
|
||||
<span class="mls"> icon-lk_start</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e91b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_step_flow"></span>
|
||||
<span class="mls"> icon-lk_step_flow</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e918" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_success"></span>
|
||||
<span class="mls"> icon-lk_success</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e915" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_failed"></span>
|
||||
<span class="mls"> icon-lk_failed</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e916" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_running"></span>
|
||||
<span class="mls"> icon-lk_running</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e917" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_align_horizontal"></span>
|
||||
<span class="mls"> icon-lk_align_horizontal</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e900" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_align_vertical"></span>
|
||||
<span class="mls"> icon-lk_align_vertical</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e901" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_close_x"></span>
|
||||
<span class="mls"> icon-lk_close_x</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e902" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_color_eyedropper_tool"></span>
|
||||
<span class="mls"> icon-lk_color_eyedropper_tool</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e903" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_color_fill"></span>
|
||||
<span class="mls"> icon-lk_color_fill</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e904" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_down"></span>
|
||||
<span class="mls"> icon-lk_down</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e905" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_file_template"></span>
|
||||
<span class="mls"> icon-lk_file_template</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e906" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_font_bold"></span>
|
||||
<span class="mls"> icon-lk_font_bold</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e907" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_font_color"></span>
|
||||
<span class="mls"> icon-lk_font_color</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e908" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_font_italic"></span>
|
||||
<span class="mls"> icon-lk_font_italic</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e909" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_icon_config"></span>
|
||||
<span class="mls"> icon-lk_icon_config</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90a" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_minimap"></span>
|
||||
<span class="mls"> icon-lk_minimap</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90b" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_open"></span>
|
||||
<span class="mls"> icon-lk_open</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90c" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_plus_copy"></span>
|
||||
<span class="mls"> icon-lk_plus_copy</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90d" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_recover"></span>
|
||||
<span class="mls"> icon-lk_recover</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_save"></span>
|
||||
<span class="mls"> icon-lk_save</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_tips"></span>
|
||||
<span class="mls"> icon-lk_tips</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e910" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_to_center"></span>
|
||||
<span class="mls"> icon-lk_to_center</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e911" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_undo"></span>
|
||||
<span class="mls"> icon-lk_undo</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e912" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_zoom_in"></span>
|
||||
<span class="mls"> icon-lk_zoom_in</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e913" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs1">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-lk_zoom_out"></span>
|
||||
<span class="mls"> icon-lk_zoom_out</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e914" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--[if gt IE 8]><!-->
|
||||
<div class="mhl clearfix mbl">
|
||||
<h1>Font Test Drive</h1>
|
||||
<label>
|
||||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
|
||||
min="8" value="48" />
|
||||
px
|
||||
</label>
|
||||
<input id="testText" type="text" class="phl size1of1 mvl"
|
||||
placeholder="Type some text to test..." value=""/>
|
||||
<div id="testDrive" class="icon-" style="font-family: icomoon">
|
||||
</div>
|
||||
</div>
|
||||
<!--<![endif]-->
|
||||
<div class="bgc1 clearfix">
|
||||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||
</div>
|
||||
|
||||
<script src="demo-files/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="lk_align_horizontal" d="M146.286 45.714h-73.143v804.571h73.143zM950.857 630.857h-731.429v219.429h731.429zM804.571 338.286h-585.143v219.429h585.143zM950.857 45.678h-731.429v219.429h731.429z" />
|
||||
<glyph unicode="" glyph-name="lk_align_vertical" d="M914.286 82.286v-73.143h-804.571v73.143zM329.143 886.857v-731.429h-219.429v731.429zM621.714 740.571v-585.509h-219.429v585.509zM914.286 886.857v-731.429h-219.429v731.429z" />
|
||||
<glyph unicode="" glyph-name="lk_close_x" d="M563.8 448l262.5 312.9c4.4 5.2 0.7 13.1-6.1 13.1h-79.8c-4.7 0-9.2-2.1-12.3-5.7l-216.5-258.1-216.5 258.1c-3 3.6-7.5 5.7-12.3 5.7h-79.8c-6.8 0-10.5-7.9-6.1-13.1l262.5-312.9-262.5-312.9c-4.4-5.2-0.7-13.1 6.1-13.1h79.8c4.7 0 9.2 2.1 12.3 5.7l216.5 258.1 216.5-258.1c3-3.6 7.5-5.7 12.3-5.7h79.8c6.8 0 10.5 7.9 6.1 13.1l-262.5 312.9z" />
|
||||
<glyph unicode="" glyph-name="lk_color_eyedropper_tool" d="M994.763 868.259l-62.057 62.057c-18.325 18.314-43.634 29.64-71.589 29.64s-53.264-11.326-71.59-29.641l-144.073-144.073-69.542 69.67-137.804-137.868 57.386-57.322-393.26-393.324c-24.361-24.322-40.077-57.297-42.143-93.921l-0.017-0.379-22.903-22.839c-22.723-22.715-36.778-54.099-36.778-88.767 0-69.319 56.194-125.512 125.512-125.512 34.651 0 66.023 14.042 88.735 36.746v0l22.903 22.967c37.012 1.982 70.012 17.695 94.295 42.091l393.265 393.265 57.386-57.322 137.74 137.676-69.606 69.67 144.074 143.946c18.367 18.324 29.731 43.662 29.731 71.653s-11.363 53.329-29.729 71.651l-0.002 0.002zM268.188 101.443c-9.913-9.927-23.615-16.068-38.752-16.068-8.713 0-16.951 2.035-24.264 5.655l0.32-0.143-54.507-54.444c-6.338-5.969-14.901-9.638-24.321-9.638-19.61 0-35.507 15.897-35.507 35.507 0 9.404 3.656 17.954 9.624 24.307l-0.017-0.019 54.38 54.571c-3.464 6.982-5.491 15.205-5.491 23.902 0 15.158 6.158 28.878 16.11 38.793l393.262 393.262 102.361-102.489-393.196-393.196z" />
|
||||
<glyph unicode="" glyph-name="lk_color_fill" d="M877.158 320.614s-70.246-97.28-70.246-137.421c0-40.141 31.539-72.499 70.451-72.499s70.246 32.563 70.246 72.704c-0.205 39.731-70.451 137.216-70.451 137.216zM852.378 423.834l-352.87 364.339c-0.819 0.819-1.638 1.638-2.662 2.458l-105.472 108.954c-12.083 12.288-31.539 12.288-43.418 0-12.083-12.288-12.083-32.563 0-44.851l79.053-81.51-338.534-349.389c-15.974-16.589-15.974-43.213 0-59.802l353.075-364.544c7.987-8.192 18.432-12.288 28.877-12.288s20.89 4.096 28.877 12.288l353.075 364.544c15.974 16.384 15.974 43.213 0 59.802zM587.776 606.925l165.478-170.598h-565.658l282.624 291.84 117.555-121.242z" />
|
||||
<glyph unicode="" glyph-name="lk_down" d="M792.832 474.144c-12.512 12.544-32.8 12.48-45.248 0.032l-203.584-203.168v560.992c0 17.664-14.336 32-32 32s-32-14.336-32-32v-563.040l-234.048 235.456c-12.48 12.576-32.704 12.64-45.248 0.128-12.544-12.448-12.608-32.704-0.128-45.248l287.52-289.248c3.168-3.2 6.88-5.536 10.816-7.136 4-1.792 8.384-2.912 13.088-2.912 11.296 0 20.704 6.176 26.4 14.976l254.368 253.952c12.544 12.448 12.544 32.704 0.064 45.216zM864 32h-704c-17.664 0-32 14.304-32 32s14.336 32 32 32h704c17.696 0 32-14.304 32-32s-14.304-32-32-32z" />
|
||||
<glyph unicode="" glyph-name="lk_file_template" d="M682.667 960c0.001 0 0.002 0 0.004 0 9.802 0 18.833-3.306 26.037-8.863l-0.099 0.074 4.267-3.712 207.061-207.061c10.127-10.128 16.875-23.634 18.41-38.683l0.022-0.271 0.299-6.315v-332.501c-0.027-23.544-19.119-42.619-42.667-42.619-21.788 0-39.762 16.332-42.347 37.421l-0.021 0.206-0.299 4.992v323.669l-188.373 188.331h-494.293v-853.333h341.333c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992c-0.003-21.803-16.359-39.784-37.47-42.348l-0.205-0.020-4.992-0.299h-362.667c-33.181 0.002-60.464 25.254-63.68 57.59l-0.021 0.266-0.299 6.144v896c0.002 33.181 25.254 60.464 57.59 63.68l0.266 0.021 6.144 0.299h533.333zM640 960c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992v-213.333h213.333c21.803-0.003 39.784-16.359 42.348-37.47l0.020-0.205 0.299-4.992c-0.003-21.803-16.359-39.784-37.47-42.348l-0.205-0.020-4.992-0.299h-234.667c-33.181 0.002-60.464 25.254-63.68 57.59l-0.021 0.266-0.299 6.144v234.667c0 23.564 19.103 42.667 42.667 42.667v0zM951.168 264.832c7.716 7.691 18.362 12.446 30.119 12.446 23.564 0 42.667-19.103 42.667-42.667 0-9.874-3.354-18.964-8.985-26.194l0.072 0.096-3.541-4.011-240.896-240.939c-11.583-11.591-27.59-18.761-45.271-18.761-15.375 0-29.483 5.421-40.518 14.456l0.114-0.090-4.864 4.395-112.896 112.939c-7.691 7.716-12.446 18.362-12.446 30.119 0 23.564 19.103 42.667 42.667 42.667 9.874 0 18.964-3.354 26.194-8.985l-0.096 0.072 4.011-3.541 97.835-97.792 225.835 225.792zM341.333 618.667h128q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-128q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667zM341.333 448h341.333q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-341.333q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667zM341.333 277.333h128q42.667 0 42.667-42.667v0q0-42.667-42.667-42.667h-128q-42.667 0-42.667 42.667v0q0 42.667 42.667 42.667z" />
|
||||
<glyph unicode="" glyph-name="lk_font_bold" d="M517.292-63.395c6.424-0.385 13.937-0.604 21.5-0.604 90.201 0 173.113 31.206 238.53 83.411l-0.77-0.593c58.416 51.248 95.095 126.048 95.095 209.415 0 4.236-0.095 8.45-0.282 12.64l0.021-0.596c0.069 2.107 0.108 4.584 0.108 7.071 0 61.379-23.975 117.159-63.071 158.485l0.101-0.107c-42.717 43.621-100.156 72.677-164.265 79.117l-1.123 0.091v2.885c54.371 15.469 100.409 45.592 135.035 85.818l0.304 0.361c33.38 38.018 53.745 88.18 53.745 143.098 0 0.991-0.007 1.981-0.020 2.969l0.002-0.15c0.104 2.448 0.164 5.32 0.164 8.206 0 68.946-33.968 129.959-86.082 167.216l-0.623 0.423c-62.586 40.262-139 64.185-221.002 64.185-8.935 0-17.804-0.284-26.598-0.844l1.201 0.061h-348.084v-1022.558h366.114zM436.702 777.969q194.776 0 194.776-111.421c0.045-1.166 0.070-2.534 0.070-3.909 0-37.706-19.227-70.921-48.412-90.376l-0.397-0.249c-34.366-21.421-76.091-34.121-120.782-34.121-4.444 0-8.86 0.126-13.242 0.373l0.608-0.027h-117.551v239.729h104.99zM456.834 357.287c4.131 0.264 8.957 0.414 13.818 0.414 42.434 0 82.195-11.444 116.365-31.414l-1.094 0.591c27.575-17.492 45.613-47.857 45.613-82.435 0-1.19-0.021-2.375-0.064-3.555l0.005 0.171c0.044-1.137 0.069-2.471 0.069-3.811 0-35.923-17.99-67.645-45.453-86.646l-0.35-0.229c-32.469-20.732-72.057-33.044-114.521-33.044-4.322 0-8.614 0.128-12.872 0.379l0.587-0.028h-127.226v239.428h125.183z" />
|
||||
<glyph unicode="" glyph-name="lk_font_color" d="M413 322.5c-81.9-4.6-118.8 10.2-110.6 44.4 0 13.7 6.8 35.3 20.5 64.9 13.6 27.3 23.1 47.8 28.6 61.5h245.8c38.2-72.9 58.7-119.5 61.5-140 8.2-25.1-20.5-35.3-86-30.7v-30.7h295v30.7c-57.4-6.8-97 20.5-118.8 81.9l-229.4 491.6h-36.9l-213-481.4c-19.1-66-62.8-96.8-131.1-92.2v-30.7h274.4v30.7zM470.4 759.5l110.6-228.8h-217.1l106.5 228.8zM872.5 194.7h-728c-10.1 0-18.2-8.1-18.2-18.2v-157.8c0-10 8.1-18.2 18.2-18.2h728c10.1 0 18.2 8.2 18.2 18.2v157.8c0 10-8.2 18.2-18.2 18.2z" />
|
||||
<glyph unicode="" glyph-name="lk_font_italic" d="M832 864v-64c0-17.673-14.327-32-32-32v0h-125.52l-160-640h93.52c17.673 0 32-14.327 32-32v0-64c0-17.673-14.327-32-32-32v0h-384c-17.673 0-32 14.327-32 32v0 64c0 17.673 14.327 32 32 32v0h125.52l160 640h-93.52c-17.673 0-32 14.327-32 32v0 64c0 17.673 14.327 32 32 32v0h384c17.673 0 32-14.327 32-32v0z" />
|
||||
<glyph unicode="" glyph-name="lk_icon_config" d="M117.333 618.667c0 17.673 14.327 32 32 32v0h426.667c17.673 0 32-14.327 32-32s-14.327-32-32-32v0h-426.667c-17.673 0-32 14.327-32 32v0zM768 554.667c-35.346 0-64 28.654-64 64s28.654 64 64 64v0c35.346 0 64-28.654 64-64s-28.654-64-64-64v0zM768 490.667c70.692 0 128 57.308 128 128s-57.308 128-128 128v0c-70.692 0-128-57.308-128-128s57.308-128 128-128v0zM928 277.333c0 17.673-14.327 32-32 32v0h-426.667c-17.673 0-32-14.327-32-32s14.327-32 32-32v0h426.667c17.673 0 32 14.327 32 32v0zM256 213.333c35.346 0 64 28.654 64 64s-28.654 64-64 64v0c-35.346 0-64-28.654-64-64s28.654-64 64-64v0zM256 149.333c-70.692 0-128 57.308-128 128s57.308 128 128 128v0c70.692 0 128-57.308 128-128s-57.308-128-128-128v0z" />
|
||||
<glyph unicode="" glyph-name="lk_minimap" horiz-adv-x="1102" d="M1038.494 960c35.446 0 64.276-28.751 64.276-64.276v-377.935h-85.622v356.588h-931.525v-824.399h349.184v-85.701h-370.53c-35.498 0-64.276 28.777-64.276 64.276v867.249c0 35.367 28.751 64.197 64.276 64.197zM1043.85 395.225c32.532 0 58.919-26.388 58.919-58.841v-310.508c0-32.54-26.379-58.919-58.919-58.919h-422.912c-32.506 0.045-58.841 26.407-58.841 58.919 0 0 0 0 0 0v0 310.508c0 32.453 26.388 58.841 58.841 58.841zM1017.068 309.602h-369.27v-256.945h369.428v256.945zM252.455 767.409l128.788-128.709 116.972 116.972v-294.439h-294.518l116.815 116.972-128.63 128.551 60.495 60.652z" />
|
||||
<glyph unicode="" glyph-name="lk_open" d="M0 896h404.288l107.072-134.4h512.64v-761.6h-1024v896zM82.432 704.448v-89.792h282.88l106.56-134.976h471.168v90.56h-430.4l-108.416 134.208h-321.792z" />
|
||||
<glyph unicode="" glyph-name="lk_plus_copy" d="M853.333 736h-53.333v53.333c0 40.533-34.133 74.667-74.667 74.667h-554.667c-40.533 0-74.667-34.133-74.667-74.667v-554.667c0-40.533 34.133-74.667 74.667-74.667h53.333v-53.333c0-40.533 34.133-74.667 74.667-74.667h554.667c40.533 0 74.667 34.133 74.667 74.667v554.667c0 40.533-34.133 74.667-74.667 74.667zM160 234.667v554.667c0 6.4 4.267 10.667 10.667 10.667h554.667c6.4 0 10.667-4.267 10.667-10.667v-554.667c0-6.4-4.267-10.667-10.667-10.667h-554.667c-6.4 0-10.667 4.267-10.667 10.667zM864 106.667c0-6.4-4.267-10.667-10.667-10.667h-554.667c-6.4 0-10.667 4.267-10.667 10.667v53.333h437.333c40.533 0 74.667 34.133 74.667 74.667v437.333h53.333c6.4 0 10.667-4.267 10.667-10.667v-554.667zM576 544h-96v96c0 17.067-14.933 32-32 32s-32-14.933-32-32v-96h-96c-17.067 0-32-14.933-32-32s14.933-32 32-32h96v-96c0-17.067 14.933-32 32-32s32 14.933 32 32v96h96c17.067 0 32 14.933 32 32s-14.933 32-32 32z" />
|
||||
<glyph unicode="" glyph-name="lk_recover" d="M604.27 452.14l0.14 335.98 0.070 166.020c0 4.3 5.18 6.47 8.24 3.46l353.94-347.4c5.27-5.18 5.3-13.67 0.050-18.87l-354.27-351.36c-3.060-3.030-8.26-0.87-8.26 3.44l0.090 208.73zM53.94 369.080c8.74 157.92 87.43 274.43 253.54 339.15 87.43 33.66 177.77 46.61 271.030 49.19 13.47 0 21.33 1.67 25.9 5.5l-0.14-298.21c-3.68 2.21-9.17 2.74-17.010 2.74-49.54-2.59-99.090-2.59-148.63-15.54-99.090-23.3-177.77-72.49-206.91-168.28-37.89-126.86 5.83-264.070 148.63-341.74 0-7.77-5.83-5.18-20.4 0-5.83 0-8.74 2.59-11.66 2.59-171.59 60.5-289.71 215.96-294.92 388.2v23.43c0.12 4.32 0.3 8.64 0.57 12.97z" />
|
||||
<glyph unicode="" glyph-name="lk_save" d="M798.293 959.999h-712.959c-47.128 0-85.333-38.205-85.333-85.333v0-853.333c0-47.128 38.205-85.333 85.333-85.333v0h853.333c47.128 0 85.333 38.205 85.333 85.333v0 712.959c0 0.073 0.001 0.16 0.001 0.247 0 11.721-4.726 22.338-12.377 30.049l-183.037 183.037c-7.709 7.648-18.326 12.374-30.047 12.374-0.087 0-0.173 0-0.26-0.001h0.013zM213.333 883.199h597.333v-179.2c0-23.564-19.103-42.667-42.667-42.667v0h-512c-23.564 0-42.667 19.103-42.667 42.667v0zM875.519 12.8h-725.333v409.6c0 23.564 19.103 42.667 42.667 42.667v0h639.999c23.564 0 42.667-19.103 42.667-42.667v0zM633.599 834.133h76.8v-131.84h-76.8z" />
|
||||
<glyph unicode="" glyph-name="lk_tips" d="M512-64c-282.77 0-512 229.23-512 512s229.23 512 512 512v0c282.77 0 512-229.23 512-512s-229.23-512-512-512v0zM466.347 207.445c10.198-9.577 23.962-15.461 39.101-15.461 0.474 0 0.946 0.006 1.417 0.017l-0.070-0.001c0.289-0.005 0.631-0.007 0.973-0.007 15.608 0 29.913 5.58 41.028 14.853l-0.102-0.083c10.147 9.37 16.48 22.742 16.48 37.592 0 0.374-0.004 0.747-0.012 1.119l0.001-0.056c0.003 0.215 0.005 0.47 0.005 0.725 0 14.743-6.337 28.005-16.435 37.213l-0.040 0.036c-10.533 9.198-24.407 14.807-39.59 14.807-0.812 0-1.62-0.016-2.424-0.048l0.116 0.004c-0.691 0.030-1.502 0.048-2.317 0.048-14.717 0-28.119-5.627-38.172-14.848l0.042 0.038c-10.524-8.594-17.19-21.57-17.19-36.102 0-0.658 0.014-1.313 0.041-1.964l-0.003 0.093c0-15.872 5.717-28.587 17.152-37.973zM638.464 666.624c-29.44 24.832-68.864 37.291-118.187 37.291-54.869 0-98.56-14.763-130.987-44.288-32.427-29.099-48.555-69.888-48.555-122.368h85.248c0 30.464 6.229 53.675 18.688 69.632 14.933 18.773 38.4 28.16 70.315 28.16 25.941 0 45.909-6.571 59.904-19.712 12.972-13.427 20.965-31.736 20.965-51.912 0-1.040-0.021-2.075-0.063-3.105l0.005 0.148c-0.309-19.363-7.95-36.883-20.259-49.958l0.035 0.038-8.96-9.813c-48.896-40.789-78.080-70.571-87.552-89.344-9.984-18.261-14.933-41.216-14.933-68.864v-9.899h86.016v9.899c0 16.811 3.755 32.341 11.264 46.336 7.424 13.653 17.408 25.088 29.952 34.475 34.901 28.587 56.32 47.104 64.256 55.552 18.517 22.955 27.733 51.797 27.733 86.528 0 43.093-14.933 76.885-44.885 101.205z" />
|
||||
<glyph unicode="" glyph-name="lk_to_center" d="M213.333 320h-85.333v-170.667c0-46.933 38.4-85.333 85.333-85.333h170.667v85.333h-170.667v170.667zM213.333 746.667h170.667v85.333h-170.667c-46.933 0-85.333-38.4-85.333-85.333v-170.667h85.333v170.667zM810.667 832h-170.667v-85.333h170.667v-170.667h85.333v170.667c0 46.933-38.4 85.333-85.333 85.333zM810.667 149.333h-170.667v-85.333h170.667c46.933 0 85.333 38.4 85.333 85.333v170.667h-85.333v-170.667zM512 576c-70.827 0-128-57.173-128-128s57.173-128 128-128 128 57.173 128 128-57.173 128-128 128z" />
|
||||
<glyph unicode="" glyph-name="lk_undo" d="M761.856-64c113.728 206.048 132.896 520.32-313.856 509.824v-253.824l-384 384 384 384v-248.384c534.976 13.952 594.56-472.224 313.856-775.616z" />
|
||||
<glyph unicode="" glyph-name="lk_zoom_in" d="M637 517h-118v134c0 4.4-3.6 8-8 8h-60c-4.4 0-8-3.6-8-8v-134h-118c-4.4 0-8-3.6-8-8v-60c0-4.4 3.6-8 8-8h118v-134c0-4.4 3.6-8 8-8h60c4.4 0 8 3.6 8 8v134h118c4.4 0 8 3.6 8 8v60c0 4.4-3.6 8-8 8zM921 93l-146 146c122.1 148.9 113.6 369.5-26 509-148 148.1-388.4 148.1-537 0-148.1-148.6-148.1-389 0-537 139.5-139.6 360.1-148.1 509-26l146-146c3.2-2.8 8.3-2.8 11 0l43 43c2.8 2.7 2.8 7.8 0 11zM696 264c-118.8-118.7-311.2-118.7-430 0-118.7 118.8-118.7 311.2 0 430 118.8 118.7 311.2 118.7 430 0 118.7-118.8 118.7-311.2 0-430z" />
|
||||
<glyph unicode="" glyph-name="lk_zoom_out" d="M637 517h-312c-4.4 0-8-3.6-8-8v-60c0-4.4 3.6-8 8-8h312c4.4 0 8 3.6 8 8v60c0 4.4-3.6 8-8 8zM921 93l-146 146c122.1 148.9 113.6 369.5-26 509-148 148.1-388.4 148.1-537 0-148.1-148.6-148.1-389 0-537 139.5-139.6 360.1-148.1 509-26l146-146c3.2-2.8 8.3-2.8 11 0l43 43c2.8 2.7 2.8 7.8 0 11zM696 264c-118.8-118.7-311.2-118.7-430 0-118.7 118.8-118.7 311.2 0 430 118.8 118.7 311.2 118.7 430 0 118.7-118.8 118.7-311.2 0-430z" />
|
||||
<glyph unicode="" glyph-name="lk_success" d="M512 885.333c-241.067 0-437.333-196.267-437.333-437.333s196.267-437.333 437.333-437.333 437.333 196.267 437.333 437.333-196.267 437.333-437.333 437.333zM512 74.667c-204.8 0-373.333 168.533-373.333 373.333s168.533 373.333 373.333 373.333 373.333-168.533 373.333-373.333-168.533-373.333-373.333-373.333zM701.867 578.133l-253.867-256-125.867 125.867c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8l149.333-149.333c6.4-6.4 14.933-8.533 23.467-8.533s17.067 2.133 23.467 8.533l277.333 277.333c12.8 12.8 12.8 32 0 44.8-14.933 12.8-36.267 12.8-49.067 2.133z" />
|
||||
<glyph unicode="" glyph-name="lk_failed" d="M924.78 623.2c-69.897 162.92-228.929 274.96-414.13 274.96-248.169 0-449.35-201.181-449.35-449.35s201.181-449.35 449.35-449.35c248.169 0 449.35 201.181 449.35 449.35v0c0 0.187 0 0.408 0 0.628 0 62.754-12.953 122.482-36.332 176.657l1.112-2.895zM875.050 295.45c-61.511-143.353-201.448-241.935-364.41-241.935-218.379 0-395.41 177.031-395.41 395.41s177.031 395.41 395.41 395.41c218.379 0 395.41-177.031 395.41-395.41 0-0.040 0-0.081 0-0.121v0.006c0-0.128 0-0.28 0-0.431 0-55.23-11.401-107.798-31.979-155.477l0.979 2.548zM671.090 607.090c-4.886 4.885-11.635 7.906-19.090 7.906s-14.204-3.021-19.090-7.906l-120.91-120.91-120.91 120.91c-4.858 4.727-11.499 7.642-18.822 7.642-14.912 0-27-12.088-27-27 0-7.323 2.915-13.964 7.648-18.828l120.904-120.904-120.91-120.91c-5.047-4.911-8.178-11.769-8.178-19.358 0-14.912 12.088-27 27-27 7.589 0 14.447 3.131 19.352 8.172l120.916 120.916 120.91-120.91c4.858-4.727 11.499-7.642 18.822-7.642 14.912 0 27 12.088 27 27 0 7.323-2.915 13.964-7.648 18.828l-120.904 120.904 120.91 120.91c4.885 4.886 7.906 11.635 7.906 19.090s-3.021 14.204-7.906 19.090v0z" />
|
||||
<glyph unicode="" glyph-name="lk_running" d="M166.671 455.831c2.086 92.486 40.292 175.66 101.011 236.299l0.004 0.004c62.232 62.512 148.354 101.196 243.511 101.196 0.261 0 0.522 0 0.783-0.001h-0.041c0.253 0.001 0.553 0.001 0.852 0.001 95.047 0 181.058-38.689 243.143-101.178l0.018-0.018c9.939-9.939 19.275-20.48 27.889-31.503l-60.416-47.164c-1.912-1.491-3.13-3.794-3.13-6.382 0-0.598 0.065-1.181 0.189-1.743l-0.010 0.053c0.674-3.011 2.973-5.351 5.908-6.072l0.055-0.011 176.369-43.189c0.561-0.139 1.206-0.219 1.869-0.219 4.408 0 7.99 3.533 8.070 7.922v0.007l0.843 181.609c0 0.005 0 0.011 0 0.017 0 4.425-3.587 8.011-8.011 8.011-1.871 0-3.593-0.642-4.956-1.717l0.017 0.013-56.621-44.273c-77.878 98.981-197.664 161.961-332.159 161.961-229.909 0-416.835-184.035-421.498-412.828l-0.007-0.435c-0.001-0.054-0.002-0.117-0.002-0.181 0-4.425 3.587-8.011 8.011-8.011 0.001 0 0.001 0 0.002 0h60.235c0.019 0 0.040 0 0.062 0 4.361 0 7.908 3.485 8.009 7.821v0.009zM925.636 448h-60.235c-0.019 0-0.040 0-0.062 0-4.361 0-7.908-3.485-8.009-7.821v-0.009c-1.945-92.511-40.185-175.728-101.003-236.291l-0.012-0.012c-62.259-62.513-148.405-101.196-243.586-101.196-0.214 0-0.427 0-0.641 0.001h0.033c-0.238-0.001-0.52-0.001-0.802-0.001-109.934 0-207.811 51.622-270.713 131.947l-0.567 0.752 60.416 47.164c1.919 1.479 3.143 3.778 3.143 6.362 0 3.766-2.598 6.924-6.1 7.782l-0.055 0.011-176.369 43.189c-0.561 0.139-1.206 0.219-1.869 0.219-4.408 0-7.99-3.533-8.070-7.922v-0.007l-0.723-181.73c0-6.746 7.77-10.541 12.951-6.325l56.621 44.273c77.865-99.043 197.68-162.070 332.215-162.070 229.957 0 416.905 184.138 421.442 413.008l0.007 0.424c0.003 0.086 0.005 0.187 0.005 0.289 0 3.307-2.019 6.143-4.892 7.341l-0.053 0.019c-0.901 0.381-1.949 0.602-3.048 0.602-0.009 0-0.017 0-0.026 0h0.001z" />
|
||||
<glyph unicode="" glyph-name="lk_step_flow" d="M562.176 548.864c0-13.824 11.264-25.088 25.088-25.088s25.088 11.264 25.088 25.088-11.264 25.088-25.088 25.088-25.088-11.264-25.088-25.088zM335.872 724.48c-13.824 0-25.088-11.264-25.088-25.088s11.264-25.088 25.088-25.088 25.088 11.264 25.088 25.088c0.512 13.824-10.752 25.088-25.088 25.088zM436.224 372.224c13.824 0 25.6 11.264 25.6 25.088s-11.264 25.6-25.088 25.6-25.6-11.264-25.6-25.088 11.264-25.088 25.088-25.6zM839.168 877.056h-654.336c-41.472 0-75.264-33.792-75.776-75.264v-707.584c0-41.472 33.792-75.264 75.776-75.264h527.872v176.128c0 13.824 11.264 25.088 25.088 25.088h176.128v581.632c0 41.472-33.28 75.264-74.752 75.264zM486.912 119.296h-201.216c-13.824 0-25.088 11.264-25.088 25.088s11.264 25.088 25.088 25.088h201.216c13.824 0 25.088-11.264 25.088-25.088s-11.264-25.088-25.088-25.088zM260.608 245.248c0 13.824 11.264 25.088 25.088 25.088h100.864c13.824-1.024 24.064-13.312 23.040-27.136-1.024-12.288-10.752-22.016-23.040-23.040h-100.864c-13.824-0.512-25.088 10.752-25.088 25.088zM360.96 422.912h4.608c13.824 38.912 56.32 59.904 95.744 46.080 21.504-7.68 38.4-24.576 46.080-46.080h169.984l-7.168 7.168c-9.728 9.728-9.728 25.6 0 35.84 9.728 9.728 25.6 9.728 35.84 0l50.176-49.664c9.728-9.728 9.728-25.6 0-35.84l-50.176-50.688c-9.728-9.728-25.6-9.728-35.84 0s-9.728 25.6 0 35.84l7.168 7.168h-169.984c-13.824-38.912-56.32-59.904-95.744-46.080-21.504 7.68-38.4 24.576-46.080 46.080h-4.608c-55.808 0-100.864 45.056-100.864 100.864s45.056 100.864 100.864 100.864h155.648c13.312 38.912 56.32 59.904 95.232 46.592 22.016-7.68 38.912-24.576 46.592-46.592h4.608c27.648-1.536 51.712 19.456 53.248 47.616 1.536 27.648-19.456 51.712-47.616 53.248h-261.632c-13.824-39.424-56.832-59.904-96.256-46.080s-59.904 56.832-46.080 96.256c13.824 39.424 56.832 59.904 96.256 46.080 21.504-7.68 38.4-24.576 46.080-46.080h256c55.296 2.048 102.4-40.96 104.448-96.768 2.048-55.296-40.96-102.4-96.768-104.448h-12.8c-13.312-38.912-56.32-59.904-95.232-46.592-22.016 7.68-38.912 24.576-46.592 46.592h-155.648c-27.648 1.536-51.712-19.456-53.248-47.616-1.536-27.648 19.456-51.712 47.616-53.248 2.56-0.512 4.608-0.512 6.144-0.512zM763.392 33.28l136.192 136.192h-136.192v-136.192z" />
|
||||
<glyph unicode="" glyph-name="lk_data_output" d="M379.611 694.126c16.238-16.311 43.081-16.311 59.392 0l31.451 31.451v-190.757c0-23.113 18.944-42.057 42.057-42.057 23.179 0.083 41.943 18.872 41.984 42.053v190.907l31.451-31.525c16.311-16.311 43.154-16.311 59.465 0 7.55 7.622 12.215 18.114 12.215 29.696s-4.665 22.074-12.219 29.699l-103.202 103.128c-7.622 7.55-18.114 12.215-29.696 12.215s-22.074-4.665-29.699-12.219l-103.202-103.202c-7.603-7.599-12.306-18.098-12.306-29.696s4.703-22.098 12.305-29.696v0zM897.17 810.057h-240.274l48.64-48.64h184.832v-477.038h-755.931v477.038h183.954l48.64 48.567h-239.177c-26.925-0.083-48.735-21.867-48.859-48.774v-541.489c0-26.843 21.943-48.859 48.786-48.859h256.805v-72.85l-55.003-55.003s-5.998-11.995 8.997-11.995h347.794c14.994 0 8.997 11.995 8.997 11.995l-55.003 55.003v72.85h256.805c26.951 0.083 48.777 21.909 48.859 48.851v541.485c-0.124 26.919-21.934 48.704-48.851 48.786h-0.008z" />
|
||||
<glyph unicode="" glyph-name="lk_data_input" d="M379.6 667.7c-16.3-16.3-16.3-43.1 0-59.4l103.2-103.2c16.3-16.3 43.1-16.3 59.4 0l103.2 103.2c16.3 16.3 16.3 43.1 0 59.4s-43.1 16.3-59.4 0l-31.5-31.5v190.8c0 23.1-18.9 42-42 42s-42-18.9-42-42v-190.8l-31.5 31.5c-16.4 16.3-43.1 16.3-59.4 0zM897.2 810h-293.2v-48.6h286.5v-477h-756v477h286.5v48.6h-293.2c-26.8 0-48.8-22-48.8-48.8v-541.5c0-26.8 22-48.8 48.8-48.8h256.8v-72.9l-55-55s-6-12 9-12h347.8c15 0 9 12 9 12l-55 55v72.9h256.8c26.8 0 48.8 22 48.8 48.8v541.5c0 26.8-22 48.8-48.8 48.8z" />
|
||||
<glyph unicode="" glyph-name="lk_start" d="M924.059 493.195c-1.883 38.202-23.717 72.597-57.491 90.555l-607.086 325.411c-33.877 18.193-74.843 17.13-107.73-2.797-33.222-19.646-53.366-55.597-52.778-94.19l4.364-729.352c-0.059-40.136 22.209-76.97 57.772-95.579 14.543-8.045 31.886-12.78 50.334-12.78 0.198 0 0.396 0.001 0.594 0.002h-0.030c22.852 0.093 44.045 7.12 61.604 19.084l-0.382-0.246 602.849 404.131c31.703 21.278 49.913 57.631 47.979 95.763zM177.079 33.548l1.346 832.289 692.623-371.223-693.969-461.066z" />
|
||||
<glyph unicode="" glyph-name="lk_warning_tips" d="M460.8 294.4h102.4v-102.4h-102.4v102.4zM460.8 704h102.4v-307.2h-102.4v307.2zM511.488 960c-282.624 0-511.488-229.376-511.488-512s228.864-512 511.488-512c283.136 0 512.512 229.376 512.512 512s-229.376 512-512.512 512zM512 38.4c-226.304 0-409.6 183.296-409.6 409.6s183.296 409.6 409.6 409.6 409.6-183.296 409.6-409.6-183.296-409.6-409.6-409.6z" />
|
||||
<glyph unicode="" glyph-name="lk_text" d="M724.038 661.145h-424.077c-4.962 0-8.987-4.026-8.987-8.987v-141.376c0-2.434 0.986-4.763 2.732-6.458 1.746-1.689 4.109-2.56 6.54-2.526l18.751 0.59c4.423 0.143 8.081 3.479 8.634 7.871 5.911 47.374 45.467 80.044 65.949 85.028 6.049 1.48 14.476 2.224 25.053 2.224 12.941 0 26.145-1.147 34.21-2.004-0.091-50.063-0.581-317.876-0.581-336.347 0-11.676-16.415-18.719-20.795-20.388l-36.029-0.57c-4.828-0.082-8.732-3.953-8.845-8.78l-0.59-25.817c-0.056-2.418 0.867-4.758 2.555-6.484 1.691-1.737 4.010-2.712 6.428-2.712h234.059c4.962 0 8.988 4.028 8.988 8.988v25.187c0 4.963-4.027 8.988-8.988 8.988h-42.369c-10.383 1.199-19.057 13.291-22.532 19.6l0.513 341.292c4.22 0.375 10.123 0.737 17.359 0.737 14.281 0 28.964-1.346 43.645-3.996 30.609-5.527 61.849-66.544 71.302-89.584 1.385-3.376 4.669-5.583 8.321-5.583h18.751c4.962 0 8.987 4.027 8.987 8.989v143.128c0.004 4.966-4.023 8.991-8.984 8.991v0zM847.029 894.71h-670.063c-61.677 0-111.675-50.004-111.675-111.675v-687.47c8.415-53.352 55.962-94.274 111.675-94.274h670.068c61.676 0 111.675 50.004 111.675 111.676v670.068c-0.001 61.668-50 111.675-111.681 111.675v0zM847.033 168.806c0-30.843-24.998-55.84-55.84-55.84l-558.387 0.004c-30.838 0-55.84 24.999-55.84 55.84v0 558.383c0 30.838 24.998 55.841 55.84 55.841h558.387c30.838 0 55.84-24.998 55.84-55.841v0-558.387z" />
|
||||
<glyph unicode="" glyph-name="lk_line" horiz-adv-x="1025" d="M1024.003 876.851l-940.851-940.851-83.149 83.149 940.851 940.851 83.149-83.149z" />
|
||||
<glyph unicode="" glyph-name="lk_border_angle" d="M340.821 960c-188.192-0.097-340.724-152.63-340.821-340.812v-683.188h341.504v682.667h682.496v341.333h-683.179z" />
|
||||
<glyph unicode="" glyph-name="lk_layer_set" d="M938.633 389.784l-383.961-172.585c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.585c-20.383 10.827-25.879 50.887-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.131l392.179-180.788 392.192 180.788c0.662 0.166 35.629 17.786 60.32 30.131 0-22.369-6.933-63.908-25.879-72.746zM938.633 570.587l-383.961-172.599c-36.762-15.991-51.4-15.991-85.33 0l-383.976 172.599c-30.16 16.005-29.222 66.407 0 85.229l383.976 202.73c33.93 16.944 55.155 17.882 85.33 0l383.961-202.73c29.221-16.005 28.255-72.042 0-85.229zM511.999 824.135l-392.179-210.933 392.179-165.253 392.193 165.253-392.193 210.933zM511.999 70.797l392.192 180.815c0.662 0.166 35.629 17.786 60.32 30.13 0-22.369-6.932-63.908-25.879-72.746l-383.96-172.612c-36.762-15.99-51.4-15.99-85.33 0l-383.976 172.613c-20.383 10.827-25.879 50.873-25.879 72.746 25.631-14.637 61.674-30.959 60.335-30.13l392.178-180.816z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,126 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?thc33j');
|
||||
src: url('fonts/icomoon.eot?thc33j#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?thc33j') format('truetype'),
|
||||
url('fonts/icomoon.woff?thc33j') format('woff'),
|
||||
url('fonts/icomoon.svg?thc33j#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-lk_layer_set:before {
|
||||
content: "\e920";
|
||||
}
|
||||
.icon-lk_border_angle:before {
|
||||
content: "\e91f";
|
||||
}
|
||||
.icon-lk_line:before {
|
||||
content: "\e91e";
|
||||
}
|
||||
.icon-lk_text:before {
|
||||
content: "\e91d";
|
||||
}
|
||||
.icon-lk_warning_tips:before {
|
||||
content: "\e91c";
|
||||
}
|
||||
.icon-lk_data_output:before {
|
||||
content: "\e919";
|
||||
}
|
||||
.icon-lk_data_input:before {
|
||||
content: "\e91a";
|
||||
}
|
||||
.icon-lk_start:before {
|
||||
content: "\e91b";
|
||||
}
|
||||
.icon-lk_step_flow:before {
|
||||
content: "\e918";
|
||||
}
|
||||
.icon-lk_success:before {
|
||||
content: "\e915";
|
||||
}
|
||||
.icon-lk_failed:before {
|
||||
content: "\e916";
|
||||
}
|
||||
.icon-lk_running:before {
|
||||
content: "\e917";
|
||||
}
|
||||
.icon-lk_align_horizontal:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-lk_align_vertical:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-lk_close_x:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-lk_color_eyedropper_tool:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-lk_color_fill:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-lk_down:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-lk_file_template:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-lk_font_bold:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.icon-lk_font_color:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-lk_font_italic:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-lk_icon_config:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-lk_minimap:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-lk_open:before {
|
||||
content: "\e90c";
|
||||
}
|
||||
.icon-lk_plus_copy:before {
|
||||
content: "\e90d";
|
||||
}
|
||||
.icon-lk_recover:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.icon-lk_save:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon-lk_tips:before {
|
||||
content: "\e910";
|
||||
}
|
||||
.icon-lk_to_center:before {
|
||||
content: "\e911";
|
||||
}
|
||||
.icon-lk_undo:before {
|
||||
content: "\e912";
|
||||
}
|
||||
.icon-lk_zoom_in:before {
|
||||
content: "\e913";
|
||||
}
|
||||
.icon-lk_zoom_out:before {
|
||||
content: "\e914";
|
||||
}
|
||||
|
|
@ -0,0 +1,676 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<DraftDesignLayout ref="draftDesignLayoutRef" @on-add-node="onAddNode"
|
||||
@on-change-page-config="changePageConfig"
|
||||
@on-change-cell="onChangeCell"
|
||||
@change-zoom="changeZoom">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
:id="that.containerId"
|
||||
:class="['main-container']"
|
||||
:style="{
|
||||
'box-shadow': that.editState ? '0 0 10px 1px #eee;' : 'none',}">
|
||||
</div>
|
||||
<TeleportContainer/>
|
||||
</div>
|
||||
</div>
|
||||
</DraftDesignLayout>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts" name="DraftDesign">
|
||||
//图稿设计器 DraftDesign
|
||||
import {ElTabs, ElTabPane, ElCollapseItem, ElButton} from "element-plus";
|
||||
|
||||
import {Graph, DataUri} from '@antv/x6'
|
||||
import {Scroller} from '@antv/x6-plugin-scroller'
|
||||
import {Snapline} from '@antv/x6-plugin-snapline'
|
||||
import {Transform} from '@antv/x6-plugin-transform'
|
||||
import {Keyboard} from '@antv/x6-plugin-keyboard'
|
||||
import {History} from '@antv/x6-plugin-history'
|
||||
import {Selection} from '@antv/x6-plugin-selection'
|
||||
import {Dnd} from '@antv/x6-plugin-dnd'
|
||||
import {Export} from '@antv/x6-plugin-export'
|
||||
import {Clipboard} from '@antv/x6-plugin-clipboard'
|
||||
import {graphOptions, ports, ShapeType} from './config/index'
|
||||
import DraftDesignLibrary from './components/Library.vue'
|
||||
import NodePropConfig from './components/NodePropConfig.vue'
|
||||
import DraftDesignLayout from './components/layout/index.vue'
|
||||
import {provide, computed, watch, onMounted} from 'vue'
|
||||
import {
|
||||
nextId,
|
||||
getSafeValue,
|
||||
hexToRGBA,
|
||||
logInfo,
|
||||
mergeDeepObject
|
||||
} from "@/components/DraftDesign/utils/FuncUtil";
|
||||
import {useDebounceFn} from '@vueuse/core'
|
||||
import {ElMessageBox} from 'element-plus'
|
||||
import {register, getTeleport} from '@antv/x6-vue-shape'
|
||||
|
||||
import './icons/style.css'
|
||||
import PropConfigPanel from "@/components/DraftDesign/components/PropConfigPanel.vue";
|
||||
import {calcDpiFromSize} from "@/components/DraftDesign/utils/Dpi";
|
||||
import TextCellNode from "@/components/DraftDesign/components/node/TextCellNode.vue";
|
||||
import LineCellNode from "@/components/DraftDesign/components/node/LineCellNode.vue";
|
||||
|
||||
register({
|
||||
shape: ShapeType.vueTextCell,
|
||||
width: 80,
|
||||
height: 80,
|
||||
component: TextCellNode,
|
||||
})
|
||||
register({
|
||||
shape: ShapeType.vueLineCell,
|
||||
width: 80,
|
||||
height: 80,
|
||||
component: LineCellNode,
|
||||
})
|
||||
const TeleportContainer = defineComponent(getTeleport());
|
||||
|
||||
const {t} = useI18n() // 国际化
|
||||
let graph: Graph = null
|
||||
let history = null
|
||||
let dnd = null
|
||||
let selector = null
|
||||
let viewMode = false
|
||||
const propConfigRef = ref();
|
||||
const draftDesignLayoutRef = ref();
|
||||
const that = reactive({
|
||||
containerId: nextId(),
|
||||
editState: false,
|
||||
currentGraphZoom: 1,
|
||||
selectedNode: {},
|
||||
pageConfig: {
|
||||
onLoadZoom: 1,
|
||||
autoSetNodeGroup: false,
|
||||
editArea: {
|
||||
width: 80,
|
||||
height: 100,
|
||||
},
|
||||
}
|
||||
})
|
||||
const init = (view: boolean, bgConfig: any) => {
|
||||
that.editState = !view
|
||||
that.pageConfig = mergeDeepObject({
|
||||
editArea: {
|
||||
width: 100,
|
||||
height: 300,
|
||||
},
|
||||
autoSetNodeGroup: true, // 节点自动组成一个组合
|
||||
showLinePort: true, // 显示连线桩
|
||||
preLineConfigInfo: undefined,
|
||||
onLoadCenterCellId: '', // 首次加载的中心
|
||||
onLoadZoom: 1, // 首次加载zoom
|
||||
fitView: true,
|
||||
width: 600,
|
||||
height: 600,
|
||||
autoResize: false,
|
||||
|
||||
} , bgConfig)
|
||||
|
||||
let options = {
|
||||
...graphOptions(that.containerId, view),
|
||||
translating: {
|
||||
restrict: {
|
||||
x: 22,
|
||||
y: 22,
|
||||
width: that.pageConfig.editArea.width * 10,
|
||||
height: that.pageConfig.editArea.height * 10,
|
||||
},
|
||||
}
|
||||
}
|
||||
console.log(options)
|
||||
graph = new Graph(options)
|
||||
|
||||
// 画布拖动组件
|
||||
graph.use(
|
||||
new Scroller({
|
||||
enabled: true,
|
||||
pageVisible: false, // 是否分页
|
||||
pageBreak: false,
|
||||
pannable: true,// 是否平移
|
||||
pageWidth: that.pageConfig.editArea.width * 10,
|
||||
pageHeight: that.pageConfig.editArea.height * 10,
|
||||
// modifiers: ['ctrl', 'meta'],
|
||||
}),
|
||||
)
|
||||
if (!viewMode) {
|
||||
// 参考线
|
||||
graph.use(
|
||||
new Snapline({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
// 旋转
|
||||
graph.use(
|
||||
new Transform({
|
||||
resizing: {
|
||||
enabled: true,
|
||||
minWidth: 0, // 最小宽
|
||||
minHeight: 0, // 最小高
|
||||
maxWidth: 105 * 20, // 最大宽
|
||||
maxHeight: 105 * 20, // 最大高
|
||||
orthogonal: true, // 是否显示中间调整点，默认为 true
|
||||
restricted: false, // 调整大小边界是否可以超出画布边缘
|
||||
preserveAspectRatio: false, // 调整大小过程中是否保持节点的宽高比例
|
||||
allowReverse: true
|
||||
},
|
||||
rotating: {
|
||||
enabled: true,
|
||||
grid() {
|
||||
return 15
|
||||
},
|
||||
},
|
||||
}),
|
||||
),
|
||||
// 监听编辑结束事件来应用更改
|
||||
graph.on('node:dblclick', (evnt) => {
|
||||
const {node, cell} = evnt;
|
||||
console.log('双击了node', node)
|
||||
node.setData({
|
||||
// status: 'running',
|
||||
_$id: new Date().getTime(), // 刷新数据
|
||||
...node.getData,
|
||||
showInput: true
|
||||
})
|
||||
if (cell) {
|
||||
cell.removeTools()
|
||||
}
|
||||
|
||||
})
|
||||
// 点击画布空白区域
|
||||
graph.on('blank:click', () => {
|
||||
graph.cleanSelection && graph.cleanSelection()
|
||||
|
||||
// 取消选择元素
|
||||
that.selectedNode = {};
|
||||
draftDesignLayoutRef.value.selectedNode(that.selectedNode);
|
||||
})
|
||||
// 快捷键
|
||||
initBindKey()
|
||||
// 拖拽
|
||||
dnd = new Dnd({
|
||||
target: graph,
|
||||
})
|
||||
// 多选
|
||||
graph.use(
|
||||
new Selection({
|
||||
enabled: true,
|
||||
multiple: true,
|
||||
rubberband: true,
|
||||
movable: true,
|
||||
showNodeSelectionBox: true,
|
||||
})
|
||||
);
|
||||
graph.setRubberbandModifiers(['alt'])
|
||||
graph.setSelectionDisplayContent((selection) => {
|
||||
return `${selection.length} node${
|
||||
selection.length > 1 ? 's' : ''
|
||||
} selected.`
|
||||
}
|
||||
)
|
||||
|
||||
graph.on('cell:mouseenter', ({cell}) => {
|
||||
if (cell.isNode()) {
|
||||
cell.addTools([
|
||||
{
|
||||
name: 'boundary',
|
||||
args: {
|
||||
attrs: {
|
||||
fill: 'rgba(134,117,239,0.53)',
|
||||
stroke: '#333',
|
||||
'stroke-width': 1,
|
||||
'fill-opacity': 0.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
} else {
|
||||
cell.addTools(['vertices', 'segments'])
|
||||
}
|
||||
})
|
||||
|
||||
graph.on('cell:mouseleave', ({cell}) => {
|
||||
cell.removeTools()
|
||||
})
|
||||
|
||||
graph.on('node:selected', (e) => {
|
||||
const {cell, node} = e
|
||||
setSelectNode(node)
|
||||
|
||||
})
|
||||
graph.on('cell:changed', ({cell}) => {
|
||||
// setSelectNode(cell)
|
||||
})
|
||||
}
|
||||
graph.on('scale', ({sx, sy, ox, oy}) => {
|
||||
addDrawRuler()
|
||||
})
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: 'node1',
|
||||
shape: 'rect',
|
||||
x: 40,
|
||||
y: 40,
|
||||
width: 100,
|
||||
height: 40,
|
||||
label: 'hello',
|
||||
attrs: {
|
||||
// body 是选择器名称，选中的是 rect 元素
|
||||
body: {
|
||||
stroke: '#8f8f8f',
|
||||
strokeWidth: 1,
|
||||
fill: '#fff',
|
||||
rx: 6,
|
||||
ry: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'node2',
|
||||
shape: 'rect',
|
||||
x: 160,
|
||||
y: 180,
|
||||
width: 100,
|
||||
height: 40,
|
||||
label: 'world',
|
||||
attrs: {
|
||||
body: {
|
||||
stroke: '#8f8f8f',
|
||||
strokeWidth: 1,
|
||||
fill: '#fff',
|
||||
rx: 6,
|
||||
ry: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
shape: 'edge',
|
||||
source: 'node1',
|
||||
target: 'node2',
|
||||
label: 'x6',
|
||||
attrs: {
|
||||
// line 是选择器名称，选中的边的 path 元素
|
||||
line: {
|
||||
stroke: '#8f8f8f',
|
||||
strokeWidth: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
graph.fromJSON(data) // 渲染元素
|
||||
|
||||
addDrawRuler()
|
||||
changeZoom(that.pageConfig.onLoadZoom)
|
||||
draftDesignLayoutRef.value.updateZoom(that.pageConfig.onLoadZoom);
|
||||
draftDesignLayoutRef.value.updatePageConfig(that.pageConfig);
|
||||
logInfo('初始完成')
|
||||
}
|
||||
|
||||
const initBindKey = () => {
|
||||
|
||||
graph.use(
|
||||
new Keyboard({
|
||||
enabled: true,
|
||||
global: true,
|
||||
}),
|
||||
)
|
||||
graph.use(
|
||||
new Clipboard({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
graph.bindKey(['meta+c', 'ctrl+c'], () => {
|
||||
handlerCopy();
|
||||
return false
|
||||
})
|
||||
|
||||
graph.bindKey(['meta+v', 'ctrl+v'], () => {
|
||||
if (!graph.isClipboardEmpty()) {
|
||||
handlerPaste()
|
||||
} else {
|
||||
// 来自本地缓存
|
||||
const s = localStorage.getItem("copy_cell_info_data")
|
||||
if (s) {
|
||||
const cells = JSON.parse(s)
|
||||
for (let i = 0; i < cells.length; i++) {
|
||||
const id = 'id_' + nextId()
|
||||
const info = cells[i]
|
||||
const p = graph.getCellById(info.parent)
|
||||
let pid = null;
|
||||
if (p) {
|
||||
pid = info.parent
|
||||
}
|
||||
let size = {width: 64, height: 64};
|
||||
if (info.size) {
|
||||
size.width = info.size.width
|
||||
size.height = info.size.height
|
||||
}
|
||||
|
||||
let nodeOptions = {
|
||||
// id: id,
|
||||
// 旋转角度，单位为度，默认为 0
|
||||
angle: info.angle || 0,
|
||||
// 节点位置，相对于画布原点的偏移量，默认为 { x: 0, y: 0 }
|
||||
position: info.position || {x: 0, y: 0},
|
||||
// 节点尺寸，宽度和高度，默认为 { width: 100, height: 64 }
|
||||
size: size,
|
||||
// 属性集合
|
||||
attrs: {
|
||||
// 文本属性
|
||||
text: {
|
||||
text: ''
|
||||
},
|
||||
settingName: {
|
||||
text: ''
|
||||
},
|
||||
settingImage: {
|
||||
'xlink:href': ''
|
||||
},
|
||||
xAlign: 'left', //left middle right
|
||||
yAlign: 'top', //top middle bottom
|
||||
refX: '50%',
|
||||
refY: '50%',
|
||||
fontSize: '1rem',
|
||||
...info.attrs,
|
||||
},
|
||||
// 是否可见，默认为 true
|
||||
visible: true,
|
||||
zIndex: 1,
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
label: info.label,
|
||||
shape: info.shape,
|
||||
parent: pid,
|
||||
// 业务数据
|
||||
data: {
|
||||
...info.data,
|
||||
shape: info.shape,
|
||||
id: id,
|
||||
parent: that.pageConfig?.autoSetNodeGroup || false
|
||||
},
|
||||
}
|
||||
graph.addNode({
|
||||
...nodeOptions
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
// 复制
|
||||
const handlerCopy = () => {
|
||||
console.log("handlerCopy", graph)
|
||||
const cells = graph.getSelectedCells()
|
||||
|
||||
if (cells.length > 0) {
|
||||
graph.copy(cells)
|
||||
localStorage.setItem("copy_cell_info_data", JSON.stringify([...cells]))
|
||||
}
|
||||
}
|
||||
// 粘贴
|
||||
const handlerPaste = () => {
|
||||
if (!graph.isClipboardEmpty()) {
|
||||
const cells = graph.paste({offset: {dx: 0, dy: 60}})
|
||||
graph.cleanSelection()
|
||||
graph.select(cells)
|
||||
}
|
||||
}
|
||||
|
||||
const setSelectNode = (val) => {
|
||||
const node = graph.getCellById(val.id)
|
||||
that.selectedNode = JSON.parse(JSON.stringify(node.store.data))
|
||||
draftDesignLayoutRef.value.selectedNode(that.selectedNode);
|
||||
}
|
||||
const getDeviceDPI = () => {
|
||||
let dpi = calcDpiFromSize(); // 默认值 96dpi
|
||||
console.log("getDeviceDPI", dpi)
|
||||
return dpi;
|
||||
}
|
||||
|
||||
let rulerContainer = document.createElement('div');
|
||||
const addDrawRuler = () => {
|
||||
const container = document.getElementById(that.containerId);
|
||||
// setTimeout(()=>{
|
||||
// container.style.top = 0;
|
||||
// container.style.left = 0;
|
||||
// // graph.scrollToPoint(-1000, null)
|
||||
// },600)
|
||||
const zoom = graph.zoom();
|
||||
const clientWidth = (that.pageConfig.editArea.width * getDeviceDPI() / 25.4) * zoom;
|
||||
const clientHeight = (that.pageConfig.editArea.height * getDeviceDPI() / 25.4) * zoom;
|
||||
// 计算每个像素对应的毫米数
|
||||
const dpi = getDeviceDPI();
|
||||
const mmPerInch = 25.4; // 1 英寸 = 25.4 毫米
|
||||
const pixelsPerMm = dpi / mmPerInch * zoom;
|
||||
rulerContainer.remove()
|
||||
// 创建标尺的容器
|
||||
rulerContainer = document.createElement('div');
|
||||
rulerContainer.style.position = 'absolute';
|
||||
rulerContainer.style.top = '0';
|
||||
rulerContainer.style.left = '0';
|
||||
rulerContainer.style.width = '100%';
|
||||
rulerContainer.style.height = '100%';
|
||||
rulerContainer.style.pointerEvents = 'none'; // 确保不阻挡画布操作
|
||||
|
||||
// 创建背景 Canvas
|
||||
const backgroundCanvas = document.createElement('canvas');
|
||||
backgroundCanvas.width = clientWidth;
|
||||
backgroundCanvas.height = clientHeight;
|
||||
backgroundCanvas.style.position = 'absolute';
|
||||
backgroundCanvas.style.top = '20px'; // 与左侧标尺对齐
|
||||
backgroundCanvas.style.left = '20px'; // 与顶部标尺对齐
|
||||
backgroundCanvas.style.zIndex = '0'; // 置底
|
||||
// backgroundCanvas.style.backgroundColor
|
||||
backgroundCanvas.style.boxShadow = `1px 1px 2px rgb(0, 255, 0)`;
|
||||
backgroundCanvas.style.pointerEvents = 'none';
|
||||
rulerContainer.appendChild(backgroundCanvas);
|
||||
|
||||
// 创建顶部标尺
|
||||
const topRuler = document.createElement('canvas');
|
||||
topRuler.width = clientWidth + 20 // 减去背景 Canvas 的宽度
|
||||
topRuler.height = 20; // 标尺高度
|
||||
topRuler.style.position = 'absolute';
|
||||
topRuler.style.top = '0';
|
||||
topRuler.style.left = '20px'; // 预留左侧标尺位置
|
||||
topRuler.style.borderBottom = '1px solid #ccc'; // 底部边框样式
|
||||
topRuler.style.backgroundColor = '#f5f5f5'; // 背景颜色
|
||||
topRuler.style.zIndex = '0'; // 置于背景之上
|
||||
rulerContainer.appendChild(topRuler);
|
||||
|
||||
// 创建左侧标尺
|
||||
const leftRuler = document.createElement('canvas');
|
||||
leftRuler.width = 20; // 标尺宽度
|
||||
leftRuler.height = clientHeight + 20; // 减去背景 Canvas 的高度
|
||||
leftRuler.style.position = 'absolute';
|
||||
leftRuler.style.top = '20px'; // 预留顶部标尺位置
|
||||
leftRuler.style.left = '0';
|
||||
leftRuler.style.borderRight = '1px solid #ccc'; // 右侧边框样式
|
||||
leftRuler.style.backgroundColor = '#f5f5f5'; // 背景颜色
|
||||
leftRuler.style.zIndex = '1'; // 置于背景之上
|
||||
rulerContainer.appendChild(leftRuler);
|
||||
|
||||
// 将标尺容器添加到主容器中
|
||||
container.appendChild(rulerContainer);
|
||||
|
||||
// 绘制标尺
|
||||
const drawRuler = (canvas, orientation) => {
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 清空画布内容
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 绘制刻度线和刻度值
|
||||
ctx.font = '10px Arial'; // 刻度值字体
|
||||
ctx.fillStyle = '#000'; // 刻度值颜色
|
||||
|
||||
if (orientation === 'horizontal') {
|
||||
for (let i = 0; i < canvas.width; i += pixelsPerMm) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(i, 20); // 起点从底部开始
|
||||
|
||||
// 设置刻度线长度和颜色
|
||||
if (Math.round(i / pixelsPerMm) % 10 === 0) { // 每10毫米显示完整刻度线和刻度值
|
||||
ctx.strokeStyle = '#000'; // 深色刻度线
|
||||
ctx.lineTo(i, 0);
|
||||
ctx.fillText((i / pixelsPerMm).toFixed(0), i + 2, 18);
|
||||
} else if (Math.round(i / pixelsPerMm) % 5 === 0) { // 每5毫米显示半长刻度线
|
||||
ctx.strokeStyle = '#ccc'; // 浅色刻度线
|
||||
ctx.lineTo(i, 10);
|
||||
} else { // 其他显示为五分之一长刻度线
|
||||
ctx.strokeStyle = '#ccc'; // 浅色刻度线
|
||||
ctx.lineTo(i, 16);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < canvas.height; i += pixelsPerMm) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(20, i); // 起点从右侧开始
|
||||
|
||||
// 设置刻度线长度和颜色
|
||||
if (Math.round(i / pixelsPerMm) % 10 === 0) { // 每10毫米显示完整刻度线和刻度值
|
||||
ctx.strokeStyle = '#000'; // 深色刻度线
|
||||
ctx.lineTo(0, i);
|
||||
ctx.fillText((i / pixelsPerMm).toFixed(0), 2, i + 10);
|
||||
} else if (Math.round(i / pixelsPerMm) % 5 === 0) { // 每5毫米显示半长刻度线
|
||||
ctx.strokeStyle = '#ccc'; // 浅色刻度线
|
||||
ctx.lineTo(10, i);
|
||||
} else { // 其他显示为五分之一长刻度线
|
||||
ctx.strokeStyle = '#ccc'; // 浅色刻度线
|
||||
ctx.lineTo(16, i);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
drawRuler(topRuler, 'horizontal');
|
||||
drawRuler(leftRuler, 'vertical');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init(false, {});
|
||||
})
|
||||
const onChangeCell = (cell) => {
|
||||
console.log("index onChangeCell", cell)
|
||||
const node = graph.getCellById(cell.id)
|
||||
|
||||
// 属性修改
|
||||
node.setProp({
|
||||
angle: cell.angle,
|
||||
ports: cell.ports,
|
||||
position: cell.position,
|
||||
size: cell.size,
|
||||
tools: cell.tools,
|
||||
visible: cell.visible,
|
||||
zIndex: cell.zIndex,
|
||||
})
|
||||
node.setData({
|
||||
// status: 'running',
|
||||
_$id: new Date().getTime(), // 刷新数据
|
||||
...node.getData,
|
||||
...cell.data
|
||||
})
|
||||
|
||||
}
|
||||
const changePageConfig = (conf) => {
|
||||
that.pageConfig = mergeDeepObject(that.pageConfig,conf,{
|
||||
width: conf.editArea.width,
|
||||
height: conf.editArea.height,
|
||||
})
|
||||
|
||||
console.log("changePageConfig", that.pageConfig)
|
||||
graph.drawBackground({...that.pageConfig.background})
|
||||
addDrawRuler()
|
||||
}
|
||||
const onAddNode = (e, item) => {
|
||||
console.log("%%%", item)
|
||||
if (item) {
|
||||
const id = 'id_' + nextId()
|
||||
const shape = item.shape
|
||||
let nodeOptions = {
|
||||
// id: id,
|
||||
// 旋转角度，单位为度，默认为 0
|
||||
angle: 0,
|
||||
// 节点位置，相对于画布原点的偏移量，默认为 { x: 0, y: 0 }
|
||||
position: {x: 0, y: 0},
|
||||
// 节点尺寸，宽度和高度，默认为 { width: 100, height: 64 }
|
||||
attrs: {
|
||||
text: {
|
||||
text: name
|
||||
},
|
||||
xAlign: 'middle', //left middle right
|
||||
yAlign: 'top', //top middle bottom
|
||||
refX: '50%',
|
||||
refY: '50%',
|
||||
fontSize: '1rem'
|
||||
}, // 属性集合
|
||||
visible: true, // 是否可见，默认为 true
|
||||
zIndex: 1, // 节点的层级，用于确定节点的堆叠顺序，默认为 1
|
||||
shape,
|
||||
width: item.data.width,
|
||||
height: item.data.height,
|
||||
ports: {},// 初始连接桩
|
||||
data: { // 业务数据
|
||||
shape,
|
||||
id,
|
||||
label: '',
|
||||
...item.data,
|
||||
parent: that.pageConfig?.autoSetNodeGroup || false
|
||||
}
|
||||
}
|
||||
const newNode = graph.createNode({...nodeOptions})
|
||||
newNode.attr('body/scaling', 'none')
|
||||
|
||||
dnd.start(newNode, e)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
const changeSize = (size) => {
|
||||
console.log("s%%%%%%", size)
|
||||
}
|
||||
const changeZoom = (val) => {
|
||||
if (val < 0.3 || val > 10) {
|
||||
return
|
||||
}
|
||||
that.currentGraphZoom = val
|
||||
graph.zoomTo(val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
:deep(.x6-widget-transform-resize) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.x6-widget-transform-rotate) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: 2px solid #fbab00;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
transform: rotate(133deg);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// 获取设备像素比
|
||||
const dppx = window.devicePixelRatio ||
|
||||
(window.matchMedia && window.matchMedia("(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches ? 2 : 1) ||
|
||||
1;
|
||||
|
||||
// 计算屏幕的宽度和高度值
|
||||
const widthValue = screen.width * dppx;
|
||||
const heightValue = screen.height * dppx;
|
||||
|
||||
/**
|
||||
* 计算 PPI/DPI
|
||||
* @param {number} width - 宽度
|
||||
* @param {number} height - 高度
|
||||
* @param {number} [screenSize=16] - 物理屏幕对角线长度大小
|
||||
* @param {string} [opt='d'] - 计算模式：'d' 表示对角线，'w' 表示宽度，
|
||||
* @returns {number} - 计算出的 DPI 值
|
||||
*/
|
||||
export function calcDpi (width, height, screenSize=16, opt = 'd') {
|
||||
// 确保宽度和高度为正数
|
||||
width = Math.max(width, 1);
|
||||
height = Math.max(height, 1);
|
||||
|
||||
// 计算 DPI
|
||||
const dpi = (opt === 'd' ? Math.sqrt(width ** 2 + height ** 2) : opt === 'w' ? width : height) / screenSize;
|
||||
return dpi > 0 ? Math.round(dpi) : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param screenSize
|
||||
* @param opt
|
||||
*/
|
||||
export function calcDpiFromSize( screenSize=16,opt = 'd'){
|
||||
return calcDpi(widthValue, heightValue, screenSize, opt);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
export const nextId = (len = 11)=>{
|
||||
return Math.random().toString(36).substring(2,2+len).padEnd(len,'s')
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param node 对象
|
||||
* @param path 取值路径
|
||||
* @return {null|*}
|
||||
*/
|
||||
export function getSafeValue(node:any, path:string) {
|
||||
if (!node || !path) return null;
|
||||
|
||||
const keys = path.split('.');
|
||||
let result = node;
|
||||
|
||||
for (const k of keys) {
|
||||
if (result[k] !== undefined) {
|
||||
result = result[k];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
export function logInfo(str){
|
||||
console.info("".concat("\n", " %c ")
|
||||
.concat(str, "")
|
||||
.concat("\n"), "color: #ffffff; font-size: 14px; background: linear-gradient(45deg, #ff0000 0%, #0092ff 80%);");
|
||||
}
|
||||
export function hexToRGBA(hex) {
|
||||
// 去除可能存在的 # 号
|
||||
hex = hex.replace('#', '');
|
||||
|
||||
// 解析颜色和透明度
|
||||
let r, g, b, a;
|
||||
|
||||
if (hex.length === 6) {
|
||||
// 不带透明度的情况，默认完全不透明
|
||||
r = parseInt(hex.slice(0, 2), 16);
|
||||
g = parseInt(hex.slice(2, 4), 16);
|
||||
b = parseInt(hex.slice(4, 6), 16);
|
||||
a = 1; // 默认完全不透明
|
||||
} else if (hex.length === 8) {
|
||||
// 带透明度的情况
|
||||
r = parseInt(hex.slice(0, 2), 16);
|
||||
g = parseInt(hex.slice(2, 4), 16);
|
||||
b = parseInt(hex.slice(4, 6), 16);
|
||||
a = parseInt(hex.slice(6, 8), 16) / 255; // 转换为 0-1 的透明度值
|
||||
} else {
|
||||
// 如果格式不正确，返回空字符串或其他处理方式
|
||||
return '';
|
||||
}
|
||||
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
}
|
||||
export function toPercentage(number, total) {
|
||||
return (number / total) * 100
|
||||
}
|
||||
export function angleToLinearGradient(angle) {
|
||||
const radians = angle * Math.PI / 180
|
||||
|
||||
// 计算单位向量
|
||||
const unitVectorX = Math.cos(radians)
|
||||
const unitVectorY = Math.sin(radians)
|
||||
|
||||
// 计算起始点和结束点的坐标
|
||||
let x1, y1, x2, y2
|
||||
if (angle >= 0 && angle < 90) {
|
||||
x1 = 0
|
||||
y1 = 1
|
||||
x2 = unitVectorX
|
||||
y2 = 0
|
||||
} else if (angle >= 90 && angle < 180) {
|
||||
x1 = 0
|
||||
y1 = 1
|
||||
x2 = 1
|
||||
y2 = -unitVectorY
|
||||
} else if (angle >= 180 && angle < 270) {
|
||||
x1 = 1
|
||||
y1 = 0
|
||||
x2 = -unitVectorX
|
||||
y2 = 1
|
||||
} else {
|
||||
x1 = 1
|
||||
y1 = 0
|
||||
x2 = 0
|
||||
y2 = unitVectorY
|
||||
}
|
||||
|
||||
// 将结束点的位置向内移动一点，以实现平滑的过渡
|
||||
const deltaX = Math.min(0.2, Math.abs(unitVectorX)) * (x2 - x1)
|
||||
const deltaY = Math.min(0.2, Math.abs(unitVectorY)) * (y2 - y1)
|
||||
x2 -= deltaX
|
||||
y2 -= deltaY
|
||||
// 将起始点和结束点的坐标转换为百分比值
|
||||
x1 *= 100
|
||||
y1 *= 100
|
||||
x2 *= 100
|
||||
y2 *= 100
|
||||
return {x1: x1 + '%', y1: y1 + '%', x2: x2 + '%', y2: y2 + '%'}
|
||||
}
|
||||
/**
|
||||
* 过滤不安全的HTML标签和属性，以防止XSS攻击。
|
||||
*
|
||||
* @param {string} html 待过滤的HTML代码。
|
||||
* @returns {string} 过滤后的HTML代码。
|
||||
*/
|
||||
export function filterUnsafeHtml(html) {
|
||||
|
||||
if(!html){
|
||||
return html;
|
||||
}
|
||||
// 过滤掉不安全的 HTML 标签和属性
|
||||
html = html.replace(/<script.*?>.*?<\/script>/gi, '');
|
||||
|
||||
// 过滤 <style> 标签
|
||||
// html = html.replace(/<style.*?>.*?<\/style>/gi, '');
|
||||
|
||||
// 过滤 <iframe> 标签
|
||||
html = html.replace(/<iframe.*?>.*?<\/iframe>/gi, '');
|
||||
|
||||
// 过滤不安全的属性，如 on* (onclick, onmouseover 等)
|
||||
html = html.replace(/ on\w+="[^"]*"/gi, '');
|
||||
html = html.replace(/ on\w+='[^']*'/gi, '');
|
||||
html = html.replace(/ on\w+=\w+/gi, '');
|
||||
|
||||
// 过滤 <img> 标签的 src 属性中的 javascript:
|
||||
html = html.replace(/<img .*?src=["']?javascript:.*?["']?.*?>/gi, '');
|
||||
|
||||
// 过滤 <a> 标签的 href 属性中的 javascript:
|
||||
html = html.replace(/<a .*?href=["']?javascript:.*?["']?.*?>/gi, '');
|
||||
|
||||
return html;
|
||||
}
|
||||
export function calculateGradientColor(startColor, endColor, steps) {
|
||||
if (startColor && endColor) {
|
||||
startColor = startColor.trim()
|
||||
endColor = endColor.trim()
|
||||
// 将十六进制颜色值转换成 RGBA 格式
|
||||
startColor = (startColor.charAt(0) === '#') ? hexToRGBA(startColor) : startColor
|
||||
endColor = (endColor.charAt(0) === '#') ? hexToRGBA(endColor) : endColor
|
||||
// 解析开始颜色和结束颜色的 RGBA 值
|
||||
const startRGBA = startColor.match(/\d+/g).map(Number)
|
||||
const endRGBA = endColor.match(/\d+/g).map(Number)
|
||||
|
||||
// 计算每个颜色通道的增量
|
||||
const deltaRGBA = [
|
||||
(endRGBA[0] - startRGBA[0]) / (steps - 1),
|
||||
(endRGBA[1] - startRGBA[1]) / (steps - 1),
|
||||
(endRGBA[2] - startRGBA[2]) / (steps - 1),
|
||||
(endRGBA[3] - startRGBA[3]) / (steps - 1)
|
||||
]
|
||||
|
||||
// 构建中间颜色的 RGBA 值数组
|
||||
const gradientColors = Array.from({length: steps}, (_, i) => {
|
||||
const r = Math.round(startRGBA[0] + deltaRGBA[0] * i)
|
||||
const g = Math.round(startRGBA[1] + deltaRGBA[1] * i)
|
||||
const b = Math.round(startRGBA[2] + deltaRGBA[2] * i)
|
||||
const a = 1 // Convert alpha to range [0, 1]
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`
|
||||
})
|
||||
console.log('gradientColors####', gradientColors)
|
||||
return gradientColors
|
||||
}
|
||||
return []
|
||||
|
||||
}
|
||||
|
||||
|
||||
export function isObject(obj) {
|
||||
return obj && typeof obj === 'object' && !Array.isArray(obj);
|
||||
}
|
||||
|
||||
export function mergeDeepObject(...objects) {
|
||||
const result = {};
|
||||
objects.forEach(obj => {
|
||||
Object.keys(obj).forEach(key => {
|
||||
const value = obj[key];
|
||||
if (isObject(value)) {
|
||||
if (!result[key]) {
|
||||
result[key] = {};
|
||||
}
|
||||
result[key] = mergeDeepObject(result[key], value);
|
||||
} else {
|
||||
result[key] = value;
|
||||
}
|
||||
});
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import type { App } from 'vue'
|
||||
import { hasRole } from './permission/hasRole'
|
||||
import { hasPermi } from './permission/hasPermi'
|
||||
import { reSize } from './reSize'
|
||||
|
||||
/**
|
||||
* 导出指令：v-xxx
|
||||
|
|
@ -10,4 +11,5 @@ import { hasPermi } from './permission/hasPermi'
|
|||
export const setupAuth = (app: App<Element>) => {
|
||||
hasRole(app)
|
||||
hasPermi(app)
|
||||
reSize(app)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import type {App} from "vue";
|
||||
|
||||
const map = new WeakMap()
|
||||
const ob = new ResizeObserver((entries =>{
|
||||
entries.forEach(entry => {
|
||||
const handler = map.get(entry.target);
|
||||
handler && handler({
|
||||
width: entry.borderBoxSize[0].inlineSize,
|
||||
height: entry.borderBoxSize[0].blockSize,
|
||||
contentRect: entry.contentRect,
|
||||
target: entry.target,
|
||||
})
|
||||
|
||||
})
|
||||
}))
|
||||
|
||||
/**
|
||||
* 使用方法 v-reSize="handlerFunc"
|
||||
* {
|
||||
* width: entry.borderBoxSize[0].inlineSize, // 宽度
|
||||
* height: entry.borderBoxSize[0].blockSize, // 高度
|
||||
* contentRect: entry.contentRect, // 内容区域
|
||||
* target: entry.target, // 节点
|
||||
* }
|
||||
* @param app
|
||||
*/
|
||||
export function reSize(app: App<Element>) {
|
||||
app.directive('reSize', {
|
||||
mounted(el, binding) {
|
||||
map.set(el, binding.value)
|
||||
ob.observe(el);
|
||||
},
|
||||
unmounted(el) {
|
||||
ob.unobserve(el)
|
||||
}
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue