From 1576e33564865bbfcdde62b16304ee111623bc0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jan 2024 17:09:03 +0100 Subject: [PATCH 01/26] :bug: Fix color of titles in the swap panel --- .../sidebar/options/menus/component.scss | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index a98ec453ad..0171600c9b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -96,11 +96,7 @@ } .component-swap { - .element-set-title { - @include titleTipography; - text-transform: uppercase; - margin: $s-16 $s-4 0 $s-12; - } + svg { stroke: var(--icon-foreground); @@ -179,11 +175,7 @@ padding-left: $s-20; } - .library-name { - @include titleTipography; - @include textEllipsis; - margin: $s-20 $s-4 0 $s-12; - } + .listing-options-wrapper { width: 100%; @@ -383,3 +375,17 @@ } } } + +.library-name { + @include titleTipography; + @include textEllipsis; + margin: $s-20 $s-4 0 $s-12; + color: var(--title-foreground-color); +} + +.element-set-title { + @include titleTipography; + text-transform: uppercase; + margin: $s-16 $s-4 0 $s-12; + color: var(--title-foreground-color); +} \ No newline at end of file From 492ce43b4a41ad7052ee266bea98d52e7b6cec85 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Fri, 5 Jan 2024 11:13:52 +0100 Subject: [PATCH 02/26] :tada: Add ha language to the i18n subsystem --- frontend/gulpfile.js | 1 + frontend/src/app/util/i18n.cljs | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index ce92a04e28..93f6f810d1 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -90,6 +90,7 @@ function readLocales() { ["ja_jp", "jpn_JP"], // ["fi", "fin_FI"], ["uk", "ukr_UA"], + "ha" ]; const result = {}; diff --git a/frontend/src/app/util/i18n.cljs b/frontend/src/app/util/i18n.cljs index fc79d676f3..acb5816973 100644 --- a/frontend/src/app/util/i18n.cljs +++ b/frontend/src/app/util/i18n.cljs @@ -30,6 +30,7 @@ {:label "Euskera (community)" :value "eu"} {:label "Français (community)" :value "fr"} {:label "Gallego (Community)" :value "gl"} + {:label "Hausa (Community)" :value "ha"} {:label "Hrvatski (Community)" :value "hr"} {:label "Italiano (community)" :value "it"} {:label "Norsk - Bokmål (community)" :value "nb_no"} From e7d4fc3c4fc81449276752fefdd10ab6879d4ff1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jan 2024 17:59:42 +0100 Subject: [PATCH 03/26] :bug: Fix swap panel thumbnail gallery appearance --- .../styles/common/refactor/design-tokens.scss | 2 + .../sidebar/options/menus/component.cljs | 5 +- .../sidebar/options/menus/component.scss | 235 +++++++++--------- 3 files changed, 124 insertions(+), 118 deletions(-) diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index c9717d2e24..a20913f925 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -207,6 +207,8 @@ --assets-component-background-color-disabled: var( --off-white ); // We don't want this color to change with palette + --assets-component-border-color: var(--color-background-tertiary); + --assets-component-border-selected: var(--color-select); --radio-btns-background-color: var(--color-background-tertiary); --radio-btn-background-color-selected: var(--color-background-quaternary); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index 40cef86426..e5f1a9479c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -343,9 +343,11 @@ :on-change toggle-list-style :name "swap-listing-style"} [:& radio-button {:icon i/view-as-list-refactor + :icon-class (stl/css :radio-button) :value "list" :id "swap-opt-list"}] [:& radio-button {:icon i/flex-grid-refactor + :icon-class (stl/css :radio-button) :value "grid" :id "swap-opt-grid"}]]] @@ -376,7 +378,8 @@ root-shape (ctf/get-component-root data item) loop? (or (contains? parent-components (:main-instance-id item)) (contains? parent-components (:id item)))] - [:& component-swap-item {:item item + [:& component-swap-item {:key (:id item) + :item item :loop loop? :shapes shapes :file-id current-library-id diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 0171600c9b..61d3282994 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -96,16 +96,6 @@ } .component-swap { - - - svg { - stroke: var(--icon-foreground); - fill: var(--icon-foreground); - height: $s-12; - width: $s-12; - cursor: pointer; - } - .search-field { display: flex; align-items: center; @@ -175,8 +165,6 @@ padding-left: $s-20; } - - .listing-options-wrapper { width: 100%; } @@ -262,116 +250,119 @@ } } } + } + } +} - .component-group { - @include titleTipography; - text-align: left; - display: flex; - align-items: center; - margin: 0 $s-16 $s-8 $s-8; - justify-content: space-between; - cursor: pointer; - height: $s-24; - svg { - height: $s-8; - width: $s-8; - } +.component-group { + @include titleTipography; + text-align: left; + display: flex; + align-items: center; + margin: 0 $s-16 $s-8 $s-8; + justify-content: space-between; + cursor: pointer; + height: $s-24; + svg { + height: $s-8; + width: $s-8; + } + div { + display: flex; + width: 90%; + } + span { + @include textEllipsis; + } + .component-group-path { + direction: rtl; + } + .component-group-name { + color: var(--assets-item-name-foreground-color); + } + &:hover { + color: var(--assets-item-name-foreground-color-hover); + .component-group-name { + color: var(--assets-item-name-foreground-color-hover); + } + } +} - div { - display: flex; - width: 90%; - } - span { - @include textEllipsis; - } - .component-group-path { - direction: rtl; - } - .component-group-name { - color: var(--assets-item-name-foreground-color); - } - &:hover { - color: var(--assets-item-name-foreground-color-hover); - .component-group-name { - color: var(--assets-item-name-foreground-color-hover); - } - } - } +.component-grid { + display: grid; + grid-template-columns: repeat(2, $s-124); + grid-auto-rows: $s-124; + gap: $s-4; +} + +.grid-cell { + @include flexCenter; + place-items: center; + flex-wrap: wrap; + position: relative; + padding: $s-8; + border-radius: $br-8; + background-color: var(--assets-component-background-color); + overflow: hidden; + --assets-component-current-border-color: var(--assets-component-border-color); + border: $s-4 solid var(--assets-component-current-border-color); + cursor: pointer; + img { + height: auto; + width: auto; + max-height: 100%; + max-width: 100%; + pointer-events: none; + border: 0; + } + svg { + height: 100%; + width: 100%; + stroke: none; + object-fit: contain; + } + .component-name { + @include titleTipography; + @include textEllipsis; + display: none; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + padding: $s-2; + text-align: center; + direction: rtl; + } + + &:hover { + background-color: var(--assets-item-background-color-hover); + .component-name { + display: block; + color: var(--assets-item-name-foreground-color-hover); + background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%); } } - .component-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-auto-rows: calc(10vh + $s-16); - gap: $s-4; - margin: 0 $s-4 0 $s-8; - .grid-cell { - @include flexCenter; - flex-wrap: wrap; - position: relative; - padding: $s-8; - border-radius: $br-8; - background-color: var(--assets-component-background-color); - overflow: hidden; - cursor: pointer; - img { - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - pointer-events: none; - border: 0; - } - svg { - height: 10vh; - width: 10vh; - stroke: none; - } - .component-name { - @include titleTipography; - @include textEllipsis; - display: none; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - padding: $s-2; - text-align: center; - direction: rtl; - } + &.selected { + --assets-component-current-border-color: var(--assets-item-border-color); + .component-name { + color: var(--assets-item-name-foreground-color-hover); + } + } - &:hover { - background-color: var(--assets-item-background-color-hover); - .component-name { - display: block; - color: var(--assets-item-name-foreground-color-hover); - background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%); - } - } - - &.selected { - border: $s-1 solid var(--assets-item-border-color); - .component-name { - color: var(--assets-item-name-foreground-color-hover); - } - } - - &.disabled { - background: var(--assets-component-background-color-disabled); - cursor: auto; - svg { - cursor: auto; - } - .component-name { - background: linear-gradient( - to top, - var(--assets-component-background-color-disabled) 0%, - transparent 100% - ); - color: var(--assets-item-name-foreground-color-hover); - } - } + &.disabled { + background: var(--assets-component-background-color-disabled); + cursor: auto; + svg { + cursor: auto; + } + .component-name { + background: linear-gradient( + to top, + var(--assets-component-background-color-disabled) 0%, + transparent 100% + ); + color: var(--assets-item-name-foreground-color-hover); } } } @@ -388,4 +379,14 @@ text-transform: uppercase; margin: $s-16 $s-4 0 $s-12; color: var(--title-foreground-color); -} \ No newline at end of file +} + +.radio-button { + svg { + stroke: var(--icon-foreground); + fill: var(--icon-foreground); + height: $s-12; + width: $s-12; + cursor: pointer; + } +} From 480251c41c73ed92d6341fe9542b27f0da733ecf Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 4 Jan 2024 13:05:06 +0100 Subject: [PATCH 04/26] :recycle: Remove new-css-system from viewer --- .../styles/common/refactor/basic-rules.scss | 2 + frontend/resources/styles/main-default.scss | 4 - .../styles/main/partials/inspect.scss | 487 ------------------ .../styles/main/partials/viewer-header.scss | 234 --------- .../main/partials/viewer-thumbnails.scss | 192 ------- .../styles/main/partials/viewer.scss | 214 -------- frontend/src/app/main/ui/viewer.cljs | 468 ++++++----------- frontend/src/app/main/ui/viewer.scss | 38 ++ frontend/src/app/main/ui/viewer/comments.cljs | 232 +++------ frontend/src/app/main/ui/viewer/header.cljs | 456 ++++++---------- frontend/src/app/main/ui/viewer/header.scss | 1 + .../main/ui/viewer/inspect/annotation.cljs | 12 +- .../main/ui/viewer/inspect/annotation.scss | 20 + .../ui/viewer/inspect/attributes/blur.cljs | 49 +- .../ui/viewer/inspect/attributes/blur.scss | 21 +- .../ui/viewer/inspect/attributes/common.cljs | 214 +++----- .../ui/viewer/inspect/attributes/common.scss | 196 +++---- .../ui/viewer/inspect/attributes/fill.cljs | 70 +-- .../ui/viewer/inspect/attributes/fill.scss | 7 +- .../viewer/inspect/attributes/geometry.cljs | 61 +-- .../viewer/inspect/attributes/geometry.scss | 14 +- .../ui/viewer/inspect/attributes/image.cljs | 78 +-- .../ui/viewer/inspect/attributes/image.scss | 58 ++- .../ui/viewer/inspect/attributes/layout.cljs | 68 +-- .../ui/viewer/inspect/attributes/layout.scss | 14 +- .../inspect/attributes/layout_element.cljs | 65 +-- .../inspect/attributes/layout_element.scss | 14 +- .../ui/viewer/inspect/attributes/shadow.cljs | 36 +- .../ui/viewer/inspect/attributes/shadow.scss | 21 +- .../ui/viewer/inspect/attributes/stroke.cljs | 102 ++-- .../ui/viewer/inspect/attributes/stroke.scss | 22 +- .../ui/viewer/inspect/attributes/svg.cljs | 66 +-- .../ui/viewer/inspect/attributes/svg.scss | 16 +- .../ui/viewer/inspect/attributes/text.cljs | 309 ++++------- .../ui/viewer/inspect/attributes/text.scss | 67 +-- .../app/main/ui/viewer/inspect/exports.cljs | 161 ++---- .../app/main/ui/viewer/inspect/exports.scss | 158 +++--- .../src/app/main/ui/viewer/interactions.cljs | 144 ++---- .../src/app/main/ui/viewer/share_link.scss | 2 + .../src/app/main/ui/viewer/thumbnails.cljs | 178 ++----- 40 files changed, 1299 insertions(+), 3272 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/inspect.scss delete mode 100644 frontend/resources/styles/main/partials/viewer-header.scss delete mode 100644 frontend/resources/styles/main/partials/viewer-thumbnails.scss delete mode 100644 frontend/resources/styles/main/partials/viewer.scss create mode 100644 frontend/src/app/main/ui/viewer/inspect/annotation.scss diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 25d70b6f66..5b79ec81da 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -408,6 +408,8 @@ border-radius: $br-4; box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%); svg { + width: $s-16; + height: $s-16; display: none; stroke: var(--input-checkbox-inactive-foreground-color); } diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 8690f68d52..f3fd5e5bcc 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -53,9 +53,6 @@ // Partials //################################################# -@import "main/partials/viewer"; -@import "main/partials/viewer-header"; -@import "main/partials/viewer-thumbnails"; @import "main/partials/activity-bar"; @import "main/partials/debug-icons-preview"; @import "main/partials/editable-label"; @@ -67,6 +64,5 @@ @import "main/partials/user-settings"; @import "main/partials/workspace"; @import "main/partials/color-bullet"; -@import "main/partials/inspect"; @import "main/partials/exception-page"; @import "main/partials/signup-questions"; diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss deleted file mode 100644 index bc83f6c05c..0000000000 --- a/frontend/resources/styles/main/partials/inspect.scss +++ /dev/null @@ -1,487 +0,0 @@ -// 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/. -// -// Copyright (c) KALEIDOS INC - -.inspect-svg-wrapper { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.expand-button, -.copy-button { - visibility: hidden; - opacity: 0; - transition: opacity 0.3s; - position: absolute; - background: none; - border: none; - padding: 0; - cursor: pointer; - - .code-block & { - visibility: visible; - opacity: 1; - } - - svg { - width: 16px; - height: 16px; - fill: $color-gray-20; - transition: fill 0.3s; - - &:hover { - fill: $color-primary; - } - } -} - -.expand-button { - right: 24px; - top: -1px; - - svg { - transform: rotate(45deg); - } -} -.copy-button { - right: 0; - top: 0; -} - -.attributes-block { - user-select: text; - - border-bottom: 1px solid $color-gray-60; - padding-bottom: 0.5rem; - font-size: $fs12; - - .attributes-text-block { - border-bottom: 1px solid $color-gray-60; - } - - & :last-child { - border-bottom: none; - } - - .attributes-label { - color: $color-gray-20; - } - - .attributes-value { - color: $color-white; - } - - .attributes-block-title { - position: relative; - color: $color-gray-10; - padding: 0.5rem; - font-size: $fs14; - - .copy-button { - padding: 0.5rem; - margin-top: 0.25rem; - } - } - - .attributes-unit-row { - position: relative; - display: flex; - flex-direction: row; - padding: 0.6rem 1.6rem 0.6rem 0.5rem; - - .attributes-label, - .attributes-value { - margin-right: 0.5rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 50%; - .items { - margin-right: 5px; - } - } - .copy-button { - padding: 0.6rem 0.5rem; - margin-top: 0.25rem; - } - } - - .attributes-color-row { - display: flex; - flex-direction: column; - padding: 1rem 0; - position: relative; - - .attributes-color-id { - display: flex; - align-items: center; - - & > * { - margin: 0 0.5rem; - } - margin-bottom: 0.5rem; - } - - .attributes-color-value { - display: flex; - align-items: center; - - & > * { - margin: 0 0.5rem; - } - - & :last-child { - margin-right: 0; - } - } - - .color-text { - width: 3rem; - text-transform: uppercase; - text-overflow: ellipsis; - overflow: hidden; - } - - .attributes-color-display { - display: flex; - } - - .color-bullet { - width: 24px; - height: 24px; - border-radius: 50%; - border: 1px solid $color-gray-30; - } - - .hide-color .color-bullet { - visibility: hidden; - } - .copy-button { - padding: 1rem 0.5rem; - margin-top: 0.25rem; - } - - select { - font-size: $fs12; - margin: 0; - background: none; - color: $color-gray-20; - border: none; - border-bottom: 1px solid $color-gray-30; - padding: 0 1rem 0.25rem 0.25rem; - margin-top: 2px; - background-image: url("/images/icons/arrow-down-white.svg"); - background-repeat: no-repeat; - background-position: 95% 48%; - background-size: 10px; - cursor: pointer; - outline: none; - &:focus, - &:focus-within { - border: 1px solid $color-primary; - } - - option { - padding: 1rem; - background-color: $color-gray-50; - border: none; - } - } - } - - .attributes-content-row { - position: relative; - margin: 0.5rem; - width: calc(100% - 1rem); - - .attributes-content { - overflow-y: auto; - max-height: 5rem; - background: $color-gray-60; - border-radius: $br4; - padding: 1rem 0.5rem; - color: $color-gray-10; - white-space: pre-wrap; - } - - .copy-button { - padding: 0.5rem; - margin-top: 0.25rem; - } - } - - .attributes-image-row { - position: relative; - display: flex; - padding: 0.25rem; - align-items: center; - justify-content: center; - margin: 0.5rem; - background: $color-gray-60; - border-radius: $br4; - - width: calc(100% - 1rem); - min-height: 5rem; - - img { - max-height: 8rem; - max-width: 100%; - width: auto; - } - } - - .attributes-shadow-row { - position: relative; - display: flex; - margin: 0.5rem; - padding-right: 2rem; - justify-content: space-between; - - & > :first-child { - color: $color-gray-10; - } - - .attributes-shadow { - display: flex; - margin-left: 4px; - } - } - - .attributes-stroke-row { - position: relative; - display: flex; - margin: 0.5rem; - padding-right: 2rem; - justify-content: space-between; - } - - .attributes-typography-name-row { - position: relative; - margin-top: 0.5rem; - border: 1px solid $color-black; - border-radius: $br4; - margin: 0.5rem; - display: flex; - flex-direction: row; - align-items: center; - - .copy-button { - padding: 0.5rem; - margin-top: 0.25rem; - } - } - - .attributes-typography-row { - position: relative; - margin: 0.5rem; - padding-right: 2rem; - - .typography-sample { - font-size: $fs16; - } - } - - .download-button { - display: block; - text-align: center; - border: 1px solid $color-gray-60; - background-color: $color-gray-60; - padding: 0.5rem 1rem; - color: $color-gray-10; - width: calc(100% - 1rem); - border-radius: $br4; - margin: 0.5rem; - cursor: pointer; - text-decoration: none; - - &:hover { - background-color: $color-primary; - color: $color-black; - } - } - - .attributes-block-title, - .attributes-unit-row, - .attributes-color-row, - .attributes-shadow-row, - .attributes-stroke-row, - .attributes-typography-row, - .attributes-content-row, - .attributes-typography-name-row { - &:hover { - .expand-button, - .copy-button { - visibility: visible; - opacity: 1; - } - } - } - - .attributes-shadow-block, - .attributes-stroke-block, - .attributes-fill-block { - border-top: 1px solid $color-gray-60; - } - - .attributes-shadow-blocks :first-child, - .attributes-stroke-blocks :first-child, - .attributes-fill-blocks :first-child { - border-top: none; - } -} - -.code-block { - position: relative; - margin-top: 0.5rem; - border-top: 1px solid $color-gray-60; - - &:last-child { - margin-bottom: 18px; - } - - &:hover { - .code-row-lang { - .expand-button, - .copy-button { - visibility: visible; - opacity: 1; - } - } - } - - .code-row-lang { - color: $color-gray-10; - position: relative; - display: flex; - flex-direction: row; - font-size: $fs14; - margin: 0.5rem; - - .expand-button, - .copy-button { - margin-top: 8px; - } - - .custom-select { - border: 1px solid $color-gray-40; - border-radius: 3px; - cursor: pointer; - padding: 0.25rem 1.5rem 0.25rem 0.25rem; - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - - .dropdown-button { - position: absolute; - right: 0.25rem; - top: 7px; - - svg { - fill: $color-gray-40; - height: 10px; - width: 10px; - } - } - } - - .custom-select-dropdown { - background-color: $color-white; - border-radius: 3px; - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); - left: 0; - max-height: 30rem; - min-width: 7rem; - position: absolute; - overflow-y: auto; - top: 30px; - z-index: 12; - - li { - color: $color-gray-60; - cursor: pointer; - font-size: 0.875rem; - display: flex; - gap: 0 10px; - justify-content: flex-start; - padding: 0.5rem; - - .checked-element { - padding-left: 0; - } - } - - svg { - visibility: hidden; - width: 8px; - height: 8px; - background: none; - margin: 0.25rem; - fill: $color-black; - } - - .is-selected svg { - visibility: visible; - } - } - } - - .code-row-display { - line-height: 1; - margin: 0.5rem; - font-size: $fs14; - max-height: var(--code-height, 400px); - overflow: auto; - - .code-display { - font-family: monospace; - border-radius: $br4; - padding: 0.5rem 1rem; - overflow: hidden; - white-space: pre; - min-width: fit-content; - background: $color-gray-60; - user-select: text; - - .hljs-attr { - color: #a6e22e; - } - .hljs-comment { - color: $color-gray-30; - } - .hljs-string { - color: #66d9ef; - } - } - } - .resize-area { - width: 100%; - position: absolute; - bottom: -15px; - left: 0; - height: 18px; - z-index: 1; - cursor: ns-resize; - } -} - -.element-options > :first-child { - border-top: none; -} - -.inspect-annotation { - .content { - background-color: $color-gray-60; - color: $color-white; - margin: 0 10px; - padding: 10px; - font-size: $fs14; - overflow-wrap: anywhere; - white-space: pre-wrap; - } -} diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss deleted file mode 100644 index 550148aa50..0000000000 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ /dev/null @@ -1,234 +0,0 @@ -.viewer-header { - align-items: center; - background-color: $color-gray-50; - border-bottom: 1px solid $color-gray-60; - display: grid; - grid-template-columns: 1fr 130px 1fr; - height: 48px; - padding: 0 $size-4 0 55px; - top: 0; - position: absolute; - justify-content: space-between; - width: 100vw; - - a { - font-size: $fs12; - } - - .nav-zone { - justify-content: flex-start; - width: 100%; - } - - .main-icon { - align-items: center; - background-color: $color-gray-60; - cursor: pointer; - display: flex; - height: 100%; - justify-content: center; - position: absolute; - left: 0; - top: 0; - width: 48px; - - a { - height: 30px; - - svg { - fill: $color-gray-30; - height: 30px; - width: 28px; - } - - &:hover { - svg { - fill: $color-primary; - } - } - } - } - - .options-zone { - align-items: center; - display: flex; - justify-content: flex-end; - position: relative; - z-index: 10; - - > * { - margin-left: $size-5; - @media only screen and (max-width: 1366px) { - margin-left: 0.5rem; - } - } - - .btn-primary { - flex-shrink: 0; - svg { - display: none; - } - @media only screen and (max-width: 1366px) { - padding: 0 0.5rem; - svg { - display: inline-block; - } - span { - display: none; - } - } - &:hover { - svg { - fill: $color-gray-20; - } - } - } - - .view-options { - align-items: center; - cursor: pointer; - display: flex; - position: relative; - - > span { - color: $color-gray-10; - font-size: $fs14; - margin-right: $size-1; - } - - > .icon { - align-items: center; - cursor: pointer; - display: flex; - justify-content: center; - - svg { - fill: $color-gray-10; - height: 12px; - width: 12px; - } - - &:hover { - > svg { - fill: $color-primary; - } - } - } - - .dropdown { - min-width: 295px; - top: 45px; - left: -25px; - } - } - } - - .sitemap-zone { - align-items: center; - cursor: pointer; - display: flex; - padding: $size-1; - position: relative; - width: 100%; - - .icon { - display: flex; - justify-content: center; - align-items: center; - - svg { - fill: $color-gray-20; - height: 12px; - margin-right: $size-2; - width: 12px; - } - } - - .breadcrumb { - display: grid; - grid-template-columns: auto 10px auto 10px auto; - } - - .breadcrumb, - .current-frame { - position: relative; - - > span { - color: $color-gray-20; - margin-right: $size-1; - font-size: $fs14; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - > .dropdown { - top: 45px; - right: 10px; - } - } - - .current-frame { - display: grid; - grid-template-columns: 14px 1fr; - span { - color: $color-white; - margin-right: $size-1; - } - - .counters { - color: $color-gray-20; - } - } - } - - .mode-zone { - display: flex; - height: 100%; - - .mode-zone-button { - background: inherit; - border: none; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - - height: 100%; - width: 48px; - - svg { - fill: $color-gray-20; - width: 20px; - height: 20px; - } - - &.active { - background: $color-gray-60; - svg { - fill: $color-primary; - } - } - } - } - - .users-zone { - align-items: center; - cursor: pointer; - display: flex; - margin: 0; - - li { - margin-left: $size-2; - position: relative; - - img { - border: 3px solid #f3dd14; - border-radius: 50%; - flex-shrink: 0; - height: 25px; - width: 25px; - } - } - } -} diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss deleted file mode 100644 index 2ba7a859fe..0000000000 --- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss +++ /dev/null @@ -1,192 +0,0 @@ -.viewer-thumbnails { - grid-row: 1 / span 1; - grid-column: 1 / span 1; - - background-color: $color-gray-50; - overflow: hidden; - display: flex; - flex-direction: column; - z-index: 11; - - &.invisible { - visibility: hidden; - pointer-events: none; - } - - &.expanded { - grid-row: 1 / span 2; - - .btn-expand svg { - transform: rotate(180deg); - } - } - - .thumbnails-summary { - padding: 0.5rem 1rem; - display: flex; - justify-content: space-between; - - .buttons { - display: flex; - justify-content: space-between; - width: 50px; - - span { - cursor: pointer; - } - - svg { - fill: $color-gray-30; - height: 20px; - width: 20px; - - &:hover { - fill: $color-white; - } - } - - .btn-close { - transform: rotate(45deg); - } - } - - .counter { - color: $color-gray-10; - } - } - - .thumbnails-content { - display: grid; - grid-template-columns: 40px auto 40px; - grid-template-rows: auto; - } - - .left-scroll-handler { - grid-column: 1 / span 1; - grid-row: 1 / span 1; - - background-color: $color-gray-50; - opacity: 0; - display: flex; - z-index: 12; - cursor: pointer; - - flex-direction: column; - justify-content: center; - align-items: center; - - &:hover { - opacity: 0.5; - } - - svg { - transform: rotate(180deg); - width: 30px; - height: 30px; - } - } - - .right-scroll-handler { - grid-column: 3 / span 1; - grid-row: 1 / span 1; - - background-color: $color-gray-50; - opacity: 0; - display: flex; - z-index: 12; - cursor: pointer; - - flex-direction: column; - justify-content: center; - align-items: center; - - &:hover { - opacity: 0.5; - } - - svg { - width: 30px; - height: 30px; - } - } - - .thumbnails-list { - grid-column: 1 / span 3; - grid-row: 1 / span 1; - - display: flex; - flex-wrap: nowrap; - overflow: hidden; - - .thumbnails-list-inside { - display: flex; - position: relative; - } - } - - .thumbnails-list-expanded { - grid-column: 1 / span 3; - grid-row: 1 / span 1; - - display: flex; - flex-wrap: wrap; - overflow: hidden; - } - - .thumbnail-item { - display: flex; - flex-direction: column; - padding: 1rem; - cursor: pointer; - } - - .thumbnail-preview { - background-color: $color-gray-40; - width: 120px; - min-height: 120px; - height: 120px; - border: 1px solid $color-gray-20; - border-radius: $br2; - padding: 4px; - - display: flex; - justify-content: center; - align-items: center; - - svg { - width: 100%; - height: 100%; - } - - &.selected { - border-color: $color-primary; - } - - &:hover { - border-color: $color-primary; - outline: 2px solid $color-primary; - } - } - - .thumbnail-info { - padding: 0.5rem 0; - width: 120px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - span { - font-size: $fs12; - } - } -} - -.thumbnail-close { - grid-row: 1 / span 2; - grid-column: 1 / span 1; - z-index: 11; - - &.invisible { - display: none; - } -} diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss deleted file mode 100644 index 3a52326a7a..0000000000 --- a/frontend/resources/styles/main/partials/viewer.scss +++ /dev/null @@ -1,214 +0,0 @@ -.viewer-content { - background-color: black; - display: grid; - grid-template-rows: 232px auto; - grid-template-columns: 1fr; -} -.fullscreen.viewer-layout { - .viewer-section { - & .viewer-go-prev, - & .viewer-go-next { - .arrow { - display: none; - } - } - } -} -.fullscreen.viewer-layout.force-visible { - .viewer-section { - & .viewer-go-prev, - & .viewer-go-next { - .arrow { - display: flex; - } - } - } -} - -.viewer-loader { - svg#loader-pencil { - fill: $color-gray-50; - } -} - -.viewer-section { - height: calc(100vh - 48px); - grid-row: 1 / span 2; - grid-column: 1 / span 1; - display: flex; - align-items: center; - flex-flow: wrap; - overflow: auto; - - &.fullscreen { - height: 100vh; - margin-top: 0px; - } - - & .viewer-go-prev, - & .viewer-go-next { - position: absolute; - height: 100%; - display: flex; - align-items: center; - width: 53px; - z-index: 2; - .arrow { - display: flex; - align-items: center; - justify-content: center; - border-radius: $br12; - background: $color-gray-50; - width: 24px; - height: 24px; - cursor: pointer; - fill: $color-gray-30; - - svg { - width: 12px; - height: 12px; - } - - &:hover { - background: $color-primary; - fill: $color-black; - } - } - } - - & .viewer-go-next { - right: 8px; - width: 46px; - svg { - margin-left: 2px; - } - } - - & .viewer-go-next.right-bar { - right: 0; - } - - & .viewer-go-prev { - left: 0; - padding-left: 29px; - svg { - margin-right: 2px; - } - } - - & .viewer-go-prev.left-bar { - left: 0; - } - - & .viewer-bottom { - position: absolute; - bottom: 8px; - height: 30px; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 2; - - &.left-bar { - width: 100%; - } - - .reset { - display: flex; - align-items: center; - border-radius: $br12; - background: $color-gray-50; - width: 24px; - height: 24px; - cursor: pointer; - fill: $color-gray-30; - margin-left: 29px; - - svg { - margin-left: 4px; - width: 15px; - height: 15px; - } - - &:hover { - background: $color-primary; - fill: $color-black; - } - } - - .counter { - display: flex; - align-items: center; - justify-content: center; - border-radius: $br12; - background: $color-gray-50; - width: 67px; - height: 25px; - fill: $color-gray-20; - } - } - - & .viewer-wrapper { - margin-left: auto; - margin-right: auto; - position: relative; - } - - & .viewer-clipper { - display: grid; - grid-template-rows: 1fr; - grid-template-columns: 1fr; - justify-items: center; - align-items: center; - overflow: hidden; - - svg { - transform-origin: center; - } - } - - & .viewer-wrapper-out { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - & .comments-right-sidebar { - position: absolute; - right: 0; - top: 50px; - width: 256px; - height: calc(100vh - 48px); - z-index: 9; - } - - .empty-state { - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - } -} - -.viewport-container { - clip-path: inset(0 0 0 0); - grid-column: 1 / 1; - grid-row: 1 / 1; - - .not-fixed { - position: absolute; - } - - .fixed { - position: fixed; - pointer-events: none; - - .frame-children g { - pointer-events: auto; - } - } -} diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index b7e7307660..2f86b0bce3 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -92,45 +92,29 @@ (mf/defc viewer-pagination [{:keys [index num-frames left-bar right-bar comment-sidebar] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - go-prev-frame (mf/use-fn #(st/emit! dv/select-prev-frame)) + (let [go-prev-frame (mf/use-fn #(st/emit! dv/select-prev-frame)) go-next-frame (mf/use-fn #(st/emit! dv/select-next-frame)) go-first-frame (mf/use-fn #(st/emit! dv/select-first-frame))] - (if new-css-system - [:* - (when (pos? index) - [:button {:class (stl/css-case :viewer-go-prev true - :left-bar left-bar) - :on-click go-prev-frame} - i/arrow-refactor]) - (when (< (+ index 1) num-frames) - [:button {:class (stl/css-case :viewer-go-next true - :comment-sidebar comment-sidebar - :right-bar right-bar) - :on-click go-next-frame} - i/arrow-refactor]) - [:div {:class (stl/css-case :viewer-bottom true - :left-bar left-bar)} - [:button {:on-click go-first-frame - :class (stl/css :reset-button)} - i/reload-refactor] - [:span {:class (stl/css :counter)} - (str/join " / " [(+ index 1) num-frames])] - [:span]]] - - - ;; OLD - [:* - (when (pos? index) - [:div.viewer-go-prev {:class (when left-bar "left-bar")} - [:div.arrow {:on-click go-prev-frame} i/go-prev]]) - (when (< (+ index 1) num-frames) - [:div.viewer-go-next {:class (when right-bar "right-bar")} - [:div.arrow {:on-click go-next-frame} i/go-next]]) - [:div.viewer-bottom {:class (when left-bar "left-bar")} - [:div.reset {:on-click go-first-frame} i/reset] - [:div.counter (str/join " / " [(+ index 1) num-frames])] - [:span]]]))) + [:* + (when (pos? index) + [:button {:class (stl/css-case :viewer-go-prev true + :left-bar left-bar) + :on-click go-prev-frame} + i/arrow-refactor]) + (when (< (+ index 1) num-frames) + [:button {:class (stl/css-case :viewer-go-next true + :comment-sidebar comment-sidebar + :right-bar right-bar) + :on-click go-next-frame} + i/arrow-refactor]) + [:div {:class (stl/css-case :viewer-bottom true + :left-bar left-bar)} + [:button {:on-click go-first-frame + :class (stl/css :reset-button)} + i/reload-refactor] + [:span {:class (stl/css :counter)} + (str/join " / " [(+ index 1) num-frames])] + [:span]]])) (mf/defc viewer-pagination-and-sidebar {::mf/wrap [mf/memo]} @@ -175,21 +159,21 @@ [:* (when (or close-click-outside? background-overlay?) - [:div.viewer-overlay-background - {:class (dom/classnames :visible background-overlay?) - :style {:width (:width wrapper-size) - :height (:height wrapper-size) - :position "absolute" - :left 0 - :top 0} - :on-click on-click}]) + [:div {:class (stl/css-case :viewer-overlay-background true + :visible background-overlay?) + :style {:width (:width wrapper-size) + :height (:height wrapper-size) + :position "absolute" + :left 0 + :top 0} + :on-click on-click}]) - [:div.viewport-container.viewer-overlay - {:id (dm/str "overlay-" (:id overlay-frame)) - :style {:width (:width size) - :height (:height size) - :left (* (:x overlay-position) zoom) - :top (* (:y overlay-position) zoom)}} + [:div {:class (stl/css :viewer-overlay :viewport-container) + :id (dm/str "overlay-" (:id overlay-frame)) + :style {:width (:width size) + :height (:height size) + :left (* (:x overlay-position) zoom) + :top (* (:y overlay-position) zoom)}} [:& interactions/viewport {:frame overlay-frame @@ -205,141 +189,72 @@ [{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref size frame interactions-mode overlays zoom section index]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:* - [:& viewer-pagination-and-sidebar - {:section section - :index index - :page page - :users users - :frame frame - :interactions-mode interactions-mode}] + [:* + [:& viewer-pagination-and-sidebar + {:section section + :index index + :page page + :users users + :frame frame + :interactions-mode interactions-mode}] - [:div {:class (stl/css :viewer-wrapper) - :style {:width (:width wrapper-size) - :height (:height wrapper-size)}} - [:div {:class (stl/css :viewer-clipper)} + [:div {:class (stl/css :viewer-wrapper) + :style {:width (:width wrapper-size) + :height (:height wrapper-size)}} + [:div {:class (stl/css :viewer-clipper)} - (when orig-frame - [:div {:class (stl/css :viewport-container) - :ref orig-viewport-ref - :style {:width (:width orig-size) - :height (:height orig-size) - :position "relative"}} + (when orig-frame + [:div {:class (stl/css :viewport-container) + :ref orig-viewport-ref + :style {:width (:width orig-size) + :height (:height orig-size) + :position "relative"}} - [:& interactions/viewport - {:frame orig-frame - :base-frame orig-frame - :frame-offset (gpt/point 0 0) - :size orig-size - :page page - :users users - :interactions-mode interactions-mode}]]) + [:& interactions/viewport + {:frame orig-frame + :base-frame orig-frame + :frame-offset (gpt/point 0 0) + :size orig-size + :page page + :users users + :interactions-mode interactions-mode}]]) - [:div {:class (stl/css :viewport-container) - :ref current-viewport-ref - :style {:width (:width size) - :height (:height size) - :position "relative"}} + [:div {:class (stl/css :viewport-container) + :ref current-viewport-ref + :style {:width (:width size) + :height (:height size) + :position "relative"}} - [:& interactions/viewport - {:frame frame - :base-frame frame - :frame-offset (gpt/point 0 0) - :size size - :page page - :interactions-mode interactions-mode}] + [:& interactions/viewport + {:frame frame + :base-frame frame + :frame-offset (gpt/point 0 0) + :size size + :page page + :interactions-mode interactions-mode}] - (for [overlay overlays] - [:& viewer-overlay - {:overlay overlay - :key (dm/str (:id overlay)) - :page page - :frame frame - :zoom zoom - :wrapper-size wrapper-size - :interactions-mode interactions-mode}])]] + (for [overlay overlays] + [:& viewer-overlay + {:overlay overlay + :key (dm/str (:id overlay)) + :page page + :frame frame + :zoom zoom + :wrapper-size wrapper-size + :interactions-mode interactions-mode}])]] - (when (= section :comments) - [:& comments-layer {:file file - :users users - :frame frame - :page page - :zoom zoom}])]] - - - - ;; OLD - [:* - [:& viewer-pagination-and-sidebar - {:section section - :index index - :page page - :users users - :frame frame - :interactions-mode interactions-mode}] - - [:div.viewer-wrapper - {:style {:width (:width wrapper-size) - :height (:height wrapper-size)}} - [:div.viewer-clipper - (when orig-frame - [:div.viewport-container - {:ref orig-viewport-ref - :style {:width (:width orig-size) - :height (:height orig-size) - :position "relative"}} - - [:& interactions/viewport - {:frame orig-frame - :base-frame orig-frame - :frame-offset (gpt/point 0 0) - :size orig-size - :page page - :users users - :interactions-mode interactions-mode}]]) - - [:div.viewport-container - {:ref current-viewport-ref - :style {:width (:width size) - :height (:height size) - :position "relative"}} - - [:& interactions/viewport - {:frame frame - :base-frame frame - :frame-offset (gpt/point 0 0) - :size size - :page page - :interactions-mode interactions-mode}] - - (for [overlay overlays] - [:& viewer-overlay - {:overlay overlay - :key (dm/str (:id overlay)) - :page page - :frame frame - :zoom zoom - :wrapper-size wrapper-size - :interactions-mode interactions-mode}])]] - - - (when (= section :comments) - [:& comments-layer {:file file - :users users - :frame frame - :page page - :zoom zoom}])]]))) + (when (= section :comments) + [:& comments-layer {:file file + :users users + :frame frame + :page page + :zoom zoom}])]]) (mf/defc viewer-content {::mf/wrap-props false} [{:keys [data page-id share-id section index interactions-mode] :as props}] (let [{:keys [file users project permissions]} data - - new-css-system (mf/use-ctx ctx/new-css-system) - allowed (or (= section :interactions) (and (= section :comments) @@ -597,153 +512,80 @@ fonts (into #{} (keep :font-id) text-nodes)] (run! fonts/ensure-loaded! fonts)))) - (if new-css-system - [:div#viewer-layout - {:class (stl/css-case - :force-visible (:show-thumbnails local) - :viewer-layout (not= section :inspect) - :inspect-layout (= section :inspect) - :fullscreen fullscreen?)} + [:div#viewer-layout + {:class (stl/css-case + :force-visible (:show-thumbnails local) + :viewer-layout (not= section :inspect) + :inspect-layout (= section :inspect) + :fullscreen fullscreen?)} - [:div {:class (stl/css :viewer-content)} - [:& header/header {:project project - :index index - :file file - :page page - :frame frame - :permissions permissions - :zoom zoom - :section section - :interactions-mode interactions-mode}] + [:div {:class (stl/css :viewer-content)} + [:& header/header {:project project + :index index + :file file + :page page + :frame frame + :permissions permissions + :zoom zoom + :section section + :interactions-mode interactions-mode}] - [:button {:on-click on-thumbnails-close - :class (stl/css-case :thumbnails-close true - :invisible (not (:show-thumbnails local false)))}] + [:button {:on-click on-thumbnails-close + :class (stl/css-case :thumbnails-close true + :invisible (not (:show-thumbnails local false)))}] - [:& thumbnails-panel {:frames frames - :show? (:show-thumbnails local false) - :page page - :index index - :thumbnail-data (:thumbnails file)}] + [:& thumbnails-panel {:frames frames + :show? (:show-thumbnails local false) + :page page + :index index + :thumbnail-data (:thumbnails file)}] - [:section {:id "viewer-section" - :ref viewer-section-ref - :class (stl/css-case :viewer-section true - :fulscreen fullscreen?) - :on-click click-on-screen} - (cond - (empty? frames) - [:section {:class (stl/css :empty-state)} - [:span (tr "viewer.empty-state")]] + [:section {:id "viewer-section" + :ref viewer-section-ref + :class (stl/css-case :viewer-section true + :fulscreen fullscreen?) + :on-click click-on-screen} + (cond + (empty? frames) + [:section {:class (stl/css :empty-state)} + [:span (tr "viewer.empty-state")]] - (nil? frame) - [:section {:class (stl/css :empty-state)} - (when (some? index) - [:span (tr "viewer.frame-not-found")])] + (nil? frame) + [:section {:class (stl/css :empty-state)} + (when (some? index) + [:span (tr "viewer.frame-not-found")])] - (some? frame) - (if (= :inspect section) - [:& inspect/viewport - {:frame frame - :page page - :file file - :section section - :local local - :size size - :index index - :viewer-pagination viewer-pagination - :interactions-mode interactions-mode - :share-id share-id}] + (some? frame) + (if (= :inspect section) + [:& inspect/viewport + {:frame frame + :page page + :file file + :section section + :local local + :size size + :index index + :viewer-pagination viewer-pagination + :interactions-mode interactions-mode + :share-id share-id}] - [:& (mf/provider ctx/current-zoom) {:value zoom} - [:& viewer-wrapper - {:wrapper-size wrapper-size - :orig-frame orig-frame - :orig-viewport-ref orig-viewport-ref - :orig-size orig-size - :page page - :file file - :users users - :current-viewport-ref current-viewport-ref - :size size - :frame frame - :interactions-mode interactions-mode - :overlays overlays - :zoom zoom - :section section - :index index}]]))]]] - - ;; OLD - [:div#viewer-layout - {:class (dom/classnames - :force-visible (:show-thumbnails local) - :viewer-layout (not= section :inspect) - :inspect-layout (= section :inspect) - :fullscreen fullscreen?)} - - [:div.viewer-content - [:& header/header {:project project - :index index - :file file - :page page - :frame frame - :permissions permissions - :zoom zoom - :section section - :interactions-mode interactions-mode}] - [:div.thumbnail-close {:on-click on-thumbnails-close - :class (dom/classnames :invisible (not (:show-thumbnails local false)))}] - [:& thumbnails-panel {:frames frames - :show? (:show-thumbnails local false) - :page page - :index index - :thumbnail-data (:thumbnails file)}] - [:section.viewer-section {:id "viewer-section" - :ref viewer-section-ref - :class (if fullscreen? "fullscreen" "") - :on-click click-on-screen} - (cond - (empty? frames) - [:section.empty-state - [:span (tr "viewer.empty-state")]] - - (nil? frame) - [:section.empty-state - (when (some? index) - [:span (tr "viewer.frame-not-found")])] - - (some? frame) - (if (= :inspect section) - [:& inspect/viewport - {:frame frame - :page page - :file file - :section section - :local local - :size size - :index index - :viewer-pagination viewer-pagination - :interactions-mode interactions-mode - :share-id share-id}] - - - [:& (mf/provider ctx/current-zoom) {:value zoom} - [:& viewer-wrapper - {:wrapper-size wrapper-size - :orig-frame orig-frame - :orig-viewport-ref orig-viewport-ref - :orig-size orig-size - :page page - :file file - :users users - :current-viewport-ref current-viewport-ref - :size size - :frame frame - :interactions-mode interactions-mode - :overlays overlays - :zoom zoom - :section section - :index index}]]))]]]))) + [:& (mf/provider ctx/current-zoom) {:value zoom} + [:& viewer-wrapper + {:wrapper-size wrapper-size + :orig-frame orig-frame + :orig-viewport-ref orig-viewport-ref + :orig-size orig-size + :page page + :file file + :users users + :current-viewport-ref current-viewport-ref + :size size + :frame frame + :interactions-mode interactions-mode + :overlays overlays + :zoom zoom + :section section + :index index}]]))]]])) ;; --- Component: Viewer diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 7825fe3a46..e31ff3b289 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -124,6 +124,7 @@ border-radius: $br-8; width: $s-64; height: $s-32; + color: var(--viewer-thumbnails-control-foreground-color); background-color: var(--viewer-controls-background-color); } @@ -140,3 +141,40 @@ align-items: center; overflow: hidden; } + +.viewer-overlay-background { + position: absolute; + top: 0; + left: 0; + + &.visible { + background-color: rgb(0, 0, 0, 0.2); + } +} + +.viewer-overlay { + position: absolute; +} + +.viewport-container { + clip-path: inset(0 0 0 0); + grid-column: 1 / 1; + grid-row: 1 / 1; + + .not-fixed { + position: absolute; + } + + .fixed { + position: fixed; + pointer-events: none; + + .frame-children g { + pointer-events: auto; + } + } +} + +:global(svg#loader-pencil) { + fill: var(--icon-foreground); +} diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index b9eed98bfd..2514fbb14b 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -18,7 +18,6 @@ [app.main.store :as st] [app.main.ui.comments :as cmt] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.comments :as wc] [app.util.dom :as dom] @@ -31,7 +30,6 @@ ::mf/wrap-props false} [] (let [{cmode :mode cshow :show show-sidebar? :show-sidebar?} (mf/deref refs/comments-local) - new-css-system (mf/use-ctx ctx/new-css-system) show-dropdown? (mf/use-state false) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) @@ -54,103 +52,67 @@ update-options (mf/use-callback + (mf/deps show-sidebar?) (fn [event] (let [mode (-> (dom/get-target event) (dom/get-data "value") - (boolean))] - (st/emit! (dcm/update-options {:show-sidebar? mode})))))] + (boolean)) + _ (prn mode)] + (st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))] - (if new-css-system - [:div {:class (stl/css :view-options) - :on-click toggle-dropdown} - [:span {:class (stl/css :dropdown-title)} - (tr "labels.comments")] - [:span {:class (stl/css :icon-dropdown)} - i/arrow-refactor] - [:& dropdown {:show @show-dropdown? - :on-close hide-dropdown} - [:ul {:class (stl/css :dropdown)} - [:li {:class (stl/css-case :dropdown-element true - :selected (or (= :all cmode) (nil? cmode))) - :data-value :all - :on-click update-mode} + [:div {:class (stl/css :view-options) + :on-click toggle-dropdown} + [:span {:class (stl/css :dropdown-title)} + (tr "labels.comments")] + [:span {:class (stl/css :icon-dropdown)} + i/arrow-refactor] + [:& dropdown {:show @show-dropdown? + :on-close hide-dropdown} + [:ul {:class (stl/css :dropdown)} + [:li {:class (stl/css-case :dropdown-element true + :selected (or (= :all cmode) (nil? cmode))) + :data-value :all + :on-click update-mode} - [:span {:class (stl/css :label)} (tr "labels.show-all-comments")] - (when (or (= :all cmode) (nil? cmode)) - [:span {:class (stl/css :icon)} i/tick-refactor])] + [:span {:class (stl/css :label)} (tr "labels.show-all-comments")] + (when (or (= :all cmode) (nil? cmode)) + [:span {:class (stl/css :icon)} i/tick-refactor])] - [:li {:class (stl/css-case :dropdown-element true - :selected (= :yours cmode)) - :data-value :yours - :on-click update-mode} + [:li {:class (stl/css-case :dropdown-element true + :selected (= :yours cmode)) + :data-value :yours + :on-click update-mode} - [:span {:class (stl/css :label)} - (tr "labels.show-your-comments")] + [:span {:class (stl/css :label)} + (tr "labels.show-your-comments")] - (when (= :yours cmode) - [:span {:class (stl/css :icon)} - i/tick-refactor])] + (when (= :yours cmode) + [:span {:class (stl/css :icon)} + i/tick-refactor])] - [:li {:class (stl/css :separator)}] + [:li {:class (stl/css :separator)}] - [:li {:class (stl/css-case :dropdown-element true - :selected (= :pending cshow)) - :data-value (if (= :pending cshow) :all :pending) - :on-click update-show} + [:li {:class (stl/css-case :dropdown-element true + :selected (= :pending cshow)) + :data-value (if (= :pending cshow) :all :pending) + :on-click update-show} - [:span {:class (stl/css :label)} - (tr "labels.hide-resolved-comments")] - (when (= :pending cshow) - [:span {:class (stl/css :icon)} - i/tick-refactor])] + [:span {:class (stl/css :label)} + (tr "labels.hide-resolved-comments")] + (when (= :pending cshow) + [:span {:class (stl/css :icon)} + i/tick-refactor])] - [:li {:class (stl/css :separator)}] + [:li {:class (stl/css :separator)}] - [:li {:class (stl/css-case :dropdown-element true - :selected show-sidebar?) - :data-value (not show-sidebar?) - :on-click update-options} + [:li {:class (stl/css-case :dropdown-element true + :selected show-sidebar?) + :data-value show-sidebar? + :on-click update-options} - [:span {:class (stl/css :label)} (tr "labels.show-comments-list")] - (when show-sidebar? - [:span {:class (stl/css :icon)} i/tick-refactor])]]]] - - - - ; OLD - [:div.view-options {:on-click toggle-dropdown} - [:span.label (tr "labels.comments")] - [:span.icon i/arrow-down] - [:& dropdown {:show @show-dropdown? - :on-close hide-dropdown} - - [:ul.dropdown.with-check - [:li {:class (dom/classnames :selected (or (= :all cmode) (nil? cmode))) - :data-value :all - :on-click update-mode} - [:span.icon i/tick] - [:span.label (tr "labels.show-all-comments")]] - - [:li {:class (dom/classnames :selected (= :yours cmode)) - :data-value :yours - :on-click update-mode} - [:span.icon i/tick] - [:span.label (tr "labels.show-your-comments")]] - - [:hr] - - [:li {:class (dom/classnames :selected (= :pending cshow)) - :data-value (if (= :pending cshow) :all :pending) - :on-click update-show} - [:span.icon i/tick] - [:span.label (tr "labels.hide-resolved-comments")]] - - [:hr] - [:li {:class (dom/classnames :selected show-sidebar?) - :data-value (not show-sidebar?) - :on-click update-options} - [:span.icon i/tick] - [:span.label (tr "labels.show-comments-list")]]]]]))) + [:span {:class (stl/css :label)} (tr "labels.show-comments-list")] + (when show-sidebar? + [:span {:class (stl/css :icon)} i/tick-refactor])]]]])) (defn- update-thread-position [positions {:keys [id] :as thread}] @@ -162,8 +124,7 @@ (mf/defc comments-layer [{:keys [zoom file users frame page] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - profile (mf/deref refs/profile) + (let [profile (mf/deref refs/profile) local (mf/deref refs/comments-local) open-thread-id (:open local) @@ -234,81 +195,44 @@ (st/emit! (dcm/create-thread-on-viewer params) (dcm/close-thread)))))] - (if new-css-system - [:div {:class (stl/css :comments-section) - :on-click on-click} - [:div {:class (stl/css :viewer-comments-container)} - [:div {:class (stl/css :threads)} - (for [item threads] - [:& cmt/thread-bubble - {:thread item - :position-modifier modifier1 - :zoom zoom - :on-click on-bubble-click - :open? (= (:id item) (:open local)) - :key (:seqn item) - :origin :viewer}]) + [:div {:class (stl/css :comments-section) + :on-click on-click} + [:div {:class (stl/css :viewer-comments-container)} + [:div {:class (stl/css :threads)} + (for [item threads] + [:& cmt/thread-bubble + {:thread item + :position-modifier modifier1 + :zoom zoom + :on-click on-bubble-click + :open? (= (:id item) (:open local)) + :key (:seqn item) + :origin :viewer}]) - (when-let [thread (get threads-map open-thread-id)] - [:& cmt/thread-comments - {:thread thread - :position-modifier modifier1 - :users users - :zoom zoom}]) + (when-let [thread (get threads-map open-thread-id)] + [:& cmt/thread-comments + {:thread thread + :position-modifier modifier1 + :users users + :zoom zoom}]) - (when-let [draft (:draft local)] - [:& cmt/draft-thread - {:draft draft - :position-modifier modifier1 - :on-cancel on-draft-cancel - :on-submit on-draft-submit - :zoom zoom}])]]] - - - [:div.comments-section {:on-click on-click} - [:div.viewer-comments-container - [:div.threads - (for [item threads] - [:& cmt/thread-bubble - {:thread item - :position-modifier modifier1 - :zoom zoom - :on-click on-bubble-click - :open? (= (:id item) (:open local)) - :key (:seqn item) - :origin :viewer}]) - - (when-let [thread (get threads-map open-thread-id)] - [:& cmt/thread-comments - {:thread thread - :position-modifier modifier1 - :users users - :zoom zoom}]) - - (when-let [draft (:draft local)] - [:& cmt/draft-thread - {:draft draft - :position-modifier modifier1 - :on-cancel on-draft-cancel - :on-submit on-draft-submit - :zoom zoom}])]]]))) + (when-let [draft (:draft local)] + [:& cmt/draft-thread + {:draft draft + :position-modifier modifier1 + :on-cancel on-draft-cancel + :on-submit on-draft-submit + :zoom zoom}])]]])) (mf/defc comments-sidebar [{:keys [users frame page]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - profile (mf/deref refs/profile) + (let [profile (mf/deref refs/profile) local (mf/deref refs/comments-local) threads-map (mf/deref refs/comment-threads) threads (->> (vals threads-map) (dcm/apply-filters local profile) (filter (fn [{:keys [position]}] (gsh/has-point? frame position))))] - (if new-css-system - [:aside {:class (stl/css :comments-sidebar)} - [:div {:class (stl/css :settings-bar-inside)} - [:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]] - - - [:aside.settings-bar.settings-bar-right.comments-right-sidebar - [:div.settings-bar-inside - [:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]]))) + [:aside {:class (stl/css :comments-sidebar)} + [:div {:class (stl/css :settings-bar-inside)} + [:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]])) diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 83bf05914a..ab5933155b 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -14,7 +14,6 @@ [app.main.data.viewer.shortcuts :as sc] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] [app.main.ui.export :refer [export-progress-widget]] [app.main.ui.formats :as fmt] [app.main.ui.icons :as i] @@ -45,8 +44,7 @@ on-zoom-fill] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - open* (mf/use-state false) + (let [open* (mf/use-state false) open? (deref open*) open-dropdown (mf/use-fn @@ -72,92 +70,57 @@ (mf/deps on-decrease) (fn [event] (dom/stop-propagation event) - (on-decrease))) + (on-decrease)))] - show-dropdown? (mf/use-state false)] + [:div {:class (stl/css-case :zoom-widget true + :selected open?) + :on-click open-dropdown + :title (tr "workspace.header.zoom")} + [:span {:class (stl/css :label)} (fmt/format-percent zoom)] + [:& dropdown {:show open? + :on-close close-dropdown} + [:ul {:class (stl/css :dropdown)} + [:li {:class (stl/css :basic-zoom-bar)} + [:span {:class (stl/css :zoom-btns)} + [:button {:class (stl/css :zoom-btn) + :on-click on-decrease} + [:span {:class (stl/css :zoom-icon)} + i/remove-refactor]] + [:p {:class (stl/css :zoom-text)} + (fmt/format-percent zoom)] + [:button {:class (stl/css :zoom-btn) + :on-click on-increase} + [:span {:class (stl/css :zoom-icon)} + i/add-refactor]]] + [:button {:class (stl/css :reset-btn) + :on-click on-zoom-reset} + (tr "workspace.header.reset-zoom")]] - (if new-css-system - [:div {:class (stl/css-case :zoom-widget true - :selected open?) - :on-click open-dropdown - :title (tr "workspace.header.zoom")} - [:span {:class (stl/css :label)} (fmt/format-percent zoom)] - [:& dropdown {:show open? - :on-close close-dropdown} - [:ul {:class (stl/css :dropdown)} - [:li {:class (stl/css :basic-zoom-bar)} - [:span {:class (stl/css :zoom-btns)} - [:button {:class (stl/css :zoom-btn) - :on-click on-decrease} - [:span {:class (stl/css :zoom-icon)} - i/remove-refactor]] - [:p {:class (stl/css :zoom-text)} - (fmt/format-percent zoom)] - [:button {:class (stl/css :zoom-btn) - :on-click on-increase} - [:span {:class (stl/css :zoom-icon)} - i/add-refactor]]] - [:button {:class (stl/css :reset-btn) - :on-click on-zoom-reset} - (tr "workspace.header.reset-zoom")]] - - [:li {:class (stl/css :zoom-option) - :on-click on-zoom-fit} - (tr "workspace.header.zoom-fit") - [:span {:class (stl/css :shortcuts)} - (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))] - [:span {:class (stl/css :shortcut-key) - :key (str "zoom-fit-" sc)} sc])]] - [:li {:class (stl/css :zoom-option) - :on-click on-zoom-fill} - (tr "workspace.header.zoom-fill") - [:span {:class (stl/css :shortcuts)} - (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))] - [:span {:class (stl/css :shortcut-key) - :key (str "zoom-fill-" sc)} sc])]] - [:li {:class (stl/css :zoom-option) - :on-click on-fullscreen} - (tr "workspace.header.zoom-full-screen") - [:span {:class (stl/css :shortcuts)} - (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))] - [:span {:class (stl/css :shortcut-key) - :key (str "zoom-fullscreen-" sc)} sc])]]]]] - - - ;; OLD - [:div.zoom-widget {:on-click - (fn [event] - (dom/stop-propagation event) - (reset! show-dropdown? true))} - [:span.label (fmt/format-percent zoom)] - [:span.icon i/arrow-down] - [:& dropdown {:show @show-dropdown? - :on-close #(reset! show-dropdown? false)} - [:ul.dropdown - [:li.basic-zoom-bar - [:span.zoom-btns - [:button {:on-click (fn [event] - (dom/stop-propagation event) - (dom/prevent-default event) - (on-decrease))} "-"] - [:p.zoom-size (fmt/format-percent zoom)] - [:button {:on-click (fn [event] - (dom/stop-propagation event) - (dom/prevent-default event) - (on-increase))} "+"]] - [:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]] - [:li.separator] - [:li {:on-click on-zoom-fit} - (tr "workspace.header.zoom-fit") [:span (sc/get-tooltip :toggle-zoom-style)]] - [:li {:on-click on-zoom-fill} - (tr "workspace.header.zoom-fill") [:span (sc/get-tooltip :toggle-zoom-style)]] - [:li {:on-click on-fullscreen} - (tr "workspace.header.zoom-full-screen") [:span (sc/get-tooltip :toggle-fullscreen)]]]]]))) + [:li {:class (stl/css :zoom-option) + :on-click on-zoom-fit} + (tr "workspace.header.zoom-fit") + [:span {:class (stl/css :shortcuts)} + (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))] + [:span {:class (stl/css :shortcut-key) + :key (str "zoom-fit-" sc)} sc])]] + [:li {:class (stl/css :zoom-option) + :on-click on-zoom-fill} + (tr "workspace.header.zoom-fill") + [:span {:class (stl/css :shortcuts)} + (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))] + [:span {:class (stl/css :shortcut-key) + :key (str "zoom-fill-" sc)} sc])]] + [:li {:class (stl/css :zoom-option) + :on-click on-fullscreen} + (tr "workspace.header.zoom-full-screen") + [:span {:class (stl/css :shortcuts)} + (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))] + [:span {:class (stl/css :shortcut-key) + :key (str "zoom-fullscreen-" sc)} sc])]]]]])) (mf/defc header-options [{:keys [section zoom page file index permissions interactions-mode]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - fullscreen? (mf/deref fullscreen-ref) + (let [fullscreen? (mf/deref fullscreen-ref) toggle-fullscreen (mf/use-callback @@ -196,89 +159,49 @@ (mf/use-fn #(st/emit! dv/zoom-to-fit))] - (if new-css-system - [:div {:class (stl/css :options-zone)} - (case section - :interactions [:* - (when index - [:& flows-menu {:page page :index index}]) - [:& interactions-menu {:interactions-mode interactions-mode}]] - :comments [:& comments-menu] - [:div {:class (stl/css :view-options)}]) + [:div {:class (stl/css :options-zone)} + (case section + :interactions [:* + (when index + [:& flows-menu {:page page :index index}]) + [:& interactions-menu {:interactions-mode interactions-mode}]] + :comments [:& comments-menu] + [:div {:class (stl/css :view-options)}]) - [:& export-progress-widget] + [:& export-progress-widget] - [:& zoom-widget - {:zoom zoom - :on-increase handle-increase - :on-decrease handle-decrease - :on-zoom-reset handle-zoom-reset - :on-zoom-fill handle-zoom-fill - :on-zoom-fit handle-zoom-fit - :on-fullscreen toggle-fullscreen}] + [:& zoom-widget + {:zoom zoom + :on-increase handle-increase + :on-decrease handle-decrease + :on-zoom-reset handle-zoom-reset + :on-zoom-fill handle-zoom-fill + :on-zoom-fit handle-zoom-fit + :on-fullscreen toggle-fullscreen}] - (when (:can-edit permissions) - [:span {:on-click go-to-workspace - :class (stl/css :edit-btn)} - i/curve-refactor]) + (when (:can-edit permissions) + [:span {:on-click go-to-workspace + :class (stl/css :edit-btn)} + i/curve-refactor]) - [:span {:title (tr "viewer.header.fullscreen") - :class (stl/css-case :fullscreen-btn true - :selected fullscreen?) - :on-click toggle-fullscreen} - i/expand-refactor] + [:span {:title (tr "viewer.header.fullscreen") + :class (stl/css-case :fullscreen-btn true + :selected fullscreen?) + :on-click toggle-fullscreen} + i/expand-refactor] - (when (:is-admin permissions) - [:button {:on-click open-share-dialog - :class (stl/css :share-btn)} - (tr "labels.share")]) + (when (:is-admin permissions) + [:button {:on-click open-share-dialog + :class (stl/css :share-btn)} + (tr "labels.share")]) - (when-not (:is-logged permissions) - [:span {:on-click open-login-dialog - :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])] - - - ;; OLD - [:div.options-zone - (case section - :interactions [:* - (when index - [:& flows-menu {:page page :index index}]) - [:& interactions-menu {:interactions-mode interactions-mode}]] - :comments [:& comments-menu] - - [:div.view-options]) - - [:& export-progress-widget] - [:& zoom-widget - {:zoom zoom - :on-increase handle-increase - :on-decrease handle-decrease - :on-zoom-reset handle-zoom-reset - :on-zoom-fill handle-zoom-fill - :on-zoom-fit handle-zoom-fit - :on-fullscreen toggle-fullscreen}] - - [:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left - {:alt (tr "viewer.header.fullscreen") - :on-click toggle-fullscreen} - (if fullscreen? - i/full-screen-off - i/full-screen)] - - (when (:is-admin permissions) - [:span.btn-primary.tooltip.tooltip-bottom-left {:on-click open-share-dialog :alt (tr "labels.share-prototype")} i/export [:span (tr "labels.share-prototype")]]) - - (when (:can-edit permissions) - [:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")]) - - (when-not (:is-logged permissions) - [:span.btn-text-dark {:on-click open-login-dialog} (tr "labels.log-or-sign")])]))) + (when-not (:is-logged permissions) + [:span {:on-click open-login-dialog + :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])])) (mf/defc header-sitemap [{:keys [project file page frame] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - project-name (:name project) + (let [project-name (:name project) file-name (:name file) page-name (:name page) page-id (:id page) @@ -306,66 +229,37 @@ (st/emit! (dv/go-to-page page-id)) (reset! show-dropdown? false)))] - (if new-css-system - [:div {:class (stl/css :sitemap-zone) - :title (tr "viewer.header.sitemap")} - [:span {:class (stl/css :project-name)} project-name] - [:div {:class (stl/css :sitemap-text)} - [:div {:class (stl/css :breadcrumb) - :on-click open-dropdown} - [:span {:class (stl/css :breadcrumb-text)} - (dm/str file-name " / " page-name)] - [:span {:class (stl/css :icon)} i/arrow-refactor] - [:span "/"] - [:& dropdown {:show @show-dropdown? - :on-close close-dropdown} - [:ul {:class (stl/css :dropdown-sitemap)} - (for [id (get-in file [:data :pages])] - [:li {:class (stl/css-case :dropdown-element true - :selected (= page-id id)) - :id (str id) - :key (str id) - :on-click (partial navigate-to id)} - [:span {:class (stl/css :label)} - (get-in file [:data :pages-index id :name])] - (when (= page-id id) - [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]] - [:div {:class (stl/css :current-frame) - :on-click toggle-thumbnails} - [:span {:class (stl/css :frame-name)} frame-name] - [:span {:class (stl/css :icon)} i/arrow-refactor]]]] - - - ;; OLD - [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")} - [:div.breadcrumb - {:on-click open-dropdown} - [:span.project-name project-name] - [:span "/"] - [:span.file-name file-name] - [:span "/"] - - [:span.page-name page-name] - [:& dropdown {:show @show-dropdown? - :on-close close-dropdown} - [:ul.dropdown - (for [id (get-in file [:data :pages])] - [:li {:id (str id) - :key (str id) - :on-click (partial navigate-to id)} - (get-in file [:data :pages-index id :name])])]]] - - [:span.icon {:on-click open-dropdown} i/arrow-down] - [:div.current-frame - {:on-click toggle-thumbnails} - [:span.label "/"] - [:span.label frame-name]] - [:span.icon {:on-click toggle-thumbnails} i/arrow-down]]))) + [:div {:class (stl/css :sitemap-zone) + :title (tr "viewer.header.sitemap")} + [:span {:class (stl/css :project-name)} project-name] + [:div {:class (stl/css :sitemap-text)} + [:div {:class (stl/css :breadcrumb) + :on-click open-dropdown} + [:span {:class (stl/css :breadcrumb-text)} + (dm/str file-name " / " page-name)] + [:span {:class (stl/css :icon)} i/arrow-refactor] + [:span "/"] + [:& dropdown {:show @show-dropdown? + :on-close close-dropdown} + [:ul {:class (stl/css :dropdown-sitemap)} + (for [id (get-in file [:data :pages])] + [:li {:class (stl/css-case :dropdown-element true + :selected (= page-id id)) + :id (str id) + :key (str id) + :on-click (partial navigate-to id)} + [:span {:class (stl/css :label)} + (get-in file [:data :pages-index id :name])] + (when (= page-id id) + [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]] + [:div {:class (stl/css :current-frame) + :on-click toggle-thumbnails} + [:span {:class (stl/css :frame-name)} frame-name] + [:span {:class (stl/css :icon)} i/arrow-refactor]]]])) (mf/defc header [{:keys [project file page frame zoom section permissions index interactions-mode]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - go-to-dashboard + (let [go-to-dashboard (mf/use-fn #(st/emit! (dv/go-to-dashboard))) @@ -389,98 +283,52 @@ (st/emit! (dv/go-to-section section)) (open-login-dialog)))))] - (if new-css-system - [:header {:class (stl/css :viewer-header)} - [:div {:class (stl/css :nav-zone)} - ;; If the user doesn't have permission we disable the link - [:a {:class (stl/css :home-link) - :on-click go-to-dashboard - :style {:cursor (when-not (:can-edit permissions) "auto") - :pointer-events (when-not (:can-edit permissions) "none")}} - [:span {:class (stl/css :logo-icon)} - i/logo-icon]] - - [:& header-sitemap {:project project - :file file - :page page - :frame frame - :index index}]] - - [:div {:class (stl/css :mode-zone)} - [:button {:on-click navigate - :data-value :interactions - :class (stl/css-case :mode-zone-btn true - :selected (= section :interactions)) - :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} - i/play-refactor] - - (when (or (:can-edit permissions) - (= (:who-comment permissions) "all")) - [:button {:on-click navigate - :data-value :comments - :class (stl/css-case :mode-zone-btn true - :selected (= section :comments)) - :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} - i/comments-refactor]) - - (when (or (= (:type permissions) :membership) - (and (= (:type permissions) :share-link) - (= (:who-inspect permissions) "all"))) - [:button {:on-click go-to-inspect - :class (stl/css-case :mode-zone-btn true - :selected (= section :inspect)) - :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} - i/code-refactor])] - - [:& header-options {:section section - :permissions permissions - :page page - :file file - :index index - :zoom zoom - :interactions-mode interactions-mode}]] - - - ;; OLD - [:header.viewer-header - [:div.nav-zone + [:header {:class (stl/css :viewer-header)} + [:div {:class (stl/css :nav-zone)} ;; If the user doesn't have permission we disable the link - [:div.main-icon {:style {:cursor (when-not (:can-edit permissions) "auto")}} - [:a {:on-click go-to-dashboard - :style {:pointer-events (when-not (:can-edit permissions) "none")}} i/logo-icon]] + [:a {:class (stl/css :home-link) + :on-click go-to-dashboard + :style {:cursor (when-not (:can-edit permissions) "auto") + :pointer-events (when-not (:can-edit permissions) "none")}} + [:span {:class (stl/css :logo-icon)} + i/logo-icon]] - [:& header-sitemap {:project project :file file :page page :frame frame :index index}]] + [:& header-sitemap {:project project + :file file + :page page + :frame frame + :index index}]] - [:div.mode-zone - [:button.mode-zone-button.tooltip.tooltip-bottom - {:on-click navigate - :data-value :interactions - :class (dom/classnames :active (= section :interactions)) - :alt (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} - i/play] + [:div {:class (stl/css :mode-zone)} + [:button {:on-click navigate + :data-value :interactions + :class (stl/css-case :mode-zone-btn true + :selected (= section :interactions)) + :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} + i/play-refactor] - (when (or (:can-edit permissions) - (= (:who-comment permissions) "all")) - [:button.mode-zone-button.tooltip.tooltip-bottom - {:on-click navigate - :data-value :comments - :class (dom/classnames :active (= section :comments)) - :alt (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} - i/chat]) + (when (or (:can-edit permissions) + (= (:who-comment permissions) "all")) + [:button {:on-click navigate + :data-value :comments + :class (stl/css-case :mode-zone-btn true + :selected (= section :comments)) + :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} + i/comments-refactor]) - (when (or (= (:type permissions) :membership) - (and (= (:type permissions) :share-link) - (= (:who-inspect permissions) "all"))) - [:button.mode-zone-button.tooltip.tooltip-bottom - {:on-click go-to-inspect - :class (dom/classnames :active (= section :inspect)) - :alt (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} - i/code])] + (when (or (= (:type permissions) :membership) + (and (= (:type permissions) :share-link) + (= (:who-inspect permissions) "all"))) + [:button {:on-click go-to-inspect + :class (stl/css-case :mode-zone-btn true + :selected (= section :inspect)) + :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} + i/code-refactor])] - [:& header-options {:section section - :permissions permissions - :page page - :file file - :index index - :zoom zoom - :interactions-mode interactions-mode}]]))) + [:& header-options {:section section + :permissions permissions + :page page + :file file + :index index + :zoom zoom + :interactions-mode interactions-mode}]])) diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index f1bef24f96..633d7bf9d8 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -53,6 +53,7 @@ .project-name { @include tabTitleTipography; + color: var(--title-foreground-color); } .sitemap-text { diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.cljs b/frontend/src/app/main/ui/viewer/inspect/annotation.cljs index 401b8c111f..a3cccae4db 100644 --- a/frontend/src/app/main/ui/viewer/inspect/annotation.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/annotation.cljs @@ -5,15 +5,19 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.annotation + (:require-macros [app.main.style :as stl]) (:require [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc annotation [{:keys [content] :as props}] - [:div.attributes-block.inspect-annotation - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "workspace.options.component.annotation")] + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.component.annotation") + :class (stl/css :title-spacing-annotation)} [:& copy-button {:data content}]] - [:div.content content]]) + + [:div {:class (stl/css :annotation-content)} content]]) diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.scss b/frontend/src/app/main/ui/viewer/inspect/annotation.scss new file mode 100644 index 0000000000..ddceb455d8 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/annotation.scss @@ -0,0 +1,20 @@ +// 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/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; +} + +.title-spacing-annotation { + @extend .attr-title; +} + +.annotation-content { + @include titleTipography; + color: var(--entry-foreground-color); +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs index c34c6f8f2b..ef87631173 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs @@ -9,7 +9,6 @@ (:require [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -19,36 +18,20 @@ (mf/defc blur-panel [{:keys [objects shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shapes (->> shapes (filter has-blur?))] - (if new-css-system - (when (seq shapes) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.blur") - :class (stl/css :title-spacing-blur)} - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] + (let [shapes (->> shapes (filter has-blur?))] + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.blur") + :class (stl/css :title-spacing-blur)} + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] - [:div {:class (stl/css :attributes-content)} - (for [shape shapes] - [:div {:class (stl/css :blur-row)} - [:div {:class (stl/css :global/attr-label)} "Filter"] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (css/get-css-property objects shape :filter)} - [:div {:class (stl/css :button-children)} - (css/get-css-value objects shape :filter)]]]])]]) - - - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.blur")] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] - - (for [shape shapes] - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.blur.value")] - [:div.attributes-value (css/get-css-value objects shape :filter)] - [:& copy-button {:data (css/get-css-property objects shape :filter)}]])])))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + [:div {:class (stl/css :blur-row)} + [:div {:class (stl/css :global/attr-label)} "Filter"] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects shape :filter)} + [:div {:class (stl/css :button-children)} + (css/get-css-value objects shape :filter)]]]])]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss index 403c1fbd3f..e2da407088 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss @@ -8,15 +8,16 @@ .attributes-block { @include flexColumn; - .title-spacing-blur { - @extend .attr-title; - } } -.attributes-content { - .blur-row { - @extend .attr-row; - } - .button-children { - @extend .copy-button-children; - } + +.title-spacing-blur { + @extend .attr-title; +} + +.blur-row { + @extend .attr-row; +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs index 9fc7e69575..1fa8103403 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs @@ -12,12 +12,9 @@ [app.config :as cf] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.color-bullet :refer [color-bullet color-name]] [app.main.ui.components.color-bullet-new :as cbn] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.select :refer [select]] - [app.main.ui.context :as ctx] - [app.util.dom :as dom] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [okulary.core :as l] @@ -47,147 +44,94 @@ (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors))) (mf/defc color-row [{:keys [color format copy-data on-change-format]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - colors-library (get-colors-library color) + (let [colors-library (get-colors-library color) file-colors (get-file-colors) color-library-name (get-in (or colors-library file-colors) [(:id color) :name]) color (assoc color :color-library-name color-library-name) image (:image color)] - (if new-css-system - [:* - [:div {:class (stl/css :attributes-color-row)} - [:div {:class (stl/css :bullet-wrapper) - :style #js {"--bullet-size" "16px"}} - [:& cbn/color-bullet {:color color - :mini? true}]] - - (when-not image - [:div {:class (stl/css :format-wrapper)} - (when-not (and on-change-format (or (:gradient color) image)) - [:div {:class (stl/css :select-format-wrapper)} - [:& select - {:default-value format - :options [{:value :hex :label (tr "inspect.attributes.color.hex")} - {:value :rgba :label (tr "inspect.attributes.color.rgba")} - {:value :hsla :label (tr "inspect.attributes.color.hsla")}] - :on-change on-change-format}]]) - (when (:gradient color) - [:div {:class (stl/css :format-info)} "rgba"])]) - - (if (and copy-data (not image)) - [:& copy-button {:data copy-data - :class (stl/css :color-row-copy-btn)} - [:* - [:div {:class (stl/css :first-row)} - [:div {:class (stl/css :name-opacity)} - [:span {:class (stl/css-case :color-value-wrapper true - :gradient-name (:gradient color))} - (if (:gradient color) - [:& cbn/color-name {:color color - :size 80}] - (case format - :hex [:& cbn/color-name {:color color - :size 80}] - :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] - [:* (str/fmt "%s, %s, %s, %s" r g b a)]) - :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) - result (cc/format-hsla [h s l a])] - [:* result])))] - - (when-not (:gradient color) - [:span {:class (stl/css :opacity-info)} - (str (* 100 (:opacity color)) "%")])]] - - (when color-library-name - [:div {:class (stl/css :second-row)} - [:div {:class (stl/css :color-name-library)} - color-library-name]])]] - - [:div {:class (stl/css :color-info)} - [:div {:class (stl/css :first-row)} - [:div {:class (stl/css :name-opacity)} - [:span {:class (stl/css-case :color-value-wrapper true - :gradient-name (:gradient color))} - (if (:gradient color) - [:& cbn/color-name {:color color - :size 80}] - (case format - :hex [:& cbn/color-name {:color color - :size 80}] - :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] - [:* (str/fmt "%s, %s, %s, %s" r g b a)]) - :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) - result (cc/format-hsla [h s l a])] - [:* result])))] - - (when-not (:gradient color) - [:span {:class (stl/css :opacity-info)} - (str (* 100 (:opacity color)) "%")])]] - - (when color-library-name - [:div {:class (stl/css :second-row)} - [:div {:class (stl/css :color-name-library)} - color-library-name]])])] - - (when image - (let [mtype (-> image :mtype) - name (or (:name image) (tr "media.image")) - extension (cm/mtype->extension mtype)] - [:a {:class (stl/css :download-button) - :target "_blank" - :download (cond-> name extension (str/concat extension)) - :href (cf/resolve-file-media image)} - (tr "inspect.attributes.image.download")]))] - - [:* - [:div.attributes-color-row - (when color-library-name - [:div.attributes-color-id - [:& color-bullet {:color color}] - [:div color-library-name]]) - - [:div.attributes-color-value {:class (when color-library-name "hide-color")} - [:& color-bullet {:color color}] - - (cond - (:gradient color) - [:& color-name {:color color}] - - (= format :rgba) - (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] - [:div (str/fmt "%s, %s, %s, %s" r g b a)]) - - (= format :hsla) - (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) - result (cc/format-hsla [h s l a])] - [:div result]) - - :else - [:* - [:& color-name {:color color}] - (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])]) + [:* + [:div {:class (stl/css :attributes-color-row)} + [:div {:class (stl/css :bullet-wrapper) + :style #js {"--bullet-size" "16px"}} + [:& cbn/color-bullet {:color color + :mini? true}]] + (when-not image + [:div {:class (stl/css :format-wrapper)} (when-not (and on-change-format (or (:gradient color) image)) - [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} - [:option {:value "hex"} - (tr "inspect.attributes.color.hex")] + [:div {:class (stl/css :select-format-wrapper)} + [:& select + {:default-value format + :options [{:value :hex :label (tr "inspect.attributes.color.hex")} + {:value :rgba :label (tr "inspect.attributes.color.rgba")} + {:value :hsla :label (tr "inspect.attributes.color.hsla")}] + :on-change on-change-format}]]) + (when (:gradient color) + [:div {:class (stl/css :format-info)} "rgba"])]) - [:option {:value "rgba"} - (tr "inspect.attributes.color.rgba")] + (if (and copy-data (not image)) + [:& copy-button {:data copy-data + :class (stl/css :color-row-copy-btn)} + [:* + [:div {:class (stl/css :first-row)} + [:div {:class (stl/css :name-opacity)} + [:span {:class (stl/css-case :color-value-wrapper true + :gradient-name (:gradient color))} + (if (:gradient color) + [:& cbn/color-name {:color color + :size 80}] + (case format + :hex [:& cbn/color-name {:color color + :size 80}] + :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] + [:* (str/fmt "%s, %s, %s, %s" r g b a)]) + :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) + result (cc/format-hsla [h s l a])] + [:* result])))] - [:option {:value "hsla"} - (tr "inspect.attributes.color.hsla")]])] + (when-not (:gradient color) + [:span {:class (stl/css :opacity-info)} + (str (* 100 (:opacity color)) "%")])]] - (when (and copy-data (not image)) - [:& copy-button {:data copy-data}])] + (when color-library-name + [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :color-name-library)} + color-library-name]])]] - (when image - (let [mtype (-> image :mtype) - name (or (:name image) (tr "media.image")) - extension (cm/mtype->extension mtype)] - [:a.download-button {:target "_blank" - :download (cond-> name extension (str/concat extension)) - :href (cf/resolve-file-media image)} - (tr "inspect.attributes.image.download")]))]))) + [:div {:class (stl/css :color-info)} + [:div {:class (stl/css :first-row)} + [:div {:class (stl/css :name-opacity)} + [:span {:class (stl/css-case :color-value-wrapper true + :gradient-name (:gradient color))} + (if (:gradient color) + [:& cbn/color-name {:color color + :size 80}] + (case format + :hex [:& cbn/color-name {:color color + :size 80}] + :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] + [:* (str/fmt "%s, %s, %s, %s" r g b a)]) + :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) + result (cc/format-hsla [h s l a])] + [:* result])))] + + (when-not (:gradient color) + [:span {:class (stl/css :opacity-info)} + (str (* 100 (:opacity color)) "%")])]] + + (when color-library-name + [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :color-name-library)} + color-library-name]])])] + + (when image + (let [mtype (-> image :mtype) + name (or (:name image) (tr "media.image")) + extension (cm/mtype->extension mtype)] + [:a {:class (stl/css :download-button) + :target "_blank" + :download (cond-> name extension (str/concat extension)) + :href (cf/resolve-file-media image)} + (tr "inspect.attributes.image.download")]))])) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss index 709ca251e9..b955417321 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss @@ -10,70 +10,45 @@ display: grid; grid-template-columns: $s-16 $s-72 $s-156; gap: $s-4; - .bullet-wrapper { - @include flexCenter; - height: $s-32; - } - .format-wrapper { - width: $s-72; - height: $s-32; - .select-format-wrapper { - width: 100%; - div { - background-color: transparent; - border: none; - padding-left: $s-2; - color: var(--menu-foreground-color-rest); - } - } - .format-info { - @include tabTitleTipography; - display: flex; - align-items: center; - width: 100%; - height: 100%; - padding-left: $s-2; - font-size: $fs-12; - color: var(--menu-foreground-color-rest); - } +} + +.bullet-wrapper { + @include flexCenter; + height: $s-32; +} + +.format-wrapper { + width: $s-72; + height: $s-32; +} + +.select-format-wrapper { + width: 100%; + div { + background-color: transparent; + border: none; + padding-left: $s-2; + color: var(--menu-foreground-color-rest); } } +.format-info { + @include tabTitleTipography; + display: flex; + align-items: center; + width: 100%; + height: 100%; + padding-left: $s-2; + font-size: $fs-12; + color: var(--menu-foreground-color-rest); +} + .color-info { display: flex; align-items: flex-start; gap: $s-4; flex-grow: 1; - .color-name-wrapper { - @include titleTipography; - @include flexColumn; - padding: $s-8 $s-4 $s-8 $s-8; - height: $s-32; - max-width: $s-80; - &.gradient-color { - max-width: $s-124; - } - .color-name-library { - @include titleTipography; - @include textEllipsis; - text-align: left; - height: $s-16; - color: var(--menu-foreground-color-rest); - } - .color-value-wrapper { - @include titleTipography; - height: $s-16; - color: var(--menu-foreground-color); - } - } - - .opacity-info { - @include titleTipography; - color: var(--menu-foreground-color); - padding: $s-8 0; - } - button { visibility: hidden; min-width: $s-28; @@ -83,51 +58,84 @@ } } +.color-name-wrapper { + @include titleTipography; + @include flexColumn; + padding: $s-8 $s-4 $s-8 $s-8; + height: $s-32; + max-width: $s-80; + &.gradient-color { + max-width: $s-124; + } + .color-name-library { + @include titleTipography; + @include textEllipsis; + text-align: left; + height: $s-16; + color: var(--menu-foreground-color-rest); + } + .color-value-wrapper { + @include titleTipography; + height: $s-16; + color: var(--menu-foreground-color); + } +} + +.opacity-info { + @include titleTipography; + color: var(--menu-foreground-color); + padding: $s-8 0; +} + .color-info, .color-row-copy-btn { @include copyWrapper; - .first-row { - display: grid; - grid-template-columns: 1fr $s-20; - grid-template-areas: "name button"; - height: fit-content; - width: 100%; - padding: 0; - margin: 0; - .name-opacity { - grid-area: name; - height: fit-content; - max-width: $s-124; - line-height: $s-16; - .color-value-wrapper { - @include inspectValue; - text-transform: uppercase; - max-width: $s-124; - padding-right: $s-8; - &.gradient-name { - text-transform: none; - } - } - .opacity-info { - @include inspectValue; - text-transform: uppercase; - } - } - } +} - .second-row { - min-height: $s-16; - padding-right: $s-8; - width: 100%; - text-align: left; - margin: 0; - padding: 0; - .color-name-library { - @include inspectValue; - color: var(--menu-foreground-color-rest); - } +.first-row { + display: grid; + grid-template-columns: 1fr $s-20; + grid-template-areas: "name button"; + height: fit-content; + width: 100%; + padding: 0; + margin: 0; +} + +.name-opacity { + grid-area: name; + height: fit-content; + max-width: $s-124; + line-height: $s-16; +} + +.color-value-wrapper { + @include inspectValue; + text-transform: uppercase; + max-width: $s-124; + padding-right: $s-8; + &.gradient-name { + text-transform: none; } } +.opacity-info { + @include inspectValue; + text-transform: uppercase; +} + +.second-row { + min-height: $s-16; + padding-right: $s-8; + width: 100%; + text-align: left; + margin: 0; + padding: 0; +} + +.color-name-library { + @include inspectValue; + color: var(--menu-foreground-color-rest); +} .download-button { @extend .button-secondary; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs index 13667f38a8..77df200a0e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs @@ -8,7 +8,6 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -34,8 +33,7 @@ (mf/defc fill-block {::mf/wrap-props false} [{:keys [objects shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - format* (mf/use-state :hex) + (let [format* (mf/use-state :hex) format (deref format*) color (shape->color shape) @@ -43,54 +41,28 @@ (mf/use-fn (fn [format] (reset! format* format)))] - (if new-css-system - [:div {:class (stl/css :attributes-fill-block)} - [:& color-row - {:color color - :format format - :on-change-format on-change - :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]] - - - [:div.attributes-fill-block - [:& color-row - {:color color - :format format - :on-change-format on-change - :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))) + [:div {:class (stl/css :attributes-fill-block)} + [:& color-row + {:color color + :format format + :on-change-format on-change + :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]])) (mf/defc fill-panel {::mf/wrap-props false} [{:keys [shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shapes (filter has-fill? shapes)] - (if new-css-system - (when (seq shapes) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.fill") - :class (stl/css :title-spacing-fill)}] + (let [shapes (filter has-fill? shapes)] + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.fill") + :class (stl/css :title-spacing-fill)}] - [:div {:class (stl/css :attributes-content)} - (for [shape shapes] - (if (seq (:fills shape)) - (for [value (:fills shape [])] - [:& fill-block {:key (str "fill-block-" (:id shape) value) - :shape value}]) - [:& fill-block {:key (str "fill-block-only" (:id shape)) - :shape shape}]))]]) - - - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.fill")]] - - [:div.attributes-fill-blocks - (for [shape shapes] - (if (seq (:fills shape)) - (for [value (:fills shape [])] - [:& fill-block {:key (str "fill-block-" (:id shape) value) - :shape value}]) - [:& fill-block {:key (str "fill-block-only" (:id shape)) - :shape shape}]))]])))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (if (seq (:fills shape)) + (for [value (:fills shape [])] + [:& fill-block {:key (str "fill-block-" (:id shape) value) + :shape value}]) + [:& fill-block {:key (str "fill-block-only" (:id shape)) + :shape shape}]))]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss index 6a0f53d673..3f3e3a9bdd 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss @@ -8,7 +8,8 @@ .attributes-block { @include flexColumn; - .title-spacing-fill { - @extend .attr-title; - } +} + +.title-spacing-fill { + @extend .attr-title; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs index 98790d2346..b22c157267 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs @@ -10,7 +10,6 @@ [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -19,51 +18,27 @@ (mf/defc geometry-block [{:keys [objects shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div {:class (stl/css :geometry-row)} - [:div {:class (stl/css :global/attr-label)} (d/name property)] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (css/get-css-property objects shape property)} - [:div {:class (stl/css :button-children)} value]]]]))] - - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :geometry-row)} + [:div {:class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))]) (mf/defc geometry-panel [{:keys [objects shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.size") - :class (stl/css :title-spacing-geometry)} + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.size") + :class (stl/css :title-spacing-geometry)} - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - (for [shape shapes] - [:& geometry-block {:shape shape - :objects objects - :key (:id shape)}])] - - - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.size")] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - - (for [shape shapes] - [:& geometry-block {:shape shape - :objects objects - :key (:id shape)}])]))) + (for [shape shapes] + [:& geometry-block {:shape shape + :objects objects + :key (:id shape)}])]) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss index 6f21ef2c7a..2b1f431fb7 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss @@ -8,14 +8,16 @@ .attributes-block { @include flexColumn; - .title-spacing-geometry { - @extend .attr-title; - } +} + +.title-spacing-geometry { + @extend .attr-title; } .geometry-row { @extend .attr-row; - .button-children { - @extend .copy-button-children; - } +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs index 95cbcfa07e..4f22213db3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs @@ -11,7 +11,6 @@ [app.common.media :as cm] [app.config :as cf] [app.main.ui.components.copy-button :refer [copy-button]] - [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [cuerdas.core :as str] @@ -22,58 +21,31 @@ (mf/defc image-panel [{:keys [objects shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - (for [shape (filter cfh/image-shape? shapes)] - [:div {:class (stl/css :attributes-block) - :key (str "image-" (:id shape))} - [:div {:class (stl/css :image-wrapper)} - [:img {:src (cf/resolve-file-media (-> shape :metadata))}]] + (for [shape (filter cfh/image-shape? shapes)] + [:div {:class (stl/css :attributes-block) + :key (str "image-" (:id shape))} + [:div {:class (stl/css :image-wrapper)} + [:img {:src (cf/resolve-file-media (-> shape :metadata))}]] - [:div {:class (stl/css :image-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.image.width")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)} - [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]] + [:div {:class (stl/css :image-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.image.width")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)} + [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]] - [:div {:class (stl/css :image-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.image.height")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)} - [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]] + [:div {:class (stl/css :image-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.image.height")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)} + [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]] - (let [mtype (-> shape :metadata :mtype) - name (:name shape) - extension (cm/mtype->extension mtype)] - [:a {:class (stl/css :download-button) - :target "_blank" - :download (cond-> name extension (str/concat extension)) - :href (cf/resolve-file-media (-> shape :metadata))} - (tr "inspect.attributes.image.download")])]) - - - (for [shape (filter cfh/image-shape? shapes)] - [:div.attributes-block {:key (str "image-" (:id shape))} - [:div.attributes-image-row - [:div.attributes-image - [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]] - - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.image.width")] - [:div.attributes-value (css/get-css-value objects (:metadata shape) :width)] - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}]] - - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.image.height")] - [:div.attributes-value (css/get-css-value objects (:metadata shape) :height)] - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}]] - - (let [mtype (-> shape :metadata :mtype) - name (:name shape) - extension (cm/mtype->extension mtype)] - [:a.download-button {:target "_blank" - :download (cond-> name extension (str/concat extension)) - :href (cf/resolve-file-media (-> shape :metadata))} - (tr "inspect.attributes.image.download")])])))) + (let [mtype (-> shape :metadata :mtype) + name (:name shape) + extension (cm/mtype->extension mtype)] + [:a {:class (stl/css :download-button) + :target "_blank" + :download (cond-> name extension (str/concat extension)) + :href (cf/resolve-file-media (-> shape :metadata))} + (tr "inspect.attributes.image.download")])])) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss index c9fb40d7ec..80f753a2cc 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss @@ -9,33 +9,37 @@ .attributes-block { @include flexColumn; margin-bottom: $s-16; - .image-wrapper { - background-color: var(--menu-background-color); - position: relative; - @include flexCenter; - width: $s-248; - height: $s-160; - max-height: $s-160; - max-width: $s-248; - margin: $s-8 0; - border-radius: $br-8; +} - img { - height: 100%; - width: 100%; - object-fit: contain; - } - } - .image-row { - @extend .attr-row; - .button-children { - @extend .copy-button-children; - } - } - .download-button { - @extend .button-secondary; - @include tabTitleTipography; - height: $s-32; - margin-top: $s-4; +.image-wrapper { + background-color: var(--menu-background-color); + position: relative; + @include flexCenter; + width: $s-248; + height: $s-160; + max-height: $s-160; + max-width: $s-248; + margin: $s-8 0; + border-radius: $br-8; + + img { + height: 100%; + width: 100%; + object-fit: contain; } } + +.image-row { + @extend .attr-row; +} + +.button-children { + @extend .copy-button-children; +} + +.download-button { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + margin-top: $s-4; +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs index c85cd0fa4c..0e644210b9 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs @@ -11,7 +11,6 @@ [app.common.types.shape.layout :as ctl] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [rumext.v2 :as mf])) @@ -30,57 +29,30 @@ (mf/defc layout-block [{:keys [objects shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :layout-row)} + [:div {:title (d/name property) + :class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} - (if new-css-system - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div {:class (stl/css :layout-row)} - [:div {:title (d/name property) - :class (stl/css :global/attr-label)} (d/name property)] - [:div {:class (stl/css :global/attr-value)} - - [:& copy-button {:data (css/get-css-property objects shape property)} - [:div {:class (stl/css :button-children)} value]]]]))] - - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label {:title (d/name property)} (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))) (mf/defc layout-panel [{:keys [objects shapes]}] - (let [shapes (->> shapes (filter ctl/any-layout?)) - new-css-system (mf/use-ctx ctx/new-css-system)] + (let [shapes (->> shapes (filter ctl/any-layout?))] - (if new-css-system - (when (seq shapes) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title "Layout" - :class (stl/css :title-spacing-layout)} + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title "Layout" + :class (stl/css :title-spacing-layout)} - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - (for [shape shapes] - [:& layout-block {:shape shape - :objects objects - :key (:id shape)}])]) - - - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text "Layout"] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - - (for [shape shapes] - [:& layout-block {:shape shape - :objects objects - :key (:id shape)}])])))) + (for [shape shapes] + [:& layout-block {:shape shape + :objects objects + :key (:id shape)}])]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss index 3c7497ce9d..e2a409c0fb 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss @@ -8,14 +8,16 @@ .attributes-block { @include flexColumn; - .title-spacing-layout { - @extend .attr-title; - } +} + +.title-spacing-layout { + @extend .attr-title; } .layout-row { @extend .attr-row; - .button-children { - @extend .copy-button-children; - } +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs index f629428f87..c0efb66c3a 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs @@ -11,7 +11,6 @@ [app.common.types.shape.layout :as ctl] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [rumext.v2 :as mf])) @@ -23,7 +22,6 @@ :min-width :align-self :justify-self - :flex-shrink :flex @@ -33,30 +31,18 @@ (mf/defc layout-element-block [{:keys [objects shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div {:class (stl/css :layout-element-row)} - [:div {:class (stl/css :global/attr-label)} (d/name property)] - [:div {:class (stl/css :global/attr-value)} + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :layout-element-row)} + [:div {:class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (css/get-css-property objects shape property)} - [:div {:class (stl/css :button-children)} value]]]]))] - - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))) (mf/defc layout-element-panel [{:keys [objects shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) + (let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes) only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes) @@ -75,28 +61,15 @@ :else "Layout element")] - (if new-css-system - (when some-layout-prop? - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title menu-title - :class (stl/css :title-spacing-layout-element)} - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (when some-layout-prop? + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title menu-title + :class (stl/css :title-spacing-layout-element)} + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - (for [shape shapes] - [:& layout-element-block {:shape shape - :objects objects - :key (:id shape)}])]) - - (when some-layout-prop? - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text menu-title] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - - (for [shape shapes] - [:& layout-element-block {:shape shape - :objects objects - :key (:id shape)}])])))) + (for [shape shapes] + [:& layout-element-block {:shape shape + :objects objects + :key (:id shape)}])]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss index 4d9788544e..6ef7e6cea0 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss @@ -8,14 +8,16 @@ .attributes-block { @include flexColumn; - .title-spacing-layout-element { - @extend .attr-title; - } +} + +.title-spacing-layout-element { + @extend .attr-title; } .layout-element-row { @extend .attr-row; - .button-children { - @extend .copy-button-children; - } +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs index 54f3875e05..6ff7d452ea 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -50,29 +49,16 @@ :on-change-format #(reset! color-format %)}]])) (mf/defc shadow-panel [{:keys [shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shapes (->> shapes (filter has-shadow?))] + (let [shapes (->> shapes (filter has-shadow?))] - (if new-css-system - (when (and (seq shapes) (> (count shapes) 0)) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.shadow") - :class (stl/css :title-spacing-shadow)}] + (when (and (seq shapes) (> (count shapes) 0)) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.shadow") + :class (stl/css :title-spacing-shadow)}] - [:div {:class (stl/css :attributes-content)} - (for [shape shapes] - (for [shadow (:shadow shape)] - [:& shadow-block {:shape shape - :shadow shadow}]))]]) - - (when (and (seq shapes) (> (count shapes) 0)) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.shadow")]] - - [:div.attributes-shadow-blocks - (for [shape shapes] - (for [shadow (:shadow shape)] - [:& shadow-block {:shape shape - :shadow shadow}]))]])))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (for [shadow (:shadow shape)] + [:& shadow-block {:shape shape + :shadow shadow}]))]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss index f96bd71cf3..1d741ab26e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss @@ -8,15 +8,16 @@ .attributes-block { @include flexColumn; - .title-spacing-shadow { - @extend .attr-title; - } } -.attributes-shadow-block { - .shadow-row { - @extend .attr-row; - .button-children { - @extend .copy-button-children; - } - } + +.title-spacing-shadow { + @extend .attr-title; +} + +.shadow-row { + @extend .attr-row; +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs index 707c4d054d..64ff491041 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css-formats :as cssf] @@ -33,82 +32,41 @@ (mf/defc stroke-block [{:keys [stroke]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - color-format (mf/use-state :hex) + (let [color-format (mf/use-state :hex) color (stroke->color stroke)] - (if new-css-system - [:div {:class (stl/css :attributes-stroke-block)} - (let [{:keys [stroke-style stroke-alignment]} stroke - stroke-style (if (= stroke-style :svg) :solid stroke-style) - stroke-alignment (or stroke-alignment :center) - stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " " - (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " " - (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))] + [:div {:class (stl/css :attributes-stroke-block)} + (let [{:keys [stroke-style stroke-alignment]} stroke + stroke-style (if (= stroke-style :svg) :solid stroke-style) + stroke-alignment (or stroke-alignment :center) + stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " " + (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " " + (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))] - [:* - [:& color-row {:color color - :format @color-format - :copy-data (uc/color->background color) - :on-change-format #(reset! color-format %)}] + [:* + [:& color-row {:color color + :format @color-format + :copy-data (uc/color->background color) + :on-change-format #(reset! color-format %)}] - [:div {:class (stl/css :stroke-row)} - [:div {:class (stl/css :global/attr-label)} - "Border"] - [:div {:class (stl/css :global/attr-value)} + [:div {:class (stl/css :stroke-row)} + [:div {:class (stl/css :global/attr-label)} + "Border"] + [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))} - [:div {:class (stl/css :button-children)} stroke-def]]]]])] - - - [:div.attributes-stroke-block - (let [{:keys [stroke-style stroke-alignment]} stroke - stroke-style (if (= stroke-style :svg) :solid stroke-style) - stroke-alignment (or stroke-alignment :center)] - [:div.attributes-stroke-row - [:div.attributes-label (tr "inspect.attributes.stroke.width")] - [:div.attributes-value (fmt/format-pixels (:stroke-width stroke))] - ;; Execution time translation strings: - ;; inspect.attributes.stroke.style.dotted - ;; inspect.attributes.stroke.style.mixed - ;; inspect.attributes.stroke.style.none - ;; inspect.attributes.stroke.style.solid - [:div.attributes-value (tr (dm/str "inspect.attributes.stroke.style." (d/name stroke-style)))] - ;; Execution time translation strings: - ;; inspect.attributes.stroke.alignment.center - ;; inspect.attributes.stroke.alignment.inner - ;; inspect.attributes.stroke.alignment.outer - [:div.attributes-label (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment)))] - [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}]]) - [:& color-row {:color color - :format @color-format - :copy-data (uc/color->background color) - :on-change-format #(reset! color-format %)}]]))) + [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))} + [:div {:class (stl/css :button-children)} stroke-def]]]]])])) (mf/defc stroke-panel [{:keys [shapes]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shapes (->> shapes (filter has-stroke?))] - (if new-css-system - (when (seq shapes) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.stroke") - :class (stl/css :title-spacing-stroke)}] + (let [shapes (->> shapes (filter has-stroke?))] + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.stroke") + :class (stl/css :title-spacing-stroke)}] - [:div {:class (stl/css :attributes-content)} - (for [shape shapes] - (for [value (:strokes shape)] - [:& stroke-block {:key (str "stroke-color-" (:id shape) value) - :stroke value}]))]]) - - - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]] - - [:div.attributes-stroke-blocks - (for [shape shapes] - (for [value (:strokes shape)] - [:& stroke-block {:key (str "stroke-color-" (:id shape) value) - :stroke value}]))]])))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (for [value (:strokes shape)] + [:& stroke-block {:key (str "stroke-color-" (:id shape) value) + :stroke value}]))]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss index b0d915775c..86cb671047 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss @@ -8,16 +8,20 @@ .attributes-block { @include flexColumn; - .title-spacing-stroke { - @extend .attr-title; - } } + +.title-spacing-stroke { + @extend .attr-title; +} + .attributes-stroke-block { @include flexColumn; - .stroke-row { - @extend .attr-row; - .button-children { - @extend .copy-button-children; - } - } +} + +.stroke-row { + @extend .attr-row; +} + +.button-children { + @extend .copy-button-children; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index c6dc88e92b..5f23fd7983 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -21,38 +21,20 @@ (str/join "; "))) (mf/defc svg-attr [{:keys [attr value]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system + (if (map? value) + [:* + [:div {:class (stl/css :attributes-subtitle)} + [:span (d/name attr)] + [:& copy-button {:data (map->css value)}]] - (if (map? value) - [:* - [:div {:class (stl/css :attributes-subtitle)} - [:span (d/name attr)] - [:& copy-button {:data (map->css value)}]] + (for [[attr-key attr-value] value] + [:& svg-attr {:attr attr-key :value attr-value}])] - (for [[attr-key attr-value] value] - [:& svg-attr {:attr attr-key :value attr-value}])] - - [:div {:class (stl/css :svg-row)} - [:div {:class (stl/css :global/attr-label)} (d/name attr)] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (d/name value)} - [:div {:class (stl/css :button-children)} (str value)]]]]) - - - (if (map? value) - [:* - [:div.attributes-block-title - [:div.attributes-block-title-text (d/name attr)] - [:& copy-button {:data (map->css value)}]] - - (for [[attr-key attr-value] value] - [:& svg-attr {:attr attr-key :value attr-value}])] - - [:div.attributes-unit-row - [:div.attributes-label (d/name attr)] - [:div.attributes-value (str value)] - [:& copy-button {:data (d/name value)}]])))) + [:div {:class (stl/css :svg-row)} + [:div {:class (stl/css :global/attr-label)} (d/name attr)] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (d/name value)} + [:div {:class (stl/css :button-children)} (str value)]]]])) (mf/defc svg-block [{:keys [shape]}] @@ -63,20 +45,10 @@ (mf/defc svg-panel [{:keys [shapes]}] - - (let [new-css-system (mf/use-ctx ctx/new-css-system) - shape (first shapes)] - (if new-css-system - (when (seq (:svg-attrs shape)) - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "workspace.sidebar.options.svg-attrs.title") - :class (stl/css :title-spacing-svg)}] - [:& svg-block {:shape shape}]]) - - - (when (seq (:svg-attrs shape)) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "workspace.sidebar.options.svg-attrs.title")]] - [:& svg-block {:shape shape}]])))) + (let [shape (first shapes)] + (when (seq (:svg-attrs shape)) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "workspace.sidebar.options.svg-attrs.title") + :class (stl/css :title-spacing-svg)}] + [:& svg-block {:shape shape}]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss index 12fdc3a1c2..38248e1fc5 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss @@ -8,16 +8,20 @@ .attributes-block { @include flexColumn; - .title-spacing-svg { - @extend .attr-title; - } } + +.title-spacing-svg { + @extend .attr-title; +} + .svg-row { @extend .attr-row; - .button-children { - @extend .copy-button-children; - } } + +.button-children { + @extend .copy-button-children; +} + .attributes-subtitle { @include tabTitleTipography; display: flex; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs index 2cdc2a1340..56068bcbe3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs @@ -15,7 +15,6 @@ [app.main.store :as st] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.i18n :refer [tr]] @@ -51,8 +50,7 @@ (mf/defc typography-block [{:keys [text style]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - typography-library-ref + (let [typography-library-ref (mf/use-memo (mf/deps (:typography-ref-file style)) (make-typographies-library-ref (:typography-ref-file style))) @@ -68,202 +66,111 @@ typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)] - (if new-css-system - [:div {:class (stl/css :attributes-content)} - (when (:fills style) - (for [[idx fill] (map-indexed vector (:fills style))] - [:& color-row {:key idx - :format @color-format - :color (fill->color fill) - :copy-data (copy-style-data fill :fill-color :fill-color-gradient) - :on-change-format #(reset! color-format %)}])) + [:div {:class (stl/css :attributes-content)} + (when (:fills style) + (for [[idx fill] (map-indexed vector (:fills style))] + [:& color-row {:key idx + :format @color-format + :color (fill->color fill) + :copy-data (copy-style-data fill :fill-color :fill-color-gradient) + :on-change-format #(reset! color-format %)}])) - (when (:typography-ref-id style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)} - [:div {:class (stl/css :button-children)} (:name typography)]]]]) + (when (:typography-ref-id style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)} + [:div {:class (stl/css :button-children)} (:name typography)]]]]) - (when (:font-id style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :font-family)} - [:div {:class (stl/css :button-children)} - (-> style :font-id fonts/get-font-data :name)]]]]) + (when (:font-id style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :font-family)} + [:div {:class (stl/css :button-children)} + (-> style :font-id fonts/get-font-data :name)]]]]) - (when (:font-style style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.font-style")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :font-style)} - [:div {:class (stl/css :button-children)} - (str (:font-style style))]]]]) + (when (:font-style style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-style")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :font-style)} + [:div {:class (stl/css :button-children)} + (str (:font-style style))]]]]) - (when (:font-size style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.font-size")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :font-size)} - [:div {:class (stl/css :button-children)} - (fmt/format-pixels (:font-size style))]]]]) + (when (:font-size style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-size")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :font-size)} + [:div {:class (stl/css :button-children)} + (fmt/format-pixels (:font-size style))]]]]) - (when (:font-weight style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.font-weight")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :font-weight)} - [:div {:class (stl/css :button-children)} - (str (:font-weight style))]]]]) + (when (:font-weight style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-weight")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :font-weight)} + [:div {:class (stl/css :button-children)} + (str (:font-weight style))]]]]) - (when (:line-height style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.line-height")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :line-height)} - [:div {:class (stl/css :button-children)} - (fmt/format-number (:line-height style))]]]]) + (when (:line-height style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.line-height")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :line-height)} + [:div {:class (stl/css :button-children)} + (fmt/format-number (:line-height style))]]]]) - (when (:letter-spacing style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.letter-spacing")] - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :letter-spacing)} - [:div {:class (stl/css :button-children)} - (fmt/format-pixels (:letter-spacing style))]]]]) + (when (:letter-spacing style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.letter-spacing")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :letter-spacing)} + [:div {:class (stl/css :button-children)} + (fmt/format-pixels (:letter-spacing style))]]]]) - (when (:text-decoration style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.text-decoration")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-decoration.none - ;; inspect.attributes.typography.text-decoration.strikethrough - ;; inspect.attributes.typography.text-decoration.underline - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :text-decoration)} - [:div {:class (stl/css :button-children)} - (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]]) + (when (:text-decoration style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.text-decoration")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-decoration.none + ;; inspect.attributes.typography.text-decoration.strikethrough + ;; inspect.attributes.typography.text-decoration.underline + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :text-decoration)} + [:div {:class (stl/css :button-children)} + (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]]) - (when (:text-transform style) - [:div {:class (stl/css :text-row)} - [:div {:class (stl/css :global/attr-label)} - (tr "inspect.attributes.typography.text-transform")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-transform.lowercase - ;; inspect.attributes.typography.text-transform.none - ;; inspect.attributes.typography.text-transform.titlecase - ;; inspect.attributes.typography.text-transform.uppercase - ;; inspect.attributes.typography.text-transform.unset - [:div {:class (stl/css :global/attr-value)} - [:& copy-button {:data (copy-style-data style :text-transform)} - [:div {:class (stl/css :button-children)} - (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]]) + (when (:text-transform style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.text-transform")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-transform.lowercase + ;; inspect.attributes.typography.text-transform.none + ;; inspect.attributes.typography.text-transform.titlecase + ;; inspect.attributes.typography.text-transform.uppercase + ;; inspect.attributes.typography.text-transform.unset + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (copy-style-data style :text-transform)} + [:div {:class (stl/css :button-children)} + (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]]) - [:& copy-button {:data (str/trim text) - :class (stl/css :attributes-content-row)} - [:span {:class (stl/css :content) - :style {:font-family (:font-family style) - :font-weight (:font-weight style) - :font-style (:font-style style)}} - (str/trim text)]]] - - - [:div.attributes-text-block - (if (:typography-ref-id style) - [:div.attributes-typography-name-row - [:div.typography-entry - [:div.typography-sample - {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.text-styles")]] - [:div.typography-entry-name (:name typography)] - [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]] - - [:div.attributes-typography-row - [:div.typography-sample - {:style {:font-family (:font-family style) - :font-weight (:font-weight style) - :font-style (:font-style style)}} - (tr "workspace.assets.typography.text-styles")] - [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]]) - - (when (:fills style) - (for [[idx fill] (map-indexed vector (:fills style))] - [:& color-row {:key idx - :format @color-format - :color (fill->color fill) - :copy-data (copy-style-data fill :fill-color :fill-color-gradient) - :on-change-format #(reset! color-format %)}])) - - (when (:font-id style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-family")] - [:div.attributes-value (-> style :font-id fonts/get-font-data :name)] - [:& copy-button {:data (copy-style-data style :font-family)}]]) - - (when (:font-style style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-style")] - [:div.attributes-value (str (:font-style style))] - [:& copy-button {:data (copy-style-data style :font-style)}]]) - - (when (:font-size style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-size")] - [:div.attributes-value (fmt/format-pixels (:font-size style))] - [:& copy-button {:data (copy-style-data style :font-size)}]]) - - (when (:font-weight style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-weight")] - [:div.attributes-value (str (:font-weight style))] - [:& copy-button {:data (copy-style-data style :font-weight)}]]) - - (when (:line-height style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.line-height")] - [:div.attributes-value (fmt/format-number (:line-height style))] - [:& copy-button {:data (copy-style-data style :line-height)}]]) - - (when (:letter-spacing style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")] - [:div.attributes-value (fmt/format-pixels (:letter-spacing style))] - [:& copy-button {:data (copy-style-data style :letter-spacing)}]]) - - (when (:text-decoration style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-decoration.none - ;; inspect.attributes.typography.text-decoration.strikethrough - ;; inspect.attributes.typography.text-decoration.underline - [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] - [:& copy-button {:data (copy-style-data style :text-decoration)}]]) - - (when (:text-transform style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.text-transform")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-transform.lowercase - ;; inspect.attributes.typography.text-transform.none - ;; inspect.attributes.typography.text-transform.titlecase - ;; inspect.attributes.typography.text-transform.uppercase - [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] - [:& copy-button {:data (copy-style-data style :text-transform)}]]) - - [:div.attributes-content-row - [:pre.attributes-content (str/trim text)] - [:& copy-button {:data (str/trim text)}]]]))) + [:& copy-button {:data (str/trim text) + :class (stl/css :attributes-content-row)} + [:span {:class (stl/css :content) + :style {:font-family (:font-family style) + :font-weight (:font-weight style) + :font-style (:font-style style)}} + (str/trim text)]]])) (mf/defc text-block [{:keys [shape]}] @@ -281,21 +188,11 @@ (mf/defc text-panel [{:keys [shapes]}] (when-let [shapes (seq (filter has-text? shapes))] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:div {:class (stl/css :attributes-block)} - [:& title-bar {:collapsable? false - :title (tr "inspect.attributes.typography") - :class (stl/css :title-spacing-text)}] + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.typography") + :class (stl/css :title-spacing-text)}] - (for [shape shapes] - [:& text-block {:shape shape - :key (str "text-block" (:id shape))}])] - - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.typography")]] - - (for [shape shapes] - [:& text-block {:shape shape - :key (str "text-block" (:id shape))}])])))) + (for [shape shapes] + [:& text-block {:shape shape + :key (str "text-block" (:id shape))}])])) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss index 935b0b4a64..9f111adad4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss @@ -8,41 +8,46 @@ .attributes-block { @include flexColumn; - .title-spacing-text { - @extend .attr-title; - } } + +.title-spacing-text { + @extend .attr-title; +} + .attributes-content { @include flexColumn; - .text-row { - @extend .attr-row; - :global(.attr-value) { - align-items: center; - } - .button-children { - @extend .copy-button-children; - } - } - .attributes-content-row { - width: $s-252; - max-width: $s-252; - min-height: calc($s-2 + $s-32); - border-radius: $br-8; - border: $s-1 solid var(--menu-border-color-disabled); - margin-top: $s-4; - .content { - @include titleTipography; - width: 100%; - padding: 0; - color: var(--color-foreground-secondary); - } +} - &:hover { - border: $s-1 solid var(--color-background-tertiary); - background-color: var(--menu-background-color); - .content { - color: var(--menu-foreground-color-hover); - } +.text-row { + @extend .attr-row; + :global(.attr-value) { + align-items: center; + } +} + +.button-children { + @extend .copy-button-children; +} + +.attributes-content-row { + width: $s-252; + max-width: $s-252; + min-height: calc($s-2 + $s-32); + border-radius: $br-8; + border: $s-1 solid var(--menu-border-color-disabled); + margin-top: $s-4; + .content { + @include titleTipography; + width: 100%; + padding: 0; + color: var(--color-foreground-secondary); + } + + &:hover { + border: $s-1 solid var(--color-background-tertiary); + background-color: var(--menu-background-color); + .content { + color: var(--menu-foreground-color-hover); } } } diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs index af81e838ea..da23a0ad76 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs @@ -13,7 +13,6 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] @@ -23,8 +22,7 @@ (mf/defc exports {::mf/wrap [#(mf/memo % =)]} [{:keys [shapes page-id file-id share-id type] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - exports (mf/use-state []) + (let [exports (mf/use-state []) xstate (mf/deref refs/export) vstate (mf/deref refs/viewer-data) page (get-in vstate [:pages page-id]) @@ -136,111 +134,64 @@ flatten distinct vec)))) - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? false - :title (tr "workspace.options.export") - :class (stl/css :title-spacing-export-viewer)} - [:button {:class (stl/css :add-export) - :on-click add-export} i/add-refactor]]] + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.export") + :class (stl/css :title-spacing-export-viewer)} + [:button {:class (stl/css :add-export) + :on-click add-export} i/add-refactor]]] - (cond - (= :multiple exports) - [:div {:class (stl/css :multiple-exports)} - [:div {:class (stl/css :label)} (tr "settings.multiple")] - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click ()} - i/remove-refactor]]] + (cond + (= :multiple exports) + [:div {:class (stl/css :multiple-exports)} + [:div {:class (stl/css :label)} (tr "settings.multiple")] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click ()} + i/remove-refactor]]] - (seq @exports) - [:div {:class (stl/css :element-set-content)} - (for [[index export] (d/enumerate @exports)] - [:div {:class (stl/css :element-group) - :key index} - [:div {:class (stl/css :input-wrapper)} - [:div {:class (stl/css :format-select)} + (seq @exports) + [:div {:class (stl/css :element-set-content)} + (for [[index export] (d/enumerate @exports)] + [:div {:class (stl/css :element-group) + :key index} + [:div {:class (stl/css :input-wrapper)} + [:div {:class (stl/css :format-select)} + [:& select + {:default-value (d/name (:type export)) + :options format-options + :dropdown-class (stl/css :dropdown-upwards) + :on-change (partial on-type-change index)}]] + (when (scale-enabled? export) + [:div {:class (stl/css :size-select)} [:& select - {:default-value (d/name (:type export)) - :options format-options + {:default-value (str (:scale export)) + :options size-options :dropdown-class (stl/css :dropdown-upwards) - :on-change (partial on-type-change index)}]] - (when (scale-enabled? export) - [:div {:class (stl/css :size-select)} - [:& select - {:default-value (str (:scale export)) - :options size-options - :dropdown-class (stl/css :dropdown-upwards) - :on-change (partial on-scale-change index)}]]) - [:label {:class (stl/css :suffix-input) - :for "suffix-export-input"} - [:input {:class (stl/css :type-input) - :id "suffix-export-input" - :type "text" - :value (:suffix export) - :placeholder (tr "workspace.options.export.suffix") - :data-value index - :on-change on-suffix-change - :on-key-down manage-key-down}]]] + :on-change (partial on-scale-change index)}]]) + [:label {:class (stl/css :suffix-input) + :for "suffix-export-input"} + [:input {:class (stl/css :type-input) + :id "suffix-export-input" + :type "text" + :value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") + :data-value index + :on-change on-suffix-change + :on-key-down manage-key-down}]]] - [:button {:class (stl/css :action-btn) - :on-click (partial delete-export index)} - i/remove-refactor]]) - ]) - (when (or (= :multiple exports) (seq @exports)) - [:button - {:on-click (when-not in-progress? on-download) - :class (stl/css-case - :export-btn true - :btn-disabled in-progress?) - :disabled in-progress?} - (if in-progress? - (tr "workspace.options.exporting-object") - (tr "workspace.options.export-object" (c (count shapes))))]) - ] - - - - [:div.element-set.exports-options - [:div.element-set-title - [:span (tr "workspace.options.export")] - [:div.add-page {:on-click add-export} i/close]] - - (when (seq @exports) - [:div.element-set-content - (for [[index export] (d/enumerate @exports)] - [:div.element-set-options-group - {:key index} - (when (scale-enabled? export) - [:select.input-select {:on-change (partial on-scale-change index) - :value (:scale export)} - [:option {:value "0.5"} "0.5x"] - [:option {:value "0.75"} "0.75x"] - [:option {:value "1"} "1x"] - [:option {:value "1.5"} "1.5x"] - [:option {:value "2"} "2x"] - [:option {:value "4"} "4x"] - [:option {:value "6"} "6x"]]) - - [:input.input-text {:value (:suffix export) - :placeholder (tr "workspace.options.export.suffix") - :on-change (partial on-suffix-change index) - :on-key-down manage-key-down}] - [:select.input-select {:value (d/name (:type export)) - :on-change (partial on-type-change index)} - [:option {:value "png"} "PNG"] - [:option {:value "jpeg"} "JPEG"] - [:option {:value "svg"} "SVG"] - [:option {:value "pdf"} "PDF"]] - [:div.delete-icon {:on-click (partial delete-export index)} - i/minus]]) - - [:div.btn-icon-dark.download-button - {:on-click (when-not in-progress? on-download) - :class (dom/classnames :btn-disabled in-progress?) - :disabled in-progress?} - (if in-progress? - (tr "workspace.options.exporting-object") - (tr "workspace.options.export-object" (c (count shapes))))]])]))) + [:button {:class (stl/css :action-btn) + :on-click (partial delete-export index)} + i/remove-refactor]])]) + (when (or (= :multiple exports) (seq @exports)) + [:button + {:on-click (when-not in-progress? on-download) + :class (stl/css-case + :export-btn true + :btn-disabled in-progress?) + :disabled in-progress?} + (if in-progress? + (tr "workspace.options.exporting-object") + (tr "workspace.options.export-object" (c (count shapes))))])])) diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss index 7feb5785c5..9d96c8339f 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.scss +++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss @@ -9,83 +9,85 @@ .element-set { padding-bottom: $s-16; margin: 0; - .element-title { - margin: 0; - .title-spacing-export-viewer { - @extend .attr-title; - margin: 0; - } - .add-export { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .element-set-content { - @include flexColumn; - margin-bottom: $s-4; - .multiple-exports { - @include flexRow; - .label { - @extend .mixed-bar; - } - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - } - .element-group { - @include flexRow; - .input-wrapper { - @include flexRow; - .format-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - width: $s-80; - top: unset; - } - } - .size-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - top: unset; - width: $s-80; - } - } - .suffix-input { - @extend .input-element; - min-width: $s-92; - flex-grow: 1; - } - } - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - } - .export-btn { - @extend .button-secondary; - @include tabTitleTipography; - height: $s-32; - width: $s-252; +} + +.element-title { + margin: 0; +} + +.title-spacing-export-viewer { + @extend .attr-title; + margin: 0; +} + +.add-export { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } } + +.element-set-content { + @include flexColumn; + margin-bottom: $s-4; +} + +.multiple-exports { + @include flexRow; +} + +.label { + @extend .mixed-bar; +} + +.actions { + @include flexRow; +} + +.action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.element-group { + @include flexRow; +} + +.input-wrapper { + @include flexRow; +} + +.format-select { + width: $s-60; + padding: 0; +} + +.dropdown-upwards { + bottom: $s-36; + width: $s-80; + top: unset; +} + +.size-select { + width: $s-60; + padding: 0; +} + +.suffix-input { + @extend .input-element; + min-width: $s-92; + flex-grow: 1; +} + +.export-btn { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + width: $s-252; +} diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index c570f091a2..406e9652f3 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -19,7 +19,6 @@ [app.main.data.viewer :as dv] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.viewer.shapes :as shapes] @@ -193,8 +192,7 @@ (mf/defc flows-menu {::mf/wrap [mf/memo]} [{:keys [page index]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - flows (dm/get-in page [:options :flows]) + (let [flows (dm/get-in page [:options :flows]) frames (:frames page) frame (get frames index) current-flow* (mf/use-state @@ -217,47 +215,28 @@ (st/emit! (dv/go-to-frame (:starting-frame flow))))))] (when (seq flows) - (if new-css-system - [:div {:on-click toggle-dropdown - :class (stl/css :view-options)} - [:span {:class (stl/css :icon)} i/play-refactor] - [:span {:class (stl/css :dropdown-title)} (:name current-flow)] - [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] - [:& dropdown {:show show-dropdown? - :on-close hide-dropdown} - [:ul {:class (stl/css :dropdown)} - (for [[index flow] (d/enumerate flows)] - [:li {:key (dm/str "flow-" (:id flow) "-" index) - :class (stl/css-case :dropdown-element true - :selected (= (:id flow) (:id current-flow))) - ;; This is not a best practise, is not very performant Do not reproduce - :data-value (pr-str flow) - :on-click select-flow} - [:span {:class (stl/css :label)} (:name flow)] - (when (= (:id flow) (:id current-flow)) - [:span {:class (stl/css :icon)} i/tick-refactor])])]]] - - ;; OLD - [:div.view-options {:on-click toggle-dropdown} - [:span.icon i/play] - [:span.label (:name current-flow)] - [:span.icon i/arrow-down] - [:& dropdown {:show show-dropdown? - :on-close hide-dropdown} - [:ul.dropdown.with-check - (for [[index flow] (d/enumerate flows)] - [:li {:key (dm/str "flow-" (:id flow) "-" index) - :class (dom/classnames :selected (= (:id flow) (:id current-flow))) - ;; This is not a best practise, is not very performant Do not reproduce - :data-value (pr-str flow) - :on-click select-flow} - [:span.icon i/tick] - [:span.label (:name flow)]])]]])))) + [:div {:on-click toggle-dropdown + :class (stl/css :view-options)} + [:span {:class (stl/css :icon)} i/play-refactor] + [:span {:class (stl/css :dropdown-title)} (:name current-flow)] + [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] + [:& dropdown {:show show-dropdown? + :on-close hide-dropdown} + [:ul {:class (stl/css :dropdown)} + (for [[index flow] (d/enumerate flows)] + [:li {:key (dm/str "flow-" (:id flow) "-" index) + :class (stl/css-case :dropdown-element true + :selected (= (:id flow) (:id current-flow))) + ;; This is not a best practise, is not very performant Do not reproduce + :data-value (pr-str flow) + :on-click select-flow} + [:span {:class (stl/css :label)} (:name flow)] + (when (= (:id flow) (:id current-flow)) + [:span {:class (stl/css :icon)} i/tick-refactor])])]]]))) (mf/defc interactions-menu [{:keys [interactions-mode]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - show-dropdown? (mf/use-state false) + (let [show-dropdown? (mf/use-state false) toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) @@ -269,67 +248,40 @@ (keyword))] (dom/stop-propagation event) (st/emit! (dv/set-interactions-mode mode)))))] - (if new-css-system - [:div {:on-click toggle-dropdown - :class (stl/css :view-options)} - [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")] - [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] - [:& dropdown {:show @show-dropdown? - :on-close hide-dropdown} - [:ul {:class (stl/css :dropdown)} - [:li {:class (stl/css-case :dropdown-element true - :selected (= interactions-mode :hide)) - :on-click select-mode - :data-mode :hide} + [:div {:on-click toggle-dropdown + :class (stl/css :view-options)} + [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")] + [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor] + [:& dropdown {:show @show-dropdown? + :on-close hide-dropdown} + [:ul {:class (stl/css :dropdown)} + [:li {:class (stl/css-case :dropdown-element true + :selected (= interactions-mode :hide)) + :on-click select-mode + :data-mode :hide} - [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")] - (when (= interactions-mode :hide) - [:span {:class (stl/css :icon)} i/tick-refactor])] + [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")] + (when (= interactions-mode :hide) + [:span {:class (stl/css :icon)} i/tick-refactor])] - [:li {:class (stl/css-case :dropdown-element true - :selected (= interactions-mode :show)) - :on-click select-mode - :data-mode :show} - [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")] - (when (= interactions-mode :show) - [:span {:class (stl/css :icon)} i/tick-refactor])] + [:li {:class (stl/css-case :dropdown-element true + :selected (= interactions-mode :show)) + :on-click select-mode + :data-mode :show} + [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")] + (when (= interactions-mode :show) + [:span {:class (stl/css :icon)} i/tick-refactor])] - [:li {:class (stl/css-case :dropdown-element true - :selected (= interactions-mode :show-on-click)) - :on-click select-mode - :data-mode :show-on-click} + [:li {:class (stl/css-case :dropdown-element true + :selected (= interactions-mode :show-on-click)) + :on-click select-mode + :data-mode :show-on-click} - [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")] - (when (= interactions-mode :show-on-click) - [:span {:class (stl/css :icon)} i/tick-refactor])]]]] - - - - [:div.view-options {:on-click toggle-dropdown} - [:span.label (tr "viewer.header.interactions")] - [:span.icon i/arrow-down] - [:& dropdown {:show @show-dropdown? - :on-close hide-dropdown} - [:ul.dropdown.with-check - [:li {:class (dom/classnames :selected (= interactions-mode :hide)) - :on-click select-mode - :data-mode :hide} - [:span.icon i/tick] - [:span.label (tr "viewer.header.dont-show-interactions")]] - - [:li {:class (dom/classnames :selected (= interactions-mode :show)) - :on-click select-mode - :data-mode :show} - [:span.icon i/tick] - [:span.label (tr "viewer.header.show-interactions")]] - - [:li {:class (dom/classnames :selected (= interactions-mode :show-on-click)) - :on-click select-mode - :data-mode :show-on-click} - [:span.icon i/tick] - [:span.label (tr "viewer.header.show-interactions-on-click")]]]]]))) + [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")] + (when (= interactions-mode :show-on-click) + [:span {:class (stl/css :icon)} i/tick-refactor])]]]])) (defn animate-go-to-frame [animation current-viewport orig-viewport current-size orig-size wrapper-size] diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index da9ce16d71..29a807c2d1 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -46,10 +46,12 @@ .hint-wrapper { @include flexRow; } + .hint { flex-grow: 1; color: var(--modal-text-foreground-color); } + .custon-input-wrapper { @include flexRow; border-radius: $br-8; diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index 8e95c5727d..22cead07f0 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -14,9 +14,7 @@ [app.main.data.viewer :as dv] [app.main.render :as render] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.object :as obj] [app.util.timers :as ts] @@ -24,8 +22,7 @@ (mf/defc thumbnails-content [{:keys [children expanded? total] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - container (mf/use-ref) + (let [container (mf/use-ref) width (mf/use-var (.. js/document -documentElement -clientWidth)) element-width (mf/use-var 152) @@ -59,96 +56,58 @@ (reset! width (obj/get dom "clientWidth"))))] (mf/use-effect on-mount) - (if new-css-system - (if expanded? - [:div {:class (stl/css :thumbnails-content)} - [:div {:class (stl/css :thumbnails-list-expanded)} children]] + (if expanded? + [:div {:class (stl/css :thumbnails-content)} + [:div {:class (stl/css :thumbnails-list-expanded)} children]] - [:div {:class (stl/css :thumbnails-content)} - [:button {:class (stl/css :left-scroll-handler) - :on-click on-left-arrow-click} i/arrow-refactor] - [:button {:class (stl/css :right-scroll-handler) - :on-click on-right-arrow-click} i/arrow-refactor] + [:div {:class (stl/css :thumbnails-content)} + [:button {:class (stl/css :left-scroll-handler) + :on-click on-left-arrow-click} i/arrow-refactor] + [:button {:class (stl/css :right-scroll-handler) + :on-click on-right-arrow-click} i/arrow-refactor] - [:div {:class (stl/css :thumbnails-list) - :ref container - :on-wheel on-scroll} - [:div {:class (stl/css :thumbnails-list-inside) - :style {:right (str (* @offset 152) "px")}} - children]]]) - - - - (if expanded? - [:div.thumbnails-content - [:div.thumbnails-list-expanded children]] - - [:div.thumbnails-content - [:div.left-scroll-handler {:on-click on-left-arrow-click} i/arrow-slide] - [:div.right-scroll-handler {:on-click on-right-arrow-click} i/arrow-slide] - [:div.thumbnails-list {:ref container :on-wheel on-scroll} - [:div.thumbnails-list-inside {:style {:right (str (* @offset 152) "px")}} - children]]])))) + [:div {:class (stl/css :thumbnails-list) + :ref container + :on-wheel on-scroll} + [:div {:class (stl/css :thumbnails-list-inside) + :style {:right (str (* @offset 152) "px")}} + children]]]))) (mf/defc thumbnails-summary [{:keys [on-toggle-expand on-close total] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:div {:class (stl/css :thumbnails-summary)} - [:span {:class (stl/css :counter)} - (tr "labels.num-of-frames" (i18n/c total))] - [:span {:class (stl/css :actions)} - [:button {:class (stl/css :expand-btn) - :on-click on-toggle-expand} i/arrow-refactor] - [:button {:class (stl/css :close-btn) - :on-click on-close} i/close-refactor]]] - - - [:div.thumbnails-summary - [:span.counter (tr "labels.num-of-frames" (i18n/c total))] - [:span.buttons - [:span.btn-expand {:on-click on-toggle-expand} i/arrow-down] - [:span.btn-close {:on-click on-close} i/close]]]))) + [:div {:class (stl/css :thumbnails-summary)} + [:span {:class (stl/css :counter)} + (tr "labels.num-of-frames" (i18n/c total))] + [:span {:class (stl/css :actions)} + [:button {:class (stl/css :expand-btn) + :on-click on-toggle-expand} i/arrow-refactor] + [:button {:class (stl/css :close-btn) + :on-click on-close} i/close-refactor]]]) (mf/defc thumbnail-item {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} [{:keys [selected? frame on-click index objects page-id thumbnail-data]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - children-ids (cfh/get-children-ids objects (:id frame)) + (let [children-ids (cfh/get-children-ids objects (:id frame)) children-bounds (gsh/shapes->rect (concat [frame] (->> children-ids (keep (d/getf objects)))))] - (if new-css-system - [:button {:class (stl/css :thumbnail-item) - :on-click #(on-click % index)} - [:div {:class (stl/css-case :thumbnail-preview true - :selected selected?)} - [:& render/frame-svg {:frame (-> frame - (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))) - (assoc :children-bounds children-bounds)) - :objects objects - :use-thumbnails true}]] - [:div {:class (stl/css :thumbnail-info) - :title (:name frame)} - (:name frame)]] - - - [:div.thumbnail-item {:on-click #(on-click % index)} - [:div.thumbnail-preview - {:class (dom/classnames :selected selected?)} - [:& render/frame-svg {:frame (-> frame - (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))) - (assoc :children-bounds children-bounds)) - :objects objects - :use-thumbnails true}]] - [:div.thumbnail-info - [:span.name {:title (:name frame)} (:name frame)]]]))) + [:button {:class (stl/css :thumbnail-item) + :on-click #(on-click % index)} + [:div {:class (stl/css-case :thumbnail-preview true + :selected selected?)} + [:& render/frame-svg {:frame (-> frame + (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))) + (assoc :children-bounds children-bounds)) + :objects objects + :use-thumbnails true}]] + [:div {:class (stl/css :thumbnail-info) + :title (:name frame)} + (:name frame)]])) (mf/defc thumbnails-panel [{:keys [frames page index show? thumbnail-data] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - expanded? (mf/use-state false) + (let [expanded? (mf/use-state false) container (mf/use-ref) objects (:objects page) @@ -163,48 +122,23 @@ (st/emit! (dv/go-to-frame-by-index index)) (when @expanded? (on-close))))] - (if new-css-system - [:section - {:class (stl/css-case :viewer-thumbnails true - :expanded @expanded?) - ;; This is better as an inline-style so it won't make a reflow of every frame inside - :style {:display (when (not show?) "none")} - :ref container} + [:section {:class (stl/css-case :viewer-thumbnails true + :expanded @expanded?) + ;; This is better as an inline-style so it won't make a reflow of every frame inside + :style {:display (when (not show?) "none")} + :ref container} - [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) - :on-close on-close - :total (count frames)}] - [:& thumbnails-content {:expanded? @expanded? - :total (count frames)} - (for [[i frame] (d/enumerate frames)] - [:& thumbnail-item {:index i - :key (dm/str (:id frame) "-" i) - :frame frame - :page-id (:id page) - :objects objects - :on-click on-item-click - :selected? (= i index) - :thumbnail-data thumbnail-data}])]] - - - - [:section.viewer-thumbnails - {;; This is better as an inline-style so it won't make a reflow of every frame inside - :style {:display (when (not show?) "none")} - :class (dom/classnames :expanded @expanded?) - :ref container} - - [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) - :on-close on-close - :total (count frames)}] - [:& thumbnails-content {:expanded? @expanded? - :total (count frames)} - (for [[i frame] (d/enumerate frames)] - [:& thumbnail-item {:index i - :key (dm/str (:id frame) "-" i) - :frame frame - :page-id (:id page) - :objects objects - :on-click on-item-click - :selected? (= i index) - :thumbnail-data thumbnail-data}])]]))) + [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) + :on-close on-close + :total (count frames)}] + [:& thumbnails-content {:expanded? @expanded? + :total (count frames)} + (for [[i frame] (d/enumerate frames)] + [:& thumbnail-item {:index i + :key (dm/str (:id frame) "-" i) + :frame frame + :page-id (:id page) + :objects objects + :on-click on-item-click + :selected? (= i index) + :thumbnail-data thumbnail-data}])]])) From c14fe661df792cb2316ae2aa98f03c3f6ef50f13 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 4 Jan 2024 15:37:24 +0100 Subject: [PATCH 05/26] :recycle: remove new css from other elements --- common/src/app/common/features.cljc | 1 - frontend/src/app/main/ui.cljs | 7 +- .../app/main/ui/components/copy_button.cljs | 35 +- .../main/ui/components/editable_label.cljs | 36 +- .../main/ui/components/editable_label.scss | 20 + .../main/ui/components/editable_select.cljs | 126 ++-- .../src/app/main/ui/components/forms.cljs | 361 ++++------ .../src/app/main/ui/components/select.cljs | 84 +-- frontend/src/app/main/ui/context.cljs | 1 - frontend/src/app/main/ui/modal.cljs | 10 +- frontend/src/app/main/ui/static.cljs | 20 +- frontend/src/app/main/ui/viewer/inspect.cljs | 86 +-- .../ui/viewer/inspect/attributes/svg.cljs | 1 - .../main/ui/viewer/inspect/left_sidebar.cljs | 158 ++--- frontend/src/app/main/ui/workspace.cljs | 24 +- .../src/app/main/ui/workspace/libraries.cljs | 625 ++++++------------ .../ui/workspace/sidebar/assets/graphics.cljs | 372 ++++------- .../sidebar/options/rows/stroke_row.cljs | 270 ++------ frontend/src/features.cljs | 4 - 19 files changed, 702 insertions(+), 1539 deletions(-) diff --git a/common/src/app/common/features.cljc b/common/src/app/common/features.cljc index 20c0ab601c..f4751da8f3 100644 --- a/common/src/app/common/features.cljc +++ b/common/src/app/common/features.cljc @@ -93,7 +93,6 @@ [flag] (case flag :feature-components-v2 "components/v2" - :feature-new-css-system "styles/v2" :feature-styles-v2 "styles/v2" :feature-grid-layout "layout/grid" :feature-fdata-objects-map "fdata/objects-map" diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 8f3bdfff5f..08f714c3b7 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -7,7 +7,6 @@ (ns app.main.ui (:require [app.config :as cf] - [app.main.features :as features] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] @@ -58,10 +57,8 @@ (mf/defc main-page {::mf/wrap [#(mf/catch % {:fallback on-main-error})]} [{:keys [route profile]}] - (let [{:keys [data params]} route - new-css-system (features/use-feature "styles/v2")] + (let [{:keys [data params]} route] [:& (mf/provider ctx/current-route) {:value route} - [:& (mf/provider ctx/new-css-system) {:value new-css-system} (case (:name data) (:auth-login :auth-register @@ -171,7 +168,7 @@ :frame-preview [:& frame-preview/frame-preview] - nil)]])) + nil)])) (mf/defc app [] diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs index 49cb7f63e3..b0e09e246c 100644 --- a/frontend/src/app/main/ui/components/copy_button.cljs +++ b/frontend/src/app/main/ui/components/copy_button.cljs @@ -8,7 +8,6 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.timers :as timers] [app.util.webapi :as wapi] @@ -16,8 +15,7 @@ [rumext.v2 :as mf])) (mf/defc copy-button [{:keys [data on-copied children class]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - just-copied (mf/use-state false)] + (let [just-copied (mf/use-state false)] (mf/use-effect (mf/deps @just-copied) (fn [] @@ -27,24 +25,15 @@ (let [sub (timers/schedule 1000 #(reset! just-copied false))] ;; On unmount we dispose the timer #(rx/-dispose sub))))) - (if new-css-system - [:button {:class (dm/str class " " (stl/css-case :copy-button true - :copy-wrapper (some? children))) - :on-click #(when-not @just-copied - (reset! just-copied true) - (wapi/write-to-clipboard (if (fn? data) (data) data)))} + [:button {:class (dm/str class " " (stl/css-case :copy-button true + :copy-wrapper (some? children))) + :on-click #(when-not @just-copied + (reset! just-copied true) + (wapi/write-to-clipboard (if (fn? data) (data) data)))} - (when children - children) - [:span {:class (stl/css :icon-btn)} - (if @just-copied - i/tick-refactor - i/clipboard-refactor)]] - - [:button.copy-button - {:on-click #(when-not @just-copied - (reset! just-copied true) - (wapi/write-to-clipboard (if (fn? data) (data) data)))} - (if @just-copied - i/tick - i/copy)]))) + (when children + children) + [:span {:class (stl/css :icon-btn)} + (if @just-copied + i/tick-refactor + i/clipboard-refactor)]])) diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index 7881e86c13..caa5c5426a 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -5,8 +5,9 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.editable-label + (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.context :as ctx] + [app.common.data.macros :as dm] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] @@ -16,16 +17,14 @@ (mf/defc editable-label {::mf/wrap-props false} [props] - (let [display-value (unchecked-get props "display-value") - value (unchecked-get props "value") + (let [value (unchecked-get props "value") on-change (unchecked-get props "on-change") on-cancel (unchecked-get props "on-cancel") editing? (unchecked-get props "editing") dbl-click? (unchecked-get props "disable-dbl-click") class (unchecked-get props "class") - tooltip (unchecked-get props "tooltip") - new-css-system (mf/use-ctx ctx/new-css-system) + final-class (dm/str class " " (stl/css :editable-label)) input-ref (mf/use-ref nil) internal-editing* (mf/use-state false) internal-editing? (deref internal-editing*) @@ -83,20 +82,15 @@ (when (and editing? (not internal-editing?)) (start-edition))) - (if ^boolean internal-editing? - [:div.editable-label {:class class} - [:input.editable-label-input - {:ref input-ref - :default-value value - :on-key-up on-key-up - :on-blur cancel-edition}] + [:div {:class final-class} + [:input + {:class (stl/css :editable-label-input) + :ref input-ref + :default-value value + :on-key-up on-key-up + :on-double-click on-dbl-click + :on-blur cancel-edition}] - [:span.editable-label-close {:on-click cancel-edition} - (if ^boolean new-css-system - i/delete-text-refactor - i/close)]] - [:span.editable-label - {:class class - :title tooltip - :on-double-click on-dbl-click} - display-value]))) + [:span {:class (stl/css :editable-label-close) + :on-click cancel-edition} + i/delete-text-refactor]])) diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 04b36e4825..b444a3be7e 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -19,3 +19,23 @@ border: $s-1 solid var(--input-border-color-focus); color: var(--layer-row-foreground-color); } + +.editable-label { + display: flex; + + &.is-hidden { + display: none; + } +} + +.editable-label-close { + cursor: pointer; + + svg { + @extend .button-icon; + height: $s-12; + width: $s-12; + stroke: var(--icon-foreground); + margin: 0; + } +} diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index dab4bb13c5..a39ea201cf 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -13,7 +13,6 @@ [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.keyboard :as kbd] @@ -22,8 +21,7 @@ (mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur input-class] :as params}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - state* (mf/use-state {:id (uuid/next) + (let [state* (mf/use-state {:id (uuid/next) :is-open? false :current-value value :top nil @@ -32,9 +30,6 @@ state (deref state*) is-open? (:is-open? state) current-value (:current-value state) - top-value (:top state) - left-value (:left state) - bottom-value (:bottom state) element-id (:id state) min-val (get params :min) @@ -43,11 +38,6 @@ emit-blur? (mf/use-ref nil) font-size-wrapper-ref (mf/use-ref) - open-dropdown - (fn [event] - (dom/stop-propagation event) - (swap! state* assoc :is-open? true)) - toggle-dropdown (mf/use-fn (mf/deps state) @@ -170,81 +160,43 @@ (mf/set-ref-val! emit-blur? (not is-open?))) - (if new-css-system - [:div {:class (dm/str class " " (stl/css :editable-select)) - :ref on-node-load} - (if (= type "number") - [:> numeric-input* {:value (or (some-> current-value value->label) "") - :className input-class - :on-change set-value - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder}] - [:input {:value (or (some-> current-value value->label) "") - :class input-class - :on-change handle-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder - :type type}]) + [:div {:class (dm/str class " " (stl/css :editable-select)) + :ref on-node-load} + (if (= type "number") + [:> numeric-input* {:value (or (some-> current-value value->label) "") + :className input-class + :on-change set-value + :on-focus handle-focus + :on-blur handle-blur + :placeholder placeholder}] + [:input {:value (or (some-> current-value value->label) "") + :class input-class + :on-change handle-change-input + :on-key-down handle-key-down + :on-focus handle-focus + :on-blur handle-blur + :placeholder placeholder + :type type}]) - [:span {:class (stl/css :dropdown-button) - :on-click toggle-dropdown} - i/arrow-refactor] + [:span {:class (stl/css :dropdown-button) + :on-click toggle-dropdown} + i/arrow-refactor] - [:& dropdown {:show (or is-open? false) - :on-close close-dropdown} - [:ul {:class (stl/css :custom-select-dropdown) - :ref font-size-wrapper-ref} - (for [[index item] (map-indexed vector options)] - (if (= :separator item) - [:li {:class (stl/css :separator) - :key (dm/str element-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li - {:key (str element-id "-" index) - :class (stl/css-case :dropdown-element true - :is-selected (= (dm/str value) current-value)) - :data-value value - :on-click select-item} - [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} - i/tick-refactor]])))]]] - - - [:div.editable-select {:class class - :ref on-node-load} - (if (= type "number") - [:> numeric-input* {:value (or (some-> current-value value->label) "") - :on-change set-value - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder}] - [:input.input-text {:value (or (some-> current-value value->label) "") - :on-change handle-change-input - :on-key-down handle-key-down - :on-focus handle-focus - :on-blur handle-blur - :placeholder placeholder - :type type}]) - [:span.dropdown-button {:on-click open-dropdown} i/arrow-down] - - [:& dropdown {:show (or is-open? false) - :on-close close-dropdown} - [:ul.custom-select-dropdown {:style {:position "fixed" - :top top-value - :left left-value - :bottom bottom-value} - :ref font-size-wrapper-ref} - (for [[index item] (map-indexed vector options)] - (if (= :separator item) - [:hr {:key (str element-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li.checked-element - {:key (str element-id "-" index) - :class (when (= (str value) current-value) "is-selected") - :data-value value - :on-click select-item} - [:span.check-icon i/tick] - [:span.checked-element-value label]])))]]]))) + [:& dropdown {:show (or is-open? false) + :on-close close-dropdown} + [:ul {:class (stl/css :custom-select-dropdown) + :ref font-size-wrapper-ref} + (for [[index item] (map-indexed vector options)] + (if (= :separator item) + [:li {:class (stl/css :separator) + :key (dm/str element-id "-" index)}] + (let [[value label] (as-key-value item)] + [:li + {:key (str element-id "-" index) + :class (stl/css-case :dropdown-element true + :is-selected (= (dm/str value) current-value)) + :data-value value + :on-click select-item} + [:span {:class (stl/css :label)} label] + [:span {:class (stl/css :check-icon)} + i/tick-refactor]])))]]])) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 70469c23a1..2187e81b79 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -10,7 +10,6 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.select :as cs] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -28,9 +27,7 @@ (mf/defc input [{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - input-type (get props :type "text") + (let [input-type (get props :type "text") input-name (get props :name) more-classes (get props :class) auto-focus? (get props :auto-focus? false) @@ -111,98 +108,61 @@ show-valid? (and show-success? touched? (not error)) show-invalid? (and touched? error)] - (if new-css-system - [:div {:class (dm/str more-classes " " - (stl/css-case - :input-wrapper true - :valid show-valid? - :invalid show-invalid? - :checkbox is-checkbox? - :disabled disabled))} - [:* - (cond - (some? label) - [:label {:class (stl/css-case :input-with-label (not is-checkbox?) - :input-label is-text? - :radio-label is-radio? - :checkbox-label is-checkbox?) - :tab-index "-1" - :for (name input-name)} label + [:div {:class (dm/str more-classes " " + (stl/css-case + :input-wrapper true + :valid show-valid? + :invalid show-invalid? + :checkbox is-checkbox? + :disabled disabled))} + [:* + (cond + (some? label) + [:label {:class (stl/css-case :input-with-label (not is-checkbox?) + :input-label is-text? + :radio-label is-radio? + :checkbox-label is-checkbox?) + :tab-index "-1" + :for (name input-name)} label - (when is-checkbox? - [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) + (when is-checkbox? + [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) - (if is-checkbox? - [:> :input props] - - [:div {:class (stl/css :input-and-icon)} - [:> :input props] - (when help-icon' - [:span {:class (stl/css :help-icon) - :on-click (when (= "password" input-type) - swap-text-password)} - help-icon']) - - (when show-valid? - [:span {:class (stl/css :valid-icon)} - i/tick-refactor]) - - (when show-invalid? - [:span {:class (stl/css :invalid-icon)} - i/close-refactor])])] - - (some? children) - [:label {:for (name input-name)} + (if is-checkbox? [:> :input props] - children]) + + [:div {:class (stl/css :input-and-icon)} + [:> :input props] + (when help-icon' + [:span {:class (stl/css :help-icon) + :on-click (when (= "password" input-type) + swap-text-password)} + help-icon']) + + (when show-valid? + [:span {:class (stl/css :valid-icon)} + i/tick-refactor]) + + (when show-invalid? + [:span {:class (stl/css :invalid-icon)} + i/close-refactor])])] + + (some? children) + [:label {:for (name input-name)} + [:> :input props] + children]) - (cond - (and touched? (:message error)) - [:div {:id (dm/str "error-" input-name) - :class (stl/css :error) - :data-test (clojure.string/join [data-test "-error"])} - (tr (:message error))] + (cond + (and touched? (:message error)) + [:div {:id (dm/str "error-" input-name) + :class (stl/css :error) + :data-test (clojure.string/join [data-test "-error"])} + (tr (:message error))] - (string? hint) - [:div {:class (stl/css :hint)} hint])]] - - ;;OLD - [:div - {:class (str more-classes " " - (dom/classnames - :focus @focus? - :valid (and touched? (not error)) - :invalid (and touched? error) - :disabled disabled - :empty (and is-text? (str/empty? value)) - :with-icon (not (nil? help-icon')) - :custom-input is-text? - :input-radio is-radio? - :input-checkbox is-checkbox?))} - [:* - [:> :input props] - (cond - (some? label) - [:label {:for (name input-name)} label] - - (some? children) - [:label {:for (name input-name)} children]) - - (when help-icon' - [:div.help-icon - {:style {:cursor "pointer"} - :on-click (when (= "password" input-type) - swap-text-password)} - help-icon']) - (cond - (and touched? (:message error)) - [:span.error {:id (dm/str "error-" input-name) - :data-test (clojure.string/join [data-test "-error"])} (tr (:message error))] - - (string? hint) - [:span.hint hint])]]))) + (string? hint) + [:div {:class (stl/css :hint)} hint])]])) (mf/defc textarea [{:keys [label disabled form hint trim] :as props}] @@ -259,62 +219,28 @@ [:span.hint hint])]])) (mf/defc select - [{:keys [options disabled label form default data-test] :as props + [{:keys [options disabled form default] :as props :or {default ""}}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - input-name (get props :name) + (let [input-name (get props :name) form (or form (mf/use-ctx form-ctx)) value (or (get-in @form [:data input-name]) default) - cvalue (d/seek #(= value (:value %)) options) - focus? (mf/use-state false) handle-change (fn [event] (let [value (if (string? event) event (dom/get-target-val event))] - (fm/on-input-change form input-name value))) + (fm/on-input-change form input-name value)))] - on-focus - (fn [_] - (reset! focus? true)) - - on-blur - (fn [_] - (reset! focus? false))] - - (if new-css-system - [:div {:class (stl/css :select-wrapper)} - [:& cs/select - {:default-value value - :options options - :on-change handle-change}]] - - - [:div.custom-select - [:select {:value value - :on-change handle-change - :on-focus on-focus - :on-blur on-blur - :disabled disabled - :data-test data-test} - (for [item options] - [:> :option (clj->js (cond-> {:key (:value item) :value (:value item)} - (:disabled item) (assoc :disabled "disabled") - (:hidden item) (assoc :style {:display "none"}))) - (:label item)])] - - [:div.input-container {:class (dom/classnames :disabled disabled :focus @focus?)} - [:div.main-content - [:label label] - [:span.value (:label cvalue "")]] - - [:div.icon - i/arrow-slide]]]))) + [:div {:class (stl/css :select-wrapper)} + [:& cs/select + {:default-value value + :disabled disabled + :options options + :on-change handle-change}]])) (mf/defc radio-buttons {::mf/wrap-props false} [props] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - form (or (unchecked-get props "form") + (let [form (or (unchecked-get props "form") (mf/use-ctx form-ctx)) name (unchecked-get props "name") @@ -337,51 +263,31 @@ (when (fn? on-change) (on-change name value)))))] - (if new-css-system - [:div {:class (stl/css :custom-radio)} - (for [{:keys [image value label]} options] - (let [image? (some? image) - value' (encode-fn value) - checked? (= value current-value) - key (str/ffmt "%-%" name value')] - [:label {:for key - :key key - :style {:background-image (when image? (str/ffmt "url(%)" image))} - :class (stl/css-case :radio-label true - :global/checked checked? - :with-image image?)} - [:input {:on-change on-change' - :type "radio" - :class (stl/css :radio-input) - :id key - :name name - :value value' - :checked checked?}] - (when (not image?) - [:span {:class (stl/css-case :radio-icon true - :global/checked checked?)} - (when checked? [:span {:class (stl/css :radio-dot)}])]) + [:div {:class (stl/css :custom-radio)} + (for [{:keys [image value label]} options] + (let [image? (some? image) + value' (encode-fn value) + checked? (= value current-value) + key (str/ffmt "%-%" name value')] + [:label {:for key + :key key + :style {:background-image (when image? (str/ffmt "url(%)" image))} + :class (stl/css-case :radio-label true + :global/checked checked? + :with-image image?)} + [:input {:on-change on-change' + :type "radio" + :class (stl/css :radio-input) + :id key + :name name + :value value' + :checked checked?}] + (when (not image?) + [:span {:class (stl/css-case :radio-icon true + :global/checked checked?)} + (when checked? [:span {:class (stl/css :radio-dot)}])]) - label]))] - - - - [:div.custom-radio - (for [{:keys [image value label]} options] - (let [image? (some? image) - value' (encode-fn value) - key (str/ffmt "%-%" name value')] - [:div.input-radio {:key key :class (when image? "with-image")} - [:input {:on-change on-change' - :type "radio" - :id key - :name name - :value value' - :checked (= value current-value)}] - [:label {:for key - :style {:background-image (when image? (str/ffmt "url(%)" image))} - :class (when image? "with-image")} - label]]))]))) + label]))])) (mf/defc submit-button* {::mf/wrap-props false} @@ -393,12 +299,11 @@ on-click (unchecked-get props "onClick") children (unchecked-get props "children") - class (unchecked-get props "className") + class (d/nilv (unchecked-get props "className") "btn-primary btn-large") name (d/nilv (unchecked-get props "name") "submit") disabled? (or (and (some? form) (not (:valid @form))) (true? (unchecked-get props "disabled"))) - new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) "")) on-key-down @@ -442,8 +347,7 @@ (mf/defc multi-input [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - form (or form (mf/use-ctx form-ctx)) + (let [form (or form (mf/use-ctx form-ctx)) input-name (get props :name) touched? (get-in @form [:touched input-name]) error (get-in @form [:errors input-name]) @@ -456,17 +360,7 @@ empty? (and (str/empty? @value) (zero? (count @items))) - klass (str (get props :class) " " - (dom/classnames - :focus @focus? - :valid (and touched? (not error)) - :invalid (and touched? error) - :empty empty? - :custom-multi-input true - :custom-input true)) - - - new-css-klass (str (get props :class) " " + klass (str (get props :class) " " (stl/css-case :focus @focus? :valid (and touched? (not error)) @@ -474,11 +368,7 @@ :empty empty? :custom-multi-input true)) - in-klass (str class " " - (dom/classnames - :no-padding (pos? (count @items)))) - - new-css-in-klass (str class " " + in-klass (str class " " (stl/css-case :inside-input true :no-padding (pos? (count @items)))) @@ -549,59 +439,32 @@ values (filterv #(:valid %) values)] (update-form! values))) - (if new-css-system - [:div {:class new-css-klass} - [:input {:id (name input-name) - :class new-css-in-klass - :type "text" - :auto-focus true - :on-focus on-focus - :on-blur on-blur - :on-key-down on-key-down - :value @value - :on-change on-change - :placeholder (when empty? label)}] - [:label {:for (name input-name)} label] + [:div {:class klass} + [:input {:id (name input-name) + :class in-klass + :type "text" + :auto-focus true + :on-focus on-focus + :on-blur on-blur + :on-key-down on-key-down + :value @value + :on-change on-change + :placeholder (when empty? label)}] + [:label {:for (name input-name)} label] - (when-let [items (seq @items)] - [:div {:class (stl/css :selected-items)} - (for [item items] - [:div {:class (stl/css :selected-item) - :key (:text item) - :tab-index "0" - :on-key-down (partial manage-key-down item)} - [:span {:class (stl/css-case :around true - :invalid (not (:valid item)) - :caution (:caution item))} - [:span {:class (stl/css :text)} (:text item)] - [:button {:class (stl/css :icon) - :on-click #(remove-item! item)} i/close-refactor]]])])] - - - - [:div {:class klass} - [:input {:id (name input-name) - :class in-klass - :type "text" - :auto-focus true - :on-focus on-focus - :on-blur on-blur - :on-key-down on-key-down - :value @value - :on-change on-change - :placeholder (when empty? label)}] - [:label {:for (name input-name)} label] - - (when-let [items (seq @items)] - [:div.selected-items - (for [item items] - [:div.selected-item {:key (:text item) - :tab-index "0" - :on-key-down (partial manage-key-down item)} - [:span.around {:class (dom/classnames "invalid" (not (:valid item)) - "caution" (:caution item))} - [:span.text (:text item)] - [:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))) + (when-let [items (seq @items)] + [:div {:class (stl/css :selected-items)} + (for [item items] + [:div {:class (stl/css :selected-item) + :key (:text item) + :tab-index "0" + :on-key-down (partial manage-key-down item)} + [:span {:class (stl/css-case :around true + :invalid (not (:valid item)) + :caution (:caution item))} + [:span {:class (stl/css :text)} (:text item)] + [:button {:class (stl/css :icon) + :on-click #(remove-item! item)} i/close-refactor]]])])])) ;; --- Validators diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 5f00befbca..175cf54ed5 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.common.uuid :as uuid] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [rumext.v2 :as mf])) @@ -24,8 +23,7 @@ (mf/defc select [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - label-index (mf/with-memo [options] + (let [label-index (mf/with-memo [options] (into {} (map as-key-value) options)) state* (mf/use-state @@ -83,53 +81,33 @@ (mf/with-effect [default-value] (swap! state* assoc :current-value default-value)) - (if new-css-system - [:div {:on-click open-dropdown - :class (dm/str class " " (stl/css-case :custom-select true - :disabled disabled))} - (let [selected-option (first (filter #(= (:value %) default-value) options)) - current-icon (:icon selected-option) - current-icon-ref (i/key->icon current-icon)] - (when (and current-icon current-icon-ref) - [:span {:class (stl/css :current-icon)} @current-icon-ref])) - [:span {:class (stl/css :current-label)} current-label] - [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] - [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} - (for [[index item] (d/enumerate options)] - (if (= :separator item) - [:li {:class (dom/classnames (stl/css :separator) true) - :key (dm/str current-id "-" index)}] - (let [[value label icon] (as-key-value item) - icon-ref (i/key->icon icon)] - [:li - {:key (dm/str current-id "-" index) - :class (dom/classnames - (stl/css :checked-element) true - (stl/css :is-selected) (= value current-value)) - :data-value (pr-str value) - :on-pointer-enter highlight-item - :on-pointer-leave unhighlight-item - :on-click select-item} - (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) - [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]] - - [:div.custom-select {:on-click open-dropdown :class class} - [:span current-label] - [:span.dropdown-button i/arrow-down] - [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul.custom-select-dropdown - (for [[index item] (d/enumerate options)] - (if (= :separator item) - [:hr {:key (dm/str current-id "-" index)}] - (let [[value label] (as-key-value item)] - [:li.checked-element - {:key (dm/str current-id "-" index) - :class (when (= value current-value) "is-selected") - :data-value (pr-str value) - :on-pointer-enter highlight-item - :on-pointer-leave unhighlight-item - :on-click select-item} - [:span.check-icon i/tick] - [:span label]])))]]]))) + [:div {:on-click open-dropdown + :class (dm/str class " " (stl/css-case :custom-select true + :disabled disabled))} + (let [selected-option (first (filter #(= (:value %) default-value) options)) + current-icon (:icon selected-option) + current-icon-ref (i/key->icon current-icon)] + (when (and current-icon current-icon-ref) + [:span {:class (stl/css :current-icon)} @current-icon-ref])) + [:span {:class (stl/css :current-label)} current-label] + [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] + [:& dropdown {:show is-open? :on-close close-dropdown} + [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} + (for [[index item] (d/enumerate options)] + (if (= :separator item) + [:li {:class (dom/classnames (stl/css :separator) true) + :key (dm/str current-id "-" index)}] + (let [[value label icon] (as-key-value item) + icon-ref (i/key->icon icon)] + [:li + {:key (dm/str current-id "-" index) + :class (dom/classnames + (stl/css :checked-element) true + (stl/css :is-selected) (= value current-value)) + :data-value (pr-str value) + :on-pointer-enter highlight-item + :on-pointer-leave unhighlight-item + :on-click select-item} + (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) + [:span {:class (stl/css :label)} label] + [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])) diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index a365ce9f36..0694361ba4 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -23,7 +23,6 @@ (def libraries (mf/create-context nil)) (def components-v2 (mf/create-context nil)) -(def new-css-system (mf/create-context nil)) (def current-scroll (mf/create-context nil)) (def current-zoom (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index a7eb37a45a..0c59faa26d 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -8,9 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.data.modal :as dm] - [app.main.features :as features] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.util.dom :as dom] [app.util.keyboard :as k] [goog.events :as events] @@ -86,9 +84,7 @@ (mf/defc modal {::mf/wrap-props false} [] - (let [modal (mf/deref modal-ref) - new-css-system (features/use-feature "styles/v2")] + (let [modal (mf/deref modal-ref)] (when modal - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - [:& modal-wrapper {:data modal - :key (:id modal)}]]))) + [:& modal-wrapper {:data modal + :key (:id modal)}]))) diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index 04ae734912..e0f9a4581b 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -7,9 +7,7 @@ (ns app.main.ui.static (:require-macros [app.main.style :as stl]) (:require - [app.main.features :as features] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.globals :as globals] [app.util.i18n :refer [tr]] @@ -81,16 +79,14 @@ (mf/defc exception-page [{:keys [data] :as props}] - (let [new-css-system (features/use-feature "styles/v2")] - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - (case (:type data) - :not-found - [:& not-found] + (case (:type data) + :not-found + [:& not-found] - :bad-gateway - [:& bad-gateway] + :bad-gateway + [:& bad-gateway] - :service-unavailable - [:& service-unavailable] + :service-unavailable + [:& service-unavailable] - [:& internal-error])])) + [:& internal-error])) diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index 9624d480dd..d653518342 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -11,7 +11,6 @@ [app.common.data.macros :as dm] [app.main.data.viewer :as dv] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]] [app.main.ui.viewer.inspect.render :refer [render-frame-svg]] @@ -42,8 +41,7 @@ (mf/defc viewport [{:keys [local file page frame index viewer-pagination size share-id]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - inspect-svg-container-ref (mf/use-ref nil) + (let [inspect-svg-container-ref (mf/use-ref nil) current-section* (mf/use-state :info) current-section (deref current-section*) @@ -92,60 +90,32 @@ (fn [] (st/emit! (dv/select-shape (:id frame))))) - (if new-css-system - [:* - [:& left-sidebar {:frame frame - :local local - :page page}] - [:div {:class (stl/css :inspect-svg-wrapper) - :data-value (pr-str (:id frame)) - :on-click handle-select-frame} - [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] - [:div {:class (stl/css :inspect-svg-container) - :ref inspect-svg-container-ref} - [:& render-frame-svg {:frame frame :page page :local local :size size}]]] + [:* + [:& left-sidebar {:frame frame + :local local + :page page}] + [:div {:class (stl/css :inspect-svg-wrapper) + :data-value (pr-str (:id frame)) + :on-click handle-select-frame} + [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] + [:div {:class (stl/css :inspect-svg-container) + :ref inspect-svg-container-ref} + [:& render-frame-svg {:frame frame :page page :local local :size size}]]] - [:div {:class (stl/css-case :sidebar-container true - :not-expand (not can-be-expanded?) - :expanded can-be-expanded?) + [:div {:class (stl/css-case :sidebar-container true + :not-expand (not can-be-expanded?) + :expanded can-be-expanded?) - :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} - (when can-be-expanded? - [:div {:class (stl/css :resize-area) - :on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}]) - [:& right-sidebar {:frame frame - :selected (:selected local) - :page page - :file file - :on-change-section handle-change-section - :on-expand handle-expand - :share-id share-id}]]] - - - ;;OLD - [:* - [:& left-sidebar {:frame frame - :local local - :page page}] - [:div.inspect-svg-wrapper {:data-value (pr-str (:id frame)) - :on-click handle-select-frame} - [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] - [:div.inspect-svg-container {:ref inspect-svg-container-ref} - [:& render-frame-svg {:frame frame :page page :local local :size size}]]] - - [:div.sidebar-container - {:class (when (not can-be-expanded?) "not-expand") - :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} - [:div.resize-area - {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}] - [:& right-sidebar {:frame frame - :selected (:selected local) - :page page - :file file - :on-change-section handle-change-section - :on-expand handle-expand - :share-id share-id}]]]))) + :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} + (when can-be-expanded? + [:div {:class (stl/css :resize-area) + :on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move}]) + [:& right-sidebar {:frame frame + :selected (:selected local) + :page page + :file file + :on-change-section handle-change-section + :on-expand handle-expand + :share-id share-id}]]])) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index 5f23fd7983..eb5548f54c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -10,7 +10,6 @@ [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) diff --git a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs index 51c3d9dc7f..f546a9352e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs @@ -9,17 +9,9 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.files.helpers :as cfh] - [app.common.types.component :as ctk] - [app.common.types.shape.layout :as ctl] [app.main.data.viewer :as dv] - [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.shape-icon :as si] - [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]] - [app.main.ui.workspace.sidebar.layer-name :refer [layer-name]] [app.util.dom :as dom] [app.util.keyboard :as kbd] [okulary.core :as l] @@ -31,24 +23,13 @@ (l/derived st/state))) (mf/defc layer-item - [{:keys [item selected objects disable-collapse? depth component-child? hide-toggle?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - id (:id item) - name (:name item) + [{:keys [item selected objects depth component-child? hide-toggle?] :as props}] + (let [id (:id item) hidden? (:hidden item) - touched? (-> item :touched seq boolean) selected? (contains? selected id) item-ref (mf/use-ref nil) depth (+ depth 1) - file (mf/deref refs/viewer-file) - components-v2 (dm/get-in file [:data :options :components-v2]) - - main-instance? - (if components-v2 - (ctk/main-instance? item) - true) - component-tree? (or component-child? (:component-root item)) collapsed-iref @@ -57,7 +38,6 @@ (make-collapsed-iref id)) expanded? (not (mf/deref collapsed-iref)) - absolute? (ctl/item-absolute? item) toggle-collapse (mf/use-callback @@ -87,102 +67,50 @@ (when (and (= (count selected) 1) selected?) (dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true)))) - (if new-css-system - [:& layer-item-inner - {:ref item-ref - :item item - :depth depth - :read-only? true - :highlighted? false - :selected? selected? - :component-tree? component-tree? - :hidden? hidden? - :filtered? false - :expanded? expanded? - :hide-toggle? hide-toggle? - :on-select-shape select-shape - :on-toggle-collapse toggle-collapse} + [:& layer-item-inner + {:ref item-ref + :item item + :depth depth + :read-only? true + :highlighted? false + :selected? selected? + :component-tree? component-tree? + :hidden? hidden? + :filtered? false + :expanded? expanded? + :hide-toggle? hide-toggle? + :on-select-shape select-shape + :on-toggle-collapse toggle-collapse} - (when (and (:shapes item) expanded?) - [:div {:class (stl/css-case - :element-children true - :parent-selected selected?)} - (for [[index id] (reverse (d/enumerate (:shapes item)))] - (when-let [item (get objects id)] - [:& layer-item - {:item item - :selected selected - :index index - :objects objects - :key (dm/str id) - :depth depth - :component-child? component-tree?}]))])] - - ;; OLD - [:li {:ref item-ref - :class (dom/classnames - :component (not (nil? (:component-id item))) - :masked (:masked-group item) - :selected selected?)} - - [:div.element-list-body {:class (dom/classnames :selected selected? - :icon-layer (= (:type item) :icon)) - :on-click select-shape} - [:div.icon - (when absolute? - [:div.absolute i/position-absolute]) - [:& si/element-icon {:shape item :main-instance? main-instance?}]] - [:& layer-name {:shape-id id - :shape-name name - :shape-touched? touched? - :hidden? hidden? - :selected? selected? - :type-frame (cfh/frame-shape? item) - :disabled-double-click true}] - - (when (and (not disable-collapse?) (:shapes item)) - [:span.toggle-content - {:on-click toggle-collapse - :class (when expanded? "inverse")} - i/arrow-slide])] - - (when (and (:shapes item) expanded?) - [:ul.element-children - (for [[index id] (reverse (d/enumerate (:shapes item)))] - (when-let [item (get objects id)] - [:& layer-item - {:item item - :selected selected - :index index - :objects objects - :key (:id item)}]))])]))) + (when (and (:shapes item) expanded?) + [:div {:class (stl/css-case + :element-children true + :parent-selected selected?)} + (for [[index id] (reverse (d/enumerate (:shapes item)))] + (when-let [item (get objects id)] + [:& layer-item + {:item item + :selected selected + :index index + :objects objects + :key (dm/str id) + :depth depth + :component-child? component-tree?}]))])])) (mf/defc left-sidebar [{:keys [frame page local]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - selected (:selected local) + (let [selected (:selected local) objects (:objects page)] - (if new-css-system - [:aside {:class (stl/css :settings-bar-left)} - [:div {:class (stl/css :settings-bar-inside)} - [:div {:class (stl/css :element-list)} - [:& layer-item - {:item frame - :selected selected - :index 0 - :objects objects - :sortable? false - :filtered? false - :depth -2 - :hide-toggle? true}]]]] - - [:aside.settings-bar.settings-bar-left - [:div.settings-bar-inside - [:ul.element-list - [:& layer-item - {:item frame - :selected selected - :index 0 - :objects objects - :disable-collapse? true}]]]]))) + [:aside {:class (stl/css :settings-bar-left)} + [:div {:class (stl/css :settings-bar-inside)} + [:div {:class (stl/css :element-list)} + [:& layer-item + {:item frame + :selected selected + :index 0 + :objects objects + :sortable? false + :filtered? false + :depth -2 + :hide-toggle? true}]]]])) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index ff447eb017..c12f88a186 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -175,7 +175,6 @@ file-ready? (mf/deref file-ready*) components-v2? (features/use-feature "components/v2") - new-css-system (features/use-feature "styles/v2") background-color (:background-color wglobal)] @@ -201,16 +200,15 @@ [:& (mf/provider ctx/current-team-id) {:value team-id} [:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/components-v2) {:value components-v2?} - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} - [:section#workspace-refactor {:class (stl/css :workspace) - :style {:background-color background-color - :touch-action "none"}} - [:& context-menu] + [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} + [:section#workspace-refactor {:class (stl/css :workspace) + :style {:background-color background-color + :touch-action "none"}} + [:& context-menu] - (if ^boolean file-ready? - [:& workspace-page {:page-id page-id - :file file - :wglobal wglobal - :layout layout}] - [:& workspace-loader])]]]]]]]])) + (if ^boolean file-ready? + [:& workspace-page {:page-id page-id + :file file + :wglobal wglobal + :layout layout}] + [:& workspace-loader])]]]]]]])) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 5164a8f041..e8a74b563f 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -16,7 +16,6 @@ [app.common.uuid :as uuid] [app.main.data.modal :as modal] [app.main.data.workspace.libraries :as dwl] - [app.main.features :as features] [app.main.refs :as refs] [app.main.render :refer [component-svg]] [app.main.store :as st] @@ -25,12 +24,10 @@ [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [app.util.keyboard :as kbd] [app.util.strings :refer [matches-search]] [cuerdas.core :as str] [okulary.core :as l] @@ -104,28 +101,12 @@ [:span {:class (stl/css :element-count)} (tr "workspace.libraries.typography" typography-count)])])) -(defn- describe-linked-library - [library] - (let [components-count (count (or (ctkl/components-seq (:data library)) [])) - graphics-count (count (dm/get-in library [:data :media] [])) - colors-count (count (dm/get-in library [:data :colors] [])) - typography-count (count (dm/get-in library [:data :typographies] []))] - (describe-library components-count graphics-count colors-count typography-count))) - -(defn- describe-external-library - [library] - (let [components-count (dm/get-in library [:library-summary :components :count] 0) - graphics-count (dm/get-in library [:library-summary :media :count] 0) - colors-count (dm/get-in library [:library-summary :colors :count] 0) - typography-count (dm/get-in library [:library-summary :typographies :count] 0)] - (describe-library components-count graphics-count colors-count typography-count))) (mf/defc libraries-tab {::mf/wrap-props false} [{:keys [file-id shared? linked-libraries shared-libraries]}] (let [search-term* (mf/use-state "") search-term (deref search-term*) - new-css-system (mf/use-ctx ctx/new-css-system) library-ref (mf/with-memo [file-id] (create-file-library-ref file-id)) library (deref library-ref) @@ -155,41 +136,25 @@ change-search-term (mf/use-fn - (mf/deps new-css-system) (fn [event] - (let [value (if new-css-system - event - (-> (dom/get-target event) - (dom/get-value)))] - (reset! search-term* value)))) - - clear-search-term - (mf/use-fn #(reset! search-term* "")) + (reset! search-term* event))) link-library (mf/use-fn - (mf/deps file-id new-css-system) + (mf/deps file-id) (fn [event] - (let [library-id (if new-css-system - (some-> (dom/get-current-target event) - (dom/get-data "library-id") - (parse-uuid)) - (some-> (dom/get-target event) - (dom/get-data "library-id") - (parse-uuid)))] + (let [library-id (some-> (dom/get-current-target event) + (dom/get-data "library-id") + (parse-uuid))] (st/emit! (dwl/link-file-to-library file-id library-id))))) unlink-library (mf/use-fn (mf/deps file-id) (fn [event] - (let [library-id (if new-css-system - (some-> (dom/get-current-target event) - (dom/get-data "library-id") - (parse-uuid)) - (some-> (dom/get-target event) - (dom/get-data "library-id") - (parse-uuid)))] + (let [library-id (some-> (dom/get-current-target event) + (dom/get-data "library-id") + (parse-uuid))] (st/emit! (dwl/unlink-file-from-library file-id library-id) (dwl/sync-file file-id library-id))))) @@ -230,170 +195,92 @@ :origin :unpublish :on-accept on-delete-accept :on-cancel on-delete-cancel - :count-libraries 1})))) + :count-libraries 1}))))] - handle-key-down - (mf/use-fn - (fn [event] - (let [enter? (kbd/enter? event) - esc? (kbd/esc? event) - input-node (dom/get-target event)] - (when ^boolean enter? - (dom/blur! input-node)) - (when ^boolean esc? - (dom/blur! input-node)))))] + [:* + [:div {:class (stl/css :section)} + [:& title-bar {:collapsable? false + :title (tr "workspace.libraries.in-this-file") + :class (stl/css :title-spacing-lib)}] + [:div {:class (stl/css :section-list)} - (if new-css-system - [:* - [:div {:class (stl/css :section)} - [:& title-bar {:collapsable? false - :title (tr "workspace.libraries.in-this-file") - :class (stl/css :title-spacing-lib)}] - [:div {:class (stl/css :section-list)} + [:div {:class (stl/css :section-list-item)} + [:div + [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] + [:div {:class (stl/css :item-contents)} + [:& describe-library-blocks {:components-count (count components) + :graphics-count (count media) + :colors-count (count colors) + :typography-count (count typographies)}]]] + [:div + (if ^boolean shared? + [:input {:class (stl/css :item-unpublish) + :type "button" + :value (tr "common.unpublish") + :on-click unpublish}] + [:input {:class (stl/css :item-publish) + :type "button" + :value (tr "common.publish") + :on-click publish}])]] - [:div {:class (stl/css :section-list-item)} + (for [{:keys [id name] :as library} linked-libraries] + [:div {:class (stl/css :section-list-item) + :key (dm/str id)} [:div - [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] + [:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-contents)} - [:& describe-library-blocks {:components-count (count components) - :graphics-count (count media) - :colors-count (count colors) - :typography-count (count typographies)}]]] - [:div - (if ^boolean shared? - [:input {:class (stl/css :item-unpublish) - :type "button" - :value (tr "common.unpublish") - :on-click unpublish}] - [:input {:class (stl/css :item-publish) - :type "button" - :value (tr "common.publish") - :on-click publish}])]] + (let [components-count (count (or (ctkl/components-seq (:data library)) [])) + graphics-count (count (dm/get-in library [:data :media] [])) + colors-count (count (dm/get-in library [:data :colors] [])) + typography-count (count (dm/get-in library [:data :typographies] []))] + [:& describe-library-blocks {:components-count components-count + :graphics-count graphics-count + :colors-count colors-count + :typography-count typography-count}])]] - (for [{:keys [id name] :as library} linked-libraries] + [:button {:class (stl/css :item-button) + :type "button" + :data-library-id (dm/str id) + :on-click unlink-library} + i/detach-refactor]])]] + + [:div {:class (stl/css :section)} + [:& title-bar {:collapsable? false + :title (tr "workspace.libraries.shared-libraries") + :class (stl/css :title-spacing-lib)}] + [:div {:class (stl/css :libraries-search)} + [:& search-bar {:on-change change-search-term + :value search-term + :placeholder (tr "workspace.libraries.search-shared-libraries") + :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] + + (if (seq shared-libraries) + [:div {:class (stl/css :section-list-shared)} + (for [{:keys [id name] :as library} shared-libraries] [:div {:class (stl/css :section-list-item) :key (dm/str id)} [:div [:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-contents)} - (let [components-count (count (or (ctkl/components-seq (:data library)) [])) - graphics-count (count (dm/get-in library [:data :media] [])) - colors-count (count (dm/get-in library [:data :colors] [])) - typography-count (count (dm/get-in library [:data :typographies] []))] + (let [components-count (dm/get-in library [:library-summary :components :count] 0) + graphics-count (dm/get-in library [:library-summary :media :count] 0) + colors-count (dm/get-in library [:library-summary :colors :count] 0) + typography-count (dm/get-in library [:library-summary :typographies :count] 0)] [:& describe-library-blocks {:components-count components-count :graphics-count graphics-count :colors-count colors-count :typography-count typography-count}])]] - - [:button {:class (stl/css :item-button) - :type "button" + [:button {:class (stl/css :item-button-shared) :data-library-id (dm/str id) - :on-click unlink-library} - i/detach-refactor]])]] + :on-click link-library} + i/add-refactor]])] - [:div {:class (stl/css :section)} - [:& title-bar {:collapsable? false - :title (tr "workspace.libraries.shared-libraries") - :class (stl/css :title-spacing-lib)}] - [:div {:class (stl/css :libraries-search)} - [:& search-bar {:on-change change-search-term - :value search-term - :placeholder (tr "workspace.libraries.search-shared-libraries") - :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] - - (if (seq shared-libraries) - [:div {:class (stl/css :section-list-shared)} - (for [{:keys [id name] :as library} shared-libraries] - [:div {:class (stl/css :section-list-item) - :key (dm/str id)} - [:div - [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} - (let [components-count (dm/get-in library [:library-summary :components :count] 0) - graphics-count (dm/get-in library [:library-summary :media :count] 0) - colors-count (dm/get-in library [:library-summary :colors :count] 0) - typography-count (dm/get-in library [:library-summary :typographies :count] 0)] - [:& describe-library-blocks {:components-count components-count - :graphics-count graphics-count - :colors-count colors-count - :typography-count typography-count}])]] - [:button {:class (stl/css :item-button-shared) - :data-library-id (dm/str id) - :on-click link-library} - i/add-refactor]])] - - [:div {:class (stl/css :section-list-empty)} - (if (nil? shared-libraries) - i/loader-pencil - (if (str/empty? search-term) - (tr "workspace.libraries.no-shared-libraries-available") - (tr "workspace.libraries.no-matches-for" search-term)))])]] - - [:* - [:div.section - [:div.section-title (tr "workspace.libraries.in-this-file")] - [:div.section-list - - [:div.section-list-item - [:div - [:div.item-name (tr "workspace.libraries.file-library")] - [:div.item-contents (describe-library - (count components) - (count media) - (count colors) - (count typographies))]] - [:div - (if ^boolean shared? - [:input.item-button {:type "button" - :value (tr "common.unpublish") - :on-click unpublish}] - [:input.item-button {:type "button" - :value (tr "common.publish") - :on-click publish}])]] - - (for [{:keys [id name] :as library} linked-libraries] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-linked-library library)] - [:input.item-button {:type "button" - :value (tr "labels.remove") - :data-library-id (dm/str id) - :on-click unlink-library}]])]] - - [:div.section - [:div.section-title (tr "workspace.libraries.shared-libraries")] - [:div.libraries-search - [:input.search-input - {:placeholder (tr "workspace.libraries.search-shared-libraries") - :type "text" - :value search-term - :on-change change-search-term - :on-key-down handle-key-down}] - (if (str/empty? search-term) - [:div.search-icon - i/search] - [:div.search-icon.search-close - {:on-click clear-search-term} - i/close])] - - (if (seq shared-libraries) - [:div.section-list - (for [{:keys [id name] :as library} shared-libraries] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-external-library library)] - [:input.item-button {:type "button" - :value (tr "workspace.libraries.add") - :data-library-id (dm/str id) - :on-click link-library}]])] - - [:div.section-list-empty - (if (nil? shared-libraries) - i/loader-pencil - [:* i/library - (if (str/empty? search-term) - (tr "workspace.libraries.no-shared-libraries-available") - (tr "workspace.libraries.no-matches-for" search-term))])])]]))) + [:div {:class (stl/css :section-list-empty)} + (if (nil? shared-libraries) + i/loader-pencil + (if (str/empty? search-term) + (tr "workspace.libraries.no-shared-libraries-available") + (tr "workspace.libraries.no-matches-for" search-term)))])]])) (defn- extract-assets [file-data library summary?] @@ -457,8 +344,6 @@ (seq colors) (seq typographies)))))) - new-css-system (mf/use-ctx ctx/new-css-system) - update (mf/use-fn (mf/deps file-id) (fn [event] @@ -470,203 +355,111 @@ (dwl/set-updating-library true) (dwl/sync-file file-id library-id))))))] - (if new-css-system - [:div {:class (stl/css :section)} - (if (empty? libs-assets) - [:div {:class (stl/css :section-list-empty)} - (tr "workspace.libraries.no-libraries-need-sync")] - [:* - [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")] + [:div {:class (stl/css :section)} + (if (empty? libs-assets) + [:div {:class (stl/css :section-list-empty)} + (tr "workspace.libraries.no-libraries-need-sync")] + [:* + [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")] - [:div {:class (stl/css :section-list)} - (for [[{:keys [id name] :as library} - exceeded - {:keys [components colors typographies]}] libs-assets] - [:div {:class (stl/css :section-list-item) - :key (dm/str id)} - [:div - [:div {:class (stl/css :item-name)} name] - [:div {:class (stl/css :item-contents)} (describe-library - (count components) - 0 - (count colors) - (count typographies))]] - [:input {:type "button" - :class (stl/css-case :item-update true - :disabled updating?) - :value (tr "workspace.libraries.update") - :data-library-id (dm/str id) - :on-click update}] + [:div {:class (stl/css :section-list)} + (for [[{:keys [id name] :as library} + exceeded + {:keys [components colors typographies]}] libs-assets] + [:div {:class (stl/css :section-list-item) + :key (dm/str id)} + [:div + [:div {:class (stl/css :item-name)} name] + [:div {:class (stl/css :item-contents)} (describe-library + (count components) + 0 + (count colors) + (count typographies))]] + [:input {:type "button" + :class (stl/css-case :item-update true + :disabled updating?) + :value (tr "workspace.libraries.update") + :data-library-id (dm/str id) + :on-click update}] - [:div {:class (stl/css :libraries-updates)} - (when-not (empty? components) - [:div {:class (stl/css :libraries-updates-column)} - (for [component components] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id component))} - (let [component (ctf/load-component-objects (:data library) component) - root-shape (ctf/get-component-root (:data library) component)] - [:* - [:& component-svg {:root-shape root-shape - :objects (:objects component)}] - [:div {:class (stl/css :name-block)} - [:span {:class (stl/css :item-name) - :title (:name component)} - (:name component)]]])]) - (when (:components exceeded) - [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])]) - - (when-not (empty? colors) - [:div {:class (stl/css :libraries-updates-column) - :style #js {"--bullet-size" "24px"}} - (for [color colors] - (let [default-name (cond - (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) - (:color color) (:color color) - :else (:value color))] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id color))} - [:* - [:& bc/color-bullet {:color {:color (:color color) - :opacity (:opacity color)}}] - [:div {:class (stl/css :name-block)} - [:span {:class (stl/css :item-name) - :title (:name color)} - (:name color)] - (when-not (= (:name color) default-name) - [:span.color-value (:color color)])]]])) - (when (:colors exceeded) - [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])]) - - (when-not (empty? typographies) - [:div {:class (stl/css :libraries-updates-column)} - (for [typography typographies] - [:div {:class (stl/css :libraries-updates-item) - :key (dm/str (:id typography))} + [:div {:class (stl/css :libraries-updates)} + (when-not (empty? components) + [:div {:class (stl/css :libraries-updates-column)} + (for [component components] + [:div {:class (stl/css :libraries-updates-item) + :key (dm/str (:id component))} + (let [component (ctf/load-component-objects (:data library) component) + root-shape (ctf/get-component-root (:data library) component)] [:* - [:div {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] + [:& component-svg {:root-shape root-shape + :objects (:objects component)}] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name) - :title (:name typography)} - (:name typography)]]]]) - (when (:typographies exceeded) + :title (:name component)} + (:name component)]]])]) + (when (:components exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])]) + + (when-not (empty? colors) + [:div {:class (stl/css :libraries-updates-column) + :style #js {"--bullet-size" "24px"}} + (for [color colors] + (let [default-name (cond + (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) + (:color color) (:color color) + :else (:value color))] [:div {:class (stl/css :libraries-updates-item) - :key (uuid/next)} - [:div {:class (stl/css :name-block.ellipsis)} - [:span {:class (stl/css :item-name)} "(...)"]]])])] - - (when (or (pos? (:components exceeded)) - (pos? (:colors exceeded)) - (pos? (:typographies exceeded))) - [:div {:class (stl/css :libraries-updates-see-all)} - [:& lb/link-button {:on-click see-all-assets - :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])] - - [:div.section - (if (empty? libs-assets) - [:div.section-list-empty - i/library - (tr "workspace.libraries.no-libraries-need-sync")] - [:* - [:div.section-title (tr "workspace.libraries.library-updates")] - - [:div.section-list - (for [[{:keys [id name] :as library} - exceeded - {:keys [components colors typographies]}] libs-assets] - [:div.section-list-item {:key (dm/str id)} - [:div.item-name name] - [:div.item-contents (describe-library - (count components) - 0 - (count colors) - (count typographies))] - [:input.item-button.item-update {:type "button" - :class (stl/css-case new-css-system - :disabled updating?) - :value (tr "workspace.libraries.update") - :data-library-id (dm/str id) - :on-click update}] - - [:div.libraries-updates - (when-not (empty? components) - [:div.libraries-updates-column - (for [component components] - [:div.libraries-updates-item {:key (dm/str (:id component))} - (let [component (ctf/load-component-objects (:data library) component) - root-shape (ctf/get-component-root (:data library) component)] - [:* - [:& component-svg {:root-shape root-shape - :objects (:objects component)}] - [:div.name-block - [:span.item-name {:title (:name component)} - (:name component)]]])]) - (when (:components exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])]) - - (when-not (empty? colors) - [:div.libraries-updates-column {:style #js {"--bullet-size" "24px"}} - (for [color colors] - (let [default-name (cond - (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) - (:color color) (:color color) - :else (:value color))] - [:div.libraries-updates-item {:key (dm/str (:id color))} - [:* - [:& bc/color-bullet {:color {:color (:color color) - :opacity (:opacity color)}}] - [:div.name-block - [:span.item-name {:title (:name color)} - (:name color)] - (when-not (= (:name color) default-name) - [:span.color-value (:color color)])]]])) - (when (:colors exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])]) - - (when-not (empty? typographies) - [:div.libraries-updates-column - (for [typography typographies] - [:div.libraries-updates-item {:key (dm/str (:id typography))} + :key (dm/str (:id color))} [:* - [:div.typography-sample - {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] - [:div.name-block - [:span.item-name {:title (:name typography)} - (:name typography)]]]]) - (when (:typographies exceeded) - [:div.libraries-updates-item {:key (uuid/next)} - [:div.name-block.ellipsis - [:span.item-name "(...)"]]])])] + [:& bc/color-bullet {:color {:color (:color color) + :opacity (:opacity color)}}] + [:div {:class (stl/css :name-block)} + [:span {:class (stl/css :item-name) + :title (:name color)} + (:name color)] + (when-not (= (:name color) default-name) + [:span.color-value (:color color)])]]])) + (when (:colors exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])]) - (when (or (pos? (:components exceeded)) - (pos? (:colors exceeded)) - (pos? (:typographies exceeded))) - [:div.libraries-updates-see-all - [:& lb/link-button {:on-click see-all-assets - :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))) + (when-not (empty? typographies) + [:div {:class (stl/css :libraries-updates-column)} + (for [typography typographies] + [:div {:class (stl/css :libraries-updates-item) + :key (dm/str (:id typography))} + [:* + [:div {:style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.sample")] + [:div {:class (stl/css :name-block)} + [:span {:class (stl/css :item-name) + :title (:name typography)} + (:name typography)]]]]) + (when (:typographies exceeded) + [:div {:class (stl/css :libraries-updates-item) + :key (uuid/next)} + [:div {:class (stl/css :name-block.ellipsis)} + [:span {:class (stl/css :item-name)} "(...)"]]])])] + + (when (or (pos? (:components exceeded)) + (pos? (:colors exceeded)) + (pos? (:typographies exceeded))) + [:div {:class (stl/css :libraries-updates-see-all)} + [:& lb/link-button {:on-click see-all-assets + :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])])) (mf/defc libraries-dialog {::mf/register modal/components ::mf/register-as :libraries-dialog} [{:keys [starting-tab] :as props :or {starting-tab :libraries}}] - (let [new-css-system (features/use-feature "styles/v2") - project (mf/deref refs/workspace-project) + (let [project (mf/deref refs/workspace-project) file-data (mf/deref refs/workspace-data) file (mf/deref ref:workspace-file) @@ -685,12 +478,6 @@ shared-libraries (mf/deref refs/workspace-shared-files) - select-libraries-tab - (mf/use-fn #(reset! selected-tab* :libraries)) - - select-updates-tab - (mf/use-fn #(reset! selected-tab* :updates)) - on-tab-change (mf/use-fn #(reset! selected-tab* %)) @@ -702,55 +489,29 @@ (mf/with-effect [team-id] (when team-id (st/emit! (dwl/fetch-shared-files {:team-id team-id})))) - [:& (mf/provider ctx/new-css-system) {:value new-css-system} - (if new-css-system - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-dialog)} - [:button {:class (stl/css :close) - :on-click close-dialog} - i/close-refactor] - [:div {:class (stl/css :modal-title)} - "Libraries"] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :libraries-header)} - [:& tab-container - {:on-change-tab on-tab-change - :selected selected-tab - :collapsable? false} - [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")} - [:div {:class (stl/css :libraries-content)} - [:& libraries-tab {:file-id file-id - :shared? shared? - :linked-libraries libraries - :shared-libraries shared-libraries}]]] - [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")} - [:div {:class (stl/css :updates-content)} - [:& updates-tab {:file-id file-id - :file-data file-data - :libraries libraries}]]]]]]]] - [:div.modal-overlay - [:div.modal.libraries-dialog - [:a.close {:on-click close-dialog} i/close] - [:div.modal-content - [:div.libraries-header - [:div.header-item - {:class (stl/css-case new-css-system :active (= selected-tab :libraries)) - :on-click select-libraries-tab} - (tr "workspace.libraries.libraries")] - [:div.header-item - {:class (stl/css-case new-css-system :active (= selected-tab :updates)) - :on-click select-updates-tab} - (tr "workspace.libraries.updates")]] - [:div.libraries-content - (case selected-tab - :libraries - [:& libraries-tab {:file-id file-id - :shared? shared? - :linked-libraries libraries - :shared-libraries shared-libraries}] - :updates - [:& updates-tab {:file-id file-id - :file-data file-data - :libraries libraries}])]]]])])) + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:button {:class (stl/css :close) + :on-click close-dialog} + i/close-refactor] + [:div {:class (stl/css :modal-title)} + "Libraries"] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :libraries-header)} + [:& tab-container + {:on-change-tab on-tab-change + :selected selected-tab + :collapsable? false} + [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")} + [:div {:class (stl/css :libraries-content)} + [:& libraries-tab {:file-id file-id + :shared? shared? + :linked-libraries libraries + :shared-libraries shared-libraries}]]] + [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")} + [:div {:class (stl/css :updates-content)} + [:& updates-tab {:file-id file-id + :file-data file-data + :libraries libraries}]]]]]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs index 0bb270ec3a..45d2a15354 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.assets.graphics - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -46,7 +46,6 @@ dragging? (deref dragging*) read-only? (mf/use-ctx ctx/workspace-read-only?) - new-css-system (mf/use-ctx ctx/new-css-system) on-drop (mf/use-fn @@ -84,90 +83,49 @@ (mf/use-fn (mf/deps object-id on-asset-click) (partial on-asset-click object-id nil))] - (if ^boolean new-css-system - [:div {:ref item-ref - :class-name (dom/classnames - (css :selected) (contains? selected-objects object-id) - (css :grid-cell) listing-thumbs? - (css :enum-item) (not listing-thumbs?)) - :draggable (not read-only?) - :on-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-grahic-drag-start - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} + [:div {:ref item-ref + :class-name (stl/css-case + :selected (contains? selected-objects object-id) + :grid-cell listing-thumbs? + :enum-item (not listing-thumbs?)) + :draggable (not read-only?) + :on-click on-asset-click + :on-context-menu on-context-menu + :on-drag-start on-grahic-drag-start + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} - (when visible? - [:* - [:img {:src (when visible? (cf/resolve-file-media object true)) - :class (css :graphic-image) - :draggable false}] ;; Also need to add css pointer-events: none + (when visible? + [:* + [:img {:src (when visible? (cf/resolve-file-media object true)) + :class (stl/css :graphic-image) + :draggable false}] ;; Also need to add css pointer-events: none - (let [renaming? (= renaming (:id object))] - [:* - [:& editable-label - {:class (dom/classnames - (css :cell-name) listing-thumbs? - (css :item-name) (not listing-thumbs?) - (css :editing) renaming?) - :value (cfh/merge-path-item (:path object) (:name object)) - :tooltip (cfh/merge-path-item (:path object) (:name object)) - :display-value (:name object) - :editing renaming? - :disable-dbl-click true - :on-change do-rename - :on-cancel cancel-rename}] + (let [renaming? (= renaming (:id object))] + [:* + [:& editable-label + {:class (stl/css-case + :cell-name listing-thumbs? + :item-name (not listing-thumbs?) + :editing renaming?) + :value (cfh/merge-path-item (:path object) (:name object)) + :tooltip (cfh/merge-path-item (:path object) (:name object)) + :display-value (:name object) + :editing renaming? + :disable-dbl-click true + :on-change do-rename + :on-cancel cancel-rename}] - (when ^boolean dragging? - [:div {:class (dom/classnames (css :dragging) true)}])])])] - - [:div {:ref item-ref - :class-name (dom/classnames - :selected (contains? selected-objects object-id) - :grid-cell listing-thumbs? - :enum-item (not listing-thumbs?)) - :draggable (not read-only?) - :on-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-grahic-drag-start - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - - (when visible? - [:* - [:img {:src (when visible? (cf/resolve-file-media object true)) - :loading "lazy" - :decoding "async" - :draggable false}] ;; Also need to add css pointer-events: none - - (let [renaming? (= renaming (:id object))] - [:* - [:& editable-label - {:class (dom/classnames - :cell-name listing-thumbs? - :item-name (not listing-thumbs?) - :editing renaming?) - :value (cfh/merge-path-item (:path object) (:name object)) - :tooltip (cfh/merge-path-item (:path object) (:name object)) - :display-value (:name object) - :editing renaming? - :disable-dbl-click true - :on-change do-rename - :on-cancel cancel-rename}] - - (when ^boolean dragging? - [:div.dragging])])])]))) + (when ^boolean dragging? + [:div {:class (stl/css :dragging)}])])])])) (mf/defc graphics-group [{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected-objects on-asset-click on-drag-start do-rename cancel-rename on-rename-group on-ungroup on-context-menu selected-full]}] (let [group-open? (get open-groups prefix true) - new-css-system (mf/use-ctx ctx/new-css-system) dragging* (mf/use-state false) dragging? (deref dragging*) @@ -194,143 +152,75 @@ (mf/deps dragging* prefix selected-paths selected-full) (fn [event] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-media)))] - (if ^boolean new-css-system - [:div {:class (dom/classnames (css :graphics-group) true) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - [:& grp/asset-group-title - {:file-id file-id - :section :graphics - :path prefix - :group-open? group-open? - :on-rename on-rename-group - :on-ungroup on-ungroup}] - (when group-open? - [:* - (let [objects (get groups "" [])] - [:div {:class-name (dom/classnames - (css :asset-grid) listing-thumbs? - (css :asset-enum) (not listing-thumbs?) - (css :drop-space) (and - (empty? objects) - (some? groups) - (not dragging?))) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} + [:div {:class (stl/css :graphics-group) + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} + [:& grp/asset-group-title + {:file-id file-id + :section :graphics + :path prefix + :group-open? group-open? + :on-rename on-rename-group + :on-ungroup on-ungroup}] + (when group-open? + [:* + (let [objects (get groups "" [])] + [:div {:class-name (stl/css-case + :asset-grid listing-thumbs? + :asset-enum (not listing-thumbs?) + :drop-space (and + (empty? objects) + (some? groups) + (not dragging?))) + :on-drag-enter on-drag-enter + :on-drag-leave on-drag-leave + :on-drag-over dom/prevent-default + :on-drop on-drop} - (when ^boolean dragging? - [:div {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"]) + (when ^boolean dragging? + [:div {:class (stl/css :grid-placeholder)} "\u00A0"]) - (when (and (empty? objects) - (some? groups)) - [:div {:class (dom/classnames (css :drop-space) true)}]) + (when (and (empty? objects) + (some? groups)) + [:div {:class (stl/css :drop-space)}]) - (for [object objects] - [:& graphics-item - {:key (dm/str "object-" (:id object)) - :file-id file-id - :object object - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :selected-full selected-full - :selected-paths selected-paths}])]) - (for [[path-item content] groups] - (when-not (empty? path-item) - [:& graphics-group {:file-id file-id - :key path-item - :prefix (cfh/merge-path-item prefix path-item) - :groups content - :open-groups open-groups - :force-open? force-open? - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full - :selected-paths selected-paths}]))])] - - [:div {:on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - [:& grp/asset-group-title {:file-id file-id - :section :graphics - :path prefix - :group-open? group-open? - :on-rename on-rename-group - :on-ungroup on-ungroup}] - (when group-open? - [:* - (let [objects (get groups "" [])] - [:div {:class-name (dom/classnames - :asset-grid listing-thumbs? - :asset-enum (not listing-thumbs?) - :drop-space (and - (empty? objects) - (some? groups) - (not dragging?))) - :on-drag-enter on-drag-enter - :on-drag-leave on-drag-leave - :on-drag-over dom/prevent-default - :on-drop on-drop} - - (when ^boolean dragging? - [:div.grid-placeholder "\u00A0"]) - - (when (and (empty? objects) - (some? groups)) - [:div.drop-space]) - - (for [object objects] - [:& graphics-item {:key (dm/str "object-" (:id object)) - :file-id file-id - :object object - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-context-menu on-context-menu - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :selected-full selected-full - :selected-paths selected-paths}])]) - (for [[path-item content] groups] - (when-not (empty? path-item) - [:& graphics-group {:file-id file-id - :key path-item - :prefix (cfh/merge-path-item prefix path-item) - :groups content - :open-groups open-groups - :force-open? force-open? - :renaming renaming - :listing-thumbs? listing-thumbs? - :selected-objects selected-objects - :on-asset-click on-asset-click - :on-drag-start on-drag-start - :do-rename do-rename - :cancel-rename cancel-rename - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full - :selected-paths selected-paths}]))])]))) + (for [object objects] + [:& graphics-item + {:key (dm/str "object-" (:id object)) + :file-id file-id + :object object + :renaming renaming + :listing-thumbs? listing-thumbs? + :selected-objects selected-objects + :on-asset-click on-asset-click + :on-context-menu on-context-menu + :on-drag-start on-drag-start + :do-rename do-rename + :cancel-rename cancel-rename + :selected-full selected-full + :selected-paths selected-paths}])]) + (for [[path-item content] groups] + (when-not (empty? path-item) + [:& graphics-group {:file-id file-id + :key path-item + :prefix (cfh/merge-path-item prefix path-item) + :groups content + :open-groups open-groups + :force-open? force-open? + :renaming renaming + :listing-thumbs? listing-thumbs? + :selected-objects selected-objects + :on-asset-click on-asset-click + :on-drag-start on-drag-start + :do-rename do-rename + :cancel-rename cancel-rename + :on-rename-group on-rename-group + :on-ungroup on-ungroup + :on-context-menu on-context-menu + :selected-full selected-full + :selected-paths selected-paths}]))])])) (mf/defc graphics-section {::mf/wrap-props false} @@ -362,7 +252,6 @@ components-v2 (mf/use-ctx ctx/components-v2) team-id (mf/use-ctx ctx/current-team-id) - new-css-system (mf/use-ctx ctx/new-css-system) add-graphic (mf/use-fn @@ -496,26 +385,16 @@ :section :graphics :assets-count (count objects) :open? open?} - (if new-css-system - (when local? - [:& cmm/asset-section-block {:role :title-button} - (when (and (not components-v2) (not read-only?)) - [:button {:class (dom/classnames (css :assets-btn) true) - :on-click add-graphic} - i/add-refactor - [:& file-uploader {:accept cm/str-image-types - :multi true - :ref input-ref - :on-selected on-file-selected}]])]) - (when local? - [:& cmm/asset-section-block {:role :title-button} - (when (and (not components-v2) (not read-only?)) - [:div.assets-button {:on-click add-graphic} - i/plus - [:& file-uploader {:accept cm/str-image-types - :multi true - :ref input-ref - :on-selected on-file-selected}]])])) + (when local? + [:& cmm/asset-section-block {:role :title-button} + (when (and (not components-v2) (not read-only?)) + [:button {:class (stl/css :assets-btn) + :on-click add-graphic} + i/add-refactor + [:& file-uploader {:accept cm/str-image-types + :multi true + :ref input-ref + :on-selected on-file-selected}]])]) [:& cmm/asset-section-block {:role :content} [:& graphics-group {:file-id file-id @@ -538,21 +417,14 @@ [:& cmm/assets-context-menu {:on-close on-close-menu :state @menu-state - :options (if new-css-system - [(when-not (or multi-objects? multi-assets?) - {:option-name (tr "workspace.assets.rename") - :id "assets-rename-graphics" - :option-handler on-rename}) - {:option-name (tr "workspace.assets.delete") - :id "assets-delete-graphics" - :option-handler on-delete} - (when-not multi-assets? - {:option-name (tr "workspace.assets.group") - :id "assets-group-graphics" - :option-handler on-group})] - - [(when-not (or multi-objects? multi-assets?) - [(tr "workspace.assets.rename") on-rename]) - [(tr "workspace.assets.delete") on-delete] - (when-not multi-assets? - [(tr "workspace.assets.group") on-group])])}])]])) + :options [(when-not (or multi-objects? multi-assets?) + {:option-name (tr "workspace.assets.rename") + :id "assets-rename-graphics" + :option-handler on-rename}) + {:option-name (tr "workspace.assets.delete") + :id "assets-delete-graphics" + :option-handler on-delete} + (when-not multi-assets? + {:option-name (tr "workspace.assets.group") + :id "assets-group-graphics" + :option-handler on-group})]}])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index c5adb9a4fc..ca0b4b57fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -8,48 +8,14 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.common.data.macros :as dm] - [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) -(defn- width->string [width] - (if (= width :multiple) - "" - (str (or width 1)))) - -(defn- enum->string [value] - (if (= value :multiple) - "" - (pr-str value))) - -(defn- stroke-cap-names [] - [[nil (tr "workspace.options.stroke-cap.none") false] - [:line-arrow (tr "workspace.options.stroke-cap.line-arrow") true] - [:triangle-arrow (tr "workspace.options.stroke-cap.triangle-arrow") false] - [:square-marker (tr "workspace.options.stroke-cap.square-marker") false] - [:circle-marker (tr "workspace.options.stroke-cap.circle-marker") false] - [:diamond-marker (tr "workspace.options.stroke-cap.diamond-marker") false] - [:round (tr "workspace.options.stroke-cap.round") true] - [:square (tr "workspace.options.stroke-cap.square") false]]) - -(defn- value->img [value] - (when (and value (not= value :multiple)) - (str "images/cap-" (name value) ".svg"))) - -(defn- value->name [value] - (if (= value :multiple) - "--" - (-> (d/seek #(= (first %) value) (stroke-cap-names)) - (second)))) - (mf/defc stroke-row {::mf/wrap-props false} [{:keys [index @@ -63,8 +29,6 @@ on-stroke-width-change on-stroke-style-change on-stroke-alignment-change - open-caps-select - close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch @@ -73,17 +37,8 @@ on-blur disable-stroke-style select-on-focus]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - start-caps-state* (mf/use-state {:open? false - :top 0 - :left 0}) - start-caps-state (deref start-caps-state*) - - end-caps-state (mf/use-state {:open? false - :top 0 - :left 0}) - on-drop + (let [on-drop (fn [_ data] (on-reorder (:index data))) @@ -182,173 +137,74 @@ (mf/deps index on-stroke-cap-switch) #(on-stroke-cap-switch index))] - (if new-css-system - [:div {:class (stl/css-case - :stroke-data true - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} - ;; Stroke Color - [:& color-row {:color {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :id (:stroke-color-ref-id stroke) - :file-id (:stroke-color-ref-file stroke) - :gradient (:stroke-color-gradient stroke) - :image (:stroke-image stroke)} - :index index - :title title - :on-change on-color-change-refactor - :on-detach on-color-detach-refactor - :on-remove on-remove-refactor - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}] - - ;; Stroke Width, Alignment & Style - [:div {:class (stl/css :stroke-options)} - [:div {:class (stl/css :stroke-width-input-element) - :title (tr "workspace.options.stroke-width")} - [:span {:class (stl/css :icon)} - i/stroke-size-refactor] - [:> numeric-input* - {:min 0 - :className (stl/css :stroke-width-input) - :value stroke-width - :placeholder (tr "settings.multiple") - :on-change on-width-change - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}]] - - [:div {:class (stl/css :select-wrapper) - :data-test "stroke.alignment"} - [:& select - {:default-value stroke-alignment - :options stroke-alignment-options - :on-change on-alignment-change}]] - - (when-not disable-stroke-style - [:div {:class (stl/css :select-wrapper) - :data-test "stroke.style"} - [:& select - {:default-value stroke-style - :options stroke-style-options - :on-change on-style-change}]])] - - ;; Stroke Caps - (when show-caps - [:div {:class (stl/css :stroke-caps-options)} - [:div {:class (stl/css :cap-select)} - [:& select - {:default-value (:stroke-cap-start stroke) - :options stroke-caps-options - :on-change on-caps-start-change}]] - - [:button {:class (stl/css :swap-caps-btn) - :on-click on-cap-switch} - i/switch-refactor] - - [:div {:class (stl/css :cap-select)} - [:& select - {:default-value (:stroke-cap-end stroke) - :options stroke-caps-options - :on-change on-caps-end-change}]]])] - - - - [:div.border-data {:class (dom/classnames - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} + [:div {:class (stl/css-case + :stroke-data true + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot)) + :ref dref} ;; Stroke Color - [:& color-row {:color {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :id (:stroke-color-ref-id stroke) - :file-id (:stroke-color-ref-file stroke) - :gradient (:stroke-color-gradient stroke) - :image (:stroke-image stroke)} - :index index - :title title - :on-change (on-color-change index) - :on-detach (on-color-detach index) - :on-remove (on-remove index) - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}] + [:& color-row {:color {:color (:stroke-color stroke) + :opacity (:stroke-opacity stroke) + :id (:stroke-color-ref-id stroke) + :file-id (:stroke-color-ref-file stroke) + :gradient (:stroke-color-gradient stroke) + :image (:stroke-image stroke)} + :index index + :title title + :on-change on-color-change-refactor + :on-detach on-color-detach-refactor + :on-remove on-remove-refactor + :disable-drag disable-drag + :on-focus on-focus + :select-on-focus select-on-focus + :on-blur on-blur}] ;; Stroke Width, Alignment & Style - [:div.row-flex - [:div.input-element - {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple)) - :title (tr "workspace.options.stroke-width")} + [:div {:class (stl/css :stroke-options)} + [:div {:class (stl/css :stroke-width-input-element) + :title (tr "workspace.options.stroke-width")} + [:span {:class (stl/css :icon)} + i/stroke-size-refactor] + [:> numeric-input* + {:min 0 + :className (stl/css :stroke-width-input) + :value stroke-width + :placeholder (tr "settings.multiple") + :on-change on-width-change + :on-focus on-focus + :select-on-focus select-on-focus + :on-blur on-blur}]] - [:> numeric-input* - {:min 0 - :value (-> (:stroke-width stroke) width->string) - :placeholder (tr "settings.multiple") - :on-change (on-stroke-width-change index) - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}]] + [:div {:class (stl/css :select-wrapper) + :data-test "stroke.alignment"} + [:& select + {:default-value stroke-alignment + :options stroke-alignment-options + :on-change on-alignment-change}]] - [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (enum->string (:stroke-alignment stroke)) - :on-change (on-stroke-alignment-change index)} - (when (= (:stroke-alignment stroke) :multiple) - [:option {:value ""} "--"]) - [:option {:value ":center"} (tr "workspace.options.stroke.center")] - [:option {:value ":inner"} (tr "workspace.options.stroke.inner")] - [:option {:value ":outer"} (tr "workspace.options.stroke.outer")]] - - (when-not disable-stroke-style - [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (enum->string (:stroke-style stroke)) - :on-change (on-stroke-style-change index)} - (when (= (:stroke-style stroke) :multiple) - [:option {:value ""} "--"]) - [:option {:value ":solid"} (tr "workspace.options.stroke.solid")] - [:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")] - [:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")] - [:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]])] + (when-not disable-stroke-style + [:div {:class (stl/css :select-wrapper) + :data-test "stroke.style"} + [:& select + {:default-value stroke-style + :options stroke-style-options + :on-change on-style-change}]])] ;; Stroke Caps - (when show-caps - [:div.row-flex - [:div.cap-select {:tab-index 0 ;; tab-index to make the element focusable - :on-click (open-caps-select start-caps-state*)} - (value->name (:stroke-cap-start stroke)) - [:span.cap-select-button - i/arrow-down]] - [:& dropdown {:show (:open? start-caps-state) - :on-close (close-caps-select start-caps-state*)} - [:ul.dropdown.cap-select-dropdown {:style {:top (:top start-caps-state) - :left (:left start-caps-state)}} - (for [[idx [value label separator]] (d/enumerate (stroke-cap-names))] - (let [img (value->img value)] - [:li {:key (dm/str "start-cap-" idx) - :class (dom/classnames :separator separator) - :on-click #(on-stroke-cap-start-change index value)} - (when img [:img {:src (value->img value)}]) - label]))]] + (when show-caps + [:div {:class (stl/css :stroke-caps-options)} + [:div {:class (stl/css :cap-select)} + [:& select + {:default-value (:stroke-cap-start stroke) + :options stroke-caps-options + :on-change on-caps-start-change}]] - [:div.element-set-actions-button {:on-click #(on-stroke-cap-switch index)} - i/switch] + [:button {:class (stl/css :swap-caps-btn) + :on-click on-cap-switch} + i/switch-refactor] - [:div.cap-select {:tab-index 0 - :on-click (open-caps-select end-caps-state)} - (value->name (:stroke-cap-end stroke)) - [:span.cap-select-button - i/arrow-down]] - [:& dropdown {:show (:open? @end-caps-state) - :on-close (close-caps-select end-caps-state)} - [:ul.dropdown.cap-select-dropdown {:style {:top (:top @end-caps-state) - :left (:left @end-caps-state)}} - (for [[idx [value label separator]] (d/enumerate (stroke-cap-names))] - (let [img (value->img value)] - [:li {:key (dm/str "end-cap-" idx) - :class (dom/classnames :separator separator) - :on-click #(on-stroke-cap-end-change index value)} - (when img [:img {:src (value->img value)}]) - label]))]]])]))) + [:div {:class (stl/css :cap-select)} + [:& select + {:default-value (:stroke-cap-end stroke) + :options stroke-caps-options + :on-change on-caps-end-change}]]])])) diff --git a/frontend/src/features.cljs b/frontend/src/features.cljs index 05cf13af4c..366a70207b 100644 --- a/frontend/src/features.cljs +++ b/frontend/src/features.cljs @@ -14,10 +14,6 @@ (defn ^:export is-components-v2 [] (features/active-feature? @st/state "components/v2")) -(defn ^:export new-css-system [] - (tm/schedule-on-idle #(st/emit! (features/toggle-feature "styles/v2"))) - nil) - (defn ^:export grid [] (tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid"))) nil) From 62ffe67838fb594f29bf2c31b6e452a638cd59b8 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 15:31:55 +0100 Subject: [PATCH 06/26] :bug: Fix problem with disabled buttons visibility --- .../resources/styles/common/refactor/themes/light-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index bbfc3337d2..422c7b0c5a 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -16,7 +16,7 @@ --color-foreground-primary: var(--black); --color-foreground-secondary: var(--off-black); --color-foreground-tertiary: var(--pink); - --color-foreground-disabled: var(--light-gray-1); + --color-foreground-disabled: var(--off-black-30); --color-accent-primary: var(--purple); --color-accent-primary-muted: var(--purple-30); --color-accent-secondary: var(--blue); From 77b886aa1ac9be3dce088cfeee6f073ddc434c9b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 15:32:14 +0100 Subject: [PATCH 07/26] :bug: Restored z-index input --- .../sidebar/options/menus/layout_item.cljs | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 8a028b2ff0..13e181efb5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -353,7 +353,6 @@ (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))) ;; Z Index - on-change-z-index (mf/use-fn (mf/deps ids) @@ -382,19 +381,18 @@ [:& radio-button {:value "absolute" :id :absolute-position}]]] - (when is-absolute? - [:div {:class (stl/css :z-index-wrapper) - :title "z-index"} + [:div {:class (stl/css :z-index-wrapper) + :title "z-index"} - [:span {:class (stl/css :icon-text)} - "Z"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change #(on-change-z-index %) - :nillable true - :value (:layout-item-z-index values)}]])]) + [:span {:class (stl/css :icon-text)} + "Z"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change #(on-change-z-index %) + :nillable true + :value (:layout-item-z-index values)}]]]) [:div {:class (stl/css :row)} [:& element-behaviour {:fill? is-layout-child? From 3702c054a8e9d22490cfc3b9c9e1a987011567fb Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 15:32:26 +0100 Subject: [PATCH 08/26] :bug: Fix problem with z-index --- common/src/app/common/types/shape_tree.cljc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/src/app/common/types/shape_tree.cljc b/common/src/app/common/types/shape_tree.cljc index ab6f08e41b..95204a5239 100644 --- a/common/src/app/common/types/shape_tree.cljc +++ b/common/src/app/common/types/shape_tree.cljc @@ -193,7 +193,7 @@ [base-id idx-a idx-b])) -(defn is-shape-over-shape? +(defn- is-shape-over-shape? [objects base-shape-id over-shape-id bottom-frames?] (let [[base-id index-a index-b] (get-base objects base-shape-id over-shape-id)] @@ -218,7 +218,7 @@ [0 0])] (if (= z-index-a z-index-b) - (< index-a index-b) + (> index-a index-b) (< z-index-a z-index-b)))))) (defn sort-z-index From 1f712c82bf332247f4b23938ba07540dab849366 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 11:27:03 +0100 Subject: [PATCH 09/26] :bug: Fix problem with icons in select --- .../src/app/main/ui/components/select.cljs | 59 ++++++++++--------- .../src/app/main/ui/components/select.scss | 4 ++ 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 175cf54ed5..d960695163 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -81,33 +81,34 @@ (mf/with-effect [default-value] (swap! state* assoc :current-value default-value)) - [:div {:on-click open-dropdown - :class (dm/str class " " (stl/css-case :custom-select true - :disabled disabled))} - (let [selected-option (first (filter #(= (:value %) default-value) options)) - current-icon (:icon selected-option) - current-icon-ref (i/key->icon current-icon)] + (let [selected-option (first (filter #(= (:value %) default-value) options)) + current-icon (:icon selected-option) + current-icon-ref (i/key->icon current-icon)] + [:div {:on-click open-dropdown + :class (dm/str class " " (stl/css-case :custom-select true + :disabled disabled + :icon (some? current-icon-ref)))} (when (and current-icon current-icon-ref) - [:span {:class (stl/css :current-icon)} @current-icon-ref])) - [:span {:class (stl/css :current-label)} current-label] - [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] - [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} - (for [[index item] (d/enumerate options)] - (if (= :separator item) - [:li {:class (dom/classnames (stl/css :separator) true) - :key (dm/str current-id "-" index)}] - (let [[value label icon] (as-key-value item) - icon-ref (i/key->icon icon)] - [:li - {:key (dm/str current-id "-" index) - :class (dom/classnames - (stl/css :checked-element) true - (stl/css :is-selected) (= value current-value)) - :data-value (pr-str value) - :on-pointer-enter highlight-item - :on-pointer-leave unhighlight-item - :on-click select-item} - (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) - [:span {:class (stl/css :label)} label] - [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])) + [:span {:class (stl/css :current-icon)} current-icon-ref]) + [:span {:class (stl/css :current-label)} current-label] + [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] + [:& dropdown {:show is-open? :on-close close-dropdown} + [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} + (for [[index item] (d/enumerate options)] + (if (= :separator item) + [:li {:class (dom/classnames (stl/css :separator) true) + :key (dm/str current-id "-" index)}] + (let [[value label icon] (as-key-value item) + icon-ref (i/key->icon icon)] + [:li + {:key (dm/str current-id "-" index) + :class (dom/classnames + (stl/css :checked-element) true + (stl/css :is-selected) (= value current-value)) + :data-value (pr-str value) + :on-pointer-enter highlight-item + :on-pointer-leave unhighlight-item + :on-click select-item} + (when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref]) + [:span {:class (stl/css :label)} label] + [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]))) diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 630619a70f..6e47f82d18 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -22,6 +22,10 @@ color: var(--menu-foreground-color); cursor: pointer; + &.icon { + grid-template-columns: auto 1fr auto; + } + .current-icon { @include flexCenter; height: $s-24; From d0244e0befcc811ea5835f47d592445f52716e01 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 13:18:11 +0100 Subject: [PATCH 10/26] :bug: Fix problem with masks --- common/src/app/common/geom/bounds_map.cljc | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/common/src/app/common/geom/bounds_map.cljc b/common/src/app/common/geom/bounds_map.cljc index 769c7d5535..55230c9c0b 100644 --- a/common/src/app/common/geom/bounds_map.cljc +++ b/common/src/app/common/geom/bounds_map.cljc @@ -31,13 +31,13 @@ (create-bounds shape bounds-map objects modif-tree nil)) ([{:keys [id] :as shape} bounds-map objects modif-tree current-ref] - (cond - (and (cfh/mask-shape? shape) (d/not-empty? (:shapes shape))) - (create-bounds (get objects (first (:shapes shape))) bounds-map objects modif-tree) - - (cfh/group-shape? shape) + (if (cfh/group-shape? shape) (let [modifiers (dm/get-in modif-tree [id :modifiers]) - children (cfh/get-immediate-children objects id) + + children + (cond->> (cfh/get-immediate-children objects id) + (cfh/mask-shape? shape) + (take 1)) shape-bounds (if current-ref @current-ref @(get bounds-map id)) current-bounds (cond-> shape-bounds @@ -49,7 +49,7 @@ (mapv #(deref (get bounds-map (:id %)))))] (gpo/merge-parent-coords-bounds children-bounds current-bounds)) - :else + ;; Shape (let [modifiers (dm/get-in modif-tree [id :modifiers]) shape-bounds (if current-ref @current-ref @(get bounds-map id))] (cond-> shape-bounds From cf3c3cf9895e4467dde055a89c5545a84b8e87fd Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 13:18:28 +0100 Subject: [PATCH 11/26] :bug: Fix problem with auto in grid and min sizes --- .../geom/shapes/grid_layout/layout_data.cljc | 4 +- .../common/geom/shapes/min_size_layout.cljc | 86 ++++++++++--------- 2 files changed, 48 insertions(+), 42 deletions(-) diff --git a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc index bbec1aba7c..c13b37588f 100644 --- a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc @@ -62,14 +62,14 @@ (defn child-min-width [child child-bounds bounds objects] (+ (ctl/child-width-margin child) - (-child-min-width child child-bounds bounds objects))) + (-child-min-width child child-bounds bounds objects true))) (def -child-min-height nil) (defn child-min-height [child child-bounds bounds objects] (+ (ctl/child-height-margin child) - (-child-min-height child child-bounds bounds objects))) + (-child-min-height child child-bounds bounds objects true))) (defn layout-bounds [parent shape-bounds] diff --git a/common/src/app/common/geom/shapes/min_size_layout.cljc b/common/src/app/common/geom/shapes/min_size_layout.cljc index b0bff21386..d9ae9627a0 100644 --- a/common/src/app/common/geom/shapes/min_size_layout.cljc +++ b/common/src/app/common/geom/shapes/min_size_layout.cljc @@ -16,54 +16,60 @@ [app.common.types.shape.layout :as ctl])) (defn child-min-width - [child child-bounds bounds objects] - (cond - (and (ctl/fill-width? child) (ctl/flex-layout? child)) - (ctl/child-min-width child) - ;; Uncomment this to activate "auto" as min size - #_(let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] - (max (ctl/child-min-width child) - (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) + ([child child-bounds bounds objects] + (child-min-width child child-bounds bounds objects false)) + ([child child-bounds bounds objects strict?] + (cond + (and (not strict?) (ctl/fill-width? child) (ctl/flex-layout? child)) + (ctl/child-min-width child) - (and (ctl/fill-width? child) - (ctl/grid-layout? child)) - (let [children - (->> (cfh/get-immediate-children objects (:id child) {:remove-hidden true}) - (map #(vector @(get bounds (:id %)) %))) - layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)] - (max (ctl/child-min-width child) - (gpo/width-points (gb/layout-content-bounds bounds child layout-data)))) + (and strict? (ctl/fill-width? child) (ctl/flex-layout? child)) + (let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (max (ctl/child-min-width child) + (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) - (ctl/fill-width? child) - (ctl/child-min-width child) + (and (ctl/fill-width? child) + (ctl/grid-layout? child)) + (let [children + (->> (cfh/get-immediate-children objects (:id child) {:remove-hidden true}) + (map #(vector @(get bounds (:id %)) %))) + layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)] + (max (ctl/child-min-width child) + (gpo/width-points (gb/layout-content-bounds bounds child layout-data)))) - :else - (gpo/width-points child-bounds))) + (ctl/fill-width? child) + (ctl/child-min-width child) + + :else + (gpo/width-points child-bounds)))) (defn child-min-height - [child child-bounds bounds objects] - (cond - (and (ctl/fill-height? child) (ctl/flex-layout? child)) - ;; Uncomment this to activate "auto" as min size - (ctl/child-min-height child) - #_(let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] - (max (ctl/child-min-height child) - (gpo/height-points (fb/layout-content-bounds bounds child children objects)))) + ([child child-bounds bounds objects] + (child-min-height child child-bounds bounds objects false)) + ([child child-bounds bounds objects strict?] + (cond + (and (not strict?) (ctl/fill-height? child) (ctl/flex-layout? child)) + (ctl/child-min-height child) - (and (ctl/fill-height? child) (ctl/grid-layout? child)) - (let [children - (->> (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true}) - (map (fn [child] [@(get bounds (:id child)) child]))) - layout-data (gd/calc-layout-data child (:points child) children bounds objects true) - auto-bounds (gb/layout-content-bounds bounds child layout-data)] - (max (ctl/child-min-height child) - (gpo/height-points auto-bounds))) + (and strict? (ctl/fill-height? child) (ctl/flex-layout? child)) + (let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (max (ctl/child-min-height child) + (gpo/height-points (fb/layout-content-bounds bounds child children objects)))) - (ctl/fill-height? child) - (ctl/child-min-height child) + (and (ctl/fill-height? child) (ctl/grid-layout? child)) + (let [children + (->> (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true}) + (map (fn [child] [@(get bounds (:id child)) child]))) + layout-data (gd/calc-layout-data child (:points child) children bounds objects true) + auto-bounds (gb/layout-content-bounds bounds child layout-data)] + (max (ctl/child-min-height child) + (gpo/height-points auto-bounds))) - :else - (gpo/height-points child-bounds))) + (ctl/fill-height? child) + (ctl/child-min-height child) + + :else + (gpo/height-points child-bounds)))) #?(:cljs (do (set! fd/-child-min-width child-min-width) From a2fff7e74a0bc27baafc6f145076cb70a6164fe1 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 5 Jan 2024 13:44:02 +0100 Subject: [PATCH 12/26] :bug: Fix problem when creating flex layout --- .../workspace/sidebar/options/menus/layout_container.cljs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index c9069edbbf..b2e48ab8c9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -732,14 +732,12 @@ (mf/use-callback (mf/deps on-add-layout) (fn [] - (st/emit! (dwsl/remove-layout ids)) (on-add-layout :flex))) set-grid (mf/use-callback (mf/deps on-add-layout) (fn [] - (st/emit! (dwsl/remove-layout ids)) (on-add-layout :grid))) saved-dir (:layout-flex-dir values) @@ -934,7 +932,10 @@ [:button {:class (stl/css :add-layout) :data-value :flex :on-click on-set-layout} - i/add-refactor])])]] + i/add-refactor]) + [:button {:class (stl/css :remove-layout) + :on-click on-remove-layout} + i/remove-refactor]])]] (when (and open? has-layout?) (when (not= :multiple layout-type) From a6e802ba2a7585418f577b7bbae0f2d8e5f799c5 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Fri, 29 Dec 2023 13:42:18 +0100 Subject: [PATCH 13/26] :sparkles: Refactor style props --- frontend/src/app/main/ui/shapes/attrs.cljs | 171 ++++++++++-------- frontend/src/app/main/ui/shapes/circle.cljs | 6 +- .../src/app/main/ui/shapes/custom_stroke.cljs | 92 +++------- frontend/src/app/main/ui/shapes/frame.cljs | 10 +- frontend/src/app/main/ui/shapes/path.cljs | 13 +- frontend/src/app/main/ui/shapes/rect.cljs | 7 +- frontend/src/app/main/ui/shapes/svg_raw.cljs | 8 +- .../src/app/main/ui/shapes/text/fo_text.cljs | 2 +- .../main/ui/workspace/viewport/outline.cljs | 2 +- 9 files changed, 136 insertions(+), 175 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index e2bcf1156b..1db0a15bc9 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -9,6 +9,7 @@ [app.common.colors :as clr] [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.files.helpers :as cfh] [app.common.geom.shapes :as gsh] [app.common.svg :as csvg] [app.common.types.shape :refer [stroke-caps-line stroke-caps-marker]] @@ -27,7 +28,7 @@ (->> values (map #(+ % width)) (str/join ",")))) -(defn get-border-radius +(defn get-border-props [shape] (case (ctsr/radius-mode shape) :radius-1 @@ -58,7 +59,7 @@ (defn add-border-props! [props shape] - (obj/merge! props (get-border-radius shape))) + (obj/merge! props (get-border-props shape))) (defn add-fill! [attrs fill-data render-id index type] @@ -145,14 +146,18 @@ attrs)) -(defn add-layer-props! +(defn add-layer-styles! [props shape] (let [opacity (:opacity shape)] (if (some? opacity) (obj/set! props "opacity" opacity) props))) -(defn get-svg-props +(defn get-layer-styles + [shape] + (add-layer-styles! #js {} shape)) + +(defn- get-svg-props [shape render-id] (let [attrs (get shape :svg-attrs {}) defs (get shape :svg-defs {})] @@ -168,82 +173,92 @@ (dissoc :id) (obj/map->obj))))) -(defn add-fill-props! - [props shape render-id] - (let [svg-attrs (get-svg-props shape render-id) - svg-style (obj/get svg-attrs "style") - - shape-type (dm/get-prop shape :type) - - shape-fills (get shape :fills []) - fill-image (get shape :fill-image) - - style (-> (obj/get props "style" #js {}) - (obj/merge! svg-style) - (add-layer-props! shape))] - - (cond - (or (some? fill-image) - (= :image shape-type) - (> (count shape-fills) 1) - (some #(some? (:fill-color-gradient %)) shape-fills)) - (obj/set! style "fill" (dm/str "url(#fill-0-" render-id ")")) - - ;; imported svgs can have fill and fill-opacity attributes - (contains? svg-style "fill") - (-> style - (obj/set! "fill" (obj/get svg-style "fill")) - (obj/set! "fillOpacity" (obj/get svg-style "fillOpacity"))) - - (obj/contains? svg-attrs "fill") - (-> style - (obj/set! "fill" (obj/get svg-attrs "fill")) - (obj/set! "fillOpacity" (obj/get svg-attrs "fillOpacity"))) - - ;; If the shape comes from an imported SVG (we know because - ;; it has the :svg-attrs atribute), and it does not have an - ;; own fill, we set a default black fill. This will be - ;; inherited by child nodes, and is for emulating the - ;; behavior of standard SVG, in that a node that has no - ;; explicit fill has a default fill of black. This may be - ;; reset to normal if a Penpot frame shape appears below - ;; (see main.ui.shapes.frame/frame-container). - (and (contains? shape :svg-attrs) - (or (= :svg-raw shape-type) - (= :group shape-type)) - (empty? shape-fills)) - (let [wstyle (get shape :wrapper-styles) - fill (obj/get wstyle "fill") - fill (d/nilv fill clr/black)] - (obj/set! style "fill" fill)) - - (d/not-empty? shape-fills) - (let [fill (d/without-nils (nth shape-fills 0))] - (add-fill! style fill render-id 0 shape-type))) - - (-> props - (obj/merge! svg-attrs) - (obj/set! "style" style)))) - -(defn get-style-props - [shape render-id] - (-> #js {} - (add-fill-props! shape render-id) - (add-border-props! shape))) - -(defn get-stroke-style - [stroke-data index render-id] - (add-stroke! #js {} stroke-data render-id index)) - (defn get-fill-style [fill-data index render-id type] (add-fill! #js {} fill-data render-id index type)) -(defn extract-border-radius-attrs - [shape] - (-> (obj/create) - (add-border-props! shape))) +(defn add-fill-props! + ([props shape render-id] + (add-fill-props! props shape 0 render-id)) -(defn get-border-radius-props - [shape] - (add-border-props! #js {} shape)) + ([props shape position render-id] + (let [shape-fills (get shape :fills) + shape-shadow (get shape :shadow) + shape-blur (get shape :blur) + + svg-attrs (get-svg-props shape render-id) + svg-styles (obj/get svg-attrs "style") + + shape-type (dm/get-prop shape :type) + + style (-> (obj/get props "style") + (obj/clone) + (obj/merge! svg-styles) + (add-layer-styles! shape)) + + url-fill? (or ^boolean (some? (:fill-image shape)) + ^boolean (cfh/image-shape? shape) + ^boolean (> (count shape-fills) 1) + ^boolean (some? (some :fill-color-gradient shape-fills)) + ^boolean (some? (some :fill-image shape-fills))) + + props (if (cfh/frame-shape? shape) + props + (if (or (some? (->> shape-shadow (remove :hidden) seq)) + (and (some? shape-blur) (not ^boolean (:hidden shape-blur)))) + (obj/set! props "filter" (dm/fmt "url(#filter-%)" render-id)) + props))] + + (cond + ;; If the shape comes from an imported SVG (we know because + ;; it has the :svg-attrs atribute), and it does not have an + ;; own fill, we set a default black fill. This will be + ;; inherited by child nodes, and is for emulating the + ;; behavior of standard SVG, in that a node that has no + ;; explicit fill has a default fill of black. This may be + ;; reset to normal if a Penpot frame shape appears below + ;; (see main.ui.shapes.frame/frame-container). + (and ^boolean (contains? shape :svg-attrs) + ^boolean (or ^boolean (= :svg-raw shape-type) + ^boolean (= :group shape-type)) + ^boolean (empty? shape-fills)) + (let [wstyle (get shape :wrapper-styles) + fill (obj/get wstyle "fill") + fill (d/nilv fill clr/black)] + (obj/set! style "fill" fill)) + + ^boolean url-fill? + (do + (obj/unset! style "fill") + (obj/unset! style "fillOpacity") + (obj/set! props "fill" (dm/fmt "url(#fill-%-%)" position render-id))) + + (and ^boolean (some? svg-styles) + ^boolean (obj/contains? svg-styles "fill")) + (let [fill (obj/get svg-styles "fill") + opacity (obj/get svg-styles "fillOpacity")] + (when (some? fill) + (obj/set! style "fill" fill)) + (when (some? opacity) + (obj/set! style "fillOpacity" opacity))) + + (and ^boolean (some? svg-attrs) + ^boolean (empty? shape-fills)) + (let [fill (obj/get svg-attrs "fill") + opacity (obj/get svg-attrs "fillOpacity")] + (when (some? fill) + (obj/set! style "fill" fill)) + (when (some? opacity) + (obj/set! style "fillOpacity" opacity))) + + ^boolean (d/not-empty? shape-fills) + (let [fill (nth shape-fills 0)] + (obj/merge! style (get-fill-style fill render-id 0 shape-type))) + + (and ^boolean (cfh/path-shape? shape) + ^boolean (empty? shape-fills)) + (obj/set! style "fill" "none")) + + (-> props + (obj/merge! svg-attrs) + (obj/set! "style" style))))) diff --git a/frontend/src/app/main/ui/shapes/circle.cljs b/frontend/src/app/main/ui/shapes/circle.cljs index 367e0854d4..f241a05f1e 100644 --- a/frontend/src/app/main/ui/shapes/circle.cljs +++ b/frontend/src/app/main/ui/shapes/circle.cljs @@ -8,8 +8,6 @@ (:require [app.common.data.macros :as dm] [app.common.geom.shapes :as gsh] - [app.main.ui.context :as muc] - [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]] [app.util.object :as obj] [rumext.v2 :as mf])) @@ -31,10 +29,8 @@ rx (/ w 2) ry (/ h 2) - rid (mf/use-ctx muc/render-id) - props (mf/with-memo [shape] - (-> (attrs/get-style-props shape rid) + (-> #js {} (obj/merge! #js {:cx cx :cy cy :rx rx :ry ry :transform t})))] [:& shape-custom-strokes {:shape shape} diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index 8bd9120479..17a8a9dadd 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -419,67 +419,11 @@ (defn- build-fill-element [shape child position render-id] - (let [shape-fills (get shape :fills) - shape-shadow (get shape :shadow) - shape-blur (get shape :blur) - - type (obj/get child "type") + (let [type (obj/get child "type") props (-> (obj/get child "props") (obj/clone)) - style (-> (obj/get props "style") - (obj/clone)) - - url-fill? (or ^boolean (some? (:fill-image shape)) - ^boolean (cfh/image-shape? shape) - ^boolean (> (count shape-fills) 1) - ^boolean (some? (some :fill-color-gradient shape-fills)) - ^boolean (some? (some :fill-image shape-fills))) - - props (if (cfh/frame-shape? shape) - props - (if (or (some? (->> shape-shadow (remove :hidden) seq)) - (and (some? shape-blur) (not ^boolean (:hidden shape-blur)))) - (obj/set! props "filter" (dm/fmt "url(#filter-%)" render-id)) - props)) - - svg-attrs (attrs/get-svg-props shape render-id) - svg-styles (obj/get svg-attrs "style")] - - (cond - ^boolean url-fill? - (do - (obj/unset! style "fill") - (obj/unset! style "fillOpacity") - (obj/set! props "fill" (dm/fmt "url(#fill-%-%)" position render-id))) - - (and ^boolean (some? svg-styles) - ^boolean (obj/contains? svg-styles "fill")) - (let [fill (obj/get svg-styles "fill") - opacity (obj/get svg-styles "fillOpacity")] - (when (some? fill) - (obj/set! style "fill" fill)) - (when (some? opacity) - (obj/set! style "fillOpacity" opacity))) - - (and ^boolean (some? svg-attrs) - ^boolean (empty? shape-fills)) - (let [fill (obj/get svg-attrs "fill") - opacity (obj/get svg-attrs "fillOpacity")] - (when (some? fill) - (obj/set! style "fill" fill)) - (when (some? opacity) - (obj/set! style "fillOpacity" opacity))) - - ^boolean (d/not-empty? shape-fills) - (let [fill (nth shape-fills 0)] - (obj/merge! style (attrs/get-fill-style fill render-id 0 (dm/get-prop shape :type)))) - - (and ^boolean (cfh/path-shape? shape) - ^boolean (empty? shape-fills)) - (obj/set! style "fill" "none")) - - (let [props (obj/set! props "style" style)] - (mf/html [:> type props])))) + props (attrs/add-fill-props! props shape position render-id)] + (mf/html [:> type props]))) (defn- build-stroke-element [child value position render-id] @@ -490,11 +434,11 @@ (obj/clone) (obj/set! "fill" "none") (obj/set! "fillOpacity" "none") - (obj/merge! (attrs/get-stroke-style value position render-id))) + (attrs/add-stroke! value render-id position)) - style (if (:stroke-image value) - (obj/set! style "stroke" (dm/fmt "url(#stroke-fill-%-%)" render-id position)) - style) + style (if (:stroke-image value) + (obj/set! style "stroke" (dm/fmt "url(#stroke-fill-%-%)" render-id position)) + style) props (-> (obj/clone props) (obj/unset! "fill") @@ -537,22 +481,28 @@ shape-shadow (get shape :shadow) shape-strokes (get shape :strokes) - props #js {:id stroke-id :className "strokes"} + style (-> (obj/get props "style") + (obj/clone) + (attrs/add-layer-styles! shape)) + + props #js {:id stroke-id + :className "strokes" + :style style} + props (if ^boolean (cfh/frame-shape? shape) props - (cond + (cond-> props (and (some? shape-blur) - (not ^boolean (:hidden shape-blur))) - (obj/set! props "filter" (dm/fmt "url(#filter-blur-%)" render-id)) + (not ^boolean (:hidden shape-blur))) + (obj/set! "filter" (dm/fmt "url(#filter-blur-%)" render-id)) (and (empty? shape-fills) - (some? (->> shape-shadow (remove :hidden) seq))) - (obj/set! props "filter" (dm/fmt "url(#filter-%)" render-id))))] - + (some? (->> shape-shadow (remove :hidden) seq))) + (obj/set! "filter" (dm/fmt "url(#filter-%)" render-id))))] (when (d/not-empty? shape-strokes) [:> :g props - (for [[index value] (-> (d/enumerate shape-strokes) reverse)] + (for [[index value] (reverse (d/enumerate shape-strokes))] [:& shape-custom-stroke {:shape shape :stroke value :index index diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index c7398d1304..705ce3233c 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -41,8 +41,9 @@ h (dm/get-prop shape :height) t (gsh/transform-str shape) - props (mf/with-memo [shape render-id] - (-> (attrs/get-style-props shape render-id) + props (mf/with-memo [shape] + (-> #js {} + (attrs/add-border-props! shape) (obj/merge! #js {:x x :y y :width w :height h :transform t}))) path? (some? (.-d props))] @@ -72,8 +73,9 @@ show-content? (get shape :show-content) - props (mf/with-memo [shape render-id] - (-> (attrs/get-style-props shape render-id) + props (mf/with-memo [shape] + (-> #js {} + (attrs/add-border-props! shape) (obj/merge! #js {:x x :y y diff --git a/frontend/src/app/main/ui/shapes/path.cljs b/frontend/src/app/main/ui/shapes/path.cljs index ad4a7fd4b4..424265f27f 100644 --- a/frontend/src/app/main/ui/shapes/path.cljs +++ b/frontend/src/app/main/ui/shapes/path.cljs @@ -7,8 +7,6 @@ (ns app.main.ui.shapes.path (:require [app.common.logging :as log] - [app.main.ui.context :as muc] - [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]] [app.util.object :as obj] [app.util.path.format :as upf] @@ -24,13 +22,12 @@ (upf/format-path content) (catch :default e (log/error :hint "unexpected error on formatting path" - :shape-name (:name shape) - :shape-id (:id shape) - :cause e) - ""))) + :shape-name (:name shape) + :shape-id (:id shape) + :cause e) + ""))) - render-id (mf/use-ctx muc/render-id) - props (-> (attrs/get-style-props shape render-id) + props (-> #js {} (obj/set! "d" pdata))] [:& shape-custom-strokes {:shape shape} diff --git a/frontend/src/app/main/ui/shapes/rect.cljs b/frontend/src/app/main/ui/shapes/rect.cljs index f2bf5c03d9..64b2c6cc53 100644 --- a/frontend/src/app/main/ui/shapes/rect.cljs +++ b/frontend/src/app/main/ui/shapes/rect.cljs @@ -8,7 +8,6 @@ (:require [app.common.data.macros :as dm] [app.common.geom.shapes :as gsh] - [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]] [app.util.object :as obj] @@ -25,10 +24,10 @@ h (dm/get-prop shape :height) t (gsh/transform-str shape) - rid (mf/use-ctx muc/render-id) - props (mf/with-memo [shape rid] - (-> (attrs/get-style-props shape rid) + props (mf/with-memo [shape] + (-> #js {} + (attrs/add-border-props! shape) (obj/merge! #js {:x x :y y :transform t :width w :height h}))) path? (some? (.-d props))] diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs index 9758eb2733..4a56428842 100644 --- a/frontend/src/app/main/ui/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/shapes/svg_raw.cljs @@ -40,7 +40,8 @@ render-id (mf/use-ctx muc/render-id) props (mf/with-memo [shape render-id] - (-> (usa/get-style-props shape render-id) + (-> #js {} + (usa/add-fill-props! shape render-id) (obj/unset! "transform") (obj/set! "x" x) (obj/set! "y" y) @@ -78,10 +79,11 @@ props (mf/with-memo [shape render-id] (let [element-id (dm/get-in shape [:svg-attrs :id]) - props (usa/get-style-props shape render-id)] + props (-> #js {} + (usa/add-fill-props! shape render-id))] (when (and (some? element-id) - (contains? ids-mapping element-id)) + (contains? ids-mapping element-id)) (obj/set! props "id" (get ids-mapping element-id))) props))] diff --git a/frontend/src/app/main/ui/shapes/text/fo_text.cljs b/frontend/src/app/main/ui/shapes/text/fo_text.cljs index 8644be21b6..f1241238da 100644 --- a/frontend/src/app/main/ui/shapes/text/fo_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/fo_text.cljs @@ -191,7 +191,7 @@ :transform transform :width (if (#{:auto-width} grow-type) 100000 width) :height (if (#{:auto-height :auto-width} grow-type) 100000 height) - :style (attrs/add-layer-props! #js {} shape) + :style (attrs/get-layer-styles shape) :ref ref} ;; We use a class here because react has a bug that won't use the appropriate selector for ;; `background-clip` diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs index a87178749a..43efeda91d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs @@ -51,7 +51,7 @@ (d/nilv (ex/ignoring (upf/format-path content)) ""))) border-attrs - (attrs/get-border-radius shape) + (attrs/get-border-props shape) outline-type (case type From 2698944ec7c451c2f5d9bbd5fa59d7f9d812d51d Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 11:45:05 +0100 Subject: [PATCH 14/26] :sparkles: Add proper file iteration on srepl helpers --- backend/src/app/srepl/helpers.clj | 118 +++++++++++++----------------- backend/src/app/srepl/main.clj | 108 +++++++++++++-------------- 2 files changed, 103 insertions(+), 123 deletions(-) diff --git a/backend/src/app/srepl/helpers.clj b/backend/src/app/srepl/helpers.clj index c135d3e763..f42fcf26c6 100644 --- a/backend/src/app/srepl/helpers.clj +++ b/backend/src/app/srepl/helpers.clj @@ -24,7 +24,7 @@ [app.db :as db] [app.db.sql :as sql] [app.features.fdata :as feat.fdata] - [app.main :refer [system]] + [app.main :as main] [app.rpc.commands.files :as files] [app.rpc.commands.files-update :as files-update] [app.util.blob :as blob] @@ -55,16 +55,17 @@ (defn reset-file-data! "Hardcode replace of the data of one file." - [system id data] - (db/tx-run! system (fn [system] - (db/update! system :file - {:data data} - {:id id})))) + [id data] + (db/tx-run! main/system + (fn [system] + (db/update! system :file + {:data data} + {:id id})))) (defn get-file "Get the migrated data of one file." - [system id & {:keys [migrate?] :or {migrate? true}}] - (db/run! system + [id & {:keys [migrate?] :or {migrate? true}}] + (db/run! main/system (fn [system] (binding [pmap/*load-fn* (partial feat.fdata/load-pointer system id)] (-> (files/get-file system id :migrate? migrate?) @@ -73,8 +74,8 @@ (defn validate "Validate structure, referencial integrity and semantic coherence of all contents of a file. Returns a list of errors." - [system id] - (db/tx-run! system + [id] + (db/tx-run! main/system (fn [{:keys [::db/conn] :as system}] (binding [pmap/*load-fn* (partial feat.fdata/load-pointer system id)] (let [id (if (string? id) (parse-uuid id) id) @@ -90,8 +91,8 @@ (defn repair! "Repair the list of errors detected by validation." - [system id] - (db/tx-run! system + [id] + (db/tx-run! main/system (fn [{:keys [::db/conn] :as system}] (binding [pmap/*tracked* (pmap/create-tracked) pmap/*load-fn* (partial feat.fdata/load-pointer system id)] @@ -127,8 +128,8 @@ (defn update-file! "Apply a function to the data of one file. Optionally save the changes or not. The function receives the decoded and migrated file data." - [system & {:keys [update-fn id rollback? migrate? inc-revn?] - :or {rollback? true migrate? true inc-revn? true}}] + [& {:keys [update-fn id rollback? migrate? inc-revn?] + :or {rollback? true migrate? true inc-revn? true}}] (letfn [(process-file [{:keys [::db/conn] :as system} {:keys [features] :as file}] (binding [pmap/*tracked* (pmap/create-tracked) pmap/*load-fn* (partial feat.fdata/load-pointer system id) @@ -153,7 +154,7 @@ (dissoc file :data)))] - (db/tx-run! system + (db/tx-run! main/system (fn [system] (binding [*system* system] (try @@ -163,6 +164,12 @@ (when rollback? (db/rollback! system))))))))) + +(def ^:private sql:get-file-ids + "SELECT id FROM file + WHERE created_at < ? AND deleted_at is NULL + ORDER BY created_at DESC") + (defn analyze-files "Apply a function to all files in the database, reading them in batches. Do not change data. @@ -171,21 +178,11 @@ and the previous state and returns the new state. Emits rollback at the end of operation." - [system & {:keys [chunk-size max-items start-at on-file on-error on-end on-init with-libraries?] - :or {chunk-size 10 max-items Long/MAX_VALUE}}] - (letfn [(get-chunk [conn cursor] - (let [sql (str "SELECT id, created_at FROM file " - " WHERE created_at < ? AND deleted_at is NULL " - " ORDER BY created_at desc LIMIT ?") - rows (db/exec! conn [sql cursor chunk-size])] - [(some->> rows peek :created-at) (map :id rows)])) - - (get-candidates [conn] - (->> (d/iteration (partial get-chunk conn) - :vf second - :kf first - :initk (or start-at (dt/now))) - (take max-items))) + [& {:keys [max-items start-at on-file on-error on-end on-init with-libraries?]}] + (letfn [(get-candidates [conn] + (cond->> (db/cursor conn [sql:get-file-ids (or start-at (dt/now))]) + (some? max-items) + (take max-items))) (on-error* [cause file] (println "unexpected exception happened on processing file: " (:id file)) @@ -210,12 +207,13 @@ (catch Throwable cause ((or on-error on-error*) cause file)))))] - (db/tx-run! system + (db/tx-run! main/system (fn [{:keys [::db/conn] :as system}] (try (binding [*system* system] (when (fn? on-init) (on-init)) - (run! (partial process-file system) (get-candidates conn))) + (run! (partial process-file system) + (get-candidates conn))) (finally (when (fn? on-end) (ex/ignoring (on-end))) @@ -224,33 +222,20 @@ (defn process-files! "Apply a function to all files in the database, reading them in batches." - - [system & {:keys [chunk-size - max-items - workers - start-at - on-file - on-error - on-end - on-init - rollback?] - :or {chunk-size 10 - max-items Long/MAX_VALUE - workers 1 - rollback? true}}] - (letfn [(get-chunk [conn cursor] - (let [sql (str "SELECT id, created_at FROM file " - " WHERE created_at < ? AND deleted_at is NULL " - " ORDER BY created_at desc LIMIT ?") - rows (db/exec! conn [sql cursor chunk-size])] - [(some->> rows peek :created-at) (map :id rows)])) - - (get-candidates [conn] - (->> (d/iteration (partial get-chunk conn) - :vf second - :kf first - :initk (or start-at (dt/now))) - (take max-items))) + [& {:keys [max-items + workers + start-at + on-file + on-error + on-end + on-init + rollback?] + :or {workers 1 + rollback? true}}] + (letfn [(get-candidates [conn] + (cond->> (db/cursor conn [sql:get-file-ids (or start-at (dt/now))]) + (some? max-items) + (take max-items))) (on-error* [cause file] (println! "unexpected exception happened on processing file: " (:id file)) @@ -275,7 +260,7 @@ ((or on-error on-error*) cause file-id)))) (run-worker [in index] - (db/tx-run! system + (db/tx-run! main/system (fn [system] (binding [*system* system] (loop [i 0] @@ -288,15 +273,16 @@ (db/rollback! system))))) (run-producer [input] - (db/tx-run! system (fn [{:keys [::db/conn]}] - (doseq [file-id (get-candidates conn)] - (println! "=> producer:" file-id "|" (px/get-name)) - (sp/put! input file-id)) - (sp/close! input))))] + (db/tx-run! main/system + (fn [{:keys [::db/conn]}] + (doseq [file-id (get-candidates conn)] + (println! "=> producer:" file-id "|" (px/get-name)) + (sp/put! input file-id)) + (sp/close! input))))] (when (fn? on-init) (on-init)) - (let [input (sp/chan :buf chunk-size) + (let [input (sp/chan :buf 25) producer (px/thread {:name "penpot/srepl/producer"} (run-producer input)) diff --git a/backend/src/app/srepl/main.clj b/backend/src/app/srepl/main.clj index e7c3eb89db..d186bfe11f 100644 --- a/backend/src/app/srepl/main.clj +++ b/backend/src/app/srepl/main.clj @@ -38,52 +38,45 @@ [cuerdas.core :as str])) (defn print-available-tasks - [system] - (let [tasks (:app.worker/registry system)] + [] + (let [tasks (:app.worker/registry main/system)] (p/pprint (keys tasks) :level 200))) (defn run-task! - ([system name] - (run-task! system name {})) - ([system name params] - (let [tasks (:app.worker/registry system)] - (if-let [task-fn (get tasks name)] + ([tname] + (run-task! tname {})) + ([tname params] + (let [tasks (:app.worker/registry main/system) + tname (if (keyword? tname) (name tname) name)] + (if-let [task-fn (get tasks tname)] (task-fn params) - (println (format "no task '%s' found" name)))))) + (println (format "no task '%s' found" tname)))))) (defn schedule-task! - ([system name] - (schedule-task! system name {})) - ([system name props] - (let [pool (:app.db/pool system)] + ([name] + (schedule-task! name {})) + ([name props] + (let [pool (:app.db/pool main/system)] (wrk/submit! ::wrk/conn pool ::wrk/task name ::wrk/props props)))) (defn send-test-email! - [system destination] - (us/verify! - :expr (some? system) - :hint "system should be provided") - + [destination] (us/verify! :expr (string? destination) :hint "destination should be provided") - (let [handler (:app.email/sendmail system)] + (let [handler (:app.email/sendmail main/system)] (handler {:body "test email" :subject "test email" :to [destination]}))) (defn resend-email-verification-email! - [system email] - (us/verify! - :expr (some? system) - :hint "system should be provided") - - (let [sprops (:app.setup/props system) - pool (:app.db/pool system) + [email] + (let [sprops (:app.setup/props main/system) + pool (:app.db/pool main/system) profile (profile/get-profile-by-email pool email)] (auth/send-email-verification! pool sprops profile) @@ -92,8 +85,8 @@ (defn mark-profile-as-active! "Mark the profile blocked and removes all the http sessiones associated with the profile-id." - [system email] - (db/with-atomic [conn (:app.db/pool system)] + [email] + (db/with-atomic [conn (:app.db/pool main/system)] (when-let [profile (db/get* conn :profile {:email (str/lower email)} {:columns [:id :email]})] @@ -104,8 +97,8 @@ (defn mark-profile-as-blocked! "Mark the profile blocked and removes all the http sessiones associated with the profile-id." - [system email] - (db/with-atomic [conn (:app.db/pool system)] + [email] + (db/with-atomic [conn (:app.db/pool main/system)] (when-let [profile (db/get* conn :profile {:email (str/lower email)} {:columns [:id :email]})] @@ -117,9 +110,9 @@ (defn reset-password! "Reset a password to a specific one for a concrete user or all users if email is `:all` keyword." - [system & {:keys [email password] :or {password "123123"} :as params}] + [& {:keys [email password] :or {password "123123"} :as params}] (us/verify! (contains? params :email) "`email` parameter is mandatory") - (db/with-atomic [conn (:app.db/pool system)] + (db/with-atomic [conn (:app.db/pool main/system)] (let [password (derive-password password)] (if (= email :all) (db/exec! conn ["update profile set password=?" password]) @@ -127,21 +120,21 @@ (db/exec! conn ["update profile set password=? where email=?" password email])))))) (defn enable-objects-map-feature-on-file! - [system & {:keys [save? id]}] - (h/update-file! system + [& {:keys [save? id]}] + (h/update-file! main/system :id id :update-fn features.fdata/enable-objects-map :save? save?)) (defn enable-pointer-map-feature-on-file! - [system & {:keys [save? id]}] - (h/update-file! system + [& {:keys [save? id]}] + (h/update-file! main/system :id id :update-fn features.fdata/enable-pointer-map :save? save?)) (defn enable-team-feature! - [system team-id feature] + [team-id feature] (dm/verify! "feature should be supported" (contains? cfeat/supported-features feature)) @@ -149,7 +142,7 @@ (let [team-id (if (string? team-id) (parse-uuid team-id) team-id)] - (db/tx-run! system + (db/tx-run! main/system (fn [{:keys [::db/conn]}] (let [team (-> (db/get conn :team {:id team-id}) (update :features db/decode-pgarray #{})) @@ -161,7 +154,7 @@ :enabled)))))) (defn disable-team-feature! - [system team-id feature] + [team-id feature] (dm/verify! "feature should be supported" (contains? cfeat/supported-features feature)) @@ -169,7 +162,7 @@ (let [team-id (if (string? team-id) (parse-uuid team-id) team-id)] - (db/tx-run! system + (db/tx-run! main/system (fn [{:keys [::db/conn]}] (let [team (-> (db/get conn :team {:id team-id}) (update :features db/decode-pgarray #{})) @@ -181,9 +174,9 @@ :disabled)))))) (defn enable-storage-features-on-file! - [system & {:as params}] - (enable-objects-map-feature-on-file! system params) - (enable-pointer-map-feature-on-file! system params)) + [& {:as params}] + (enable-objects-map-feature-on-file! main/system params) + (enable-pointer-map-feature-on-file! main/system params)) (defn instrument-var [var] @@ -207,13 +200,13 @@ (defn take-file-snapshot! "An internal helper that persist the file snapshot using non-gc collectable file-changes entry." - [system & {:keys [file-id label]}] + [& {:keys [file-id label]}] (let [file-id (h/parse-uuid file-id)] - (db/tx-run! system fsnap/take-file-snapshot! {:file-id file-id :label label}))) + (db/tx-run! main/system fsnap/take-file-snapshot! {:file-id file-id :label label}))) (defn restore-file-snapshot! - [system & {:keys [file-id id]}] - (db/tx-run! system + [& {:keys [file-id id]}] + (db/tx-run! main/system (fn [cfg] (let [file-id (h/parse-uuid file-id) id (h/parse-uuid id)] @@ -224,12 +217,13 @@ (defn list-file-snapshots! - [system & {:keys [file-id limit]}] - (db/tx-run! system (fn [system] - (let [params {:file-id (h/parse-uuid file-id) - :limit limit}] - (->> (fsnap/get-file-snapshots system (d/without-nils params)) - (print-table [:id :revn :created-at :label])))))) + [& {:keys [file-id limit]}] + (db/tx-run! main/system + (fn [system] + (let [params {:file-id (h/parse-uuid file-id) + :limit limit}] + (->> (fsnap/get-file-snapshots system (d/without-nils params)) + (print-table [:id :revn :created-at :label])))))) (defn notify! [{:keys [::mbus/msgbus ::db/pool]} & {:keys [dest code message level] @@ -334,12 +328,12 @@ (into #{}) (run! send)))) - (defn duplicate-team - [system team-id & {:keys [name]}] + [team-id & {:keys [name]}] (let [team-id (if (string? team-id) (parse-uuid team-id) team-id) name (or name (fn [prev-name] (str/ffmt "Cloned: % (%)" prev-name (dt/format-instant (dt/now)))))] - (db/tx-run! system (fn [cfg] - (db/exec-one! cfg ["SET CONSTRAINTS ALL DEFERRED"]) - (mgmt/duplicate-team cfg :team-id team-id :name name))))) + (db/tx-run! main/system + (fn [cfg] + (db/exec-one! cfg ["SET CONSTRAINTS ALL DEFERRED"]) + (mgmt/duplicate-team cfg :team-id team-id :name name))))) From 8b57dcf015b89bac50f8fcb01d7ce48ae567adde Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 12:38:04 +0100 Subject: [PATCH 15/26] :zap: Optimize dasharray generation --- frontend/src/app/main/ui/shapes/attrs.cljs | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 1db0a15bc9..707d407199 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -17,16 +17,16 @@ [app.util.object :as obj] [cuerdas.core :as str])) -(defn- stroke-type->dasharray - [width style] - (let [values (case style - :mixed [5 5 1 5] - ;; We want 0 so they are circles - :dotted [(- width) 5] - :dashed [10 10] - nil)] - - (->> values (map #(+ % width)) (str/join ",")))) +(defn- calculate-dasharray + [style width] + (let [w+5 (+ 5 width) + w+1 (+ 1 width) + w+10 (+ 10 width)] + (case style + :mixed (str/concat "" w+5 "," w+5 "," w+1 "," w+5) + :dotted (str/concat "" (- (* width 2)) "," w+5) + :dashed (str/concat "" w+10 "," w+10) + ""))) (defn get-border-props [shape] @@ -111,7 +111,7 @@ (obj/set! attrs "strokeOpacity" opacity))) (when (not= style :svg) - (obj/set! attrs "strokeDasharray" (stroke-type->dasharray width style))) + (obj/set! attrs "strokeDasharray" (calculate-dasharray style width))) ;; For simple line caps we use svg stroke-line-cap attribute. This ;; only works if all caps are the same and we are not using the tricks From 260879791bf9816498da771c951bce4bd733b14b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 12:38:28 +0100 Subject: [PATCH 16/26] :lipstick: Add minor cosmetic changes to custom-stroke react component --- frontend/src/app/main/ui/shapes/custom_stroke.cljs | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index 17a8a9dadd..d44af4ac6f 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -282,17 +282,11 @@ (mf/defc outer-stroke {::mf/wrap-props false} - [props] - - (let [child (unchecked-get props "children") - shape (unchecked-get props "shape") - stroke (unchecked-get props "stroke") - index (unchecked-get props "index") - - shape-id (dm/get-prop shape :id) + [{:keys [children shape stroke index]}] + (let [shape-id (dm/get-prop shape :id) render-id (mf/use-ctx muc/render-id) - props (obj/get child "props") + props (obj/get children "props") style (obj/get props "style") stroke-width (:stroke-width stroke 0) @@ -305,7 +299,7 @@ [:g.outer-stroke-shape [:defs [:& stroke-defs {:shape shape :stroke stroke :render-id render-id :index index}] - (let [type (obj/get child "type") + (let [type (obj/get children "type") style (-> (obj/clone style) (obj/unset! "fill") (obj/unset! "fillOpacity") From c53e476ba2378bf712b84ccb639ee346bfc6717e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 13:34:13 +0100 Subject: [PATCH 17/26] :sparkles: Make the `dm/get-prop` work also with non static fields --- common/src/app/common/data/macros.cljc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/src/app/common/data/macros.cljc b/common/src/app/common/data/macros.cljc index 4c8ff9a6c9..0bb74e204e 100644 --- a/common/src/app/common/data/macros.cljc +++ b/common/src/app/common/data/macros.cljc @@ -121,7 +121,7 @@ directly on CLJS, on CLJ works as get." [obj prop] (if (:ns &env) - (list 'js* (c/str "(~{}?." (str/snake prop) ")") obj) + (list 'js* (c/str "(~{}?." (str/snake prop) "?? ~{})") obj (list 'cljs.core/get obj prop)) (list `c/get obj prop))) (def ^:dynamic *assert-context* nil) From cfe7ba34f7fd13410fa3ca83027d0aa205e7addf Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 11:09:21 +0100 Subject: [PATCH 18/26] :bug: Fix validation of validation error on file validate ns --- backend/resources/log4j2-devenv.xml | 1 + backend/src/app/http/sse.clj | 3 +++ common/src/app/common/files/validate.cljc | 3 ++- frontend/src/app/worker/import.cljs | 2 +- 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/backend/resources/log4j2-devenv.xml b/backend/resources/log4j2-devenv.xml index a37eb18010..7abb7a1885 100644 --- a/backend/resources/log4j2-devenv.xml +++ b/backend/resources/log4j2-devenv.xml @@ -26,6 +26,7 @@ + diff --git a/backend/src/app/http/sse.clj b/backend/src/app/http/sse.clj index c89c91b618..0ece3b3295 100644 --- a/backend/src/app/http/sse.clj +++ b/backend/src/app/http/sse.clj @@ -80,6 +80,9 @@ (try (tap "end" (handler)) (catch Throwable cause + (binding [l/*context* (errors/request->context request)] + (l/err :hint "unexpected error process streaming response" + :cause cause)) (tap "error" (errors/handle' cause request))) (finally (sp/close! *channel*) diff --git a/common/src/app/common/files/validate.cljc b/common/src/app/common/files/validate.cljc index f6d12ada09..280271701d 100644 --- a/common/src/app/common/files/validate.cljc +++ b/common/src/app/common/files/validate.cljc @@ -48,7 +48,8 @@ :not-head-main-not-allowed :not-head-copy-not-allowed :not-component-not-allowed - :component-nil-objects-not-allowed}) + :component-nil-objects-not-allowed + :instance-head-not-frame}) (def ^:private schema:error diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index 96bd5d7b93..fe923aec77 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -728,7 +728,7 @@ ::log/sync? true) (let [edata (if (map? cause) cause (ex-data cause))] (println "Error data:") - (pp/pprint (dissoc edata :explain) {:level 2 :length 10}) + (pp/pprint (dissoc edata :explain) {:level 3 :length 10}) (when (string? (:explain edata)) (js/console.log (:explain edata))) From 0b29aaecc4e77ce0f89dd926b54fb62c4ae56154 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 13:42:00 +0100 Subject: [PATCH 19/26] :lipstick: Format backend code --- backend/src/app/loggers/audit.clj | 6 ++-- backend/src/app/rpc/commands/binfile.clj | 18 +++++------ backend/src/app/rpc/commands/management.clj | 2 +- backend/src/app/srepl/components_v2.clj | 30 +++++++++---------- backend/src/app/storage/gc_deleted.clj | 12 ++++---- backend/test/backend_tests/helpers.clj | 2 +- backend/test/backend_tests/rpc_file_test.clj | 6 ++-- .../rpc_file_thumbnails_test.clj | 4 +-- backend/test/backend_tests/rpc_font_test.clj | 10 ++----- .../test/backend_tests/rpc_profile_test.clj | 4 +-- backend/test/backend_tests/rpc_team_test.clj | 3 +- 11 files changed, 43 insertions(+), 54 deletions(-) diff --git a/backend/src/app/loggers/audit.clj b/backend/src/app/loggers/audit.clj index 3fbd09bddf..3626971fc0 100644 --- a/backend/src/app/loggers/audit.clj +++ b/backend/src/app/loggers/audit.clj @@ -201,9 +201,9 @@ ;; because of the timestamp precission (two concurrent requests), in ;; this case we just retry the operation. (let [cfg (-> cfg - (assoc ::rtry/when rtry/conflict-exception?) - (assoc ::rtry/max-retries 6) - (assoc ::rtry/label "persist-audit-log")) + (assoc ::rtry/when rtry/conflict-exception?) + (assoc ::rtry/max-retries 6) + (assoc ::rtry/label "persist-audit-log")) params (-> params (update :props db/tjson) (update :context db/tjson) diff --git a/backend/src/app/rpc/commands/binfile.clj b/backend/src/app/rpc/commands/binfile.clj index c173ec3bb6..81bb6e10a7 100644 --- a/backend/src/app/rpc/commands/binfile.clj +++ b/backend/src/app/rpc/commands/binfile.clj @@ -816,16 +816,16 @@ (update :features #(db/create-array conn "text" %)) (update :data blob/encode))] - (l/dbg :hint "create file" :id (str file-id') ::l/sync? true) + (l/dbg :hint "create file" :id (str file-id') ::l/sync? true) - (if overwrite? - (create-or-update-file! conn file) - (db/insert! conn :file file)) + (if overwrite? + (create-or-update-file! conn file) + (db/insert! conn :file file)) - (when overwrite? - (db/delete! conn :file-thumbnail {:file-id file-id'})) + (when overwrite? + (db/delete! conn :file-thumbnail {:file-id file-id'})) - file-id')))) + file-id')))) (defmethod read-section :v1/rels [{:keys [::db/conn ::input ::timestamp]}] @@ -1008,8 +1008,8 @@ (if (:image v) (update-in res [k :image :id] lookup-index) res)) - colors - colors)) + colors + colors)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; HIGH LEVEL API diff --git a/backend/src/app/rpc/commands/management.clj b/backend/src/app/rpc/commands/management.clj index aaf51c3a0c..416056a914 100644 --- a/backend/src/app/rpc/commands/management.clj +++ b/backend/src/app/rpc/commands/management.clj @@ -312,7 +312,7 @@ (teams/check-read-permissions! conn profile-id team-id)) (let [projs (db/query conn :project - {:team-id team-id}) + {:team-id team-id}) files (let [sql (str "SELECT f.id " " FROM file AS f " diff --git a/backend/src/app/srepl/components_v2.clj b/backend/src/app/srepl/components_v2.clj index 049fc3574f..fec852f082 100644 --- a/backend/src/app/srepl/components_v2.clj +++ b/backend/src/app/srepl/components_v2.clj @@ -157,7 +157,7 @@ :or {rollback? true skip-on-error true validate? false - max-procs 1 } + max-procs 1} :as opts}] (l/dbg :hint "migrate:start" :rollback rollback?) @@ -256,20 +256,20 @@ :else (px/submit! scope (fn [] - (try - (mark-team-migration! system id) - (-> (assoc system ::db/rollback rollback?) - (feat/migrate-team! id - :max-procs max-procs - :validate? validate? - :throw-on-validate? (not skip-on-error))) - (catch Throwable cause - (l/err :hint "unexpected error on processing team" - :team-id (str id) - :cause cause)) - (finally - (ps/release! sjobs) - (unmark-team-migration! system id))))))))] + (try + (mark-team-migration! system id) + (-> (assoc system ::db/rollback rollback?) + (feat/migrate-team! id + :max-procs max-procs + :validate? validate? + :throw-on-validate? (not skip-on-error))) + (catch Throwable cause + (l/err :hint "unexpected error on processing team" + :team-id (str id) + :cause cause)) + (finally + (ps/release! sjobs) + (unmark-team-migration! system id))))))))] (l/dbg :hint "migrate:start" :rollback rollback? diff --git a/backend/src/app/storage/gc_deleted.clj b/backend/src/app/storage/gc_deleted.clj index 2852c8fe6b..8d1d0e5ad1 100644 --- a/backend/src/app/storage/gc_deleted.clj +++ b/backend/src/app/storage/gc_deleted.clj @@ -113,13 +113,13 @@ (fn [params] (let [min-age (dt/duration (or (:min-age params) min-age))] (db/tx-run! cfg (fn [cfg] - (let [cfg (assoc cfg ::min-age min-age) - total (clean-deleted! cfg)] + (let [cfg (assoc cfg ::min-age min-age) + total (clean-deleted! cfg)] - (l/inf :hint "task finished" - :min-age (dt/format-duration min-age) - :total total) + (l/inf :hint "task finished" + :min-age (dt/format-duration min-age) + :total total) - {:deleted total})))))) + {:deleted total})))))) diff --git a/backend/test/backend_tests/helpers.clj b/backend/test/backend_tests/helpers.clj index 646905c515..8073c40a7a 100644 --- a/backend/test/backend_tests/helpers.clj +++ b/backend/test/backend_tests/helpers.clj @@ -20,8 +20,8 @@ [app.config :as cf] [app.db :as db] [app.main :as main] - [app.media :as-alias mtx] [app.media] + [app.media :as-alias mtx] [app.migrations] [app.msgbus :as-alias mbus] [app.rpc :as-alias rpc] diff --git a/backend/test/backend_tests/rpc_file_test.clj b/backend/test/backend_tests/rpc_file_test.clj index cbce720c56..6be373a29c 100644 --- a/backend/test/backend_tests/rpc_file_test.clj +++ b/backend/test/backend_tests/rpc_file_test.clj @@ -233,8 +233,7 @@ (t/is (= 1 (:processed res)))) (let [rows (th/db-query :file-data-fragment {:file-id (:id file)})] - (t/is (= 2 (count rows)))) - ))) + (t/is (= 2 (count rows))))))) @@ -904,8 +903,7 @@ (let [error (:error out) error-data (ex-data error)] (t/is (th/ex-info? error)) - (t/is (= (:type error-data) :not-found)))) - )) + (t/is (= (:type error-data) :not-found)))))) (t/deftest object-thumbnails-ops diff --git a/backend/test/backend_tests/rpc_file_thumbnails_test.clj b/backend/test/backend_tests/rpc_file_thumbnails_test.clj index 12e5d71586..88e2ac2d23 100644 --- a/backend/test/backend_tests/rpc_file_thumbnails_test.clj +++ b/backend/test/backend_tests/rpc_file_thumbnails_test.clj @@ -248,9 +248,7 @@ (let [result (th/run-task! :storage-gc-deleted {:min-age 0})] (t/is (= 1 (:deleted result)))) - (t/is (some? (sto/get-object storage (:media-id row2)))) - - ))) + (t/is (some? (sto/get-object storage (:media-id row2))))))) (t/deftest error-on-direct-storage-obj-deletion (let [storage (::sto/storage th/*system*) diff --git a/backend/test/backend_tests/rpc_font_test.clj b/backend/test/backend_tests/rpc_font_test.clj index 5d31f14b1f..2d64044351 100644 --- a/backend/test/backend_tests/rpc_font_test.clj +++ b/backend/test/backend_tests/rpc_font_test.clj @@ -153,8 +153,7 @@ (let [res (th/run-task! :storage-gc-touched {:min-age 0})] (t/is (= 0 (:freeze res))) - (t/is (= 6 (:delete res)))) - )) + (t/is (= 6 (:delete res)))))) (t/deftest font-deletion-2 (let [prof (th/create-profile* 1 {:is-active true}) @@ -216,8 +215,7 @@ (let [res (th/run-task! :storage-gc-touched {:min-age 0})] (t/is (= 0 (:freeze res))) - (t/is (= 3 (:delete res)))) - )) + (t/is (= 3 (:delete res)))))) (t/deftest font-deletion-3 (let [prof (th/create-profile* 1 {:is-active true}) @@ -278,6 +276,4 @@ (let [res (th/run-task! :storage-gc-touched {:min-age 0})] (t/is (= 0 (:freeze res))) - (t/is (= 3 (:delete res)))) - - )) + (t/is (= 3 (:delete res)))))) diff --git a/backend/test/backend_tests/rpc_profile_test.clj b/backend/test/backend_tests/rpc_profile_test.clj index f21dc17ecd..24776a3cb7 100644 --- a/backend/test/backend_tests/rpc_profile_test.clj +++ b/backend/test/backend_tests/rpc_profile_test.clj @@ -166,9 +166,7 @@ out (th/command! params)] ;; (th/print-result! out) (let [result (:result out)] - (t/is (= uuid/zero (:id result))))) - - )) + (t/is (= uuid/zero (:id result))))))) (t/deftest registration-domain-whitelist (let [whitelist #{"gmail.com" "hey.com" "ya.ru"}] diff --git a/backend/test/backend_tests/rpc_team_test.clj b/backend/test/backend_tests/rpc_team_test.clj index 8252e9aa30..60a42a8c57 100644 --- a/backend/test/backend_tests/rpc_team_test.clj +++ b/backend/test/backend_tests/rpc_team_test.clj @@ -462,5 +462,4 @@ (t/is (dt/instant? (:deleted-at (first rows))))) (let [result (th/run-task! :objects-gc {:min-age 0})] - (t/is (= 5 (:processed result)))) - )) + (t/is (= 5 (:processed result)))))) From b6ecc8b1be10708cd97cb8d68385d71e03c78f01 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 13:49:57 +0100 Subject: [PATCH 20/26] :lipstick: Format common code --- common/src/app/common/attrs.cljc | 4 +- common/src/app/common/data.cljc | 38 +- common/src/app/common/data/macros.cljc | 2 +- common/src/app/common/exceptions.cljc | 187 +++++---- common/src/app/common/files/changes.cljc | 4 +- .../src/app/common/files/changes_builder.cljc | 156 ++++---- common/src/app/common/files/helpers.cljc | 2 +- common/src/app/common/files/migrations.cljc | 14 +- common/src/app/common/files/repair.cljc | 8 +- common/src/app/common/geom/align.cljc | 4 +- common/src/app/common/geom/matrix.cljc | 8 +- common/src/app/common/geom/point.cljc | 6 +- common/src/app/common/geom/rect.cljc | 4 +- .../geom/shapes/flex_layout/bounds.cljc | 6 +- .../common/geom/shapes/grid_layout/areas.cljc | 10 +- .../geom/shapes/grid_layout/bounds.cljc | 4 +- .../geom/shapes/grid_layout/layout_data.cljc | 4 +- .../geom/shapes/grid_layout/params.cljc | 4 +- .../src/app/common/geom/shapes/intersect.cljc | 10 +- .../common/geom/shapes/min_size_layout.cljc | 4 +- common/src/app/common/geom/shapes/path.cljc | 7 +- .../common/geom/shapes/pixel_precision.cljc | 2 +- .../src/app/common/geom/shapes/strokes.cljc | 6 +- .../app/common/geom/shapes/transforms.cljc | 44 +-- common/src/app/common/logging.cljc | 6 +- common/src/app/common/perf.cljc | 10 +- common/src/app/common/record.cljc | 363 +++++++++--------- common/src/app/common/schema.cljc | 6 +- .../src/app/common/schema/desc_js_like.cljc | 5 +- common/src/app/common/schema/generators.cljc | 22 +- common/src/app/common/svg.cljc | 11 +- common/src/app/common/svg/path/bool.cljc | 4 +- common/src/app/common/svg/path/command.cljc | 4 +- .../app/common/svg/path/legacy_parser1.cljs | 5 +- .../app/common/svg/path/legacy_parser2.cljc | 11 +- common/src/app/common/text.cljc | 36 +- common/src/app/common/transit.cljc | 6 +- common/src/app/common/types/color.cljc | 16 +- .../src/app/common/types/components_list.cljc | 8 +- common/src/app/common/types/file.cljc | 2 +- common/src/app/common/types/modifiers.cljc | 41 +- common/src/app/common/types/shape.cljc | 7 +- .../app/common/types/shape/interactions.cljc | 2 +- common/src/app/common/types/shape/layout.cljc | 8 +- common/src/app/common/types/typography.cljc | 12 +- common/src/app/common/uuid.cljc | 4 +- common/test/common_tests/colors_test.cljc | 27 +- common/test/common_tests/data_test.cljc | 3 +- .../common_tests/files_migrations_test.cljc | 19 +- common/test/common_tests/geom_point_test.cljc | 17 +- .../test/common_tests/geom_shapes_test.cljc | 128 +++--- common/test/common_tests/geom_test.cljc | 6 +- .../test/common_tests/helpers/components.cljc | 8 +- common/test/common_tests/helpers/files.cljc | 174 ++++----- .../test/common_tests/pages_helpers_test.cljc | 4 +- common/test/common_tests/pages_test.cljc | 10 +- common/test/common_tests/record_test.cljc | 3 +- common/test/common_tests/svg_path_test.cljc | 49 +-- common/test/common_tests/text_test.cljc | 4 +- common/test/common_tests/types_file_test.cljc | 111 +++--- .../common_tests/types_modifiers_test.cljc | 4 +- .../types_shape_interactions_test.cljc | 5 +- common/test/common_tests/types_test.cljc | 6 +- 63 files changed, 825 insertions(+), 880 deletions(-) diff --git a/common/src/app/common/attrs.cljc b/common/src/app/common/attrs.cljc index ca27f3eb5d..d414628bea 100644 --- a/common/src/app/common/attrs.cljc +++ b/common/src/app/common/attrs.cljc @@ -6,8 +6,8 @@ (ns app.common.attrs (:require - [app.common.geom.shapes :as gsh] - [app.common.math :as mth])) + [app.common.geom.shapes :as gsh] + [app.common.math :as mth])) (defn- get-attr [obj attr] diff --git a/common/src/app/common/data.cljc b/common/src/app/common/data.cljc index 4068839865..d814b14392 100644 --- a/common/src/app/common/data.cljc +++ b/common/src/app/common/data.cljc @@ -14,10 +14,10 @@ (:require-macros [app.common.data])) (:require - #?(:cljs [cljs.reader :as r] - :clj [clojure.edn :as r]) #?(:cljs [cljs.core :as c] :clj [clojure.core :as c]) + #?(:cljs [cljs.reader :as r] + :clj [clojure.edn :as r]) #?(:cljs [goog.array :as garray]) [app.common.math :as mth] [clojure.set :as set] @@ -589,8 +589,8 @@ (defn num-string? [v] ;; https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number #?(:cljs (and (string? v) - (not (js/isNaN v)) - (not (js/isNaN (parse-double v)))) + (not (js/isNaN v)) + (not (js/isNaN (parse-double v)))) :clj (not= (parse-double v :nan) :nan))) @@ -846,26 +846,26 @@ (def ^:const trail-zeros-regex-2 #"(\.\d*[^0])0+$") #?(:cljs -(defn format-precision - "Creates a number with predetermined precision and then removes the trailing 0. + (defn format-precision + "Creates a number with predetermined precision and then removes the trailing 0. Examples: 12.0123, 0 => 12 12.0123, 1 => 12 12.0123, 2 => 12.01" - [num precision] + [num precision] - (if (number? num) - (try - (let [num-str (mth/to-fixed num precision) - ;; Remove all trailing zeros after the comma 100.00000 - num-str (str/replace num-str trail-zeros-regex-1 "")] - ;; Remove trailing zeros after a decimal number: 0.001|00| - (if-let [m (re-find trail-zeros-regex-2 num-str)] - (str/replace num-str (first m) (second m)) - num-str)) - (catch :default _ - (str num))) - (str num)))) + (if (number? num) + (try + (let [num-str (mth/to-fixed num precision) + ;; Remove all trailing zeros after the comma 100.00000 + num-str (str/replace num-str trail-zeros-regex-1 "")] + ;; Remove trailing zeros after a decimal number: 0.001|00| + (if-let [m (re-find trail-zeros-regex-2 num-str)] + (str/replace num-str (first m) (second m)) + num-str)) + (catch :default _ + (str num))) + (str num)))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Util protocols diff --git a/common/src/app/common/data/macros.cljc b/common/src/app/common/data/macros.cljc index 0bb74e204e..7740ef3626 100644 --- a/common/src/app/common/data/macros.cljc +++ b/common/src/app/common/data/macros.cljc @@ -24,7 +24,7 @@ keys in contrast to clojure.core/select-keys" [target keys] (assert (vector? keys) "keys expected to be a vector") - `{ ~@(mapcat (fn [key] [key (list `c/get target key)]) keys) ~@[] }) + `{~@(mapcat (fn [key] [key (list `c/get target key)]) keys) ~@[]}) (defmacro get-in "A macro version of `get-in`. Useful when the keys vector is known at diff --git a/common/src/app/common/exceptions.cljc b/common/src/app/common/exceptions.cljc index a5b9e47c69..b01914ca56 100644 --- a/common/src/app/common/exceptions.cljc +++ b/common/src/app/common/exceptions.cljc @@ -83,113 +83,112 @@ (sm/humanize-explain (::sm/explain data) opts))) #?(:clj -(defn format-throwable - [^Throwable cause & {:keys [summary? detail? header? data? explain? chain? data-level data-length trace-length] - :or {summary? true - detail? true - header? true - data? true - explain? true - chain? true - data-length 8 - data-level 5}}] + (defn format-throwable + [^Throwable cause & {:keys [summary? detail? header? data? explain? chain? data-level data-length trace-length] + :or {summary? true + detail? true + header? true + data? true + explain? true + chain? true + data-length 8 + data-level 5}}] - (letfn [(print-trace-element [^StackTraceElement e] - (let [class (.getClassName e) - method (.getMethodName e)] - (let [match (re-matches #"^([A-Za-z0-9_.-]+)\$(\w+)__\d+$" (str class))] - (if (and match (= "invoke" method)) - (apply printf "%s/%s" (rest match)) - (printf "%s.%s" class method)))) - (printf "(%s:%d)" (or (.getFileName e) "") (.getLineNumber e))) + (letfn [(print-trace-element [^StackTraceElement e] + (let [class (.getClassName e) + method (.getMethodName e)] + (let [match (re-matches #"^([A-Za-z0-9_.-]+)\$(\w+)__\d+$" (str class))] + (if (and match (= "invoke" method)) + (apply printf "%s/%s" (rest match)) + (printf "%s.%s" class method)))) + (printf "(%s:%d)" (or (.getFileName e) "") (.getLineNumber e))) - (print-explain [explain] - (print " xp: ") - (let [[line & lines] (str/lines explain)] - (print line) - (newline) - (doseq [line lines] - (println " " line)))) + (print-explain [explain] + (print " xp: ") + (let [[line & lines] (str/lines explain)] + (print line) + (newline) + (doseq [line lines] + (println " " line)))) - (print-data [data] - (when (seq data) - (print " dt: ") - (let [[line & lines] (str/lines (pp/pprint-str data :level data-level :length data-length))] - (print line) - (newline) - (doseq [line lines] - (println " " line))))) + (print-data [data] + (when (seq data) + (print " dt: ") + (let [[line & lines] (str/lines (pp/pprint-str data :level data-level :length data-length))] + (print line) + (newline) + (doseq [line lines] + (println " " line))))) - (print-trace-title [^Throwable cause] - (print " → ") - (printf "%s: %s" (.getName (class cause)) - (-> (ex-message cause) - (str/lines) - (first) - (str/prune 130))) + (print-trace-title [^Throwable cause] + (print " → ") + (printf "%s: %s" (.getName (class cause)) + (-> (ex-message cause) + (str/lines) + (first) + (str/prune 130))) - (when-let [^StackTraceElement e (first (.getStackTrace ^Throwable cause))] - (printf " (%s:%d)" (or (.getFileName e) "") (.getLineNumber e))) + (when-let [^StackTraceElement e (first (.getStackTrace ^Throwable cause))] + (printf " (%s:%d)" (or (.getFileName e) "") (.getLineNumber e))) - (newline)) + (newline)) - (print-summary [^Throwable cause] - (let [causes (loop [cause (ex-cause cause) - result []] - (if cause - (recur (ex-cause cause) - (conj result cause)) - result))] - (when header? - (println "SUMMARY:")) - (print-trace-title cause) - (doseq [cause causes] - (print-trace-title cause)))) + (print-summary [^Throwable cause] + (let [causes (loop [cause (ex-cause cause) + result []] + (if cause + (recur (ex-cause cause) + (conj result cause)) + result))] + (when header? + (println "SUMMARY:")) + (print-trace-title cause) + (doseq [cause causes] + (print-trace-title cause)))) - (print-trace [^Throwable cause] - (print-trace-title cause) - (let [st (.getStackTrace cause)] - (print " at: ") - (if-let [e (first st)] - (print-trace-element e) - (print "[empty stack trace]")) - (newline) + (print-trace [^Throwable cause] + (print-trace-title cause) + (let [st (.getStackTrace cause)] + (print " at: ") + (if-let [e (first st)] + (print-trace-element e) + (print "[empty stack trace]")) + (newline) - (doseq [e (if (nil? trace-length) (rest st) (take (dec trace-length) (rest st)))] - (print " ") - (print-trace-element e) - (newline)))) + (doseq [e (if (nil? trace-length) (rest st) (take (dec trace-length) (rest st)))] + (print " ") + (print-trace-element e) + (newline)))) - (print-detail [^Throwable cause] - (print-trace cause) - (when-let [data (ex-data cause)] - (when data? - (print-data (dissoc data ::s/problems ::s/spec ::s/value ::sm/explain))) - (when explain? - (if-let [explain (explain data {:length data-length :level data-level})] - (print-explain explain))))) + (print-detail [^Throwable cause] + (print-trace cause) + (when-let [data (ex-data cause)] + (when data? + (print-data (dissoc data ::s/problems ::s/spec ::s/value ::sm/explain))) + (when explain? + (if-let [explain (explain data {:length data-length :level data-level})] + (print-explain explain))))) - (print-all [^Throwable cause] - (when summary? - (print-summary cause)) + (print-all [^Throwable cause] + (when summary? + (print-summary cause)) - (when detail? - (when header? - (println "DETAIL:")) + (when detail? + (when header? + (println "DETAIL:")) - (print-detail cause) - (when chain? - (loop [cause cause] - (when-let [cause (ex-cause cause)] - (newline) - (print-detail cause) - (recur cause)))))) - ] + (print-detail cause) + (when chain? + (loop [cause cause] + (when-let [cause (ex-cause cause)] + (newline) + (print-detail cause) + (recur cause))))))] - (with-out-str - (print-all cause))))) + (with-out-str + (print-all cause))))) #?(:clj -(defn print-throwable - [cause & {:as opts}] - (println (format-throwable cause opts)))) + (defn print-throwable + [cause & {:as opts}] + (println (format-throwable cause opts)))) diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc index b2a33b9d30..ccad7630a4 100644 --- a/common/src/app/common/files/changes.cljc +++ b/common/src/app/common/files/changes.cljc @@ -814,8 +814,8 @@ (defn- parents-frames "Go trough the parents and get all of them that are a frame." [id objects] - (->> (cfh/get-parents-with-self objects id) - (filter cfh/frame-shape?))) + (->> (cfh/get-parents-with-self objects id) + (filter cfh/frame-shape?))) (defmulti frames-changed (fn [_ change] (:type change))) diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc index 6668f91af8..fa35400bc8 100644 --- a/common/src/app/common/files/changes_builder.cljc +++ b/common/src/app/common/files/changes_builder.cljc @@ -58,8 +58,8 @@ (defn set-undo-group [changes undo-group] (cond-> changes - (some? undo-group) - (assoc :undo-group undo-group))) + (some? undo-group) + (assoc :undo-group undo-group))) (defn with-page [changes page] @@ -166,12 +166,12 @@ new-changes (if (< index (count redo-changes)) (->> (subvec (:redo-changes changes) index) (map #(-> % - (assoc :page-id uuid/zero) - (dissoc :component-id)))) + (assoc :page-id uuid/zero) + (dissoc :component-id)))) []) new-file-data (cfc/process-changes file-data new-changes)] (vary-meta changes assoc ::file-data new-file-data - ::applied-changes-count (count redo-changes))) + ::applied-changes-count (count redo-changes))) changes)) ;; Page changes @@ -224,9 +224,9 @@ :option option-key :value option-val}) (update :undo-changes conj {:type :set-option - :page-id page-id - :option option-key - :value old-val}) + :page-id page-id + :option option-key + :value old-val}) (apply-changes-local)))) (defn update-page-option @@ -243,9 +243,9 @@ :option option-key :value new-val}) (update :undo-changes conj {:type :set-option - :page-id page-id - :option option-key - :value old-val}) + :page-id page-id + :option option-key + :value old-val}) (apply-changes-local)))) ;; Shape tree changes @@ -292,7 +292,7 @@ (-> changes (update :redo-changes conj add-change) (cond-> - (and (ctk/in-component-copy? parent) (not ignore-touched)) + (and (ctk/in-component-copy? parent) (not ignore-touched)) (update :undo-changes conj restore-touched-change)) (update :undo-changes conj del-change) (apply-changes-local))))) @@ -333,13 +333,13 @@ mk-undo-change (fn [undo-changes shape] (let [prev-sibling (cfh/get-prev-sibling objects (:id shape))] - (conj undo-changes - {:type :mov-objects - :page-id (::page-id (meta changes)) - :parent-id (:parent-id shape) - :shapes [(:id shape)] - :after-shape prev-sibling - :index 0}))) ; index is used in case there is no after-shape (moving bottom shapes) + (conj undo-changes + {:type :mov-objects + :page-id (::page-id (meta changes)) + :parent-id (:parent-id shape) + :shapes [(:id shape)] + :after-shape prev-sibling + :index 0}))) ; index is used in case there is no after-shape (moving bottom shapes) restore-touched-change {:type :mod-obj @@ -351,7 +351,7 @@ (-> changes (update :redo-changes conj set-parent-change) (cond-> - (ctk/in-component-copy? parent) + (ctk/in-component-copy? parent) (update :undo-changes conj restore-touched-change)) (update :undo-changes #(reduce mk-undo-change % shapes)) (apply-changes-local))))) @@ -501,10 +501,10 @@ objects (lookup-objects changes) xform (comp - (mapcat #(cons % (cfh/get-parent-ids objects %))) - (map (d/getf objects)) - (filter #(contains? #{:group :bool} (:type %))) - (distinct)) + (mapcat #(cons % (cfh/get-parent-ids objects %))) + (map (d/getf objects)) + (filter #(contains? #{:group :bool} (:type %))) + (distinct)) all-parents (sequence xform ids) generate-operation @@ -661,59 +661,59 @@ ([changes id path name new-shapes updated-shapes main-instance-id main-instance-page] (add-component changes id path name new-shapes updated-shapes main-instance-id main-instance-page nil)) ([changes id path name new-shapes updated-shapes main-instance-id main-instance-page annotation] - (assert-page-id! changes) - (assert-objects! changes) - (let [page-id (::page-id (meta changes)) - objects (lookup-objects changes) - lookupf (d/getf objects) + (assert-page-id! changes) + (assert-objects! changes) + (let [page-id (::page-id (meta changes)) + objects (lookup-objects changes) + lookupf (d/getf objects) - mk-change (fn [shape] - {:type :mod-obj - :page-id page-id - :id (:id shape) - :operations [{:type :set - :attr :component-id - :val (:component-id shape)} - {:type :set - :attr :component-file - :val (:component-file shape)} - {:type :set - :attr :component-root - :val (:component-root shape)} - {:type :set - :attr :main-instance - :val (:main-instance shape)} - {:type :set - :attr :shape-ref - :val (:shape-ref shape)} - {:type :set - :attr :touched - :val (:touched shape)}]}) ] - (-> changes - (update :redo-changes - (fn [redo-changes] - (-> redo-changes - (conj (cond-> {:type :add-component - :id id - :path path - :name name - :main-instance-id main-instance-id - :main-instance-page main-instance-page - :annotation annotation} - (some? new-shapes) ;; this will be null in components-v2 - (assoc :shapes (vec new-shapes)))) - (into (map mk-change) updated-shapes)))) - (update :undo-changes - (fn [undo-changes] - (-> undo-changes - (conj {:type :del-component - :id id - :skip-undelete? true}) - (into (comp (map :id) - (map lookupf) - (map mk-change)) - updated-shapes)))) - (apply-changes-local))))) + mk-change (fn [shape] + {:type :mod-obj + :page-id page-id + :id (:id shape) + :operations [{:type :set + :attr :component-id + :val (:component-id shape)} + {:type :set + :attr :component-file + :val (:component-file shape)} + {:type :set + :attr :component-root + :val (:component-root shape)} + {:type :set + :attr :main-instance + :val (:main-instance shape)} + {:type :set + :attr :shape-ref + :val (:shape-ref shape)} + {:type :set + :attr :touched + :val (:touched shape)}]})] + (-> changes + (update :redo-changes + (fn [redo-changes] + (-> redo-changes + (conj (cond-> {:type :add-component + :id id + :path path + :name name + :main-instance-id main-instance-id + :main-instance-page main-instance-page + :annotation annotation} + (some? new-shapes) ;; this will be null in components-v2 + (assoc :shapes (vec new-shapes)))) + (into (map mk-change) updated-shapes)))) + (update :undo-changes + (fn [undo-changes] + (-> undo-changes + (conj {:type :del-component + :id id + :skip-undelete? true}) + (into (comp (map :id) + (map lookupf) + (map mk-change)) + updated-shapes)))) + (apply-changes-local))))) (defn update-component [changes id update-fn] @@ -748,7 +748,7 @@ (update :redo-changes conj {:type :del-component :id id}) (update :undo-changes conj {:type :restore-component - :id id}))) + :id id}))) (defn restore-component ([changes id] @@ -760,7 +760,7 @@ :id id :page-id page-id}) (update :undo-changes conj {:type :del-component - :id id})))) + :id id})))) (defn ignore-remote [changes] diff --git a/common/src/app/common/files/helpers.cljc b/common/src/app/common/files/helpers.cljc index 6142b728d4..701575583d 100644 --- a/common/src/app/common/files/helpers.cljc +++ b/common/src/app/common/files/helpers.cljc @@ -603,7 +603,7 @@ (defn last-path "Returns the last item of the path." [path] - (last (split-path path))) + (last (split-path path))) (defn compact-name "Append the first item of the path and the name." diff --git a/common/src/app/common/files/migrations.cljc b/common/src/app/common/files/migrations.cljc index f26a689f4a..86145dc97f 100644 --- a/common/src/app/common/files/migrations.cljc +++ b/common/src/app/common/files/migrations.cljc @@ -621,13 +621,13 @@ (defmethod migrate 33 [data] (letfn [(update-object [object] - ; Ensure all root objects are well formed shapes. - (if (= (:id object) uuid/zero) - (-> object - (assoc :parent-id uuid/zero - :frame-id uuid/zero) - (cts/setup-shape)) - object)) + ;; Ensure all root objects are well formed shapes. + (if (= (:id object) uuid/zero) + (-> object + (assoc :parent-id uuid/zero + :frame-id uuid/zero) + (cts/setup-shape)) + object)) (update-container [container] (update container :objects update-vals update-object))] diff --git a/common/src/app/common/files/repair.cljc b/common/src/app/common/files/repair.cljc index 28c7a3441c..4034a15aba 100644 --- a/common/src/app/common/files/repair.cljc +++ b/common/src/app/common/files/repair.cljc @@ -400,10 +400,10 @@ ; Convert the shape in a frame. (log/debug :hint " -> set :type :frame") (assoc shape :type :frame - :fills [] - :hide-in-viewer true - :rx 0 - :ry 0))] + :fills [] + :hide-in-viewer true + :rx 0 + :ry 0))] (log/dbg :hint "repairing shape :instance-head-not-frame" :id (:id shape) :name (:name shape) :page-id page-id) (-> (pcb/empty-changes nil page-id) diff --git a/common/src/app/common/geom/align.cljc b/common/src/app/common/geom/align.cljc index 382f81a2d7..92cdd28a96 100644 --- a/common/src/app/common/geom/align.cljc +++ b/common/src/app/common/geom/align.cljc @@ -46,8 +46,8 @@ :y (:y wrapper-rect)}) :vtop (let [top (:y rect)] - {:x (:x wrapper-rect) - :y top}) + {:x (:x wrapper-rect) + :y top}) :vcenter (let [center (+ (:y rect) (/ (:height rect) 2))] {:x (:x wrapper-rect) diff --git a/common/src/app/common/geom/matrix.cljc b/common/src/app/common/geom/matrix.cljc index a784b19427..6a7e5fc2ee 100644 --- a/common/src/app/common/geom/matrix.cljc +++ b/common/src/app/common/geom/matrix.cljc @@ -6,9 +6,9 @@ (ns app.common.geom.matrix (:require + #?(:clj [app.common.fressian :as fres]) #?(:cljs [cljs.pprint :as pp] :clj [clojure.pprint :as pp]) - #?(:clj [app.common.fressian :as fres]) [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.point :as gpt] @@ -100,7 +100,7 @@ (sg/small-double) (sg/small-double) (sg/small-double) - (sg/small-double) ) + (sg/small-double)) (sg/fmap #(apply pos->Matrix %))) ::oapi/type "string" ::oapi/format "matrix" @@ -248,8 +248,8 @@ ([pt] (dm/assert! (gpt/point? pt)) (pos->Matrix 1 0 0 1 - (- (dm/get-prop pt :x)) - (- (dm/get-prop pt :y)))) + (- (dm/get-prop pt :x)) + (- (dm/get-prop pt :y)))) ([x y] (pos->Matrix 1 0 0 1 (- x) (- y)))) diff --git a/common/src/app/common/geom/point.cljc b/common/src/app/common/geom/point.cljc index bbb63ec2ae..fbe7e8e416 100644 --- a/common/src/app/common/geom/point.cljc +++ b/common/src/app/common/geom/point.cljc @@ -7,11 +7,11 @@ (ns app.common.geom.point (:refer-clojure :exclude [divide min max abs]) (:require - #?(:cljs [cljs.pprint :as pp] - :clj [clojure.pprint :as pp]) + #?(:clj [app.common.fressian :as fres]) #?(:cljs [cljs.core :as c] :clj [clojure.core :as c]) - #?(:clj [app.common.fressian :as fres]) + #?(:cljs [cljs.pprint :as pp] + :clj [clojure.pprint :as pp]) [app.common.data :as d] [app.common.data.macros :as dm] [app.common.exceptions :as ex] diff --git a/common/src/app/common/geom/rect.cljc b/common/src/app/common/geom/rect.cljc index 5fa77b8d3d..445eb06cc0 100644 --- a/common/src/app/common/geom/rect.cljc +++ b/common/src/app/common/geom/rect.cljc @@ -363,9 +363,9 @@ (cond-> bounds (> target-height height) (-> (assoc :height target-height) - (update :y - (/ (- target-height height ) 2))) + (update :y - (/ (- target-height height) 2))) (< target-height height) (-> (assoc :width target-width) - (update :x - (/ (- target-width width ) 2))))) + (update :x - (/ (- target-width width) 2))))) bounds)) diff --git a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc index 4bf564565e..56defa9cc3 100644 --- a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc @@ -171,9 +171,9 @@ layout-gap-row 0) - col-pad (if (or(and row? space-evenly?) - (and row? space-around?) - (and col? content-evenly?)) + col-pad (if (or (and row? space-evenly?) + (and row? space-around?) + (and col? content-evenly?)) layout-gap-col 0) diff --git a/common/src/app/common/geom/shapes/grid_layout/areas.cljc b/common/src/app/common/geom/shapes/grid_layout/areas.cljc index 569c52470c..cb37d63d38 100644 --- a/common/src/app/common/geom/shapes/grid_layout/areas.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/areas.cljc @@ -30,7 +30,7 @@ (<= (+ b-y b-height) (+ a-y a-height)))) (defn intersects? - [[a-x a-y a-width a-height ] + [[a-x a-y a-width a-height] [b-x b-y b-width b-height]] (not (or (<= (+ b-x b-width) a-x) (<= (+ b-y b-height) a-y) @@ -76,11 +76,9 @@ y2 (min ra-y rb-y) height (- y2 y1) rb-x (+ b-x b-width) - width (- a-width (- rb-x a-x)) - ] + width (- a-width (- rb-x a-x))] (when (and (> width 0) (> height 0)) - (make-area rb-x y1 width height))) - ) + (make-area rb-x y1 width height)))) (defn difference [area-a area-b] @@ -92,4 +90,4 @@ (into [] (keep #(% area-a area-b)) [top-rect left-rect right-rect bottom-rect]))) - + diff --git a/common/src/app/common/geom/shapes/grid_layout/bounds.cljc b/common/src/app/common/geom/shapes/grid_layout/bounds.cljc index 6f1b0d3f2c..e5b9cf011c 100644 --- a/common/src/app/common/geom/shapes/grid_layout/bounds.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/bounds.cljc @@ -30,13 +30,13 @@ (let [parent-id (:id parent) parent-bounds @(get bounds parent-id) - + {pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding pad-top (or pad-top 0) pad-right (or pad-right 0) pad-bottom (or pad-bottom 0) pad-left (or pad-left 0) - + layout-points (layout-content-points bounds parent layout-data)] (if (d/not-empty? layout-points) diff --git a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc index c13b37588f..aab5858450 100644 --- a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc @@ -82,7 +82,7 @@ (let [[size max-size] (case type :percent - (let [value (/ (* total-value value) 100) ] + (let [value (/ (* total-value value) 100)] [value value]) :fixed @@ -190,7 +190,7 @@ ;; Apply assign-fr to the track-list track-list (reduce - (fn [track-list [idx assignment] ] + (fn [track-list [idx assignment]] (-> track-list (update-in [idx :size] max assignment))) track-list diff --git a/common/src/app/common/geom/shapes/grid_layout/params.cljc b/common/src/app/common/geom/shapes/grid_layout/params.cljc index 7c0dafc4ed..16fcfd426b 100644 --- a/common/src/app/common/geom/shapes/grid_layout/params.cljc +++ b/common/src/app/common/geom/shapes/grid_layout/params.cljc @@ -54,13 +54,13 @@ current-range nil] (if pending (let [[next-shape rect :as next-shape+rects] (first pending)] - + (if (or (not current-range) (overlaps-range? axis current-range rect)) ;; Add shape to current row (let [current-track (conj current-track (:id next-shape)) current-range (join-range axis current-range rect)] (recur (next pending) result index current-track current-range)) - + ;; New row (recur (next pending) (conj result {:index index diff --git a/common/src/app/common/geom/shapes/intersect.cljc b/common/src/app/common/geom/shapes/intersect.cljc index 66bca87859..6601315ca7 100644 --- a/common/src/app/common/geom/shapes/intersect.cljc +++ b/common/src/app/common/geom/shapes/intersect.cljc @@ -176,7 +176,7 @@ [shape rect include-content?] (when (d/not-empty? (:content shape)) - (let [ ;; If paths are too complex the intersection is too expensive + (let [;; If paths are too complex the intersection is too expensive ;; we fallback to check its bounding box otherwise the performance penalty ;; is too big ;; TODO: Look for ways to optimize this operation @@ -190,10 +190,10 @@ start-point (-> shape :content (first) :params (gpt/point))] (or (intersects-lines? rect-lines path-lines) - (if include-content? - (or (is-point-inside-nonzero? (first rect-points) path-lines) - (is-point-inside-nonzero? start-point rect-lines)) - false))))) + (if include-content? + (or (is-point-inside-nonzero? (first rect-points) path-lines) + (is-point-inside-nonzero? start-point rect-lines)) + false))))) (defn is-point-inside-ellipse? "checks if a point is inside an ellipse" diff --git a/common/src/app/common/geom/shapes/min_size_layout.cljc b/common/src/app/common/geom/shapes/min_size_layout.cljc index d9ae9627a0..ec88b62fcc 100644 --- a/common/src/app/common/geom/shapes/min_size_layout.cljc +++ b/common/src/app/common/geom/shapes/min_size_layout.cljc @@ -25,8 +25,8 @@ (and strict? (ctl/fill-width? child) (ctl/flex-layout? child)) (let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] - (max (ctl/child-min-width child) - (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) + (max (ctl/child-min-width child) + (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) (and (ctl/fill-width? child) (ctl/grid-layout? child)) diff --git a/common/src/app/common/geom/shapes/path.cljc b/common/src/app/common/geom/shapes/path.cljc index 604861f3e6..018beaeb39 100644 --- a/common/src/app/common/geom/shapes/path.cljc +++ b/common/src/app/common/geom/shapes/path.cljc @@ -477,8 +477,7 @@ result) last-start (if (= :move-to command) point - last-start) - ] + last-start)] (recur (first pending) (rest pending) result @@ -523,7 +522,7 @@ "Point on line" [position from-p to-p] - (let [e1 (gpt/to-vec from-p to-p ) + (let [e1 (gpt/to-vec from-p to-p) e2 (gpt/to-vec from-p position) len2 (+ (mth/sq (:x e1)) (mth/sq (:y e1))) @@ -730,7 +729,7 @@ ray-t (get-line-tval ray-line curve-v)] (and (> ray-t 0) (> (mth/abs (- curve-tg-angle 180)) 0.01) - (> (mth/abs (- curve-tg-angle 0)) 0.01)) )))] + (> (mth/abs (- curve-tg-angle 0)) 0.01)))))] (->> curve-ts (mapv #(vector (curve-values curve %) (curve-windup curve %)))))) diff --git a/common/src/app/common/geom/shapes/pixel_precision.cljc b/common/src/app/common/geom/shapes/pixel_precision.cljc index 984f40e75b..c65b36f9b8 100644 --- a/common/src/app/common/geom/shapes/pixel_precision.cljc +++ b/common/src/app/common/geom/shapes/pixel_precision.cljc @@ -74,7 +74,7 @@ points (if has-resize? (-> (:points shape) - (gco/transform-points (ctm/modifiers->transform modifiers)) ) + (gco/transform-points (ctm/modifiers->transform modifiers))) points)] [modifiers points])] (position-pixel-precision modifiers shape points precision ignore-axis))) diff --git a/common/src/app/common/geom/shapes/strokes.cljc b/common/src/app/common/geom/shapes/strokes.cljc index e155dde7b1..272e5e12b6 100644 --- a/common/src/app/common/geom/shapes/strokes.cljc +++ b/common/src/app/common/geom/shapes/strokes.cljc @@ -6,6 +6,6 @@ (defn update-strokes-width [shape scale] - (update shape :strokes - (fn [strokes] - (mapv #(update-stroke-width % scale) strokes)))) + (update shape :strokes + (fn [strokes] + (mapv #(update-stroke-width % scale) strokes)))) diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index 7d4822f48f..6adf456cd4 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/common/src/app/common/geom/shapes/transforms.cljc @@ -61,8 +61,8 @@ dy (dm/get-prop delta :y)] (if (d/num? dx dy) (mapv #(-> % - (update :x + dx) - (update :y + dy)) + (update :x + dx) + (update :y + dy)) position-data) position-data)))) @@ -162,8 +162,8 @@ (-> (gmt/matrix) (gmt/translate center) (cond-> - flip-x (gmt/scale (gpt/point -1 1)) - flip-y (gmt/scale (gpt/point 1 -1))) + flip-x (gmt/scale (gpt/point -1 1)) + flip-y (gmt/scale (gpt/point 1 -1))) (gmt/multiply (:transform-inverse shape (gmt/matrix))) (gmt/translate (gpt/negate center))))) @@ -207,24 +207,24 @@ mb7 (/ (- x2 x1) det) mb8 (/ (- (* x1 y1) (* x2 y1)) det)] - (gmt/matrix (+ (* ma0 mb0) - (* ma1 mb3) - (* ma2 mb6)) - (+ (* ma3 mb0) - (* ma4 mb3) - (* ma5 mb6)) - (+ (* ma0 mb1) - (* ma1 mb4) - (* ma2 mb7)) - (+ (* ma3 mb1) - (* ma4 mb4) - (* ma5 mb7)) - (+ (* ma0 mb2) - (* ma1 mb5) - (* ma2 mb8)) - (+ (* ma3 mb2) - (* ma4 mb5) - (* ma5 mb8))))))) + (gmt/matrix (+ (* ma0 mb0) + (* ma1 mb3) + (* ma2 mb6)) + (+ (* ma3 mb0) + (* ma4 mb3) + (* ma5 mb6)) + (+ (* ma0 mb1) + (* ma1 mb4) + (* ma2 mb7)) + (+ (* ma3 mb1) + (* ma4 mb4) + (* ma5 mb7)) + (+ (* ma0 mb2) + (* ma1 mb5) + (* ma2 mb8)) + (+ (* ma3 mb2) + (* ma4 mb5) + (* ma5 mb8))))))) (defn calculate-selrect [points center] diff --git a/common/src/app/common/logging.cljc b/common/src/app/common/logging.cljc index 89a929d0b4..fe7a0e8f56 100644 --- a/common/src/app/common/logging.cljc +++ b/common/src/app/common/logging.cljc @@ -239,7 +239,7 @@ #?(:clj (defn slf4j-log-handler {:no-doc true} - [_ _ _ {:keys [::logger ::level ::trace ::message] }] + [_ _ _ {:keys [::logger ::level ::trace ::message]}] (when-let [logger (enabled? logger level)] (let [message (cond-> @message (some? trace) @@ -312,8 +312,8 @@ (let [cljs? (:ns &env)] `(do (~(if cljs? - `(partial console-log-handler nil nil nil) - `(partial slf4j-log-handler nil nil nil)) + `(partial console-log-handler nil nil nil) + `(partial slf4j-log-handler nil nil nil)) {::logger ~(str *ns*) ::level ~level ::message (delay ~message)}) diff --git a/common/src/app/common/perf.cljc b/common/src/app/common/perf.cljc index 46ee65c877..8723ffc54c 100644 --- a/common/src/app/common/perf.cljc +++ b/common/src/app/common/perf.cljc @@ -44,11 +44,11 @@ "Determine a scale factor and unit for displaying a time." [measurement] (cond - (> measurement 60) [(/ 60) "min"] - (< measurement 1e-6) [1e9 "ns"] - (< measurement 1e-3) [1e6 "µs"] - (< measurement 1) [1e3 "ms"] - :else [1 "sec"])) + (> measurement 60) [(/ 60) "min"] + (< measurement 1e-6) [1e9 "ns"] + (< measurement 1e-3) [1e6 "µs"] + (< measurement 1) [1e3 "ms"] + :else [1 "sec"])) (defn format-time [value] diff --git a/common/src/app/common/record.cljc b/common/src/app/common/record.cljc index 97c25cc4a0..f9d10df0ce 100644 --- a/common/src/app/common/record.cljc +++ b/common/src/app/common/record.cljc @@ -51,52 +51,52 @@ ['cljs.core/IRecord 'cljs.core/ICloneable `(~'-clone [~this-sym] - (new ~tagname ~@(generate-field-access this-sym val-sym fields))) + (new ~tagname ~@(generate-field-access this-sym val-sym fields))) 'cljs.core/IHash `(~'-hash [~this-sym] - (caching-hash ~this-sym - (fn [coll#] - (bit-xor - ~(hash (str tagname)) - (cljs.core/hash-unordered-coll coll#))) - (. ~this-sym ~'-$hash))) + (caching-hash ~this-sym + (fn [coll#] + (bit-xor + ~(hash (str tagname)) + (cljs.core/hash-unordered-coll coll#))) + (. ~this-sym ~'-$hash))) 'cljs.core/IEquiv `(~'-equiv [~this-sym ~othr-sym] - (or (identical? ~this-sym ~othr-sym) - (and (some? ~othr-sym) - (identical? (.-constructor ~this-sym) - (.-constructor ~othr-sym)) - ~@(map (fn [field] - `(= (.. ~this-sym ~(property-symbol field)) - (.. ~(with-meta othr-sym {:tag tagname}) ~(property-symbol field)))) - base-fields) + (or (identical? ~this-sym ~othr-sym) + (and (some? ~othr-sym) + (identical? (.-constructor ~this-sym) + (.-constructor ~othr-sym)) + ~@(map (fn [field] + `(= (.. ~this-sym ~(property-symbol field)) + (.. ~(with-meta othr-sym {:tag tagname}) ~(property-symbol field)))) + base-fields) - (= (. ~this-sym ~'-$extmap) - (. ~(with-meta othr-sym {:tag tagname}) ~'-$extmap))))) + (= (. ~this-sym ~'-$extmap) + (. ~(with-meta othr-sym {:tag tagname}) ~'-$extmap))))) `ICustomRecordEquiv `(~'-equiv-with-exceptions [~this-sym ~othr-sym ~'exceptions] - (or (identical? ~this-sym ~othr-sym) - (and (some? ~othr-sym) - (identical? (.-constructor ~this-sym) - (.-constructor ~othr-sym)) - (and ~@(->> base-fields - (map (fn [field] - `(= (.. ~this-sym ~(property-symbol field)) - (.. ~(with-meta othr-sym {:tag tagname}) ~(property-symbol field)))))) - (== (count (. ~this-sym ~'-$extmap)) - (count (. ~othr-sym ~'-$extmap)))) + (or (identical? ~this-sym ~othr-sym) + (and (some? ~othr-sym) + (identical? (.-constructor ~this-sym) + (.-constructor ~othr-sym)) + (and ~@(->> base-fields + (map (fn [field] + `(= (.. ~this-sym ~(property-symbol field)) + (.. ~(with-meta othr-sym {:tag tagname}) ~(property-symbol field)))))) + (== (count (. ~this-sym ~'-$extmap)) + (count (. ~othr-sym ~'-$extmap)))) - (reduce-kv (fn [~'_ ~'k ~'v] - (if (contains? ~'exceptions ~'k) - true - (if (= (get (. ~this-sym ~'-$extmap) ~'k ::not-exists) ~'v) - true - (reduced false)))) - true - (. ~othr-sym ~'-$extmap))))) + (reduce-kv (fn [~'_ ~'k ~'v] + (if (contains? ~'exceptions ~'k) + true + (if (= (get (. ~this-sym ~'-$extmap) ~'k ::not-exists) ~'v) + true + (reduced false)))) + true + (. ~othr-sym ~'-$extmap))))) 'cljs.core/IMeta @@ -104,98 +104,98 @@ 'cljs.core/IWithMeta `(~'-with-meta [~this-sym ~val-sym] - (new ~tagname ~@(->> (replace {'$meta val-sym} fields) - (generate-field-access this-sym val-sym)))) + (new ~tagname ~@(->> (replace {'$meta val-sym} fields) + (generate-field-access this-sym val-sym)))) 'cljs.core/ILookup `(~'-lookup [~this-sym k#] - (cljs.core/-lookup ~this-sym k# nil)) + (cljs.core/-lookup ~this-sym k# nil)) `(~'-lookup [~this-sym ~key-sym else#] - (case ~key-sym - ~@(mapcat (fn [f] [(keyword f) `(. ~this-sym ~(property-symbol f))]) - base-fields) - (cljs.core/get (. ~this-sym ~'-$extmap) ~key-sym else#))) + (case ~key-sym + ~@(mapcat (fn [f] [(keyword f) `(. ~this-sym ~(property-symbol f))]) + base-fields) + (cljs.core/get (. ~this-sym ~'-$extmap) ~key-sym else#))) 'cljs.core/ICounted `(~'-count [~this-sym] - (+ ~(count base-fields) (count (. ~this-sym ~'-$extmap)))) + (+ ~(count base-fields) (count (. ~this-sym ~'-$extmap)))) 'cljs.core/ICollection `(~'-conj [~this-sym ~val-sym] - (if (vector? ~val-sym) - (cljs.core/-assoc ~this-sym (cljs.core/-nth ~val-sym 0) (cljs.core/-nth ~val-sym 1)) - (reduce cljs.core/-conj ~this-sym ~val-sym))) + (if (vector? ~val-sym) + (cljs.core/-assoc ~this-sym (cljs.core/-nth ~val-sym 0) (cljs.core/-nth ~val-sym 1)) + (reduce cljs.core/-conj ~this-sym ~val-sym))) 'cljs.core/IAssociative `(~'-contains-key? [~this-sym ~key-sym] - ~(if (seq base-fields) - `(case ~key-sym - (~@(map keyword base-fields)) true - (contains? (. ~this-sym ~'-$extmap) ~key-sym)) - `(contains? (. ~this-sym ~'-$extmap) ~key-sym))) + ~(if (seq base-fields) + `(case ~key-sym + (~@(map keyword base-fields)) true + (contains? (. ~this-sym ~'-$extmap) ~key-sym)) + `(contains? (. ~this-sym ~'-$extmap) ~key-sym))) `(~'-assoc [~this-sym ~key-sym ~val-sym] - (case ~key-sym - ~@(mapcat (fn [fld] - [(keyword fld) `(new ~tagname ~@(->> (replace {fld val-sym '$hash nil} fields) - (generate-field-access this-sym val-sym)))]) - base-fields) - (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) - (generate-field-access this-sym val-sym)) - (assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym) nil))) + (case ~key-sym + ~@(mapcat (fn [fld] + [(keyword fld) `(new ~tagname ~@(->> (replace {fld val-sym '$hash nil} fields) + (generate-field-access this-sym val-sym)))]) + base-fields) + (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) + (generate-field-access this-sym val-sym)) + (assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym) nil))) 'cljs.core/ITransientAssociative `(~'-assoc! [~this-sym ~key-sym ~val-sym] - (let [key# (if (keyword? ~key-sym) - (.-fqn ~(with-meta key-sym {:tag `cljs.core/Keyword})) - ~key-sym)] - (case ~key-sym - ~@(mapcat - (fn [f] - [(keyword f) `(set! (. ~this-sym ~(property-symbol f)) ~val-sym)]) - base-fields) + (let [key# (if (keyword? ~key-sym) + (.-fqn ~(with-meta key-sym {:tag `cljs.core/Keyword})) + ~key-sym)] + (case ~key-sym + ~@(mapcat + (fn [f] + [(keyword f) `(set! (. ~this-sym ~(property-symbol f)) ~val-sym)]) + base-fields) - (set! (. ~this-sym ~'-$extmap) (cljs.core/assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym))) + (set! (. ~this-sym ~'-$extmap) (cljs.core/assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym))) - ~this-sym)) + ~this-sym)) 'cljs.core/IMap `(~'-dissoc [~this-sym ~key-sym] - (case ~key-sym - (~@(map keyword base-fields)) - (cljs.core/-assoc ~this-sym ~key-sym nil) + (case ~key-sym + (~@(map keyword base-fields)) + (cljs.core/-assoc ~this-sym ~key-sym nil) - (let [extmap1# (. ~this-sym ~'-$extmap) - extmap2# (dissoc extmap1# ~key-sym)] - (if (identical? extmap1# extmap2#) - ~this-sym - (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) - (generate-field-access this-sym val-sym)) - (not-empty extmap2#) - nil))))) + (let [extmap1# (. ~this-sym ~'-$extmap) + extmap2# (dissoc extmap1# ~key-sym)] + (if (identical? extmap1# extmap2#) + ~this-sym + (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) + (generate-field-access this-sym val-sym)) + (not-empty extmap2#) + nil))))) 'cljs.core/ISeqable `(~'-seq [~this-sym] - (seq (concat [~@(map (fn [f] - `(cljs.core/MapEntry. - ~(keyword f) - (. ~this-sym ~(property-symbol f)) - nil)) - base-fields)] - (. ~this-sym ~'-$extmap)))) + (seq (concat [~@(map (fn [f] + `(cljs.core/MapEntry. + ~(keyword f) + (. ~this-sym ~(property-symbol f)) + nil)) + base-fields)] + (. ~this-sym ~'-$extmap)))) 'cljs.core/IIterable `(~'-iterator [~this-sym] - (cljs.core/RecordIter. 0 ~this-sym ~(count base-fields) - [~@(map keyword base-fields)] - (if (. ~this-sym ~'-$extmap) - (cljs.core/-iterator (. ~this-sym ~'-$extmap)) - (cljs.core/nil-iter)))) + (cljs.core/RecordIter. 0 ~this-sym ~(count base-fields) + [~@(map keyword base-fields)] + (if (. ~this-sym ~'-$extmap) + (cljs.core/-iterator (. ~this-sym ~'-$extmap)) + (cljs.core/nil-iter)))) 'cljs.core/IKVReduce `(~'-kv-reduce [~this-sym f# init#] - (reduce (fn [ret# [~key-sym v#]] (f# ret# ~key-sym v#)) init# ~this-sym))]))) + (reduce (fn [ret# [~key-sym v#]] (f# ret# ~key-sym v#)) init# ~this-sym))]))) #?(:clj (defn emit-impl-jvm @@ -208,144 +208,143 @@ ['clojure.lang.IRecord 'clojure.lang.IPersistentMap `(~'equiv [~this-sym ~val-sym] - (and (some? ~val-sym) - (instance? ~tagname ~val-sym) - ~@(map (fn [field] - `(= (.. ~this-sym ~(property-symbol field)) - (.. ~(with-meta val-sym {:tag tagname}) ~(property-symbol field)))) - base-fields) - (= (. ~this-sym ~'-$extmap) - (. ~(with-meta val-sym {:tag tagname}) ~'-$extmap)))) + (and (some? ~val-sym) + (instance? ~tagname ~val-sym) + ~@(map (fn [field] + `(= (.. ~this-sym ~(property-symbol field)) + (.. ~(with-meta val-sym {:tag tagname}) ~(property-symbol field)))) + base-fields) + (= (. ~this-sym ~'-$extmap) + (. ~(with-meta val-sym {:tag tagname}) ~'-$extmap)))) `(~'entryAt [~this-sym ~key-sym] - (let [v# (.valAt ~this-sym ~key-sym ::not-found)] - (when (not= v# ::not-found) - (clojure.lang.MapEntry. ~key-sym v#)))) + (let [v# (.valAt ~this-sym ~key-sym ::not-found)] + (when (not= v# ::not-found) + (clojure.lang.MapEntry. ~key-sym v#)))) `(~'valAt [~this-sym ~key-sym] - (.valAt ~this-sym ~key-sym nil)) + (.valAt ~this-sym ~key-sym nil)) `(~'valAt [~this-sym ~key-sym ~'not-found] - (case ~key-sym - ~@(mapcat (fn [f] [(keyword f) `(. ~this-sym ~(property-symbol f))]) base-fields) - (clojure.core/get (. ~this-sym ~'-$extmap) ~key-sym ~'not-found))) + (case ~key-sym + ~@(mapcat (fn [f] [(keyword f) `(. ~this-sym ~(property-symbol f))]) base-fields) + (clojure.core/get (. ~this-sym ~'-$extmap) ~key-sym ~'not-found))) `(~'count [~this-sym] - (+ ~(count base-fields) (count (. ~this-sym ~'-$extmap)))) + (+ ~(count base-fields) (count (. ~this-sym ~'-$extmap)))) `(~'empty [~this-sym] - (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) - (generate-field-access this-sym nil)) - nil nil)) + (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) + (generate-field-access this-sym nil)) + nil nil)) `(~'cons [~this-sym ~val-sym] - (if (instance? java.util.Map$Entry ~val-sym) - (let [^Map$Entry e# ~val-sym] - (.assoc ~this-sym (.getKey e#) (.getValue e#))) - (if (instance? clojure.lang.IPersistentVector ~val-sym) - (if (= 2 (count ~val-sym)) - (.assoc ~this-sym (nth ~val-sym 0) (nth ~val-sym 1)) - (throw (IllegalArgumentException. - "Vector arg to map conj must be a pair"))) - (reduce (fn [^clojure.lang.IPersistentMap m# - ^java.util.Map$Entry e#] - (.assoc m# (.getKey e#) (.getValue e#))) - ~this-sym - ~val-sym)))) + (if (instance? java.util.Map$Entry ~val-sym) + (let [^Map$Entry e# ~val-sym] + (.assoc ~this-sym (.getKey e#) (.getValue e#))) + (if (instance? clojure.lang.IPersistentVector ~val-sym) + (if (= 2 (count ~val-sym)) + (.assoc ~this-sym (nth ~val-sym 0) (nth ~val-sym 1)) + (throw (IllegalArgumentException. + "Vector arg to map conj must be a pair"))) + (reduce (fn [^clojure.lang.IPersistentMap m# + ^java.util.Map$Entry e#] + (.assoc m# (.getKey e#) (.getValue e#))) + ~this-sym + ~val-sym)))) `(~'assoc [~this-sym ~key-sym ~val-sym] - (case ~key-sym - ~@(mapcat (fn [fld] - [(keyword fld) `(new ~tagname ~@(->> (replace {fld val-sym '$hash nil} fields) - (generate-field-access this-sym val-sym)))]) - base-fields) - (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) - (generate-field-access this-sym val-sym)) - (assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym) - nil))) + (case ~key-sym + ~@(mapcat (fn [fld] + [(keyword fld) `(new ~tagname ~@(->> (replace {fld val-sym '$hash nil} fields) + (generate-field-access this-sym val-sym)))]) + base-fields) + (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) + (generate-field-access this-sym val-sym)) + (assoc (. ~this-sym ~'-$extmap) ~key-sym ~val-sym) + nil))) `(~'without [~this-sym ~key-sym] - (case ~key-sym - (~@(map keyword base-fields)) - (.assoc ~this-sym ~key-sym nil) + (case ~key-sym + (~@(map keyword base-fields)) + (.assoc ~this-sym ~key-sym nil) - (if-let [extmap1# (. ~this-sym ~'-$extmap)] - (let [extmap2# (.without ^clojure.lang.IPersistentMap extmap1# ~key-sym)] - (if (identical? extmap1# extmap2#) - ~this-sym - (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) - (generate-field-access this-sym val-sym)) - (not-empty extmap2#) - nil))) - ~this-sym))) + (if-let [extmap1# (. ~this-sym ~'-$extmap)] + (let [extmap2# (.without ^clojure.lang.IPersistentMap extmap1# ~key-sym)] + (if (identical? extmap1# extmap2#) + ~this-sym + (new ~tagname ~@(->> (remove #{'$extmap '$hash} fields) + (generate-field-access this-sym val-sym)) + (not-empty extmap2#) + nil))) + ~this-sym))) `(~'seq [~this-sym] - (seq (concat [~@(map (fn [f] - `(clojure.lang.MapEntry/create - ~(keyword f) - (. ~this-sym ~(property-symbol f)))) - base-fields)] - (. ~this-sym ~'-$extmap)))) + (seq (concat [~@(map (fn [f] + `(clojure.lang.MapEntry/create + ~(keyword f) + (. ~this-sym ~(property-symbol f)))) + base-fields)] + (. ~this-sym ~'-$extmap)))) `(~'iterator [~this-sym] - (clojure.lang.SeqIterator. (.seq ~this-sym))) + (clojure.lang.SeqIterator. (.seq ~this-sym))) 'clojure.lang.IFn `(~'invoke [~this-sym ~key-sym] - (.valAt ~this-sym ~key-sym)) + (.valAt ~this-sym ~key-sym)) `(~'invoke [~this-sym ~key-sym ~'not-found] - (.valAt ~this-sym ~key-sym ~'not-found)) + (.valAt ~this-sym ~key-sym ~'not-found)) 'java.util.Map `(~'size [~this-sym] - (clojure.core/count ~this-sym)) + (clojure.core/count ~this-sym)) `(~'containsKey [~this-sym ~key-sym] - ~(if (seq base-fields) - `(case ~key-sym - (~@(map keyword base-fields)) true - (contains? (. ~this-sym ~'-$extmap) ~key-sym)) - `(contains? (. ~this-sym ~'-$extmap) ~key-sym))) + ~(if (seq base-fields) + `(case ~key-sym + (~@(map keyword base-fields)) true + (contains? (. ~this-sym ~'-$extmap) ~key-sym)) + `(contains? (. ~this-sym ~'-$extmap) ~key-sym))) `(~'isEmpty [~this-sym] - (zero? (count ~this-sym))) + (zero? (count ~this-sym))) `(~'keySet [~this-sym] - (throw (UnsupportedOperationException. "not implemented"))) + (throw (UnsupportedOperationException. "not implemented"))) `(~'entrySet [~this-sym] - (throw (UnsupportedOperationException. "not implemented"))) + (throw (UnsupportedOperationException. "not implemented"))) `(~'get [~this-sym ~key-sym] - (.valAt ~this-sym ~key-sym)) + (.valAt ~this-sym ~key-sym)) `(~'containsValue [~this-sym ~val-sym] - (throw (UnsupportedOperationException. "not implemented"))) + (throw (UnsupportedOperationException. "not implemented"))) `(~'values [~this-sym] - (map val (.seq ~this-sym))) + (map val (.seq ~this-sym))) 'java.lang.Object `(~'equals [~this-sym other#] - (.equiv ~this-sym other#)) + (.equiv ~this-sym other#)) `(~'hashCode [~this-sym] - (clojure.lang.APersistentMap/mapHash ~this-sym)) + (clojure.lang.APersistentMap/mapHash ~this-sym)) 'clojure.lang.IHashEq `(~'hasheq [~this-sym] - (clojure.core/hash-unordered-coll ~this-sym)) + (clojure.core/hash-unordered-coll ~this-sym)) 'clojure.lang.IObj `(~'meta [~this-sym] - (. ~this-sym ~'-$meta)) + (. ~this-sym ~'-$meta)) `(~'withMeta [~this-sym ~val-sym] - (new ~tagname ~@(->> (replace {'$meta val-sym} fields) - (generate-field-access this-sym val-sym)))) - ]))) + (new ~tagname ~@(->> (replace {'$meta val-sym} fields) + (generate-field-access this-sym val-sym))))]))) (defmacro defrecord [rsym fields & impls] @@ -367,14 +366,14 @@ ~@(when (:ns &env) ['cljs.core/IPrintWithWriter `(~'-pr-writer [~'this writer# opts#] - (let [pr-pair# (fn [keyval#] - (cljs.core/pr-sequential-writer writer# (~'js* "cljs.core.pr_writer") - "" " " "" opts# keyval#))] - (cljs.core/pr-sequential-writer - writer# pr-pair# ~(str ident "{") ", " "}" opts# - (concat [~@(for [f fields'] - `(vector ~(keyword f) (. ~'this ~(property-symbol f))))] - (. ~'this ~'-$extmap)))))])) + (let [pr-pair# (fn [keyval#] + (cljs.core/pr-sequential-writer writer# (~'js* "cljs.core.pr_writer") + "" " " "" opts# keyval#))] + (cljs.core/pr-sequential-writer + writer# pr-pair# ~(str ident "{") ", " "}" opts# + (concat [~@(for [f fields'] + `(vector ~(keyword f) (. ~'this ~(property-symbol f))))] + (. ~'this ~'-$extmap)))))])) ~@(when-not (:ns &env) [`(defmethod print-method ~rsym [o# ^java.io.Writer w#] diff --git a/common/src/app/common/schema.cljc b/common/src/app/common/schema.cljc index 8fc44587f8..7fed63b77b 100644 --- a/common/src/app/common/schema.cljc +++ b/common/src/app/common/schema.cljc @@ -122,9 +122,7 @@ :encoders (mt/-string-encoders)} {:name :collections :decoders coders - :encoders coders} - - ))) + :encoders coders}))) (defn validator [s] @@ -304,7 +302,7 @@ options (into {:type :validation :code :data-validation ::explain explain} - options) + options) hint (get options :hint "schema validation error")] (throw (ex-info hint options))))))) diff --git a/common/src/app/common/schema/desc_js_like.cljc b/common/src/app/common/schema/desc_js_like.cljc index 58ff05d0ae..28f19e1963 100644 --- a/common/src/app/common/schema/desc_js_like.cljc +++ b/common/src/app/common/schema/desc_js_like.cljc @@ -169,15 +169,14 @@ (map (fn [[k _ s]] (str (pad " " level) (str/camel k) (when (contains? optional k) "?") - ": " s ))) + ": " s))) (str/join ",\n")) header (cond-> (if (zero? level) (str "type " title) (str title)) closed? (str "!") - (some? title) (str " ") - )] + (some? title) (str " "))] (str header "{\n" entries "\n" (pad "}" level)))))) diff --git a/common/src/app/common/schema/generators.cljc b/common/src/app/common/schema/generators.cljc index 5e8da881de..f1aa8c90fd 100644 --- a/common/src/app/common/schema/generators.cljc +++ b/common/src/app/common/schema/generators.cljc @@ -74,17 +74,17 @@ (defn word-string [] (->> (tg/such-that #(re-matches #"\w+" %) - tg/string-alphanumeric - 50) + tg/string-alphanumeric + 50) (tg/such-that (complement str/blank?)))) (defn uri [] (tg/let [scheme (tg/elements ["http" "https"]) - domain (as-> (word-string) $ - (tg/such-that (fn [x] (> (count x) 5)) $ 100) - (tg/fmap str/lower $)) - ext (tg/elements ["net" "com" "org" "app" "io"])] + domain (as-> (word-string) $ + (tg/such-that (fn [x] (> (count x) 5)) $ 100) + (tg/fmap str/lower $)) + ext (tg/elements ["net" "com" "org" "app" "io"])] (u/uri (str scheme "://" domain "." ext)))) (defn uuid @@ -102,11 +102,11 @@ ([dest elements] (->> (apply tg/tuple (repeat (count elements) tg/boolean)) (tg/fmap (fn [bools] - (into dest - (comp - (c/filter first) - (c/map second)) - (c/map list bools elements))))))) + (into dest + (comp + (c/filter first) + (c/map second)) + (c/map list bools elements))))))) (defn set [g] diff --git a/common/src/app/common/svg.cljc b/common/src/app/common/svg.cljc index bc4f79f19e..878d561093 100644 --- a/common/src/app/common/svg.cljc +++ b/common/src/app/common/svg.cljc @@ -6,9 +6,9 @@ (ns app.common.svg (:require - #?(:cljs ["./svg/optimizer.js" :as svgo]) #?(:clj [clojure.xml :as xml] :cljs [tubax.core :as tubax]) + #?(:cljs ["./svg/optimizer.js" :as svgo]) [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.matrix :as gmt] @@ -115,8 +115,7 @@ :tspan :use :view - :vkern - }) + :vkern}) ;; https://www.w3.org/TR/SVG11/attindex.html (def svg-attr-list @@ -680,7 +679,7 @@ ;; Removed this warning because slows a lot rendering with big svgs #_(let [filtered-props (->> attrs (remove known-property?) (map first))] (when (seq filtered-props) - (.warn js/console "Unknown properties: " (str/join ", " filtered-props )))) + (.warn js/console "Unknown properties: " (str/join ", " filtered-props)))) (into {} (comp (filter known-property?) @@ -740,7 +739,7 @@ node-defs (->> rec-result (map first) (reduce merge current-node-defs))] - [ node-defs node ]))) + [node-defs node]))) (defn find-attr-references [attrs] (->> attrs @@ -1048,7 +1047,7 @@ (conj {:href (or (:href attrs) (:xlink:href attrs)) :width (d/parse-integer (:width attrs) 0) :height (d/parse-integer (:height attrs) 0)})))] - (reduce-nodes redfn [] svg-data ))) + (reduce-nodes redfn [] svg-data))) #?(:clj (defn- secure-parser-factory diff --git a/common/src/app/common/svg/path/bool.cljc b/common/src/app/common/svg/path/bool.cljc index 10f8fdffe7..11fe314a83 100644 --- a/common/src/app/common/svg/path/bool.cljc +++ b/common/src/app/common/svg/path/bool.cljc @@ -292,8 +292,8 @@ (let [;; We need to reverse the second path when making a difference/intersection/exclude ;; and both shapes are in the same direction should-reverse? (and (not= :union bool-type) - (= (ups/clockwise? content-b) - (ups/clockwise? content-a))) + (= (ups/clockwise? content-b) + (ups/clockwise? content-a))) content-a (-> content-a (close-paths) diff --git a/common/src/app/common/svg/path/command.cljc b/common/src/app/common/svg/path/command.cljc index 7dd91e2a52..b048d85243 100644 --- a/common/src/app/common/svg/path/command.cljc +++ b/common/src/app/common/svg/path/command.cljc @@ -159,8 +159,8 @@ point->handlers (content->handlers content) handlers (->> point - (point->handlers ) - (filter (fn [[ci cp]] (and (not= index ci) (not= prefix cp)) )))] + (point->handlers) + (filter (fn [[ci cp]] (and (not= index ci) (not= prefix cp)))))] (cond (= (count handlers) 1) diff --git a/common/src/app/common/svg/path/legacy_parser1.cljs b/common/src/app/common/svg/path/legacy_parser1.cljs index 70acc58242..7f7dc0d813 100644 --- a/common/src/app/common/svg/path/legacy_parser1.cljs +++ b/common/src/app/common/svg/path/legacy_parser1.cljs @@ -107,8 +107,7 @@ [:c2x :number] [:c2y :number] [:x :number] - [:y :number]]) - ] + [:y :number]])] (for [params param-list] {:command :curve-to :relative relative @@ -228,7 +227,7 @@ (d/update-in-when [:params :y] + (:y prev-pos)) (cond-> - (= :line-to-horizontal (:command command)) + (= :line-to-horizontal (:command command)) (d/update-in-when [:params :value] + (:x prev-pos)) (= :line-to-vertical (:command command)) diff --git a/common/src/app/common/svg/path/legacy_parser2.cljc b/common/src/app/common/svg/path/legacy_parser2.cljc index fab3f8102e..cbd7a4999c 100644 --- a/common/src/app/common/svg/path/legacy_parser2.cljc +++ b/common/src/app/common/svg/path/legacy_parser2.cljc @@ -132,8 +132,7 @@ [:c2x :number] [:c2y :number] [:x :number] - [:y :number]]) - ] + [:y :number]])] (for [params param-list] {:command :curve-to :relative relative @@ -254,8 +253,7 @@ dtheta (unit-vector-angle v1x v1y v2x v2y) dtheta (if (and (= fs 0) (> dtheta 0)) (- dtheta (* mth/PI 2)) dtheta) - dtheta (if (and (= fs 1) (< dtheta 0)) (+ dtheta (* mth/PI 2)) dtheta) - ] + dtheta (if (and (= fs 1) (< dtheta 0)) (+ dtheta (* mth/PI 2)) dtheta)] [cx cy theta1 dtheta])) @@ -302,8 +300,7 @@ (and (zero? rx) (zero? ry))) [] - (let [ - rx (mth/abs rx) + (let [rx (mth/abs rx) ry (mth/abs ry) lambda (+ (/ (* x1p x1p) (* rx rx)) (/ (* y1p y1p) (* ry ry))) @@ -380,7 +377,7 @@ (d/update-in-when [:params :y] + (:y prev-pos)) (cond-> - (= :line-to-horizontal (:command command)) + (= :line-to-horizontal (:command command)) (d/update-in-when [:params :value] + (:x prev-pos)) (= :line-to-vertical (:command command)) diff --git a/common/src/app/common/text.cljc b/common/src/app/common/text.cljc index d95500f7d6..35e220ab56 100644 --- a/common/src/app/common/text.cljc +++ b/common/src/app/common/text.cljc @@ -273,29 +273,29 @@ "Given a root node of a text content extracts the texts with its associated styles" [node] (letfn - [(rec-style-text-map [acc node style] - (let [node-style (merge style (select-keys node text-attrs)) - head (or (-> acc first) [{} ""]) - [head-style head-text] head + [(rec-style-text-map [acc node style] + (let [node-style (merge style (select-keys node text-attrs)) + head (or (-> acc first) [{} ""]) + [head-style head-text] head - new-acc - (cond - (:children node) - (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node)) + new-acc + (cond + (:children node) + (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node)) - (not= head-style node-style) - (cons [node-style (:text node "")] acc) + (not= head-style node-style) + (cons [node-style (:text node "")] acc) - :else - (cons [node-style (dm/str head-text "" (:text node))] (rest acc))) + :else + (cons [node-style (dm/str head-text "" (:text node))] (rest acc))) ;; We add an end-of-line when finish a paragraph - new-acc - (if (= (:type node) "paragraph") - (let [[hs ht] (first new-acc)] - (cons [hs (dm/str ht "\n")] (rest new-acc))) - new-acc)] - new-acc))] + new-acc + (if (= (:type node) "paragraph") + (let [[hs ht] (first new-acc)] + (cons [hs (dm/str ht "\n")] (rest new-acc))) + new-acc)] + new-acc))] (-> (rec-style-text-map [] node {}) reverse))) diff --git a/common/src/app/common/transit.cljc b/common/src/app/common/transit.cljc index 057a1593d2..93ab8d4b2a 100644 --- a/common/src/app/common/transit.cljc +++ b/common/src/app/common/transit.cljc @@ -6,14 +6,14 @@ (ns app.common.transit (:require + #?(:clj [datoteka.fs :as fs]) + #?(:cljs ["luxon" :as lxn]) [app.common.data :as d] [app.common.uri :as uri] [cognitect.transit :as t] [lambdaisland.uri :as luri] [linked.core :as lk] - [linked.set :as lks] - #?(:clj [datoteka.fs :as fs]) - #?(:cljs ["luxon" :as lxn])) + [linked.set :as lks]) #?(:clj (:import java.io.ByteArrayInputStream diff --git a/common/src/app/common/types/color.cljc b/common/src/app/common/types/color.cljc index 035f0dfaee..00823c631d 100644 --- a/common/src/app/common/types/color.cljc +++ b/common/src/app/common/types/color.cljc @@ -6,14 +6,14 @@ (ns app.common.types.color (:require - [app.common.data :as d] - [app.common.schema :as sm] - [app.common.schema.openapi :as-alias oapi] - [app.common.text :as txt] - [app.common.types.color.generic :as-alias color-generic] - [app.common.types.color.gradient :as-alias color-gradient] - [app.common.types.color.gradient.stop :as-alias color-gradient-stop] - [clojure.test.check.generators :as tgen])) + [app.common.data :as d] + [app.common.schema :as sm] + [app.common.schema.openapi :as-alias oapi] + [app.common.text :as txt] + [app.common.types.color.generic :as-alias color-generic] + [app.common.types.color.gradient :as-alias color-gradient] + [app.common.types.color.gradient.stop :as-alias color-gradient-stop] + [clojure.test.check.generators :as tgen])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; SCHEMAS diff --git a/common/src/app/common/types/components_list.cljc b/common/src/app/common/types/components_list.cljc index 916450e436..1eefe30216 100644 --- a/common/src/app/common/types/components_list.cljc +++ b/common/src/app/common/types/components_list.cljc @@ -87,10 +87,10 @@ (get-component file-data component-id false)) ([file-data component-id include-deleted?] - (let [component (get-in file-data [:components component-id])] - (when (or include-deleted? - (not (:deleted component))) - component)))) + (let [component (get-in file-data [:components component-id])] + (when (or include-deleted? + (not (:deleted component))) + component)))) (defn get-deleted-component [file-data component-id] diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc index a0fce3c934..9cefc0c797 100644 --- a/common/src/app/common/types/file.cljc +++ b/common/src/app/common/types/file.cljc @@ -270,7 +270,7 @@ (ctkl/update-component component-id #(dissoc % :objects)) (ctkl/mark-component-undeleted component-id) (cond-> update-page? - (ctkl/update-component component-id #(assoc % :main-instance-page page-id)))))) + (ctkl/update-component component-id #(assoc % :main-instance-page page-id)))))) (defn purge-component "Remove permanently a component." diff --git a/common/src/app/common/types/modifiers.cljc b/common/src/app/common/types/modifiers.cljc index 4a61effb5d..5b2b2fe5df 100644 --- a/common/src/app/common/types/modifiers.cljc +++ b/common/src/app/common/types/modifiers.cljc @@ -42,27 +42,27 @@ ;; * change-properties (defrecord Modifiers - [last-order ;; Last `order` attribute in the geometry list - geometry-parent - geometry-child - structure-parent - structure-child]) + [last-order ;; Last `order` attribute in the geometry list + geometry-parent + geometry-child + structure-parent + structure-child]) (defrecord GeometricOperation - [order ;; Need the order to keep consistent between geometry-parent and geometry-child - type - vector - origin - transform - transform-inverse - rotation - center]) + [order ;; Need the order to keep consistent between geometry-parent and geometry-child + type + vector + origin + transform + transform-inverse + rotation + center]) (defrecord StructureOperation - [type - property - value - index]) + [type + property + value + index]) ;; Record constructors @@ -599,8 +599,8 @@ "Transforms a matrix by the translation modifier" [matrix modifier] (-> (dm/get-prop modifier :vector) - (gmt/translate-matrix) - (gmt/multiply! matrix))) + (gmt/translate-matrix) + (gmt/multiply! matrix))) (defn transform-resize! @@ -656,8 +656,7 @@ [modifiers] (let [modifiers (concat (dm/get-prop modifiers :geometry-parent) (dm/get-prop modifiers :geometry-child)) - modifiers (sort-by #(dm/get-prop % :order) modifiers) - ] + modifiers (sort-by #(dm/get-prop % :order) modifiers)] (modifiers->transform1 modifiers))) (defn modifiers->transform-old diff --git a/common/src/app/common/types/shape.cljc b/common/src/app/common/types/shape.cljc index ea39f91f0b..fb6df40679 100644 --- a/common/src/app/common/types/shape.cljc +++ b/common/src/app/common/types/shape.cljc @@ -194,8 +194,7 @@ [:vector {:gen/max 1} ::ctss/shadow]] [:blur {:optional true} ::ctsb/blur] [:grow-type {:optional true} - [::sm/one-of #{:auto-width :auto-height :fixed}]] - ]) + [::sm/one-of #{:auto-width :auto-height :fixed}]]]) (sm/define! ::group-attrs [:map {:title "GroupAttrs"} @@ -351,8 +350,8 @@ (defn has-images? [{:keys [fills strokes]}] (or - (some :fill-image fills) - (some :stroke-image strokes))) + (some :fill-image fills) + (some :stroke-image strokes))) ;; --- Initialization diff --git a/common/src/app/common/types/shape/interactions.cljc b/common/src/app/common/types/shape/interactions.cljc index 99290303d1..215ab1aa50 100644 --- a/common/src/app/common/types/shape/interactions.cljc +++ b/common/src/app/common/types/shape/interactions.cljc @@ -270,7 +270,7 @@ (defn has-destination [interaction] (#{:navigate :open-overlay :toggle-overlay :close-overlay} - (:action-type interaction))) + (:action-type interaction))) (defn destination? [interaction] diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 745cd941e4..43e446978b 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -1054,7 +1054,7 @@ (->> (cells-seq parent :sort? true) (reduce (fn [[parent auto?] cell] - + (let [[cell auto?] (cond (and (empty? (:shapes cell)) @@ -1067,7 +1067,7 @@ (not= (:column-span cell) 1)) (= :auto (:position cell))) [(assoc cell :position :manual) false] - + (empty? (:shapes cell)) [cell false] @@ -1129,9 +1129,7 @@ (defn assign-cells [parent objects] (prn ">assign-cells") - (let [ - - parent (assign-cell-positions parent objects) + (let [parent (assign-cell-positions parent objects) shape-has-cell? (into #{} (mapcat (comp :shapes second)) (:layout-grid-cells parent)) diff --git a/common/src/app/common/types/typography.cljc b/common/src/app/common/types/typography.cljc index 8602f3573a..4fe5c9565a 100644 --- a/common/src/app/common/types/typography.cljc +++ b/common/src/app/common/types/typography.cljc @@ -6,8 +6,8 @@ (ns app.common.types.typography (:require - [app.common.schema :as sm] - [app.common.text :as txt])) + [app.common.schema :as sm] + [app.common.text :as txt])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; SCHEMA @@ -44,8 +44,8 @@ :content ;; Check if any node in the content has a reference for the library (txt/node-seq - #(and (some? (:typography-ref-id %)) - (= (:typography-ref-file %) library-id)))))) + #(and (some? (:typography-ref-id %)) + (= (:typography-ref-file %) library-id)))))) (defn uses-library-typography? "Check if the shape uses the given library typography." @@ -55,8 +55,8 @@ :content ;; Check if any node in the content has a reference for the library (txt/node-seq - #(and (= (:typography-ref-id %) typography-id) - (= (:typography-ref-file %) library-id)))))) + #(and (= (:typography-ref-id %) typography-id) + (= (:typography-ref-file %) library-id)))))) (defn remap-typographies "Change the shape so that any use of the given typography now points to diff --git a/common/src/app/common/uuid.cljc b/common/src/app/common/uuid.cljc index a474e9bb83..b205c64534 100644 --- a/common/src/app/common/uuid.cljc +++ b/common/src/app/common/uuid.cljc @@ -8,10 +8,10 @@ (ns app.common.uuid (:refer-clojure :exclude [next uuid zero? short]) (:require - [app.common.data.macros :as dm] #?(:clj [clojure.core :as c]) #?(:cljs [app.common.uuid-impl :as impl]) - #?(:cljs [cljs.core :as c])) + #?(:cljs [cljs.core :as c]) + [app.common.data.macros :as dm]) #?(:clj (:import app.common.UUIDv8 java.util.UUID diff --git a/common/test/common_tests/colors_test.cljc b/common/test/common_tests/colors_test.cljc index a37e481fe7..74a3ef9462 100644 --- a/common/test/common_tests/colors_test.cljc +++ b/common/test/common_tests/colors_test.cljc @@ -6,10 +6,10 @@ (ns common-tests.colors-test (:require - [app.common.data :as d] + #?(:cljs [goog.color :as gcolors]) [app.common.colors :as colors] - [clojure.test :as t] - #?(:cljs [goog.color :as gcolors]))) + [app.common.data :as d] + [clojure.test :as t])) (t/deftest valid-hex-color (t/is (false? (colors/valid-hex-color? nil))) @@ -18,16 +18,14 @@ (t/is (false? (colors/valid-hex-color? "#qqqqqq"))) (t/is (true? (colors/valid-hex-color? "#aaa"))) (t/is (false? (colors/valid-hex-color? "#aaaa"))) - (t/is (true? (colors/valid-hex-color? "#fabada"))) - ) + (t/is (true? (colors/valid-hex-color? "#fabada")))) (t/deftest valid-rgb-color (t/is (false? (colors/valid-rgb-color? nil))) (t/is (false? (colors/valid-rgb-color? ""))) (t/is (false? (colors/valid-rgb-color? "()"))) (t/is (true? (colors/valid-rgb-color? "(255, 30, 30)"))) - (t/is (true? (colors/valid-rgb-color? "rgb(255, 30, 30)"))) - ) + (t/is (true? (colors/valid-rgb-color? "rgb(255, 30, 30)")))) (t/deftest rgb-to-str (t/is (= "rgb(1,2,3)" (colors/rgb->str [1 2 3]))) @@ -37,16 +35,14 @@ ;; (prn (colors/rgb->hsv [1 2 3])) ;; (prn (gcolors/rgbToHsv 1 2 3)) (t/is (= [210.0 0.6666666666666666 3.0] (colors/rgb->hsv [1.0 2.0 3.0]))) - #?(:cljs (t/is (= (colors/rgb->hsv [1 2 3]) (vec (gcolors/rgbToHsv 1 2 3))))) - ) + #?(:cljs (t/is (= (colors/rgb->hsv [1 2 3]) (vec (gcolors/rgbToHsv 1 2 3)))))) (t/deftest hsv-to-rgb (t/is (= [1 2 3] (colors/hsv->rgb [210 0.6666666666666666 3]))) #?(:cljs (t/is (= (colors/hsv->rgb [210 0.6666666666666666 3]) - (vec (gcolors/hsvToRgb 210 0.6666666666666666 3))))) - ) + (vec (gcolors/hsvToRgb 210 0.6666666666666666 3)))))) (t/deftest rgb-to-hex (t/is (= "#010203" (colors/rgb->hex [1 2 3])))) @@ -68,9 +64,7 @@ (t/is (= [1 2 3] (colors/hsl->rgb [210.0 0.5 0.00784313725490196]))) (t/is (= [210.0 0.5 0.00784313725490196] (colors/rgb->hsl [1 2 3]))) #?(:cljs (t/is (= (colors/hsl->rgb [210 0.5 0.00784313725490196]) - (vec (gcolors/hslToRgb 210 0.5 0.00784313725490196))))) - - ) + (vec (gcolors/hslToRgb 210 0.5 0.00784313725490196)))))) (t/deftest expand-hex (t/is (= "aaaaaa" (colors/expand-hex "a"))) @@ -93,8 +87,5 @@ (t/is (true? (colors/color-string? "magenta"))) (t/is (false? (colors/color-string? nil))) (t/is (false? (colors/color-string? ""))) - (t/is (false? (colors/color-string? "kkkkkk"))) - - - ) + (t/is (false? (colors/color-string? "kkkkkk")))) diff --git a/common/test/common_tests/data_test.cljc b/common/test/common_tests/data_test.cljc index 10a3f830f4..686ae8980c 100644 --- a/common/test/common_tests/data_test.cljc +++ b/common/test/common_tests/data_test.cljc @@ -30,8 +30,7 @@ (d/remove-at-index [5 1 2 3 4] 0))) (t/is (= [1 2 3 4] - (d/remove-at-index [1 5 2 3 4] 1))) - ) + (d/remove-at-index [1 5 2 3 4] 1)))) (t/deftest with-next (t/is (= [[0 1] [1 2] [2 3] [3 4] [4 nil]] diff --git a/common/test/common_tests/files_migrations_test.cljc b/common/test/common_tests/files_migrations_test.cljc index 6e4ee7addd..3ae1d5fd04 100644 --- a/common/test/common_tests/files_migrations_test.cljc +++ b/common/test/common_tests/files_migrations_test.cljc @@ -71,14 +71,14 @@ :version 7} expect (-> data - (update-in [:pages-index page-id :objects] dissoc - (uuid/custom 1 2) - (uuid/custom 1 3) - (uuid/custom 1 4)) - (update-in [:pages-index page-id :objects (uuid/custom 1 1) :shapes] - (fn [shapes] - (let [id (uuid/custom 1 2)] - (into [] (remove #(= id %)) shapes))))) + (update-in [:pages-index page-id :objects] dissoc + (uuid/custom 1 2) + (uuid/custom 1 3) + (uuid/custom 1 4)) + (update-in [:pages-index page-id :objects (uuid/custom 1 1) :shapes] + (fn [shapes] + (let [id (uuid/custom 1 2)] + (into [] (remove #(= id %)) shapes))))) res (cpm/migrate-data data 8)] @@ -86,5 +86,4 @@ ;; (pprint expect) (t/is (= (dissoc expect :version) - (dissoc res :version))) - )) + (dissoc res :version))))) diff --git a/common/test/common_tests/geom_point_test.cljc b/common/test/common_tests/geom_point_test.cljc index 9be0bc1537..0490e1d02e 100644 --- a/common/test/common_tests/geom_point_test.cljc +++ b/common/test/common_tests/geom_point_test.cljc @@ -6,8 +6,8 @@ (ns common-tests.geom-point-test (:require - [app.common.math :as mth] [app.common.geom.point :as gpt] + [app.common.math :as mth] [clojure.test :as t])) (t/deftest add-points @@ -62,8 +62,7 @@ (t/is (gpt/close? rs p1))) (let [rs (gpt/min p2 p1)] - (t/is (gpt/close? rs p1))) - )) + (t/is (gpt/close? rs p1))))) (t/deftest max-point (let [p1 (gpt/point 1 2) @@ -85,8 +84,7 @@ (t/is (gpt/close? rs p2))) (let [rs (gpt/max p2 p1)] - (t/is (gpt/close? rs p2))) - )) + (t/is (gpt/close? rs p2))))) (t/deftest inverse-point (let [p1 (gpt/point 1 2) @@ -154,8 +152,7 @@ p2 (gpt/point 1 5) rs (gpt/angle-sign p1 p2)] (t/is (number? rs)) - (t/is (mth/close? -1 rs))) - ) + (t/is (mth/close? -1 rs)))) (t/deftest update-angle (let [p1 (gpt/point 1 3) @@ -184,8 +181,7 @@ (let [p1 (gpt/point -1 -3) rs (gpt/quadrant p1)] (t/is (number? rs)) - (t/is (mth/close? 3 rs))) - ) + (t/is (mth/close? 3 rs)))) (t/deftest round-point (let [p1 (gpt/point 1.34567 3.34567) @@ -198,8 +194,7 @@ rs (gpt/round p1 2)] (t/is (gpt/point? rs)) (t/is (mth/close? 1.35 (:x rs))) - (t/is (mth/close? 3.35 (:y rs)))) - ) + (t/is (mth/close? 3.35 (:y rs))))) (t/deftest halft-round-point (let [p1 (gpt/point 1.34567 3.34567) diff --git a/common/test/common_tests/geom_shapes_test.cljc b/common/test/common_tests/geom_shapes_test.cljc index 4e4ea3829a..14ecc3fabe 100644 --- a/common/test/common_tests/geom_shapes_test.cljc +++ b/common/test/common_tests/geom_shapes_test.cljc @@ -41,9 +41,9 @@ (t/deftest transform-shapes (t/testing "Shape without modifiers should stay the same" (t/are [type] - (let [shape-before (create-test-shape type) - shape-after (gsh/transform-shape shape-before)] - (= shape-before shape-after)) + (let [shape-before (create-test-shape type) + shape-after (gsh/transform-shape shape-before)] + (= shape-before shape-after)) :rect :path)) @@ -65,49 +65,48 @@ (get-in shape-after [:selrect :width]))) (t/is (close? (get-in shape-before [:selrect :height]) - (get-in shape-after [:selrect :height]))) - ))) + (get-in shape-after [:selrect :height])))))) (t/testing "Transform with empty translation" (t/are [type] - (let [modifiers {:displacement (gmt/matrix)} - shape-before (create-test-shape type {:modifiers modifiers}) - shape-after (gsh/transform-shape shape-before)] - (t/are [prop] - (t/is (close? (get-in shape-before [:selrect prop]) - (get-in shape-after [:selrect prop]))) - :x :y :width :height :x1 :y1 :x2 :y2)) + (let [modifiers {:displacement (gmt/matrix)} + shape-before (create-test-shape type {:modifiers modifiers}) + shape-after (gsh/transform-shape shape-before)] + (t/are [prop] + (t/is (close? (get-in shape-before [:selrect prop]) + (get-in shape-after [:selrect prop]))) + :x :y :width :height :x1 :y1 :x2 :y2)) :rect :path)) (t/testing "Transform shape with resize modifiers" (t/are [type] - (let [modifiers (ctm/resize-modifiers (gpt/point 2 2) (gpt/point 0 0)) - shape-before (create-test-shape type {:modifiers modifiers}) - shape-after (gsh/transform-shape shape-before)] - (t/is (not= shape-before shape-after)) + (let [modifiers (ctm/resize-modifiers (gpt/point 2 2) (gpt/point 0 0)) + shape-before (create-test-shape type {:modifiers modifiers}) + shape-after (gsh/transform-shape shape-before)] + (t/is (not= shape-before shape-after)) - (t/is (close? (get-in shape-before [:selrect :x]) - (get-in shape-after [:selrect :x]))) + (t/is (close? (get-in shape-before [:selrect :x]) + (get-in shape-after [:selrect :x]))) - (t/is (close? (get-in shape-before [:selrect :y]) - (get-in shape-after [:selrect :y]))) + (t/is (close? (get-in shape-before [:selrect :y]) + (get-in shape-after [:selrect :y]))) - (t/is (close? (* 2 (get-in shape-before [:selrect :width])) - (get-in shape-after [:selrect :width]))) + (t/is (close? (* 2 (get-in shape-before [:selrect :width])) + (get-in shape-after [:selrect :width]))) - (t/is (close? (* 2 (get-in shape-before [:selrect :height])) - (get-in shape-after [:selrect :height])))) + (t/is (close? (* 2 (get-in shape-before [:selrect :height])) + (get-in shape-after [:selrect :height])))) :rect :path)) (t/testing "Transform with empty resize" (t/are [type] - (let [modifiers (ctm/resize-modifiers (gpt/point 1 1) (gpt/point 0 0)) - shape-before (create-test-shape type {:modifiers modifiers}) - shape-after (gsh/transform-shape shape-before)] - (t/are [prop] - (t/is (close? (get-in shape-before [:selrect prop]) - (get-in shape-after [:selrect prop]))) - :x :y :width :height :x1 :y1 :x2 :y2)) + (let [modifiers (ctm/resize-modifiers (gpt/point 1 1) (gpt/point 0 0)) + shape-before (create-test-shape type {:modifiers modifiers}) + shape-after (gsh/transform-shape shape-before)] + (t/are [prop] + (t/is (close? (get-in shape-before [:selrect prop]) + (get-in shape-after [:selrect prop]))) + :x :y :width :height :x1 :y1 :x2 :y2)) :rect :path)) (t/testing "Transform with resize=0" @@ -118,54 +117,52 @@ (t/is (close? (get-in shape-before [:selrect :width]) (get-in shape-after [:selrect :width]))) (t/is (close? (get-in shape-before [:selrect :height]) - (get-in shape-after [:selrect :height]))))) + (get-in shape-after [:selrect :height]))))) (t/testing "Transform shape with rotation modifiers" (t/are [type] - (let [shape-before (create-test-shape type) - modifiers (ctm/rotation-modifiers shape-before (gsh/shape->center shape-before) 30) - shape-before (assoc shape-before :modifiers modifiers) - shape-after (gsh/transform-shape shape-before)] + (let [shape-before (create-test-shape type) + modifiers (ctm/rotation-modifiers shape-before (gsh/shape->center shape-before) 30) + shape-before (assoc shape-before :modifiers modifiers) + shape-after (gsh/transform-shape shape-before)] - (t/is (close? (get-in shape-before [:selrect :x]) - (get-in shape-after [:selrect :x]))) + (t/is (close? (get-in shape-before [:selrect :x]) + (get-in shape-after [:selrect :x]))) - (t/is (close? (get-in shape-before [:selrect :y]) - (get-in shape-after [:selrect :y]))) + (t/is (close? (get-in shape-before [:selrect :y]) + (get-in shape-after [:selrect :y]))) - (t/is (= (count (:points shape-before)) (count (:points shape-after)))) + (t/is (= (count (:points shape-before)) (count (:points shape-after)))) - (for [idx (range 0 (count (:point shape-before)))] - (do (t/is (not (close? (get-in shape-before [:points idx :x]) - (get-in shape-after [:points idx :x])))) - (t/is (not (close? (get-in shape-before [:points idx :y]) - (get-in shape-after [:points idx :y]))))))) + (for [idx (range 0 (count (:point shape-before)))] + (do (t/is (not (close? (get-in shape-before [:points idx :x]) + (get-in shape-after [:points idx :x])))) + (t/is (not (close? (get-in shape-before [:points idx :y]) + (get-in shape-after [:points idx :y]))))))) :rect :path)) (t/testing "Transform shape with rotation = 0 should leave equal selrect" (t/are [type] - (let [shape-before (create-test-shape type) - modifiers (ctm/rotation-modifiers shape-before (gsh/shape->center shape-before) 0) - shape-after (gsh/transform-shape (assoc shape-before :modifiers modifiers))] - (t/are [prop] - (t/is (close? (get-in shape-before [:selrect prop]) - (get-in shape-after [:selrect prop]))) - :x :y :width :height :x1 :y1 :x2 :y2)) + (let [shape-before (create-test-shape type) + modifiers (ctm/rotation-modifiers shape-before (gsh/shape->center shape-before) 0) + shape-after (gsh/transform-shape (assoc shape-before :modifiers modifiers))] + (t/are [prop] + (t/is (close? (get-in shape-before [:selrect prop]) + (get-in shape-after [:selrect prop]))) + :x :y :width :height :x1 :y1 :x2 :y2)) :rect :path)) (t/testing "Transform shape with invalid selrect fails gracefully" (t/are [type selrect] - (let [modifiers (ctm/move-modifiers 0 0) - shape-before (create-test-shape type {:selrect selrect}) - shape-after (gsh/transform-shape shape-before modifiers)] + (let [modifiers (ctm/move-modifiers 0 0) + shape-before (create-test-shape type {:selrect selrect}) + shape-after (gsh/transform-shape shape-before modifiers)] - (t/is (grc/close-rect? (:selrect shape-before) - (:selrect shape-after)))) + (t/is (grc/close-rect? (:selrect shape-before) + (:selrect shape-after)))) :rect (grc/make-rect 0 0 ##Inf ##Inf) - :path (grc/make-rect 0 0 ##Inf ##Inf) - )) - ) + :path (grc/make-rect 0 0 ##Inf ##Inf)))) (t/deftest points-to-selrect (let [points [(gpt/point 0.5 0.5) @@ -185,8 +182,8 @@ (t/deftest points-transform-matrix (t/testing "Transform matrix" (t/are [selrect points expected] - (let [result (gsht/transform-points-matrix selrect points)] - (t/is (gmt/close? expected result))) + (let [result (gsht/transform-points-matrix selrect points)] + (t/is (gmt/close? expected result))) ;; No transformation (grc/make-rect 0 0 10 10) @@ -197,7 +194,7 @@ ;; Displacement (grc/make-rect 0 0 10 10) (-> (grc/make-rect 20 20 10 10) - (grc/rect->points )) + (grc/rect->points)) (gmt/matrix 1 0 0 1 20 20) ;; Resize @@ -234,5 +231,4 @@ (t/is (true? (gsin/fast-has-point? shape point1))) (t/is (true? (gsin/slow-has-point? shape point1))) (t/is (false? (gsin/fast-has-point? shape point2))) - (t/is (false? (gsin/fast-has-point? shape point2))) - )) + (t/is (false? (gsin/fast-has-point? shape point2))))) diff --git a/common/test/common_tests/geom_test.cljc b/common/test/common_tests/geom_test.cljc index 36d99267d4..b0d336475a 100644 --- a/common/test/common_tests/geom_test.cljc +++ b/common/test/common_tests/geom_test.cljc @@ -6,10 +6,10 @@ (ns common-tests.geom-test (:require - [clojure.test :as t] - [app.common.math :as mth] + [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] - [app.common.geom.matrix :as gmt])) + [app.common.math :as mth] + [clojure.test :as t])) (t/deftest point-constructors-test (t/testing "Create point with both coordinates" diff --git a/common/test/common_tests/helpers/components.cljc b/common/test/common_tests/helpers/components.cljc index ce49b355d1..f842d2dc2a 100644 --- a/common/test/common_tests/helpers/components.cljc +++ b/common/test/common_tests/helpers/components.cljc @@ -6,11 +6,11 @@ (ns common-tests.helpers.components (:require - [clojure.test :as t] [app.common.files.helpers :as cfh] [app.common.types.component :as ctk] [app.common.types.container :as ctn] - [app.common.types.file :as ctf])) + [app.common.types.file :as ctf] + [clojure.test :as t])) ;; ---- Helpers to manage libraries and synchronization @@ -99,7 +99,7 @@ main-shape (ctn/get-shape component (:shape-ref shape))] - (t/is (some? main-shape))))] + (t/is (some? main-shape))))] ;; Validate that the instance tree is well constructed (check-instance-root (first shapes-inst)) @@ -135,7 +135,7 @@ main-shape (ctn/get-shape component (:shape-ref shape))] - (t/is (some? main-shape))))] + (t/is (some? main-shape))))] ;; Validate that the instance tree is well constructed (check-instance-root (first shapes-inst)) diff --git a/common/test/common_tests/helpers/files.cljc b/common/test/common_tests/helpers/files.cljc index 3da07f3a7b..3f27d7021b 100644 --- a/common/test/common_tests/helpers/files.cljc +++ b/common/test/common_tests/helpers/files.cljc @@ -45,111 +45,111 @@ (defn sample-shape [file label type page-id props] (ctf/update-file-data - file - (fn [file-data] - (let [frame-id (get props :frame-id uuid/zero) - parent-id (get props :parent-id uuid/zero) - shape (cts/setup-shape - (-> {:type type - :width 1 - :height 1} - (merge props)))] + file + (fn [file-data] + (let [frame-id (get props :frame-id uuid/zero) + parent-id (get props :parent-id uuid/zero) + shape (cts/setup-shape + (-> {:type type + :width 1 + :height 1} + (merge props)))] - (swap! idmap assoc label (:id shape)) - (ctpl/update-page file-data - page-id - #(ctst/add-shape (:id shape) - shape - % - frame-id - parent-id - 0 - true)))))) + (swap! idmap assoc label (:id shape)) + (ctpl/update-page file-data + page-id + #(ctst/add-shape (:id shape) + shape + % + frame-id + parent-id + 0 + true)))))) (defn sample-component [file label page-id shape-id] (ctf/update-file-data - file - (fn [file-data] - (let [page (ctpl/get-page file-data page-id) + file + (fn [file-data] + (let [page (ctpl/get-page file-data page-id) - [component-shape component-shapes updated-shapes] - (ctn/make-component-shape (ctn/get-shape page shape-id) - (:objects page) - (:id file) - true)] + [component-shape component-shapes updated-shapes] + (ctn/make-component-shape (ctn/get-shape page shape-id) + (:objects page) + (:id file) + true)] - (swap! idmap assoc label (:id component-shape)) - (-> file-data - (ctpl/update-page page-id - #(reduce (fn [page shape] (ctst/set-shape page shape)) - % - updated-shapes)) - (ctkl/add-component {:id (:id component-shape) - :name (:name component-shape) - :path "" - :main-instance-id shape-id - :main-instance-page page-id - :shapes component-shapes})))))) + (swap! idmap assoc label (:id component-shape)) + (-> file-data + (ctpl/update-page page-id + #(reduce (fn [page shape] (ctst/set-shape page shape)) + % + updated-shapes)) + (ctkl/add-component {:id (:id component-shape) + :name (:name component-shape) + :path "" + :main-instance-id shape-id + :main-instance-page page-id + :shapes component-shapes})))))) (defn sample-instance [file label page-id library component-id] (ctf/update-file-data - file - (fn [file-data] - (let [[instance-shape instance-shapes] - (ctn/make-component-instance (ctpl/get-page file-data page-id) - (ctkl/get-component (:data library) component-id) - (:data library) - (gpt/point 0 0) - true)] + file + (fn [file-data] + (let [[instance-shape instance-shapes] + (ctn/make-component-instance (ctpl/get-page file-data page-id) + (ctkl/get-component (:data library) component-id) + (:data library) + (gpt/point 0 0) + true)] - (swap! idmap assoc label (:id instance-shape)) - (-> file-data - (ctpl/update-page page-id - #(reduce (fn [page shape] - (ctst/add-shape (:id shape) - shape - page - uuid/zero - (:parent-id shape) - 0 - true)) - % - instance-shapes))))))) + (swap! idmap assoc label (:id instance-shape)) + (-> file-data + (ctpl/update-page page-id + #(reduce (fn [page shape] + (ctst/add-shape (:id shape) + shape + page + uuid/zero + (:parent-id shape) + 0 + true)) + % + instance-shapes))))))) (defn sample-color [file label props] (ctf/update-file-data - file - (fn [file-data] - (let [id (uuid/next) - props (merge {:id id - :name "Color 1" - :color "#000000" - :opacity 1} - props)] - (swap! idmap assoc label id) - (ctcl/add-color file-data props))))) + file + (fn [file-data] + (let [id (uuid/next) + props (merge {:id id + :name "Color 1" + :color "#000000" + :opacity 1} + props)] + (swap! idmap assoc label id) + (ctcl/add-color file-data props))))) (defn sample-typography [file label props] (ctf/update-file-data - file - (fn [file-data] - (let [id (uuid/next) - props (merge {:id id - :name "Typography 1" - :font-id "sourcesanspro" - :font-family "sourcesanspro" - :font-size "14" - :font-style "normal" - :font-variant-id "regular" - :font-weight "400" - :line-height "1.2" - :letter-spacing "0" - :text-transform "none"} - props)] - (swap! idmap assoc label id) - (ctyl/add-typography file-data props))))) + file + (fn [file-data] + (let [id (uuid/next) + props (merge {:id id + :name "Typography 1" + :font-id "sourcesanspro" + :font-family "sourcesanspro" + :font-size "14" + :font-style "normal" + :font-variant-id "regular" + :font-weight "400" + :line-height "1.2" + :letter-spacing "0" + :text-transform "none"} + props)] + (swap! idmap assoc label id) + (ctyl/add-typography file-data props))))) diff --git a/common/test/common_tests/pages_helpers_test.cljc b/common/test/common_tests/pages_helpers_test.cljc index 76eed5d7d6..a15f677bbc 100644 --- a/common/test/common_tests/pages_helpers_test.cljc +++ b/common/test/common_tests/pages_helpers_test.cljc @@ -6,9 +6,9 @@ (ns common-tests.pages-helpers-test (:require - [clojure.test :as t] + [app.common.files.helpers :as cfh] [clojure.pprint :refer [pprint]] - [app.common.files.helpers :as cfh])) + [clojure.test :as t])) (t/deftest parse-path-name (t/is (= ["foo" "bar"] (cfh/parse-path-name "foo/bar"))) diff --git a/common/test/common_tests/pages_test.cljc b/common/test/common_tests/pages_test.cljc index 88a969e0b2..146242c262 100644 --- a/common/test/common_tests/pages_test.cljc +++ b/common/test/common_tests/pages_test.cljc @@ -82,8 +82,7 @@ :option [:values :test2] :value nil}] res (ch/process-changes data chgs)] - (t/is (= [:test1] (keys (get-in res [:pages-index page-id :options :values])))))) - )) + (t/is (= [:test1] (keys (get-in res [:pages-index page-id :options :values])))))))) (t/deftest process-change-add-obj (let [file-id (uuid/custom 2 2) @@ -137,8 +136,7 @@ (t/is (not (nil? (get objects id-a)))) (t/is (not (nil? (get objects id-b)))) (t/is (not (nil? (get objects id-c)))) - (t/is (= [id-b id-c id-a] (get-in objects [uuid/zero :shapes])))))) - )) + (t/is (= [id-b id-c id-a] (get-in objects [uuid/zero :shapes])))))))) (t/deftest process-change-mod-obj (let [file-id (uuid/custom 2 2) @@ -164,9 +162,7 @@ :attr :name :val "foobar"}]} res (ch/process-changes data [chg])] - (t/is (= res data)))) - - )) + (t/is (= res data)))))) ;; (t/deftest process-change-del-obj diff --git a/common/test/common_tests/record_test.cljc b/common/test/common_tests/record_test.cljc index 809924cf4c..64532078b5 100644 --- a/common/test/common_tests/record_test.cljc +++ b/common/test/common_tests/record_test.cljc @@ -50,6 +50,5 @@ (t/is (= 10 (dm/get-prop u :a))) (t/is (= 20 (dm/get-prop u :b))) (t/is (= 124 (:c u))) - (t/is (not= u o))))) - )) + (t/is (not= u o))))))) diff --git a/common/test/common_tests/svg_path_test.cljc b/common/test/common_tests/svg_path_test.cljc index 19140f91e4..c9e9adcc89 100644 --- a/common/test/common_tests/svg_path_test.cljc +++ b/common/test/common_tests/svg_path_test.cljc @@ -6,13 +6,13 @@ (ns common-tests.svg-path-test (:require + #?(:cljs [app.common.svg.path.legacy-parser2 :as svg.path.legacy1]) [app.common.data :as d] - [app.common.pprint :as pp] [app.common.math :as mth] + [app.common.pprint :as pp] [app.common.svg.path :as svg.path] [app.common.svg.path.legacy-parser2 :as svg.path.legacy2] - [clojure.test :as t] - #?(:cljs [app.common.svg.path.legacy-parser2 :as svg.path.legacy1]))) + [clojure.test :as t])) (t/deftest parse-test-1 (let [data (str "m -994.563 4564.1423 149.3086 -52.8821 30.1828 " @@ -25,7 +25,7 @@ (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %))))) + (update entry :params #(into (sorted-map) %))))) result3 #?(:cljs (->> (svg.path.legacy1/parse data) (mapv (fn [entry] @@ -113,7 +113,7 @@ (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %)))))] + (update entry :params #(into (sorted-map) %)))))] (t/is (= 165 (count result1) @@ -144,7 +144,7 @@ (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %)))))] + (update entry :params #(into (sorted-map) %)))))] (t/is (= 6 (count result1) @@ -223,7 +223,7 @@ (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %)))))] + (update entry :params #(into (sorted-map) %)))))] (t/is (= 41 (count result1) @@ -242,8 +242,7 @@ (doseq [[k v] (:params item1)] (t/is (mth/close? v (get-in item2 [:params k]) 0.000000001)) - (t/is (mth/close? v (get-in item3 [:params k]) 0.000000001)) - ))))) + (t/is (mth/close? v (get-in item3 [:params k]) 0.000000001))))))) (t/deftest parse-test-5 (let [data (str "M363 826" @@ -268,15 +267,14 @@ "8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 8.5Zm120 0Q747 886 " "738.5 877.325q-8.5-8.676-8.5-21.5 0-12.825 8.675-21.325 8.676-8.5 21.5-8.5 " "12.825 0 21.325 8.675 8.5 8.676 8.5 21.5 0 12.825-8.675 21.325-8.676 8.5-21.5 " - "8.5Z" - ) + "8.5Z") result1 (->> (svg.path/parse data) (mapv (fn [entry] (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %)))))] + (update entry :params #(into (sorted-map) %)))))] (t/is (= 76 (count result1) @@ -287,15 +285,13 @@ (dotimes [i (count result1)] (let [item1 (nth result1 i) - item2 (nth result2 i) - ] + item2 (nth result2 i)] (t/is (= (:command item1) (:command item2))) (doseq [[k v] (:params item1)] - (t/is (mth/close? v (get-in item2 [:params k]) 0.000000001)) - ))))) + (t/is (mth/close? v (get-in item2 [:params k]) 0.000000001))))))) (t/deftest parse-test-6 (let [data (str "M3.078 3.548v16.9a.5.5 0 0 0 1 0v-16.9a.5.5 0 0 0-1 0ZM18.422 11.5" @@ -314,7 +310,7 @@ (update entry :params #(into (sorted-map) %))))) result2 (->> (svg.path.legacy2/parse data) (mapv (fn [entry] - (update entry :params #(into (sorted-map) %)))))] + (update entry :params #(into (sorted-map) %)))))] (t/is (= 47 (count result1) @@ -325,15 +321,13 @@ (dotimes [i (count result1)] (let [item1 (nth result1 i) - item2 (nth result2 i) - ] + item2 (nth result2 i)] (t/is (= (:command item1) (:command item2))) (doseq [[k v] (:params item1)] - (t/is (mth/close? v (get-in item2 [:params k]) 0.000000001)) - ))) + (t/is (mth/close? v (get-in item2 [:params k]) 0.000000001))))) #?(:cljs (let [result3 (svg.path.legacy1/parse data)] @@ -346,7 +340,7 @@ item3 (nth result2 i)] (t/is (= (:command item1) - (:command item3))) + (:command item3))) (t/is (= (:params item1) (:params item3))))))))) @@ -414,9 +408,7 @@ (dotimes [i (count result2)] (t/is (mth/close? (nth result2 i) (nth expected2 i) - 0.000000000001))))) - - )) + 0.000000000001))))))) (t/deftest arc-to-bezier-2 (let [expected1 [3.0779999999999994, @@ -486,9 +478,7 @@ (dotimes [i (count result2)] (t/is (mth/close? (nth result2 i) (nth expected2 i) - 0.000000000001))))) - - )) + 0.000000000001))))))) @@ -553,8 +543,7 @@ (t/is (= (nth result 2) (nth expected 2))) (t/is (= (nth result 3) - (nth expected 3))) - )) + (nth expected 3))))) ;; FOR POSSIBLE FUTURE TEST CASES ;; (str "M259.958 89.134c-6.88-.354-10.484-1.241-12.44-3.064-1.871-1.743-6.937-3.098-15.793-4.226-7.171-.913-17.179-2.279-22.24-3.034-5.06-.755-15.252-2.016-22.648-2.8-18.685-1.985-35.63-4.223-38.572-5.096-3.655-1.084-3.016-3.548.708-2.726 1.751.387 13.376 1.701 25.833 2.922 12.456 1.22 29.018 3.114 36.803 4.208 29.94 4.206 29.433 4.204 34.267.136 3.787-3.186 5.669-3.669 14.303-3.669 14.338 0 17.18 1.681 12.182 7.205-2.053 2.268-1.994 2.719.707 5.42 3.828 3.827 3.74 5.846-.238 5.5-1.752-.153-7.544-.502-12.872-.776zm7.563-3.194c0-.778-1.751-1.352-3.892-1.274l-3.893.141 3.539 1.133c1.946.624 3.698 1.197 3.893 1.275.194.077.354-.496.354-1.275zm-15.899-8.493c1.43-2.29 1.414-2.83-.084-2.83-2.05 0-5.25 2.76-5.25 4.529 0 2.226 3.599 1.08 5.334-1.699zm8.114 0c2.486-2.746 2.473-2.83-.438-2.83-1.65 0-3.683 1.273-4.516 2.83-1.175 2.196-1.077 2.831.438 2.831 1.075 0 3.107-1.274 4.516-2.83zm7.814.674c2.858-3.444.476-4.085-3.033-.816-2.451 2.284-2.677 2.973-.975 2.973 1.22 0 3.023-.97 4.008-2.157zm-49.571-4.509c-1.168-.43-3.294-1.802-4.725-3.051-2.112-1.843-9.304-2.595-38.219-3.994-46.474-2.25-63-4.077-60.27-6.665.324-.308 9.507.261 20.406 1.264 10.9 1.003 31.16 2.258 45.024 2.789l25.207.964 4.625-3.527c4.313-3.29 5.41-3.474 16.24-2.732 6.389.438 11.981 1.388 12.428 2.111.447.723-.517 2.73-2.141 4.46l-2.954 3.144c1.607 1.697 3.308 3.289 5.049 4.845 3.248 2.189-5.438 1.289-8.678 1.284-5.428-.061-10.825-.463-11.992-.892zm12.74-3.242c-1.123-.694-2.36-.943-2.75-.554-.389.39.21 1.275 1.334 1.97 1.122.693 2.36.942 2.749.553.389-.39-.21-1.275-1.334-1.97zm-5.663 0a1.42 1.42 0 00-1.415-1.416 1.42 1.42 0 00-1.416 1.416 1.42 1.42 0 001.416 1.415 1.42 1.42 0 001.415-1.415zm-8.464-6.404c.984-1.187 1.35-2.598.813-3.135-1.181-1.18-5.408 1.297-6.184 3.624-.806 2.42 3.265 2.048 5.37-.49zm6.863.258c.867-1.045 1.163-2.313.658-2.819-1.063-1.062-4.719 1.631-4.719 3.476 0 1.864 2.274 1.496 4.061-.657zm8.792-.36c1.637-1.972 1.448-2.197-1.486-1.77-1.848.27-3.622 1.287-3.943 2.26-.838 2.547 3.212 2.181 5.429-.49zm32.443-4.11c-6.156-2.228-67.1-6.138-119.124-7.642-39.208-1.134-72.072-.928-94.618.593-6.617.446-19.681 1.16-29.03 1.587-15.798.72-17.183.573-19.588-2.085-4.498-4.97-2.544-7.857 6.39-9.44 4.394-.778 9.164-2.436 10.6-3.685 5.44-4.729 20.332-14.06 31.14-19.509C65.717 11.88 78.955 7.79 103.837 3.08 121.686-.3 125.552-.642 129.318.82c2.44.948 12.4 1.948 22.132 2.221 15.37.432 20.004 1.18 35.294 5.698 22.36 6.606 39.732 15.1 56.55 27.653 7.307 5.452 14.086 9.913 15.066 9.913.98 0 2.148.956 2.596 2.124.55 1.432 2.798 2.123 6.914 2.123 6.213 0 12.4 3.046 12.38 6.096-.012 1.75-6.502 5.353-9.118 5.063-.818-.09-3.717-.972-6.442-1.958zm-16.986-7.436c0-1.575-33.326-18.118-43.173-21.43-23.008-7.739-54.084-12.922-77.136-12.866-16.863.041-37.877 3.628-52.465 8.956-18.062 6.596-26.563 10.384-29.181 13.002-1.205 1.205-5.306 3.769-9.112 5.698-7.754 3.929-8.841 5.482-3.029 4.325 13.494-2.685 66.794-3.773 110.913-2.264 38.005 1.3 96.812 4.435 102.122 5.443.584.111 1.061-.277 1.061-.864zm-236.39-3.18c0-.78-1.592-1.416-3.539-1.416-1.946 0-3.538.637-3.538 1.415 0 .779 1.592 1.416 3.538 1.416 1.947 0 3.54-.637 3.54-1.416zm7.078-1.416c0-.779-.956-1.416-2.124-1.416-1.167 0-2.123.637-2.123 1.416 0 .778.956 1.415 2.123 1.415 1.168 0 2.124-.637 2.124-1.415zm11.734-4.437c3.278-1.661 6.278-3.483 6.667-4.048 1.366-1.98 20.645-11.231 32.557-15.622 11.862-4.372 36.546-9.865 44.327-9.865 3.485 0 3.867-.404 3.012-3.185-.538-1.752-1.177-3.41-1.42-3.685-.907-1.026-36.72 7.16-45.065 10.302-17.226 6.484-47.566 24.27-47.566 27.886 0 1.786.845 1.585 7.488-1.783zm206.254-5.577c-12.298-10.518-53.842-27.166-70.896-28.41-5.526-.404-6.3-.097-6.695 2.655-.33 2.307.402 3.275 2.831 3.742 32.436 6.237 52.205 12.315 66.975 20.594 11.904 6.673 14.477 7.141 7.785 1.419zM150.1 11.04c-1.949-3.64-7.568-4.078-6.886-.538.256 1.329 2.054 2.817 3.997 3.309 4.498 1.137 4.816.832 2.888-2.771zm6.756.94c-.248-1.752-1.026-3.185-1.727-3.185-.7 0-1.493 1.433-1.76 3.185-.328 2.152.232 3.185 1.727 3.185 1.485 0 2.064-1.047 1.76-3.185zm-30.178-2.458c0-2.303-.908-3.694-2.627-4.025-3.6-.694-5.23 1.301-4.22 5.166 1.216 4.647 6.847 3.709 6.847-1.14zm12.544 2.104c-.448-1.168-1.224-2.132-1.725-2.142-.5-.013-2.343-.404-4.095-.873-2.569-.689-3.185-.274-3.185 2.142 0 2.476.854 2.996 4.91 2.996 3.783 0 4.723-.487 4.095-2.123z") diff --git a/common/test/common_tests/text_test.cljc b/common/test/common_tests/text_test.cljc index 3c9fb69358..1e346b8ac8 100644 --- a/common/test/common_tests/text_test.cljc +++ b/common/test/common_tests/text_test.cljc @@ -8,8 +8,8 @@ (:require [app.common.data :as d] [app.common.text :as txt] - [clojure.test :as t :include-macros true] - [clojure.pprint :refer [pprint]])) + [clojure.pprint :refer [pprint]] + [clojure.test :as t :include-macros true])) (t/deftest test-basic-conversion-roundtrip (let [text "qwqw 🠒" diff --git a/common/test/common_tests/types_file_test.cljc b/common/test/common_tests/types_file_test.cljc index 5bb1abb79e..bc76f87da0 100644 --- a/common/test/common_tests/types_file_test.cljc +++ b/common/test/common_tests/types_file_test.cljc @@ -28,51 +28,51 @@ (t/use-fixtures :each thf/reset-idmap!) #_(t/deftest test-absorb-components - (let [library-id (uuid/custom 1 1) - library-page-id (uuid/custom 2 2) - file-id (uuid/custom 3 3) - file-page-id (uuid/custom 4 4) + (let [library-id (uuid/custom 1 1) + library-page-id (uuid/custom 2 2) + file-id (uuid/custom 3 3) + file-page-id (uuid/custom 4 4) - library (-> (thf/sample-file library-id library-page-id {:is-shared true}) - (thf/sample-shape :group1 - :group - library-page-id - {:name "Group1"}) - (thf/sample-shape :shape1 - :rect - library-page-id - {:name "Rect1" - :parent-id (thf/id :group1)}) - (thf/sample-component :component1 - library-page-id - (thf/id :group1))) + library (-> (thf/sample-file library-id library-page-id {:is-shared true}) + (thf/sample-shape :group1 + :group + library-page-id + {:name "Group1"}) + (thf/sample-shape :shape1 + :rect + library-page-id + {:name "Rect1" + :parent-id (thf/id :group1)}) + (thf/sample-component :component1 + library-page-id + (thf/id :group1))) - file (-> (thf/sample-file file-id file-page-id) - (thf/sample-instance :instance1 - file-page-id - library - (thf/id :component1))) + file (-> (thf/sample-file file-id file-page-id) + (thf/sample-instance :instance1 + file-page-id + library + (thf/id :component1))) - absorbed-file (ctf/update-file-data - file - #(ctf/absorb-assets % (:data library))) + absorbed-file (ctf/update-file-data + file + #(ctf/absorb-assets % (:data library))) - pages (ctpl/pages-seq (ctf/file-data absorbed-file)) - components (ctkl/components-seq (ctf/file-data absorbed-file)) - shapes-1 (ctn/shapes-seq (first pages)) - shapes-2 (ctn/shapes-seq (second pages)) + pages (ctpl/pages-seq (ctf/file-data absorbed-file)) + components (ctkl/components-seq (ctf/file-data absorbed-file)) + shapes-1 (ctn/shapes-seq (first pages)) + shapes-2 (ctn/shapes-seq (second pages)) - [[p-group p-shape] [c-group1 c-shape1] component1] - (thk/resolve-instance-and-main - (first pages) - (:id (second shapes-1)) - {file-id absorbed-file}) + [[p-group p-shape] [c-group1 c-shape1] component1] + (thk/resolve-instance-and-main + (first pages) + (:id (second shapes-1)) + {file-id absorbed-file}) - [[lp-group lp-shape] [c-group2 c-shape2] component2] - (thk/resolve-instance-and-main - (second pages) - (:id (second shapes-2)) - {file-id absorbed-file})] + [[lp-group lp-shape] [c-group2 c-shape2] component2] + (thk/resolve-instance-and-main + (second pages) + (:id (second shapes-2)) + {file-id absorbed-file})] ;; Uncomment to debug @@ -100,20 +100,20 @@ ;; {file-id absorbed-file} ;; false) - (t/is (= (count pages) 2)) - (t/is (= (:name (first pages)) "Page 1")) - (t/is (= (:name (second pages)) "Library backup")) + (t/is (= (count pages) 2)) + (t/is (= (:name (first pages)) "Page 1")) + (t/is (= (:name (second pages)) "Library backup")) - (t/is (= (count components) 1)) + (t/is (= (count components) 1)) - (t/is (= (:name p-group) "Group1")) - (t/is (ctk/instance-of? p-group file-id (:id component1))) - (t/is (not (:main-instance? p-group))) - (t/is (not (ctk/main-instance-of? (:id p-group) file-page-id component1))) - (t/is (ctk/is-main-of? c-group1 p-group)) + (t/is (= (:name p-group) "Group1")) + (t/is (ctk/instance-of? p-group file-id (:id component1))) + (t/is (not (:main-instance? p-group))) + (t/is (not (ctk/main-instance-of? (:id p-group) file-page-id component1))) + (t/is (ctk/is-main-of? c-group1 p-group)) - (t/is (= (:name p-shape) "Rect1")) - (t/is (ctk/is-main-of? c-shape1 p-shape)))) + (t/is (= (:name p-shape) "Rect1")) + (t/is (ctk/is-main-of? c-shape1 p-shape)))) (t/deftest test-absorb-colors @@ -137,8 +137,8 @@ :fill-color-ref-file library-id}]})) absorbed-file (ctf/update-file-data - file - #(ctf/absorb-assets % (:data library))) + file + #(ctf/absorb-assets % (:data library))) colors (ctcl/colors-seq (ctf/file-data absorbed-file)) page (ctpl/get-page (ctf/file-data absorbed-file) file-page-id) @@ -187,11 +187,10 @@ :text-decoration "none" :letter-spacing "0" :fills [{:fill-color "#000000" - :fill-opacity 1}]}] - }]}]}})) + :fill-opacity 1}]}]}]}]}})) absorbed-file (ctf/update-file-data - file - #(ctf/absorb-assets % (:data library))) + file + #(ctf/absorb-assets % (:data library))) typographies (ctyl/typographies-seq (ctf/file-data absorbed-file)) page (ctpl/get-page (ctf/file-data absorbed-file) file-page-id) diff --git a/common/test/common_tests/types_modifiers_test.cljc b/common/test/common_tests/types_modifiers_test.cljc index 24d6e47a9a..740d496285 100644 --- a/common/test/common_tests/types_modifiers_test.cljc +++ b/common/test/common_tests/types_modifiers_test.cljc @@ -6,10 +6,10 @@ (ns common-tests.types-modifiers-test (:require - [clojure.test :as t] [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] - [app.common.types.modifiers :as ctm])) + [app.common.types.modifiers :as ctm] + [clojure.test :as t])) (t/deftest test-modifiers->transform (let [modifiers diff --git a/common/test/common_tests/types_shape_interactions_test.cljc b/common/test/common_tests/types_shape_interactions_test.cljc index 289ca7544d..5a699278d6 100644 --- a/common/test/common_tests/types_shape_interactions_test.cljc +++ b/common/test/common_tests/types_shape_interactions_test.cljc @@ -6,11 +6,11 @@ (ns common-tests.types-shape-interactions-test (:require - [app.common.math :as mth] [app.common.exceptions :as ex] [app.common.geom.point :as gpt] [app.common.geom.rect :as grc] [app.common.geom.shapes :as gsh] + [app.common.math :as mth] [app.common.types.shape :as cts] [app.common.types.shape.interactions :as ctsi] [app.common.uuid :as uuid] @@ -48,8 +48,7 @@ new-interaction (ctsi/set-event-type interaction :after-delay frame)] (t/is (= :after-delay (:event-type new-interaction))) - (t/is (= 300 (:delay new-interaction))))) - )) + (t/is (= 300 (:delay new-interaction))))))) (t/deftest set-action-type diff --git a/common/test/common_tests/types_test.cljc b/common/test/common_tests/types_test.cljc index d0c217c4cb..e5326250da 100644 --- a/common/test/common_tests/types_test.cljc +++ b/common/test/common_tests/types_test.cljc @@ -6,13 +6,13 @@ (ns common-tests.types-test (:require - [clojure.test :as t] [app.common.schema :as sm] [app.common.schema.generators :as sg] [app.common.transit :as transit] - [app.common.types.shape :as cts] + [app.common.types.file :as ctf] [app.common.types.page :as ctp] - [app.common.types.file :as ctf])) + [app.common.types.shape :as cts] + [clojure.test :as t])) (t/deftest transit-encode-decode-with-shape (sg/check! From 833871df65e482ebbea8b1fb86b1f555a367c407 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 14:23:30 +0100 Subject: [PATCH 21/26] :lipstick: Format frontend code --- .cljfmt.edn | 1 + frontend/src/app/libs/file_builder.cljs | 6 +- frontend/src/app/libs/render.cljs | 2 +- frontend/src/app/main/data/comments.cljs | 82 +-- frontend/src/app/main/data/dashboard.cljs | 22 +- frontend/src/app/main/data/messages.cljs | 20 +- frontend/src/app/main/data/users.cljs | 4 +- frontend/src/app/main/data/viewer.cljs | 28 +- frontend/src/app/main/data/workspace.cljs | 69 ++- .../src/app/main/data/workspace/collapse.cljs | 12 +- .../src/app/main/data/workspace/colors.cljs | 64 +-- .../src/app/main/data/workspace/comments.cljs | 2 +- .../src/app/main/data/workspace/common.cljs | 4 +- .../src/app/main/data/workspace/drawing.cljs | 2 +- .../data/workspace/fix_deleted_fonts.cljs | 62 +-- .../src/app/main/data/workspace/grid.cljs | 6 +- .../data/workspace/grid_layout/shortcuts.cljs | 3 +- .../src/app/main/data/workspace/groups.cljs | 10 +- .../app/main/data/workspace/interactions.cljs | 148 +++--- .../app/main/data/workspace/libraries.cljs | 40 +- .../data/workspace/libraries_helpers.cljs | 10 +- .../src/app/main/data/workspace/media.cljs | 38 +- .../app/main/data/workspace/modifiers.cljs | 39 +- .../app/main/data/workspace/path/helpers.cljs | 2 +- .../app/main/data/workspace/path/streams.cljs | 10 +- .../app/main/data/workspace/persistence.cljs | 3 +- .../app/main/data/workspace/selection.cljs | 104 ++-- .../app/main/data/workspace/shortcuts.cljs | 12 +- .../data/workspace/specialized_panel.cljs | 30 +- .../main/data/workspace/text/shortcuts.cljs | 20 +- .../src/app/main/data/workspace/texts.cljs | 3 +- .../app/main/data/workspace/transforms.cljs | 10 +- .../src/app/main/data/workspace/undo.cljs | 28 +- frontend/src/app/main/fonts.cljs | 80 +-- frontend/src/app/main/render.cljs | 82 +-- frontend/src/app/main/repo.cljs | 3 +- frontend/src/app/main/snap.cljs | 2 +- frontend/src/app/main/store.cljs | 2 +- frontend/src/app/main/style.clj | 18 +- frontend/src/app/main/ui/auth/login.cljs | 46 +- frontend/src/app/main/ui/auth/register.cljs | 2 +- frontend/src/app/main/ui/comments.cljs | 26 +- .../ui/components/buttons/simple_button.cljs | 4 +- .../app/main/ui/components/color_bullet.cljs | 4 +- .../app/main/ui/components/color_input.cljs | 18 +- .../src/app/main/ui/components/forms.cljs | 24 +- frontend/src/app/main/ui/components/link.cljs | 2 +- .../app/main/ui/components/search_bar.cljs | 2 +- .../app/main/ui/components/tab_container.cljs | 6 +- frontend/src/app/main/ui/dashboard.cljs | 2 +- .../src/app/main/ui/dashboard/comments.cljs | 6 +- .../src/app/main/ui/dashboard/file_menu.cljs | 2 +- frontend/src/app/main/ui/dashboard/fonts.cljs | 16 +- frontend/src/app/main/ui/dashboard/grid.cljs | 18 +- .../app/main/ui/dashboard/project_menu.cljs | 66 +-- .../src/app/main/ui/dashboard/projects.cljs | 4 +- frontend/src/app/main/ui/dashboard/team.cljs | 2 +- frontend/src/app/main/ui/delete_shared.cljs | 2 +- frontend/src/app/main/ui/export.cljs | 6 +- frontend/src/app/main/ui/frame_preview.cljs | 10 +- frontend/src/app/main/ui/hooks.cljs | 10 +- frontend/src/app/main/ui/measurements.cljs | 46 +- .../src/app/main/ui/onboarding/questions.cljs | 4 +- .../src/app/main/ui/onboarding/templates.cljs | 10 +- frontend/src/app/main/ui/routes.cljs | 14 +- .../app/main/ui/settings/change_email.cljs | 17 +- .../src/app/main/ui/settings/options.cljs | 12 +- .../src/app/main/ui/settings/sidebar.cljs | 36 +- frontend/src/app/main/ui/shapes/attrs.cljs | 24 +- .../src/app/main/ui/shapes/custom_stroke.cljs | 178 +++---- frontend/src/app/main/ui/shapes/embed.cljs | 6 +- frontend/src/app/main/ui/shapes/export.cljs | 76 +-- frontend/src/app/main/ui/shapes/fills.cljs | 14 +- frontend/src/app/main/ui/shapes/mask.cljs | 4 +- frontend/src/app/main/ui/shapes/path.cljs | 6 +- frontend/src/app/main/ui/shapes/svg_defs.cljs | 10 +- frontend/src/app/main/ui/shapes/svg_raw.cljs | 2 +- .../src/app/main/ui/shapes/text/fo_text.cljs | 2 +- .../app/main/ui/shapes/text/html_text.cljs | 2 +- frontend/src/app/main/ui/viewer.cljs | 2 +- frontend/src/app/main/ui/viewer/comments.cljs | 4 +- frontend/src/app/main/ui/viewer/header.cljs | 12 +- frontend/src/app/main/ui/viewer/inspect.cljs | 2 +- frontend/src/app/main/ui/viewer/shapes.cljs | 206 ++++---- .../app/main/ui/workspace/color_palette.cljs | 4 +- .../ui/workspace/color_palette_ctx_menu.cljs | 4 +- .../app/main/ui/workspace/colorpicker.cljs | 14 +- .../ui/workspace/colorpicker/libraries.cljs | 4 +- .../app/main/ui/workspace/context_menu.cljs | 2 +- .../app/main/ui/workspace/shapes/frame.cljs | 4 +- .../shapes/frame/dynamic_modifiers.cljs | 4 +- .../shapes/text/viewport_texts_html.cljs | 2 +- .../src/app/main/ui/workspace/sidebar.cljs | 2 +- .../app/main/ui/workspace/sidebar/assets.cljs | 42 +- .../workspace/sidebar/assets/components.cljs | 8 +- .../sidebar/assets/typographies.cljs | 112 ++-- .../main/ui/workspace/sidebar/history.cljs | 34 +- .../sidebar/options/menus/component.cljs | 144 +++--- .../workspace/sidebar/options/menus/fill.cljs | 2 +- .../sidebar/options/menus/grid_cell.cljs | 38 +- .../sidebar/options/menus/interactions.cljs | 62 +-- .../sidebar/options/menus/layout_item.cljs | 8 +- .../sidebar/options/menus/shadow.cljs | 2 +- .../sidebar/options/rows/color_row.cljs | 4 +- .../sidebar/options/shapes/multiple.cljs | 4 +- .../ui/workspace/text_palette_ctx_menu.cljs | 2 +- .../main/ui/workspace/viewport/comments.cljs | 4 +- .../ui/workspace/viewport/frame_grid.cljs | 2 +- .../main/ui/workspace/viewport/gradients.cljs | 2 +- .../viewport/grid_layout_editor.cljs | 2 +- .../main/ui/workspace/viewport/guides.cljs | 8 +- .../ui/workspace/viewport/interactions.cljs | 48 +- .../main/ui/workspace/viewport/outline.cljs | 3 +- .../ui/workspace/viewport/pixel_overlay.cljs | 26 +- .../app/main/ui/workspace/viewport/rules.cljs | 4 +- .../main/ui/workspace/viewport/selection.cljs | 2 +- .../ui/workspace/viewport/snap_distances.cljs | 4 +- .../app/main/ui/workspace/viewport/utils.cljs | 2 +- .../main/ui/workspace/viewport/widgets.cljs | 14 +- frontend/src/app/rasterizer.cljs | 2 +- frontend/src/app/render.cljs | 4 +- .../app/util/code_gen/style_css_formats.cljs | 5 +- frontend/src/app/util/color.cljs | 2 +- frontend/src/app/util/css.cljs | 2 +- frontend/src/app/util/debug.cljs | 3 +- frontend/src/app/util/dom/dnd.cljs | 10 +- frontend/src/app/util/import/parser.cljs | 7 +- frontend/src/app/util/path/format.cljs | 6 +- frontend/src/app/util/perf.cljs | 8 +- frontend/src/app/util/queue.cljs | 12 +- frontend/src/app/util/router.cljs | 12 +- frontend/src/app/util/rxops.cljs | 4 +- frontend/src/app/util/simple_math.cljs | 6 +- frontend/src/app/util/snap_data.cljs | 10 +- frontend/src/app/util/thumbnails.cljs | 6 +- frontend/src/app/worker.cljs | 12 +- frontend/src/app/worker/export.cljs | 11 +- frontend/src/app/worker/import.cljs | 60 +-- frontend/src/app/worker/selection.cljs | 34 +- frontend/src/app/worker/thumbnails.cljs | 18 +- frontend/src/debug.cljs | 34 +- .../test/frontend_tests/helpers/pages.cljs | 2 +- .../frontend_tests/helpers_shapes_test.cljs | 14 +- frontend/test/frontend_tests/setup_test.cljs | 8 +- .../state_components_sync_test.cljs | 488 +++++++++--------- .../frontend_tests/state_components_test.cljs | 8 +- .../frontend_tests/test_helpers_shapes.cljs | 14 +- .../frontend_tests/util_range_tree_test.cljs | 12 +- .../frontend_tests/util_simple_math_test.cljs | 10 +- .../frontend_tests/util_snap_data_test.cljs | 8 +- 150 files changed, 1735 insertions(+), 1770 deletions(-) diff --git a/.cljfmt.edn b/.cljfmt.edn index ffa047b2cf..38cfeb89b6 100644 --- a/.cljfmt.edn +++ b/.cljfmt.edn @@ -3,6 +3,7 @@ :remove-surrounding-whitespace? true :remove-consecutive-blank-lines? false :extra-indents {rumext.v2/fnc [[:inner 0]] + cljs.test/async [[:inner 0]] promesa.exec/thread [[:inner 0]] specify! [[:inner 0] [:inner 1]]} } diff --git a/frontend/src/app/libs/file_builder.cljs b/frontend/src/app/libs/file_builder.cljs index a1605bfdd3..4d3b21adce 100644 --- a/frontend/src/app/libs/file_builder.cljs +++ b/frontend/src/app/libs/file_builder.cljs @@ -133,8 +133,8 @@ (rx/reduce conj []) (rx/with-latest-from files-stream) (rx/merge-map (fn [[data _]] - (->> (uz/compress-files data) - (rx/map #(vector file %))))))))) + (->> (uz/compress-files data) + (rx/map #(vector file %))))))))) (deftype File [^:mutable file] Object @@ -263,4 +263,4 @@ (File. (fb/create-file name))) (defn exports [] - #js { :createFile create-file-export }) + #js {:createFile create-file-export}) diff --git a/frontend/src/app/libs/render.cljs b/frontend/src/app/libs/render.cljs index 9021bb810e..26e6cfe5d6 100644 --- a/frontend/src/app/libs/render.cljs +++ b/frontend/src/app/libs/render.cljs @@ -22,7 +22,7 @@ (fn [resolve reject] (->> (r/render-page data) (rx/take 1) - (rx/subs! resolve reject))) ))) + (rx/subs! resolve reject)))))) (defn exports [] #js {:renderPage render-page-export}) diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs index 273aeaf2fa..ce8e1bd6d5 100644 --- a/frontend/src/app/main/data/comments.cljs +++ b/frontend/src/app/main/data/comments.cljs @@ -171,14 +171,14 @@ ptk/WatchEvent (watch [_ state _] - (let [share-id (-> state :viewer-local :share-id)] - (->> (rp/cmd! :update-comment-thread {:id id :is-resolved is-resolved :share-id share-id}) - (rx/catch (fn [{:keys [type code] :as cause}] - (if (and (= type :restriction) - (= code :max-quote-reached)) - (rx/throw cause) - (rx/throw {:type :comment-error})))) - (rx/ignore)))))) + (let [share-id (-> state :viewer-local :share-id)] + (->> (rp/cmd! :update-comment-thread {:id id :is-resolved is-resolved :share-id share-id}) + (rx/catch (fn [{:keys [type code] :as cause}] + (if (and (= type :restriction) + (= code :max-quote-reached)) + (rx/throw cause) + (rx/throw {:type :comment-error})))) + (rx/ignore)))))) (defn add-comment [thread content] @@ -196,16 +196,16 @@ (ptk/reify ::create-comment ptk/WatchEvent (watch [_ state _] - (let [share-id (-> state :viewer-local :share-id)] - (rx/concat - (->> (rp/cmd! :create-comment {:thread-id (:id thread) :content content :share-id share-id}) - (rx/map #(partial created %)) - (rx/catch (fn [{:keys [type code] :as cause}] - (if (and (= type :restriction) - (= code :max-quote-reached)) - (rx/throw cause) - (rx/throw {:type :comment-error}))))) - (rx/of (refresh-comment-thread thread)))))))) + (let [share-id (-> state :viewer-local :share-id)] + (rx/concat + (->> (rp/cmd! :create-comment {:thread-id (:id thread) :content content :share-id share-id}) + (rx/map #(partial created %)) + (rx/catch (fn [{:keys [type code] :as cause}] + (if (and (= type :restriction) + (= code :max-quote-reached)) + (rx/throw cause) + (rx/throw {:type :comment-error}))))) + (rx/of (refresh-comment-thread thread)))))))) (defn update-comment [{:keys [id content thread-id] :as comment}] @@ -309,14 +309,14 @@ (-> (assoc-in (conj path :position) (:position comment-thread)) (assoc-in (conj path :frame-id) (:frame-id comment-thread)))))) - (fetched [[users comments] state] - (let [pages (-> (get-in state [:workspace-data :pages]) - set) - comments (filter #(contains? pages (:page-id %)) comments) - state (-> state - (assoc :comment-threads (d/index-by :id comments)) - (update :current-file-comments-users merge (d/index-by :id users)))] - (reduce set-comment-threds state comments)))] + (fetched [[users comments] state] + (let [pages (-> (get-in state [:workspace-data :pages]) + set) + comments (filter #(contains? pages (:page-id %)) comments) + state (-> state + (assoc :comment-threads (d/index-by :id comments)) + (update :current-file-comments-users merge (d/index-by :id users)))] + (reduce set-comment-threds state comments)))] (ptk/reify ::retrieve-comment-threads ptk/WatchEvent @@ -491,23 +491,23 @@ ([thread] (update-comment-thread-frame thread uuid/zero)) - ([thread frame-id] - (dm/assert! - "expected valid comment thread" - (check-comment-thread! thread)) + ([thread frame-id] + (dm/assert! + "expected valid comment thread" + (check-comment-thread! thread)) - (ptk/reify ::update-comment-thread-frame - ptk/UpdateEvent - (update [_ state] - (let [thread-id (:id thread)] - (assoc-in state [:comment-threads thread-id :frame-id] frame-id))) + (ptk/reify ::update-comment-thread-frame + ptk/UpdateEvent + (update [_ state] + (let [thread-id (:id thread)] + (assoc-in state [:comment-threads thread-id :frame-id] frame-id))) - ptk/WatchEvent - (watch [_ _ _] - (let [thread-id (:id thread)] - (->> (rp/cmd! :update-comment-thread-frame {:id thread-id :frame-id frame-id}) - (rx/catch #(rx/throw {:type :comment-error :code :update-comment-thread-frame})) - (rx/ignore))))))) + ptk/WatchEvent + (watch [_ _ _] + (let [thread-id (:id thread)] + (->> (rp/cmd! :update-comment-thread-frame {:id thread-id :frame-id frame-id}) + (rx/catch #(rx/throw {:type :comment-error :code :update-comment-thread-frame})) + (rx/ignore))))))) (defn detach-comment-thread "Detach comment threads that are inside a frame when that frame is deleted" diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 30787180ba..10effaf162 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -306,8 +306,8 @@ (ptk/reify ::fetch-builtin-templates ptk/WatchEvent (watch [_ _ _] - (->> (rp/cmd! :get-builtin-templates) - (rx/map builtin-templates-fetched))))) + (->> (rp/cmd! :get-builtin-templates) + (rx/map builtin-templates-fetched))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Data Selection @@ -320,7 +320,7 @@ (update [_ state] (update state :dashboard-local assoc :selected-files #{} - :selected-project nil)))) + :selected-project nil)))) (defn toggle-file-select [{:keys [id project-id] :as file}] @@ -377,10 +377,10 @@ :or {on-success identity on-error rx/throw}} (meta params) features (features/get-enabled-features state)] - params {:name name - :emails #{emails} - :role role - :features features} + params {:name name + :emails #{emails} + :role role + :features features} (->> (rp/cmd! :create-team-with-invitations params) (rx/tap on-success) (rx/map team-created) @@ -817,7 +817,7 @@ (d/update-in-when [:dashboard-files id :is-shared] (constantly is-shared)) (d/update-in-when [:dashboard-recent-files id :is-shared] (constantly is-shared)) (cond-> - (not is-shared) + (not is-shared) (d/update-when :dashboard-shared-files dissoc id)))) ptk/WatchEvent @@ -1010,9 +1010,9 @@ (let [team-id (:current-team-id state)] (if (empty? term) (do - (dom/focus! (dom/get-element "search-input")) - (rx/of (rt/nav :dashboard-search - {:team-id team-id}))) + (dom/focus! (dom/get-element "search-input")) + (rx/of (rt/nav :dashboard-search + {:team-id team-id}))) (rx/of (rt/nav :dashboard-search {:team-id team-id} {:search-term term}))))) diff --git a/frontend/src/app/main/data/messages.cljs b/frontend/src/app/main/data/messages.cljs index cce2346996..ef4c131ab1 100644 --- a/frontend/src/app/main/data/messages.cljs +++ b/frontend/src/app/main/data/messages.cljs @@ -59,16 +59,16 @@ ptk/WatchEvent (watch [_ _ stream] (rx/merge - (let [stoper (rx/filter (ptk/type? ::hide) stream)] - (->> stream - (rx/filter (ptk/type? :app.util.router/navigate)) - (rx/map (constantly hide)) - (rx/take-until stoper))) - (when (:timeout data) - (let [stoper (rx/filter (ptk/type? ::show) stream)] - (->> (rx/of hide) - (rx/delay (:timeout data)) - (rx/take-until stoper)))))))) + (let [stoper (rx/filter (ptk/type? ::hide) stream)] + (->> stream + (rx/filter (ptk/type? :app.util.router/navigate)) + (rx/map (constantly hide)) + (rx/take-until stoper))) + (when (:timeout data) + (let [stoper (rx/filter (ptk/type? ::show) stream)] + (->> (rx/of hide) + (rx/delay (:timeout data)) + (rx/take-until stoper)))))))) (def hide (ptk/reify ::hide diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs index 4672ebbfd2..50cd0e5848 100644 --- a/frontend/src/app/main/data/users.cljs +++ b/frontend/src/app/main/data/users.cljs @@ -131,8 +131,8 @@ (when profile (swap! storage assoc :profile profile) (i18n/set-locale! (:lang profile)) - (when (not= previous-email email) - (swap! storage dissoc ::current-team-id))))))) + (when (not= previous-email email) + (swap! storage dissoc ::current-team-id))))))) (defn fetch-profile [] diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index e8c00c8acc..ae361f3e15 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -66,10 +66,10 @@ (-> state (assoc :current-file-id file-id) (update :viewer-local - (fn [lstate] - (if (nil? lstate) - default-local-state - lstate))) + (fn [lstate] + (if (nil? lstate) + default-local-state + lstate))) (assoc-in [:viewer-local :share-id] share-id) (assoc-in [:viewer-local :interactions-show?] interactions-show?))) @@ -202,10 +202,10 @@ "fill" zoom-to-fill nil)) (rx/of - (cond - (some? frame-id) (go-to-frame (uuid frame-id)) - (some? index) (go-to-frame-by-index index) - :else (go-to-frame-auto))))))))) + (cond + (some? frame-id) (go-to-frame (uuid frame-id)) + (some? index) (go-to-frame-by-index index) + :else (go-to-frame-auto))))))))) (defn fetch-comment-threads [{:keys [file-id page-id share-id] :as params}] @@ -297,9 +297,9 @@ ptk/UpdateEvent (update [_ state] (let [srect (as-> (get-in state [:route :query-params :page-id]) % - (get-in state [:viewer :pages % :frames]) - (nth % (get-in state [:route :query-params :index])) - (get % :selrect)) + (get-in state [:viewer :pages % :frames]) + (nth % (get-in state [:route :query-params :index])) + (get % :selrect)) orig-size (get-in state [:viewer-local :viewport-size]) wdiff (/ (:width orig-size) (:width srect)) hdiff (/ (:height orig-size) (:height srect)) @@ -514,9 +514,9 @@ (some? animation) (assoc-in [:viewer-animations (:id frame)] - {:kind :go-to-frame - :orig-frame-id (:id frame) - :animation animation})))) + {:kind :go-to-frame + :orig-frame-id (:id frame) + :animation animation})))) ptk/WatchEvent (watch [_ state _] diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 6c72136001..59e78502fc 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -316,8 +316,8 @@ (rx/take 1) (rx/map #(go-to-component (uuid/uuid component-id)))))) - (rx/take-until - (rx/filter (ptk/type? ::fetch-bundle) stream)))))) + (rx/take-until + (rx/filter (ptk/type? ::fetch-bundle) stream)))))) (defn initialize-file [project-id file-id] @@ -1038,12 +1038,12 @@ shapes-to-select (->> selected (reduce - (fn [result shape-id] - (let [parent-id (dm/get-in objects [shape-id :parent-id])] - (if (and (some? parent-id) (not= parent-id uuid/zero)) - (conj result parent-id) - (conj result shape-id)))) - (d/ordered-set)))] + (fn [result shape-id] + (let [parent-id (dm/get-in objects [shape-id :parent-id])] + (if (and (some? parent-id) (not= parent-id uuid/zero)) + (conj result parent-id) + (conj result shape-id)))) + (d/ordered-set)))] (rx/of (dws/select-shapes shapes-to-select)))))) ;; --- Change Page Order (D&D Ordering) @@ -1470,17 +1470,17 @@ no-bool-shapes? (->> all-selected (some (comp #{:frame :text} :type)))] - (if (and (some? shape) (not (contains? selected (:id shape)))) - (rx/concat - (rx/of (dws/select-shape (:id shape))) - (rx/of (show-shape-context-menu params))) - (rx/of (show-context-menu - (-> params - (assoc - :kind :shape - :disable-booleans? (or no-bool-shapes? not-group-like?) - :disable-flatten? no-bool-shapes? - :selected (conj selected (:id shape))))))))))) + (if (and (some? shape) (not (contains? selected (:id shape)))) + (rx/concat + (rx/of (dws/select-shape (:id shape))) + (rx/of (show-shape-context-menu params))) + (rx/of (show-context-menu + (-> params + (assoc + :kind :shape + :disable-booleans? (or no-bool-shapes? not-group-like?) + :disable-flatten? no-bool-shapes? + :selected (conj selected (:id shape))))))))))) (defn show-page-item-context-menu [{:keys [position page] :as params}] @@ -1488,8 +1488,8 @@ (ptk/reify ::show-page-item-context-menu ptk/WatchEvent (watch [_ _ _] - (rx/of (show-context-menu - (-> params (assoc :kind :page :selected (:id page)))))))) + (rx/of (show-context-menu + (-> params (assoc :kind :page :selected (:id page)))))))) (defn show-track-context-menu [{:keys [grid-id type index] :as params}] @@ -1902,7 +1902,7 @@ ;; - Align it to the limits on the x and y axis ;; - Respect the distance of the object to the right and bottom in the original frame (gpt/point paste-x paste-y))] - [frame-id frame-id delta (dec (count (:shapes selected-frame-obj )))])) + [frame-id frame-id delta (dec (count (:shapes selected-frame-obj)))])) (empty? page-selected) (let [frame-id (ctst/top-nested-frame page-objects position) @@ -1953,8 +1953,7 @@ (ptk/reify ::paste-shapes ptk/WatchEvent (watch [it state _] - (let [ - file-id (:current-file-id state) + (let [file-id (:current-file-id state) page (wsh/lookup-page state) media-idx (->> (:media pdata) @@ -2216,23 +2215,23 @@ ptk/WatchEvent (watch [it state _] - (let [data (get state :workspace-data) + (let [data (get state :workspace-data) - update-fn - (fn [component] + update-fn + (fn [component] ;; NOTE: we need to ensure the component exists, ;; because there are small possibilities of race ;; conditions with component deletion. - (when component - (if (nil? annotation) - (dissoc component :annotation) - (assoc component :annotation annotation)))) + (when component + (if (nil? annotation) + (dissoc component :annotation) + (assoc component :annotation annotation)))) - changes (-> (pcb/empty-changes it) - (pcb/with-library-data data) - (pcb/update-component id update-fn))] + changes (-> (pcb/empty-changes it) + (pcb/with-library-data data) + (pcb/update-component id update-fn))] - (rx/of (dch/commit-changes changes)))))) + (rx/of (dch/commit-changes changes)))))) (defn set-annotations-expanded [expanded?] diff --git a/frontend/src/app/main/data/workspace/collapse.cljs b/frontend/src/app/main/data/workspace/collapse.cljs index 07bd85838a..f805c238c8 100644 --- a/frontend/src/app/main/data/workspace/collapse.cljs +++ b/frontend/src/app/main/data/workspace/collapse.cljs @@ -19,12 +19,12 @@ (update [_ state] (let [expand-fn (fn [expanded] (merge expanded - (->> ids - (map #(cfh/get-parent-ids objects %)) - flatten - (remove #(= % uuid/zero)) - (map (fn [id] {id true})) - (into {}))))] + (->> ids + (map #(cfh/get-parent-ids objects %)) + flatten + (remove #(= % uuid/zero)) + (map (fn [id] {id true})) + (into {}))))] (update-in state [:workspace-local :expanded] expand-fn))))) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index a89467786e..61ec72a63a 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -332,9 +332,9 @@ (ptk/reify ::reorder-strokes ptk/WatchEvent (watch [_ _ _] - (rx/of (dch/update-shapes - ids - #(swap-attrs % :strokes index new-index)))))) + (rx/of (dch/update-shapes + ids + #(swap-attrs % :strokes index new-index)))))) (defn picker-for-selected-shape [] @@ -529,9 +529,9 @@ ptk/UpdateEvent (update [_ state] (update state :colorpicker - (fn [state] - (-> state - (assoc :type tab))))))) + (fn [state] + (-> state + (assoc :type tab))))))) (defn finalize-colorpicker [] @@ -622,10 +622,10 @@ ptk/UpdateEvent (update [_ state] (update state :colorpicker - (fn [state] - (-> state - (assoc :type :color) - (dissoc :editing-stop :stops :gradient))))))) + (fn [state] + (-> state + (assoc :type :color) + (dissoc :editing-stop :stops :gradient))))))) (defn activate-colorpicker-gradient [type] @@ -642,13 +642,13 @@ (d/dissoc-in [:current-color :image]) (cond-> (not (:stops state)) (assoc :editing-stop 0 - :stops [(-> color - (assoc :offset 0) - (materialize-color-components)) - (-> color - (assoc :alpha 0) - (assoc :offset 1) - (materialize-color-components))]))))))))) + :stops [(-> color + (assoc :offset 0) + (materialize-color-components)) + (-> color + (assoc :alpha 0) + (assoc :offset 1) + (materialize-color-components))]))))))))) (defn activate-colorpicker-image [] @@ -656,10 +656,10 @@ ptk/UpdateEvent (update [_ state] (update state :colorpicker - (fn [state] - (-> state - (assoc :type :image) - (dissoc :editing-stop :stops :gradient))))))) + (fn [state] + (-> state + (assoc :type :image) + (dissoc :editing-stop :stops :gradient))))))) (defn select-color [position add-color] @@ -671,13 +671,13 @@ shape (first shapes) fills (if (cfh/text-shape? shape) (:fills (dwt/current-text-values - {:editor-state (dm/get-in state [:workspace-editor-state (:id shape)]) - :shape shape - :attrs (conj dwt/text-fill-attrs :fills)})) + {:editor-state (dm/get-in state [:workspace-editor-state (:id shape)]) + :shape shape + :attrs (conj dwt/text-fill-attrs :fills)})) (:fills shape)) fill (first fills) single? (and (= 1 (count selected)) - (= 1 (count fills))) + (= 1 (count fills))) data (if single? (d/without-nils {:color (:fill-color fill) :opacity (:fill-opacity fill) @@ -685,13 +685,13 @@ {:color "#406280" :opacity 1})] (rx/of (md/show :colorpicker - {:x (:x position) - :y (:y position) - :on-accept add-color - :data data - :position :right}) - (ptk/event ::ev/event {::ev/name "add-asset-to-library" - :asset-type "color"})))))) + {:x (:x position) + :y (:y position) + :on-accept add-color + :data data + :position :right}) + (ptk/event ::ev/event {::ev/name "add-asset-to-library" + :asset-type "color"})))))) (defn get-active-color-tab [] diff --git a/frontend/src/app/main/data/workspace/comments.cljs b/frontend/src/app/main/data/workspace/comments.cljs index 0c4850a404..800647dad0 100644 --- a/frontend/src/app/main/data/workspace/comments.cljs +++ b/frontend/src/app/main/data/workspace/comments.cljs @@ -42,7 +42,7 @@ (rx/filter mse/mouse-click-event?) (rx/switch-map #(rx/take 1 ms/mouse-position)) (rx/with-latest-from ms/keyboard-space) - (rx/filter (fn [[_ space]] (not space)) ) + (rx/filter (fn [[_ space]] (not space))) (rx/map first) (rx/map handle-comment-layer-click) (rx/take-until stoper)) diff --git a/frontend/src/app/main/data/workspace/common.cljs b/frontend/src/app/main/data/workspace/common.cljs index 19c610c140..063c1e50ac 100644 --- a/frontend/src/app/main/data/workspace/common.cljs +++ b/frontend/src/app/main/data/workspace/common.cljs @@ -169,7 +169,7 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn toggle-toolbar-visibility - [] + [] (ptk/reify ::toggle-toolbar-visibility ptk/UpdateEvent (update [_ state] @@ -180,7 +180,7 @@ (ptk/reify ::hide-toolbar ptk/UpdateEvent (update [_ state] - (assoc-in state [:workspace-local :hide-toolbar] true)))) + (assoc-in state [:workspace-local :hide-toolbar] true)))) (defn show-toolbar [] diff --git a/frontend/src/app/main/data/workspace/drawing.cljs b/frontend/src/app/main/data/workspace/drawing.cljs index 0254cd2913..9a3793b10b 100644 --- a/frontend/src/app/main/data/workspace/drawing.cljs +++ b/frontend/src/app/main/data/workspace/drawing.cljs @@ -82,7 +82,7 @@ (rx/merge (rx/of (handle-drawing type)) (->> stream - (rx/filter (ptk/type? ::common/handle-finish-drawing) ) + (rx/filter (ptk/type? ::common/handle-finish-drawing)) (rx/take 1) (rx/map #(fn [state] (update state :workspace-drawing dissoc :lock))))))))))) diff --git a/frontend/src/app/main/data/workspace/fix_deleted_fonts.cljs b/frontend/src/app/main/data/workspace/fix_deleted_fonts.cljs index 06fb376214..31ec4176ef 100644 --- a/frontend/src/app/main/data/workspace/fix_deleted_fonts.cljs +++ b/frontend/src/app/main/data/workspace/fix_deleted_fonts.cljs @@ -25,8 +25,8 @@ [node] (let [fonts (deref fonts/fontsdb)] (and - (some? (:font-family node)) - (nil? (get fonts (:font-id node)))))) + (some? (:font-family node)) + (nil? (get fonts (:font-id node)))))) (defn calculate-alternative-font-id [value] @@ -66,9 +66,9 @@ (defn fix-deleted-font-component [component] (update component - :objects - (fn [objects] - (d/mapm #(fix-deleted-font-shape %2) objects)))) + :objects + (fn [objects] + (d/mapm #(fix-deleted-font-shape %2) objects)))) (defn fix-deleted-font-typography [typography] @@ -84,8 +84,8 @@ (let [objects (wsh/lookup-page-objects state) ids (into #{} - (comp (filter should-fix-deleted-font-shape?) (map :id)) - (vals objects)) + (comp (filter should-fix-deleted-font-shape?) (map :id)) + (vals objects)) components (->> (wsh/lookup-local-components state) (vals) @@ -93,11 +93,11 @@ component-changes (into [] - (map (fn [component] - {:type :mod-component - :id (:id component) - :objects (-> (fix-deleted-font-component component) :objects)})) - components) + (map (fn [component] + {:type :mod-component + :id (:id component) + :objects (-> (fix-deleted-font-component component) :objects)})) + components) typographies (->> (get-in state [:workspace-data :typographies]) (vals) @@ -105,25 +105,25 @@ typography-changes (into [] - (map (fn [typography] - {:type :mod-typography - :typography (fix-deleted-font-typography typography)})) - typographies)] + (map (fn [typography] + {:type :mod-typography + :typography (fix-deleted-font-typography typography)})) + typographies)] (rx/concat - (rx/of (dch/update-shapes ids #(fix-deleted-font-shape %) {:reg-objects? false - :save-undo? false - :ignore-tree true})) - (if (empty? component-changes) - (rx/empty) - (rx/of (dch/commit-changes {:origin it - :redo-changes component-changes - :undo-changes [] - :save-undo? false}))) + (rx/of (dch/update-shapes ids #(fix-deleted-font-shape %) {:reg-objects? false + :save-undo? false + :ignore-tree true})) + (if (empty? component-changes) + (rx/empty) + (rx/of (dch/commit-changes {:origin it + :redo-changes component-changes + :undo-changes [] + :save-undo? false}))) - (if (empty? typography-changes) - (rx/empty) - (rx/of (dch/commit-changes {:origin it - :redo-changes typography-changes - :undo-changes [] - :save-undo? false})))))))) + (if (empty? typography-changes) + (rx/empty) + (rx/of (dch/commit-changes {:origin it + :redo-changes typography-changes + :undo-changes [] + :save-undo? false})))))))) diff --git a/frontend/src/app/main/data/workspace/grid.cljs b/frontend/src/app/main/data/workspace/grid.cljs index d8e8b93db9..50a2351071 100644 --- a/frontend/src/app/main/data/workspace/grid.cljs +++ b/frontend/src/app/main/data/workspace/grid.cljs @@ -76,6 +76,6 @@ (watch [it state _] (let [page (wsh/lookup-page state)] (rx/of (dch/commit-changes - (-> (pcb/empty-changes it) - (pcb/with-page page) - (pcb/set-page-option [:saved-grids type] params)))))))) + (-> (pcb/empty-changes it) + (pcb/with-page page) + (pcb/set-page-option [:saved-grids type] params)))))))) diff --git a/frontend/src/app/main/data/workspace/grid_layout/shortcuts.cljs b/frontend/src/app/main/data/workspace/grid_layout/shortcuts.cljs index 078858fd72..8d76c38caa 100644 --- a/frontend/src/app/main/data/workspace/grid_layout/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/grid_layout/shortcuts.cljs @@ -64,8 +64,7 @@ :zoom-selected {:tooltip (ds/shift "2") :command "shift+2" - :fn #(st/emit! dw/zoom-to-selected-shape)} - }) + :fn #(st/emit! dw/zoom-to-selected-shape)}}) (defn get-tooltip [shortcut] (assert (contains? shortcuts shortcut) (str shortcut)) diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs index ff477d3207..a89d845cbd 100644 --- a/frontend/src/app/main/data/workspace/groups.cljs +++ b/frontend/src/app/main/data/workspace/groups.cljs @@ -55,7 +55,7 @@ (empty? (remove removed-id? (:shapes group)))) ;; Adds group to the remove and check its parent - (let [to-check (concat to-check [(cfh/get-parent-id objects current-id)]) ] + (let [to-check (concat to-check [(cfh/get-parent-id objects current-id)])] (recur (first to-check) (rest to-check) (conj removed-id? current-id) @@ -243,10 +243,10 @@ (when-not (empty? selected) (rx/of (dwu/start-undo-transaction undo-id) - (dch/commit-changes changes) - (ptk/data-event :layout/update parents) - (dwu/commit-undo-transaction undo-id) - (dws/select-shapes child-ids))))))) + (dch/commit-changes changes) + (ptk/data-event :layout/update parents) + (dwu/commit-undo-transaction undo-id) + (dws/select-shapes child-ids))))))) (def mask-group (ptk/reify ::mask-group diff --git a/frontend/src/app/main/data/workspace/interactions.cljs b/frontend/src/app/main/data/workspace/interactions.cljs index ab25849403..a8e2fe284a 100644 --- a/frontend/src/app/main/data/workspace/interactions.cljs +++ b/frontend/src/app/main/data/workspace/interactions.cljs @@ -41,9 +41,9 @@ :starting-frame starting-frame}] (rx/of (dch/commit-changes - (-> (pcb/empty-changes it) - (pcb/with-page page) - (pcb/update-page-option :flows ctp/add-flow new-flow)))))))) + (-> (pcb/empty-changes it) + (pcb/with-page page) + (pcb/update-page-option :flows ctp/add-flow new-flow)))))))) (defn add-flow-selected-frame [] @@ -61,9 +61,9 @@ (watch [it state _] (let [page (wsh/lookup-page state)] (rx/of (dch/commit-changes - (-> (pcb/empty-changes it) - (pcb/with-page page) - (pcb/update-page-option :flows ctp/remove-flow flow-id)))))))) + (-> (pcb/empty-changes it) + (pcb/with-page page) + (pcb/update-page-option :flows ctp/remove-flow flow-id)))))))) (defn rename-flow [flow-id name] @@ -72,12 +72,12 @@ (ptk/reify ::rename-flow ptk/WatchEvent (watch [it state _] - (let [page (wsh/lookup-page state) ] + (let [page (wsh/lookup-page state)] (rx/of (dch/commit-changes - (-> (pcb/empty-changes it) - (pcb/with-page page) - (pcb/update-page-option :flows ctp/update-flow flow-id - #(ctp/rename-flow % name))))))))) + (-> (pcb/empty-changes it) + (pcb/with-page page) + (pcb/update-page-option :flows ctp/update-flow flow-id + #(ctp/rename-flow % name))))))))) (defn start-rename-flow [id] @@ -120,16 +120,16 @@ :flows] []) flow (ctp/get-frame-flow flows (:id frame))] (rx/concat - (rx/of (dch/update-shapes [(:id shape)] - (fn [shape] - (let [new-interaction (-> ctsi/default-interaction - (ctsi/set-destination destination) - (assoc :position-relative-to (:id shape)))] - (update shape :interactions - ctsi/add-interaction new-interaction))))) - (when (and (not (connected-frame? objects (:id frame))) - (nil? flow)) - (rx/of (add-flow (:id frame)))))))))) + (rx/of (dch/update-shapes [(:id shape)] + (fn [shape] + (let [new-interaction (-> ctsi/default-interaction + (ctsi/set-destination destination) + (assoc :position-relative-to (:id shape)))] + (update shape :interactions + ctsi/add-interaction new-interaction))))) + (when (and (not (connected-frame? objects (:id frame))) + (nil? flow)) + (rx/of (add-flow (:id frame)))))))))) (defn remove-interaction [shape index] @@ -137,9 +137,9 @@ ptk/WatchEvent (watch [_ _ _] (rx/of (dch/update-shapes [(:id shape)] - (fn [shape] - (update shape :interactions - ctsi/remove-interaction index))))))) + (fn [shape] + (update shape :interactions + ctsi/remove-interaction index))))))) (defn update-interaction [shape index update-fn] @@ -147,9 +147,9 @@ ptk/WatchEvent (watch [_ _ _] (rx/of (dch/update-shapes [(:id shape)] - (fn [shape] - (update shape :interactions - ctsi/update-interaction index update-fn))))))) + (fn [shape] + (update shape :interactions + ctsi/update-interaction index update-fn))))))) (defn remove-all-interactions-nav-to "Remove all interactions that navigate to the given frame." @@ -189,14 +189,14 @@ (let [initial-pos @ms/mouse-position selected (wsh/lookup-selected state) stopper (->> stream - (rx/filter mse/mouse-event?) - (rx/filter mse/mouse-up-event?))] + (rx/filter mse/mouse-event?) + (rx/filter mse/mouse-up-event?))] (when (= 1 (count selected)) (rx/concat - (->> ms/mouse-position - (rx/take-until stopper) - (rx/map #(move-edit-interaction initial-pos %))) - (rx/of (finish-edit-interaction index initial-pos)))))))) + (->> ms/mouse-position + (rx/take-until stopper) + (rx/map #(move-edit-interaction initial-pos %))) + (rx/of (finish-edit-interaction index initial-pos)))))))) (defn- get-target-frame [state position] @@ -252,33 +252,33 @@ undo-id (js/Symbol)] (rx/of - (dwu/start-undo-transaction undo-id) + (dwu/start-undo-transaction undo-id) - (when (:hide-in-viewer target-frame) + (when (:hide-in-viewer target-frame) ; If the target frame is hidden, we need to unhide it so ; users can navigate to it. - (dch/update-shapes [(:id target-frame)] - #(dissoc % :hide-in-viewer))) + (dch/update-shapes [(:id target-frame)] + #(dissoc % :hide-in-viewer))) - (cond - (or (nil? shape) + (cond + (or (nil? shape) ;; Didn't changed the position for the interaction - (= position initial-pos) + (= position initial-pos) ;; New interaction but invalid target - (and (nil? index) (nil? target-frame))) - nil + (and (nil? index) (nil? target-frame))) + nil ;; Dropped interaction in an invalid target. We remove it - (and (some? index) (nil? target-frame)) - (remove-interaction shape index) + (and (some? index) (nil? target-frame)) + (remove-interaction shape index) - (nil? index) - (add-new-interaction shape (:id target-frame)) + (nil? index) + (add-new-interaction shape (:id target-frame)) - :else - (update-interaction shape index change-interaction)) + :else + (update-interaction shape index change-interaction)) - (dwu/commit-undo-transaction undo-id)))))) + (dwu/commit-undo-transaction undo-id)))))) ;; --- Overlays @@ -299,8 +299,8 @@ (let [initial-pos @ms/mouse-position selected (wsh/lookup-selected state) stopper (->> stream - (rx/filter mse/mouse-event?) - (rx/filter mse/mouse-up-event?))] + (rx/filter mse/mouse-event?) + (rx/filter mse/mouse-up-event?))] (when (= 1 (count selected)) (let [page-id (:current-page-id state) objects (wsh/lookup-page-objects state page-id) @@ -317,10 +317,10 @@ (gpt/subtract overlay-pos) (gpt/subtract frame-pos))] (rx/concat - (->> ms/mouse-position - (rx/take-until stopper) - (rx/map #(move-overlay-pos % frame-pos offset))) - (rx/of (finish-move-overlay-pos index frame-pos offset))))))))) + (->> ms/mouse-position + (rx/take-until stopper) + (rx/map #(move-overlay-pos % frame-pos offset))) + (rx/of (finish-move-overlay-pos index frame-pos offset))))))))) (defn move-overlay-pos [pos frame-pos offset] @@ -333,33 +333,33 @@ (assoc-in state [:workspace-local :move-overlay-to] pos))))) (defn finish-move-overlay-pos - [index frame-pos offset] - (ptk/reify ::finish-move-overlay-pos + [index frame-pos offset] + (ptk/reify ::finish-move-overlay-pos ptk/UpdateEvent (update [_ state] (-> state (d/dissoc-in [:workspace-local :move-overlay-to]) (d/dissoc-in [:workspace-local :move-overlay-index]))) - ptk/WatchEvent - (watch [_ state _] - (let [pos @ms/mouse-position - overlay-pos (-> pos - (gpt/subtract frame-pos) - (gpt/subtract offset)) + ptk/WatchEvent + (watch [_ state _] + (let [pos @ms/mouse-position + overlay-pos (-> pos + (gpt/subtract frame-pos) + (gpt/subtract offset)) - page-id (:current-page-id state) - objects (wsh/lookup-page-objects state page-id) - shape (->> state - wsh/lookup-selected - first - (get objects)) + page-id (:current-page-id state) + objects (wsh/lookup-page-objects state page-id) + shape (->> state + wsh/lookup-selected + first + (get objects)) - interactions (:interactions shape) + interactions (:interactions shape) - new-interactions - (update interactions index - #(ctsi/set-overlay-position % overlay-pos))] + new-interactions + (update interactions index + #(ctsi/set-overlay-position % overlay-pos))] - (rx/of (dch/update-shapes [(:id shape)] #(merge % {:interactions new-interactions}))))))) + (rx/of (dch/update-shapes [(:id shape)] #(merge % {:interactions new-interactions}))))))) diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 9d11f48e72..99a078fbb6 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -580,11 +580,11 @@ (ptk/reify ::detach-components ptk/WatchEvent (watch [_ _ _] - (let [undo-id (js/Symbol)] - (rx/concat - (rx/of (dwu/start-undo-transaction undo-id)) - (rx/map #(detach-component %) (rx/from ids)) - (rx/of (dwu/commit-undo-transaction undo-id))))))) + (let [undo-id (js/Symbol)] + (rx/concat + (rx/of (dwu/start-undo-transaction undo-id)) + (rx/map #(detach-component %) (rx/from ids)) + (rx/of (dwu/commit-undo-transaction undo-id))))))) (def detach-selected-components (ptk/reify ::detach-selected-components @@ -797,12 +797,12 @@ (watch [_ state _] (let [current-file-id (:current-file-id state) undo-id (js/Symbol)] - (rx/of - (dwu/start-undo-transaction undo-id) - (sync-file current-file-id file-id :components component-id undo-group) - (when (not= current-file-id file-id) - (sync-file file-id file-id :components component-id undo-group)) - (dwu/commit-undo-transaction undo-id))))))) + (rx/of + (dwu/start-undo-transaction undo-id) + (sync-file current-file-id file-id :components component-id undo-group) + (when (not= current-file-id file-id) + (sync-file file-id file-id :components component-id undo-group)) + (dwu/commit-undo-transaction undo-id))))))) (defn update-component-thumbnail "Update the thumbnail of the component with the given id, in the @@ -813,10 +813,10 @@ (watch [_ state _] (rx/of (update-component-thumbnail-sync state component-id file-id "component")) #_(let [data (get state :workspace-data) - component (ctkl/get-component data component-id) - page-id (:main-instance-page component) - root-id (:main-instance-id component)] - (rx/of (dwt/request-thumbnail file-id page-id root-id "component")))))) + component (ctkl/get-component data component-id) + page-id (:main-instance-page component) + root-id (:main-instance-id component)] + (rx/of (dwt/request-thumbnail file-id page-id root-id "component")))))) (defn- find-shape-index [objects id shape-id] @@ -965,15 +965,15 @@ find-frames (fn [change] - (->> (ch/frames-changed file change) - (map #(assoc %1 :page-id (:page-id change))))) + (->> (ch/frames-changed file change) + (map #(assoc %1 :page-id (:page-id change))))) updated-frames (->> changes - :redo-changes - (mapcat find-frames) - distinct)] + :redo-changes + (mapcat find-frames) + distinct)] (log/debug :msg "SYNC-FILE finished" :js/rchanges (log-changes (:redo-changes changes) diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index f9854062fe..937079b2bd 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -976,11 +976,11 @@ [_ new-shapes _] (ctst/clone-shape component-shape - (:id parent-shape) - (get component-page :objects) - :update-new-shape update-new-shape - :update-original-shape update-original-shape - :dest-objects (get container :objects)) + (:id parent-shape) + (get component-page :objects) + :update-new-shape update-new-shape + :update-original-shape update-original-shape + :dest-objects (get container :objects)) add-obj-change (fn [changes shape'] (update changes :redo-changes conj diff --git a/frontend/src/app/main/data/workspace/media.cljs b/frontend/src/app/main/data/workspace/media.cljs index 5369e376ac..12a50de5ad 100644 --- a/frontend/src/app/main/data/workspace/media.cljs +++ b/frontend/src/app/main/data/workspace/media.cljs @@ -97,7 +97,7 @@ (rx/map #(svg/add-svg-shapes (assoc svg-data :image-data %) position)))))) (defn- process-uris - [{:keys [file-id local? name uris mtype on-image on-svg] }] + [{:keys [file-id local? name uris mtype on-image on-svg]}] (letfn [(svg-url? [url] (or (and mtype (= mtype "image/svg+xml")) (str/ends-with? url ".svg"))) @@ -211,28 +211,28 @@ (defn- process-media-objects [{:keys [uris on-error] :as params}] (dm/assert! - (and (sm/check! schema:process-media-objects params) - (or (contains? params :blobs) - (contains? params :uris)))) + (and (sm/check! schema:process-media-objects params) + (or (contains? params :blobs) + (contains? params :uris)))) (ptk/reify ::process-media-objects ptk/WatchEvent (watch [_ _ _] (rx/concat - (rx/of (msg/show {:content (tr "media.loading") - :type :info - :timeout nil - :tag :media-loading})) - (->> (if (seq uris) + (rx/of (msg/show {:content (tr "media.loading") + :type :info + :timeout nil + :tag :media-loading})) + (->> (if (seq uris) ;; Media objects is a list of URL's pointing to the path - (process-uris params) + (process-uris params) ;; Media objects are blob of data to be upload - (process-blobs params)) + (process-blobs params)) ;; Every stream has its own sideeffect. We need to ignore the result - (rx/ignore) - (rx/catch #(handle-media-error % on-error)) - (rx/finalize #(st/emit! (msg/hide-tag :media-loading)))))))) + (rx/ignore) + (rx/catch #(handle-media-error % on-error)) + (rx/finalize #(st/emit! (msg/hide-tag :media-loading)))))))) ;; Deprecated in components-v2 (defn upload-media-asset @@ -256,8 +256,8 @@ (defn upload-fill-image [file on-success] (dm/assert! - "expected a valid blob for `file` param" - (dmm/blob? file)) + "expected a valid blob for `file` param" + (dmm/blob? file)) (ptk/reify ::upload-fill-image ptk/WatchEvent (watch [_ state _] @@ -293,9 +293,9 @@ (rx/map #(vector (:name media-obj) %)) (rx/merge-map svg->clj) (rx/catch ; When error downloading media-obj, skip it and continue with next one - #(log/error :msg (str "Error downloading " (:name media-obj) " from " path) - :hint (ex-message %) - :error %))))) + #(log/error :msg (str "Error downloading " (:name media-obj) " from " path) + :hint (ex-message %) + :error %))))) (defn create-shapes-svg "Convert svg elements into penpot shapes." diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs index dcdd9c4fa4..d27b980f6d 100644 --- a/frontend/src/app/main/data/workspace/modifiers.cljs +++ b/frontend/src/app/main/data/workspace/modifiers.cljs @@ -275,11 +275,11 @@ (update-in [target-frame-id :modifiers] ctm/change-property :layout-item-v-sizing :fix))))) (defn modif->js - [modif-tree objects] - (clj->js (into {} - (map (fn [[k v]] - [(get-in objects [k :name]) v])) - modif-tree))) + [modif-tree objects] + (clj->js (into {} + (map (fn [[k v]] + [(get-in objects [k :name]) v])) + modif-tree))) (defn apply-text-modifier [shape {:keys [width height]}] @@ -301,19 +301,19 @@ (d/update-when result id apply-text-modifier text-modifier)))))) #_(defn apply-path-modifiers - [objects path-modifiers] - (letfn [(apply-path-modifier - [shape {:keys [content-modifiers]}] - (let [shape (update shape :content upc/apply-content-modifiers content-modifiers) - [points selrect] (helpers/content->points+selrect shape (:content shape))] - (assoc shape :selrect selrect :points points)))] - (loop [modifiers (seq path-modifiers) - result objects] - (if (empty? modifiers) - result - (let [[id path-modifier] (first modifiers)] - (recur (rest modifiers) - (update objects id apply-path-modifier path-modifier))))))) + [objects path-modifiers] + (letfn [(apply-path-modifier + [shape {:keys [content-modifiers]}] + (let [shape (update shape :content upc/apply-content-modifiers content-modifiers) + [points selrect] (helpers/content->points+selrect shape (:content shape))] + (assoc shape :selrect selrect :points points)))] + (loop [modifiers (seq path-modifiers) + result objects] + (if (empty? modifiers) + result + (let [[id path-modifier] (first modifiers)] + (recur (rest modifiers) + (update objects id apply-path-modifier path-modifier))))))) (defn- calculate-modifiers ([state modif-tree] @@ -544,8 +544,7 @@ :layout-item-margin-type :layout-grid-cells :layout-grid-columns - :layout-grid-rows - ]}) + :layout-grid-rows]}) ;; We've applied the text-modifier so we can dissoc the temporary data (fn [state] (update state :workspace-text-modifier #(apply dissoc % ids))) diff --git a/frontend/src/app/main/data/workspace/path/helpers.cljs b/frontend/src/app/main/data/workspace/path/helpers.cljs index feb898abbc..de955f0f15 100644 --- a/frontend/src/app/main/data/workspace/path/helpers.cljs +++ b/frontend/src/app/main/data/workspace/path/helpers.cljs @@ -131,7 +131,7 @@ (let [;; To match the angle, the angle should be matching (angle between points 180deg) angle-handlers (angle-points node handler opposite) - match-angle? (and match-angle? (<= (mth/abs (- 180 angle-handlers) ) 0.1)) + match-angle? (and match-angle? (<= (mth/abs (- 180 angle-handlers)) 0.1)) ;; To match distance the distance should be matching match-distance? (and match-distance? (mth/almost-zero? (- (gpt/distance node handler) diff --git a/frontend/src/app/main/data/workspace/path/streams.cljs b/frontend/src/app/main/data/workspace/path/streams.cljs index 3c429d666b..0bc1ad208d 100644 --- a/frontend/src/app/main/data/workspace/path/streams.cljs +++ b/frontend/src/app/main/data/workspace/path/streams.cljs @@ -53,11 +53,11 @@ start (-> @ms/mouse-position to-pixel-snap) stoper (rx/merge - (->> st/stream - (rx/filter mse/mouse-event?) - (rx/filter mse/mouse-up-event?)) - (->> st/stream - (rx/filter finish-edition?))) + (->> st/stream + (rx/filter mse/mouse-event?) + (rx/filter mse/mouse-up-event?)) + (->> st/stream + (rx/filter finish-edition?))) position-stream (->> ms/mouse-position diff --git a/frontend/src/app/main/data/workspace/persistence.cljs b/frontend/src/app/main/data/workspace/persistence.cljs index dd056da35a..b506c13bc5 100644 --- a/frontend/src/app/main/data/workspace/persistence.cljs +++ b/frontend/src/app/main/data/workspace/persistence.cljs @@ -145,8 +145,7 @@ :revn file-revn :session-id sid :changes-with-metadata (into [] changes) - :features features - }] + :features features}] (->> (rp/cmd! :update-file params) (rx/mapcat (fn [lagged] diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index b6828a1941..5ee865400f 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/frontend/src/app/main/data/workspace/selection.cljs @@ -368,7 +368,7 @@ (-> (pcb/empty-changes it) (pcb/with-page page) (pcb/with-objects all-objects))] - (prepare-duplicate-changes all-objects page ids delta it libraries library-data file-id init-changes))) + (prepare-duplicate-changes all-objects page ids delta it libraries library-data file-id init-changes))) ([all-objects page ids delta it libraries library-data file-id init-changes] (let [shapes (map (d/getf all-objects) ids) @@ -495,7 +495,7 @@ (not duplicating-component?) (ctk/detach-shape)) - ; We want the first added object to touch it's parent, but not subsequent children + ;; We want the first added object to touch it's parent, but not subsequent children changes (-> (pcb/add-object changes new-obj {:ignore-touched (and duplicating-component? child?)}) (pcb/amend-last-change #(assoc % :old-id (:id obj))) (cond-> (ctl/grid-layout? objects (:parent-id obj)) @@ -506,7 +506,7 @@ (and is-component-root? is-component-main?) (regenerate-component new-obj)) - ; This is needed for the recursive call to find the new object as parent + ;; This is needed for the recursive call to find the new object as parent page' (ctst/add-shape (:id new-obj) new-obj {:objects objects} @@ -545,15 +545,15 @@ (if-not (empty? frames-with-flow) (let [update-flows (fn [flows] (reduce - (fn [flows frame] - (let [name (cfh/generate-unique-name @unames "Flow 1") - _ (vswap! unames conj name) - new-flow {:id (uuid/next) - :name name - :starting-frame (get ids-map (:id frame))}] - (ctp/add-flow flows new-flow))) - flows - frames-with-flow))] + (fn [flows frame] + (let [name (cfh/generate-unique-name @unames "Flow 1") + _ (vswap! unames conj name) + new-flow {:id (uuid/next) + :name name + :starting-frame (get ids-map (:id frame))}] + (ctp/add-flow flows new-flow))) + flows + frames-with-flow))] (pcb/update-page-option changes :flows update-flows)) changes))) @@ -611,9 +611,9 @@ objects-indices (->> index-map (d/mapm fix-indices) (vals) (reduce merge))] (pcb/amend-changes - changes - (fn [change] - (assoc change :index (get objects-indices (:old-id change))))))) + changes + (fn [change] + (assoc change :index (get objects-indices (:old-id change))))))) (defn clear-memorize-duplicated [] @@ -671,52 +671,52 @@ ([move-delta?] (duplicate-selected move-delta? false)) ([move-delta? alt-duplication?] - (ptk/reify ::duplicate-selected - ptk/WatchEvent - (watch [it state _] - (when (or (not move-delta?) (nil? (get-in state [:workspace-local :transform]))) - (let [page (wsh/lookup-page state) - objects (:objects page) - selected (->> (wsh/lookup-selected state) - (map #(get objects %)) - (remove #(ctk/in-component-copy-not-root? %)) ;; We don't want to change the structure of component copies - (map :id) - set)] - (when (seq selected) - (let [obj (get objects (first selected)) - delta (if move-delta? - (calc-duplicate-delta obj state objects) - (gpt/point 0 0)) + (ptk/reify ::duplicate-selected + ptk/WatchEvent + (watch [it state _] + (when (or (not move-delta?) (nil? (get-in state [:workspace-local :transform]))) + (let [page (wsh/lookup-page state) + objects (:objects page) + selected (->> (wsh/lookup-selected state) + (map #(get objects %)) + (remove #(ctk/in-component-copy-not-root? %)) ;; We don't want to change the structure of component copies + (map :id) + set)] + (when (seq selected) + (let [obj (get objects (first selected)) + delta (if move-delta? + (calc-duplicate-delta obj state objects) + (gpt/point 0 0)) - file-id (:current-file-id state) - libraries (wsh/get-libraries state) - library-data (wsh/get-file state file-id) + file-id (:current-file-id state) + libraries (wsh/get-libraries state) + library-data (wsh/get-file state file-id) - changes (->> (prepare-duplicate-changes objects page selected delta it libraries library-data file-id) - (duplicate-changes-update-indices objects selected)) + changes (->> (prepare-duplicate-changes objects page selected delta it libraries library-data file-id) + (duplicate-changes-update-indices objects selected)) - tags (or (:tags changes) #{}) + tags (or (:tags changes) #{}) - changes (cond-> changes alt-duplication? (assoc :tags (conj tags :alt-duplication))) + changes (cond-> changes alt-duplication? (assoc :tags (conj tags :alt-duplication))) - id-original (first selected) + id-original (first selected) - new-selected (->> changes - :redo-changes - (filter #(= (:type %) :add-obj)) - (filter #(selected (:old-id %))) - (map #(get-in % [:obj :id])) - (into (d/ordered-set))) + new-selected (->> changes + :redo-changes + (filter #(= (:type %) :add-obj)) + (filter #(selected (:old-id %))) + (map #(get-in % [:obj :id])) + (into (d/ordered-set))) - id-duplicated (first new-selected) + id-duplicated (first new-selected) - frames (into #{} - (map #(get-in objects [% :frame-id])) - selected) - undo-id (js/Symbol)] + frames (into #{} + (map #(get-in objects [% :frame-id])) + selected) + undo-id (js/Symbol)] - ;; Warning: This order is important for the focus mode. - (rx/of + ;; Warning: This order is important for the focus mode. + (rx/of (dwu/start-undo-transaction undo-id) (dch/commit-changes changes) (select-shapes new-selected) diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index e2d5b6b90c..81689f6b29 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/shortcuts.cljs @@ -255,7 +255,7 @@ :command "t" :subsections [:tools] :fn #(emit-when-no-readonly dwtxt/start-edit-if-selected - (dwd/select-for-drawing :text))} + (dwd/select-for-drawing :text))} :draw-path {:tooltip "P" :command "p" @@ -399,7 +399,7 @@ :command (ds/c-mod "shift+e") :subsections [:basics :main-menu] :fn #(st/emit! - (de/show-workspace-export-dialog))} + (de/show-workspace-export-dialog))} :toggle-snap-guide {:tooltip (ds/meta-shift "G") :command (ds/c-mod "shift+g") @@ -432,15 +432,15 @@ :command (ds/a-mod "p") :subsections [:panels] :fn #(do (r/set-resize-type! :bottom) - (emit-when-no-readonly (dw/remove-layout-flag :textpalette) - (toggle-layout-flag :colorpalette)))} + (emit-when-no-readonly (dw/remove-layout-flag :textpalette) + (toggle-layout-flag :colorpalette)))} :toggle-textpalette {:tooltip (ds/alt "T") :command (ds/a-mod "t") :subsections [:panels] :fn #(do (r/set-resize-type! :bottom) - (emit-when-no-readonly (dw/remove-layout-flag :colorpalette) - (toggle-layout-flag :textpalette)))} + (emit-when-no-readonly (dw/remove-layout-flag :colorpalette) + (toggle-layout-flag :textpalette)))} :hide-ui {:tooltip "\\" :command "\\" diff --git a/frontend/src/app/main/data/workspace/specialized_panel.cljs b/frontend/src/app/main/data/workspace/specialized_panel.cljs index 41f25f14f8..eb4ec08f58 100644 --- a/frontend/src/app/main/data/workspace/specialized_panel.cljs +++ b/frontend/src/app/main/data/workspace/specialized_panel.cljs @@ -24,18 +24,18 @@ (defn open-specialized-panel [type] - (ptk/reify ::open-specialized-panel - ptk/UpdateEvent - (update [_ state] - (let [page-id (:current-page-id state) - objects (wsh/lookup-page-objects state page-id) - selected-ids (wsh/lookup-selected state) - selected-shapes (map (d/getf objects) selected-ids)] - (assoc state :specialized-panel {:type type :shapes selected-shapes}))) - ptk/WatchEvent - (watch [_ _ stream] - (->> (rx/merge - (rx/filter interrupt? stream) - (rx/filter (ptk/type? ::dwc/undo) stream)) - (rx/take 1) - (rx/map clear-specialized-panel))))) + (ptk/reify ::open-specialized-panel + ptk/UpdateEvent + (update [_ state] + (let [page-id (:current-page-id state) + objects (wsh/lookup-page-objects state page-id) + selected-ids (wsh/lookup-selected state) + selected-shapes (map (d/getf objects) selected-ids)] + (assoc state :specialized-panel {:type type :shapes selected-shapes}))) + ptk/WatchEvent + (watch [_ _ stream] + (->> (rx/merge + (rx/filter interrupt? stream) + (rx/filter (ptk/type? ::dwc/undo) stream)) + (rx/take 1) + (rx/map clear-specialized-panel))))) diff --git a/frontend/src/app/main/data/workspace/text/shortcuts.cljs b/frontend/src/app/main/data/workspace/text/shortcuts.cljs index e60807eda1..cd280aba2e 100644 --- a/frontend/src/app/main/data/workspace/text/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/text/shortcuts.cljs @@ -76,11 +76,11 @@ (or (= variant-id "remove-bold") (= variant-id "toggle-bold"))) add-italic? (and (not italic?) - (or (= variant-id "add-italic") - (= variant-id "toggle-italic"))) + (or (= variant-id "add-italic") + (= variant-id "toggle-italic"))) remove-italic? (and italic? - (or (= variant-id "remove-italic") - (= variant-id "toggle-italic")))] + (or (= variant-id "remove-italic") + (= variant-id "toggle-italic")))] (cond (and add-bold? italic?) ;; it is italic, set it to bold+italic (choose-bold-italic) @@ -127,8 +127,7 @@ :attrs dwt/text-attrs})))) (defn- update-attrs [shape props] - (let [ - text-values (calculate-text-values shape) + (let [text-values (calculate-text-values shape) font-size (d/parse-double (:font-size text-values)) line-height (d/parse-double (:line-height text-values)) letter-spacing (d/parse-double (:letter-spacing text-values)) @@ -166,8 +165,7 @@ all-underline? (every? #(= (:text-decoration %) "underline") text-values) all-line-through? (every? #(= (:text-decoration %) "line-through") text-values) all-bold? (every? #(is-bold? (:font-variant-id %)) text-values) - all-italic? (every? #(is-italic? (:font-variant-id %)) text-values) - ] + all-italic? (every? #(is-italic? (:font-variant-id %)) text-values)] (cond (= (:text-decoration props) "toggle-underline") (if all-underline? @@ -197,9 +195,9 @@ (blend-props text-shapes props) props)] (when (and (not read-only?) text-shapes) - (st/emit! (dwu/start-undo-transaction undo-id)) - (run! #(update-attrs % props) text-shapes) - (st/emit! (dwu/commit-undo-transaction undo-id))))) + (st/emit! (dwu/start-undo-transaction undo-id)) + (run! #(update-attrs % props) text-shapes) + (st/emit! (dwu/commit-undo-transaction undo-id))))) (def shortcuts {:text-align-left {:tooltip (ds/meta (ds/alt "L")) diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 7673101300..c741a4e62b 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -339,8 +339,7 @@ (and (d/not-empty? color-attrs) (nil? (:fills node))) (-> (dissoc :fill-color :fill-opacity :fill-color-ref-id :fill-color-ref-file :fill-color-gradient) - (assoc :fills [color-attrs]))) - )) + (assoc :fills [color-attrs]))))) (defn migrate-content [content] diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 16904a1eee..52cdaf53e6 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -45,13 +45,13 @@ ;; for example, right will only grow in the x coordinate and left ;; will grow in the inverse of the x coordinate (def ^:private handler-multipliers - {:right [ 1 0] - :bottom [ 0 1] + {:right [1 0] + :bottom [0 1] :left [-1 0] - :top [ 0 -1] - :top-right [ 1 -1] + :top [0 -1] + :top-right [1 -1] :top-left [-1 -1] - :bottom-right [ 1 1] + :bottom-right [1 1] :bottom-left [-1 1]}) (defn- handler-resize-origin diff --git a/frontend/src/app/main/data/workspace/undo.cljs b/frontend/src/app/main/data/workspace/undo.cljs index 3c6036c8f0..809c9f6a52 100644 --- a/frontend/src/app/main/data/workspace/undo.cljs +++ b/frontend/src/app/main/data/workspace/undo.cljs @@ -64,13 +64,13 @@ items (conj-undo-entry items entry)] (-> state (update :workspace-undo assoc :items items - :index (min (inc index) - (dec MAX-UNDO-SIZE))))) + :index (min (inc index) + (dec MAX-UNDO-SIZE))))) state)) (defn- stack-undo-entry [state {:keys [undo-changes redo-changes] :as entry}] - (let [index (get-in state [:workspace-undo :index] -1)] + (let [index (get-in state [:workspace-undo :index] -1)] (if (>= index 0) (update-in state [:workspace-undo :items index] (fn [item] @@ -86,7 +86,7 @@ (update-in [:workspace-undo :transaction :redo-changes] #(into % redo-changes)) (cond-> (nil? (get-in state [:workspace-undo :transaction :undo-group])) - (assoc-in [:workspace-undo :transaction :undo-group] undo-group)) + (assoc-in [:workspace-undo :transaction :undo-group] undo-group)) (assoc-in [:workspace-undo :transaction :tags] tags))) (defn append-undo @@ -101,18 +101,18 @@ (ptk/reify ::append-undo ptk/UpdateEvent (update [_ state] - (cond - (and (get-in state [:workspace-undo :transaction]) - (or (not stack?) - (d/not-empty? (get-in state [:workspace-undo :transaction :undo-changes])) - (d/not-empty? (get-in state [:workspace-undo :transaction :redo-changes])))) - (accumulate-undo-entry state entry) + (cond + (and (get-in state [:workspace-undo :transaction]) + (or (not stack?) + (d/not-empty? (get-in state [:workspace-undo :transaction :undo-changes])) + (d/not-empty? (get-in state [:workspace-undo :transaction :redo-changes])))) + (accumulate-undo-entry state entry) - stack? - (stack-undo-entry state entry) + stack? + (stack-undo-entry state entry) - :else - (add-undo-entry state entry))))) + :else + (add-undo-entry state entry))))) (def empty-tx {:undo-changes [] :redo-changes []}) diff --git a/frontend/src/app/main/fonts.cljs b/frontend/src/app/main/fonts.cljs index 889f1c7f7f..b6c8b2bf1c 100644 --- a/frontend/src/app/main/fonts.cljs +++ b/frontend/src/app/main/fonts.cljs @@ -196,40 +196,40 @@ (if-not (exists? js/window) ;; If we are in the worker environment, we just mark it as loaded ;; without really loading it. - (do - (swap! loaded-hints conj {:font-id font-id :font-variant-id variant-id}) - (p/resolved font-id)) + (do + (swap! loaded-hints conj {:font-id font-id :font-variant-id variant-id}) + (p/resolved font-id)) - (let [font (get @fontsdb font-id)] - (cond - (nil? font) - (p/resolved font-id) + (let [font (get @fontsdb font-id)] + (cond + (nil? font) + (p/resolved font-id) ;; Font already loaded, we just continue - (contains? @loaded font-id) - (p/resolved font-id) + (contains? @loaded font-id) + (p/resolved font-id) ;; Font is currently downloading. We attach the caller to the promise - (contains? @loading font-id) - (p/resolved (get @loading font-id)) + (contains? @loading font-id) + (p/resolved (get @loading font-id)) ;; First caller, we create the promise and then wait - :else - (let [on-load (fn [resolve] - (swap! loaded conj font-id) - (swap! loading dissoc font-id) - (resolve font-id)) + :else + (let [on-load (fn [resolve] + (swap! loaded conj font-id) + (swap! loading dissoc font-id) + (resolve font-id)) - load-p (->> (p/create - (fn [resolve _] - (-> font - (assoc ::on-loaded (partial on-load resolve)) - (load-font)))) + load-p (->> (p/create + (fn [resolve _] + (-> font + (assoc ::on-loaded (partial on-load resolve)) + (load-font)))) ;; We need to wait for the font to be loaded - (p/delay 120))] + (p/delay 120))] - (swap! loading assoc font-id load-p) - load-p)))))) + (swap! loading assoc font-id load-p) + load-p)))))) (defn ready [cb] @@ -253,22 +253,22 @@ [node] (let [nodes (.from js/Array (dom/query-all node "[style*=font]")) result (.reduce nodes (fn [obj node] - (let [style (.-style node) - font-family (.-fontFamily style) - [_ font] (first - (filter (fn [[_ {:keys [id family]}]] - (or (= family font-family) - (= id font-family))) - @fontsdb)) - font-id (:id font) - font-variant (get-variant font (.-fontVariant style)) - font-variant-id (:id font-variant)] - (obj/set! - obj - (dm/str font-id ":" font-variant-id) - {:font-id font-id - :font-variant-id font-variant-id}))) - #js {})] + (let [style (.-style node) + font-family (.-fontFamily style) + [_ font] (first + (filter (fn [[_ {:keys [id family]}]] + (or (= family font-family) + (= id font-family))) + @fontsdb)) + font-id (:id font) + font-variant (get-variant font (.-fontVariant style)) + font-variant-id (:id font-variant)] + (obj/set! + obj + (dm/str font-id ":" font-variant-id) + {:font-id font-id + :font-variant-id font-variant-id}))) + #js {})] (.values js/Object result))) (defn get-content-fonts diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index c6bf57e9ab..0e3e95429c 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -339,53 +339,53 @@ {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} [{:keys [objects root-shape show-grids? zoom] :or {zoom 1} :as props}] (when root-shape - (let [root-shape-id (:id root-shape) - include-metadata (mf/use-ctx export/include-metadata-ctx) + (let [root-shape-id (:id root-shape) + include-metadata (mf/use-ctx export/include-metadata-ctx) - vector - (mf/use-memo - (mf/deps (:x root-shape) (:y root-shape)) - (fn [] - (-> (gpt/point (:x root-shape) (:y root-shape)) - (gpt/negate)))) + vector + (mf/use-memo + (mf/deps (:x root-shape) (:y root-shape)) + (fn [] + (-> (gpt/point (:x root-shape) (:y root-shape)) + (gpt/negate)))) - objects - (mf/use-memo - (mf/deps vector objects root-shape-id) - (fn [] - (let [children-ids (cons root-shape-id (cfh/get-children-ids objects root-shape-id)) - update-fn #(update %1 %2 gsh/transform-shape (ctm/move-modifiers vector))] - (reduce update-fn objects children-ids)))) + objects + (mf/use-memo + (mf/deps vector objects root-shape-id) + (fn [] + (let [children-ids (cons root-shape-id (cfh/get-children-ids objects root-shape-id)) + update-fn #(update %1 %2 gsh/transform-shape (ctm/move-modifiers vector))] + (reduce update-fn objects children-ids)))) - root-shape' (get objects root-shape-id) - width (* (:width root-shape') zoom) - height (* (:height root-shape') zoom) - vbox (format-viewbox {:width (:width root-shape' 0) - :height (:height root-shape' 0)}) - root-shape-wrapper - (mf/use-memo - (mf/deps objects root-shape') - (fn [] - (case (:type root-shape') - :group (group-wrapper-factory objects) - :frame (frame-wrapper-factory objects))))] + root-shape' (get objects root-shape-id) + width (* (:width root-shape') zoom) + height (* (:height root-shape') zoom) + vbox (format-viewbox {:width (:width root-shape' 0) + :height (:height root-shape' 0)}) + root-shape-wrapper + (mf/use-memo + (mf/deps objects root-shape') + (fn [] + (case (:type root-shape') + :group (group-wrapper-factory objects) + :frame (frame-wrapper-factory objects))))] - [:svg {:view-box vbox - :width (ust/format-precision width viewbox-decimal-precision) - :height (ust/format-precision height viewbox-decimal-precision) - :version "1.1" - :xmlns "http://www.w3.org/2000/svg" - :xmlnsXlink "http://www.w3.org/1999/xlink" - :xmlns:penpot (when include-metadata "https://penpot.app/xmlns") - :fill "none"} + [:svg {:view-box vbox + :width (ust/format-precision width viewbox-decimal-precision) + :height (ust/format-precision height viewbox-decimal-precision) + :version "1.1" + :xmlns "http://www.w3.org/2000/svg" + :xmlnsXlink "http://www.w3.org/1999/xlink" + :xmlns:penpot (when include-metadata "https://penpot.app/xmlns") + :fill "none"} - [:* - [:> shape-container {:shape root-shape'} - [:& (mf/provider muc/is-component?) {:value true} - [:& root-shape-wrapper {:shape root-shape' :view-box vbox}]]] + [:* + [:> shape-container {:shape root-shape'} + [:& (mf/provider muc/is-component?) {:value true} + [:& root-shape-wrapper {:shape root-shape' :view-box vbox}]]] - (when show-grids? - [:& empty-grids {:root-shape-id root-shape-id :objects objects}])]]))) + (when show-grids? + [:& empty-grids {:root-shape-id root-shape-id :objects objects}])]]))) (mf/defc component-svg-thumbnail {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} diff --git a/frontend/src/app/main/repo.cljs b/frontend/src/app/main/repo.cljs index a38298143b..56a49dd586 100644 --- a/frontend/src/app/main/repo.cljs +++ b/frontend/src/app/main/repo.cljs @@ -66,8 +66,7 @@ :form-data? true} :export-binfile {:response-type :blob} - :retrieve-list-of-builtin-templates {:query-params :all} - }) + :retrieve-list-of-builtin-templates {:query-params :all}}) (defn- send! "A simple helper for a common case of sending and receiving transit diff --git a/frontend/src/app/main/snap.cljs b/frontend/src/app/main/snap.cljs index 1b7cf7c9e0..3cd6b7dc6c 100644 --- a/frontend/src/app/main/snap.cljs +++ b/frontend/src/app/main/snap.cljs @@ -181,7 +181,7 @@ range-tree (- cd snap-distance-accuracy) (+ cd snap-distance-accuracy)) - (map #(- (first %) cd )))))))) + (map #(- (first %) cd)))))))) get-middle-snaps (fn [lt-dist gt-dist] diff --git a/frontend/src/app/main/store.cljs b/frontend/src/app/main/store.cljs index 46e77f4d78..7c162d030d 100644 --- a/frontend/src/app/main/store.cljs +++ b/frontend/src/app/main/store.cljs @@ -43,7 +43,7 @@ (when (and *debug-events* (ptk/event? e) (not (debug-exclude-events (ptk/type e)))) - (.log js/console (str "[stream]: " (ptk/repr-event e)) ))))) + (.log js/console (str "[stream]: " (ptk/repr-event e))))))) (defonce state (ptk/store {:resolve ptk/resolve diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj index 5a64f57c98..1881d59d8f 100644 --- a/frontend/src/app/main/style.clj +++ b/frontend/src/app/main/style.clj @@ -33,16 +33,16 @@ (def ^:private xform-css (keep (fn [k] - (cond - (keyword? k) - (let [knm (name k) - kns (namespace k)] - (case kns - "global" knm - (str *css-prefix* knm))) + (cond + (keyword? k) + (let [knm (name k) + kns (namespace k)] + (case kns + "global" knm + (str *css-prefix* knm))) - (string? k) - k)))) + (string? k) + k)))) (defmacro css* "Just coerces all params to strings and concats them with diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index abf47e0404..9a710d9a83 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -40,18 +40,18 @@ (dom/prevent-default event) (->> (rp/cmd! :login-with-oidc (assoc params :provider provider)) (rx/subs! (fn [{:keys [redirect-uri] :as rsp}] - (if redirect-uri - (.replace js/location redirect-uri) - (log/error :hint "unexpected response from OIDC method" - :resp (pr-str rsp)))) - (fn [{:keys [type code] :as error}] - (cond - (and (= type :restriction) - (= code :provider-not-configured)) - (st/emit! (dm/error (tr "errors.auth-provider-not-configured"))) + (if redirect-uri + (.replace js/location redirect-uri) + (log/error :hint "unexpected response from OIDC method" + :resp (pr-str rsp)))) + (fn [{:keys [type code] :as error}] + (cond + (and (= type :restriction) + (= code :provider-not-configured)) + (st/emit! (dm/error (tr "errors.auth-provider-not-configured"))) - :else - (st/emit! (dm/error (tr "errors.generic")))))))) + :else + (st/emit! (dm/error (tr "errors.generic")))))))) (defn- login-with-ldap [event params] @@ -60,20 +60,20 @@ (let [{:keys [on-error]} (meta params)] (->> (rp/cmd! :login-with-ldap params) (rx/subs! (fn [profile] - (if-let [token (:invitation-token profile)] - (st/emit! (rt/nav :auth-verify-token {} {:token token})) - (st/emit! (du/login-from-token {:profile profile})))) - (fn [{:keys [type code] :as error}] - (cond - (and (= type :restriction) - (= code :ldap-not-initialized)) - (st/emit! (dm/error (tr "errors.ldap-disabled"))) + (if-let [token (:invitation-token profile)] + (st/emit! (rt/nav :auth-verify-token {} {:token token})) + (st/emit! (du/login-from-token {:profile profile})))) + (fn [{:keys [type code] :as error}] + (cond + (and (= type :restriction) + (= code :ldap-not-initialized)) + (st/emit! (dm/error (tr "errors.ldap-disabled"))) - (fn? on-error) - (on-error error) + (fn? on-error) + (on-error error) - :else - (st/emit! (dm/error (tr "errors.generic"))))))))) + :else + (st/emit! (dm/error (tr "errors.generic"))))))))) (s/def ::email ::us/email) (s/def ::password ::us/not-empty-string) diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index 573c989209..c200b4a4dd 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -232,7 +232,7 @@ (->> (rp/cmd! :register-profile params) (rx/finalize #(reset! submitted? false)) (rx/subs! on-success - (partial handle-register-error form))))))] + (partial handle-register-error form))))))] [:& fm/form {:on-submit on-submit :form form} [:div {:class (stl/css :fields-row)} diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 2e2c359b0b..1147cf99a4 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -28,7 +28,7 @@ [rumext.v2 :as mf])) (mf/defc resizing-textarea - {::mf/wrap-props false } + {::mf/wrap-props false} [props] (let [value (d/nilv (unchecked-get props "value") "") on-focus (unchecked-get props "on-focus") @@ -51,14 +51,14 @@ on-key-down (mf/use-fn - (mf/deps on-esc on-ctrl-enter on-change*) - (fn [event] - (cond - (and (kbd/esc? event) (fn? on-esc)) (on-esc event) - (and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter)) - (do - (on-change* event) - (on-ctrl-enter event))))) + (mf/deps on-esc on-ctrl-enter on-change*) + (fn [event] + (cond + (and (kbd/esc? event) (fn? on-esc)) (on-esc event) + (and (kbd/mod? event) (kbd/enter? event) (fn? on-ctrl-enter)) + (do + (on-change* event) + (on-ctrl-enter event))))) on-focus* (mf/use-fn @@ -168,13 +168,13 @@ on-change (mf/use-fn (mf/deps draft) - (fn [content] - (st/emit! (dcm/update-draft-thread {:content content})))) + (fn [content] + (st/emit! (dcm/update-draft-thread {:content content})))) on-submit (mf/use-fn - (mf/deps draft) - (partial on-submit draft))] + (mf/deps draft) + (partial on-submit draft))] [:* [:div diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/components/buttons/simple_button.cljs index 112971c6cc..fb4bdd9952 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs +++ b/frontend/src/app/main/ui/components/buttons/simple_button.cljs @@ -1,10 +1,10 @@ (ns app.main.ui.components.buttons.simple-button (:require-macros [app.main.style :as stl]) (:require - [rumext.v2 :as mf])) + [rumext.v2 :as mf])) (mf/defc simple-button {::mf/wrap-props false} [{:keys [on-click children]}] - [:button {:on-click on-click :class (stl/css :button)} children]) + [:button {:on-click on-click :class (stl/css :button)} children]) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index 23be4183a6..0b273aac20 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -37,11 +37,11 @@ (cond (:gradient color) [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}] - + (:image color) (let [uri (cfg/resolve-file-media (:image color))] [:div.color-bullet-wrapper {:style {:background-size "contain" :background-image (str/ffmt "url(%)" uri)}}]) - + :else [:div.color-bullet-wrapper [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}] diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index 2f5777fa5b..4130939b74 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -114,20 +114,20 @@ on-mouse-up (mf/use-fn - (fn [event] - (dom/prevent-default event))) + (fn [event] + (dom/prevent-default event))) handle-focus (mf/use-fn - (fn [event] - (let [target (dom/get-target event)] - (when on-focus - (on-focus event)) + (fn [event] + (let [target (dom/get-target event)] + (when on-focus + (on-focus event)) - (when select-on-focus? - (-> event (dom/get-target) (.select)) + (when select-on-focus? + (-> event (dom/get-target) (.select)) ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect - (.addEventListener target "mouseup" on-mouse-up #js {"once" true}))))) + (.addEventListener target "mouseup" on-mouse-up #js {"once" true}))))) props (-> (obj/clone props) (obj/unset! "selectOnFocus") diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 2187e81b79..88cd4fd425 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -361,17 +361,17 @@ (zero? (count @items))) klass (str (get props :class) " " - (stl/css-case - :focus @focus? - :valid (and touched? (not error)) - :invalid (and touched? error) - :empty empty? - :custom-multi-input true)) + (stl/css-case + :focus @focus? + :valid (and touched? (not error)) + :invalid (and touched? error) + :empty empty? + :custom-multi-input true)) in-klass (str class " " - (stl/css-case - :inside-input true - :no-padding (pos? (count @items)))) + (stl/css-case + :inside-input true + :no-padding (pos? (count @items)))) on-focus (mf/use-fn #(reset! focus? true)) @@ -481,7 +481,7 @@ (> (count value) length)) (defn validate-length - [field length errors-msg ] + [field length errors-msg] (fn [errors data] (cond-> errors (max-length? (get data field) length) @@ -500,6 +500,6 @@ (let [value (get data field)] (cond-> errors (and - (all-spaces? value) - (> (count value) 0)) + (all-spaces? value) + (> (count value) 0)) (assoc field {:message error-msg}))))) diff --git a/frontend/src/app/main/ui/components/link.cljs b/frontend/src/app/main/ui/components/link.cljs index 3e845628e2..ad010f093e 100644 --- a/frontend/src/app/main/ui/components/link.cljs +++ b/frontend/src/app/main/ui/components/link.cljs @@ -18,4 +18,4 @@ (keyboard-action event))) :tab-index "0" :data-test data-test} - [:* children]])) + [:* children]])) diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index 705bb3b4d7..24f362cd26 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -46,7 +46,7 @@ (when ^boolean enter? (dom/blur! node)) (when ^boolean esc? (dom/blur! node)))))] [:span {:class (stl/css-case :search-box true - :has-children (some? children))} + :has-children (some? children))} children [:div {:class (stl/css :search-input-wrapper)} icon diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index be104cfcf6..3f1aac1cd0 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -50,7 +50,7 @@ (when (fn? on-change) (on-change id)))))] [:div {:class (stl/css :tab-container)} - [:div {:class (dm/str class " "(stl/css :tab-container-tabs))} + [:div {:class (dm/str class " " (stl/css :tab-container-tabs))} (when collapsable? [:button {:on-click handle-collapse @@ -67,7 +67,7 @@ :data-id (d/name id) :on-click select-fn :class (stl/css-case :tab-container-tab-title true - :current (= selected id))} + :current (= selected id))} title]))]] - [:div {:class (dm/str content-class " " (stl/css :tab-container-content ))} + [:div {:class (dm/str content-class " " (stl/css :tab-container-content))} (d/seek #(= selected (-> % .-props .-id)) children)]])) diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index ec956fa08e..36aa4b7efd 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -43,7 +43,7 @@ team-id (get-in route [:params :path :team-id]) project-id (get-in route [:params :path :project-id])] (cond-> - {:search-term search-term} + {:search-term search-term} (uuid-str? team-id) (assoc :team-id (uuid team-id)) diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs index fcc5502517..aa55bddf87 100644 --- a/frontend/src/app/main/ui/dashboard/comments.cljs +++ b/frontend/src/app/main/ui/dashboard/comments.cljs @@ -75,9 +75,9 @@ (with-meta {::ev/origin "dashboard"})))))] (mf/use-effect - (mf/deps team-id) - (fn [] - (st/emit! (dcm/retrieve-unread-comment-threads team-id)))) + (mf/deps team-id) + (fn [] + (st/emit! (dcm/retrieve-unread-comment-threads team-id)))) (mf/use-effect (mf/deps show?) diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index d0ebba7aac..edda4f2f48 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -196,7 +196,7 @@ (->> (rp/cmd! :get-all-projects) (rx/map group-by-team) (rx/subs! #(when (mf/ref-val mounted-ref) - (reset! teams %))))))) + (reset! teams %))))))) (when current-team (let [sub-options (concat (vec (for [project current-projects] diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index 8a5d5a8591..26519781f6 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -67,9 +67,9 @@ (fn [blobs] (->> (df/process-upload blobs (:id team)) (rx/subs! (fn [result] - (swap! fonts df/merge-and-group-fonts installed-fonts result)) - (fn [error] - (js/console.error "error" error)))))) + (swap! fonts df/merge-and-group-fonts installed-fonts result)) + (fn [error] + (js/console.error "error" error)))))) on-upload (mf/use-callback @@ -79,11 +79,11 @@ (->> (rp/cmd! :create-font-variant item) (rx/delay-at-least 2000) (rx/subs! (fn [font] - (swap! fonts dissoc (:id item)) - (swap! uploading disj (:id item)) - (st/emit! (df/add-font font))) - (fn [error] - (js/console.log "error" error)))))) + (swap! fonts dissoc (:id item)) + (swap! uploading disj (:id item)) + (st/emit! (df/add-font font))) + (fn [error] + (js/console.log "error" error)))))) on-upload-all (fn [items] diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 67dac1f45f..b71bc1eb0c 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -74,12 +74,12 @@ (when (and visible? (not thumbnail-uri)) (->> (ask-for-thumbnail file-id revn) (rx/subs! (fn [url] - (st/emit! (dd/set-file-thumbnail file-id url))) - (fn [cause] - (log/error :hint "unable to render thumbnail" - :file-if file-id - :revn revn - :message (ex-message cause))))))) + (st/emit! (dd/set-file-thumbnail file-id url))) + (fn [cause] + (log/error :hint "unable to render thumbnail" + :file-if file-id + :revn revn + :message (ex-message cause))))))) [:div {:class (stl/css :grid-item-th) :style {:background-color background-color} @@ -514,12 +514,12 @@ (do (dom/prevent-default e) (when-not (or (dnd/from-child? e) - (dnd/broken-event? e)) + (dnd/broken-event? e)) (when (not= selected-project project-id) (reset! dragging? true)))) (or (dnd/has-type? e "Files") - (dnd/has-type? e "application/x-moz-file")) + (dnd/has-type? e "application/x-moz-file")) (do (dom/prevent-default e) (reset! dragging? true))))) @@ -559,7 +559,7 @@ (st/emit! (dd/move-files (with-meta data mdata)))))) (or (dnd/has-type? e "Files") - (dnd/has-type? e "application/x-moz-file")) + (dnd/has-type? e "application/x-moz-file")) (do (dom/prevent-default e) (reset! dragging? false) diff --git a/frontend/src/app/main/ui/dashboard/project_menu.cljs b/frontend/src/app/main/ui/dashboard/project_menu.cljs index d5dc1d9768..bd725a905a 100644 --- a/frontend/src/app/main/ui/dashboard/project_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/project_menu.cljs @@ -82,40 +82,40 @@ (when (fn? on-import) (on-import)))) options [(when-not (:is-default project) - {:option-name (tr "labels.rename") - :id "project-menu-rename" - :option-handler on-edit - :data-test "project-rename"}) - (when-not (:is-default project) - {:option-name (tr "dashboard.duplicate") - :id "project-menu-duplicated" - :option-handler on-duplicate - :data-test "project-duplicate"}) - (when-not (:is-default project) - {:option-name (tr "dashboard.pin-unpin") - :id "project-menu-pin" - :option-handler toggle-pin}) + {:option-name (tr "labels.rename") + :id "project-menu-rename" + :option-handler on-edit + :data-test "project-rename"}) + (when-not (:is-default project) + {:option-name (tr "dashboard.duplicate") + :id "project-menu-duplicated" + :option-handler on-duplicate + :data-test "project-duplicate"}) + (when-not (:is-default project) + {:option-name (tr "dashboard.pin-unpin") + :id "project-menu-pin" + :option-handler toggle-pin}) - (when (and (seq teams) (not (:is-default project))) - {:option-name (tr "dashboard.move-to") - :id "project-menu-move-to" - :sub-options (for [team teams] - {:option-name (:name team) - :id (:name team) - :option-handler (on-move (:id team))}) - :data-test "project-move-to"}) - (when (some? on-import) - {:option-name (tr "dashboard.import") - :id "project-menu-import" - :option-handler on-import-files - :data-test "file-import"}) - (when-not (:is-default project) - {:option-name :separator}) - (when-not (:is-default project) - {:option-name (tr "labels.delete") - :id "project-menu-delete" - :option-handler on-delete - :data-test "project-delete"})]] + (when (and (seq teams) (not (:is-default project))) + {:option-name (tr "dashboard.move-to") + :id "project-menu-move-to" + :sub-options (for [team teams] + {:option-name (:name team) + :id (:name team) + :option-handler (on-move (:id team))}) + :data-test "project-move-to"}) + (when (some? on-import) + {:option-name (tr "dashboard.import") + :id "project-menu-import" + :option-handler on-import-files + :data-test "file-import"}) + (when-not (:is-default project) + {:option-name :separator}) + (when-not (:is-default project) + {:option-name (tr "labels.delete") + :id "project-menu-delete" + :option-handler on-delete + :data-test "project-delete"})]] [:* [:& udi/import-form {:ref file-input diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 035385bb49..b9f059289e 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -370,8 +370,8 @@ you-admin? (get-in team [:permissions :is-admin]) can-invite? (or you-owner? you-admin?) team-hero? (and can-invite? - (:team-hero? props true) - (not (:is-default team))) + (:team-hero? props true) + (not (:is-default team))) tutorial-viewed? (:viewed-tutorial? props true) walkthrough-viewed? (:viewed-walkthrough? props true) diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 8a2f958a3b..50a83cb308 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -949,7 +949,7 @@ (mf/with-effect [team] (st/emit! (dd/fetch-team-webhooks))) - [:* + [:* [:& header {:team team :section :dashboard-team-webhooks}] [:section {:class (stl/css :dashboard-container :dashboard-team-webhooks)} [:* diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs index f51f62df1e..c31b77bdfe 100644 --- a/frontend/src/app/main/ui/delete_shared.cljs +++ b/frontend/src/app/main/ui/delete_shared.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.delete-shared - (:require-macros [app.main.style :as stl]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.main.data.modal :as modal] diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index 778d968857..90df531735 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -147,9 +147,9 @@ [:div {:class (stl/css :modal-footer)} [:div {:class (stl/css :action-buttons)} [:input {:class (stl/css :cancel-button) - :type "button" - :value (tr "labels.cancel") - :on-click cancel-fn}] + :type "button" + :value (tr "labels.cancel") + :on-click cancel-fn}] [:input {:class (stl/css-case :accept-btn true :btn-disabled (or in-progress? all-unchecked?)) diff --git a/frontend/src/app/main/ui/frame_preview.cljs b/frontend/src/app/main/ui/frame_preview.cljs index 12f3a00548..bff3da3abd 100644 --- a/frontend/src/app/main/ui/frame_preview.cljs +++ b/frontend/src/app/main/ui/frame_preview.cljs @@ -13,14 +13,14 @@ {::mf/wrap-props false ::mf/wrap [mf/memo]} [] - + (let [iframe-ref (mf/use-ref nil) last-data* (mf/use-state nil) zoom-ref (mf/use-ref nil) zoom* (mf/use-state 1) zoom @zoom* - + handle-load (mf/use-callback @@ -33,7 +33,7 @@ (-> iframe-dom .-contentWindow .-document .open) (-> iframe-dom .-contentWindow .-document (.write data)) (-> iframe-dom .-contentWindow .-document .close))))) - + load-ref (mf/use-callback (fn [iframe-dom] @@ -54,7 +54,7 @@ (fn [] (aset js/window "load" handle-load) #(js-delete js/window "load"))) - + [:div {:style {:display "flex" :width "100%" :height "100%" :flex-direction "column" :overflow "auto" :align-items "center"}} [:input {:id "zoom-input" :ref zoom-ref @@ -65,6 +65,6 @@ [:div {:style {:width "100%" :height "100%" :overflow "auto"}} [:iframe {:ref load-ref :frame-border "0" - :scrolling "no" + :scrolling "no" :style {:transform-origin "top left" :transform (str "scale(" zoom ")")}}]]])) diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index 79bf1fa81c..b5a46415e0 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -385,11 +385,11 @@ mnt? (volatile! true) sub (->> (wapi/observe-resize node) (rx/subs! (fn [entries] - (let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (when @mnt? - (reset! width* row-width))))))] + (let [row (first entries) + row-rect (.-contentRect ^js row) + row-width (.-width ^js row-rect)] + (when @mnt? + (reset! width* row-width))))))] (fn [] (vreset! mnt? false) (rx/dispose! sub)))) diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index f1245d86d7..057794e307 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -96,18 +96,18 @@ (or (and (neg? ss) (pos? se)) (and (pos? ss) (neg? ee)) (and (neg? ss) (> ss se))) - (conj [ from-s (+ from-s ss) ]) + (conj [from-s (+ from-s ss)]) (and (neg? se) (<= ss se)) - (conj [ from-s (+ from-s se) ]) + (conj [from-s (+ from-s se)]) (and (pos? es) (<= es ee)) - (conj [ from-e (+ from-e es) ]) + (conj [from-e (+ from-e es)]) (or (and (pos? ee) (neg? es)) (and (neg? ee) (pos? ss)) (and (pos? ee) (< ee es))) - (conj [ from-e (+ from-e ee) ])))) + (conj [from-e (+ from-e ee)])))) ;; ------------------------------------------------ ;; COMPONENTS @@ -383,9 +383,9 @@ pill-width (/ flex-display-pill-width zoom) pill-height (/ flex-display-pill-height zoom) hover? #(or hover-all? - (and (or (= % :p1) (= % :p3)) hover-v?) - (and (or (= % :p2) (= % :p4)) hover-h?) - (= @hover %)) + (and (or (= % :p1) (= % :p3)) hover-v?) + (and (or (= % :p2) (= % :p4)) hover-h?) + (= @hover %)) negate {:p1 (if (:flip-y frame) true false) :p2 (if (:flip-x frame) true false) :p3 (if (:flip-y frame) true false) @@ -459,7 +459,7 @@ :value @hover-value}])])) (mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave - rect-data hover? selected? mouse-pos hover-value]}] + rect-data hover? selected? mouse-pos hover-value]}] (let [resizing? (mf/use-var false) start (mf/use-var nil) original-value (mf/use-var 0) @@ -582,7 +582,7 @@ :resize-negate? (:flip-x frame)}}] [:g.margins {:pointer-events "visible"} - (for [[margin-num rect-data] margin-display-data] + (for [[margin-num rect-data] margin-display-data] [:& margin-display {:key (:key rect-data) :shape-id shape-id @@ -611,7 +611,7 @@ :value @hover-value}])])) (mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave - rect-data hover? selected? mouse-pos hover-value]}] + rect-data hover? selected? mouse-pos hover-value]}] (let [resizing (mf/use-var nil) start (mf/use-var nil) original-value (mf/use-var 0) @@ -654,19 +654,19 @@ (reset! hover-value val) (st/emit! (dwm/set-modifiers modifiers)))))))] - [:rect.gap-rect {:x (:x rect-data) - :y (:y rect-data) - :width (:width rect-data) - :height (:height rect-data) - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave - :on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move - :class (when (or hover? selected?) - (if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90))) - :style {:fill (if (or hover? selected?) distance-color "none") - :opacity (if selected? 0.5 0.25)}}])) + [:rect.gap-rect {:x (:x rect-data) + :y (:y rect-data) + :width (:width rect-data) + :height (:height rect-data) + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave + :on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move + :class (when (or hover? selected?) + (if (= (:resize-axis rect-data) :x) (cur/get-dynamic "resize-ew" 0) (cur/get-dynamic "resize-ew" 90))) + :style {:fill (if (or hover? selected?) distance-color "none") + :opacity (if selected? 0.5 0.25)}}])) (mf/defc gap-rects [{:keys [frame zoom]}] (let [frame-id (:id frame) diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 4f9a612158..cead11ff45 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -93,7 +93,7 @@ (s/def ::questions-form-step-3 (s/keys :req-un [::experience-design-tool] - :opt-un[::experience-design-tool-other])) + :opt-un [::experience-design-tool-other])) (defn- step-3-form-validator [errors data] @@ -134,7 +134,7 @@ (s/def ::questions-form-step-4 (s/keys :req-un [::team-size ::role] - :opt-un [::role-other])) + :opt-un [::role-other])) (defn- step-4-form-validator [errors data] diff --git a/frontend/src/app/main/ui/onboarding/templates.cljs b/frontend/src/app/main/ui/onboarding/templates.cljs index 1744f69c73..af0abb2b1d 100644 --- a/frontend/src/app/main/ui/onboarding/templates.cljs +++ b/frontend/src/app/main/ui/onboarding/templates.cljs @@ -40,11 +40,11 @@ (reset! downloading? true) (->> (http/send! {:method :get :uri link :response-type :blob :mode :no-cors}) (rx/subs! (fn [{:keys [body] :as response}] - (open-import-modal {:name name :uri (wapi/create-uri body)})) - (fn [error] - (js/console.log "error" error)) - (fn [] - (reset! downloading? false)))))] + (open-import-modal {:name name :uri (wapi/create-uri body)})) + (fn [error] + (js/console.log "error" error)) + (fn [] + (reset! downloading? false)))))] [:div.template-item [:div.template-item-content diff --git a/frontend/src/app/main/ui/routes.cljs b/frontend/src/app/main/ui/routes.cljs index 1a796f32d8..eeb5f156c3 100644 --- a/frontend/src/app/main/ui/routes.cljs +++ b/frontend/src/app/main/ui/routes.cljs @@ -113,15 +113,15 @@ ;; invitations workflows (and probably other cases). (->> (rp/cmd! :get-profile) (rx/subs! (fn [{:keys [id] :as profile}] - (cond - (= id uuid/zero) - (st/emit! (rt/nav :auth-login)) + (cond + (= id uuid/zero) + (st/emit! (rt/nav :auth-login)) - empty-path? - (st/emit! (rt/nav :dashboard-projects {:team-id (du/get-current-team-id profile)})) + empty-path? + (st/emit! (rt/nav :dashboard-projects {:team-id (du/get-current-team-id profile)})) - :else - (st/emit! (rt/assign-exception {:type :not-found}))))))))) + :else + (st/emit! (rt/assign-exception {:type :not-found}))))))))) (defn init-routes [] diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs index 37d4f54c7f..f50a7bf6d5 100644 --- a/frontend/src/app/main/ui/settings/change_email.cljs +++ b/frontend/src/app/main/ui/settings/change_email.cljs @@ -89,13 +89,13 @@ on-email-change (mf/use-callback - (fn [_ _] - (let [different-emails-error? (= (dma/get-in @form [:errors :email-2 :code]) :different-emails) - email-1 (dma/get-in @form [:clean-data :email-1]) - email-2 (dma/get-in @form [:clean-data :email-2])] - (println "different-emails-error?" (and different-emails-error? (= email-1 email-2))) - (when (and different-emails-error? (= email-1 email-2)) - (swap! form d/dissoc-in [:errors :email-2])))))] + (fn [_ _] + (let [different-emails-error? (= (dma/get-in @form [:errors :email-2 :code]) :different-emails) + email-1 (dma/get-in @form [:clean-data :email-1]) + email-2 (dma/get-in @form [:clean-data :email-2])] + (println "different-emails-error?" (and different-emails-error? (= email-1 email-2))) + (when (and different-emails-error? (= email-1 email-2)) + (swap! form d/dissoc-in [:errors :email-2])))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-container)} @@ -134,8 +134,7 @@ [:div {:class (stl/css :action-buttons) :data-test "change-email-submit"} [:> fm/submit-button* - {:label (tr "modals.change-email.submit")}]]]]]] - )) + {:label (tr "modals.change-email.submit")}]]]]]])) diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index 34b539a84f..075bb2bfaa 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/frontend/src/app/main/ui/settings/options.cljs @@ -75,11 +75,11 @@ (mf/defc options-page [] - (mf/use-effect - #(dom/set-html-title (tr "title.settings.options"))) + (mf/use-effect + #(dom/set-html-title (tr "title.settings.options"))) - [:div {:class (stl/css :dashboard-settings)} - [:div {:class (stl/css :form-container) :data-test "settings-form"} - [:h2 (tr "labels.settings")] - [:& options-form {}]]]) + [:div {:class (stl/css :dashboard-settings)} + [:div {:class (stl/css :form-container) :data-test "settings-form"} + [:h2 (tr "labels.settings")] + [:& options-form {}]]]) diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index c82664b115..c9dbcb6789 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -30,42 +30,42 @@ go-dashboard (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :dashboard-projects {:team-id (du/get-current-team-id profile)}))) + (mf/deps profile) + #(st/emit! (rt/nav :dashboard-projects {:team-id (du/get-current-team-id profile)}))) go-settings-profile (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :settings-profile))) + (mf/deps profile) + #(st/emit! (rt/nav :settings-profile))) go-settings-feedback (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :settings-feedback))) + (mf/deps profile) + #(st/emit! (rt/nav :settings-feedback))) go-settings-password (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :settings-password))) + (mf/deps profile) + #(st/emit! (rt/nav :settings-password))) go-settings-options (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :settings-options))) + (mf/deps profile) + #(st/emit! (rt/nav :settings-options))) go-settings-access-tokens (mf/use-callback - (mf/deps profile) - #(st/emit! (rt/nav :settings-access-tokens))) + (mf/deps profile) + #(st/emit! (rt/nav :settings-access-tokens))) show-release-notes (mf/use-callback - (fn [event] - (let [version (:main cf/version)] - (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version})) - (if (and (kbd/alt? event) (kbd/mod? event)) - (st/emit! (modal/show {:type :onboarding})) - (st/emit! (modal/show {:type :release-notes :version version}))))))] + (fn [event] + (let [version (:main cf/version)] + (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version})) + (if (and (kbd/alt? event) (kbd/mod? event)) + (st/emit! (modal/show {:type :onboarding})) + (st/emit! (modal/show {:type :release-notes :version version}))))))] [:div {:class (stl/css :sidebar-content)} [:div {:class (stl/css :sidebar-content-section)} diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 707d407199..d7daebf3be 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -144,7 +144,7 @@ (not= caps-start caps-end))) (obj/set! attrs "markerEnd" (str/ffmt "url(#marker-%-%)" render-id (name caps-end)))))))) - attrs)) + attrs)) (defn add-layer-styles! [props shape] @@ -197,15 +197,15 @@ (add-layer-styles! shape)) url-fill? (or ^boolean (some? (:fill-image shape)) - ^boolean (cfh/image-shape? shape) - ^boolean (> (count shape-fills) 1) - ^boolean (some? (some :fill-color-gradient shape-fills)) - ^boolean (some? (some :fill-image shape-fills))) + ^boolean (cfh/image-shape? shape) + ^boolean (> (count shape-fills) 1) + ^boolean (some? (some :fill-color-gradient shape-fills)) + ^boolean (some? (some :fill-image shape-fills))) props (if (cfh/frame-shape? shape) props (if (or (some? (->> shape-shadow (remove :hidden) seq)) - (and (some? shape-blur) (not ^boolean (:hidden shape-blur)))) + (and (some? shape-blur) (not ^boolean (:hidden shape-blur)))) (obj/set! props "filter" (dm/fmt "url(#filter-%)" render-id)) props))] @@ -219,9 +219,9 @@ ;; reset to normal if a Penpot frame shape appears below ;; (see main.ui.shapes.frame/frame-container). (and ^boolean (contains? shape :svg-attrs) - ^boolean (or ^boolean (= :svg-raw shape-type) - ^boolean (= :group shape-type)) - ^boolean (empty? shape-fills)) + ^boolean (or ^boolean (= :svg-raw shape-type) + ^boolean (= :group shape-type)) + ^boolean (empty? shape-fills)) (let [wstyle (get shape :wrapper-styles) fill (obj/get wstyle "fill") fill (d/nilv fill clr/black)] @@ -234,7 +234,7 @@ (obj/set! props "fill" (dm/fmt "url(#fill-%-%)" position render-id))) (and ^boolean (some? svg-styles) - ^boolean (obj/contains? svg-styles "fill")) + ^boolean (obj/contains? svg-styles "fill")) (let [fill (obj/get svg-styles "fill") opacity (obj/get svg-styles "fillOpacity")] (when (some? fill) @@ -243,7 +243,7 @@ (obj/set! style "fillOpacity" opacity))) (and ^boolean (some? svg-attrs) - ^boolean (empty? shape-fills)) + ^boolean (empty? shape-fills)) (let [fill (obj/get svg-attrs "fill") opacity (obj/get svg-attrs "fillOpacity")] (when (some? fill) @@ -256,7 +256,7 @@ (obj/merge! style (get-fill-style fill render-id 0 shape-type))) (and ^boolean (cfh/path-shape? shape) - ^boolean (empty? shape-fills)) + ^boolean (empty? shape-fills)) (obj/set! style "fill" "none")) (-> props diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index d44af4ac6f..91d4586ae7 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -105,106 +105,106 @@ (:stroke-opacity stroke))] [:* - (when (or (= cap-start :line-arrow) - (= cap-end :line-arrow)) - [:marker {:id (dm/str id-prefix "-line-arrow") - :viewBox "0 0 3 6" - :refX "2" - :refY "3" - :markerWidth "8.5" - :markerHeight "8.5" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:path {:d "M 0.5 0.5 L 3 3 L 0.5 5.5 L 0 5 L 2 3 L 0 1 z"}]]) + (when (or (= cap-start :line-arrow) + (= cap-end :line-arrow)) + [:marker {:id (dm/str id-prefix "-line-arrow") + :viewBox "0 0 3 6" + :refX "2" + :refY "3" + :markerWidth "8.5" + :markerHeight "8.5" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:path {:d "M 0.5 0.5 L 3 3 L 0.5 5.5 L 0 5 L 2 3 L 0 1 z"}]]) - (when (or (= cap-start :triangle-arrow) - (= cap-end :triangle-arrow)) - [:marker {:id (dm/str id-prefix "-triangle-arrow") - :viewBox "0 0 3 6" - :refX "2" - :refY "3" - :markerWidth "8.5" - :markerHeight "8.5" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:path {:d "M 0 0 L 3 3 L 0 6 z"}]]) + (when (or (= cap-start :triangle-arrow) + (= cap-end :triangle-arrow)) + [:marker {:id (dm/str id-prefix "-triangle-arrow") + :viewBox "0 0 3 6" + :refX "2" + :refY "3" + :markerWidth "8.5" + :markerHeight "8.5" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:path {:d "M 0 0 L 3 3 L 0 6 z"}]]) - (when (or (= cap-start :square-marker) - (= cap-end :square-marker)) - [:marker {:id (dm/str id-prefix "-square-marker") - :viewBox "0 0 6 6" - :refX "3" - :refY "3" - :markerWidth "4.2426" ;; diagonal length of a 3x3 square - :markerHeight "4.2426" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:rect {:x 0 :y 0 :width 6 :height 6}]]) + (when (or (= cap-start :square-marker) + (= cap-end :square-marker)) + [:marker {:id (dm/str id-prefix "-square-marker") + :viewBox "0 0 6 6" + :refX "3" + :refY "3" + :markerWidth "4.2426" ;; diagonal length of a 3x3 square + :markerHeight "4.2426" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:rect {:x 0 :y 0 :width 6 :height 6}]]) - (when (or (= cap-start :circle-marker) - (= cap-end :circle-marker)) - [:marker {:id (dm/str id-prefix "-circle-marker") - :viewBox "0 0 6 6" - :refX "3" - :refY "3" - :markerWidth "4" - :markerHeight "4" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:circle {:cx "3" :cy "3" :r "3"}]]) + (when (or (= cap-start :circle-marker) + (= cap-end :circle-marker)) + [:marker {:id (dm/str id-prefix "-circle-marker") + :viewBox "0 0 6 6" + :refX "3" + :refY "3" + :markerWidth "4" + :markerHeight "4" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:circle {:cx "3" :cy "3" :r "3"}]]) - (when (or (= cap-start :diamond-marker) - (= cap-end :diamond-marker)) - [:marker {:id (dm/str id-prefix "-diamond-marker") - :viewBox "0 0 6 6" - :refX "3" - :refY "3" - :markerWidth "6" - :markerHeight "6" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:path {:d "M 3 0 L 6 3 L 3 6 L 0 3 z"}]]) + (when (or (= cap-start :diamond-marker) + (= cap-end :diamond-marker)) + [:marker {:id (dm/str id-prefix "-diamond-marker") + :viewBox "0 0 6 6" + :refX "3" + :refY "3" + :markerWidth "6" + :markerHeight "6" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:path {:d "M 3 0 L 6 3 L 3 6 L 0 3 z"}]]) ;; If the user wants line caps but different in each end, ;; simulate it with markers. - (when (and (or (= cap-start :round) - (= cap-end :round)) - (not= cap-start cap-end)) - [:marker {:id (dm/str id-prefix "-round") - :viewBox "0 0 6 6" - :refX "3" - :refY "3" - :markerWidth "6" - :markerHeight "6" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:path {:d "M 3 2.5 A 0.5 0.5 0 0 1 3 3.5 "}]]) + (when (and (or (= cap-start :round) + (= cap-end :round)) + (not= cap-start cap-end)) + [:marker {:id (dm/str id-prefix "-round") + :viewBox "0 0 6 6" + :refX "3" + :refY "3" + :markerWidth "6" + :markerHeight "6" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:path {:d "M 3 2.5 A 0.5 0.5 0 0 1 3 3.5 "}]]) - (when (and (or (= cap-start :square) - (= cap-end :square)) - (not= cap-start cap-end)) - [:marker {:id (dm/str id-prefix "-square") - :viewBox "0 0 6 6" - :refX "3" - :refY "3" - :markerWidth "6" - :markerHeight "6" - :orient "auto-start-reverse" - :fill color - :fillOpacity opacity} - [:rect {:x 3 :y 2.5 :width 0.5 :height 1}]])])) + (when (and (or (= cap-start :square) + (= cap-end :square)) + (not= cap-start cap-end)) + [:marker {:id (dm/str id-prefix "-square") + :viewBox "0 0 6 6" + :refX "3" + :refY "3" + :markerWidth "6" + :markerHeight "6" + :orient "auto-start-reverse" + :fill color + :fillOpacity opacity} + [:rect {:x 3 :y 2.5 :width 0.5 :height 1}]])])) (mf/defc stroke-defs {::mf/wrap-props false} [{:keys [shape stroke render-id index]}] (let [open-path? (and ^boolean (cfh/path-shape? shape) - ^boolean (gsh/open-path? shape)) + ^boolean (gsh/open-path? shape)) gradient (:stroke-color-gradient stroke) alignment (:stroke-alignment stroke :center) width (:stroke-width stroke 0) @@ -487,11 +487,11 @@ props (cond-> props (and (some? shape-blur) - (not ^boolean (:hidden shape-blur))) + (not ^boolean (:hidden shape-blur))) (obj/set! "filter" (dm/fmt "url(#filter-blur-%)" render-id)) (and (empty? shape-fills) - (some? (->> shape-shadow (remove :hidden) seq))) + (some? (->> shape-shadow (remove :hidden) seq))) (obj/set! "filter" (dm/fmt "url(#filter-%)" render-id))))] (when (d/not-empty? shape-strokes) diff --git a/frontend/src/app/main/ui/shapes/embed.cljs b/frontend/src/app/main/ui/shapes/embed.cljs index 4e9fe7d498..218b9687b8 100644 --- a/frontend/src/app/main/ui/shapes/embed.cljs +++ b/frontend/src/app/main/ui/shapes/embed.cljs @@ -38,9 +38,9 @@ (url-mapping) (rx/reduce conj {}) (rx/subs! (fn [data] - (when-not (= data (mf/ref-val uri-data)) - (mf/set-ref-val! uri-data data) - (reset! state inc)))))] + (when-not (= data (mf/ref-val uri-data)) + (mf/set-ref-val! uri-data data) + (reset! state inc)))))] #(when sub (rx/dispose! sub))))) diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index fde3f2fddb..959be058fb 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -169,10 +169,10 @@ (mf/defc export-flows [{:keys [flows]}] [:> "penpot:flows" #js {} - (for [{:keys [id name starting-frame]} flows] - [:> "penpot:flow" #js {:id id - :name name - :starting-frame starting-frame}])]) + (for [{:keys [id name starting-frame]} flows] + [:> "penpot:flow" #js {:id id + :name name + :starting-frame starting-frame}])]) (mf/defc export-guides [{:keys [guides]}] @@ -253,7 +253,7 @@ [:* (when (contains? shape :svg-attrs) (let [svg-transform (get shape :svg-transform) - svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",") ) + svg-attrs (->> shape :svg-attrs keys (mapv d/name) (str/join ",")) svg-defs (->> shape :svg-defs keys (mapv d/name) (str/join ","))] [:> "penpot:svg-import" #js {:penpot:svg-attrs (when-not (empty? svg-attrs) svg-attrs) @@ -292,47 +292,47 @@ (when-let [fills (seq fills)] (let [render-id (mf/use-ctx muc/render-id)] (mf/html - [:> "penpot:fills" #js {} - (for [[index fill] (d/enumerate fills)] - (let [fill-image-id (dm/str "fill-image-" render-id "-" index)] - [:> "penpot:fill" - #js {:penpot:fill-color (cond - (some? (:fill-color-gradient fill)) - (str/format "url(#%s)" (str "fill-color-gradient-" render-id "-" index)) + [:> "penpot:fills" #js {} + (for [[index fill] (d/enumerate fills)] + (let [fill-image-id (dm/str "fill-image-" render-id "-" index)] + [:> "penpot:fill" + #js {:penpot:fill-color (cond + (some? (:fill-color-gradient fill)) + (str/format "url(#%s)" (str "fill-color-gradient-" render-id "-" index)) - :else - (d/name (:fill-color fill))) - :key (swap! internal-counter inc) + :else + (d/name (:fill-color fill))) + :key (swap! internal-counter inc) - :penpot:fill-image-id (when (:fill-image fill) fill-image-id) - :penpot:fill-color-ref-file (d/name (:fill-color-ref-file fill)) - :penpot:fill-color-ref-id (d/name (:fill-color-ref-id fill)) - :penpot:fill-opacity (d/name (:fill-opacity fill))}]))])))) + :penpot:fill-image-id (when (:fill-image fill) fill-image-id) + :penpot:fill-color-ref-file (d/name (:fill-color-ref-file fill)) + :penpot:fill-color-ref-id (d/name (:fill-color-ref-id fill)) + :penpot:fill-opacity (d/name (:fill-opacity fill))}]))])))) (defn- export-strokes-data [{:keys [strokes]}] (when-let [strokes (seq strokes)] (let [render-id (mf/use-ctx muc/render-id)] (mf/html - [:> "penpot:strokes" #js {} - (for [[index stroke] (d/enumerate strokes)] - (let [stroke-image-id (dm/str "stroke-image-" render-id "-" index)] - [:> "penpot:stroke" - #js {:penpot:stroke-color (cond - (some? (:stroke-color-gradient stroke)) - (str/format "url(#%s)" (str "stroke-color-gradient-" render-id "-" index)) + [:> "penpot:strokes" #js {} + (for [[index stroke] (d/enumerate strokes)] + (let [stroke-image-id (dm/str "stroke-image-" render-id "-" index)] + [:> "penpot:stroke" + #js {:penpot:stroke-color (cond + (some? (:stroke-color-gradient stroke)) + (str/format "url(#%s)" (str "stroke-color-gradient-" render-id "-" index)) - :else - (d/name (:stroke-color stroke))) - :key (swap! internal-counter inc) - :penpot:stroke-image-id (when (:stroke-image stroke) stroke-image-id) - :penpot:stroke-color-ref-file (d/name (:stroke-color-ref-file stroke)) - :penpot:stroke-color-ref-id (d/name (:stroke-color-ref-id stroke)) - :penpot:stroke-opacity (d/name (:stroke-opacity stroke)) - :penpot:stroke-style (d/name (:stroke-style stroke)) - :penpot:stroke-width (d/name (:stroke-width stroke)) - :penpot:stroke-alignment (d/name (:stroke-alignment stroke)) - :penpot:stroke-cap-start (d/name (:stroke-cap-start stroke)) - :penpot:stroke-cap-end (d/name (:stroke-cap-end stroke))}]))])))) + :else + (d/name (:stroke-color stroke))) + :key (swap! internal-counter inc) + :penpot:stroke-image-id (when (:stroke-image stroke) stroke-image-id) + :penpot:stroke-color-ref-file (d/name (:stroke-color-ref-file stroke)) + :penpot:stroke-color-ref-id (d/name (:stroke-color-ref-id stroke)) + :penpot:stroke-opacity (d/name (:stroke-opacity stroke)) + :penpot:stroke-style (d/name (:stroke-style stroke)) + :penpot:stroke-width (d/name (:stroke-width stroke)) + :penpot:stroke-alignment (d/name (:stroke-alignment stroke)) + :penpot:stroke-cap-start (d/name (:stroke-cap-start stroke)) + :penpot:stroke-cap-end (d/name (:stroke-cap-end stroke))}]))])))) (defn- export-interactions-data [{:keys [interactions]}] (when-let [interactions (seq interactions)] diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index cea64f7ca3..0abc32400e 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -35,7 +35,7 @@ height (dm/get-prop selrect :height) has-image? (or (some? metadata) - (some? image)) + (some? image)) uri (cond (some? metadata) @@ -45,10 +45,10 @@ (cf/resolve-file-media image)) uris (into [uri] - (comp - (keep :fill-image) - (map cf/resolve-file-media)) - fills) + (comp + (keep :fill-image) + (map cf/resolve-file-media)) + fills) transform (gsh/transform-str shape) @@ -59,8 +59,8 @@ :height height} pat-props (if (= :path type) - (obj/set! pat-props "patternTransform" transform) - pat-props)] + (obj/set! pat-props "patternTransform" transform) + pat-props)] (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))] [:* {:key (dm/str shape-index)} diff --git a/frontend/src/app/main/ui/shapes/mask.cljs b/frontend/src/app/main/ui/shapes/mask.cljs index 3438a84446..250b7bd400 100644 --- a/frontend/src/app/main/ui/shapes/mask.cljs +++ b/frontend/src/app/main/ui/shapes/mask.cljs @@ -60,8 +60,8 @@ points (dm/get-prop mask :points) points-str (mf/with-memo [points] - (->> (map point->str points) - (str/join " "))) + (->> (map point->str points) + (str/join " "))) bounds (mf/with-memo [points] (grc/points->rect points)) diff --git a/frontend/src/app/main/ui/shapes/path.cljs b/frontend/src/app/main/ui/shapes/path.cljs index 424265f27f..f44d430428 100644 --- a/frontend/src/app/main/ui/shapes/path.cljs +++ b/frontend/src/app/main/ui/shapes/path.cljs @@ -22,9 +22,9 @@ (upf/format-path content) (catch :default e (log/error :hint "unexpected error on formatting path" - :shape-name (:name shape) - :shape-id (:id shape) - :cause e) + :shape-name (:name shape) + :shape-id (:id shape) + :cause e) ""))) props (-> #js {} diff --git a/frontend/src/app/main/ui/shapes/svg_defs.cljs b/frontend/src/app/main/ui/shapes/svg_defs.cljs index 081cf22973..50092747c0 100644 --- a/frontend/src/app/main/ui/shapes/svg_defs.cljs +++ b/frontend/src/app/main/ui/shapes/svg_defs.cljs @@ -59,11 +59,11 @@ (= :group type)) (update :className #(if % (dm/str % " svg-def") "svg-def"))) (cond-> - transform-gradient? (add-matrix :gradientTransform transform) - transform-pattern? (add-matrix :patternTransform transform) - transform-clippath? (add-matrix :transform transform) - (or transform-filter? - transform-mask?) (merge bounds))) + transform-gradient? (add-matrix :gradientTransform transform) + transform-pattern? (add-matrix :patternTransform transform) + transform-clippath? (add-matrix :transform transform) + (or transform-filter? + transform-mask?) (merge bounds))) ;; Fixes race condition with dynamic modifiers forcing redraw this properties before ;; the effect triggers diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs index 4a56428842..21f8c19516 100644 --- a/frontend/src/app/main/ui/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/shapes/svg_raw.cljs @@ -83,7 +83,7 @@ (usa/add-fill-props! shape render-id))] (when (and (some? element-id) - (contains? ids-mapping element-id)) + (contains? ids-mapping element-id)) (obj/set! props "id" (get ids-mapping element-id))) props))] diff --git a/frontend/src/app/main/ui/shapes/text/fo_text.cljs b/frontend/src/app/main/ui/shapes/text/fo_text.cljs index f1241238da..8e2b1e5284 100644 --- a/frontend/src/app/main/ui/shapes/text/fo_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/fo_text.cljs @@ -196,7 +196,7 @@ ;; We use a class here because react has a bug that won't use the appropriate selector for ;; `background-clip` [:style ".text-node { background-clip: text; - -webkit-background-clip: text; }" ] + -webkit-background-clip: text; }"] [:& render-node {:index 0 :shape shape :node content}]])) diff --git a/frontend/src/app/main/ui/shapes/text/html_text.cljs b/frontend/src/app/main/ui/shapes/text/html_text.cljs index 859228157b..da23426c2e 100644 --- a/frontend/src/app/main/ui/shapes/text/html_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/html_text.cljs @@ -121,7 +121,7 @@ ;; `background-clip` (when (not code?) [:style ".text-node { background-clip: text; - -webkit-background-clip: text; }" ]) + -webkit-background-clip: text; }"]) [:& render-node {:index 0 :shape shape :node content diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 2f86b0bce3..90243b9178 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -121,7 +121,7 @@ [{:keys [section index users frame page]}] (let [comments-local (mf/deref refs/comments-local) show-sidebar? (and (= section :comments) (:show-sidebar? comments-local))] - [:* + [:* [:& viewer-pagination {:index index :num-frames (count (:frames page)) diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index 2514fbb14b..1372696fea 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -40,7 +40,7 @@ (let [mode (-> (dom/get-current-target event) (dom/get-data "value") (keyword))] - (st/emit! (dcm/update-filters {:mode mode}))))) + (st/emit! (dcm/update-filters {:mode mode}))))) update-show (mf/use-callback @@ -48,7 +48,7 @@ (let [mode (-> (dom/get-current-target event) (dom/get-data "value") (d/read-string))] - (st/emit! (dcm/update-filters {:show mode}))))) + (st/emit! (dcm/update-filters {:show mode}))))) update-options (mf/use-callback diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index ab5933155b..b168cad56d 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -275,13 +275,13 @@ (mf/use-fn (mf/deps permissions) (fn [event] - (let [section (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] + (let [section (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] - (if (or (= section :interactions) (:is-logged permissions)) - (st/emit! (dv/go-to-section section)) - (open-login-dialog)))))] + (if (or (= section :interactions) (:is-logged permissions)) + (st/emit! (dv/go-to-section section)) + (open-login-dialog)))))] [:header {:class (stl/css :viewer-header)} [:div {:class (stl/css :nav-zone)} diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index d653518342..b2397d30b9 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -80,7 +80,7 @@ handle-expand (mf/use-callback (mf/deps right-size) - (fn[] + (fn [] (set-right-size (if (> right-size 276) 276 768))))] (mf/use-effect on-mount) diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 4f9886d28d..8074ca7bcb 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -148,7 +148,7 @@ (if (= (:type shape) :frame) ;; manual interactions are always from "self" (:frame-id shape) (:id shape)) - (:position-relative-to interaction)) + (:position-relative-to interaction)) relative-to-shape (or (get objects relative-to-id) base-frame) overlays-ids (set (map :id overlays)) relative-to-base-frame (find-relative-to-base-frame relative-to-shape objects overlays-ids base-frame) @@ -278,68 +278,68 @@ "Wrap some svg shape and add interaction controls" [component] (mf/fnc generic-wrapper - {::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - childs (unchecked-get props "childs") - frame (unchecked-get props "frame") - objects (unchecked-get props "objects") - all-objects (or (unchecked-get props "all-objects") objects) - base-frame (mf/use-ctx base-frame-ctx) - frame-offset (mf/use-ctx frame-offset-ctx) - interactions-show? (mf/deref viewer-interactions-show?) - overlays (mf/deref refs/viewer-overlays) - interactions (:interactions shape) - svg-element? (and (= :svg-raw (:type shape)) - (not= :svg (get-in shape [:content :tag]))) + {::mf/wrap-props false} + [props] + (let [shape (unchecked-get props "shape") + childs (unchecked-get props "childs") + frame (unchecked-get props "frame") + objects (unchecked-get props "objects") + all-objects (or (unchecked-get props "all-objects") objects) + base-frame (mf/use-ctx base-frame-ctx) + frame-offset (mf/use-ctx frame-offset-ctx) + interactions-show? (mf/deref viewer-interactions-show?) + overlays (mf/deref refs/viewer-overlays) + interactions (:interactions shape) + svg-element? (and (= :svg-raw (:type shape)) + (not= :svg (get-in shape [:content :tag]))) - ;; The objects parameter has the shapes that we must draw. It may be a subset of - ;; all-objects in some cases (e.g. if there are fixed elements). But for interactions - ;; handling we need access to all objects inside the page. + ;; The objects parameter has the shapes that we must draw. It may be a subset of + ;; all-objects in some cases (e.g. if there are fixed elements). But for interactions + ;; handling we need access to all objects inside the page. - on-pointer-down - (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) - #(on-pointer-down % shape base-frame frame-offset all-objects overlays)) + on-pointer-down + (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) + #(on-pointer-down % shape base-frame frame-offset all-objects overlays)) - on-pointer-up - (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) - #(on-pointer-up % shape base-frame frame-offset all-objects overlays)) + on-pointer-up + (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) + #(on-pointer-up % shape base-frame frame-offset all-objects overlays)) - on-pointer-enter - (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) - #(on-pointer-enter % shape base-frame frame-offset all-objects overlays)) + on-pointer-enter + (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) + #(on-pointer-enter % shape base-frame frame-offset all-objects overlays)) - on-pointer-leave - (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) - #(on-pointer-leave % shape base-frame frame-offset all-objects overlays))] + on-pointer-leave + (mf/use-fn (mf/deps shape base-frame frame-offset all-objects) + #(on-pointer-leave % shape base-frame frame-offset all-objects overlays))] - (mf/with-effect [] - (let [sems (on-load shape base-frame frame-offset objects overlays)] - (partial run! tm/dispose! sems))) + (mf/with-effect [] + (let [sems (on-load shape base-frame frame-offset objects overlays)] + (partial run! tm/dispose! sems))) - (if-not svg-element? - [:> shape-container {:shape shape - :cursor (when (ctsi/actionable? interactions) "pointer") - :on-pointer-down on-pointer-down - :on-pointer-up on-pointer-up - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} + (if-not svg-element? + [:> shape-container {:shape shape + :cursor (when (ctsi/actionable? interactions) "pointer") + :on-pointer-down on-pointer-down + :on-pointer-up on-pointer-up + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} - [:& component {:shape shape - :frame frame - :childs childs - :is-child-selected? true - :objects objects}] + [:& component {:shape shape + :frame frame + :childs childs + :is-child-selected? true + :objects objects}] - [:& interaction {:shape shape - :interactions interactions - :interactions-show? interactions-show?}]] + [:& interaction {:shape shape + :interactions interactions + :interactions-show? interactions-show?}]] ;; Don't wrap svg elements inside a otherwise some can break - [:& component {:shape shape - :frame frame - :childs childs - :objects objects}])))) + [:& component {:shape shape + :frame frame + :childs childs + :objects objects}])))) (defn frame-wrapper [shape-container] @@ -400,41 +400,41 @@ (let [shape-container (shape-container-factory objects all-objects) group-wrapper (group-wrapper shape-container)] (mf/fnc group-container - {::mf/wrap-props false} - [props] - (let [childs (mapv #(get objects %) (:shapes (unchecked-get props "shape"))) - props (obj/merge! #js {} props - #js {:childs childs - :objects objects})] - (when (not-empty childs) - [:> group-wrapper props]))))) + {::mf/wrap-props false} + [props] + (let [childs (mapv #(get objects %) (:shapes (unchecked-get props "shape"))) + props (obj/merge! #js {} props + #js {:childs childs + :objects objects})] + (when (not-empty childs) + [:> group-wrapper props]))))) (defn bool-container-factory [objects all-objects] (let [shape-container (shape-container-factory objects all-objects) bool-wrapper (bool-wrapper shape-container)] (mf/fnc bool-container - {::mf/wrap-props false} - [props] - (let [childs (->> (cfh/get-children-ids objects (:id (unchecked-get props "shape"))) - (select-keys objects)) - props (obj/merge! #js {} props - #js {:childs childs - :objects objects})] - [:> bool-wrapper props])))) + {::mf/wrap-props false} + [props] + (let [childs (->> (cfh/get-children-ids objects (:id (unchecked-get props "shape"))) + (select-keys objects)) + props (obj/merge! #js {} props + #js {:childs childs + :objects objects})] + [:> bool-wrapper props])))) (defn svg-raw-container-factory [objects all-objects] (let [shape-container (shape-container-factory objects all-objects) svg-raw-wrapper (svg-raw-wrapper shape-container)] (mf/fnc svg-raw-container - {::mf/wrap-props false} - [props] - (let [childs (mapv #(get objects %) (:shapes (unchecked-get props "shape"))) - props (obj/merge! #js {} props - #js {:childs childs - :objects objects})] - [:> svg-raw-wrapper props])))) + {::mf/wrap-props false} + [props] + (let [childs (mapv #(get objects %) (:shapes (unchecked-get props "shape"))) + props (obj/merge! #js {} props + #js {:childs childs + :objects objects})] + [:> svg-raw-wrapper props])))) (defn shape-container-factory [objects all-objects] @@ -444,28 +444,28 @@ image-wrapper (image-wrapper) circle-wrapper (circle-wrapper)] (mf/fnc shape-container - {::mf/wrap-props false - ::mf/wrap [mf/memo]} - [props] - (let [shape (unchecked-get props "shape") - frame (unchecked-get props "frame") + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [props] + (let [shape (unchecked-get props "shape") + frame (unchecked-get props "frame") - group-container - (mf/with-memo [objects] - (group-container-factory objects all-objects)) + group-container + (mf/with-memo [objects] + (group-container-factory objects all-objects)) - frame-container - (mf/with-memo [objects] - (frame-container-factory objects all-objects)) + frame-container + (mf/with-memo [objects] + (frame-container-factory objects all-objects)) - bool-container - (mf/with-memo [objects] - (bool-container-factory objects all-objects)) + bool-container + (mf/with-memo [objects] + (bool-container-factory objects all-objects)) - svg-raw-container - (mf/with-memo [objects] - (svg-raw-container-factory objects all-objects))] - (when (and shape (not (:hidden shape))) + svg-raw-container + (mf/with-memo [objects] + (svg-raw-container-factory objects all-objects))] + (when (and shape (not (:hidden shape))) (let [shape (if frame (gsh/translate-to-frame shape frame) shape) @@ -473,13 +473,13 @@ opts #js {:shape shape :objects objects :all-objects all-objects}] - (case (:type shape) - :frame [:> frame-container opts] - :text [:> text-wrapper opts] - :rect [:> rect-wrapper opts] - :path [:> path-wrapper opts] - :image [:> image-wrapper opts] - :circle [:> circle-wrapper opts] - :group [:> group-container {:shape shape :frame frame :objects objects}] - :bool [:> bool-container {:shape shape :frame frame :objects objects}] - :svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}]))))))) + (case (:type shape) + :frame [:> frame-container opts] + :text [:> text-wrapper opts] + :rect [:> rect-wrapper opts] + :path [:> path-wrapper opts] + :image [:> image-wrapper opts] + :circle [:> circle-wrapper opts] + :group [:> group-container {:shape shape :frame frame :objects objects}] + :bool [:> bool-container {:shape shape :frame frame :objects objects}] + :svg-raw [:> svg-raw-container {:shape shape :frame frame :objects objects}]))))))) diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs index ccecb957b6..ceaeebd9b7 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette.cljs @@ -26,8 +26,8 @@ (letfn [(select-color [event] (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))] [:div {:class (stl/css-case :color-cell true - :is-not-library-color (nil? (:id color)) - :no-text (<= size 64)) + :is-not-library-color (nil? (:id color)) + :no-text (<= size 64)) :title (uc/get-color-name color) :on-click select-color} [:& cb/color-bullet {:color color}] diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index c3a5ea5413..72be7f0a80 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -57,7 +57,7 @@ [:div {:class (stl/css :lib-name-wrapper)} [:span {:class (stl/css :lib-name)} - (dm/str (tr "workspace.libraries.colors.file-library"))] + (dm/str (tr "workspace.libraries.colors.file-library"))] [:span {:class (stl/css :lib-num)} (dm/str "(" (count file-colors) ")")]] @@ -81,7 +81,7 @@ [:span {:class (stl/css :lib-name)} (dm/str (tr "workspace.libraries.colors.recent-colors"))] [:span {:class (stl/css :lib-num)} - (dm/str "("(count recent-colors) ")")]] + (dm/str "(" (count recent-colors) ")")]] (when (= selected :recent) [:span {:class (stl/css :icon-wrapper)} diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 4972589ed6..eaf1660371 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -78,21 +78,21 @@ selected-mode (get state :type :color) disabled-color-accept? (and - (= selected-mode :image) - (not (:image current-color))) + (= selected-mode :image) + (not (:image current-color))) on-fill-image-success (mf/use-fn - (fn [image] - (st/emit! (dc/update-colorpicker-color {:image (select-keys image [:id :width :height :mtype :name])} (not @drag?))))) + (fn [image] + (st/emit! (dc/update-colorpicker-color {:image (select-keys image [:id :width :height :mtype :name])} (not @drag?))))) on-fill-image-click (mf/use-callback #(dom/click (mf/ref-val fill-image-ref))) on-fill-image-selected (mf/use-fn - (fn [file] - (st/emit! (dwm/upload-fill-image file on-fill-image-success)))) + (fn [file] + (st/emit! (dwm/upload-fill-image file on-fill-image-success)))) set-tab! (mf/use-fn @@ -218,7 +218,7 @@ options (mf/with-memo [selected-mode disable-gradient disable-image] - (d/concat-vec + (d/concat-vec [{:value :color :label (tr "media.solid")}] (when (not disable-gradient) [{:value :linear-gradient :label (tr "media.linear")} diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 5970835a0b..fe52c2e924 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -58,7 +58,7 @@ (-> (dw/toggle-layout-flag :colorpalette) (vary-meta assoc ::ev/origin "workspace-colorpicker")))))) - shared-libs-options (mapv (fn[lib] {:value (d/name (:id lib)) :label (:name lib)} ) (vals shared-libs)) + shared-libs-options (mapv (fn [lib] {:value (d/name (:id lib)) :label (:name lib)}) (vals shared-libs)) library-options [{:value "recent" :label (tr "workspace.libraries.colors.recent-colors")} @@ -69,7 +69,7 @@ on-color-click (mf/use-fn (mf/deps state) - (fn[event] + (fn [event] (on-select-color state event)))] ;; Load library colors when the select is changed diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index af84fffa69..cb5e635f85 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -555,7 +555,7 @@ (mf/deps grid-id type index) (fn [] (st/emit! (dwsl/remove-layout-track [grid-id] type index {:with-shapes? true}))))] - + (if (= type :column) [:* [:& menu-entry {:title (tr "workspace.context-menu.grid-track.column.duplicate") :on-click do-duplicate-track}] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 1be9a2a836..11bf957743 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -42,8 +42,8 @@ (refs/children-objects shape-id)) childs (mf/deref childs-ref)] - [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)} - [:& frame-shape {:shape shape :childs childs}]])))) + [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)} + [:& frame-shape {:shape shape :childs childs}]])))) (defn check-props [new-props old-props] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index f2fe8e3b9c..41f0584b35 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs @@ -311,6 +311,4 @@ (reset! prev-modifiers modifiers) (reset! prev-transforms transforms) - (reset! prev-shapes shapes)) - - )) + (reset! prev-shapes shapes)))) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs index 964c194df0..e9a4137140 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs @@ -308,7 +308,7 @@ ;; edited (mf/use-effect (fn [] - (let [text-nodes (->> text-shapes (vals)(mapcat #(txt/node-seq txt/is-text-node? (:content %)))) + (let [text-nodes (->> text-shapes (vals) (mapcat #(txt/node-seq txt/is-text-node? (:content %)))) fonts (into #{} (keep :font-id) text-nodes)] (run! fonts/ensure-loaded! fonts)))) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index ddda4cf013..faa27b292d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -111,7 +111,7 @@ (mf/defc right-sidebar {::mf/wrap-props false ::mf/wrap [mf/memo]} - [{:keys [layout section file page-id ] :as props}] + [{:keys [layout section file page-id] :as props}] (let [drawing-tool (:tool (mf/deref refs/workspace-drawing)) is-comments? (= drawing-tool :comments) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index cb67bf83df..09118cffa6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -127,31 +127,31 @@ (mf/use-fn #(swap! filters* assoc :open-menu false)) options (into [] (remove nil? - [{:option-name (tr "workspace.assets.box-filter-all") - :id "section-all" - :option-handler on-section-filter-change - :data-test "all"} + [{:option-name (tr "workspace.assets.box-filter-all") + :id "section-all" + :option-handler on-section-filter-change + :data-test "all"} - {:option-name (tr "workspace.assets.components") - :id "section-components" - :option-handler on-section-filter-change - :data-test "components"} + {:option-name (tr "workspace.assets.components") + :id "section-components" + :option-handler on-section-filter-change + :data-test "components"} - (when (not components-v2) - {:option-name (tr "workspace.assets.graphics") - :id "section-graphics" - :option-handler on-section-filter-change - :data-test "graphics"}) + (when (not components-v2) + {:option-name (tr "workspace.assets.graphics") + :id "section-graphics" + :option-handler on-section-filter-change + :data-test "graphics"}) - {:option-name (tr "workspace.assets.colors") - :id "section-color" - :option-handler on-section-filter-change - :data-test "colors"} + {:option-name (tr "workspace.assets.colors") + :id "section-color" + :option-handler on-section-filter-change + :data-test "colors"} - {:option-name (tr "workspace.assets.typography") - :id "section-typography" - :option-handler on-section-filter-change - :data-test "typographies"}]))] + {:option-name (tr "workspace.assets.typography") + :id "section-typography" + :option-handler on-section-filter-change + :data-test "typographies"}]))] [:div {:class (stl/css :assets-bar)} [:div {:class (stl/css :assets-header)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 833c573f7a..b443902867 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -59,10 +59,10 @@ ;; NOTE: We don't schedule the thumbnail generation on idle right now ;; until we can queue and handle thumbnail batching properly. - #_(mf/with-effect [] - (when-not (some? thumbnail-uri) - (tm/schedule-on-idle - #(st/emit! (dwl/update-component-thumbnail (:id component) file-id))))) +#_(mf/with-effect [] + (when-not (some? thumbnail-uri) + (tm/schedule-on-idle + #(st/emit! (dwl/update-component-thumbnail (:id component) file-id))))) (mf/defc components-item diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index d85b1979cb..2f549e67fc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -387,71 +387,71 @@ (partial on-asset-click groups))] (mf/use-effect - (mf/deps local-data ) + (mf/deps local-data) (fn [] (when (:edit-typography local-data) (st/emit! #(update % :workspace-global dissoc :edit-typography))))) [:* [:& cmm/asset-section {:file-id file-id - :title (tr "workspace.assets.typography") - :section :typographies - :assets-count (count typographies) - :open? open?} - (when local? - [:& cmm/asset-section-block {:role :title-button} - (when-not read-only? - [:button {:class (stl/css :assets-btn) - :on-click add-typography} - i/add-refactor])]) + :title (tr "workspace.assets.typography") + :section :typographies + :assets-count (count typographies) + :open? open?} + (when local? + [:& cmm/asset-section-block {:role :title-button} + (when-not read-only? + [:button {:class (stl/css :assets-btn) + :on-click add-typography} + i/add-refactor])]) - [:& cmm/asset-section-block {:role :content} - [:& typographies-group {:file-id file-id - :prefix "" - :groups groups - :open-groups open-groups - :force-open? force-open? - :state state - :file file - :local? local? - :selected selected - :editing-id editing-id - :renaming-id renaming-id - :local-data local-data - :on-asset-click on-asset-click - :handle-change handle-change - :apply-typography apply-typography - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full}] + [:& cmm/asset-section-block {:role :content} + [:& typographies-group {:file-id file-id + :prefix "" + :groups groups + :open-groups open-groups + :force-open? force-open? + :state state + :file file + :local? local? + :selected selected + :editing-id editing-id + :renaming-id renaming-id + :local-data local-data + :on-asset-click on-asset-click + :handle-change handle-change + :apply-typography apply-typography + :on-rename-group on-rename-group + :on-ungroup on-ungroup + :on-context-menu on-context-menu + :selected-full selected-full}] - (if local? - [:& cmm/assets-context-menu - {:on-close on-close-menu - :state @menu-state - :options [(when-not (or multi-typographies? multi-assets?) - {:option-name (tr "workspace.assets.rename") - :id "assets-rename-typography" - :option-handler handle-rename-typography-clicked}) + (if local? + [:& cmm/assets-context-menu + {:on-close on-close-menu + :state @menu-state + :options [(when-not (or multi-typographies? multi-assets?) + {:option-name (tr "workspace.assets.rename") + :id "assets-rename-typography" + :option-handler handle-rename-typography-clicked}) - (when-not (or multi-typographies? multi-assets?) - {:option-name (tr "workspace.assets.edit") - :id "assets-edit-typography" - :option-handler handle-edit-typography-clicked}) + (when-not (or multi-typographies? multi-assets?) + {:option-name (tr "workspace.assets.edit") + :id "assets-edit-typography" + :option-handler handle-edit-typography-clicked}) - {:option-name (tr "workspace.assets.delete") - :id "assets-delete-typography" - :option-handler handle-delete-typography} + {:option-name (tr "workspace.assets.delete") + :id "assets-delete-typography" + :option-handler handle-delete-typography} - (when-not multi-assets? - {:option-name (tr "workspace.assets.group") - :id "assets-group-typography" - :option-handler on-group})]}] + (when-not multi-assets? + {:option-name (tr "workspace.assets.group") + :id "assets-group-typography" + :option-handler on-group})]}] - [:& cmm/assets-context-menu - {:on-close on-close-menu - :state @menu-state - :options [{:option-name "show info" - :id "assets-rename-typography" - :option-handler handle-edit-typography-clicked}]}])]]])) + [:& cmm/assets-context-menu + {:on-close on-close-menu + :state @menu-state + :options [{:option-name "show info" + :id "assets-rename-typography" + :option-handler handle-edit-typography-clicked}]}])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 4c292d905d..b124e62155 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -260,27 +260,27 @@ (let [{entries :items} (mf/deref workspace-undo) objects (mf/deref refs/workspace-page-objects)] - [:div {:class (stl/css :history-entry-detail)} - (case (:operation entry) - :new - (:name (get-object (:detail entry) entries objects)) + [:div {:class (stl/css :history-entry-detail)} + (case (:operation entry) + :new + (:name (get-object (:detail entry) entries objects)) - :delete - [:ul {:class (stl/css :history-entry-details-list)} - (for [id (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} shape-name]))] + :delete + [:ul {:class (stl/css :history-entry-details-list)} + (for [id (:detail entry)] + (let [shape-name (:name (get-object id entries objects))] + [:li {:key id} shape-name]))] - :modify - [:ul {:class (stl/css :history-entry-details-list)} - (for [[id attributes] (:detail entry)] - (let [shape-name (:name (get-object id entries objects))] - [:li {:key id} - [:div shape-name] - [:div (str/join ", " attributes)]]))] + :modify + [:ul {:class (stl/css :history-entry-details-list)} + (for [[id attributes] (:detail entry)] + (let [shape-name (:name (get-object id entries objects))] + [:li {:key id} + [:div shape-name] + [:div (str/join ", " attributes)]]))] - nil)])) + nil)])) (mf/defc history-entry [{:keys [locale entry idx-entry disabled? current?]}] (let [hover? (mf/use-state false) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index e5f1a9479c..8fda8b4958 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -317,78 +317,78 @@ (fn [style] (swap! filters* assoc :listing-thumbs? (= style "grid"))))] - [:div {:class (stl/css :component-swap)} - [:div {:class (stl/css :element-set-title)} - [:span (tr "workspace.options.component.swap")]] - [:div {:class (stl/css :component-swap-content)} - [:div {:class (stl/css :search-field)} - [:& search-bar {:on-change on-search-term-change - :clear-action on-search-clear-click - :value (:term filters) - :placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name])) - :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] + [:div {:class (stl/css :component-swap)} + [:div {:class (stl/css :element-set-title)} + [:span (tr "workspace.options.component.swap")]] + [:div {:class (stl/css :component-swap-content)} + [:div {:class (stl/css :search-field)} + [:& search-bar {:on-change on-search-term-change + :clear-action on-search-clear-click + :value (:term filters) + :placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name])) + :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]] - [:div {:class (stl/css :select-field)} - [:& select - {:class (stl/css :select-library) - :default-value current-library-id - :options libraries-options - :on-change on-library-change}]] + [:div {:class (stl/css :select-field)} + [:& select + {:class (stl/css :select-library) + :default-value current-library-id + :options libraries-options + :on-change on-library-change}]] - [:div {:class (stl/css :library-name)} current-library-name] + [:div {:class (stl/css :library-name)} current-library-name] - [:div {:class (stl/css :listing-options-wrapper)} - [:& radio-buttons {:class (stl/css :listing-options) - :selected (if (:listing-thumbs? filters) "grid" "list") - :on-change toggle-list-style - :name "swap-listing-style"} - [:& radio-button {:icon i/view-as-list-refactor - :icon-class (stl/css :radio-button) - :value "list" - :id "swap-opt-list"}] - [:& radio-button {:icon i/flex-grid-refactor - :icon-class (stl/css :radio-button) - :value "grid" - :id "swap-opt-grid"}]]] + [:div {:class (stl/css :listing-options-wrapper)} + [:& radio-buttons {:class (stl/css :listing-options) + :selected (if (:listing-thumbs? filters) "grid" "list") + :on-change toggle-list-style + :name "swap-listing-style"} + [:& radio-button {:icon i/view-as-list-refactor + :icon-class (stl/css :radio-button) + :value "list" + :id "swap-opt-list"}] + [:& radio-button {:icon i/flex-grid-refactor + :icon-class (stl/css :radio-button) + :value "grid" + :id "swap-opt-grid"}]]] - (if (or is-search? (str/empty? (:path filters))) - [:div {:class (stl/css :component-path-empty)}] - [:button {:class (stl/css :component-path) - :on-click on-go-back - :title (:path filters)} - [:span i/arrow-slide] - [:span (:path filters)]]) + (if (or is-search? (str/empty? (:path filters))) + [:div {:class (stl/css :component-path-empty)}] + [:button {:class (stl/css :component-path) + :on-click on-go-back + :title (:path filters)} + [:span i/arrow-slide] + [:span (:path filters)]]) - (when (empty? items) - [:div {:class (stl/css :component-list-empty)} - (tr "workspace.options.component.swap.empty")]) + (when (empty? items) + [:div {:class (stl/css :component-list-empty)} + (tr "workspace.options.component.swap.empty")]) - (when (:listing-thumbs? filters) - [:div {:class (stl/css :component-list)} - (for [item groups] - [:& component-group-item {:item item :on-enter-group on-enter-group}])]) + (when (:listing-thumbs? filters) + [:div {:class (stl/css :component-list)} + (for [item groups] + [:& component-group-item {:item item :on-enter-group on-enter-group}])]) - [:div {:class (stl/css-case :component-grid (:listing-thumbs? filters) - :component-list (not (:listing-thumbs? filters)))} - (for [item items] - (if (:id item) - (let [data (get-in libraries [current-library-id :data]) - container (ctf/get-component-page data item) - root-shape (ctf/get-component-root data item) - loop? (or (contains? parent-components (:main-instance-id item)) - (contains? parent-components (:id item)))] - [:& component-swap-item {:key (:id item) - :item item - :loop loop? - :shapes shapes - :file-id current-library-id - :root-shape root-shape - :container container - :component-id current-comp-id - :is-search is-search? - :listing-thumbs (:listing-thumbs? filters)}]) - [:& component-group-item {:item item :on-enter-group on-enter-group}]))]]])) + [:div {:class (stl/css-case :component-grid (:listing-thumbs? filters) + :component-list (not (:listing-thumbs? filters)))} + (for [item items] + (if (:id item) + (let [data (get-in libraries [current-library-id :data]) + container (ctf/get-component-page data item) + root-shape (ctf/get-component-root data item) + loop? (or (contains? parent-components (:main-instance-id item)) + (contains? parent-components (:id item)))] + [:& component-swap-item {:key (:id item) + :item item + :loop loop? + :shapes shapes + :file-id current-library-id + :root-shape root-shape + :container container + :component-id current-comp-id + :is-search is-search? + :listing-thumbs (:listing-thumbs? filters)}]) + [:& component-group-item {:item item :on-enter-group on-enter-group}]))]]])) (mf/defc component-ctx-menu [{:keys [menu-entries on-close show] :as props}] @@ -397,14 +397,14 @@ (dom/stop-propagation event) (action) (on-close))] - [:& dropdown {:show show :on-close on-close} - [:ul {:class (stl/css :custom-select-dropdown)} - (for [entry menu-entries :when (not (nil? entry))] - [:li {:key (uuid/next) - :class (stl/css :dropdown-element) - :on-click (partial do-action (:action entry))} - [:span {:class (stl/css :dropdown-label)} - (tr (:msg entry))]])]])) + [:& dropdown {:show show :on-close on-close} + [:ul {:class (stl/css :custom-select-dropdown)} + (for [entry menu-entries :when (not (nil? entry))] + [:li {:key (uuid/next) + :class (stl/css :dropdown-element) + :on-click (partial do-action (:action entry))} + [:span {:class (stl/css :dropdown-label)} + (tr (:msg entry))]])]])) (mf/defc component-menu [{:keys [shapes swap-opened?] :as props}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 58fe4f1e92..4e45960c57 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -74,7 +74,7 @@ (st/emit! (dc/add-fill ids {:color default-color :opacity 1})) - (when (not (some? (seq fills))) (open-content)))) + (when (not (some? (seq fills))) (open-content)))) on-change (mf/use-fn diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index 7d9da91219..dacb1d8d7e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -46,28 +46,28 @@ (set-alignment (-> value keyword))))] [:div {:class (stl/css :self-align-menu)} - [:& radio-buttons {:selected (d/name alignment) - :on-change handle-set-alignment - :name (dm/str "flex-align-items-" type)} - [:& radio-button {:value "start" - :icon (if is-col? i/align-self-row-left-refactor i/align-self-column-top-refactor) - :title "Align self start" - :id (dm/str "align-self-start-" type)}] + [:& radio-buttons {:selected (d/name alignment) + :on-change handle-set-alignment + :name (dm/str "flex-align-items-" type)} + [:& radio-button {:value "start" + :icon (if is-col? i/align-self-row-left-refactor i/align-self-column-top-refactor) + :title "Align self start" + :id (dm/str "align-self-start-" type)}] - [:& radio-button {:value "center" - :icon (if is-col? i/align-self-row-center-refactor i/align-self-column-center-refactor) - :title "Align self center" - :id (dm/str "align-self-center-" type)}] + [:& radio-button {:value "center" + :icon (if is-col? i/align-self-row-center-refactor i/align-self-column-center-refactor) + :title "Align self center" + :id (dm/str "align-self-center-" type)}] - [:& radio-button {:value "end" - :icon (if is-col? i/align-self-row-right-refactor i/align-self-column-bottom-refactor) - :title "Align self end" - :id (dm/str "align-self-end-" type)}] + [:& radio-button {:value "end" + :icon (if is-col? i/align-self-row-right-refactor i/align-self-column-bottom-refactor) + :title "Align self end" + :id (dm/str "align-self-end-" type)}] - [:& radio-button {:value "stretch" - :icon (if is-col? i/align-self-row-strech i/align-self-column-strech) - :title "Align self stretch" - :id (dm/str "align-self-stretch-" type)}]]])) + [:& radio-button {:value "stretch" + :icon (if is-col? i/align-self-row-strech i/align-self-column-strech) + :title "Align self stretch" + :id (dm/str "align-self-stretch-" type)}]]])) (mf/defc options diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 67138d85e0..42c3718019 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -225,7 +225,7 @@ (mf/use-fn (mf/deps index) (fn [value] - (update-interaction index #(ctsi/set-delay % value)))) + (update-interaction index #(ctsi/set-delay % value)))) change-destination (mf/use-fn @@ -246,27 +246,27 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (-> event dom/get-target dom/checked?)] - (update-interaction index #(ctsi/set-preserve-scroll % value))))) + (let [value (-> event dom/get-target dom/checked?)] + (update-interaction index #(ctsi/set-preserve-scroll % value))))) change-url (mf/use-fn (mf/deps index) (fn [event] - (let [target (dom/get-target event) - value (dom/get-value target) - has-prefix? (or (str/starts-with? value "http://") - (str/starts-with? value "https://")) - value (if has-prefix? - value - (str "http://" value))] - (when-not has-prefix? - (dom/set-value! target value)) - (if (dom/valid? target) - (do - (dom/remove-class! target "error") - (update-interaction index #(ctsi/set-url % value))) - (dom/add-class! target "error"))))) + (let [target (dom/get-target event) + value (dom/get-value target) + has-prefix? (or (str/starts-with? value "http://") + (str/starts-with? value "https://")) + value (if has-prefix? + value + (str "http://" value))] + (when-not has-prefix? + (dom/set-value! target value)) + (if (dom/valid? target) + (do + (dom/remove-class! target "error") + (update-interaction index #(ctsi/set-url % value))) + (dom/add-class! target "error"))))) change-overlay-pos-type (mf/use-fn @@ -290,15 +290,15 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (-> event dom/get-target dom/checked?)] - (update-interaction index #(ctsi/set-close-click-outside % value))))) + (let [value (-> event dom/get-target dom/checked?)] + (update-interaction index #(ctsi/set-close-click-outside % value))))) change-background-overlay (mf/use-fn (mf/deps index) (fn [event] - (let [value (-> event dom/get-target dom/checked?)] - (update-interaction index #(ctsi/set-background-overlay % value))))) + (let [value (-> event dom/get-target dom/checked?)] + (update-interaction index #(ctsi/set-background-overlay % value))))) change-animation-type (mf/use-fn @@ -310,36 +310,36 @@ (update-interaction index #(ctsi/set-animation-type % value))))) change-duration - (mf/use-fn(fn [value] - (update-interaction index #(ctsi/set-duration % value)))) + (mf/use-fn (fn [value] + (update-interaction index #(ctsi/set-duration % value)))) change-easing (mf/use-fn (mf/deps index) (fn [event] - (let [value (keyword event)] - (update-interaction index #(ctsi/set-easing % value))))) + (let [value (keyword event)] + (update-interaction index #(ctsi/set-easing % value))))) change-way (mf/use-fn (mf/deps index) (fn [event] - (let [value (keyword event)] - (update-interaction index #(ctsi/set-way % value))))) + (let [value (keyword event)] + (update-interaction index #(ctsi/set-way % value))))) change-direction (mf/use-fn (mf/deps index) (fn [event] - (let [value (keyword event)] - (update-interaction index #(ctsi/set-direction % value))))) + (let [value (keyword event)] + (update-interaction index #(ctsi/set-direction % value))))) change-offset-effect (mf/use-fn (mf/deps index) (fn [event] - (let [value (-> event dom/get-target dom/checked?)] - (update-interaction index #(ctsi/set-offset-effect % value))))) + (let [value (-> event dom/get-target dom/checked?)] + (update-interaction index #(ctsi/set-offset-effect % value))))) event-type-options [{:value :click :label (tr "workspace.options.interaction-on-click")} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 13e181efb5..5d98c2b6ee 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -41,13 +41,13 @@ (let [margin-type (or (:layout-item-margin-type values) :simple) m1 (when (and (not (= :multiple (:layout-item-margin values))) - (= (dm/get-in values [:layout-item-margin :m1]) - (dm/get-in values [:layout-item-margin :m3]))) + (= (dm/get-in values [:layout-item-margin :m1]) + (dm/get-in values [:layout-item-margin :m3]))) (dm/get-in values [:layout-item-margin :m1])) m2 (when (and (not (= :multiple (:layout-item-margin values))) - (= (dm/get-in values [:layout-item-margin :m2]) - (dm/get-in values [:layout-item-margin :m4]))) + (= (dm/get-in values [:layout-item-margin :m2]) + (dm/get-in values [:layout-item-margin :m4]))) (dm/get-in values [:layout-item-margin :m2])) select-margins (fn [m1? m2? m3? m4?] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 874e4628a5..063466dcc9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -113,7 +113,7 @@ (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :color] - (dissoc color :id :file-id)))))) + (dissoc color :id :file-id)))))) detach-color (mf/use-fn diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 15be74946d..906925620d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -264,7 +264,5 @@ (when select-only [:button {:class (stl/css :select-btn) :on-click handle-select} - i/move-refactor])] - - )) + i/move-refactor])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index a562269aec..736a71c304 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -231,8 +231,8 @@ (-> values (merge-attrs (select-keys shape attrs)) (merge-attrs (merge - (select-keys txt/default-text-attrs attrs) - (attrs/get-attrs-multi (txt/node-seq content) attrs))))] + (select-keys txt/default-text-attrs attrs) + (attrs/get-attrs-multi (txt/node-seq content) attrs))))] :children (let [children (->> (:shapes shape []) (map #(get objects %))) [new-ids new-values] (get-attrs* children objects attr-group)] diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs index bd8a902007..8e4988a09c 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -21,7 +21,7 @@ shared-libs (mf/deref refs/workspace-libraries)] [:& dropdown {:show show-menu? :on-close close-menu} - [:ul {:class (stl/css :workspace-context-menu) } + [:ul {:class (stl/css :workspace-context-menu)} (for [[idx cur-library] (map-indexed vector (vals shared-libs))] (let [typographies (-> cur-library (get-in [:data :typographies]) vals)] [:li diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index aa59d9e91f..ce44c02929 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -78,6 +78,4 @@ [:& cmt/draft-thread {:draft draft :on-cancel on-draft-cancel :on-submit on-draft-submit - :zoom zoom}])]]] - - )) + :zoom zoom}])]]])) diff --git a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs b/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs index 99f692f6e8..61246ea705 100644 --- a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs @@ -173,7 +173,7 @@ [:g.grid-display {:style {:pointer-events "none"}} (for [frame frames] (when (and #_(not (is-transform? frame)) - (not (ctst/rotated-frame? frame)) + (not (ctst/rotated-frame? frame)) (or (empty? focus) (contains? focus (:id frame)))) [:& grid-display-frame {:key (str "grid-" (:id frame)) :zoom zoom diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs index f1cb78ee2e..ae1dee6537 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs @@ -250,7 +250,7 @@ width-v (-> gradient-vec (gpt/normal-left) - (gpt/multiply (gpt/point (* (:width gradient) (/ gradient-length (/ height 2) )))) + (gpt/multiply (gpt/point (* (:width gradient) (/ gradient-length (/ height 2))))) (gpt/multiply (gpt/point (/ width 2)))) width-p (gpt/add from-p width-v) diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index fcac73c07b..0e95f631fd 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -553,7 +553,7 @@ [:rect.drop {:x (:x start-p-drop) :y (:y start-p-drop) - :width (if (= type :column)(/ 10 zoom) width) + :width (if (= type :column) (/ 10 zoom) width) :height (if (= type :row) (/ 10 zoom) height) :fill "var(--grid-editor-area-background)"}]) diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index 82b220fc6e..9d1b481d28 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs @@ -250,11 +250,11 @@ [guide frame] (if (= :x (:axis guide)) - (and (>= (:position guide) (:x frame) ) - (<= (:position guide) (+ (:x frame) (:width frame)) )) + (and (>= (:position guide) (:x frame)) + (<= (:position guide) (+ (:x frame) (:width frame)))) - (and (>= (:position guide) (:y frame) ) - (<= (:position guide) (+ (:y frame) (:height frame)) )))) + (and (>= (:position guide) (:y frame)) + (<= (:position guide) (+ (:y frame) (:height frame)))))) (mf/defc guide {::mf/wrap [mf/memo]} diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 602d08b388..583eeddda5 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -55,11 +55,11 @@ dest-x-center (+ dest-x-left (/ (:width dest-rect) 2)) orig-pos (if (<= orig-x-right dest-x-left) :right - (if (>= orig-x-left dest-x-right) :left - (if (<= orig-x-center dest-x-center) :left :right))) + (if (>= orig-x-left dest-x-right) :left + (if (<= orig-x-center dest-x-center) :left :right))) dest-pos (if (<= orig-x-right dest-x-left) :left - (if (>= orig-x-left dest-x-right) :right - (if (<= orig-x-center dest-x-center) :left :right))) + (if (>= orig-x-left dest-x-right) :right + (if (<= orig-x-center dest-x-center) :left :right))) orig-x (if (= orig-pos :right) orig-x-right orig-x-left) dest-x (if (= dest-pos :right) dest-x-right dest-x-left) @@ -84,11 +84,11 @@ dest-y (:y dest-point) orig-pos (if (<= orig-x-right dest-x) :right - (if (>= orig-x-left dest-x) :left - (if (<= orig-x-center dest-x) :right :left))) + (if (>= orig-x-left dest-x) :left + (if (<= orig-x-center dest-x) :right :left))) dest-pos (if (<= orig-x-right dest-x) :left - (if (>= orig-x-left dest-x) :right - (if (<= orig-x-center dest-x) :right :left))) + (if (>= orig-x-left dest-x) :right + (if (<= orig-x-center dest-x) :right :left))) orig-x (if (= orig-pos :right) orig-x-right orig-x-left) orig-y (+ (:y orig-rect) (/ (:height orig-rect) 2))] @@ -121,21 +121,21 @@ nil) inv-zoom (/ 1 zoom)] [:* - [:circle {:cx 0 - :cy 0 - :r (if (some? action-type) 11 4) - :fill stroke - :transform (str - "scale(" inv-zoom ", " inv-zoom ") " - "translate(" (* zoom x) ", " (* zoom y) ")")}] - (when icon-pdata - [:path {:fill stroke - :stroke-width 2 - :stroke "var(--color-white)" - :d icon-pdata - :transform (str - "scale(" inv-zoom ", " inv-zoom ") " - "translate(" (* zoom x) ", " (* zoom y) ")")}])])) + [:circle {:cx 0 + :cy 0 + :r (if (some? action-type) 11 4) + :fill stroke + :transform (str + "scale(" inv-zoom ", " inv-zoom ") " + "translate(" (* zoom x) ", " (* zoom y) ")")}] + (when icon-pdata + [:path {:fill stroke + :stroke-width 2 + :stroke "var(--color-white)" + :d icon-pdata + :transform (str + "scale(" inv-zoom ", " inv-zoom ") " + "translate(" (* zoom x) ", " (* zoom y) ")")}])])) (mf/defc interaction-path @@ -252,7 +252,7 @@ [:g {:on-pointer-down start-move-position :on-pointer-enter #(reset! hover-disabled? true) :on-pointer-leave #(reset! hover-disabled? false)} - [:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) } + [:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y)))} [:& (mf/provider muc/render-thumbnails) {:value true} [:& (mf/provider embed/context) {:value false} [:& shape-wrapper {:shape dest-shape}]]]] diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs index 43efeda91d..a2d14bb33d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs @@ -90,8 +90,7 @@ :height h :rx (obj/get border-attrs "rx") :ry (obj/get border-attrs "ry") - :d (obj/get border-attrs "d")}))) - ] + :d (obj/get border-attrs "d")})))] [:> outline-type props])) diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index babee74956..1a1b0a9a60 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -38,14 +38,14 @@ canvas)) (def get-offscreen-canvas ((fn [] - (let [internal-state #js { :canvas nil }] - (fn [width height] - (let [canvas (unchecked-get internal-state "canvas")] - (if canvas - (resize-offscreen-canvas canvas width height) - (let [new-canvas (create-offscreen-canvas width height)] - (obj/set! internal-state "canvas" new-canvas) - new-canvas)))))))) + (let [internal-state #js {:canvas nil}] + (fn [width height] + (let [canvas (unchecked-get internal-state "canvas")] + (if canvas + (resize-offscreen-canvas canvas width height) + (let [new-canvas (create-offscreen-canvas width height)] + (obj/set! internal-state "canvas" new-canvas) + new-canvas)))))))) (mf/defc pixel-overlay {::mf/wrap-props false} @@ -143,11 +143,11 @@ :styles styles))) (rx/mapcat thr/render-node) (rx/subs! (fn [image-bitmap] - (.drawImage canvas-context image-bitmap 0 0) - (let [width (unchecked-get canvas "width") - height (unchecked-get canvas "height") - image-data (.getImageData canvas-context 0 0 width height)] - (mf/set-ref-val! canvas-image-data image-data)))))))) + (.drawImage canvas-context image-bitmap 0 0) + (let [width (unchecked-get canvas "width") + height (unchecked-get canvas "height") + image-data (.getImageData canvas-context 0 0 width height)] + (mf/set-ref-val! canvas-image-data image-data)))))))) handle-svg-change (mf/use-callback diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index af978fef0f..c3af821de1 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -262,7 +262,7 @@ :style {:fill rules-background :fill-opacity over-number-opacity}}] - [:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse) ) (:height selection-rect)) + [:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse)) (:height selection-rect)) :y (- center-y (* rule-area-half-size zoom-inverse)) :width (* over-number-size zoom-inverse) :height (* rule-area-size zoom-inverse) @@ -278,7 +278,7 @@ :fill selection-area-color}} (fmt/format-number (- (:y2 selection-rect) offset-y))] - [:text {:x (+ center-x (/ (:height selection-rect) 2) ) + [:text {:x (+ center-x (/ (:height selection-rect) 2)) :y center-y :text-anchor "start" :dominant-baseline "middle" diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 65437ed8d9..5da05fe337 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -69,7 +69,7 @@ :outside :inside)] (->> - [ ;; TOP-LEFT + [;; TOP-LEFT {:type :rotation :position :top-left :props {:cx x :cy y}} diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs index f0739fbc2c..8b0b477cf9 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs @@ -257,8 +257,8 @@ ;; change (rx/switch-map (partial query-worker page-id coord)) (rx/subs! (fn [[lt-shapes gt-shapes]] - (reset! lt-shapes* lt-shapes) - (reset! gt-shapes* gt-shapes))))] + (reset! lt-shapes* lt-shapes) + (reset! gt-shapes* gt-shapes))))] ;; On unmount dispose #(rx/dispose! sub))) diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index 6d17baf8a1..fac3c4ba00 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/utils.cljs @@ -15,7 +15,7 @@ (defn format-viewbox "Format a viewbox to a string" [vbox] - (dm/str (format-number(:x vbox 0)) " " + (dm/str (format-number (:x vbox 0)) " " (format-number (:y vbox 0)) " " (format-number (:width vbox 0)) " " (format-number (:height vbox 0)))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index ec646a9665..ccd92afc36 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -232,8 +232,8 @@ on-double-click (mf/use-callback - (mf/deps (:id frame)) - #(st/emit! (dwi/start-rename-flow (:id flow)))) + (mf/deps (:id frame)) + #(st/emit! (dwi/start-rename-flow (:id flow)))) on-pointer-enter (mf/use-callback @@ -253,12 +253,12 @@ :height 24 :transform (vwu/text-transform flow-pos zoom)} [:div {:class (stl/css-case :flow-badge true - :selected selected?)} + :selected selected?)} [:div {:class (stl/css :content) - :on-pointer-down on-pointer-down - :on-double-click on-double-click - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} + :on-pointer-down on-pointer-down + :on-double-click on-double-click + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} i/play-refactor [:span (:name flow)]]]])) diff --git a/frontend/src/app/rasterizer.cljs b/frontend/src/app/rasterizer.cljs index 157b57a653..19c278593a 100644 --- a/frontend/src/app/rasterizer.cljs +++ b/frontend/src/app/rasterizer.cljs @@ -262,7 +262,7 @@ (= scope "penpot/rasterizer")) (->> (render payload) (rx/subs! (partial send-success! id) - (partial send-failure! id)))))))) + (partial send-failure! id)))))))) (defn- listen "Initializes the listener for messages from the main thread." diff --git a/frontend/src/app/render.cljs b/frontend/src/app/render.cljs index f3f13a0985..8dbcbf43fe 100644 --- a/frontend/src/app/render.cljs +++ b/frontend/src/app/render.cljs @@ -217,9 +217,7 @@ :embed embed} (when-let [component-id (:component-id @state)] - [:use {:x 0 :y 0 :href (str "#" component-id)}])]] - - ]))) + [:use {:x 0 :y 0 :href (str "#" component-id)}])]]]))) (defn- fetch-components-bundle [& {:keys [file-id]}] diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index ad38a63031..69f841dc92 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -31,8 +31,7 @@ :padding :size-array :margin :size-array :grid-template-rows :tracks - :grid-template-columns :tracks - }) + :grid-template-columns :tracks}) (defmulti format-value (fn [property _value _options] (css-formatters property))) @@ -139,7 +138,7 @@ [_ value options] (->> value (map #(format-shadow % options)) - (str/join ", " ))) + (str/join ", "))) (defmethod format-value :blur [_ value _options] diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index 5bc1655806..d7fc4a2bd3 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -56,7 +56,7 @@ (not= color :multiple) (case format :rgba (let [[r g b] (cc/hex->rgb color)] - (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity)) + (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity)) :hsla (let [[h s l] (cc/hex->hsl color)] (str/fmt "hsla(%s, %s, %s, %s)" h (* 100 s) (* 100 l) opacity)) diff --git a/frontend/src/app/util/css.cljs b/frontend/src/app/util/css.cljs index c0fbae2b66..5681bd3077 100644 --- a/frontend/src/app/util/css.cljs +++ b/frontend/src/app/util/css.cljs @@ -32,6 +32,6 @@ (dom/set-attribute! style "type" "text/css") (dom/append-child! js/document.head style) (wrap-style-sheet style))))) - + diff --git a/frontend/src/app/util/debug.cljs b/frontend/src/app/util/debug.cljs index 7bf6304bde..b02cbf48fb 100644 --- a/frontend/src/app/util/debug.cljs +++ b/frontend/src/app/util/debug.cljs @@ -77,8 +77,7 @@ :grid-layout ;; Show an overlay to the grid cells to know its properties - :grid-cells - }) + :grid-cells}) (defn enable! [option] diff --git a/frontend/src/app/util/dom/dnd.cljs b/frontend/src/app/util/dom/dnd.cljs index 06d21bc852..5ea91a22a9 100644 --- a/frontend/src/app/util/dom/dnd.cljs +++ b/frontend/src/app/util/dom/dnd.cljs @@ -42,14 +42,14 @@ (let [;;currentTarget (.-currentTarget event) relatedTarget (.-relatedTarget event)] (js/console.log - label - "[" (:name data) "]" + label + "[" (:name data) "]" ;; (if currentTarget ;; (str "<" (.-localName currentTarget) " " (.-textContent currentTarget) ">") ;; "null") - (if relatedTarget - (str "<" (.-localName relatedTarget) " " (.-textContent relatedTarget) ">") - "null")))) + (if relatedTarget + (str "<" (.-localName relatedTarget) " " (.-textContent relatedTarget) ">") + "null")))) (defn set-data! ([e data] diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index 42063204f4..28271502bb 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/frontend/src/app/util/import/parser.cljs @@ -778,7 +778,7 @@ :stroke-cap-end (get-meta stroke-node :stroke-cap-end keyword)}))) (mapv d/without-nils) (filterv #(not= (:stroke-color %) "none")))] - + (if (seq strokes) strokes (->> [(-> (add-stroke {} node svg-data) @@ -848,7 +848,7 @@ (find-node :g) (find-node :g) (find-node :image))] - + (or (= type :image) (some? pattern-image)))) @@ -1034,8 +1034,7 @@ :layout-item-min-w (get-meta data :layout-item-min-w d/parse-double) :layout-item-align-self (get-meta data :layout-item-align-self keyword) :layout-item-align-absolute (get-meta data :layout-item-align-absolute str->bool) - :layout-item-align-index (get-meta data :layout-item-align-index d/parse-double) - })) + :layout-item-align-index (get-meta data :layout-item-align-index d/parse-double)})) props)) (defn parse-data diff --git a/frontend/src/app/util/path/format.cljs b/frontend/src/app/util/path/format.cljs index 28a43adf39..5a5860341b 100644 --- a/frontend/src/app/util/path/format.cljs +++ b/frontend/src/app/util/path/format.cljs @@ -30,8 +30,7 @@ (.toFixed a path-precision) (.toFixed b path-precision) (.toFixed c path-precision) - (.toFixed d path-precision) - )) + (.toFixed d path-precision))) ([a b c d e] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (.toFixed a path-precision) @@ -46,8 +45,7 @@ (.toFixed c path-precision) (.toFixed d path-precision) (.toFixed e path-precision) - (.toFixed f path-precision) - )) + (.toFixed f path-precision))) ([a b c d e f g] (js* "\"\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}+\",\"+~{}" (.toFixed a path-precision) diff --git a/frontend/src/app/util/perf.cljs b/frontend/src/app/util/perf.cljs index d1c6b81ae0..f958ba34f5 100644 --- a/frontend/src/app/util/perf.cljs +++ b/frontend/src/app/util/perf.cljs @@ -8,11 +8,11 @@ "Performance profiling for react components." (:require-macros [app.util.perf]) (:require - [app.common.math :as mth] - [rumext.v2 :as mf] - [goog.functions :as f] ["react" :as react] - ["tdigest" :as td])) + ["tdigest" :as td] + [app.common.math :as mth] + [goog.functions :as f] + [rumext.v2 :as mf])) ;; For use it, just wrap the component you want to profile with ;; `perf/profiler` component and pass a label for debug purpose. diff --git a/frontend/src/app/util/queue.cljs b/frontend/src/app/util/queue.cljs index 9d3e02dbb8..1c68763f14 100644 --- a/frontend/src/app/util/queue.cljs +++ b/frontend/src/app/util/queue.cljs @@ -55,12 +55,12 @@ ;; NOTE: Right now there are no cases where we need to cancel a process ;; but if we do, we can use this function #_(defn- cancel-process - [queue] - (l/dbg :hint "queue::cancel-process") - (let [timeout (unchecked-get queue "timeout")] - (when (some? timeout) - (js/clearTimeout timeout)) - (unchecked-set queue "timeout" nil))) + [queue] + (l/dbg :hint "queue::cancel-process") + (let [timeout (unchecked-get queue "timeout")] + (when (some? timeout) + (js/clearTimeout timeout)) + (unchecked-set queue "timeout" nil))) (defn- process [queue] diff --git a/frontend/src/app/util/router.cljs b/frontend/src/app/util/router.cljs index 83284596a1..be54cb8553 100644 --- a/frontend/src/app/util/router.cljs +++ b/frontend/src/app/util/router.cljs @@ -154,9 +154,9 @@ router (:router state)] (ts/schedule #(on-change router (.getToken ^js history))) (->> (rx/create (fn [subs] - (let [key (e/listen history "navigate" (fn [o] (rx/push! subs (.-token ^js o))))] - (fn [] - (bhistory/disable! history) - (e/unlistenByKey key))))) - (rx/take-until stoper) - (rx/subs! #(on-change router %))))))) + (let [key (e/listen history "navigate" (fn [o] (rx/push! subs (.-token ^js o))))] + (fn [] + (bhistory/disable! history) + (e/unlistenByKey key))))) + (rx/take-until stoper) + (rx/subs! #(on-change router %))))))) diff --git a/frontend/src/app/util/rxops.cljs b/frontend/src/app/util/rxops.cljs index f085d037e7..0b08a23aeb 100644 --- a/frontend/src/app/util/rxops.cljs +++ b/frontend/src/app/util/rxops.cljs @@ -31,8 +31,8 @@ args (js-arguments)] (this-as this - (set! (.-context state) this) - (set! (.-args state) args)) + (set! (.-context state) this) + (set! (.-args state) args)) (let [timeout-id (.-timeoutId state)] (if (>= (- ctime ltime) delay) diff --git a/frontend/src/app/util/simple_math.cljs b/frontend/src/app/util/simple_math.cljs index 33049a22ec..7b203fdd12 100644 --- a/frontend/src/app/util/simple_math.cljs +++ b/frontend/src/app/util/simple_math.cljs @@ -15,7 +15,7 @@ (def parser (insta/parser - "opt-expr = '' | expr + "opt-expr = '' | expr expr = term ( ('+'|'-') expr)* | ('+'|'-'|'*'|'/') factor term = factor ( ('*'|'/') term)* @@ -98,7 +98,7 @@ (map :expecting) (filter some?))] (js/console.debug - (str "Invalid value '" text "' at index " index - ". Expected one of " expecting ".")) + (str "Invalid value '" text "' at index " index + ". Expected one of " expecting ".")) nil)))) diff --git a/frontend/src/app/util/snap_data.cljs b/frontend/src/app/util/snap_data.cljs index 39f259a0e4..2fef2aa7bc 100644 --- a/frontend/src/app/util/snap_data.cljs +++ b/frontend/src/app/util/snap_data.cljs @@ -76,11 +76,11 @@ parent-id (:parent-id frame) frame-data (if (:blocked frame) - [] - (->> (snap/shape->snap-points frame) - (mapv #(array-map :type :shape - :id frame-id - :pt %)))) + [] + (->> (snap/shape->snap-points frame) + (mapv #(array-map :type :shape + :id frame-id + :pt %)))) grid-x-data (get-grids-snap-points frame :x) grid-y-data (get-grids-snap-points frame :y)] diff --git a/frontend/src/app/util/thumbnails.cljs b/frontend/src/app/util/thumbnails.cljs index 210b5e7a84..e129632283 100644 --- a/frontend/src/app/util/thumbnails.cljs +++ b/frontend/src/app/util/thumbnails.cljs @@ -43,9 +43,9 @@ ([width height min-width max-width min-height max-height] (let [clamped-width (mth/clamp width min-width max-width) clamped-height (mth/clamp height min-height max-height)] - (if (> width height) - [clamped-width (get-height-from-width width height clamped-width)] - [(get-width-from-height width height clamped-height) clamped-height])))) + (if (> width height) + [clamped-width (get-height-from-width width height clamped-width)] + [(get-width-from-height width height clamped-height) clamped-height])))) (defn get-relative-size "Returns a recommended size given a width and height." diff --git a/frontend/src/app/worker.cljs b/frontend/src/app/worker.cljs index 8ca98681b3..4b36decc98 100644 --- a/frontend/src/app/worker.cljs +++ b/frontend/src/app/worker.cljs @@ -132,16 +132,16 @@ (rx/subs! (fn [[messages dropped last]] ;; Send back the dropped messages replies - (doseq [msg dropped] - (drop-message msg)) + (doseq [msg dropped] + (drop-message msg)) ;; Process the message - (doseq [msg (vals messages)] - (handle-message msg)) + (doseq [msg (vals messages)] + (handle-message msg)) ;; After process the buffer we send a clear - (when-not (= last ::clear) - (rx/push! buffer ::clear))))))) + (when-not (= last ::clear) + (rx/push! buffer ::clear))))))) (defonce process-message-sub (subscribe-buffer-messages)) diff --git a/frontend/src/app/worker/export.cljs b/frontend/src/app/worker/export.cljs index 7425135f35..24de022fdc 100644 --- a/frontend/src/app/worker/export.cljs +++ b/frontend/src/app/worker/export.cljs @@ -229,8 +229,7 @@ (contains? node :typography-ref-id) (conj {:id (:typography-ref-id node) - :file-id (:typography-ref-file node)}) - ))) + :file-id (:typography-ref-file node)})))) (into []))) @@ -406,8 +405,8 @@ (rx/reduce conj []) (rx/with-latest-from files-stream) (rx/merge-map (fn [[data files]] - (->> (uz/compress-files data) - (rx/map #(vector (get files file-id) %))))))))) + (->> (uz/compress-files data) + (rx/map #(vector (get files file-id) %))))))))) (defmethod impl/handler :export-binary-file [{:keys [files export-type] :as message}] @@ -450,5 +449,5 @@ (rx/catch (fn [err] (js/console.error err) (rx/of {:type :error - :error (str err) - :file-id (:id file)})))))))) + :error (str err) + :file-id (:id file)})))))))) diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index fe923aec77..3946075c85 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -319,9 +319,9 @@ (defn resolve-media [context file-id node] (if (or (and (not (cip/close? node)) - (cip/has-image? node)) - (cip/has-stroke-images? node) - (cip/has-fill-images? node)) + (cip/has-image? node)) + (cip/has-stroke-images? node) + (cip/has-fill-images? node)) (let [name (cip/get-image-name node) has-image (cip/has-image? node) image-data (cip/get-image-data node) @@ -332,34 +332,34 @@ (map #(assoc % :type :stroke))) images-data (concat - fill-images-data - stroke-images-data - (when has-image - [{:href image-data}]))] + fill-images-data + stroke-images-data + (when has-image + [{:href image-data}]))] (->> (rx/from images-data) (rx/mapcat (fn [image-data] (->> (upload-media-files context file-id name (:href image-data)) (rx/catch #(do (.error js/console "Error uploading media: " name) - (rx/of node))) + (rx/of node))) (rx/map #(vector (:id image-data) %))))) (rx/reduce (fn [acc [id data]] (assoc acc id data)) {}) (rx/map - (fn [images] - (let [media (get images nil)] - (-> node - (assoc :images images) - (cond-> (some? media) - (-> - (assoc-in [:attrs :penpot:media-id] (:id media)) - (assoc-in [:attrs :penpot:media-width] (:width media)) - (assoc-in [:attrs :penpot:media-height] (:height media)) - (assoc-in [:attrs :penpot:media-mtype] (:mtype media)) + (fn [images] + (let [media (get images nil)] + (-> node + (assoc :images images) + (cond-> (some? media) + (-> + (assoc-in [:attrs :penpot:media-id] (:id media)) + (assoc-in [:attrs :penpot:media-width] (:width media)) + (assoc-in [:attrs :penpot:media-height] (:height media)) + (assoc-in [:attrs :penpot:media-mtype] (:mtype media)) - (assoc-in [:attrs :penpot:fill-color] (:fill image-fill)) - (assoc-in [:attrs :penpot:fill-color-ref-file] (:fill-color-ref-file image-fill)) - (assoc-in [:attrs :penpot:fill-color-ref-id] (:fill-color-ref-id image-fill)) - (assoc-in [:attrs :penpot:fill-opacity] (:fill-opacity image-fill)) - (assoc-in [:attrs :penpot:fill-color-gradient] (:fill-color-gradient image-fill)))))))))) + (assoc-in [:attrs :penpot:fill-color] (:fill image-fill)) + (assoc-in [:attrs :penpot:fill-color-ref-file] (:fill-color-ref-file image-fill)) + (assoc-in [:attrs :penpot:fill-color-ref-id] (:fill-color-ref-id image-fill)) + (assoc-in [:attrs :penpot:fill-opacity] (:fill-opacity image-fill)) + (assoc-in [:attrs :penpot:fill-color-gradient] (:fill-color-gradient image-fill)))))))))) ;; If the node is not an image just return the node (->> (rx/of node) @@ -367,10 +367,10 @@ (defn media-node? [node] (or (and (cip/shape? node) - (cip/has-image? node) - (not (cip/close? node))) - (cip/has-stroke-images? node) - (cip/has-fill-images? node))) + (cip/has-image? node) + (not (cip/close? node))) + (cip/has-stroke-images? node) + (cip/has-fill-images? node))) (defn import-page [context file [page-id page-name content]] @@ -549,7 +549,7 @@ (rx/tap #(progress! context :upload-media (:name %))) (rx/merge-map #(rp/cmd! :upload-file-media-object %)) (rx/map (constantly media)) - (rx/catch #(do (.error js/console (str "Error uploading media: " (:name media)) ) + (rx/catch #(do (.error js/console (str "Error uploading media: " (:name media))) (rx/empty))))))) (rx/reduce fb/add-library-media file))) (rx/of file))) @@ -607,8 +607,8 @@ (->> (rx/from files) (rx/map #(merge context %)) (rx/merge-map (fn [context] - (->> (create-file context features) - (rx/map #(vector % (first (get data (:file-id context))))))))) + (->> (create-file context features) + (rx/map #(vector % (first (get data (:file-id context))))))))) (->> (rx/from files) (rx/map #(merge context %)) diff --git a/frontend/src/app/worker/selection.cljs b/frontend/src/app/worker/selection.cljs index bdf5847d69..6de386953c 100644 --- a/frontend/src/app/worker/selection.cljs +++ b/frontend/src/app/worker/selection.cljs @@ -127,20 +127,20 @@ match-criteria? (fn [shape] (and (not (:hidden shape)) - (or (= :frame (:type shape)) ;; We return frames even if blocked - (not (:blocked shape))) - (or (not frame-id) (= frame-id (:frame-id shape))) - (case (:type shape) - :frame include-frames? - (:bool :group) (not ignore-groups?) - true) + (or (= :frame (:type shape)) ;; We return frames even if blocked + (not (:blocked shape))) + (or (not frame-id) (= frame-id (:frame-id shape))) + (case (:type shape) + :frame include-frames? + (:bool :group) (not ignore-groups?) + true) - (or (not full-frame?) - (not= :frame (:type shape)) - (and (d/not-empty? (:shapes shape)) - (gsh/rect-contains-shape? rect shape)) - (and (empty? (:shapes shape)) - (gsh/overlaps? shape rect))))) + (or (not full-frame?) + (not= :frame (:type shape)) + (and (d/not-empty? (:shapes shape)) + (gsh/rect-contains-shape? rect shape)) + (and (empty? (:shapes shape)) + (gsh/overlaps? shape rect))))) overlaps-outer-shape? (fn [shape] @@ -153,8 +153,8 @@ scalev (gpt/point (/ (+ (:width shape) padding) (:width shape)) - (/ (+ (:height shape) padding) - (:height shape))) + (/ (+ (:height shape) padding) + (:height shape))) outer-shape (-> shape (gsh/transform-shape (-> (ctm/empty) @@ -173,8 +173,8 @@ scalev (gpt/point (/ (- (:width shape) padding) (:width shape)) - (/ (- (:height shape) padding) - (:height shape))) + (/ (- (:height shape) padding) + (:height shape))) inner-shape (-> shape (gsh/transform-shape (-> (ctm/empty) diff --git a/frontend/src/app/worker/thumbnails.cljs b/frontend/src/app/worker/thumbnails.cljs index 0c548b52d6..161ed28d5a 100644 --- a/frontend/src/app/worker/thumbnails.cljs +++ b/frontend/src/app/worker/thumbnails.cljs @@ -66,17 +66,17 @@ background-color (dm/get-in page [:options :background]) element (if frame (mf/element render/frame-svg #js - {:objects objects - :frame frame - :use-thumbnails true - :background-color background-color - :aspect-ratio (/ 2 3)}) + {:objects objects + :frame frame + :use-thumbnails true + :background-color background-color + :aspect-ratio (/ 2 3)}) (mf/element render/page-svg #js - {:data page - :use-thumbnails true - :embed true - :aspect-ratio (/ 2 3)})) + {:data page + :use-thumbnails true + :embed true + :aspect-ratio (/ 2 3)})) data (rds/renderToStaticMarkup element)] {:data data :fonts @fonts/loaded-hints diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 02964dcabe..f944e0e701 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -433,10 +433,10 @@ (->> (rp/cmd! :update-file params) (rx/subs! (fn [_] - (when reload? - (dom/reload-current-window))) - (fn [cause] - (errors/print-error! cause))))))))) + (when reload? + (dom/reload-current-window))) + (fn [cause] + (errors/print-error! cause))))))))) (defn ^:export fix-orphan-shapes [] @@ -464,12 +464,12 @@ (rx/map http/conditional-decode-transit) (rx/mapcat rp/handle-response) (rx/subs! (fn [result] - (let [result (map (fn [row] - (update row :id str)) - result)] - (js/console.table (clj->js result)))) - (fn [cause] - (js/console.log "EE:" cause)))) + (let [result (map (fn [row] + (update row :id str)) + result)] + (js/console.table (clj->js result)))) + (fn [cause] + (js/console.log "EE:" cause)))) nil)) (defn ^:export take-snapshot @@ -482,9 +482,9 @@ (rx/map http/conditional-decode-transit) (rx/mapcat rp/handle-response) (rx/subs! (fn [{:keys [id]}] - (println "Snapshot saved:" (str id))) - (fn [cause] - (js/console.log "EE:" cause)))))) + (println "Snapshot saved:" (str id))) + (fn [cause] + (js/console.log "EE:" cause)))))) (defn ^:export restore-snapshot [id file-id] @@ -497,7 +497,7 @@ (rx/map http/conditional-decode-transit) (rx/mapcat rp/handle-response) (rx/subs! (fn [_] - (println "Snapshot restored " id) - #_(.reload js/location)) - (fn [cause] - (js/console.log "EE:" cause))))))) + (println "Snapshot restored " id) + #_(.reload js/location)) + (fn [cause] + (js/console.log "EE:" cause))))))) diff --git a/frontend/test/frontend_tests/helpers/pages.cljs b/frontend/test/frontend_tests/helpers/pages.cljs index 8de3e2d23c..8f28aebb41 100644 --- a/frontend/test/frontend_tests/helpers/pages.cljs +++ b/frontend/test/frontend_tests/helpers/pages.cljs @@ -145,7 +145,7 @@ cfsh/prepare-create-artboard-from-selection)] (swap! idmap assoc instance-label (:id group) - component-label component-id) + component-label component-id) (update state :workspace-data cp/process-changes (:redo-changes changes)))) diff --git a/frontend/test/frontend_tests/helpers_shapes_test.cljs b/frontend/test/frontend_tests/helpers_shapes_test.cljs index 8b01ad7a19..929b4301fb 100644 --- a/frontend/test/frontend_tests/helpers_shapes_test.cljs +++ b/frontend/test/frontend_tests/helpers_shapes_test.cljs @@ -46,13 +46,13 @@ color {:color clr/white} store (the/prepare-store state done - (fn [new-state] - (t/is (= (get-in new-state [:workspace-data - :recent-colors]) - [color]))))] + (fn [new-state] + (t/is (= (get-in new-state [:workspace-data + :recent-colors]) + [color]))))] (ptk/emit! - store - (dwl/add-recent-color color) - :the/end))))) + store + (dwl/add-recent-color color) + :the/end))))) diff --git a/frontend/test/frontend_tests/setup_test.cljs b/frontend/test/frontend_tests/setup_test.cljs index 047d8d2d06..81eab9c0e8 100644 --- a/frontend/test/frontend_tests/setup_test.cljs +++ b/frontend/test/frontend_tests/setup_test.cljs @@ -6,8 +6,8 @@ (ns frontend-tests.setup-test (:require - [app.common.schema :as sm] [app.common.pprint :as pp] + [app.common.schema :as sm] [cljs.test :as t])) (.on js/process "uncaughtException" (fn [cause] @@ -26,6 +26,6 @@ (set! (.-exitCode js/process) 1))) #_(set! *main-cli-fn* - #(t/run-tests 'frontend-tests.test-snap-data - 'frontend-tests.test-simple-math - 'frontend-tests.test-range-tree)) + #(t/run-tests 'frontend-tests.test-snap-data + 'frontend-tests.test-simple-math + 'frontend-tests.test-range-tree)) diff --git a/frontend/test/frontend_tests/state_components_sync_test.cljs b/frontend/test/frontend_tests/state_components_sync_test.cljs index bfdbdedc8b..7e74291f84 100644 --- a/frontend/test/frontend_tests/state_components_sync_test.cljs +++ b/frontend/test/frontend_tests/state_components_sync_test.cljs @@ -77,8 +77,7 @@ (t/is (= (:name c-shape1) "Rect 1")) (t/is (= (:touched c-shape1) nil)) (t/is (= (:fill-color c-shape1) clr/white)) - (t/is (= (:fill-opacity c-shape1) 1)) - )))] + (t/is (= (:fill-opacity c-shape1) 1)))))] (ptk/emit! store @@ -90,24 +89,24 @@ (t/deftest test-touched-children-add (t/async done - (let [state (-> thp/initial-state - (thp/sample-page) - (thp/sample-shape :shape1 :rect - {:name "Rect 1" - :fill-color clr/white - :fill-opacity 1}) - (thp/make-component :main1 :component1 - [(thp/id :shape1)]) - (thp/instantiate-component :instance1 - (thp/id :component1)) - (thp/sample-shape :shape2 :circle - {:name "Circle 1"})) + (let [state (-> thp/initial-state + (thp/sample-page) + (thp/sample-shape :shape1 :rect + {:name "Rect 1" + :fill-color clr/white + :fill-opacity 1}) + (thp/make-component :main1 :component1 + [(thp/id :shape1)]) + (thp/instantiate-component :instance1 + (thp/id :component1)) + (thp/sample-shape :shape2 :circle + {:name "Circle 1"})) - instance1 (thp/get-shape state :instance1) - shape2 (thp/get-shape state :shape2) + instance1 (thp/get-shape state :instance1) + shape2 (thp/get-shape state :shape2) - store (the/prepare-store state done - (fn [new-state] + store (the/prepare-store state done + (fn [new-state] ;; Expected shape tree: ;; [Page: Page 1] ;; Root Frame @@ -120,28 +119,28 @@ ;; [Component: Rect 1] core.cljs:200:23 ;; --> [Page 1] Rect 1 - (let [[[group shape1] [c-group c-shape1] _component] - (thl/resolve-instance-and-main-allow-dangling - new-state - (thp/id :instance1))] + (let [[[group shape1] [c-group c-shape1] _component] + (thl/resolve-instance-and-main-allow-dangling + new-state + (thp/id :instance1))] - (t/is (= (:name group) "Rect 1")) - (t/is (nil? (:touched group))) - (t/is (= (:name shape1) "Rect 1")) - (t/is (= (:touched shape1) nil)) - (t/is (not= (:shape-ref shape1) nil)) + (t/is (= (:name group) "Rect 1")) + (t/is (nil? (:touched group))) + (t/is (= (:name shape1) "Rect 1")) + (t/is (= (:touched shape1) nil)) + (t/is (not= (:shape-ref shape1) nil)) - (t/is (= (:name c-group) "Rect 1")) - (t/is (= (:touched c-group) nil)) - (t/is (= (:shape-ref c-group) nil)) - (t/is (= (:name c-shape1) "Rect 1")) - (t/is (= (:touched c-shape1) nil)) - (t/is (= (:shape-ref c-shape1) nil)))))] + (t/is (= (:name c-group) "Rect 1")) + (t/is (= (:touched c-group) nil)) + (t/is (= (:shape-ref c-group) nil)) + (t/is (= (:name c-shape1) "Rect 1")) + (t/is (= (:touched c-shape1) nil)) + (t/is (= (:shape-ref c-shape1) nil)))))] - (ptk/emit! - store - (dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing - :the/end)))) + (ptk/emit! + store + (dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing + :the/end)))) (t/deftest test-touched-children-delete (t/async done @@ -201,9 +200,7 @@ (t/is (= (:shape-ref c-shape1) nil)) (t/is (= (:name c-shape2) "Rect 2")) (t/is (= (:touched c-shape2) nil)) - (t/is (= (:shape-ref c-shape2) nil)) - - )))] + (t/is (= (:shape-ref c-shape2) nil)))))] (ptk/emit! store @@ -212,26 +209,26 @@ (t/deftest test-touched-children-move (t/async done - (let [state (-> thp/initial-state - (thp/sample-page) - (thp/sample-shape :shape1 :rect - {:name "Rect 1"}) - (thp/sample-shape :shape2 :rect - {:name "Rect 2"}) - (thp/sample-shape :shape3 :rect - {:name "Rect 3"}) - (thp/make-component :main1 :component1 - [(thp/id :shape1) - (thp/id :shape2) - (thp/id :shape3)]) - (thp/instantiate-component :instance1 - (thp/id :component1))) + (let [state (-> thp/initial-state + (thp/sample-page) + (thp/sample-shape :shape1 :rect + {:name "Rect 1"}) + (thp/sample-shape :shape2 :rect + {:name "Rect 2"}) + (thp/sample-shape :shape3 :rect + {:name "Rect 3"}) + (thp/make-component :main1 :component1 + [(thp/id :shape1) + (thp/id :shape2) + (thp/id :shape3)]) + (thp/instantiate-component :instance1 + (thp/id :component1))) - [group1' shape1'] - (thl/resolve-instance state (thp/id :instance1)) + [group1' shape1'] + (thl/resolve-instance state (thp/id :instance1)) - store (the/prepare-store state done - (fn [new-state] + store (the/prepare-store state done + (fn [new-state] ;; Expected shape tree: ;; [Page: Page 1] ;; Root Frame @@ -249,41 +246,41 @@ ;; [Component: Component 1] ;; --> [Page 1] Component 1 - (let [[[group shape1 shape2 shape3] - [c-group c-shape1 c-shape2 c-shape3] _component] - (thl/resolve-instance-and-main-allow-dangling - new-state - (thp/id :instance1))] + (let [[[group shape1 shape2 shape3] + [c-group c-shape1 c-shape2 c-shape3] _component] + (thl/resolve-instance-and-main-allow-dangling + new-state + (thp/id :instance1))] - (t/is (= (:name group) "Component 1")) - (t/is (nil? (:touched group))) - (t/is (= (:name shape1) "Rect 1")) - (t/is (= (:touched shape1) nil)) - (t/is (not= (:shape-ref shape1) nil)) - (t/is (= (:name shape2) "Rect 2")) - (t/is (= (:touched shape2) nil)) - (t/is (not= (:shape-ref shape2) nil)) - (t/is (= (:name shape3) "Rect 3")) - (t/is (= (:touched shape3) nil)) - (t/is (not= (:shape-ref shape3) nil)) + (t/is (= (:name group) "Component 1")) + (t/is (nil? (:touched group))) + (t/is (= (:name shape1) "Rect 1")) + (t/is (= (:touched shape1) nil)) + (t/is (not= (:shape-ref shape1) nil)) + (t/is (= (:name shape2) "Rect 2")) + (t/is (= (:touched shape2) nil)) + (t/is (not= (:shape-ref shape2) nil)) + (t/is (= (:name shape3) "Rect 3")) + (t/is (= (:touched shape3) nil)) + (t/is (not= (:shape-ref shape3) nil)) - (t/is (= (:name c-group) "Component 1")) - (t/is (= (:touched c-group) nil)) - (t/is (= (:shape-ref c-group) nil)) - (t/is (= (:name c-shape1) "Rect 1")) - (t/is (= (:touched c-shape1) nil)) - (t/is (= (:shape-ref c-shape1) nil)) - (t/is (= (:name c-shape2) "Rect 2")) - (t/is (= (:touched c-shape2) nil)) - (t/is (= (:shape-ref c-shape2) nil)) - (t/is (= (:name c-shape3) "Rect 3")) - (t/is (= (:touched c-shape3) nil)) - (t/is (= (:shape-ref c-shape3) nil)))))] + (t/is (= (:name c-group) "Component 1")) + (t/is (= (:touched c-group) nil)) + (t/is (= (:shape-ref c-group) nil)) + (t/is (= (:name c-shape1) "Rect 1")) + (t/is (= (:touched c-shape1) nil)) + (t/is (= (:shape-ref c-shape1) nil)) + (t/is (= (:name c-shape2) "Rect 2")) + (t/is (= (:touched c-shape2) nil)) + (t/is (= (:shape-ref c-shape2) nil)) + (t/is (= (:name c-shape3) "Rect 3")) + (t/is (= (:touched c-shape3) nil)) + (t/is (= (:shape-ref c-shape3) nil)))))] - (ptk/emit! - store - (dw/relocate-shapes #{(:id shape1')} (:id group1') 2) ;; We cant't change the structure of component copies, so this operation will do nothing - :the/end)))) + (ptk/emit! + store + (dw/relocate-shapes #{(:id shape1')} (:id group1') 2) ;; We cant't change the structure of component copies, so this operation will do nothing + :the/end)))) (t/deftest test-touched-from-lib (t/async @@ -603,8 +600,7 @@ (t/is (= (:fill-color c-shape1) clr/black)) (t/is (= (:fill-opacity c-shape1) 0)) (t/is (= (:name c-shape2) "Rect 1")) - (t/is (= (:touched c-shape2) #{:fill-group})) - )))] + (t/is (= (:touched c-shape2) #{:fill-group})))))] (ptk/emit! store @@ -1504,28 +1500,28 @@ (t/deftest test-update-children-add (t/async done - (let [state (-> thp/initial-state - (thp/sample-page) - (thp/sample-shape :shape1 :rect - {:name "Rect 1" - :fill-color clr/white - :fill-opacity 1}) - (thp/make-component :main1 :component1 - [(thp/id :shape1)]) - (thp/instantiate-component :instance1 - (thp/id :component1)) - (thp/instantiate-component :instance2 - (thp/id :component1)) - (thp/sample-shape :shape2 :circle - {:name "Circle 1"})) + (let [state (-> thp/initial-state + (thp/sample-page) + (thp/sample-shape :shape1 :rect + {:name "Rect 1" + :fill-color clr/white + :fill-opacity 1}) + (thp/make-component :main1 :component1 + [(thp/id :shape1)]) + (thp/instantiate-component :instance1 + (thp/id :component1)) + (thp/instantiate-component :instance2 + (thp/id :component1)) + (thp/sample-shape :shape2 :circle + {:name "Circle 1"})) - file (wsh/get-local-file state) + file (wsh/get-local-file state) - instance1 (thp/get-shape state :instance1) - shape2 (thp/get-shape state :shape2) + instance1 (thp/get-shape state :instance1) + shape2 (thp/get-shape state :shape2) - store (the/prepare-store state done - (fn [new-state] + store (the/prepare-store state done + (fn [new-state] ;; Expected shape tree: ;; ;; [Page: Page 1] @@ -1543,58 +1539,58 @@ ;; [Component: Rect 1] ;; --> [Page 1] Rect 1 ;; - (let [[[main1 shape1] - [c-main1 c-shape1] component1] - (thl/resolve-instance-and-main - new-state - (thp/id :main1)) + (let [[[main1 shape1] + [c-main1 c-shape1] component1] + (thl/resolve-instance-and-main + new-state + (thp/id :main1)) - [[instance1 shape2] - [c-instance1 c-shape2] component2] - (thl/resolve-instance-and-main - new-state - (thp/id :instance1)) + [[instance1 shape2] + [c-instance1 c-shape2] component2] + (thl/resolve-instance-and-main + new-state + (thp/id :instance1)) - [[instance2 shape3] - [c-instance2 c-shape3] component3] - (thl/resolve-instance-and-main - new-state - (thp/id :instance2))] + [[instance2 shape3] + [c-instance2 c-shape3] component3] + (thl/resolve-instance-and-main + new-state + (thp/id :instance2))] - (t/is (= (:name main1) "Rect 1")) - (t/is (= (:touched main1) nil)) - (t/is (= (:shape-ref main1) nil)) - (t/is (= (:name shape1) "Rect 1")) - (t/is (= (:touched shape1) nil)) - (t/is (= (:shape-ref shape1) nil)) + (t/is (= (:name main1) "Rect 1")) + (t/is (= (:touched main1) nil)) + (t/is (= (:shape-ref main1) nil)) + (t/is (= (:name shape1) "Rect 1")) + (t/is (= (:touched shape1) nil)) + (t/is (= (:shape-ref shape1) nil)) - (t/is (= (:name instance1) "Rect 1")) - (t/is (= (:touched instance1) nil)) - (t/is (= (:shape-ref instance1) (:id c-main1))) - (t/is (= (:name shape2) "Rect 1")) - (t/is (= (:touched shape2) nil)) - (t/is (= (:shape-ref shape2) (:id c-shape1))) + (t/is (= (:name instance1) "Rect 1")) + (t/is (= (:touched instance1) nil)) + (t/is (= (:shape-ref instance1) (:id c-main1))) + (t/is (= (:name shape2) "Rect 1")) + (t/is (= (:touched shape2) nil)) + (t/is (= (:shape-ref shape2) (:id c-shape1))) - (t/is (= (:name instance2) "Rect 1")) - (t/is (= (:touched instance2) nil)) - (t/is (= (:shape-ref instance2) (:id c-main1))) - (t/is (= (:name shape3) "Rect 1")) - (t/is (= (:touched shape3) nil)) - (t/is (= (:shape-ref shape2) (:id c-shape1))) + (t/is (= (:name instance2) "Rect 1")) + (t/is (= (:touched instance2) nil)) + (t/is (= (:shape-ref instance2) (:id c-main1))) + (t/is (= (:name shape3) "Rect 1")) + (t/is (= (:touched shape3) nil)) + (t/is (= (:shape-ref shape2) (:id c-shape1))) - (t/is (= component1 component2 component3)) - (t/is (= c-main1 main1)) - (t/is (= c-shape1 shape1)) - (t/is (= c-instance1 c-main1)) - (t/is (= c-shape2 c-shape1)) - (t/is (= c-instance2 c-main1)) - (t/is (= c-shape3 c-shape1)))))] + (t/is (= component1 component2 component3)) + (t/is (= c-main1 main1)) + (t/is (= c-shape1 shape1)) + (t/is (= c-instance1 c-main1)) + (t/is (= c-shape2 c-shape1)) + (t/is (= c-instance2 c-main1)) + (t/is (= c-shape3 c-shape1)))))] - (ptk/emit! - store - (dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing - (dwl/update-component-sync (:id instance1) (:id file)) - :the/end)))) + (ptk/emit! + store + (dw/relocate-shapes #{(:id shape2)} (:id instance1) 0) ;; We cant't change the structure of component copies, so this operation will do nothing + (dwl/update-component-sync (:id instance1) (:id file)) + :the/end)))) (t/deftest test-update-children-delete (t/async done @@ -1709,30 +1705,30 @@ (t/deftest test-update-children-move (t/async done - (let [state (-> thp/initial-state - (thp/sample-page) - (thp/sample-shape :shape1 :rect - {:name "Rect 1"}) - (thp/sample-shape :shape2 :rect - {:name "Rect 2"}) - (thp/sample-shape :shape3 :rect - {:name "Rect 3"}) - (thp/make-component :main1 :component1 - [(thp/id :shape1) - (thp/id :shape2) - (thp/id :shape3)]) - (thp/instantiate-component :instance1 - (thp/id :component1)) - (thp/instantiate-component :instance2 - (thp/id :component1))) + (let [state (-> thp/initial-state + (thp/sample-page) + (thp/sample-shape :shape1 :rect + {:name "Rect 1"}) + (thp/sample-shape :shape2 :rect + {:name "Rect 2"}) + (thp/sample-shape :shape3 :rect + {:name "Rect 3"}) + (thp/make-component :main1 :component1 + [(thp/id :shape1) + (thp/id :shape2) + (thp/id :shape3)]) + (thp/instantiate-component :instance1 + (thp/id :component1)) + (thp/instantiate-component :instance2 + (thp/id :component1))) - file (wsh/get-local-file state) + file (wsh/get-local-file state) - [instance1 shape1' _shape2' _shape3'] - (thl/resolve-instance state (thp/id :instance1)) + [instance1 shape1' _shape2' _shape3'] + (thl/resolve-instance state (thp/id :instance1)) - store (the/prepare-store state done - (fn [new-state] + store (the/prepare-store state done + (fn [new-state] ;; Expected shape tree: ;; ;; [Page] @@ -1753,82 +1749,82 @@ ;; [Component 1] ;; page1 / Component 1 ;; - (let [[[main1 shape1 shape2 shape3] - [c-main1 c-shape1 c-shape2 c-shape3] component1] - (thl/resolve-instance-and-main - new-state - (thp/id :main1)) + (let [[[main1 shape1 shape2 shape3] + [c-main1 c-shape1 c-shape2 c-shape3] component1] + (thl/resolve-instance-and-main + new-state + (thp/id :main1)) - [[instance1 shape4 shape5 shape6] - [c-instance1 c-shape4 c-shape5 c-shape6] component2] - (thl/resolve-instance-and-main - new-state - (thp/id :instance1)) + [[instance1 shape4 shape5 shape6] + [c-instance1 c-shape4 c-shape5 c-shape6] component2] + (thl/resolve-instance-and-main + new-state + (thp/id :instance1)) - [[instance2 shape7 shape8 shape9] - [c-instance2 c-shape7 c-shape8 c-shape9] component3] - (thl/resolve-instance-and-main - new-state - (thp/id :instance2))] + [[instance2 shape7 shape8 shape9] + [c-instance2 c-shape7 c-shape8 c-shape9] component3] + (thl/resolve-instance-and-main + new-state + (thp/id :instance2))] - (t/is (= (:name main1) "Component 1")) - (t/is (= (:touched main1) nil)) - (t/is (= (:shape-ref main1) nil)) - (t/is (= (:name shape1) "Rect 1")) - (t/is (= (:touched shape1) nil)) - (t/is (= (:shape-ref shape1) nil)) - (t/is (= (:name shape2) "Rect 2")) - (t/is (= (:touched shape2) nil)) - (t/is (= (:shape-ref shape2) nil)) - (t/is (= (:name shape3) "Rect 3")) - (t/is (= (:touched shape3) nil)) - (t/is (= (:shape-ref shape3) nil)) + (t/is (= (:name main1) "Component 1")) + (t/is (= (:touched main1) nil)) + (t/is (= (:shape-ref main1) nil)) + (t/is (= (:name shape1) "Rect 1")) + (t/is (= (:touched shape1) nil)) + (t/is (= (:shape-ref shape1) nil)) + (t/is (= (:name shape2) "Rect 2")) + (t/is (= (:touched shape2) nil)) + (t/is (= (:shape-ref shape2) nil)) + (t/is (= (:name shape3) "Rect 3")) + (t/is (= (:touched shape3) nil)) + (t/is (= (:shape-ref shape3) nil)) - (t/is (= (:name instance1) "Component 1")) - (t/is (= (:touched instance1) nil)) - (t/is (= (:shape-ref instance1) (:id c-main1))) - (t/is (= (:name shape4) "Rect 1")) - (t/is (= (:touched shape4) nil)) - (t/is (= (:shape-ref shape4) (:id c-shape1))) - (t/is (= (:name shape5) "Rect 2")) - (t/is (= (:touched shape5) nil)) - (t/is (= (:shape-ref shape5) (:id c-shape2))) - (t/is (= (:name shape6) "Rect 3")) - (t/is (= (:touched shape6) nil)) - (t/is (= (:shape-ref shape6) (:id c-shape3))) + (t/is (= (:name instance1) "Component 1")) + (t/is (= (:touched instance1) nil)) + (t/is (= (:shape-ref instance1) (:id c-main1))) + (t/is (= (:name shape4) "Rect 1")) + (t/is (= (:touched shape4) nil)) + (t/is (= (:shape-ref shape4) (:id c-shape1))) + (t/is (= (:name shape5) "Rect 2")) + (t/is (= (:touched shape5) nil)) + (t/is (= (:shape-ref shape5) (:id c-shape2))) + (t/is (= (:name shape6) "Rect 3")) + (t/is (= (:touched shape6) nil)) + (t/is (= (:shape-ref shape6) (:id c-shape3))) - (t/is (= (:name instance2) "Component 1")) - (t/is (= (:touched instance2) nil)) - (t/is (= (:shape-ref instance2) (:id c-main1))) - (t/is (= (:name shape7) "Rect 1")) - (t/is (= (:touched shape7) nil)) - (t/is (= (:shape-ref shape7) (:id c-shape1))) - (t/is (= (:name shape8) "Rect 2")) - (t/is (= (:touched shape8) nil)) - (t/is (= (:shape-ref shape8) (:id c-shape2))) - (t/is (= (:name shape9) "Rect 3")) - (t/is (= (:touched shape9) nil)) - (t/is (= (:shape-ref shape9) (:id c-shape3))) + (t/is (= (:name instance2) "Component 1")) + (t/is (= (:touched instance2) nil)) + (t/is (= (:shape-ref instance2) (:id c-main1))) + (t/is (= (:name shape7) "Rect 1")) + (t/is (= (:touched shape7) nil)) + (t/is (= (:shape-ref shape7) (:id c-shape1))) + (t/is (= (:name shape8) "Rect 2")) + (t/is (= (:touched shape8) nil)) + (t/is (= (:shape-ref shape8) (:id c-shape2))) + (t/is (= (:name shape9) "Rect 3")) + (t/is (= (:touched shape9) nil)) + (t/is (= (:shape-ref shape9) (:id c-shape3))) - (t/is (= component1 component2 component3)) - (t/is (= c-main1 main1)) - (t/is (= c-shape1 shape1)) - (t/is (= c-shape2 shape2)) - (t/is (= c-shape3 shape3)) - (t/is (= c-instance1 c-main1)) - (t/is (= c-shape4 c-shape4)) - (t/is (= c-shape5 c-shape5)) - (t/is (= c-shape6 c-shape6)) - (t/is (= c-instance2 c-main1)) - (t/is (= c-shape7 c-shape7)) - (t/is (= c-shape8 c-shape8)) - (t/is (= c-shape9 c-shape9)))))] + (t/is (= component1 component2 component3)) + (t/is (= c-main1 main1)) + (t/is (= c-shape1 shape1)) + (t/is (= c-shape2 shape2)) + (t/is (= c-shape3 shape3)) + (t/is (= c-instance1 c-main1)) + (t/is (= c-shape4 c-shape4)) + (t/is (= c-shape5 c-shape5)) + (t/is (= c-shape6 c-shape6)) + (t/is (= c-instance2 c-main1)) + (t/is (= c-shape7 c-shape7)) + (t/is (= c-shape8 c-shape8)) + (t/is (= c-shape9 c-shape9)))))] - (ptk/emit! - store - (dw/relocate-shapes #{(:id shape1')} (:id instance1) 2) - (dwl/update-component-sync (:id instance1) (:id file)) - :the/end)))) + (ptk/emit! + store + (dw/relocate-shapes #{(:id shape1')} (:id instance1) 2) + (dwl/update-component-sync (:id instance1) (:id file)) + :the/end)))) (t/deftest test-update-from-lib (t/async done diff --git a/frontend/test/frontend_tests/state_components_test.cljs b/frontend/test/frontend_tests/state_components_test.cljs index 6b6dca73ec..fb341f12e9 100644 --- a/frontend/test/frontend_tests/state_components_test.cljs +++ b/frontend/test/frontend_tests/state_components_test.cljs @@ -341,8 +341,7 @@ ;; Rect 1 #--> ? ;; Rect 1 ---> ? ;;; - (let [ - [main1 shape1] + (let [[main1 shape1] (thl/resolve-noninstance new-state (thp/id :main1)) @@ -380,10 +379,7 @@ (t/is (some? (:objects component3))) (t/is (= (:name saved-main1) "Rect 1")) - (t/is (= (:name saved-shape2) "Rect 1")) - - ))) - ] + (t/is (= (:name saved-shape2) "Rect 1")))))] (ptk/emit! store (dwl/delete-component {:id (thp/id :component1)}) :the/end)))) diff --git a/frontend/test/frontend_tests/test_helpers_shapes.cljs b/frontend/test/frontend_tests/test_helpers_shapes.cljs index 45921648ec..11e5525424 100644 --- a/frontend/test/frontend_tests/test_helpers_shapes.cljs +++ b/frontend/test/frontend_tests/test_helpers_shapes.cljs @@ -40,13 +40,13 @@ color {:color clr/white} store (the/prepare-store state done - (fn [new-state] - (t/is (= (get-in new-state [:workspace-data - :recent-colors]) - [color]))))] + (fn [new-state] + (t/is (= (get-in new-state [:workspace-data + :recent-colors]) + [color]))))] (ptk/emit! - store - (dwl/add-recent-color color) - :the/end))))) + store + (dwl/add-recent-color color) + :the/end))))) diff --git a/frontend/test/frontend_tests/util_range_tree_test.cljs b/frontend/test/frontend_tests/util_range_tree_test.cljs index 5f3627f731..4d5e75e669 100644 --- a/frontend/test/frontend_tests/util_range_tree_test.cljs +++ b/frontend/test/frontend_tests/util_range_tree_test.cljs @@ -18,14 +18,14 @@ (t/deftest test-insert-and-retrieve-data (t/testing "Retrieve on empty tree" - (let [tree (rt/make-tree)] - (t/is (= (rt/get tree 100) nil)))) + (let [tree (rt/make-tree)] + (t/is (= (rt/get tree 100) nil)))) (t/testing "First insert/retrieval" - (let [tree (-> (rt/make-tree) - (rt/insert 100 :a))] - (t/is (= (rt/get tree 100) [:a])) - (t/is (= (rt/get tree 200) nil)))) + (let [tree (-> (rt/make-tree) + (rt/insert 100 :a))] + (t/is (= (rt/get tree 100) [:a])) + (t/is (= (rt/get tree 200) nil)))) (t/testing "Insert best case scenario" (let [tree (-> (rt/make-tree) diff --git a/frontend/test/frontend_tests/util_simple_math_test.cljs b/frontend/test/frontend_tests/util_simple_math_test.cljs index acd23526ca..15bb2198c2 100644 --- a/frontend/test/frontend_tests/util_simple_math_test.cljs +++ b/frontend/test/frontend_tests/util_simple_math_test.cljs @@ -6,10 +6,10 @@ (ns frontend-tests.util-simple-math-test (:require - [cljs.test :as t :include-macros true] - [cljs.pprint :refer [pprint]] [app.common.math :as cm] - [app.util.simple-math :as sm])) + [app.util.simple-math :as sm] + [cljs.pprint :refer [pprint]] + [cljs.test :as t :include-macros true])) (t/deftest test-parser-inst (t/testing "Evaluate an empty string" @@ -86,7 +86,5 @@ (t/testing "Evaluate a complex operation with decimals" (let [result1 (sm/expr-eval "(20.333 + 10%) * (1 / 3)" 20) result2 (sm/expr-eval "(20,333 + 10%) * (1 / 3)" 20)] - (t/is (cm/close? result1 result2 7.44433333)))) - - ) + (t/is (cm/close? result1 result2 7.44433333))))) diff --git a/frontend/test/frontend_tests/util_snap_data_test.cljs b/frontend/test/frontend_tests/util_snap_data_test.cljs index 2eafa7a874..bdd42b5af5 100644 --- a/frontend/test/frontend_tests/util_snap_data_test.cljs +++ b/frontend/test/frontend_tests/util_snap_data_test.cljs @@ -7,8 +7,8 @@ (ns frontend-tests.util-snap-data-test (:require [app.common.files.builder :as fb] - [app.common.uuid :as uuid] [app.common.types.shape :as cts] + [app.common.uuid :as uuid] [app.util.snap-data :as sd] [cljs.pprint :refer [pprint]] [cljs.test :as t :include-macros true])) @@ -418,8 +418,7 @@ result-zero-x-2 (sd/query data (:id page) uuid/zero :x [0 200]) result-zero-y-2 (sd/query data (:id page) uuid/zero :y [0 200]) result-frame-x-2 (sd/query data (:id page) frame-id :x [0 200]) - result-frame-y-2 (sd/query data (:id page) frame-id :y [0 200]) - ] + result-frame-y-2 (sd/query data (:id page) frame-id :y [0 200])] (t/is (some? data)) @@ -431,5 +430,4 @@ (t/is (= (count result-zero-x-2) 1)) (t/is (= (count result-zero-y-2) 0)) (t/is (= (count result-frame-x-2) 1)) - (t/is (= (count result-frame-y-2) 0)))) - ) + (t/is (= (count result-frame-y-2) 0))))) From 0ab56b38b9d1f06cc6ebfb09666de3e9d03dc651 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 5 Jan 2024 13:43:38 +0100 Subject: [PATCH 22/26] :paperclip: Add fmt checker to the CI --- .circleci/config.yml | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index f56bccd844..e1a6e629fe 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -31,10 +31,33 @@ jobs: - run: cat .cljfmt.edn - run: clj-kondo --version - # - run: - # name: "fmt check [clj]" - # command: | - # yarn run fmt:clj:check + - run: + name: "fmt check backend [clj]" + working_directory: "./backend" + command: | + yarn install + yarn run fmt:clj:check + + - run: + name: "fmt check exporter [clj]" + working_directory: "./exporter" + command: | + yarn install + yarn run fmt:clj:check + + - run: + name: "fmt check common [clj]" + working_directory: "./common" + command: | + yarn install + yarn run fmt:clj:check + + - run: + name: "fmt check frontend [clj]" + working_directory: "./frontend" + command: | + yarn install + yarn run fmt:clj:check - run: name: common lint From af2e4ca00f0f67b1861476cece5eb108aff5f1ce Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Mon, 8 Jan 2024 11:05:37 +0100 Subject: [PATCH 23/26] :bug: Fix opening the swap panel on a copy of a deleted component fails --- .../app/main/ui/workspace/sidebar/options/menus/component.cljs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index 8fda8b4958..bcc63e5ed5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -224,11 +224,10 @@ (cfh/join-path (if (not every-same-file?) "" (find-common-path [] 0)))) - filters* (mf/use-state {:term "" :file-id file-id - :path path + :path (or path "") :listing-thumbs? false}) filters (deref filters*) From 790ce27316bdbb72665a6835d24119860eb98289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Mon, 8 Jan 2024 12:26:07 +0100 Subject: [PATCH 24/26] :bug: Enable preprocess always when migrating files --- backend/src/app/features/components_v2.clj | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/backend/src/app/features/components_v2.clj b/backend/src/app/features/components_v2.clj index 3c5d3e5b0f..45c196f47a 100644 --- a/backend/src/app/features/components_v2.clj +++ b/backend/src/app/features/components_v2.clj @@ -383,12 +383,12 @@ (defn- migrate-components "If there is any component in the file library, add a new 'Library backup', generate main instances for all components there and remove - shapes from library components. Mark the file with - the :components-v2 option." + shapes from library components. Mark the file with the :components-v2 option." [file-data libraries] (sse/tap {:type :migration-progress :section :components}) - (let [components (ctkl/components-seq file-data)] + (let [file-data (prepare-file-data file-data libraries) + components (ctkl/components-seq file-data)] (if (empty? components) (assoc-in file-data [:options :components-v2] true) (let [[file-data page-id start-pos] @@ -503,9 +503,7 @@ (some-> *team-stats* (swap! update :processed/components (fnil + 0) total)) (some-> *file-stats* (swap! assoc :processed/components total))) - (-> file-data - (prepare-file-data libraries) - (add-instance-grids)))))) + (add-instance-grids file-data))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; GRAPHICS MIGRATION From c43458af1d22155681043e6c99ee7bce01b27367 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 8 Jan 2024 14:43:35 +0100 Subject: [PATCH 25/26] :bug: Fix problems with z-index --- common/src/app/common/types/shape_tree.cljc | 13 ++++++++++--- frontend/src/app/main/render.cljs | 1 - 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/common/src/app/common/types/shape_tree.cljc b/common/src/app/common/types/shape_tree.cljc index 95204a5239..f8e50a6cbc 100644 --- a/common/src/app/common/types/shape_tree.cljc +++ b/common/src/app/common/types/shape_tree.cljc @@ -211,14 +211,21 @@ ;; Check which index is lower :else ;; If the base is a layout we should check if the z-index property is set - (let [[z-index-a z-index-b] - (if (ctl/any-layout? objects base-id) + (let [layer-order? (ctl/any-layout? objects base-id) + [z-index-a z-index-b] + (if layer-order? [(ctl/layout-z-index objects (dm/get-in objects [base-id :shapes index-a])) (ctl/layout-z-index objects (dm/get-in objects [base-id :shapes index-b]))] [0 0])] - (if (= z-index-a z-index-b) + (cond + (and (= z-index-a z-index-b) (not layer-order?)) + (< index-a index-b) + + (and (= z-index-a z-index-b) layer-order?) (> index-a index-b) + + :else (< z-index-a z-index-b)))))) (defn sort-z-index diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index 0e3e95429c..a8efca58ac 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -208,7 +208,6 @@ (let [objects (:objects data) shapes (cfh/get-immediate-children objects) dim (calculate-dimensions objects aspect-ratio) - _ (prn ">>DIM" dim) vbox (format-viewbox dim) bgcolor (dm/get-in data [:options :background] default-color) From 5ea414aed6dd054c3acac72dbc974babe2b9e335 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 8 Jan 2024 15:06:04 +0100 Subject: [PATCH 26/26] :bug: Fix problem with alt-duplicate on root frames --- .../src/app/main/ui/workspace/viewport.cljs | 6 ++++-- .../app/main/ui/workspace/viewport/hooks.cljs | 20 +++++++++++++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 8374386cf4..35cb52be76 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -122,6 +122,7 @@ cursor (mf/use-state (utils/get-cursor :pointer-inner)) hover-ids (mf/use-state nil) hover (mf/use-state nil) + measure-hover (mf/use-state nil) hover-disabled? (mf/use-state false) hover-top-frame-id (mf/use-state nil) frame-hover (mf/use-state nil) @@ -264,7 +265,8 @@ (hooks/setup-viewport-size vport viewport-ref) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?) (hooks/setup-keyboard alt? mod? space? z? shift?) - (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?) + (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover measure-hover + hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?) (hooks/setup-viewport-modifiers modifiers base-objects) (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?) (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox) @@ -433,7 +435,7 @@ {:bounds vbox :selected-shapes selected-shapes :frame selected-frame - :hover-shape @hover + :hover-shape @measure-hover :zoom zoom}]) (when show-padding? diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index c195917cfe..f995848ec6 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -167,7 +167,7 @@ (not)))) (defn setup-hover-shapes - [page-id move-stream objects transform selected mod? hover hover-ids hover-top-frame-id hover-disabled? focus zoom show-measures?] + [page-id move-stream objects transform selected mod? hover measure-hover hover-ids hover-top-frame-id hover-disabled? focus zoom show-measures?] (let [;; We use ref so we don't recreate the stream on a change zoom-ref (mf/use-ref zoom) mod-ref (mf/use-ref @mod?) @@ -285,9 +285,6 @@ mod? (filter grouped?) - show-measures? - (filter #(group-empty-space? % objects ids)) - (not mod?) (filter #(or (root-frame-with-data? %) (group-empty-space? % objects ids)))) @@ -309,9 +306,21 @@ (remove #(and mod? (no-fill-nested-frames? %))) (filter #(or (empty? focus) (cpf/is-in-focus? objects focus %))) (first) - (get objects))] + (get objects)) + + ;; We keep track of a diferent shape for measures + measure-hover-shape + (when show-measures? + (->> ids + (remove #(group-empty-space? % objects ids)) + (remove (partial cfh/hidden-parent? objects)) + (remove #(and mod? (no-fill-nested-frames? %))) + (filter #(or (empty? focus) (cpf/is-in-focus? objects focus %))) + (first) + (get objects)))] (reset! hover hover-shape) + (reset! measure-hover measure-hover-shape) (reset! hover-ids ids)))))) (defn setup-viewport-modifiers @@ -420,4 +429,3 @@ text-editing? (do (st/emit! (dsc/push-shortcuts ::text tsc/shortcuts)) #(st/emit! (dsc/pop-shortcuts ::text))))))) -