mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 09:11:21 -05:00
✨ Path edition mode
This commit is contained in:
alonso.torres
parent
275f6e3dc2
commit
8db7078ce8
20 changed files with 436 additions and 108 deletions
|
|
@ -146,3 +146,18 @@
|
|||
(not (nil? c2x)) (set-tr :c2x :c2y)))]
|
||||
|
||||
(mapv #(update % :params transform-params) content)))
|
||||
|
||||
(defn apply-content-modifiers [content modifiers]
|
||||
(let [red-fn (fn [content [index params]]
|
||||
(if (contains? content index)
|
||||
(cond-> content
|
||||
(:x params) (update-in [index :params :x] + (:x params))
|
||||
(:y params) (update-in [index :params :y] + (:y params))
|
||||
|
||||
(:c1x params) (update-in [index :params :c1x] + (:c1x params))
|
||||
(:c1y params) (update-in [index :params :c1y] + (:c1y params))
|
||||
|
||||
(:c2x params) (update-in [index :params :c2x] + (:c2x params))
|
||||
(:c2y params) (update-in [index :params :c2y] + (:c2y params)))
|
||||
content))]
|
||||
(reduce red-fn content modifiers)))
|
||||
|
|
|
|||
3
frontend/resources/images/icons/nodes-add.svg
Normal file
3
frontend/resources/images/icons/nodes-add.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M369.205 7.23c-17.208.104-47.593 2.472-64.201 5.287-20.773 3.52-52.639 11.881-69.555 18.25l-14.548 5.476-7.122-5.436c-30.798-23.51-75.188-27.152-111.754-9.173-39.687 19.513-61.526 54.611-61.526 98.88 0 18.37 2.388 29.96 9.19 44.577l4.4 9.453-7.692 12.354c-16.232 26.07-30.749 58.736-37.94 85.375-4.02 14.893-8.44 39.23-8.45 46.528L0 323.085h17.745c19.1 0 19.638-.241 19.638-8.762 0-11.84 10.285-47.998 19.87-69.847 5.487-12.511 20.226-39.771 21.502-39.771.372 0 4.006 2.368 8.077 5.266 33.324 23.72 76.736 26.357 114.547 6.957 18.167-9.32 36.82-28.2 45.929-46.491 9.176-18.427 11.88-29.97 11.852-50.623-.024-18.36-2.286-29.476-9.157-45.013l-3.925-8.875 5.188-2.169c8.812-3.682 39.855-11.478 59.482-14.94 11.955-2.11 28.655-3.6 46.34-4.135 15.206-.46 27.713-.914 27.793-1.013.08-.099.979-8.028 1.996-17.617l1.85-17.436L378.68 7.54c-2.236-.239-5.506-.334-9.477-.31zM153.993 47.255c5.439.115 10.535.69 14.48 1.752 24.16 6.506 43.998 25.871 51.372 50.149 2.71 8.92 3.163 13.509 2.531 25.582-.695 13.29-1.381 15.947-7.112 27.478-10.13 20.38-27.473 34.334-48.661 39.153-5.872 1.336-14.045 2.37-18.16 2.297-32.296-.571-61.53-23.72-69.734-55.217-9.66-37.085 12.4-76.769 48.947-88.057 7.251-2.24 17.272-3.328 26.337-3.137zm194.549 141.863c-4.948 0-7.23 1.055-11.473 5.297l-5.293 5.296v123.363l-58.022.016c-34.96.005-60.316.647-63.793 1.612-12.302 3.417-16.2 17.153-7.6 26.781l4.546 5.09 62.043.779 62.047.779.779 61.79.779 61.792 3.894 4.19c2.141 2.303 5.296 4.766 7.009 5.475 1.713.709 3.662 1.333 4.332 1.388 2.784.225 11.463-4.39 14.36-7.637 2.987-3.348 3.134-6.05 3.586-65.636l.472-62.141h123.199l5.296-5.297c4.242-4.242 5.297-6.525 5.297-11.472 0-7.85-4.523-13.764-12.145-15.88-3.477-.966-28.829-1.613-63.79-1.613l-58.021-.015-.01-58.022c-.004-34.961-.646-60.313-1.612-63.79-2.117-7.622-8.03-12.145-15.88-12.145z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
3
frontend/resources/images/icons/nodes-corner.svg
Normal file
3
frontend/resources/images/icons/nodes-corner.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M240.326 76.886c-7.638-.006-15.27.99-21.109 2.996-22.013 7.56-39.34 26.373-44.518 48.333-4.5 19.09-.083 40.81 11.353 55.816l3.04 3.988-43.821 54.644c-34.23 42.682-44.261 54.454-45.828 53.78-24.235-10.42-43.288-10.479-63.935-.196-14.994 7.466-28.572 24.15-33.606 41.289-2.234 7.604-2.571 25.97-.633 34.384 5.389 23.385 27.168 44.357 51.567 49.65 22.91 4.972 45.72-2.198 62.206-19.553 13.156-13.85 18.529-27.186 18.555-46.053.017-12.292-2.3-22.187-7.466-31.88l-3.726-6.988 44.836-55.895 44.837-55.897 7.058 2.59c5.629 2.063 9.92 2.594 21.163 2.62 12.469.028 15.087-.353 22.59-3.289 4.669-1.826 9.252-3.954 10.187-4.73 1.33-1.104 2.311-.766 4.517 1.557 2.064 2.173 81.858 93.81 97.285 111.724 1.585 1.84 1.306 3.028-2.505 10.647-17.899 35.777.792 80.37 39.04 93.145 16.958 5.664 33.836 4.499 50.65-3.499 36.251-17.243 49.065-62.73 27.251-96.724-5.382-8.387-17.147-19.038-25.927-23.47-18.635-9.407-42.082-9.637-59.938-.589l-5.64 2.858-42.274-48.494c-23.25-26.672-46.063-52.846-50.7-58.166l-8.43-9.673 3.884-7.892c7-14.22 8.867-28.714 5.65-43.896-4.87-22.983-22.14-42.445-44.467-50.11-5.866-2.014-13.509-3.022-21.147-3.027zm.929 28.928c5.153.09 10.157 1.013 14.05 2.795 14.35 6.57 21.879 17.418 22.734 32.755.893 16.027-6.018 28.847-19.518 36.202-5.483 2.988-8.298 3.655-16.996 4.022-9.491.4-11.086.119-17.831-3.14-28.557-13.797-29.16-54.64-1.018-68.915 5.08-2.577 11.953-3.836 18.579-3.72zM431.067 317.35c3.412-.105 6.882.28 10.354 1.169 12.355 3.165 20.235 9.339 25.942 20.327 2.416 4.65 2.867 7.35 2.867 17.168 0 10.626-.32 12.227-3.643 18.227-4.347 7.847-11.71 14.195-20.215 17.427-3.837 1.458-9.14 2.336-13.865 2.297-21.382-.179-37.694-16.329-37.694-37.316 0-11.152 2.56-18.641 8.797-25.726 7.532-8.557 17.223-13.258 27.457-13.573zm-364.48.122c15.176.033 28.573 8.515 35.241 22.31 3.905 8.078 4.064 22.996.333 31.096-3.607 7.831-10.761 15.386-18.138 19.154-6.632 3.387-21.483 4.956-27.668 2.922-33.797-11.112-38.072-55.336-6.889-71.243 7.245-3.695 9.505-4.256 17.12-4.239z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
3
frontend/resources/images/icons/nodes-curve.svg
Normal file
3
frontend/resources/images/icons/nodes-curve.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M244.577 79.225a61.421 61.421 0 00-15.436 1.605c-21.988 5.173-41.986 23.143-48.381 43.474l-2.134 6.78H74.925v-20.543H0V185.466H74.925v-25.378h31.66c17.415 0 31.146.455 30.514 1.012-.631.558-4.41 3.48-8.398 6.496-10.714 8.103-26.93 25.517-34.648 37.205-15.054 22.799-25.433 49.97-30.521 79.91-.689 4.05-1.132 4.442-5.856 5.197-13.48 2.154-31.265 14.57-40.243 28.097-7.4 11.147-10.57 21.889-10.638 36.041-.09 18.774 6.174 34.098 19.329 47.293 8.576 8.603 23.71 16.734 34.3 18.43 22.872 3.661 42.976-2.674 58.645-18.482 13.554-13.673 19.846-28.637 19.886-47.29.054-26.118-17.983-52.66-41.525-61.103-2.576-.924-4.944-2.356-5.261-3.182-.785-2.046 2.847-17.999 6.989-30.702 12.624-38.72 37.846-68.227 71.689-83.864 4.98-2.3 9.596-4.182 10.257-4.182.662 0 2.466 2.568 4.008 5.71 4.408 8.979 17.8 22.3 27.592 27.445 9.31 4.892 21.229 7.888 31.406 7.893 23.718.01 48.035-15.184 58.641-36.644 2.511-5.08 5.162-9.234 5.891-9.228.73.006 7.094 2.368 14.14 5.247 36.538 14.927 63.7 43.54 79.59 83.841 4.193 10.636 11.574 35.522 10.635 35.863-.174.063-4.469 2.174-9.543 4.692-15.007 7.447-27.018 20.919-32.555 36.511-3.566 10.043-4.46 27.758-1.905 37.734 8.049 31.416 38.098 53.27 69.477 50.531 32.832-2.865 57.406-27.371 61.24-61.074 1.837-16.142-5.55-36.943-17.82-50.187-9.88-10.664-21.227-16.86-37.328-20.386-2.781-.609-3.341-1.606-4.647-8.263-2.366-12.061-10.426-35.322-17.03-49.146-11.797-24.697-30.196-48.268-49.313-63.175-4.413-3.441-8.54-6.703-9.172-7.249-.631-.545 10.925-.991 25.68-.991h26.83v25.378h76.132V110.54H416.92v20.544H308.54l-1.536-5.136c-8.14-27.222-34.67-46.113-62.427-46.724zm.248 28.594c20.076.653 38.59 17.524 36.445 41.178-1.165 12.848-9.105 24.698-20.494 30.592-6.773 3.504-23.247 4.32-30.837 1.529-7.329-2.695-16.54-11.483-20.483-19.54-2.762-5.646-3.354-8.461-3.354-15.956 0-12.011 3.38-19.722 12.17-27.755 7.978-7.291 17.427-10.344 26.553-10.048zM73.66 316.54c22.939.427 41.895 22.783 35.85 46.377-3.136 12.24-9.355 20.058-20.549 25.836-6.296 3.25-22.152 4.16-28.694 1.647-35.199-13.525-32.897-63.035 3.378-72.64a36.407 36.407 0 0110.015-1.22zm359.468.18c7.514-.066 9.858.475 16.756 3.87 14.635 7.205 22.116 19.953 21.124 36-.883 14.288-8.57 25.912-21.226 32.104-6.893 3.372-21.443 4.308-28.172 1.81-11.325-4.203-20.124-12.775-23.648-23.034-8.6-25.039 9.058-50.521 35.166-50.75zM561.389 720.95c-6.416-.046-13.085.744-17.701 2.318-17.355 5.916-31.094 19.83-36.004 36.462l-1.254 4.25h-78.684v23h78.684l1.271 4.25c5.172 17.284 20.647 32.463 38.045 37.317 6.08 1.696 22.323 1.724 28.614.049 18.293-4.871 34.106-20.609 38.933-38.746 1.939-7.284 1.856-22.146-.16-28.938-5.54-18.663-19.656-32.778-38.318-38.318-3.599-1.069-8.436-1.61-13.426-1.645zm164.267.081c-5.306.012-10.518.528-13.978 1.545-20.853 6.13-35.946 22.898-39.584 43.979-2.39 13.854.716 28.39 8.478 39.673 7.049 10.245 20.848 20.071 31.793 22.641 6.605 1.55 22.482 1.27 28.45-.502 17.81-5.287 32.264-19.166 37.634-36.137l1.663-5.25h78.634v-23H780.063l-1.254-4.25c-5.059-17.133-21.186-32.682-38.604-37.218-3.84-1-9.242-1.493-14.549-1.48zm.3 23.324c4.762-.047 9.503.84 13.29 2.666 9.532 4.598 15.446 12.427 17.776 23.536.971 4.63.886 6.578-.52 11.937-.924 3.523-2.807 8.191-4.185 10.375-3.33 5.274-10.7 10.775-16.905 12.617-13.61 4.042-27.272-.938-35.388-12.9-3.856-5.683-5.262-10.31-5.272-17.318-.012-11.357 7.273-22.822 17.78-27.98 3.875-1.904 8.66-2.885 13.423-2.933zm-165.71.174c6.784-.041 8.86.373 13.66 2.73 6.529 3.207 12.148 8.977 15.188 15.598 2.973 6.476 2.973 18.77 0 25.246-3.013 6.563-8.648 12.388-14.977 15.485-10.64 5.206-24.218 3.858-33.166-3.291-18.457-14.748-14.793-43.673 6.795-53.64 3.325-1.536 6.59-2.092 12.5-2.128zm.5 150.451v36h39v-36h-19.5zm117 0v36h40v-36h-20zm-117 57l.016 20.25c.01 14.304.447 22.087 1.488 26.504 4.069 17.256 17.425 33.307 34.617 41.602 9.678 4.669 17.897 7.183 28.352 8.674 9.227 1.315 28.846.274 38.527-2.045 4.675-1.12 12.775-4.145 18-6.723 17.883-8.823 30.709-24.722 34.496-42.762.995-4.738 1.475-13.22 1.487-26.25l.017-19.25h-40v18.635c0 11.707-.452 20.164-1.216 22.75-1.754 5.934-9.862 13.753-17.053 16.444-16.938 6.337-39.908 3.58-50.35-6.045-7.89-7.273-8.802-10.487-9.224-32.534l-.37-19.25h-19.392z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
3
frontend/resources/images/icons/nodes-join.svg
Normal file
3
frontend/resources/images/icons/nodes-join.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M346.165 49.901c-16.103 0-32.178 6.191-44.549 18.575-12.774 12.787-18.57 26.914-18.545 45.198.025 17.844 5.108 30.457 17.546 43.552 10.039 10.568 22.881 17.471 36.377 19.553 11.454 1.766 28.106-1.306 40.022-7.386 11.49-5.862 25.093-22.04 29.546-35.14l2.247-6.614h91.154V99.8h-91.267l-1.454-4.93c-2.681-9.08-8.7-18.786-16.362-26.388-12.483-12.386-28.613-18.58-44.715-18.582zm-192.833.023c-25.936 0-51.304 18.185-59.43 42.602L91.483 99.8H.037v27.839h91.455l1.389 4.35c6.9 21.58 25.856 39.02 47.507 43.71 15.063 3.261 26.846 1.762 41.53-5.286 39.44-18.931 47.91-71.2 16.531-102.023-12.554-12.332-27.54-18.466-45.116-18.466zm.293 27.39c7.232-.064 9.457.454 16.182 3.765 27.18 13.38 27.066 51.98-.195 65.318-5.817 2.846-20.076 4.093-25.745 2.251-10.381-3.371-19.176-11.16-23.56-20.867-3.633-8.042-3.4-20.744.534-29.14 6.2-13.232 18.452-21.202 32.784-21.328zm192.737.054c13.171.05 26.326 7.058 33.064 20.998 3.82 7.903 3.83 21.67.02 30.165-3.68 8.21-13.364 17.033-21.27 19.381-7.653 2.273-18.634 2.12-25.158-.35-7.3-2.765-16.618-11.672-19.909-19.03-3.906-8.736-3.864-22.34.093-30.422 6.801-13.887 19.988-20.793 33.16-20.742zM241.3 161.276v106.11l-22.34-22.317c-20.314-20.294-22.7-22.317-26.314-22.317-5.177 0-9.342 3.83-9.342 8.588 0 3.093 4.032 7.578 31.63 35.176 29.126 29.126 31.949 31.63 35.618 31.63 3.66 0 6.431-2.435 33.989-29.867 16.502-16.428 30.775-31.328 31.718-33.115 3.133-5.934-.815-12.412-7.564-12.412-3.854 0-5.796 1.637-26.497 22.317l-22.34 22.317v-106.11h-9.279zm104.972 162.391c-18.015 0-32.164 5.828-44.777 18.441-7.684 7.685-13.285 16.865-16.17 26.508l-1.475 4.93-33.745-.014-33.744-.011-2.186-7.012c-5.88-18.86-24-35.894-43.782-41.159-8.405-2.237-25.676-2.152-33.565.166-20.361 5.98-38.903 24.167-43.937 43.096l-1.31 4.93H.038V400.22H91.628l.734 3.19c1.88 8.15 8.983 20.39 15.915 27.423 8.186 8.305 15.494 12.922 26.311 16.624 9.042 3.094 26.063 3.546 35.806.953 19.77-5.262 38.566-22.993 44.009-41.517l1.96-6.67 33.743-.001h33.745l1.474 4.93c2.886 9.642 8.487 18.823 16.171 26.508 12.613 12.612 26.762 18.438 44.777 18.438 18.016 0 32.165-5.826 44.777-18.438 7.685-7.685 13.286-16.866 16.171-26.508l1.475-4.93h91.267V373.544h-91.267l-1.475-4.93c-2.885-9.643-8.486-18.823-16.17-26.508-12.613-12.612-26.762-18.439-44.778-18.439zm0 27.256c7.8 0 10.327.514 15.845 3.224 7.572 3.718 14.09 10.412 17.616 18.092 3.45 7.511 3.45 21.772 0 29.283-3.495 7.613-10.03 14.37-17.371 17.96-8.399 4.11-19.516 4.851-27.884 1.86-30.644-10.952-33.172-52.894-4.05-67.195 5.518-2.71 8.045-3.224 15.844-3.224zm-192.546.03c7.834-.025 10.3.472 15.844 3.194 7.217 3.544 13.363 9.644 17.444 17.313 2.198 4.128 2.653 6.769 2.651 15.42-.002 9.06-.412 11.217-3.092 16.314-3.725 7.082-10.937 13.843-18.187 17.05-15.315 6.775-34.753 1.303-44.211-12.444-4.534-6.59-7.441-17.776-6.459-24.848 1.07-7.698 6.966-19.164 11.993-23.318 7.897-6.526 13.774-8.65 24.017-8.681z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
3
frontend/resources/images/icons/nodes-merge.svg
Normal file
3
frontend/resources/images/icons/nodes-merge.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M153.658 49.909c-9.284-.067-18.58 2.134-28 6.604-14.775 7.01-27.865 21.741-32.482 36.555l-2.122 6.813-45.527.011L0 99.902v27.838h91.267l1.456 4.929c4.692 15.893 17.009 30.16 32.684 37.858 5.348 2.627 12.594 5.236 16.103 5.798v-.002c14.512 2.323 27.764.414 40.597-5.852 9.498-4.637 22.415-17.376 27.548-27.168 16.568-31.6 3.864-70.693-28.069-86.384-9.372-4.606-18.644-6.942-27.928-7.01zm191.998.15c-40.132 0-71.217 38.53-62.144 77.025 5.775 24.503 24.788 43.62 48.515 48.774 30.871 6.706 62.672-10.702 73.33-40.144l2.676-7.395 45.656-.58 45.656-.58.326-13.615.329-13.616-45.944-.303-45.943-.304-2.048-5.8c-3.738-10.572-7.3-16.152-15.628-24.485-12.693-12.7-27.501-18.977-44.781-18.977zm-192.248 27.19c18.884-.143 35.996 15.864 36.123 35.411.095 14.556-6.684 26.231-19.177 33.03-8.38 4.562-21.758 5.304-30.835 1.711-23.34-9.239-29.882-41.303-12.05-59.063 6.167-6.142 11.358-8.866 20.038-10.512a32.999 32.999 0 015.901-.577zm192.792.179c4.012.054 8.122.746 12.204 2.13 8.695 2.946 18.563 12.748 21.386 21.247 5.898 17.758-1.087 36.285-16.93 44.908-5.048 2.748-7.826 3.415-15.448 3.716-15.35.605-26.662-5.572-33.622-18.36-2.73-5.015-3.47-8-3.87-15.622-.441-8.41-.15-10.197 2.726-16.604 6.134-13.67 19.223-21.61 33.554-21.415zm-104.937 83.949v52.776c0 29.027-.396 52.776-.881 52.776s-10.789-9.917-22.897-22.038c-18.922-18.942-22.51-22.038-25.539-22.038-5.519 0-8.679 2.872-8.679 7.888 0 4.05 1.673 5.949 31.601 35.892 27.256 27.27 32.075 31.614 35.063 31.614 2.988 0 7.816-4.35 35.097-31.63 26.934-26.935 31.63-32.134 31.63-35.013 0-4.827-4.09-8.751-9.123-8.751-3.748 0-5.902 1.813-26.477 22.29l-22.396 22.29V161.376h-8.7zm8.167 162.402c-17.663.025-30.355 5.073-43.182 17.172-8.831 8.331-12.776 14.25-16.676 25.022l-2.567 7.09-93.502.296L0 373.656v26.651l93.552.296 93.555.297 1.976 5.813c6.953 20.456 23.444 36.374 43.193 41.692 8.445 2.274 26.75 2.245 34.585-.057 20.168-5.924 36.966-22.166 43.372-41.938l1.971-6.09h187.721v-26.678H312.328l-2.62-7.25c-3.843-10.623-7.807-16.832-15.752-24.675-12.44-12.279-26.547-17.963-44.526-17.938zm-.022 27.28c7.558-.03 9.757.474 16.463 3.775 12.855 6.329 19.843 17.664 19.852 32.202.008 14.208-7.952 26.899-20.6 32.844-10.227 4.808-23.042 4.302-33.857-1.336-5.449-2.84-13.91-12.902-15.994-19.017-2.432-7.134-2.353-18.112.179-25.228 2.752-7.739 11.453-17.055 19.12-20.475 4.62-2.061 8.243-2.737 14.837-2.764z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
3
frontend/resources/images/icons/nodes-remove.svg
Normal file
3
frontend/resources/images/icons/nodes-remove.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M382.316 7.667c-15.872-.235-47.714 1.104-61.212 2.962-32.005 4.406-69.244 13.896-91.83 23.404-5.342 2.248-5.66 2.17-12.837-3.097-19.326-14.187-46.622-22.07-71.126-20.543-28.405 1.77-51.076 12.049-71.622 32.469C62.492 53.99 58.965 58.777 52.85 71.166c-4.049 8.201-8.392 19.858-9.654 25.903-4.806 23.036-2.052 48.437 7.618 70.27l4.002 9.037-8.038 12.944C22.47 228.47 5.202 276.39.954 316.487L0 325.514h37.706v-4.857c0-8.476 6.08-35.068 11.862-51.898 5.203-15.145 23.164-53.485 28.07-59.924 2.055-2.695 2.593-2.546 9.982 2.763 18.245 13.108 39.461 19.651 63.818 19.688 19.01.028 32.058-2.936 48.77-11.083 20.733-10.106 37.148-25.702 48.62-46.2 16.004-28.594 17.686-68.546 4.11-97.557-2.555-5.46-4.16-10.218-3.566-10.57 4.07-2.412 34.919-11.042 50.904-14.241 25.404-5.084 45.493-7.163 69.148-7.163h19.396l1.837-17.56c1.01-9.656 1.43-17.958.935-18.448-.472-.467-3.986-.719-9.276-.797zm-232 39.589c31.396-.398 60.367 18.651 70.892 49.243 14.655 42.593-12.027 88.727-56.154 97.096-40.307 7.644-79.611-20.22-86.55-61.359-5.849-34.673 16.49-71.17 49.886-81.5 7.307-2.26 14.68-3.388 21.926-3.48zm248.571 276.676c-14.803 0-31.883.013-51.597.013H205.39l-5.339 5.339c-4.147 4.147-5.339 6.633-5.339 11.146 0 4.514 1.192 7 5.34 11.147l5.338 5.34h142.037c140.026 0 142.093-.046 146.06-3.165 5.961-4.69 8.104-12.502 5.28-19.261-4.135-9.896 3.743-10.55-99.88-10.559z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/resources/images/icons/nodes-separate.svg
Normal file
3
frontend/resources/images/icons/nodes-separate.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M152.054 49.928a62.098 62.098 0 00-11.937 1.287c-20.8 4.306-41.307 22.573-47.077 41.934l-1.986 6.667-45.527.002H0v27.838h45.817c44.105 0 45.817.082 45.817 2.186 0 1.202 2.162 6.507 4.805 11.787 8.528 17.04 25.217 30.27 43.07 34.15v.002c31.335 6.808 63.86-11.457 74.061-41.592l2.016-5.951h67.693l2.677 7.392c8.759 24.188 33.964 41.864 59.7 41.864 26.285 0 54.078-20.373 60.488-44.34l1.463-5.471 45.87-.304 45.868-.301.326-13.615.329-13.618-45.984-.302-45.983-.303-2.591-7.161c-11.009-30.405-43.206-47.787-74.745-40.353-20.388 4.806-38.75 21.616-45.547 41.698l-1.969 5.816-33.622.306-33.621.308-1.398-4.368c-8.83-27.617-34.783-45.852-62.486-45.559zm193.93 27.322c8.762.005 17.597 3.217 24.615 10.276 8.755 8.806 10.435 13.027 10.435 26.211 0 10.05-.303 11.568-3.446 17.243-3.541 6.392-9.705 12.199-16.853 15.876-6.239 3.21-21.047 3.48-28.506.523-15.69-6.22-25.068-22.733-22.422-39.475 3-18.972 19.452-30.662 36.177-30.654zm-192.682.1c21.682.255 41.471 20.325 35.316 44.35-3.002 11.72-8.978 19.23-19.714 24.77-3.396 1.754-7.455 2.58-14.055 2.855-11.988.502-19.297-2.217-27.199-10.12-15.693-15.693-13.671-41.92 4.232-54.919 6.757-4.906 14.193-7.022 21.42-6.937zm86.801 83.944v106.11l-22.34-22.317c-18.392-18.375-22.912-22.317-25.592-22.317-7.412 0-11.254 5.433-8.448 11.945.88 2.043 15.142 17.154 31.693 33.581 27.498 27.292 30.434 29.868 34.037 29.868 3.614 0 6.58-2.635 35.575-31.63 26.934-26.935 31.63-32.134 31.63-35.013 0-4.827-4.09-8.751-9.123-8.751-3.748 0-5.902 1.813-26.477 22.29l-22.396 22.29V161.293h-9.28zm-86.946 162.402c-17.286.024-30.241 5.04-42.398 16.411-8.6 8.044-13.832 15.762-17.435 25.713l-2.592 7.159-45.366.304L0 373.586v26.624l45.366.304 45.366.303 2.567 7.091c3.905 10.787 7.848 16.69 16.737 25.077 8.172 7.709 18.697 13.76 27.553 15.84 7.612 1.787 26.073 1.472 32.998-.562 10.323-3.032 19.754-8.704 27.78-16.708 24.805-24.738 24.797-64.496-.02-89.314-12.771-12.77-26.903-18.57-45.19-18.545zm189.792.01c-4.188.032-8.127.367-11.285 1.042-27.91 5.971-49.77 33.268-49.77 62.151 0 27.744 20.105 54.286 46.495 61.383 9.722 2.615 27.46 2.33 36.152-.582 20.148-6.75 36.39-23.049 42.038-42.181l1.389-4.7 45.98-.304 45.977-.302V373.587l-45.977-.303-45.98-.304-1.39-4.7c-5.19-17.586-19.866-33.307-38.104-40.822-5.902-2.432-16.312-3.823-25.525-3.752zm-189.815 27.26c7.545-.02 9.77.49 16.463 3.786 12.843 6.323 19.783 17.585 19.918 32.32.067 7.257-.425 9.275-3.955 16.195-4.678 9.171-12.244 15.706-21.352 18.448-14.165 4.263-28 .237-38.212-11.121-12.826-14.266-11.536-37.323 2.814-50.287 7.517-6.791 14.083-9.313 24.324-9.34zm192.522.02c11.51.038 18.931 3.3 26.603 11.695 7.279 7.964 9.754 15.076 9.162 26.336-.724 13.78-7.532 24.283-19.76 30.48-15.68 7.945-36.509 2.49-46.167-12.091-12.337-18.625-5.23-43.961 14.981-53.416 5.212-2.437 8.187-3.027 15.18-3.004z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
3
frontend/resources/images/icons/nodes-snap.svg
Normal file
3
frontend/resources/images/icons/nodes-snap.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
|
||||
<path d="M155.038 59.376c-7.443-.052-15.18.864-20.535 2.69-20.133 6.863-36.071 23.005-41.768 42.3l-1.455 4.93H0V135.979h91.28l1.475 4.931c6 20.05 23.953 37.66 44.136 43.29 7.054 1.969 25.896 2 33.194.057 21.222-5.65 39.566-23.908 45.167-44.949 2.249-8.45 2.153-25.69-.186-33.57-6.428-21.65-22.802-38.026-44.453-44.453-4.174-1.24-9.786-1.867-15.575-1.908zm190.565.095c-6.156.014-12.202.613-16.216 1.793-24.192 7.11-41.7 26.563-45.921 51.019-2.774 16.072.83 32.936 9.836 46.025 8.177 11.885 24.185 23.284 36.883 26.265 7.662 1.8 26.08 1.473 33.003-.582 20.662-6.134 37.43-22.234 43.66-41.922l1.928-6.09H500v-26.683h-91.28l-1.455-4.93c-5.868-19.876-24.577-37.914-44.784-43.177-4.455-1.16-10.721-1.732-16.878-1.718zm.347 27.059c5.526-.055 11.025.973 15.419 3.092 11.058 5.335 17.918 14.416 20.621 27.303 1.127 5.372 1.028 7.631-.603 13.85-1.072 4.085-3.256 9.502-4.855 12.035-3.862 6.118-12.413 12.5-19.61 14.637-15.79 4.69-31.64-1.088-41.055-14.966-4.473-6.592-6.104-11.96-6.115-20.09-.015-13.175 8.437-26.475 20.625-32.46 4.496-2.208 10.048-3.346 15.573-3.401zm-192.238.201c7.87-.048 10.279.433 15.847 3.168 7.574 3.72 14.092 10.413 17.62 18.095 3.449 7.512 3.449 21.775 0 29.287-3.496 7.614-10.033 14.372-17.375 17.964-12.344 6.04-28.096 4.476-38.476-3.818-21.412-17.11-17.161-50.665 7.883-62.228 3.857-1.781 7.645-2.426 14.501-2.468zm.58 174.538V303.032h45.244V261.269h-22.622zm135.731 0V303.032h46.404V261.269h-23.202zm-135.73 66.125l.017 23.492c.013 16.594.519 25.622 1.727 30.747 4.72 20.018 20.215 38.639 40.16 48.261 11.226 5.417 20.761 8.334 32.89 10.063 10.704 1.526 33.464.318 44.695-2.372 5.423-1.3 14.82-4.809 20.882-7.8 20.746-10.235 35.624-28.679 40.018-49.607 1.154-5.497 1.71-15.336 1.724-30.452l.02-22.332H290.024v21.618c0 13.581-.525 23.392-1.411 26.392-2.034 6.884-11.44 15.955-19.783 19.076-19.65 7.352-46.297 4.152-58.41-7.013-9.153-8.437-10.211-12.165-10.702-37.741l-.428-22.332h-22.497z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -225,3 +225,76 @@
|
|||
padding: $x-small;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-actions {
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.path-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid $color-gray-20;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.viewport-actions-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-right: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
.viewport-actions-entry {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
margin: 0 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover svg {
|
||||
fill: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-actions-entry-wide {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
|
||||
svg {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.path-actions > :first-child .viewport-actions-entry {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.path-actions > :last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.path-actions > :last-child .viewport-actions-entry {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
[app.main.data.workspace.texts :as dwtxt]
|
||||
[app.main.data.workspace.transforms :as dwt]
|
||||
[app.main.data.workspace.drawing :as dwd]
|
||||
[app.main.data.workspace.drawing.path :as dwdp]
|
||||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.main.streams :as ms]
|
||||
|
|
@ -1629,6 +1630,8 @@
|
|||
(def add-shape dwc/add-shape)
|
||||
(def start-edition-mode dwc/start-edition-mode)
|
||||
|
||||
(defn start-path-edit [id] (dwdp/start-path-edit id))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shortcuts
|
||||
|
|
|
|||
|
|
@ -99,6 +99,6 @@
|
|||
(box/handle-drawing-box))))))
|
||||
|
||||
;; Export
|
||||
(def close-drawing-path path/close-drawing-path)
|
||||
#_(def close-drawing-path path/close-drawing-path)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@
|
|||
[app.util.data :as d]
|
||||
[app.util.geom.path :as ugp]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.data.workspace.drawing.common :as common]))
|
||||
[app.main.data.workspace.common :as dwc]
|
||||
[app.main.data.workspace.drawing.common :as common]
|
||||
[app.common.geom.shapes.path :as gsp]))
|
||||
|
||||
;;;;
|
||||
|
||||
|
|
@ -149,14 +151,14 @@
|
|||
(update [_ state]
|
||||
(-> state
|
||||
(assoc-in [:workspace-drawing :object :initialized?] true)
|
||||
(assoc-in [:workspace-drawing :object :last-point] nil)))))
|
||||
(assoc-in [:workspace-local :edit-path :last-point] nil)))))
|
||||
|
||||
(defn finish-path []
|
||||
(ptk/reify ::finish-path
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(-> state
|
||||
(assoc-in [:workspace-drawing :object :last-point] nil)
|
||||
(update :workspace-local dissoc :edit-path)
|
||||
(update-in [:workspace-drawing :object] calculate-selrect)))))
|
||||
|
||||
(defn preview-next-point [{:keys [x y]}]
|
||||
|
|
@ -164,9 +166,9 @@
|
|||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [position (gpt/point x y)
|
||||
{:keys [last-point prev-handler] :as shape} (get-in state [:workspace-drawing :object])
|
||||
{:keys [last-point prev-handler] :as shape} (get-in state [:workspace-local :edit-path])
|
||||
command (next-node shape position last-point prev-handler)]
|
||||
(assoc-in state [:workspace-drawing :object :preview] command)))))
|
||||
(assoc-in state [:workspace-local :edit-path :preview] command)))))
|
||||
|
||||
(defn add-node [{:keys [x y]}]
|
||||
(ptk/reify ::add-node
|
||||
|
|
@ -174,14 +176,11 @@
|
|||
(update [_ state]
|
||||
|
||||
(let [position (gpt/point x y)
|
||||
{:keys [last-point prev-handler]} (get-in state [:workspace-drawing :object])]
|
||||
(update-in
|
||||
state
|
||||
[:workspace-drawing :object]
|
||||
#(-> %
|
||||
(append-node position last-point prev-handler)
|
||||
(assoc :last-point position)
|
||||
(dissoc :prev-handler)))))))
|
||||
{:keys [last-point prev-handler]} (get-in state [:workspace-local :edit-path])]
|
||||
(-> state
|
||||
(assoc-in [:workspace-local :edit-path :last-point] position)
|
||||
(update-in [:workspace-local :edit-path] dissoc :prev-handler)
|
||||
(update-in [:workspace-drawing :object] append-node position last-point prev-handler))))))
|
||||
|
||||
(defn drag-handler [{:keys [x y]}]
|
||||
(ptk/reify ::drag-handler
|
||||
|
|
@ -193,16 +192,16 @@
|
|||
index (dec (count (:content shape)))]
|
||||
(-> state
|
||||
(update-in [:workspace-drawing :object] move-handler index :next true position)
|
||||
(assoc-in [:workspace-drawing :object :drag-handler] position))))))
|
||||
(assoc-in [:workspace-local :edit-path :drag-handler] position))))))
|
||||
|
||||
(defn finish-drag []
|
||||
(ptk/reify ::finish-drag
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [handler (get-in state [:workspace-drawing :object :drag-handler])]
|
||||
(let [handler (get-in state [:workspace-local :edit-path :drag-handler])]
|
||||
(-> state
|
||||
(update-in [:workspace-drawing :object] dissoc :drag-handler)
|
||||
(assoc-in [:workspace-drawing :object :prev-handler] handler))))))
|
||||
(update-in [:workspace-local :edit-path] dissoc :drag-handler)
|
||||
(assoc-in [:workspace-local :edit-path :prev-handler] handler))))))
|
||||
|
||||
(defn make-click-stream
|
||||
[stream down-event]
|
||||
|
|
@ -238,7 +237,6 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
|
||||
;; clicks stream<[MouseEvent, Position]>
|
||||
(let [mouse-down (->> stream (rx/filter ms/mouse-down?))
|
||||
finish-events (->> stream (rx/filter finish-event?))
|
||||
|
||||
|
|
@ -266,10 +264,7 @@
|
|||
(rx/merge mousemove-events
|
||||
mousedown-events)
|
||||
(rx/of (finish-path))
|
||||
(rx/of common/handle-finish-drawing)))
|
||||
|
||||
|
||||
)))
|
||||
(rx/of common/handle-finish-drawing))))))
|
||||
|
||||
#_(def handle-drawing-path
|
||||
(ptk/reify ::handle-drawing-path
|
||||
|
|
@ -331,7 +326,7 @@
|
|||
(rx/of finish-drawing-path
|
||||
common/handle-finish-drawing)))))))
|
||||
|
||||
(defn close-drawing-path []
|
||||
#_(defn close-drawing-path []
|
||||
(ptk/reify ::close-drawing-path
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
|
@ -340,3 +335,121 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(rx/of ::end-path-drawing))))
|
||||
|
||||
|
||||
(defn stop-path-edit []
|
||||
(ptk/reify ::stop-path-edit
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :workspace-local dissoc :edit-path))))
|
||||
|
||||
(defn start-path-edit
|
||||
[id]
|
||||
(ptk/reify ::start-path-edit
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc-in state [:workspace-local :edit-path] {}))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(->> stream
|
||||
(rx/filter #(= % :interrupt))
|
||||
(rx/take 1)
|
||||
(rx/map #(stop-path-edit))))))
|
||||
|
||||
(defn modify-point [index dx dy]
|
||||
(ptk/reify ::modify-point
|
||||
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
||||
(-> state
|
||||
(update-in [:workspace-local :edit-path :content-modifiers (inc index)] assoc
|
||||
:c1x dx :c1y dy)
|
||||
(update-in [:workspace-local :edit-path :content-modifiers index] assoc
|
||||
:x dx :y dy :c2x dx :c2y dy)
|
||||
))))
|
||||
|
||||
(defn modify-handler [index type dx dy]
|
||||
(ptk/reify ::modify-point
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [s1 (if (= type :prev) -1 1)
|
||||
s2 (if (= type :prev) 1 -1)]
|
||||
(-> state
|
||||
(update-in [:workspace-local :edit-path :content-modifiers (inc index)] assoc
|
||||
:c1x (* s1 dx) :c1y (* s1 dy))
|
||||
(update-in [:workspace-local :edit-path :content-modifiers index] assoc
|
||||
:c2x (* s2 dx) :c2y (* s2 dy) ))
|
||||
))))
|
||||
|
||||
(defn apply-content-modifiers []
|
||||
(ptk/reify ::apply-content-modifiers
|
||||
;;ptk/UpdateEvent
|
||||
;;(update [_ state]
|
||||
;; (update-in state [:workspace-local :edit-path] dissoc :content-modifiers))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [id (get-in state [:workspace-local :edition])
|
||||
page-id (:current-page-id state)
|
||||
old-content (get-in state [:workspace-data :pages-index page-id :objects id :content])
|
||||
old-selrect (get-in state [:workspace-data :pages-index page-id :objects id :selrect])
|
||||
content-modifiers (get-in state [:workspace-local :edit-path :content-modifiers])
|
||||
new-content (gsp/apply-content-modifiers old-content content-modifiers)
|
||||
new-selrect (gsh/content->selrect new-content)
|
||||
rch [{:type :mod-obj
|
||||
:id id
|
||||
:page-id page-id
|
||||
:operations [{:type :set :attr :content :val new-content}
|
||||
{:type :set :attr :selrect :val new-selrect}]}]
|
||||
|
||||
uch [{:type :mod-obj
|
||||
:id id
|
||||
:page-id page-id
|
||||
:operations [{:type :set :attr :content :val old-content}
|
||||
{:type :set :attr :selrect :val old-selrect}]}]]
|
||||
|
||||
(rx/of (dwc/commit-changes rch uch {:commit-local? true})
|
||||
(fn [state] (update-in state [:workspace-local :edit-path] dissoc :content-modifiers)))))))
|
||||
|
||||
(defn start-move-path-point
|
||||
[index]
|
||||
(ptk/reify ::start-move-path-point
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [start-point @ms/mouse-position
|
||||
start-delta-x (get-in state [:workspace-local :edit-path :content-modifiers index :x] 0)
|
||||
start-delta-y (get-in state [:workspace-local :edit-path :content-modifiers index :y] 0)]
|
||||
(rx/concat
|
||||
(->> ms/mouse-position
|
||||
(rx/take-until (->> stream (rx/filter ms/mouse-up?)))
|
||||
(rx/map #(modify-point
|
||||
index
|
||||
(+ start-delta-x (- (:x %) (:x start-point)))
|
||||
(+ start-delta-y (- (:y %) (:y start-point))))))
|
||||
(rx/concat (rx/of (apply-content-modifiers)))
|
||||
)))))
|
||||
|
||||
(defn start-move-handler
|
||||
[index type]
|
||||
(ptk/reify ::start-move-handler
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [[cx cy] (if (= :prev type) [:c2x :c2y] [:c1x :c1y])
|
||||
cidx (if (= :prev type) index (inc index))
|
||||
|
||||
start-point @ms/mouse-position
|
||||
start-delta-x (get-in state [:workspace-local :edit-path :content-modifiers cidx cx] 0)
|
||||
start-delta-y (get-in state [:workspace-local :edit-path :content-modifiers cidx cy] 0)]
|
||||
|
||||
(rx/concat
|
||||
(->> ms/mouse-position
|
||||
(rx/take-until (->> stream (rx/filter ms/mouse-up?)))
|
||||
(rx/map #(modify-handler
|
||||
index
|
||||
type
|
||||
(+ start-delta-x (- (:x %) (:x start-point)))
|
||||
(+ start-delta-y (- (:y %) (:y start-point)))))
|
||||
)
|
||||
(rx/concat (rx/of (apply-content-modifiers))))))))
|
||||
|
|
|
|||
|
|
@ -128,6 +128,14 @@
|
|||
(def checkbox-checked (icon-xref :checkbox-checked))
|
||||
(def checkbox-unchecked (icon-xref :checkbox-unchecked))
|
||||
(def code (icon-xref :code))
|
||||
(def nodes-add (icon-xref :nodes-add))
|
||||
(def nodes-corner (icon-xref :nodes-corner))
|
||||
(def nodes-curve (icon-xref :nodes-curve))
|
||||
(def nodes-join (icon-xref :nodes-join))
|
||||
(def nodes-merge (icon-xref :nodes-merge))
|
||||
(def nodes-remove (icon-xref :nodes-remove))
|
||||
(def nodes-separate (icon-xref :nodes-separate))
|
||||
(def nodes-snap (icon-xref :nodes-snap))
|
||||
|
||||
(def loader-pencil
|
||||
(mf/html
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
[app.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]]
|
||||
[app.main.ui.workspace.scroll :as scroll]
|
||||
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport coordinates]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport viewport-actions coordinates]]
|
||||
[app.util.dom :as dom]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
(when (contains? layout :rules)
|
||||
[:& workspace-rules {:local local}])
|
||||
|
||||
[:& viewport-actions]
|
||||
[:& viewport {:file file
|
||||
:local local
|
||||
:layout layout}]]]
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
[app.common.geom.matrix :as gmt]
|
||||
[app.util.debug :refer [debug?]]
|
||||
[app.main.ui.workspace.shapes.outline :refer [outline]]
|
||||
[app.main.ui.measurements :as msr]))
|
||||
[app.main.ui.measurements :as msr]
|
||||
[app.main.ui.workspace.shapes.path :refer [path-editor]]))
|
||||
|
||||
(def rotation-handler-size 25)
|
||||
(def resize-point-radius 4)
|
||||
|
|
@ -366,8 +367,13 @@
|
|||
[:& text-edition-selection-handlers {:shape shape
|
||||
:zoom zoom
|
||||
:color color}]
|
||||
(and (or (= type :path)
|
||||
(= type :curve))
|
||||
|
||||
(= (= type :path)
|
||||
(= edition (:id shape)))
|
||||
[:& path-editor {:zoom zoom
|
||||
:shape shape}]
|
||||
|
||||
(and (= type :curve)
|
||||
(= edition (:id shape)))
|
||||
[:& path-edition-selection-handlers {:shape shape
|
||||
:zoom zoom
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
(defn- on-mouse-down
|
||||
[event {:keys [id type] :as shape}]
|
||||
(let [selected @refs/selected-shapes
|
||||
edition @refs/selected-edition
|
||||
selected? (contains? selected id)
|
||||
drawing? @refs/selected-drawing-tool
|
||||
button (.-which (.-nativeEvent event))]
|
||||
|
|
@ -35,9 +36,8 @@
|
|||
nil
|
||||
|
||||
(= type :frame)
|
||||
(when selected?
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dw/start-move-selected)))
|
||||
(do (dom/stop-propagation event)
|
||||
(st/emit! (dw/start-move-selected)))
|
||||
|
||||
:else
|
||||
(do
|
||||
|
|
@ -50,7 +50,8 @@
|
|||
(st/emit! (dw/deselect-all)))
|
||||
(st/emit! (dw/select-shape id))))
|
||||
|
||||
(st/emit! (dw/start-move-selected)))))))
|
||||
(when (not= edition id)
|
||||
(st/emit! (dw/start-move-selected))))))))
|
||||
|
||||
(defn on-context-menu
|
||||
[event shape]
|
||||
|
|
|
|||
|
|
@ -10,22 +10,40 @@
|
|||
(ns app.main.ui.workspace.shapes.path
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[app.common.data :as d]
|
||||
[okulary.core :as l]
|
||||
[app.util.data :as d]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.timers :as ts]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.constants :as c]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.drawing :as dr]
|
||||
[app.main.data.workspace.drawing.path :as drp]
|
||||
[app.main.ui.keyboard :as kbd]
|
||||
[app.main.ui.shapes.path :as path]
|
||||
[app.main.ui.shapes.filters :as filters]
|
||||
[app.main.ui.shapes.shape :refer [shape-container]]
|
||||
[app.main.ui.workspace.shapes.common :as common]
|
||||
[app.util.geom.path :as ugp]
|
||||
[app.common.geom.shapes.path :as gsp]))
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes.path :as gsp]
|
||||
[app.main.ui.cursors :as cur]
|
||||
[app.main.ui.icons :as i]))
|
||||
|
||||
(def primary-color "#1FDEA7")
|
||||
(def secondary-color "#DB00FF")
|
||||
(def black-color "#000000")
|
||||
(def white-color "#FFFFFF")
|
||||
(def gray-color "#B1B2B5")
|
||||
|
||||
(def edit-path-ref
|
||||
(l/derived :edit-path refs/workspace-local))
|
||||
|
||||
(def content-modifiers-ref
|
||||
(l/derived :content-modifiers edit-path-ref))
|
||||
|
||||
(mf/defc path-wrapper
|
||||
{::mf/wrap-props false}
|
||||
|
|
@ -43,12 +61,15 @@
|
|||
on-double-click (mf/use-callback
|
||||
(mf/deps shape)
|
||||
(fn [event]
|
||||
(prn "?? PATH")
|
||||
(when (and (not (::dr/initialized? shape)) (hover? (:id shape)))
|
||||
(when (not (::dr/initialized? shape))
|
||||
(do
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (dw/start-edition-mode (:id shape)))))))]
|
||||
(st/emit! (dw/start-edition-mode (:id shape))
|
||||
(dw/start-path-edit (:id shape)))))))
|
||||
|
||||
content-modifiers (mf/deref content-modifiers-ref)
|
||||
shape (update shape :content gsp/apply-content-modifiers content-modifiers)]
|
||||
|
||||
[:> shape-container {:shape shape
|
||||
:on-double-click on-double-click
|
||||
|
|
@ -57,75 +78,142 @@
|
|||
[:& path/path-shape {:shape shape
|
||||
:background? true}]]))
|
||||
|
||||
(mf/defc path-actions [{:keys [shape]}]
|
||||
[:div.path-actions
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry i/nodes-add]
|
||||
[:div.viewport-actions-entry i/nodes-remove]]
|
||||
|
||||
(mf/defc path-handler [{:keys [point handler zoom selected]}]
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry i/nodes-merge]
|
||||
[:div.viewport-actions-entry i/nodes-join]
|
||||
[:div.viewport-actions-entry i/nodes-separate]]
|
||||
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry i/nodes-corner]
|
||||
[:div.viewport-actions-entry i/nodes-curve]]
|
||||
|
||||
[:div.viewport-actions-group
|
||||
[:div.viewport-actions-entry i/nodes-snap]]])
|
||||
|
||||
|
||||
(mf/defc path-preview [{:keys [zoom command from]}]
|
||||
(when (not= :move-to (:command command))
|
||||
[:path {:style {:fill "transparent"
|
||||
:stroke secondary-color
|
||||
:stroke-width (/ 1 zoom)}
|
||||
:d (ugp/content->path [{:command :move-to
|
||||
:params {:x (:x from)
|
||||
:y (:y from)}}
|
||||
command])}]))
|
||||
|
||||
(mf/defc path-point [{:keys [index position stroke-color fill-color zoom]}]
|
||||
(let [{:keys [x y]} position
|
||||
on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event))
|
||||
on-mouse-down (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (drp/start-move-path-point index)))]
|
||||
[:circle
|
||||
{:cx x
|
||||
:cy y
|
||||
:r (/ 3 zoom)
|
||||
:on-click on-click
|
||||
:on-mouse-down on-mouse-down
|
||||
:style {:cursor cur/resize-alt
|
||||
:stroke-width (/ 1 zoom)
|
||||
:stroke (or stroke-color black-color)
|
||||
:fill (or fill-color white-color)}}]))
|
||||
|
||||
(mf/defc path-handler [{:keys [index point handler zoom selected type]}]
|
||||
(when (and point handler)
|
||||
(let [{:keys [x y]} handler]
|
||||
[:g.handler
|
||||
(let [{:keys [x y]} handler
|
||||
on-click (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event))
|
||||
on-mouse-down (fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (drp/start-move-handler index type)))]
|
||||
[:g.handler {:class (name type)}
|
||||
[:line
|
||||
{:x1 (:x point)
|
||||
:y1 (:y point)
|
||||
:x2 x
|
||||
:y2 y
|
||||
:style {:stroke "#B1B2B5"
|
||||
:style {:stroke gray-color
|
||||
:stroke-width (/ 1 zoom)}}]
|
||||
[:rect
|
||||
{:x (- x (/ 3 zoom))
|
||||
:y (- y (/ 3 zoom))
|
||||
:width (/ 6 zoom)
|
||||
:height (/ 6 zoom)
|
||||
:style {:stroke-width (/ 1 zoom)
|
||||
:stroke (if selected "#000000" "#1FDEA7")
|
||||
:fill (if selected "#1FDEA7" "#FFFFFF")}}]])))
|
||||
:on-click on-click
|
||||
:on-mouse-down on-mouse-down
|
||||
:style {:cursor cur/resize-alt
|
||||
:stroke-width (/ 1 zoom)
|
||||
:stroke (if selected black-color primary-color)
|
||||
:fill (if selected primary-color white-color)}}]])))
|
||||
|
||||
(mf/defc path-editor
|
||||
[{:keys [shape zoom]}]
|
||||
|
||||
(let [points (gsp/content->points (:content shape))
|
||||
drag-handler (:drag-handler shape)
|
||||
prev-handler (:prev-handler shape)
|
||||
last-command (last (:content shape))
|
||||
selected false
|
||||
(let [{:keys [content]} shape
|
||||
{:keys [drag-handler prev-handler preview content-modifiers]} (mf/deref edit-path-ref)
|
||||
content (gsp/apply-content-modifiers content content-modifiers)
|
||||
points (gsp/content->points content)
|
||||
last-command (last content)
|
||||
last-p (last points)
|
||||
handlers (ugp/extract-handlers (:content shape))
|
||||
handlers (if (and prev-handler (not drag-handler))
|
||||
(conj handlers {:point last-p :prev prev-handler})
|
||||
handlers)
|
||||
]
|
||||
selected false]
|
||||
|
||||
[:g.path-editor
|
||||
(when (and (:preview shape) (not (:drag-handler shape)))
|
||||
[:*
|
||||
[:path {:style {:fill "transparent"
|
||||
:stroke "#DB00FF"
|
||||
:stroke-width (/ 1 zoom)}
|
||||
:d (ugp/content->path [{:command :move-to
|
||||
:params {:x (:x last-p)
|
||||
:y (:y last-p)}}
|
||||
(:preview shape)])}]
|
||||
[:circle
|
||||
{:cx (-> shape :preview :params :x)
|
||||
:cy (-> shape :preview :params :y)
|
||||
:r (/ 3 zoom)
|
||||
:style {:stroke-width (/ 1 zoom)
|
||||
:stroke "#DB00FF"
|
||||
:fill "#FFFFFF"}}]])
|
||||
(when (and preview (not drag-handler))
|
||||
[:g.preview {:style {:pointer-events "none"}}
|
||||
[:& path-preview {:command preview
|
||||
:from last-p
|
||||
:zoom zoom}]
|
||||
[:& path-point {:position (:params preview)
|
||||
:fill-color secondary-color
|
||||
:zoom zoom}]])
|
||||
|
||||
(for [{:keys [point prev next]} handlers]
|
||||
[:*
|
||||
[:& path-handler {:point point
|
||||
:handler prev
|
||||
:zoom zoom
|
||||
:type :prev
|
||||
:selected false}]
|
||||
[:& path-handler {:point point
|
||||
:handler next
|
||||
:zoom zoom
|
||||
:type :next
|
||||
:selected false}]])
|
||||
(for [[index [cmd next]] (d/enumerate (d/with-next content))]
|
||||
(let [point (gpt/point (:params cmd))]
|
||||
[:g.path-node
|
||||
(when (= :curve-to (:command cmd))
|
||||
[:& path-handler {:point point
|
||||
:handler (gpt/point (-> cmd :params :c2x) (-> cmd :params :c2y))
|
||||
:zoom zoom
|
||||
:type :prev
|
||||
:index index
|
||||
:selected false}])
|
||||
|
||||
(when (= :curve-to (:command next))
|
||||
[:& path-handler {:point point
|
||||
:handler (gpt/point (-> next :params :c1x) (-> next :params :c1y))
|
||||
:zoom zoom
|
||||
:type :next
|
||||
:index index
|
||||
:selected false}])
|
||||
|
||||
(when (and (= index (dec (count content)))
|
||||
prev-handler (not drag-handler))
|
||||
[:& path-handler {:point point
|
||||
:handler prev-handler
|
||||
:zoom zoom
|
||||
:type :prev
|
||||
:index index
|
||||
:selected false}])
|
||||
|
||||
[:& path-point {:position point
|
||||
:stroke-color (when-not selected primary-color)
|
||||
:fill-color (when selected primary-color)
|
||||
:index index
|
||||
:zoom zoom}]]))
|
||||
|
||||
(when drag-handler
|
||||
[:*
|
||||
[:g.drag-handler
|
||||
(when (not= :move-to (:command last-command))
|
||||
[:& path-handler {:point last-p
|
||||
:handler (ugp/opposite-handler last-p drag-handler)
|
||||
|
|
@ -136,14 +224,4 @@
|
|||
:handler drag-handler
|
||||
:zoom zoom
|
||||
:type :drag
|
||||
:selected false}]])
|
||||
|
||||
(for [{:keys [x y] :as point} points]
|
||||
[:circle
|
||||
{:cx x
|
||||
:cy y
|
||||
:r (/ 3 zoom)
|
||||
:style {:stroke-width (/ 1 zoom)
|
||||
:stroke (if selected "#000000" "#1FDEA7")
|
||||
:fill (if selected "#1FDEA7" "#FFFFFF")}
|
||||
}])]))
|
||||
:selected false}]])]))
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
|
|
@ -52,7 +52,8 @@
|
|||
[goog.events :as events]
|
||||
[potok.core :as ptk]
|
||||
[promesa.core :as p]
|
||||
[rumext.alpha :as mf])
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.ui.workspace.shapes.path :refer [path-actions]])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Coordinates Widget
|
||||
|
|
@ -222,7 +223,6 @@
|
|||
drawing-obj (:object drawing)
|
||||
zoom (or zoom 1)
|
||||
|
||||
|
||||
on-mouse-down
|
||||
(mf/use-callback
|
||||
(mf/deps drawing-tool edition)
|
||||
|
|
@ -234,15 +234,13 @@
|
|||
alt? (kbd/alt? event)]
|
||||
(st/emit! (ms/->MouseEvent :down ctrl? shift? alt?))
|
||||
(cond
|
||||
(and (= 1 (.-which event)))
|
||||
|
||||
(and (= 1 (.-which event)) (not edition))
|
||||
(if drawing-tool
|
||||
(when (not (#{:comments :path} drawing-tool))
|
||||
(st/emit! (dd/start-drawing drawing-tool)))
|
||||
(st/emit! dw/handle-selection))
|
||||
|
||||
(and (not edition)
|
||||
(= 2 (.-which event)))
|
||||
(and (= 2 (.-which event)))
|
||||
(handle-viewport-positioning viewport-ref)))))
|
||||
|
||||
on-context-menu
|
||||
|
|
@ -294,12 +292,16 @@
|
|||
|
||||
on-double-click
|
||||
(mf/use-callback
|
||||
(mf/deps edition)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(let [ctrl? (kbd/ctrl? event)
|
||||
shift? (kbd/shift? event)
|
||||
alt? (kbd/alt? event)]
|
||||
(st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt?)))))
|
||||
(st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt?))
|
||||
|
||||
(if edition
|
||||
(st/emit! dw/clear-edition-mode)))))
|
||||
|
||||
on-key-down
|
||||
(mf/use-callback
|
||||
|
|
@ -610,3 +612,13 @@
|
|||
(when (= options-mode :prototype)
|
||||
[:& interactions {:selected selected}])]]))
|
||||
|
||||
|
||||
(mf/defc viewport-actions []
|
||||
(let [edition (mf/deref refs/selected-edition)
|
||||
selected (mf/deref refs/selected-objects)
|
||||
shape (-> selected first)]
|
||||
(when (and (= (count selected) 1)
|
||||
(= (:id shape) edition)
|
||||
(= :path (:type shape)))
|
||||
[:div.viewport-actions
|
||||
[:& path-actions {:shape shape}]])))
|
||||
|
|
|
|||
|
|
@ -213,9 +213,3 @@
|
|||
opposite (gpt/add point (gpt/negate phv))]
|
||||
opposite))
|
||||
|
||||
(defn extract-handlers [content]
|
||||
(let [extract (fn [{param1 :params :as cmd1} {param2 :params :as cmd2}]
|
||||
{:point (gpt/point (:x param1) (:y param1))
|
||||
:prev (when (:c2x param1) (gpt/point (:c2x param1) (:c2y param1)))
|
||||
:next (when (:c1x param2) (gpt/point (:c1x param2) (:c1y param2)))})]
|
||||
(map extract content (d/concat [] (rest content) [nil]))))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue