3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 00:01:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Andrey Antukh 2024-02-06 20:10:55 +01:00
commit 4d7a572daa
44 changed files with 547 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

26
common/src/app/common/types/container.cljc
View file

@ -110,21 +110,25 @@
"Get the parent top shape linked to a component for this shape, if any"
([objects shape] (get-component-shape objects shape nil))
([objects shape {:keys [allow-main?] :or {allow-main? false} :as options}]
(cond
(nil? shape)
nil
(let [parent (get objects (:parent-id shape))]
(cond
(nil? shape)
nil
(cfh/root? shape)
nil
(cfh/root? shape)
nil
(ctk/instance-root? shape)
shape
(ctk/instance-root? shape)
shape
(and (not (ctk/in-component-copy? shape)) (not allow-main?))
nil
(and (not (ctk/in-component-copy? shape)) (not allow-main?))
nil
:else
(get-component-shape objects (get objects (:parent-id shape)) options))))
(and (ctk/instance-head? shape) (not (ctk/in-component-copy? parent)))
shape ; This case is a copy root inside a main component
:else
(get-component-shape objects parent options)))))
(defn get-head-shape
"Get the parent top or nested shape linked to a component for this shape, if any"

3
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -583,6 +583,7 @@
padding: $s-32;
border-radius: $br-8;
background-color: var(--modal-background-color);
border: $s-2 solid var(--modal-border-color);
min-width: $s-364;
min-height: $s-192;
max-width: $s-512;
@ -843,6 +844,7 @@
z-index: $z-index-10;
color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color);
border: $s-2 solid var(--panel-border-color);
}
.menu-item-base {
@ -904,6 +906,7 @@
overflow-x: hidden;
background-color: var(--menu-background-color);
color: var(--menu-foreground-color);
border: $s-2 solid var(--panel-border-color);
}
.select-wrapper {

2
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -13,6 +13,8 @@
--scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary);
--panel-border-color: var(--color-background-quaternary);
--app-background: var(--color-background-primary);
--loader-background: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary);

15
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -70,6 +70,21 @@
line-height: 1.2;
}
@mixin headlineMediumTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.4;
text-transform: uppercase;
font-weight: normal;
}
@mixin bodyLargeTypography {
font-family: "worksans", sans-serif;
font-size: $fs-16;
line-height: 1.5;
font-weight: normal;
}
@mixin textEllipsis {
max-width: 99%;
overflow: hidden;

4
frontend/src/app/main/data/workspace/layout.cljs
View file

@ -20,7 +20,7 @@
:document-history
:colorpalette
:element-options
:rules
:rulers
:display-grid
:snap-grid
:scale-text
@ -50,7 +50,7 @@
#{:sitemap
:layers
:element-options
:rules
:rulers
:display-grid
:snap-grid
:dynamic-alignment

31
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -640,6 +640,21 @@
:path-params path-params
:query-params query-params}))))))
(defn library-thumbnails-fetched
[thumbnails]
(ptk/reify ::library-thumbnails-fetched
ptk/UpdateEvent
(update [_ state]
(update state :workspace-thumbnails merge thumbnails))))
(defn fetch-library-thumbnails
[library-id]
(ptk/reify ::fetch-library-thumbnails
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id :tag "component"})
(rx/map library-thumbnails-fetched)))))
(defn ext-library-changed
[library-id modified-at revn changes]
(dm/assert! (uuid? library-id))
@ -654,11 +669,15 @@
ch/process-changes changes)))
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id :tag "component"})
(rx/map (fn [thumbnails]
(fn [state]
(assoc-in state [:workspace-libraries library-id :thumbnails] thumbnails))))))))
(watch [_ _ stream]
(let [stopper-s (rx/filter (ptk/type? ::ext-library-changed) stream)]
(->>
(rx/merge
(->> (rx/of library-id)
(rx/delay 5000)
(rx/map fetch-library-thumbnails)))
(rx/take-until stopper-s))))))
(defn reset-component
"Cancels all modifications in the shape with the given id, and all its children, in
@ -1261,7 +1280,7 @@
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id :tag "component"})
(rx/map (fn [thumbnails]
(fn [state]
(assoc-in state [:workspace-libraries library-id :thumbnails] thumbnails))))))))))
(update state :workspace-thumbnails merge thumbnails))))))))))
(defn unlink-file-from-library
[file-id library-id]

13
frontend/src/app/main/data/workspace/libraries_helpers.cljs
View file

@ -1081,7 +1081,10 @@
(:id component-parent-shape)
(get page :objects)
:update-new-shape update-new-shape
:update-original-shape update-original-shape)
:update-original-shape update-original-shape
:frame-id (if (cfh/frame-shape? component-parent-shape)
(:id component-parent-shape)
(:frame-id component-parent-shape)))
add-obj-change (fn [changes shape']
(update changes :redo-changes conj
@ -1090,14 +1093,10 @@
{:type :add-obj
:id (:id shape')
:parent-id (:parent-id shape')
:frame-id (:frame-id shape')
:index index
:ignore-touched true
:obj shape'})
(ctn/page? component-container)
(assoc :frame-id (if (= (:type shape') :frame)
(:id shape')
(:frame-id shape'))))))
:obj shape'}))))
mod-obj-change (fn [changes shape']
(update changes :redo-changes conj

4
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

@ -351,10 +351,10 @@
;; MAIN MENU
:toggle-rules {:tooltip (ds/meta-shift "R")
:toggle-rulers {:tooltip (ds/meta-shift "R")
:command (ds/c-mod "shift+r")
:subsections [:main-menu]
:fn #(st/emit! (toggle-layout-flag :rules))}
:fn #(st/emit! (toggle-layout-flag :rulers))}
:select-all {:tooltip (ds/meta "A")
:command (ds/c-mod "a")

10
frontend/src/app/main/data/workspace/thumbnails.cljs
View file

@ -115,16 +115,10 @@
(ptk/reify ::assoc-thumbnail
ptk/UpdateEvent
(update [_ state]
(let [prev-uri (dm/get-in state [:workspace-thumbnails object-id])
current-file-id (:current-file-id state)]
(let [prev-uri (dm/get-in state [:workspace-thumbnails object-id])]
(some->> prev-uri (vreset! prev-uri*))
(l/trc :hint "assoc thumbnail" :object-id object-id :uri uri)
#_(update state :workspace-thumbnails assoc object-id uri)
(if (thc/file-id? object-id current-file-id)
(update state :workspace-thumbnails assoc object-id uri)
(let [file-id (thc/get-file-id object-id)]
(update-in state [:workspace-libraries file-id :thumbnails] assoc object-id uri)))))
(update state :workspace-thumbnails assoc object-id uri)))
ptk/EffectEvent
(effect [_ _ _]

7
frontend/src/app/main/refs.cljs
View file

@ -212,8 +212,8 @@
(def snap-pixel?
(l/derived #(contains? % :snap-pixel-grid) workspace-layout))
(def rules?
(l/derived #(contains? % :rules) workspace-layout))
(def rulers?
(l/derived #(contains? % :rulers) workspace-layout))
(def workspace-file
"A ref to a striped vision of file (without data)."
@ -490,6 +490,9 @@
(dm/get-in state [:viewer-local :zoom-type]))
st/state))
(def workspace-thumbnails
(l/derived :workspace-thumbnails st/state))
(defn workspace-thumbnail-by-id
[object-id]
(l/derived

2
frontend/src/app/main/snap.cljs
View file

@ -46,7 +46,7 @@
(not (contains? focus id))))
(= type :guide)
(or (not (contains? layout :rules))
(or (not (contains? layout :rulers))
(not (contains? layout :snap-guides))
(and (d/not-empty? focus)
(not (contains? focus frame-id))))

8
frontend/src/app/main/ui/alert.scss
View file

@ -21,7 +21,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -30,12 +30,12 @@
}
.modal-content {
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
.modal-hint {
@include titleTipography;
@include bodyLargeTypography;
}
.action-buttons {
@ -56,7 +56,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

1
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -32,6 +32,7 @@
margin: $s-0;
padding: $s-4;
border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color);
overflow: auto;
& .separator {

9
frontend/src/app/main/ui/confirm.scss
View file

@ -22,7 +22,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -31,7 +31,7 @@
}
.modal-content {
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
@ -49,7 +49,7 @@
}
}
.modal-component-name {
@include titleTipography;
@include bodyLargeTypography;
}
.modal-hint {
@ -74,7 +74,6 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

1
frontend/src/app/main/ui/dashboard/change_owner.scss
View file

@ -12,7 +12,6 @@
.modal-container {
@extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -12,7 +12,6 @@
.modal-container {
@extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/dashboard/team.cljs
View file

@ -178,6 +178,7 @@
[:div {:class (stl/css :invitation-row)}
[:& fm/multi-input {:type "email"
:class (stl/css :email-input)
:name :emails
:auto-focus? true
:trim true

11
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -588,13 +588,12 @@
width: $s-400;
padding: $s-32;
background-color: var(--modal-background-color);
border: $s-1 solid var(--modal-border-color);
&.hero {
top: $s-216;
right: $s-32;
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
height: $s-32;
color: var(--modal-title-foreground-color);
}
@ -644,8 +643,9 @@
.role-select {
@include flexColumn;
row-gap: $s-8;
.role-title {
@include titleTipography;
@include bodyLargeTypography;
margin: 0;
color: var(--modal-title-foreground-color);
}
@ -676,7 +676,6 @@
.modal-container {
@extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {
@ -725,3 +724,7 @@
@extend .modal-cancel-btn;
}
}
.email-input {
@extend .input-base;
}

1
frontend/src/app/main/ui/dashboard/team_form.scss
View file

@ -12,7 +12,6 @@
.modal-container {
@extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

10
frontend/src/app/main/ui/delete_shared.scss
View file

@ -22,7 +22,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -40,10 +40,8 @@
}
.element-list {
@include titleTipography;
.list-item {
@include titleTipography;
}
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
}
.action-buttons {
@ -64,7 +62,7 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

4
frontend/src/app/main/ui/export.cljs
View file

@ -138,8 +138,8 @@
(cond-> (:name shape) suffix (str suffix))]
(when (:scale export)
[:div {:class (stl/css :selection-scale)}
(dm/str (ust/format-precision (* width (:scale export)) 2) "px"
(ust/format-precision (* height (:scale export)) 2) "px")])
(dm/str (ust/format-precision (* width (:scale export)) 2) "x"
(ust/format-precision (* height (:scale export)) 2))])
(when (:type export)
[:div {:class (stl/css :selection-extension)}

29
frontend/src/app/main/ui/export.scss
View file

@ -41,14 +41,14 @@
.title-text {
@include flexCenter;
@include titleTipography;
@include bodyLargeTypography;
padding: 0;
margin: 0;
color: var(--modal-title-foreground-color);
padding-left: $s-4;
}
.progress {
@include titleTipography;
@include bodyLargeTypography;
padding-left: $s-8;
margin: 0;
color: var(--modal-text-foreground-color);
@ -86,7 +86,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
@ -125,7 +125,7 @@
}
}
.selection-title {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
}
}
@ -160,7 +160,9 @@
border-radius: $br-8;
.selection-btn {
@include buttonStyle;
@include flexRow;
display: grid;
grid-template-columns: min-content auto 1fr auto auto;
align-items: center;
width: 100%;
height: 10%;
gap: $s-8;
@ -176,21 +178,21 @@
}
}
.selection-name {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
flex-grow: 1;
color: var(--modal-text-foreground-color);
text-align: start;
}
.selection-scale {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
min-width: $s-108;
padding: $s-12;
color: var(--modal-text-foreground-color);
}
.selection-extension {
@include titleTipography;
@include bodyLargeTypography;
@include textEllipsis;
min-width: $s-72;
padding: $s-12;
@ -199,7 +201,6 @@
}
.image-wrapper {
@include flexCenter;
height: 100%;
min-height: $s-32;
min-width: $s-32;
background-color: var(--app-white);
@ -231,9 +232,8 @@
.modal-scd-msg,
.modal-subtitle,
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}
.export-option {
@ -243,7 +243,8 @@
label {
align-items: flex-start;
.modal-subtitle {
@include tabTitleTipography;
// @include tabTitleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
}
}
@ -254,7 +255,7 @@
.option-content {
@include flexColumn;
@include titleTipography;
@include bodyLargeTypography;
}
.file-entry {
@ -271,7 +272,7 @@
}
}
.file-name-label {
@include titleTipography;
@include bodyLargeTypography;
}
}
&.loading {

1
frontend/src/app/main/ui/onboarding.scss
View file

@ -17,7 +17,6 @@
padding: 0;
margin: 0;
min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
}
.modal-left {

1
frontend/src/app/main/ui/onboarding/newsletter.scss
View file

@ -14,7 +14,6 @@
@extend .modal-container-base;
position: relative;
min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/onboarding/questions.scss
View file

@ -14,7 +14,6 @@
@extend .modal-container-base;
min-width: $s-512;
position: relative;
border: $s-1 solid var(--modal-border-color);
}
// STEP CONTAINER

1
frontend/src/app/main/ui/onboarding/team_choice.scss
View file

@ -16,7 +16,6 @@
display: flex;
position: relative;
min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
}
.modal-left {

1
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -175,7 +175,6 @@
.modal-container {
@extend .modal-container-base;
min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/settings/change_email.scss
View file

@ -13,7 +13,6 @@
.modal-container {
@extend .modal-container-base;
min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/settings/delete_account.scss
View file

@ -13,7 +13,6 @@
.modal-container {
@extend .modal-container-base;
min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {

1
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -17,6 +17,7 @@
width: $s-240;
padding: $s-4;
border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color);
z-index: $z-index-3;
}

56
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -70,36 +70,22 @@
(mf/defc describe-library-blocks
[{:keys [components-count graphics-count colors-count typography-count] :as props}]
[:*
(when (pos? components-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.components" components-count)])
(let [last-one (cond
(> colors-count 0) :color
(> graphics-count 0) :graphics
(> components-count 0) :components)]
[:*
(when (pos? components-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.components" components-count)]
(when (not= last-one :components)
[:span " · "])])
(when (pos? graphics-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.graphics" graphics-count)])
(when (pos? graphics-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.graphics" graphics-count)]
(when (not= last-one :graphics)
[:span " · "])])
(when (pos? colors-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.colors" colors-count)])
(when (pos? colors-count)
[:*
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.colors" colors-count)]
(when (not= last-one :colors)
[:span " · "])])
(when (pos? typography-count)
[:span {:class (stl/css :element-count)}
(tr "workspace.libraries.typography" typography-count)])]))
(when (pos? typography-count)
[:li {:class (stl/css :element-count)}
(tr "workspace.libraries.typography" typography-count)])])
(mf/defc libraries-tab
@ -208,7 +194,7 @@
[: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)}
[:ul {:class (stl/css :item-contents)}
[:& describe-library-blocks {:components-count (count components)
:graphics-count (count media)
:colors-count (count colors)
@ -229,7 +215,7 @@
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)}
[:ul {: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] []))
@ -262,7 +248,7 @@
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)}
[:ul {: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)
@ -376,11 +362,11 @@
: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))]]
[:ul {: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?)

30
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -39,7 +39,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
margin-bottom: $s-16;
color: var(--modal-title-foreground-color);
}
@ -70,24 +70,18 @@
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
padding-right: $s-8;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: $s-12;
margin-bottom: $s-24;
&:last-child {
margin-bottom: $s-8;
}
.item-name {
@include titleTipography;
@include bodyLargeTypography;
color: var(--library-name-foreground-color);
}
.item-contents {
@include titleTipography;
color: var(--library-content-foreground-color);
}
.item-publish,
.item-unpublish {
@extend .button-primary;
@ -99,7 +93,7 @@
}
.item-update {
@extend .button-warning;
@include tabTitleTipography;
@include headlineMediumTypography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
@ -143,7 +137,7 @@
}
.section-title {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
margin-bottom: $s-12;
}
@ -161,7 +155,7 @@
}
}
.section-list-empty {
@include titleTipography;
@include bodyLargeTypography;
@include flexCenter;
color: var(--empty-message-foreground-color);
@ -236,6 +230,18 @@
}
}
.item-contents {
@include bodyLargeTypography;
color: var(--library-content-foreground-color);
display: flex;
flex-wrap: wrap;
}
.element-count {
white-space: nowrap;
&:not(:last-child)::after {
content: "·";
margin-inline: $s-4;
}
}

8
frontend/src/app/main/ui/workspace/main_menu.cljs
View file

@ -305,14 +305,14 @@
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
:data-test "rules"
:id "file-menu-rules"}
:data-test "rulers"
:id "file-menu-rulers"}
[:span {:class (stl/css :item-name)}
(if (contains? layout :rules)
(if (contains? layout :rulers)
(tr "workspace.header.menu.hide-rules")
(tr "workspace.header.menu.show-rules"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-rules))]
(for [sc (scd/split-sc (sc/get-tooltip :toggle-rulers))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]

7
frontend/src/app/main/ui/workspace/nudge.scss
View file

@ -13,7 +13,6 @@
.modal-container {
@extend .modal-container-base;
min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
}
.modal-header {
@ -21,7 +20,7 @@
}
.modal-title {
@include tabTitleTipography;
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
.modal-close-btn {
@ -31,7 +30,7 @@
.modal-content {
@include flexColumn;
gap: $s-24;
@include titleTipography;
@include bodyLargeTypography;
margin-bottom: $s-24;
}
@ -43,7 +42,7 @@
}
.modal-msg {
@include titleTipography;
@include bodyLargeTypography;
color: var(--modal-text-foreground-color);
line-height: 1.5;
}

2
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -60,7 +60,7 @@
selected-text* (mf/use-state :file)
selected-text (deref selected-text*)
on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rules?)
rulers? (mf/deref refs/rulers?)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)

1
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -31,6 +31,7 @@
padding: $s-0 $s-0 $s-8 $s-8;
border-radius: $br-8;
background-color: var(--palette-background-color);
border: $s-2 solid var(--panel-border-color);
transition:
right 0.3s,
opacity 0.2s,

34
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -8,7 +8,6 @@
(ns app.main.ui.workspace.sidebar.assets.common
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.spec :as us]
[app.common.thumbnails :as thc]
@ -263,39 +262,32 @@
(:id target-asset)
(cfh/merge-path-item prefix (:name target-asset))))))))
(defn- get-component-thumbnail-uri
"Returns the component thumbnail uri"
[file-id component]
(let [page-id (:main-instance-page component)
root-id (:main-instance-id component)
object-id (thc/fmt-object-id file-id page-id root-id "component")
current-file? (= file-id (:id @refs/workspace-file))]
(if current-file?
(mf/deref (refs/workspace-thumbnail-by-id object-id))
(let [libraries @refs/workspace-libraries
thumbnail (dm/get-in libraries [file-id :thumbnails object-id])]
thumbnail))))
(mf/defc component-item-thumbnail
"Component that renders the thumbnail image or the original SVG."
{::mf/wrap-props false}
[{:keys [file-id root-shape component container class]}]
(let [retry (mf/use-state 0)
thumbnail-uri (get-component-thumbnail-uri file-id component)
handle-error
(let [page-id (:main-instance-page component)
root-id (:main-instance-id component)
retry (mf/use-state 0)
thumbnail-uri* (mf/with-memo [file-id page-id root-id]
(let [object-id (thc/fmt-object-id file-id page-id root-id "component")]
(refs/workspace-thumbnail-by-id object-id)))
thumbnail-uri (mf/deref thumbnail-uri*)
on-error
(mf/use-fn
(mf/deps @retry)
(fn []
(when (@retry < 3)
(when (< @retry 3)
(inc retry))))]
(if (some? thumbnail-uri)
[:& component-svg-thumbnail
{:thumbnail-uri thumbnail-uri
:class class
:on-error handle-error
:on-error on-error
:root-shape root-shape
:objects (:objects container)
:show-grids? true}]

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -103,7 +103,7 @@
fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
recent-fonts (mf/deref refs/workspace-recent-fonts)
full-size? (boolean (and full-size recent-fonts show-recent))
full-size? (boolean (and full-size show-recent))
select-next
(mf/use-fn

2
frontend/src/app/main/ui/workspace/top_toolbar.cljs
View file

@ -71,7 +71,7 @@
read-only? (mf/use-ctx ctx/workspace-read-only?)
rulers? (mf/deref refs/rules?)
rulers? (mf/deref refs/rulers?)
hide-toolbar? (mf/deref refs/toolbar-visibility)
interrupt

1
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -17,6 +17,7 @@
height: $s-56;
padding: $s-8 $s-16;
border-radius: $s-8;
border: $s-2 solid var(--panel-border-color);
z-index: $z-index-10;
background-color: var(--color-background-primary);
transition:

14
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -37,7 +37,7 @@
[app.main.ui.workspace.viewport.outline :as outline]
[app.main.ui.workspace.viewport.pixel-overlay :as pixel-overlay]
[app.main.ui.workspace.viewport.presence :as presence]
[app.main.ui.workspace.viewport.rules :as rules]
[app.main.ui.workspace.viewport.rulers :as rulers]
[app.main.ui.workspace.viewport.scroll-bars :as scroll-bars]
[app.main.ui.workspace.viewport.selection :as selection]
[app.main.ui.workspace.viewport.snap-distances :as snap-distances]
@ -231,7 +231,7 @@
(or show-distances? mode-inspect?))
show-artboard-names? (contains? layout :display-artboard-names)
hide-ui? (contains? layout :hide-ui)
show-rules? (and (contains? layout :rules) (not hide-ui?))
show-rulers? (and (contains? layout :rulers) (not hide-ui?))
disabled-guides? (or drawing-tool transform drawing-path? node-editing?)
@ -264,7 +264,7 @@
(:y first-shape)
(:y selected-frame))
rule-area-size (/ rules/rule-area-size zoom)]
rule-area-size (/ rulers/ruler-area-size zoom)]
(hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-viewport-size vport viewport-ref)
@ -377,7 +377,7 @@
:on-pointer-up on-pointer-up}
[:defs
;; This clip is so the handlers are not over the rules
;; This clip is so the handlers are not over the rulers
[:clipPath {:id "clip-handlers"}
[:rect {:x (+ (:x vbox) rule-area-size)
:y (+ (:y vbox) rule-area-size)
@ -544,16 +544,16 @@
{:page-id page-id}])
(when-not hide-ui?
[:& rules/rules
[:& rulers/rulers
{:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox
:selected-shapes selected-shapes
:offset-x offset-x
:offset-y offset-y
:show-rules? show-rules?}])
:show-rulers? show-rulers?}])
(when show-rules?
(when show-rulers?
[:& guides/viewport-guides
{:zoom zoom
:vbox vbox

24
frontend/src/app/main/ui/workspace/viewport/guides.cljs
View file

@ -19,7 +19,7 @@
[app.main.streams :as ms]
[app.main.ui.css-cursors :as cur]
[app.main.ui.formats :as fmt]
[app.main.ui.workspace.viewport.rules :as rules]
[app.main.ui.workspace.viewport.rulers :as rulers]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
@ -129,7 +129,7 @@
(defn guide-area-axis
[pos vbox zoom frame axis]
(let [rules-pos (/ rules/rules-pos zoom)
(let [rulers-pos (/ rulers/rulers-pos zoom)
guide-active-area (/ guide-active-area zoom)]
(cond
(and (some? frame) (= axis :x))
@ -146,12 +146,12 @@
(= axis :x)
{:x (- pos (/ guide-active-area 2))
:y (+ (:y vbox) rules-pos)
:y (+ (:y vbox) rulers-pos)
:width guide-active-area
:height (:height vbox)}
:else
{:x (+ (:x vbox) rules-pos)
{:x (+ (:x vbox) rulers-pos)
:y (- pos (/ guide-active-area 2))
:width (:width vbox)
:height guide-active-area})))
@ -198,23 +198,23 @@
(defn guide-pill-axis
[pos vbox zoom axis]
(let [rules-pos (/ rules/rules-pos zoom)
(let [rulers-pos (/ rulers/rulers-pos zoom)
guide-pill-width (/ guide-pill-width zoom)
guide-pill-height (/ guide-pill-height zoom)]
(if (= axis :x)
{:rect-x (- pos (/ guide-pill-width 2))
:rect-y (+ (:y vbox) rules-pos (- (/ guide-pill-width 2)) (/ 3 zoom))
:rect-y (+ (:y vbox) rulers-pos (- (/ guide-pill-width 2)) (/ 3 zoom))
:rect-width guide-pill-width
:rect-height guide-pill-height
:text-x pos
:text-y (+ (:y vbox) rules-pos (- (/ 3 zoom)))}
:text-y (+ (:y vbox) rulers-pos (- (/ 3 zoom)))}
{:rect-x (+ (:x vbox) rules-pos (- (/ guide-pill-height 2)) (- (/ 4 zoom)))
{:rect-x (+ (:x vbox) rulers-pos (- (/ guide-pill-height 2)) (- (/ 4 zoom)))
:rect-y (- pos (/ guide-pill-width 2))
:rect-width guide-pill-height
:rect-height guide-pill-width
:text-x (+ (:x vbox) rules-pos (- (/ 3 zoom)))
:text-x (+ (:x vbox) rulers-pos (- (/ 3 zoom)))
:text-y pos})))
(defn guide-inside-vbox?
@ -222,7 +222,7 @@
(partial guide-inside-vbox? zoom vbox))
([zoom {:keys [x y width height]} {:keys [axis position]}]
(let [rule-area-size (/ rules/rule-area-size zoom)
(let [rule-area-size (/ rulers/ruler-area-size zoom)
x1 x
x2 (+ x width)
y1 y
@ -376,8 +376,8 @@
:text-anchor "middle"
:dominant-baseline "middle"
:transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
:style {:font-size (/ rules/font-size zoom)
:font-family rules/font-family
:style {:font-size (/ rulers/font-size zoom)
:font-family rulers/font-family
:fill colors/black}}
;; If the guide is associated to a frame we show the position relative to the frame
(fmt/format-number (- pos (if (= axis :x) (:x frame) (:y frame))))]]))])))

347
frontend/src/app/main/ui/workspace/viewport/rulers.cljs Normal file
View file

@ -0,0 +1,347 @@
;; 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
(ns app.main.ui.workspace.viewport.rulers
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as hooks]
[app.util.object :as obj]
[rumext.v2 :as mf]))
(def rulers-pos 15)
(def rulers-size 4)
(def rulers-width 1)
(def ruler-area-size 22)
(def ruler-area-half-size (/ ruler-area-size 2))
(def rulers-background "var(--panel-background-color)")
(def selection-area-color "var(--color-accent-tertiary)")
(def selection-area-opacity 0.3)
(def over-number-size 100)
(def over-number-opacity 0.8)
(def over-number-percent 0.75)
(def font-size 12)
(def font-family "worksans")
(def font-color "var(--layer-row-foreground-color)")
(def canvas-border-radius 12)
;; ----------------
;; RULERS
;; ----------------
(defn- calculate-step-size
[zoom]
(cond
(< 0 zoom 0.008) 10000
(< 0.008 zoom 0.015) 5000
(< 0.015 zoom 0.04) 2500
(< 0.04 zoom 0.07) 1000
(< 0.07 zoom 0.2) 500
(< 0.2 zoom 0.5) 250
(< 0.5 zoom 1) 100
(<= 1 zoom 2) 50
(< 2 zoom 4) 25
(< 4 zoom 6) 10
(< 6 zoom 15) 5
(< 15 zoom 25) 2
(< 25 zoom) 1
:else 1))
(defn get-clip-area
[vbox zoom-inverse axis]
(if (= axis :x)
(let [x (+ (:x vbox) (* 25 zoom-inverse))
y (:y vbox)
width (- (:width vbox) (* 21 zoom-inverse))
height (* 25 zoom-inverse)]
{:x x :y y :width width :height height})
(let [x (:x vbox)
y (+ (:y vbox) (* 25 zoom-inverse))
width (* 25 zoom-inverse)
height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height})))
(defn get-background-area
[vbox zoom-inverse axis]
(if (= axis :x)
(let [x (:x vbox)
y (:y vbox)
width (:width vbox)
height (* ruler-area-size zoom-inverse)]
{:x x :y y :width width :height height})
(let [x (:x vbox)
y (+ (:y vbox) (* ruler-area-size zoom-inverse))
width (* ruler-area-size zoom-inverse)
height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height})))
(defn get-ruler-params
[vbox axis]
(if (= axis :x)
(let [start (:x vbox)
end (+ start (:width vbox))]
{:start start :end end})
(let [start (:y vbox)
end (+ start (:height vbox))]
{:start start :end end})))
(defn get-ruler-axis
[val vbox zoom-inverse axis]
(let [rulers-pos (* rulers-pos zoom-inverse)
rulers-size (* rulers-size zoom-inverse)]
(if (= axis :x)
{:text-x val
:text-y (+ (:y vbox) (- rulers-pos (* 4 zoom-inverse)))
:line-x1 val
:line-y1 (+ (:y vbox) rulers-pos (* 2 zoom-inverse))
:line-x2 val
:line-y2 (+ (:y vbox) rulers-pos (* 2 zoom-inverse) rulers-size)}
{:text-x (+ (:x vbox) (- rulers-pos (* 4 zoom-inverse)))
:text-y val
:line-x1 (+ (:x vbox) rulers-pos (* 2 zoom-inverse))
:line-y1 val
:line-x2 (+ (:x vbox) rulers-pos (* 2 zoom-inverse) rulers-size)
:line-y2 val})))
(defn rulers-outside-path
"Path data for the viewport outside"
[x1 y1 x2 y2]
(dm/str
"M" x1 "," y1
"L" x2 "," y1
"L" x2 "," y2
"L" x1 "," y2
"Z"))
(defn rulers-inside-path
"Calculates the path for the inside of the viewport frame"
[x1 y1 x2 y2 br bw]
(dm/str
"M" (+ x1 bw) "," (+ y1 bw br)
"Q" (+ x1 bw) "," (+ y1 bw) "," (+ x1 bw br) "," (+ y1 bw)
"L" (- x2 br) "," (+ y1 bw)
"Q" x2 "," (+ y1 bw) "," x2 "," (+ y1 bw br)
"L" x2 "," (- y2 br)
"Q" x2 "," y2 "," (- x2 br) "," y2
"L" (+ x1 bw br) "," y2
"Q" (+ x1 bw) "," y2 "," (+ x1 bw) "," (- y2 br)
"Z"))
(mf/defc rulers-text
"Draws the text for the rulers in a specific axis"
[{:keys [vbox step offset axis zoom-inverse]}]
(let [clip-id (str "clip-ruler-" (d/name axis))
{:keys [start end]} (get-ruler-params vbox axis)
minv (max start -100000)
minv (* (mth/ceil (/ minv step)) step)
maxv (min end 100000)
maxv (* (mth/floor (/ maxv step)) step)
;; These extra operations ensure that we are selecting a frame its initial location is rendered in the ruler
minv (+ minv (mod offset step))
maxv (+ maxv (mod offset step))]
[:g.rulers {:clipPath (str "url(#" clip-id ")")}
[:defs
[:clipPath {:id clip-id}
(let [{:keys [x y width height]} (get-clip-area vbox zoom-inverse axis)]
[:rect {:x x :y y :width width :height height}])]]
(for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-ruler-axis step-val vbox zoom-inverse axis)]
[:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
[:text {:x text-x
:y text-y
:text-anchor "middle"
:dominant-baseline "middle"
:transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill font-color}}
;; If the guide is associated to a frame we show the position relative to the frame
(fmt/format-number (- step-val offset))]
[:line {:key (str "line-" (d/name axis) "-" step-val)
:x1 line-x1
:y1 line-y1
:x2 line-x2
:y2 line-y2
:style {:stroke font-color
:stroke-width rulers-width}}]]))]))
(mf/defc viewport-frame
[{:keys [show-rulers? zoom zoom-inverse vbox offset-x offset-y]}]
(let [{:keys [width height] x1 :x y1 :y} vbox
x2 (+ x1 width)
y2 (+ y1 height)
bw (if show-rulers? (* ruler-area-size zoom-inverse) 0)
br (/ canvas-border-radius zoom)
bs (* 4 zoom-inverse)]
[:*
[:g.viewport-frame-background
;; This goes behind because if it goes in front the background bleeds through
[:path {:d (rulers-inside-path x1 y1 x2 y2 br bw)
:fill "none"
:stroke-width bs
:stroke "var(--panel-border-color)"}]
[:path {:d (dm/str (rulers-outside-path x1 y1 x2 y2)
(rulers-inside-path x1 y1 x2 y2 br bw))
:fill-rule "evenodd"
:fill rulers-background}]]
(when show-rulers?
(let [step (calculate-step-size zoom)]
[:g.viewport-frame-rulers
[:& rulers-text {:vbox vbox :offset offset-x :step step :zoom-inverse zoom-inverse :axis :x}]
[:& rulers-text {:vbox vbox :offset offset-y :step step :zoom-inverse zoom-inverse :axis :y}]]))]))
(mf/defc selection-area
[{:keys [vbox zoom-inverse selection-rect offset-x offset-y]}]
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
[:g.selection-area
[:defs
[:linearGradient {:id "selection-gradient-start"}
[:stop {:offset "0%" :stop-color rulers-background :stop-opacity 0}]
[:stop {:offset "40%" :stop-color rulers-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rulers-background :stop-opacity 1}]]
[:linearGradient {:id "selection-gradient-end"}
[:stop {:offset "0%" :stop-color rulers-background :stop-opacity 1}]
[:stop {:offset "60%" :stop-color rulers-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rulers-background :stop-opacity 0}]]]
[:g
[:rect {:x (- (:x selection-rect) (* (* over-number-size over-number-percent) zoom-inverse))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* ruler-area-size zoom-inverse)
:fill "url('#selection-gradient-start')"}]
[:rect {:x (- (:x2 selection-rect) (* over-number-size (- 1 over-number-percent)))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* ruler-area-size zoom-inverse)
:fill "url('#selection-gradient-end')"}]
[:rect {:x (:x selection-rect)
:y (:y vbox)
:width (:width selection-rect)
:height (* ruler-area-size zoom-inverse)
:style {:fill selection-area-color
:fill-opacity selection-area-opacity}}]
[:text {:x (- (:x1 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "end"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:x1 selection-rect) offset-x))]
[:text {:x (+ (:x2 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "start"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:x2 selection-rect) offset-x))]]
(let [center-x (+ (:x vbox) (* ruler-area-half-size zoom-inverse))
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (* ruler-area-half-size zoom-inverse))]
[:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
[:rect {:x (- center-x (/ (:height selection-rect) 2) (* ruler-area-half-size zoom-inverse))
:y (- center-y (* ruler-area-half-size zoom-inverse))
:width (:height selection-rect)
:height (* ruler-area-size zoom-inverse)
:style {:fill selection-area-color
:fill-opacity selection-area-opacity}}]
[:rect {:x (- center-x (/ (:height selection-rect) 2) (* ruler-area-half-size zoom-inverse) (* over-number-size zoom-inverse))
:y (- center-y (* ruler-area-half-size zoom-inverse))
:width (* over-number-size zoom-inverse)
:height (* ruler-area-size zoom-inverse)
:style {:fill rulers-background
:fill-opacity over-number-opacity}}]
[:rect {:x (+ (- center-x (/ (:height selection-rect) 2) (* ruler-area-half-size zoom-inverse)) (:height selection-rect))
:y (- center-y (* ruler-area-half-size zoom-inverse))
:width (* over-number-size zoom-inverse)
:height (* ruler-area-size zoom-inverse)
:style {:fill rulers-background
:fill-opacity over-number-opacity}}]
[:text {:x (- center-x (/ (:height selection-rect) 2) (* 15 zoom-inverse))
:y center-y
:text-anchor "end"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:y2 selection-rect) offset-y))]
[:text {:x (+ center-x (/ (:height selection-rect) 2))
:y center-y
:text-anchor "start"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:y1 selection-rect) offset-y))]])])
(mf/defc rulers
{::mf/wrap-props false
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rulers?"]))]}
[props]
(let [zoom (obj/get props "zoom")
zoom-inverse (obj/get props "zoom-inverse")
vbox (obj/get props "vbox")
offset-x (obj/get props "offset-x")
offset-y (obj/get props "offset-y")
selected-shapes (-> (obj/get props "selected-shapes")
(hooks/use-equal-memo))
show-rulers? (obj/get props "show-rulers?")
selection-rect
(mf/use-memo
(mf/deps selected-shapes)
#(when (d/not-empty? selected-shapes)
(gsh/shapes->rect selected-shapes)))]
(when (some? vbox)
[:g.viewport-frame {:pointer-events "none"}
[:& viewport-frame
{:show-rulers? show-rulers?
:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox
:offset-x offset-x
:offset-y offset-y}]
(when (and show-rulers? (some? selection-rect))
[:& selection-area
{:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox
:selection-rect selection-rect
:offset-x offset-x
:offset-y offset-y}])])))

350
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -1,350 +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
(ns app.main.ui.workspace.viewport.rules
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.math :as mth]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as hooks]
[app.util.object :as obj]
[rumext.v2 :as mf]))
(def rules-pos 15)
(def rules-size 4)
(def rules-width 1)
(def rule-area-size 22)
(def rule-area-half-size (/ rule-area-size 2))
(def rules-background "var(--panel-background-color)")
(def selection-area-color "var(--color-accent-tertiary)")
(def selection-area-opacity 0.3)
(def over-number-size 100)
(def over-number-opacity 0.8)
(def over-number-percent 0.75)
(def font-size 12)
(def font-family "worksans")
(def font-color "var(--layer-row-foreground-color)")
(def canvas-border-radius 12)
;; ----------------
;; RULES
;; ----------------
(defn- calculate-step-size
[zoom]
(cond
(< 0 zoom 0.008) 10000
(< 0.008 zoom 0.015) 5000
(< 0.015 zoom 0.04) 2500
(< 0.04 zoom 0.07) 1000
(< 0.07 zoom 0.2) 500
(< 0.2 zoom 0.5) 250
(< 0.5 zoom 1) 100
(<= 1 zoom 2) 50
(< 2 zoom 4) 25
(< 4 zoom 6) 10
(< 6 zoom 15) 5
(< 15 zoom 25) 2
(< 25 zoom) 1
:else 1))
(defn get-clip-area
[vbox zoom-inverse axis]
(if (= axis :x)
(let [x (+ (:x vbox) (* 25 zoom-inverse))
y (:y vbox)
width (- (:width vbox) (* 21 zoom-inverse))
height (* 25 zoom-inverse)]
{:x x :y y :width width :height height})
(let [x (:x vbox)
y (+ (:y vbox) (* 25 zoom-inverse))
width (* 25 zoom-inverse)
height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height})))
(defn get-background-area
[vbox zoom-inverse axis]
(if (= axis :x)
(let [x (:x vbox)
y (:y vbox)
width (:width vbox)
height (* rule-area-size zoom-inverse)]
{:x x :y y :width width :height height})
(let [x (:x vbox)
y (+ (:y vbox) (* rule-area-size zoom-inverse))
width (* rule-area-size zoom-inverse)
height (- (:height vbox) (* 21 zoom-inverse))]
{:x x :y y :width width :height height})))
(defn get-rule-params
[vbox axis]
(if (= axis :x)
(let [start (:x vbox)
end (+ start (:width vbox))]
{:start start :end end})
(let [start (:y vbox)
end (+ start (:height vbox))]
{:start start :end end})))
(defn get-rule-axis
[val vbox zoom-inverse axis]
(let [rules-pos (* rules-pos zoom-inverse)
rules-size (* rules-size zoom-inverse)]
(if (= axis :x)
{:text-x val
:text-y (+ (:y vbox) (- rules-pos (* 4 zoom-inverse)))
:line-x1 val
:line-y1 (+ (:y vbox) rules-pos (* 2 zoom-inverse))
:line-x2 val
:line-y2 (+ (:y vbox) rules-pos (* 2 zoom-inverse) rules-size)}
{:text-x (+ (:x vbox) (- rules-pos (* 4 zoom-inverse)))
:text-y val
:line-x1 (+ (:x vbox) rules-pos (* 2 zoom-inverse))
:line-y1 val
:line-x2 (+ (:x vbox) rules-pos (* 2 zoom-inverse) rules-size)
:line-y2 val})))
(defn- round-corner-path-tl
[cx cy radius]
(dm/str
"M" cx "," cy
"L" (+ cx radius) "," cy
"Q" cx "," cy "," cx "," (+ cy radius)
"Z"))
(defn- round-corner-path-tr
[cx cy radius]
(dm/str
"M" cx "," cy
"L" (+ cx radius) "," cy
"L" (+ cx radius) "," (+ cy radius)
"Q" (+ cx radius) "," cy "," cx "," cy
"Z"))
(defn- round-corner-path-bl
[cx cy radius]
(dm/str
"M" cx "," cy
"Q" cx "," (+ cy radius) "," (+ cx radius) "," (+ cy radius)
"L" cx "," (+ cy radius)
"Z"))
(defn- round-corner-path-br
[cx cy radius]
(dm/str
"M" (+ cx radius) "," cy
"L" (+ cx radius) "," (+ cy radius)
"L" cx "," (+ cy radius)
"Q" (+ cx radius) "," (+ cy radius) "," (+ cx radius) "," cy
"Z"))
(mf/defc rules-axis
[{:keys [zoom zoom-inverse vbox axis offset]}]
(let [rules-width (* rules-width zoom-inverse)
step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))
font-color font-color
rules-background rules-background]
[:*
(let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)]
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
[:g.rules {:clipPath (str "url(#" clip-id ")")}
[:defs
[:clipPath {:id clip-id}
(let [{:keys [x y width height]} (get-clip-area vbox zoom-inverse axis)]
[:rect {:x x :y y :width width :height height}])]]
(let [{:keys [start end]} (get-rule-params vbox axis)
minv (max start -100000)
minv (* (mth/ceil (/ minv step)) step)
maxv (min end 100000)
maxv (* (mth/floor (/ maxv step)) step)
;; These extra operations ensure that we are selecting a frame its initial location is rendered in the rule
minv (+ minv (mod offset step))
maxv (+ maxv (mod offset step))]
(for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-rule-axis step-val vbox zoom-inverse axis)]
[:* {:key (dm/str "text-" (d/name axis) "-" step-val)}
[:text {:x text-x
:y text-y
:text-anchor "middle"
:dominant-baseline "middle"
:transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill font-color}}
;; If the guide is associated to a frame we show the position relative to the frame
(fmt/format-number (- step-val offset))]
[:line {:key (str "line-" (d/name axis) "-" step-val)
:x1 line-x1
:y1 line-y1
:x2 line-x2
:y2 line-y2
:style {:stroke font-color
:stroke-width rules-width}}]])))]]))
(mf/defc selection-area
[{:keys [vbox zoom-inverse selection-rect offset-x offset-y]}]
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
(let [rules-background rules-background]
[:g.selection-area
[:defs
[:linearGradient {:id "selection-gradient-start"}
[:stop {:offset "0%" :stop-color rules-background :stop-opacity 0}]
[:stop {:offset "40%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rules-background :stop-opacity 1}]]
[:linearGradient {:id "selection-gradient-end"}
[:stop {:offset "0%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "60%" :stop-color rules-background :stop-opacity 1}]
[:stop {:offset "100%" :stop-color rules-background :stop-opacity 0}]]]
[:g
[:rect {:x (- (:x selection-rect) (* (* over-number-size over-number-percent) zoom-inverse))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:fill "url('#selection-gradient-start')"}]
[:rect {:x (- (:x2 selection-rect) (* over-number-size (- 1 over-number-percent)))
:y (:y vbox)
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:fill "url('#selection-gradient-end')"}]
[:rect {:x (:x selection-rect)
:y (:y vbox)
:width (:width selection-rect)
:height (* rule-area-size zoom-inverse)
:style {:fill selection-area-color
:fill-opacity selection-area-opacity}}]
[:text {:x (- (:x1 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "end"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:x1 selection-rect) offset-x))]
[:text {:x (+ (:x2 selection-rect) (* 4 zoom-inverse))
:y (+ (:y vbox) (* 10.6 zoom-inverse))
:text-anchor "start"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:x2 selection-rect) offset-x))]]
(let [center-x (+ (:x vbox) (* rule-area-half-size zoom-inverse))
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (* rule-area-half-size zoom-inverse))]
[:g {:transform (str "rotate(-90 " center-x "," center-y ")")}
[:rect {:x (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse))
:y (- center-y (* rule-area-half-size zoom-inverse))
:width (:height selection-rect)
:height (* rule-area-size zoom-inverse)
:style {:fill selection-area-color
:fill-opacity selection-area-opacity}}]
[:rect {:x (- center-x (/ (:height selection-rect) 2) (* rule-area-half-size zoom-inverse) (* over-number-size zoom-inverse))
:y (- center-y (* rule-area-half-size zoom-inverse))
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
: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))
:y (- center-y (* rule-area-half-size zoom-inverse))
:width (* over-number-size zoom-inverse)
:height (* rule-area-size zoom-inverse)
:style {:fill rules-background
:fill-opacity over-number-opacity}}]
[:text {:x (- center-x (/ (:height selection-rect) 2) (* 15 zoom-inverse))
:y center-y
:text-anchor "end"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:y2 selection-rect) offset-y))]
[:text {:x (+ center-x (/ (:height selection-rect) 2))
:y center-y
:text-anchor "start"
:dominant-baseline "middle"
:style {:font-size (* font-size zoom-inverse)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (- (:y1 selection-rect) offset-y))]])]))
(mf/defc rules
{::mf/wrap-props false
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rules?"]))]}
[props]
(let [zoom (obj/get props "zoom")
zoom-inverse (obj/get props "zoom-inverse")
vbox (obj/get props "vbox")
offset-x (obj/get props "offset-x")
offset-y (obj/get props "offset-y")
selected-shapes (-> (obj/get props "selected-shapes")
(hooks/use-equal-memo))
show-rules? (obj/get props "show-rules?")
rules-background rules-background
border-radius (/ canvas-border-radius zoom)
selection-rect
(mf/use-memo
(mf/deps selected-shapes)
#(when (d/not-empty? selected-shapes)
(gsh/shapes->rect selected-shapes)))]
(when (some? vbox)
[:g.rules {:pointer-events "none"}
(when show-rules?
[:*
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]])
;; Draw the rules' rounded corners in the viewport corners
(let [{:keys [x y width height]} vbox
rule-area-size (if show-rules? (/ rule-area-size zoom) 0)]
[:*
[:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]])
(when (and show-rules? (some? selection-rect))
[:& selection-area {:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox
:selection-rect selection-rect
:offset-x offset-x
:offset-y offset-y}])])))