From 884cac4b3b288ac6c514f96d881b1b6ebef68308 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 30 Mar 2020 23:56:15 +0200 Subject: [PATCH 01/22] :recycle: Simplify gulp compilation stage. --- frontend/gulpfile.js | 99 ++----- frontend/resources/styles/view.scss | 45 ---- .../styles/view/layouts/main-layout.scss | 250 ------------------ 3 files changed, 21 insertions(+), 373 deletions(-) delete mode 100644 frontend/resources/styles/view.scss delete mode 100644 frontend/resources/styles/view/layouts/main-layout.scss diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 11d0d6955..c9dafa83b 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -77,12 +77,6 @@ function scssPipeline(options) { // Templates -function readSvgSprite() { - const path = paths.build + "/icons-sprite/symbol/svg/sprite.symbol.svg"; - const content = fs.readFileSync(path, {encoding: "utf8"}); - return content; -} - function readLocales() { const path = __dirname + "/resources/locales.json"; const content = JSON.parse(fs.readFileSync(path, {encoding: "utf8"})); @@ -132,12 +126,11 @@ function templatePipeline(options) { const ts = Math.floor(new Date()); const locales = readLocales(); - const icons = readSvgSprite(); + // const icons = readSvgSprite(); const config = readConfig(); const tmpl = mustache({ ts: ts, - ic: icons, config: JSON.stringify(config), translations: JSON.stringify(locales), }); @@ -155,7 +148,7 @@ function templatePipeline(options) { gulp.task("scss:main", scssPipeline({ input: paths.resources + "styles/main.scss", - output: paths.build + "css/main.css" + output: paths.output + "css/main.css" })); gulp.task("scss", gulp.parallel("scss:main")); @@ -163,25 +156,23 @@ gulp.task("scss", gulp.parallel("scss:main")); gulp.task("svg:sprite", function() { return gulp.src(paths.resources + "images/icons/*.svg") .pipe(rename({prefix: 'icon-'})) - .pipe(svgSprite({mode:{symbol: {inline: true}}})) - .pipe(gulp.dest(paths.build + "icons-sprite/")); + .pipe(svgSprite({mode:{symbol: {inline: false}}})) + .pipe(gulp.dest(paths.output + "images/svg-sprite/")); }); gulp.task("template:main", templatePipeline({ input: paths.resources + "templates/index.mustache", - output: paths.build + output: paths.output })); -gulp.task("templates", gulp.series("svg:sprite", "template:main")); +gulp.task("templates", gulp.series("template:main")); /*********************************************** * Development ***********************************************/ gulp.task("dev:clean", function(next) { - rimraf(paths.output, function() { - rimraf(paths.build, next); - }); + rimraf(paths.output, next); }); gulp.task("dev:copy:images", function() { @@ -189,52 +180,32 @@ gulp.task("dev:copy:images", function() { .pipe(gulp.dest(paths.output + "images/")); }); -gulp.task("dev:copy:css", function() { - return gulp.src(paths.build + "css/**/*") - .pipe(gulp.dest(paths.output + "css/")); -}); - -gulp.task("dev:copy:icons-sprite", function() { - return gulp.src(paths.build + "icons-sprite/**/*") - .pipe(gulp.dest(paths.output + "icons-sprite/")); -}); - -gulp.task("dev:copy:templates", function() { - return gulp.src(paths.build + "index.html") - .pipe(gulp.dest(paths.output)); -}); - gulp.task("dev:copy:fonts", function() { return gulp.src(paths.resources + "fonts/**/*") .pipe(gulp.dest(paths.output + "fonts/")); }); gulp.task("dev:copy", gulp.parallel("dev:copy:images", - "dev:copy:css", - "dev:copy:fonts", - "dev:copy:icons-sprite", - "dev:copy:templates")); + "dev:copy:fonts")); gulp.task("dev:dirs", function(next) { - mkdirp("./resources/public/css/") - .then(() => next()) + mkdirp("./resources/public/css/").then(() => next()) }); gulp.task("watch:main", function() { - gulp.watch(paths.scss, gulp.series("scss", "dev:copy:css")); + gulp.watch(paths.scss, gulp.series("scss")); + gulp.watch(paths.resources + "images/**/*", + gulp.series("svg:sprite", + "dev:copy:images")); gulp.watch([paths.resources + "templates/*.mustache", - paths.resources + "locales.json", - paths.resources + "images/**/*"], - gulp.series("templates", - "dev:copy:images", - "dev:copy:templates", - "dev:copy:icons-sprite")); + paths.resources + "locales.json"], + gulp.series("templates")); }); gulp.task("watch", gulp.series( "dev:dirs", - gulp.parallel("scss", "templates"), + gulp.parallel("scss", "templates", "svg:sprite"), "dev:copy", "watch:main" )); @@ -244,42 +215,14 @@ gulp.task("watch", gulp.series( ***********************************************/ gulp.task("dist:clean", function(next) { - rimraf(paths.dist, function() { - rimraf(paths.build, next); - }); + rimraf(paths.dist, next); }); -gulp.task("dist:copy:templates", function() { - return gulp.src(paths.build + "index.html") +gulp.task("dist:copy", function() { + return gulp.src(paths.output + "**/*") .pipe(gulp.dest(paths.dist)); }); -gulp.task("dist:copy:images", function() { - return gulp.src(paths.resources + "images/**/*") - .pipe(gulp.dest(paths.dist + "images/")); -}); - -gulp.task("dist:copy:styles", function() { - return gulp.src(paths.build + "css/**/*") - .pipe(gulp.dest(paths.dist + "css/")); -}); - -gulp.task("dist:copy:icons-sprite", function() { - return gulp.src(paths.build + "icons-sprite/**/*") - .pipe(gulp.dest(paths.dist + "icons-sprite/")); -}); - -gulp.task("dist:copy:fonts", function() { - return gulp.src(paths.resources + "/fonts/**/*") - .pipe(gulp.dest(paths.dist + "fonts/")); -}); - -gulp.task("dist:copy", gulp.parallel("dist:copy:fonts", - "dist:copy:icons-sprite", - "dist:copy:styles", - "dist:copy:templates", - "dist:copy:images")); - gulp.task("dist:gzip", function() { return gulp.src(`${paths.dist}**/!(*.gz|*.br|*.jpg|*.png)`) .pipe(gzip({gzipOptions: {level: 9}})) @@ -287,8 +230,8 @@ gulp.task("dist:gzip", function() { }); gulp.task("dist", gulp.series( + "dev:clean", "dist:clean", - "scss", - "templates", + gulp.parallel("scss", "templates", "svg:sprite", "dev:copy"), "dist:copy" )); diff --git a/frontend/resources/styles/view.scss b/frontend/resources/styles/view.scss deleted file mode 100644 index 5b3c64ec6..000000000 --- a/frontend/resources/styles/view.scss +++ /dev/null @@ -1,45 +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) 2016 Andrey Antukh -// Copyright (c) 2016 Juan de la Cruz - -// UXBOX VIEW STYLES -//################################################# -// -//################################################# - -@import 'common/dependencies/colors'; -@import 'common/dependencies/uxbox-light'; -//@import 'common/dependencies/uxbox-dark'; -@import 'common/dependencies/helpers'; -@import 'common/dependencies/mixin'; -@import 'common/dependencies/fonts'; -@import 'common/dependencies/reset'; -@import 'common/dependencies/animations'; -@import 'common/dependencies/z-index'; - -//################################################# -// Layouts -//################################################# - -@import 'common/base'; -@import 'view/layouts/main-layout'; - -//################################################# -// Commons -//################################################# - -@import 'common/framework'; - -//################################################# -// Partials -//################################################# - - -//################################################# -// Resources -//################################################# - -@import 'collection/font-collection'; diff --git a/frontend/resources/styles/view/layouts/main-layout.scss b/frontend/resources/styles/view/layouts/main-layout.scss deleted file mode 100644 index 67f481510..000000000 --- a/frontend/resources/styles/view/layouts/main-layout.scss +++ /dev/null @@ -1,250 +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) 2016 Andrey Antukh -// Copyright (c) 2016 Juan de la Cruz - -.view-content { - display: flex; - flex-direction: column-reverse; - height: 100vh; - width: 100%; - @include bp(tablet) { - flex-direction: row; - } -} - -.view-nav { - background-color: $color-gray-50; - border-top: 1px solid $color-gray-60; - border-right: 0; - display: flex; - flex-shrink: 0; - height: 55px; - width: 100%; - - @include bp(tablet) { - border-right: 1px solid $color-gray-60; - border-top: 0; - height: 100%; - width: 70px; - } - -} - -.view-options-btn { - align-items: center; - display: flex; - margin: auto; - - @include bp(tablet) { - flex-direction: column; - } - - li { - align-items: center; - background-color: $color-gray-60; - border: 1px solid transparent; - border-radius: $br-small; - cursor: pointer; - display: flex; - flex-shrink: 0; - height: 40px; - justify-content: center; - margin: $small; - position: relative; - width: 40px; - - a { - padding-top: 6px; - } - - svg { - fill: $color-gray-20; - height: 24px; - width: 24px; - } - - &:hover { - background-color: $color-gray-10; - border-color: $color-gray-60; - } - - &.selected { - background-color: $color-primary; - - svg { - fill: $color-white; - } - - } - - } - -} - -.view-sitemap { - background-color: $color-gray-50; - border-top: 1px solid $color-gray-60; - border-right: 0; - display: flex; - flex-direction: column; - flex-shrink: 0; - height: 155px; - width: 100%; - overflow: scroll; - - .sitemap-title { - border-bottom: 1px solid $color-gray-60; - padding: $small; - font-weight: bold; - } - - @include bp(tablet) { - border-right: 1px solid $color-gray-60; - border-top: 0; - height: 100%; - width: 220px; - } - -} - - -.sitemap-list { - width: 100%; - - li { - align-items: center; - border-bottom: 1px solid $color-gray-60; - cursor: pointer; - display: flex; - flex-direction: row; - padding: $small; - width: 100%; - - .page-icon { - - svg { - fill: $color-gray-30; - height: 15px; - margin-right: $x-small; - width: 15px; - } - - } - - span { - color: $color-gray-20; - font-size: $fs14; - max-width: 75%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .page-actions { - align-items: center; - display: none; - margin-left: auto; - - a { - - svg { - fill: $color-gray-60; - height: 15px; - margin-left: $x-small; - width: 15px; - - &:hover { - fill: $color-gray-20; - } - - } - - } - - } - - &:hover { - - .page-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - } - - } - - &.selected { - - .page-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - font-weight: bold; - } - - } - - } - - &:hover { - - .page-actions { - display: flex; - @include animation(0s,.3s,fadeIn); - } - - } - -} - -.view-canvas { - background-color: $color-gray-60; - width: 100%; - overflow: scroll; - display: flex; - .page-layout { - flex-shrink: 0; - margin: auto; - } -} - -.interaction-mark { - align-items: center; - background-color: $color-primary; - border-radius: 50%; - display: flex; - justify-content: center; - height: 20px; - width: 20px; - svg { - fill: $color-white; - height: 15px; - width: 15px; - } -} - -.interaction-bullet { - fill: $color-primary; - fill-opacity: 1; -} - -.interaction-hightlight { - fill: $color-primary; - fill-opacity: 0.3; - stroke: $color-primary; -} From d974ed750a8a68e3aa7ccc00a7ecd141f3b22932 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 30 Mar 2020 23:56:49 +0200 Subject: [PATCH 02/22] :tada: Add randomcolor dependency. --- frontend/package-lock.json | 5 +++++ frontend/package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 31d6d1b84..e3a3f2a1f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -4689,6 +4689,11 @@ "safe-buffer": "^5.1.0" } }, + "randomcolor": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.5.4.tgz", + "integrity": "sha512-nYd4nmTuuwMFzHL6W+UWR5fNERGZeVauho8mrJDUSXdNDbao4rbrUwhuLgKC/j8VCS5+34Ria8CsTDuBjrIrQA==" + }, "randomfill": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 77b9797ca..cc478e876 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "date-fns": "^2.11.1", + "randomcolor": "^0.5.4", "react": "^16.13.1", "react-color": "^2.18.0", "react-dnd": "^10.0.2", From 9759cb9fd9bee7fbabe3b5c1bdece94580fca996 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 30 Mar 2020 23:57:53 +0200 Subject: [PATCH 03/22] :recycle: Don't embedd svg sprite into the index.html file. --- frontend/resources/templates/index.mustache | 8 +++++--- frontend/resources/templates/view.mustache | 22 +++++++++++++++++++++ frontend/src/uxbox/builtins/icons.clj | 5 ++--- frontend/src/uxbox/main/ui.cljs | 3 +-- 4 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 frontend/resources/templates/view.mustache diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index 4d9ae3b00..cbb80b00f 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -4,11 +4,12 @@ UXBOX - The Open-Source prototyping tool - + + + - {{& ic }}
@@ -16,7 +17,8 @@ window.uxboxConfig = JSON.parse({{& config }}); window.uxboxTranslations = JSON.parse({{& translations }}); - + + diff --git a/frontend/resources/templates/view.mustache b/frontend/resources/templates/view.mustache new file mode 100644 index 000000000..ee2c37652 --- /dev/null +++ b/frontend/resources/templates/view.mustache @@ -0,0 +1,22 @@ + + + + + + UXBOX View + + + + +
+
+ + + + + + + diff --git a/frontend/src/uxbox/builtins/icons.clj b/frontend/src/uxbox/builtins/icons.clj index 869cd50f5..179919fc8 100644 --- a/frontend/src/uxbox/builtins/icons.clj +++ b/frontend/src/uxbox/builtins/icons.clj @@ -2,15 +2,14 @@ ;; 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) 2015-2017 Andrey Antukh -;; Copyright (c) 2015-2017 Juan de la Cruz +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.builtins.icons (:require [rumext.alpha])) (defmacro icon-xref [id] - (let [href (str "#icon-" (name id))] + (let [href (str "/images/svg-sprite/symbol/svg/sprite.symbol.svg#icon-" (name id))] `(rumext.alpha/html [:svg {:width 500 :height 500} [:use {:xlinkHref ~href}]]))) diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 38d44ccf9..d9f95d47e 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -5,8 +5,7 @@ ;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; defined by the Mozilla Public License, v. 2.0. ;; -;; Copyright (c) 2015-2017 Juan de la Cruz -;; Copyright (c) 2015-2020 Andrey Antukh +;; Copyright (c) 2020 UXBOX Labs SL (ns uxbox.main.ui (:require From ec04bb4160547aca6be8f05bb0b67e3fa42e67e2 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 17:04:00 +0200 Subject: [PATCH 04/22] :tada: Add backend code for viewer page. --- .../resources/migrations/0003.projects.sql | 2 - backend/src/uxbox/services/init.clj | 2 +- backend/src/uxbox/services/queries/files.clj | 20 ++++-- .../src/uxbox/services/queries/projects.clj | 40 ++++++----- .../uxbox/services/queries/recent_files.clj | 6 +- backend/src/uxbox/services/queries/view.clj | 67 +++++++++++++++++++ 6 files changed, 109 insertions(+), 28 deletions(-) create mode 100644 backend/src/uxbox/services/queries/view.clj diff --git a/backend/resources/migrations/0003.projects.sql b/backend/resources/migrations/0003.projects.sql index 29bfa24e5..3b3516b1f 100644 --- a/backend/resources/migrations/0003.projects.sql +++ b/backend/resources/migrations/0003.projects.sql @@ -14,8 +14,6 @@ CREATE TABLE project ( CREATE INDEX project__team_id__idx ON project(team_id); - - CREATE TABLE project_profile_rel ( profile_id uuid NOT NULL REFERENCES profile(id) ON DELETE CASCADE, project_id uuid NOT NULL REFERENCES project(id) ON DELETE CASCADE, diff --git a/backend/src/uxbox/services/init.clj b/backend/src/uxbox/services/init.clj index 02e60dd56..3a46deed7 100644 --- a/backend/src/uxbox/services/init.clj +++ b/backend/src/uxbox/services/init.clj @@ -22,7 +22,7 @@ (require 'uxbox.services.queries.pages) (require 'uxbox.services.queries.profile) (require 'uxbox.services.queries.recent-files) - ;; (require 'uxbox.services.queries.user-attrs) + (require 'uxbox.services.queries.view) ) (defn- load-mutation-services diff --git a/backend/src/uxbox/services/queries/files.clj b/backend/src/uxbox/services/queries/files.clj index 3b50e9429..6e28c4dca 100644 --- a/backend/src/uxbox/services/queries/files.clj +++ b/backend/src/uxbox/services/queries/files.clj @@ -192,6 +192,16 @@ inner join file as f on (p.id = f.project_id) where f.id = $1") +(defn retrieve-file + [conn id] + (-> (db/query-one conn [sql:file id]) + (p/then' su/raise-not-found-if-nil) + (p/then' decode-row))) + +(defn retrieve-file-users + [conn id] + (db/query conn [sql:file-users id])) + (s/def ::file-with-users (s/keys :req-un [::profile-id ::id])) @@ -199,10 +209,8 @@ [{:keys [profile-id id] :as params}] (db/with-atomic [conn db/pool] (check-edition-permissions! conn profile-id id) - (p/let [file (-> (db/query-one conn [sql:file id]) - (p/then' su/raise-not-found-if-nil) - (p/then' decode-row)) - users (db/query conn [sql:file-users id])] + (p/let [file (retrieve-file conn id) + users (retrieve-file-users conn id)] (assoc file :users users)))) (s/def ::file @@ -212,9 +220,7 @@ [{:keys [profile-id id] :as params}] (db/with-atomic [conn db/pool] (check-edition-permissions! conn profile-id id) - (-> (db/query-one conn [sql:file id]) - (p/then' su/raise-not-found-if-nil) - (p/then' decode-row)))) + (retrieve-file conn id))) ;; --- Query: Project Files diff --git a/backend/src/uxbox/services/queries/projects.clj b/backend/src/uxbox/services/queries/projects.clj index 45d495b4c..cfe5eb7d9 100644 --- a/backend/src/uxbox/services/queries/projects.clj +++ b/backend/src/uxbox/services/queries/projects.clj @@ -16,13 +16,20 @@ (declare decode-row) +;; TODO: this module should be refactored for to separate the +;; permissions checks from the main queries in the same way as pages +;; and files. This refactor will make this functions more "reusable" +;; and will prevent duplicating queries on `queries.view` ns as +;; example. + ;; --- Query: Projects (def ^:private sql:projects "with projects as ( select p.*, - (select count(*) from file as f - where f.project_id = p.id and deleted_at is null) as file_count + (select count(*) from file as f + where f.project_id = p.id + and deleted_at is null) as file_count from project as p inner join team_profile_rel as tpr on (tpr.team_id = p.team_id) where tpr.profile_id = $1 @@ -32,8 +39,9 @@ tpr.can_edit = true) union select p.*, - (select count(*) from file as f - where f.project_id = p.id and deleted_at is null) + (select count(*) from file as f + where f.project_id = p.id + and deleted_at is null) from project as p inner join project_profile_rel as ppr on (ppr.project_id = p.id) where ppr.profile_id = $1 @@ -49,11 +57,11 @@ (def ^:private sql:project-by-id "select p.* - from project as p - inner join project_profile_rel as ppr on (ppr.project_id = p.id) - where ppr.profile_id = $1 - and p.id = $2 - and p.deleted_at is null + from project as p + inner join project_profile_rel as ppr on (ppr.project_id = p.id) + where ppr.profile_id = $1 + and p.id = $2 + and p.deleted_at is null and (ppr.is_admin = true or ppr.is_owner = true or ppr.can_edit = true)") @@ -68,16 +76,18 @@ (s/def ::project-by-id (s/keys :req-un [::profile-id ::project-id])) -(defn projects-by-team [profile-id team-id] - (db/query db/pool [sql:projects profile-id team-id])) +(defn retrieve-projects + [conn profile-id team-id] + (db/query conn [sql:projects profile-id team-id])) -(defn project-by-id [profile-id project-id] - (db/query-one db/pool [sql:project-by-id profile-id project-id])) +(defn retrieve-project + [conn profile-id id] + (db/query-one conn [sql:project-by-id profile-id id])) (sq/defquery ::projects-by-team [{:keys [profile-id team-id]}] - (projects-by-team profile-id team-id)) + (retrieve-projects db/pool profile-id team-id)) (sq/defquery ::project-by-id [{:keys [profile-id project-id]}] - (project-by-id profile-id project-id)) + (retrieve-project db/pool profile-id project-id)) diff --git a/backend/src/uxbox/services/queries/recent_files.clj b/backend/src/uxbox/services/queries/recent_files.clj index 9e3338cf5..b99b83128 100644 --- a/backend/src/uxbox/services/queries/recent_files.clj +++ b/backend/src/uxbox/services/queries/recent_files.clj @@ -14,8 +14,8 @@ [uxbox.db :as db] [uxbox.common.spec :as us] [uxbox.services.queries :as sq] - [uxbox.services.queries.projects :refer [ projects-by-team ]] - [uxbox.services.queries.files :refer [ decode-row ]])) + [uxbox.services.queries.projects :refer [retrieve-projects]] + [uxbox.services.queries.files :refer [decode-row]])) (def ^:private sql:project-files-recent "select distinct @@ -51,7 +51,7 @@ (sq/defquery ::recent-files [{:keys [profile-id team-id]}] - (-> (projects-by-team profile-id team-id) + (-> (retrieve-projects db/pool profile-id team-id) ;; Retrieve for each proyect the 5 more recent files (p/then #(p/all (map (partial recent-by-project profile-id) %))) ;; Change the structure so it's a map with project-id as keys diff --git a/backend/src/uxbox/services/queries/view.clj b/backend/src/uxbox/services/queries/view.clj new file mode 100644 index 000000000..ee6c0f608 --- /dev/null +++ b/backend/src/uxbox/services/queries/view.clj @@ -0,0 +1,67 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.services.queries.view + (:require + [clojure.spec.alpha :as s] + [promesa.core :as p] + [promesa.exec :as px] + [uxbox.common.exceptions :as ex] + [uxbox.common.spec :as us] + [uxbox.db :as db] + [uxbox.media :as media] + [uxbox.images :as images] + [uxbox.services.queries.pages :as pages] + [uxbox.services.queries.files :as files] + [uxbox.services.queries :as sq] + [uxbox.services.util :as su] + [uxbox.util.blob :as blob] + [uxbox.util.data :as data] + [uxbox.util.uuid :as uuid] + [vertx.core :as vc])) + +;; --- Helpers & Specs + +(s/def ::id ::us/uuid) +(s/def ::page-id ::us/uuid) + +;; --- Query: Viewer Bundle + +(def ^:private + sql:project + "select p.id, p.name + from project as p + where p.id = $1 + and p.deleted_at is null") + +(defn- retrieve-project + [conn id] + (db/query-one conn [sql:project id])) + +(s/def ::viewer-bundle-by-page-id + (s/keys :req-un [::profile-id ::page-id])) + +(sq/defquery ::viewer-bundle-by-page-id + [{:keys [profile-id page-id]}] + (db/with-atomic [conn db/pool] + (p/let [page (pages/retrieve-page conn page-id) + file (files/retrieve-file conn (:file-id page)) + users (files/retrieve-file-users conn (:file-id page)) + images (files/retrieve-file-images conn page) + project (retrieve-project conn (:project-id file))] + (files/check-edition-permissions! conn profile-id (:file-id page)) + {:page page + :file file + :users users + :images images + :project project}))) + +;; TODO: bundle by share link + + From 759530ea58516a9e930aa42f6894183dc67e43e8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 17:06:29 +0200 Subject: [PATCH 05/22] :sparkles: Minor api improvements on dropdown component. --- .../src/uxbox/main/ui/components/context_menu.cljs | 4 ++-- frontend/src/uxbox/main/ui/components/dropdown.cljs | 13 ++++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/uxbox/main/ui/components/context_menu.cljs b/frontend/src/uxbox/main/ui/components/context_menu.cljs index 928baebba..ffab4be4d 100644 --- a/frontend/src/uxbox/main/ui/components/context_menu.cljs +++ b/frontend/src/uxbox/main/ui/components/context_menu.cljs @@ -2,7 +2,7 @@ (:require [rumext.alpha :as mf] [goog.object :as gobj] - [uxbox.main.ui.components.dropdown :refer [dropdown-container]] + [uxbox.main.ui.components.dropdown :refer [dropdown']] [uxbox.util.uuid :as uuid] [uxbox.util.data :refer [classnames]])) @@ -18,7 +18,7 @@ is-selectable (gobj/get props "selectable") selected (gobj/get props "selected")] (when open? - [:> dropdown-container props + [:> dropdown' props [:div.context-menu {:class (classnames :is-open open? :is-selectable is-selectable)} [:ul.context-menu-items diff --git a/frontend/src/uxbox/main/ui/components/dropdown.cljs b/frontend/src/uxbox/main/ui/components/dropdown.cljs index d592faa8a..abe796e55 100644 --- a/frontend/src/uxbox/main/ui/components/dropdown.cljs +++ b/frontend/src/uxbox/main/ui/components/dropdown.cljs @@ -2,20 +2,27 @@ (:require [rumext.alpha :as mf] [uxbox.util.uuid :as uuid] + [uxbox.util.dom :as dom] [goog.events :as events] [goog.object :as gobj]) (:import goog.events.EventType goog.events.KeyCodes)) -(mf/defc dropdown-container +(mf/defc dropdown' {::mf/wrap-props false} [props] (let [children (gobj/get props "children") on-close (gobj/get props "on-close") + ref (gobj/get props "container") on-click (fn [event] - (on-close)) + (if ref + (let [target (dom/get-target event) + parent (mf/ref-val ref)] + (when-not (.contains parent target) + (on-close))) + (on-close))) on-keyup (fn [event] @@ -40,4 +47,4 @@ (assert (boolean? (gobj/get props "show")) "missing `show` prop") (when (gobj/get props "show") - (mf/element dropdown-container props))) + (mf/element dropdown' props))) From aad3e092f7d48c1bf177cb005a65ff42cc9121db Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 17:07:03 +0200 Subject: [PATCH 06/22] :sparkles: Clean code on router ns. --- frontend/src/uxbox/util/router.cljs | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/frontend/src/uxbox/util/router.cljs b/frontend/src/uxbox/util/router.cljs index 299214559..d38bf610a 100644 --- a/frontend/src/uxbox/util/router.cljs +++ b/frontend/src/uxbox/util/router.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) 2015-2019 Andrey Antukh (ns uxbox.util.router + (:refer-clojure :exclude [resolve]) (:require [reitit.core :as r] [cuerdas.core :as str] @@ -15,8 +16,6 @@ goog.Uri goog.Uri.QueryData)) -(defonce +router+ nil) - ;; --- API (defn- parse-query-data @@ -37,9 +36,9 @@ (transient {}) (.getKeys qdata)))) -(defn- resolve-url - ([router id] (resolve-url router id {} {})) - ([router id params] (resolve-url router id params {})) +(defn resolve + ([router id] (resolve router id {} {})) + ([router id params] (resolve router id params {})) ([router id params qparams] (when-let [match (r/match-by-name router id params)] (if (empty? qparams) @@ -68,7 +67,7 @@ ([router id] (navigate! router id {} {})) ([router id params] (navigate! router id params {})) ([router id params qparams] - (-> (resolve-url router id params qparams) + (-> (resolve router id params qparams) (html-history/set-path!)))) (defn match @@ -83,20 +82,12 @@ :params params :query-params qparams))))) -(defn route-for - "Given a location handler and optional parameter map, return the URI - for such handler and parameters." - ([id] (route-for id {})) - ([id params] - (str (some-> +router+ (resolve-url id params))))) - ;; --- Navigate (Event) (deftype Navigate [id params qparams] ptk/EffectEvent (effect [_ state stream] (let [router (:router state)] - ;; (prn "Navigate:" id params qparams "| Match:" (resolve-url router id params qparams)) (navigate! router id params qparams)))) (defn nav From b3e6566bd849f81f67aded7f835a55f208a06b0e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 17:07:41 +0200 Subject: [PATCH 07/22] :fire: Remove unused code. --- frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs | 6 ------ frontend/src/uxbox/util/dom.cljs | 1 - 2 files changed, 7 deletions(-) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index a807ea2a0..208356d67 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -32,18 +32,12 @@ (fn [event] (dom/prevent-default event) (dom/stop-propagation event) - ;; (let [parent (.-parentNode (.-target event)) - ;; parent (.-parentNode parent)] - ;; (set! (.-draggable parent) false)) (swap! local assoc :edition true)) on-blur (fn [event] (let [target (dom/event->target event) - ;; parent (.-parentNode target) - ;; parent (.-parentNode parent) name (dom/get-value target)] - ;; (set! (.-draggable parent) true) (st/emit! (dw/rename-page (:id page) name)) (swap! local assoc :edition false))) diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs index 2769dc47e..75cf59363 100644 --- a/frontend/src/uxbox/util/dom.cljs +++ b/frontend/src/uxbox/util/dom.cljs @@ -156,4 +156,3 @@ [event] (let [data-string (-> event .-dataTransfer (.getData "text"))] (ts/decode data-string))) - From 1a3a48e4debaea40c899f72dfbc3fef9a1ad761b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 17:08:24 +0200 Subject: [PATCH 08/22] :tada: Add initial version of viewer. --- .../resources/images/icons/full-screen.svg | 3 + frontend/resources/styles/main.scss | 5 + .../styles/main/layouts/not-found.scss | 43 ++++ .../resources/styles/main/layouts/viewer.scss | 25 ++ .../styles/main/partials/viewer-header.scss | 224 ++++++++++++++++++ .../main/partials/viewer-thumbnails.scss | 173 ++++++++++++++ .../styles/main/partials/viewer.scss | 20 ++ .../styles/main/partials/workspace-bar.scss | 25 ++ frontend/resources/templates/index.mustache | 1 - frontend/src/uxbox/builtins/icons.cljs | 1 + frontend/src/uxbox/main.cljs | 2 +- frontend/src/uxbox/main/data/viewer.cljs | 131 ++++++++++ frontend/src/uxbox/main/data/workspace.cljs | 6 +- frontend/src/uxbox/main/exports.cljs | 19 +- frontend/src/uxbox/main/refs.cljs | 4 + frontend/src/uxbox/main/store.cljs | 3 + frontend/src/uxbox/main/ui.cljs | 86 ++++--- frontend/src/uxbox/main/ui/not_found.cljs | 24 ++ frontend/src/uxbox/main/ui/react_hooks.cljs | 5 +- frontend/src/uxbox/main/ui/viewer.cljs | 96 ++++++++ frontend/src/uxbox/main/ui/viewer/header.cljs | 85 +++++++ .../src/uxbox/main/ui/viewer/thumbnails.cljs | 146 ++++++++++++ frontend/src/uxbox/main/ui/workspace.cljs | 2 + .../src/uxbox/main/ui/workspace/header.cljs | 72 +++--- 24 files changed, 1109 insertions(+), 92 deletions(-) create mode 100644 frontend/resources/images/icons/full-screen.svg create mode 100644 frontend/resources/styles/main/layouts/not-found.scss create mode 100644 frontend/resources/styles/main/layouts/viewer.scss create mode 100644 frontend/resources/styles/main/partials/viewer-header.scss create mode 100644 frontend/resources/styles/main/partials/viewer-thumbnails.scss create mode 100644 frontend/resources/styles/main/partials/viewer.scss create mode 100644 frontend/src/uxbox/main/data/viewer.cljs create mode 100644 frontend/src/uxbox/main/ui/not_found.cljs create mode 100644 frontend/src/uxbox/main/ui/viewer.cljs create mode 100644 frontend/src/uxbox/main/ui/viewer/header.cljs create mode 100644 frontend/src/uxbox/main/ui/viewer/thumbnails.cljs diff --git a/frontend/resources/images/icons/full-screen.svg b/frontend/resources/images/icons/full-screen.svg new file mode 100644 index 000000000..47e7db42c --- /dev/null +++ b/frontend/resources/images/icons/full-screen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/styles/main.scss b/frontend/resources/styles/main.scss index cb43312a5..545e75779 100644 --- a/frontend/resources/styles/main.scss +++ b/frontend/resources/styles/main.scss @@ -30,6 +30,8 @@ @import 'main/layouts/projects-page'; @import 'main/layouts/recent-files-page'; @import 'main/layouts/library-page'; +@import "main/layouts/not-found"; +@import "main/layouts/viewer"; //################################################# // Commons @@ -69,6 +71,9 @@ @import 'main/partials/debug-icons-preview'; @import 'main/partials/editable-label'; @import 'main/partials/tab-container'; +@import "main/partials/viewer-header"; +@import "main/partials/viewer-thumbnails"; +@import "main/partials/viewer"; //################################################# // Resources diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss new file mode 100644 index 000000000..359d7ab53 --- /dev/null +++ b/frontend/resources/styles/main/layouts/not-found.scss @@ -0,0 +1,43 @@ +.not-found-layout { + display: grid; + + grid-template-rows: 120px auto; + grid-template-columns: 1fr; +} + +.not-found-header { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + + display: flex; + align-items: center; + padding: 32px; + + svg { + height: 55px; + width: 170px; + } + +} + +.not-found-content { + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + + .main-message { + font-size: 18rem; + color: $color-black; + line-height: 226px; + } + + .desc-message { + font-size: 3rem; + color: $color-black; + } +} + diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss new file mode 100644 index 000000000..eafd9911f --- /dev/null +++ b/frontend/resources/styles/main/layouts/viewer.scss @@ -0,0 +1,25 @@ +.viewer-layout { + display: grid; + grid-template-rows: 40px auto; + grid-template-columns: 1fr; + + &.fullscreen { + .viewer-header { + display: none; + } + + .viewer-content { + grid-row: 1 / span 2; + } + } + + .viewer-header { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + } + + .viewer-content { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + } +} diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss new file mode 100644 index 000000000..210d244d7 --- /dev/null +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -0,0 +1,224 @@ +.viewer-header { + align-items: center; + background-color: $color-gray-50; + border-bottom: 1px solid $color-gray-60; + display: flex; + height: 40px; + padding: $x-small $medium $x-small 55px; + position: relative; + z-index: 12; + justify-content: space-between; + + .main-icon { + align-items: center; + background-color: $color-gray-60; + cursor: pointer; + display: flex; + height: 100%; + justify-content: center; + left: 0; + position: absolute; + top: 0; + width: 40px; + + a { + height: 30px; + + svg { + fill: $color-gray-30; + height: 30px; + width: 28px; + } + + &:hover { + svg { + fill: $color-primary; + } + } + } + } + + .sitemap-zone { + align-items: center; + cursor: pointer; + display: flex; + padding: $x-small; + + svg { + fill: $color-gray-20; + height: 20px; + margin-right: $small; + width: 20px; + } + + span { + color: $color-gray-20; + margin-right: $x-small; + font-size: $fs14; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.frame-name { + color: $color-white; + } + } + + .dropdown-button { + svg { + fill: $color-white; + height: 10px; + width: 10px; + } + } + + .page-name { + color: $color-white; + } + + .counters { + margin-left: $size-3; + } + } + + .options-zone { + align-items: center; + display: flex; + width: 250px; + justify-content: space-between; + + .btn-primary { + padding: 0.4rem 1rem; + } + + .btn-fullscreen { + align-items: center; + background-color: $color-gray-60; + border-radius: $br-small; + cursor: pointer; + display: flex; + height: 25px; + justify-content: center; + width: 25px; + + svg { + fill: $color-gray-20; + width: 15px; + height: 15px; + } + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-60; + } + } + } + } + + .zoom-widget { + cursor: pointer; + + align-items: center; + display: flex; + position: relative; + + .input-container { + display: flex; + } + + span { + color: $color-gray-10; + font-size: $fs15; + margin-left: $x-small; + } + + .dropdown-button svg { + fill: $color-gray-10; + height: 10px; + width: 10px; + } + + .zoom-dropdown { + position: absolute; + right: -25px; + top: 45px; + z-index: 12; + width: 150px; + + background-color: $color-white; + border-radius: $br-small; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); + + li { + color: $color-gray-60; + cursor: pointer; + font-size: $fs12; + display: flex; + padding: $small; + + span { + color: $color-gray-40; + font-size: $fs12; + margin-left: auto; + } + + &:hover { + background-color: $color-primary-lighter; + } + + } + } + + .add-zoom, + .remove-zoom { + align-items: center; + background-color: $color-gray-60; + border-radius: $br-small; + cursor: pointer; + color: $color-gray-20; + display: flex; + opacity: 0; + flex-shrink: 0; + font-size: $fs20; + font-weight: bold; + height: 20px; + justify-content: center; + width: 20px; + + &:hover { + color: $color-primary; + } + + } + + &:hover { + .add-zoom, + .remove-zoom { + opacity: 100%; + } + } + + } + + .users-zone { + align-items: center; + cursor: pointer; + display: flex; + margin: 0; + + li { + margin-left: $small; + 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 new file mode 100644 index 000000000..bd92f3de9 --- /dev/null +++ b/frontend/resources/styles/main/partials/viewer-thumbnails.scss @@ -0,0 +1,173 @@ + +.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: 12; + + &.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: 2px; + + display: flex; + justify-content: center; + align-items: center; + + svg { + width: 100%; + height: 100%; + } + + &.selected { + border-color: $color-primary; + } + + &:hover { + border-color: $color-primary; + border-width: 2px; + } + } + + .thumbnail-info { + padding: 0.5rem 0; + + span { + font-size: $fs13; + } + } +} diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss new file mode 100644 index 000000000..15f3fd48d --- /dev/null +++ b/frontend/resources/styles/main/partials/viewer.scss @@ -0,0 +1,20 @@ +.viewer-content { + background-color: black; + + display: grid; + grid-template-rows: 232px auto; + grid-template-columns: 1fr; +} + +.viewer-preview { + height: 100vh; + + grid-row: 1 / span 2; + grid-column: 1 / span 1; + + overflow: scroll; + + display: flex; + justify-content: center; + align-items: center; +} diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index 6a075a47f..52c129cd5 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -15,6 +15,31 @@ position: relative; z-index: 12; + .preview { + align-items: center; + background-color: $color-gray-60; + border-radius: $br-small; + cursor: pointer; + display: flex; + height: 25px; + justify-content: center; + width: 25px; + + svg { + fill: $color-gray-20; + width: 15px; + height: 15px; + } + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-60; + } + } + } + .workspace-menu { position: absolute; top: 40px; diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index cbb80b00f..8fabc07c4 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -17,7 +17,6 @@ window.uxboxConfig = JSON.parse({{& config }}); window.uxboxTranslations = JSON.parse({{& translations }}); - diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs index a000cbdec..069f01f84 100644 --- a/frontend/src/uxbox/builtins/icons.cljs +++ b/frontend/src/uxbox/builtins/icons.cljs @@ -38,6 +38,7 @@ (def fill (icon-xref :fill)) (def folder (icon-xref :folder)) (def folder-zip (icon-xref :folder-zip)) +(def full-screen (icon-xref :full-screen)) (def grid (icon-xref :grid)) (def grid-snap (icon-xref :grid-snap)) (def icon-set (icon-xref :icon-set)) diff --git a/frontend/src/uxbox/main.cljs b/frontend/src/uxbox/main.cljs index f89325453..63f222f91 100644 --- a/frontend/src/uxbox/main.cljs +++ b/frontend/src/uxbox/main.cljs @@ -40,7 +40,7 @@ (st/emit! (rt/nav :login)) (nil? match) - (prn "TODO 404 main") + (st/emit! (rt/nav :not-found)) :else (st/emit! #(assoc % :route match))))) diff --git a/frontend/src/uxbox/main/data/viewer.cljs b/frontend/src/uxbox/main/data/viewer.cljs new file mode 100644 index 000000000..babee28e4 --- /dev/null +++ b/frontend/src/uxbox/main/data/viewer.cljs @@ -0,0 +1,131 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.data.viewer + (:require + [cljs.spec.alpha :as s] + [beicon.core :as rx] + [potok.core :as ptk] + [uxbox.main.constants :as c] + [uxbox.main.repo :as rp] + [uxbox.common.spec :as us] + [uxbox.common.pages :as cp] + [uxbox.common.data :as d] + [uxbox.common.exceptions :as ex] + [uxbox.util.uuid :as uuid])) + +;; --- Specs + +(s/def ::id ::us/uuid) +(s/def ::name ::us/string) + +(s/def ::project (s/keys ::req-un [::id ::name])) +(s/def ::file (s/keys :req-un [::id ::name])) +(s/def ::page (s/keys :req-un [::id ::name ::cp/data])) + +(s/def ::bundle + (s/keys :req-un [::project ::file ::page])) + + +;; --- Initialization + +(declare fetch-bundle) +(declare bundle-fetched) + +(defn initialize + [page-id] + (ptk/reify ::initialize + ptk/UpdateEvent + (update [_ state] + (assoc state :viewer-local {:zoom 1})) + + ptk/WatchEvent + (watch [_ state stream] + (rx/of (fetch-bundle page-id))))) + +;; --- Data Fetching + +(defn fetch-bundle + [page-id] + (ptk/reify ::fetch-file + ptk/WatchEvent + (watch [_ state stream] + (->> (rp/query :viewer-bundle-by-page-id {:page-id page-id}) + (rx/map bundle-fetched))))) + + +(defn- extract-frames + [page] + (let [objects (get-in page [:data :objects]) + root (get objects uuid/zero)] + (->> (:shapes root) + (map #(get objects %)) + (filter #(= :frame (:type %))) + (vec)))) + +(defn bundle-fetched + [{:keys [project file page images] :as bundle}] + (us/verify ::bundle bundle) + (ptk/reify ::file-fetched + ptk/UpdateEvent + (update [_ state] + (let [frames (extract-frames page) + objects (get-in page [:data :objects])] + (assoc state :viewer-data {:project project + :objects objects + :file file + :page page + :images images + :frames frames}))))) + +;; --- Zoom Management + +(def increase-zoom + (ptk/reify ::increase-zoom + ptk/UpdateEvent + (update [_ state] + (let [increase #(nth c/zoom-levels + (+ (d/index-of c/zoom-levels %) 1) + (last c/zoom-levels))] + (update-in state [:viewer-local :zoom] (fnil increase 1)))))) + +(def decrease-zoom + (ptk/reify ::decrease-zoom + ptk/UpdateEvent + (update [_ state] + (let [decrease #(nth c/zoom-levels + (- (d/index-of c/zoom-levels %) 1) + (first c/zoom-levels))] + (update-in state [:viewer-local :zoom] (fnil decrease 1)))))) + +(def reset-zoom + (ptk/reify ::reset-zoom + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :zoom] 1)))) + +(def zoom-to-50 + (ptk/reify ::zoom-to-50 + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :zoom] 0.5)))) + +(def zoom-to-200 + (ptk/reify ::zoom-to-200 + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:viewer-local :zoom] 2)))) + +;; --- Local State Management + +(def toggle-thumbnails-panel + (ptk/reify ::toggle-thumbnails-panel + ptk/UpdateEvent + (update [_ state] + (update-in state [:viewer-local :show-thumbnails] not)))) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 7a6b28137..72fbb56f1 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -1955,7 +1955,7 @@ (watch [_ state stream] (let [project-id (get-in state [:workspace-project :id]) file-id (get-in state [:workspace-page :file-id]) - path-params {:project-id project-id :file-id file-id} + path-params {:file-id file-id :project-id project-id} query-params {:page-id page-id}] (rx/of (rt/nav :workspace path-params query-params)))))) @@ -2199,7 +2199,7 @@ (let [page-id (get-in state [:workspace-page :id]) objects (get-in state [:workspace-data page-id :objects]) parent (get-parent (first selected) (vals objects)) - parent-id (:id parent) + parent-id (:id parent) selected-objects (map (partial get objects) selected) selection-rect (geom/selection-rect selected-objects) frame-id (-> selected-objects first :frame-id) @@ -2254,7 +2254,7 @@ :obj group} {:type :mod-obj :id parent-id - :operations [{:type :set :attr :shapes :val (:shapes parent)}]}]] + :operations [{:type :set :attr :shapes :val (:shapes parent)}]}]] (rx/of (commit-changes rchanges uchanges {:commit-local? true})))) rx/empty))))) diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index 008c4661c..092b9d4f6 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -12,6 +12,8 @@ [uxbox.util.uuid :as uuid] [uxbox.util.math :as mth] [uxbox.main.geom :as geom] + [uxbox.util.geom.point :as gpt] + [uxbox.util.geom.matrix :as gmt] [uxbox.main.ui.shapes.frame :as frame] [uxbox.main.ui.shapes.circle :as circle] [uxbox.main.ui.shapes.icon :as icon] @@ -51,6 +53,9 @@ (let [children (mapv #(get objects %) (:shapes shape))] [:& group-shape {:shape shape :children children}])) +(declare group-shape) +(declare frame-shape) + (mf/defc shape-wrapper [{:keys [shape objects] :as props}] (when (and shape (not (:hidden shape))) @@ -63,7 +68,7 @@ :path [:& path/path-shape {:shape shape}] :image [:& image/image-shape {:shape shape}] :circle [:& circle/circle-shape {:shape shape}] - :group [:& (group/group-shape shape-wrapper) {:shape shape :shape-wrapper shape-wrapper :objects objects}] + :group [:& group-shape {:shape shape :objects objects}] nil))) (def group-shape (group/group-shape shape-wrapper)) @@ -90,15 +95,3 @@ :key (:id item) :objects objects}]))])) -;; (defn- render-html -;; [component] -;; (.renderToStaticMarkup js/ReactDOMServer component)) - -;; (defn render -;; [{:keys [data] :as page}] -;; (try -;; (-> (mf/element page-svg #js {:data data}) -;; (render-html)) -;; (catch :default e -;; (js/console.log e) -;; nil))) diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs index c4abf742e..19da8d924 100644 --- a/frontend/src/uxbox/main/refs.cljs +++ b/frontend/src/uxbox/main/refs.cljs @@ -38,6 +38,10 @@ (-> (l/key :workspace-file) (l/derive st/state))) +(def workspace-project + (-> (l/key :workspace-project) + (l/derive st/state))) + (def workspace-images (-> (l/key :workspace-images) (l/derive st/state))) diff --git a/frontend/src/uxbox/main/store.cljs b/frontend/src/uxbox/main/store.cljs index 8905cc39d..a6cced39e 100644 --- a/frontend/src/uxbox/main/store.cljs +++ b/frontend/src/uxbox/main/store.cljs @@ -11,6 +11,8 @@ [uxbox.util.uuid :as uuid] [uxbox.util.storage :refer [storage]])) +;; TODO: move outside uxbox.main + (enable-console-print!) (def ^:dynamic *on-error* identity) @@ -47,6 +49,7 @@ (l/derive state))) (defn emit! + ([] nil) ([event] (ptk/emit! store event) nil) diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index d9f95d47e..fe4fba293 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -16,6 +16,7 @@ [rumext.alpha :as mf] [uxbox.builtins.icons :as i] [uxbox.common.exceptions :as ex] + [uxbox.common.data :as d] [uxbox.main.data.auth :refer [logout]] [uxbox.main.refs :as refs] [uxbox.main.store :as st] @@ -25,12 +26,13 @@ [uxbox.main.ui.profile.recovery :refer [profile-recovery-page]] [uxbox.main.ui.profile.recovery-request :refer [profile-recovery-request-page]] [uxbox.main.ui.profile.register :refer [profile-register-page]] + [uxbox.main.ui.viewer :refer [viewer-page]] [uxbox.main.ui.settings :as settings] + [uxbox.main.ui.not-found :refer [not-found-page]] [uxbox.main.ui.shapes] [uxbox.main.ui.workspace :as workspace] [uxbox.util.i18n :refer [tr]] [uxbox.util.messages :as uum] - [uxbox.util.router :as rt] [uxbox.util.timers :as ts])) (def route-iref @@ -49,6 +51,9 @@ ["/profile" :settings-profile] ["/password" :settings-password]] + ["/view/:page-id/:index" :viewer] + ["/not-found" :not-found] + (when *assert* ["/debug/icons-preview" :debug-icons-preview]) @@ -78,54 +83,63 @@ [{:keys [error] :as props}] (let [data (ex-data error)] (case (:type data) - :not-found [:span "404"] + :not-found [:& not-found-page {:error data}] [:span "Internal application errror"]))) (mf/defc app {:wrap [#(wrap-catch % {:fallback app-error})]} [props] (let [route (mf/deref route-iref)] - (case (get-in route [:data :name]) - :login - (mf/element login-page) + (when route + (case (get-in route [:data :name]) + :login + (mf/element login-page) - :profile-register - (mf/element profile-register-page) + :profile-register + (mf/element profile-register-page) - :profile-recovery-request - (mf/element profile-recovery-request-page) + :profile-recovery-request + (mf/element profile-recovery-request-page) - :profile-recovery - (mf/element profile-recovery-page) + :profile-recovery + (mf/element profile-recovery-page) - (:settings-profile - :settings-password) - (mf/element settings/settings #js {:route route}) + :viewer + (let [index (d/parse-integer (get-in route [:params :path :index])) + page-id (uuid (get-in route [:params :path :page-id]))] + [:& viewer-page {:page-id page-id + :index index}]) - :debug-icons-preview - (when *assert* - (mf/element i/debug-icons-preview)) + (:settings-profile + :settings-password) + (mf/element settings/settings #js {:route route}) - (:dashboard-search - :dashboard-team - :dashboard-project - :dashboard-library-icons - :dashboard-library-icons-index - :dashboard-library-images - :dashboard-library-images-index - :dashboard-library-palettes - :dashboard-library-palettes-index) - (mf/element dashboard #js {:route route}) + :debug-icons-preview + (when *assert* + (mf/element i/debug-icons-preview)) - :workspace - (let [project-id (uuid (get-in route [:params :path :project-id])) - file-id (uuid (get-in route [:params :path :file-id])) - page-id (uuid (get-in route [:params :query :page-id]))] - [:& workspace/workspace {:project-id project-id - :file-id file-id - :page-id page-id - :key file-id}]) - nil))) + (:dashboard-search + :dashboard-team + :dashboard-project + :dashboard-library-icons + :dashboard-library-icons-index + :dashboard-library-images + :dashboard-library-images-index + :dashboard-library-palettes + :dashboard-library-palettes-index) + (mf/element dashboard #js {:route route}) + + :workspace + (let [project-id (uuid (get-in route [:params :path :project-id])) + file-id (uuid (get-in route [:params :path :file-id])) + page-id (uuid (get-in route [:params :query :page-id]))] + [:& workspace/workspace {:project-id project-id + :file-id file-id + :page-id page-id + :key file-id}]) + + :not-found + [:& not-found-page {}])))) ;; --- Error Handling diff --git a/frontend/src/uxbox/main/ui/not_found.cljs b/frontend/src/uxbox/main/ui/not_found.cljs new file mode 100644 index 000000000..85d8f6bbc --- /dev/null +++ b/frontend/src/uxbox/main/ui/not_found.cljs @@ -0,0 +1,24 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.not-found + (:require + [cljs.spec.alpha :as s] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i])) + +(mf/defc not-found-page + [{:keys [error] :as props}] + (js/console.log "not-found" error) + [:section.not-found-layout + [:div.not-found-header i/logo] + [:div.not-found-content + [:div.message-container + [:div.main-message "404"] + [:div.desc-message "Oops! Page not found"]]]]) diff --git a/frontend/src/uxbox/main/ui/react_hooks.cljs b/frontend/src/uxbox/main/ui/react_hooks.cljs index 6929a71ae..35da9ee1d 100644 --- a/frontend/src/uxbox/main/ui/react_hooks.cljs +++ b/frontend/src/uxbox/main/ui/react_hooks.cljs @@ -11,7 +11,9 @@ "A collection of general purpose react hooks." (:require [beicon.core :as rx] - [rumext.alpha :as mf])) + [goog.events :as events] + [rumext.alpha :as mf]) + (:import goog.events.EventType)) (defn use-rxsub [ob] @@ -22,4 +24,3 @@ #(rx/cancel! sub))) #js [ob]) state)) - diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs new file mode 100644 index 000000000..8b41c4ac7 --- /dev/null +++ b/frontend/src/uxbox/main/ui/viewer.cljs @@ -0,0 +1,96 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.viewer + (:require + [beicon.core :as rx] + [goog.events :as events] + [goog.object :as gobj] + [lentes.core :as l] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.store :as st] + [uxbox.common.exceptions :as ex] + [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.ui.components.dropdown :refer [dropdown]] + [uxbox.main.data.viewer :as vd] + [uxbox.main.ui.viewer.header :refer [header]] + [uxbox.main.ui.viewer.thumbnails :refer [thumbnails-panel frame-svg]] + [uxbox.util.dom :as dom] + [uxbox.util.data :refer [classnames]] + [uxbox.util.i18n :as i18n :refer [t tr]] + [uxbox.util.math :as mth] + [uxbox.util.router :as rt]) + (:import goog.events.EventType + goog.events.KeyCodes)) + +(mf/defc main-panel + [{:keys [data zoom index]}] + (let [frames (:frames data []) + objects (:objects data) + frame (get frames index)] + + (when-not frame + (ex/raise :type :not-found + :hint "Frame not found")) + + [:section.viewer-preview + [:& frame-svg {:frame frame :zoom zoom :objects objects}]])) + +(mf/defc viewer-content + [{:keys [data local index] :as props}] + (let [on-mouse-wheel + (fn [event] + (when (kbd/ctrl? event) + ;; Disable browser zoom with ctrl+mouse wheel + (dom/prevent-default event))) + + on-mount + (fn [] + ;; bind with passive=false to allow the event to be cancelled + ;; https://stackoverflow.com/a/57582286/3219895 + (let [key1 (events/listen goog/global EventType.WHEEL + on-mouse-wheel #js {"passive" false})] + (fn [] + (events/unlistenByKey key1))))] + + (mf/use-effect on-mount) + + [:div.viewer-layout + [:& header {:data data + :local local + :index index}] + [:div.viewer-content + (when (:show-thumbnails local) + [:& thumbnails-panel {:index index + :data data}]) + [:& main-panel {:data data + :zoom (:zoom local) + :index index}]]])) + + +;; --- Component: Viewer Page + +(def viewer-data-ref + (-> (l/key :viewer-data) + (l/derive st/state))) + +(def viewer-local-ref + (-> (l/key :viewer-local) + (l/derive st/state))) + +(mf/defc viewer-page + [{:keys [page-id index] :as props}] + (mf/use-effect (mf/deps page-id) #(st/emit! (vd/initialize page-id))) + (let [data (mf/deref viewer-data-ref) + local (mf/deref viewer-local-ref)] + (when data + [:& viewer-content {:index index + :local local + :data data}]))) diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs new file mode 100644 index 000000000..ac9793c11 --- /dev/null +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -0,0 +1,85 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.viewer.header + (:require + [beicon.core :as rx] + [goog.events :as events] + [goog.object :as gobj] + [lentes.core :as l] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.store :as st] + [uxbox.main.ui.components.dropdown :refer [dropdown]] + [uxbox.main.data.viewer :as dv] + [uxbox.util.data :refer [classnames]] + [uxbox.util.dom :as dom] + [uxbox.util.i18n :as i18n :refer [t tr]] + [uxbox.util.math :as mth] + [uxbox.util.router :as rt]) + (:import goog.events.EventType + goog.events.KeyCodes)) + +(mf/defc zoom-widget + {:wrap [mf/memo]} + [{:keys [zoom] :as props}] + (let [show-dropdown? (mf/use-state false) + increase #(st/emit! dv/increase-zoom) + decrease #(st/emit! dv/decrease-zoom) + zoom-to-50 #(st/emit! dv/zoom-to-50) + zoom-to-100 #(st/emit! dv/reset-zoom) + zoom-to-200 #(st/emit! dv/zoom-to-200)] + [:div.zoom-widget + [:span.add-zoom {:on-click decrease} "-"] + [:div.input-container {:on-click #(reset! show-dropdown? true)} + [:span {} (str (mth/round (* 100 zoom)) "%")] + [:span.dropdown-button i/arrow-down] + [:& dropdown {:show @show-dropdown? + :on-close #(reset! show-dropdown? false)} + [:ul.zoom-dropdown + [:li {:on-click increase} + "Zoom in" [:span "+"]] + [:li {:on-click decrease} + "Zoom out" [:span "-"]] + [:li {:on-click zoom-to-50} + "Zoom to 50%"] + [:li {:on-click zoom-to-100} + "Zoom to 100%" [:span "Shift + 0"]] + [:li {:on-click zoom-to-200} + "Zoom to 200%"]]]] + [:span.remove-zoom {:on-click increase} "+"]])) + +(mf/defc header + [{:keys [data index local] :as props}] + (let [{:keys [project file page frames]} data + total (count frames) + on-click #(st/emit! dv/toggle-thumbnails-panel) + on-edit #(st/emit! (rt/nav :workspace + {:project-id (get-in data [:project :id]) + :file-id (get-in data [:file :id])} + {:page-id (get-in data [:page :id])}))] + [:header.viewer-header + [:div.main-icon + [:a i/logo-icon]] + + [:div.sitemap-zone {:alt (tr "header.sitemap") + :on-click on-click} + [:span.project-name (:name project)] + [:span "/"] + [:span.file-name (:name file)] + [:span "/"] + [:span.page-name (:name page)] + [:span.dropdown-button i/arrow-down] + [:span.counters (str (inc index) " / " total)]] + + [:div.options-zone + [:span.btn-primary {:on-click on-edit} "Edit page"] + [:& zoom-widget {:zoom (:zoom local)}] + [:span.btn-fullscreen.tooltip.tooltip-bottom {:alt "Full screen"} i/full-screen]]])) + diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs new file mode 100644 index 000000000..f17057f2d --- /dev/null +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -0,0 +1,146 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.viewer.thumbnails + (:require + [goog.events :as events] + [goog.object :as gobj] + [lentes.core :as l] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.common.data :as d] + [uxbox.main.store :as st] + [uxbox.main.data.viewer :as dv] + [uxbox.main.ui.components.dropdown :refer [dropdown']] + [uxbox.main.ui.shapes.frame :as frame] + [uxbox.main.exports :as exports] + [uxbox.util.data :refer [classnames]] + [uxbox.util.dom :as dom] + [uxbox.util.geom.matrix :as gmt] + [uxbox.util.geom.point :as gpt] + [uxbox.util.i18n :as i18n :refer [t tr]] + [uxbox.util.math :as mth] + [uxbox.util.router :as rt] + [uxbox.main.data.viewer :as vd]) + (:import goog.events.EventType + goog.events.KeyCodes)) + +(mf/defc thumbnails-content + [{:keys [children expanded? total] :as props}] + (let [container (mf/use-ref) + width (mf/use-var (.. js/document -documentElement -clientWidth)) + element-width (mf/use-var 152) + + offset (mf/use-state 0) + + on-left-arrow-click + (fn [event] + (swap! offset (fn [v] + (if (pos? v) + (dec v) + v)))) + + on-right-arrow-click + (fn [event] + (let [visible (/ @width @element-width) + max-val (- total visible)] + (swap! offset (fn [v] + (if (< v max-val) + (inc v) + v))))) + + on-scroll + (fn [event] + (if (pos? (.. event -nativeEvent -deltaY)) + (on-right-arrow-click event) + (on-left-arrow-click event))) + + on-mount + (fn [] + (let [dom (mf/ref-val container)] + (reset! width (gobj/get dom "clientWidth"))))] + + (mf/use-effect on-mount) + (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]]]))) + +(mf/defc frame-svg + {::mf/wrap [mf/wrap-memo]} + [{:keys [objects frame zoom] :or {zoom 1} :as props}] + (let [childs (mapv #(get objects %) (:shapes frame)) + modifier (-> (gpt/point (:x frame) (:y frame)) + (gpt/negate) + (gmt/translate-matrix)) + frame (assoc frame :displacement-modifier modifier) + + transform (str "scale(" zoom ")")] + + + [:svg {:view-box (str "0 0 " (:width frame 0) " " (:height frame 0)) + :width (:width frame) + :height (:height frame) + :transform transform + :version "1.1" + :xmlnsXlink "http://www.w3.org/1999/xlink" + :xmlns "http://www.w3.org/2000/svg"} + [:& exports/frame-shape {:shape frame :childs childs}]])) + +(mf/defc thumbnails-summary + [{:keys [on-toggle-expand on-close total] :as props}] + [:div.thumbnails-summary + [:span.counter (str total " frames")] + [:span.buttons + [:span.btn-expand {:on-click on-toggle-expand} i/arrow-down] + [:span.btn-close {:on-click on-close} i/close]]]) + +(mf/defc thumbnail-item + [{:keys [selected? frame on-click index objects] :as props}] + [:div.thumbnail-item {:on-click #(on-click % index)} + [:div.thumbnail-preview + {:class (classnames :selected selected?)} + [:& frame-svg {:frame frame :objects objects}]] + [:div.thumbnail-info + [:span.name (:name frame)]]]) + +(mf/defc thumbnails-panel + [{:keys [data index] :as props}] + (let [expanded? (mf/use-state false) + container (mf/use-ref) + page-id (get-in data [:page :id]) + + on-close #(st/emit! dv/toggle-thumbnails-panel) + + on-item-click + (fn [event index] + (st/emit! (rt/nav :viewer {:page-id page-id + :index index})))] + [:& dropdown' {:on-close on-close + :container container + :show true} + [:section.viewer-thumbnails {:class (classnames :expanded @expanded?) + :ref container} + [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) + :on-close on-close + :total (count (:frames data))}] + [:& thumbnails-content {:expanded? @expanded? + :total (count (:frames data))} + (for [[i frame] (d/enumerate (:frames data))] + [:& thumbnail-item {:key i + :index i + :frame frame + :objects (:objects data) + :on-click on-item-click + :selected? (= i index)}])]]])) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 108ff1f9a..74aac1c2a 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -121,11 +121,13 @@ (let [file (mf/deref refs/workspace-file) page (mf/deref refs/workspace-page) + project (mf/deref refs/workspace-project) layout (mf/deref refs/workspace-layout)] [:> rdnd/provider {:backend rdnd/html5} [:& messages-widget] [:& header {:page page :file file + :project project :layout layout}] (when page diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index afdfca654..0979c6ae3 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -22,6 +22,7 @@ [uxbox.main.ui.workspace.images :refer [import-image-modal]] [uxbox.main.ui.components.dropdown :refer [dropdown]] [uxbox.util.i18n :as i18n :refer [tr t]] + [uxbox.util.data :refer [classnames]] [uxbox.util.math :as mth] [uxbox.util.router :as rt])) @@ -40,21 +41,21 @@ [:div.zoom-input [:span.add-zoom {:on-click decrease} "-"] [:div {:on-click #(reset! show-dropdown? true)} - [:span {} (str (mth/round (* 100 zoom)) "%")] - [:span.dropdown-button i/arrow-down] - [:& dropdown {:show @show-dropdown? - :on-close #(reset! show-dropdown? false)} - [:ul.zoom-dropdown - [:li {:on-click increase} - "Zoom in" [:span "+"]] - [:li {:on-click decrease} - "Zoom out" [:span "-"]] - [:li {:on-click zoom-to-50} - "Zoom to 50%" [:span "Shift + 0"]] - [:li {:on-click zoom-to-100} - "Zoom to 100%" [:span "Shift + 1"]] - [:li {:on-click zoom-to-200} - "Zoom to 200%" [:span "Shift + 2"]]]]] + [:span {} (str (mth/round (* 100 zoom)) "%")] + [:span.dropdown-button i/arrow-down] + [:& dropdown {:show @show-dropdown? + :on-close #(reset! show-dropdown? false)} + [:ul.zoom-dropdown + [:li {:on-click increase} + "Zoom in" [:span "+"]] + [:li {:on-click decrease} + "Zoom out" [:span "-"]] + [:li {:on-click zoom-to-50} + "Zoom to 50%" [:span "Shift + 0"]] + [:li {:on-click zoom-to-100} + "Zoom to 100%" [:span "Shift + 1"]] + [:li {:on-click zoom-to-200} + "Zoom to 200%" [:span "Shift + 2"]]]]] [:span.remove-zoom {:on-click increase} "+"]])) ;; --- Header Users @@ -132,35 +133,34 @@ ;; --- Header Component +(def router-ref + (-> (l/key :router) + (l/derive st/state))) + (mf/defc header - [{:keys [page file layout] :as props}] - (let [toggle-layout #(st/emit! (dw/toggle-layout-flag %)) - on-undo (constantly nil) - on-redo (constantly nil) + [{:keys [page file layout project] :as props}] + (let [go-to-dashboard #(st/emit! (rt/nav :dashboard-team {:team-id "self"})) + toggle-sitemap #(st/emit! (dw/toggle-layout-flag :sitemap)) locale (i18n/use-locale) - - on-image #(modal/show! import-image-modal {}) - ;;on-download #(udl/open! :download) - selected-drawtool (mf/deref refs/selected-drawing-tool) - select-drawtool #(st/emit! :interrupt - #_(dw/deactivate-ruler) - (dw/select-for-drawing %))] - + router (mf/deref router-ref) + view-url (rt/resolve router :viewer {:page-id (:id page) :index 0})] [:header.workspace-bar [:div.main-icon - [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} - i/logo-icon]] - + [:a {:on-click go-to-dashboard} i/logo-icon]] [:& menu {:layout layout}] - [:div.project-tree-btn - {:alt (tr "header.sitemap") - :class (when (contains? layout :sitemap) "selected") - :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))} - [:span.project-name "Project name /"] + [:div.project-tree-btn {:alt (tr "header.sitemap") + :class (classnames :selected (contains? layout :sitemap)) + :on-click toggle-sitemap} + [:span.project-name (:name project) " /"] [:span (:name file)]] [:div.workspace-options [:& active-users]] - [:& zoom-widget]])) + + [:& zoom-widget] + + [:a.preview { + ;; :target "__blank" + :href (str "#" view-url)} i/play]])) From 8597b87cadc7bd54f470c1943d265656e0905ec5 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 20:01:49 +0200 Subject: [PATCH 09/22] :tada: Add new shortcuts handling implementation. --- frontend/package-lock.json | 5 ++ frontend/package.json | 1 + frontend/src/uxbox/main/data/workspace.cljs | 94 ++++++++------------- frontend/src/uxbox/main/ui/react_hooks.cljs | 24 +++++- frontend/src/uxbox/main/ui/workspace.cljs | 7 +- 5 files changed, 67 insertions(+), 64 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e3a3f2a1f..559a0d696 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3945,6 +3945,11 @@ } } }, + "mousetrap": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", + "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index cc478e876..fb278caac 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "date-fns": "^2.11.1", + "mousetrap": "^1.6.5", "randomcolor": "^0.5.4", "react": "^16.13.1", "react-color": "^2.18.0", diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 72fbb56f1..2683d9496 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -2263,63 +2263,41 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (def shortcuts - {"ctrl+shift+m" #(rx/of (toggle-layout-flag :sitemap)) - "ctrl+shift+f" #(rx/of (toggle-layout-flag :drawtools)) - "ctrl+shift+i" #(rx/of (toggle-layout-flag :icons)) - "ctrl+shift+l" #(rx/of (toggle-layout-flag :layers)) - "equals" #(rx/of increase-zoom) ; keyName for the key with = and + in US keyboards (see https://unixpapa.com/js/key.html) - "dash" #(rx/of decrease-zoom) ; keyName for the key with - and _ in US keyboards - "shift+0" #(rx/of zoom-to-50) - "shift+1" #(rx/of reset-zoom) - "shift+2" #(rx/of zoom-to-200) - "ctrl+d" #(rx/of duplicate-selected) - "ctrl+z" #(rx/of undo) - "ctrl+shift+z" #(rx/of redo) - "ctrl+y" #(rx/of redo) - "ctrl+q" #(rx/of reinitialize-undo) - "ctrl+b" #(rx/of (select-for-drawing :rect)) - "ctrl+e" #(rx/of (select-for-drawing :circle)) - "ctrl+t" #(rx/of (select-for-drawing :text)) - "ctrl+c" #(rx/of copy-selected) - "ctrl+v" #(rx/of paste) - "ctrl+g" #(rx/of (create-group)) - "ctrl+shift+g" #(rx/of (remove-group)) - "esc" #(rx/of :interrupt deselect-all) - "delete" #(rx/of delete-selected) - "ctrl+up" #(rx/of (vertical-order-selected :up)) - "ctrl+down" #(rx/of (vertical-order-selected :down)) - "ctrl+shift+up" #(rx/of (vertical-order-selected :top)) - "ctrl+shift+down" #(rx/of (vertical-order-selected :bottom)) - "shift+up" #(rx/of (move-selected :up true)) - "shift+down" #(rx/of (move-selected :down true)) - "shift+right" #(rx/of (move-selected :right true)) - "shift+left" #(rx/of (move-selected :left true)) - "up" #(rx/of (move-selected :up false)) - "down" #(rx/of (move-selected :down false)) - "right" #(rx/of (move-selected :right false)) - "left" #(rx/of (move-selected :left false))}) + {"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap)) + "ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries)) + "ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers)) + "+" #(st/emit! increase-zoom) + "-" #(st/emit! decrease-zoom) -(def initialize-shortcuts - (letfn [(initialize [sink] - (let [handler (KeyboardShortcutHandler. js/document)] + "ctrl+g" #(st/emit! (create-group)) + "ctrl+shift+g" #(st/emit! (remove-group)) - ;; Register shortcuts. - (run! #(.registerShortcut handler % %) (keys shortcuts)) - - ;; Initialize shortcut listener. - (let [event KeyboardShortcutHandler.EventType.SHORTCUT_TRIGGERED - callback #(sink (gobj/get % "identifier")) - key (events/listen handler event callback)] - (fn [] - (events/unlistenByKey key) - (.clearKeyListener handler)))))] - (ptk/reify ::initialize-shortcuts - ptk/WatchEvent - (watch [_ state stream] - (let [stoper (rx/filter #(= ::finalize-shortcuts %) stream)] - (->> (rx/create initialize) - (rx/pr-log "[debug]: shortcut:") - (rx/map #(get shortcuts %)) - (rx/filter fn?) - (rx/merge-map (fn [f] (f))) - (rx/take-until stoper))))))) + "shift+0" #(st/emit! zoom-to-50) + "shift+1" #(st/emit! reset-zoom) + "shift+2" #(st/emit! zoom-to-200) + "ctrl+d" #(st/emit! duplicate-selected) + "ctrl+z" #(st/emit! undo) + "ctrl+shift+z" #(st/emit! redo) + "ctrl+y" #(st/emit! redo) + "ctrl+q" #(st/emit! reinitialize-undo) + "ctrl+b" #(st/emit! (select-for-drawing :rect)) + "ctrl+e" #(st/emit! (select-for-drawing :circle)) + "ctrl+t" #(st/emit! (select-for-drawing :text)) + "ctrl+c" #(st/emit! copy-selected) + "ctrl+v" #(st/emit! paste) + "ctrl+g" #(st/emit! (create-group)) + ;; "ctrl+shift+g" #(st/emit! remove-group) + "esc" #(st/emit! :interrupt deselect-all) + "delete" #(st/emit! delete-selected) + "ctrl+up" #(st/emit! (vertical-order-selected :up)) + "ctrl+down" #(st/emit! (vertical-order-selected :down)) + "ctrl+shift+up" #(st/emit! (vertical-order-selected :top)) + "ctrl+shift+down" #(st/emit! (vertical-order-selected :bottom)) + "shift+up" #(st/emit! (move-selected :up true)) + "shift+down" #(st/emit! (move-selected :down true)) + "shift+right" #(st/emit! (move-selected :right true)) + "shift+left" #(st/emit! (move-selected :left true)) + "up" #(st/emit! (move-selected :up false)) + "down" #(st/emit! (move-selected :down false)) + "right" #(st/emit! (move-selected :right false)) + "left" #(st/emit! (move-selected :left false))}) diff --git a/frontend/src/uxbox/main/ui/react_hooks.cljs b/frontend/src/uxbox/main/ui/react_hooks.cljs index 35da9ee1d..9fcbdcfaa 100644 --- a/frontend/src/uxbox/main/ui/react_hooks.cljs +++ b/frontend/src/uxbox/main/ui/react_hooks.cljs @@ -10,9 +10,12 @@ (ns uxbox.main.ui.react-hooks "A collection of general purpose react hooks." (:require + [cljs.spec.alpha :as s] + [uxbox.common.spec :as us] [beicon.core :as rx] [goog.events :as events] - [rumext.alpha :as mf]) + [rumext.alpha :as mf] + ["mousetrap" :as mousetrap]) (:import goog.events.EventType)) (defn use-rxsub @@ -24,3 +27,22 @@ #(rx/cancel! sub))) #js [ob]) state)) + + +(s/def ::shortcuts + (s/map-of ::us/string fn?)) + +(defn use-shortcuts + [shortcuts] + (us/assert ::shortcuts shortcuts) + (mf/use-effect + (fn [] + (->> (seq shortcuts) + (run! (fn [[key f]] + (mousetrap/bind key (fn [event] + (js/console.log "[debug]: shortcut:" key) + (.preventDefault event) + (f event)))))) + (fn [] (mousetrap/reset)))) + nil) + diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 74aac1c2a..b8e0c57d0 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -19,6 +19,7 @@ [uxbox.main.streams :as ms] [uxbox.main.ui.confirm] [uxbox.main.ui.keyboard :as kbd] + [uxbox.main.ui.react-hooks :as hooks] [uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.workspace.viewport :refer [viewport]] [uxbox.main.ui.workspace.colorpalette :refer [colorpalette]] @@ -111,11 +112,7 @@ (st/emit! (dw/initialize-ws file-id)) #(st/emit! (dw/finalize-ws file-id))))) - (-> (mf/deps file-id) - (mf/use-effect - (fn [] - (st/emit! dw/initialize-shortcuts) - #(st/emit! ::dw/finalize-shortcuts)))) + (hooks/use-shortcuts dw/shortcuts) (mf/use-effect #(st/emit! dw/initialize-layout)) From 648ccf4ccedc4f17349ca7e29629c8592c0631f3 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 20:38:02 +0200 Subject: [PATCH 10/22] :sparkles: Improve error handling. --- frontend/deps.edn | 4 +- frontend/src/uxbox/main/ui.cljs | 107 +++++++++--------- .../src/uxbox/main/ui/components/error.cljs | 51 --------- 3 files changed, 56 insertions(+), 106 deletions(-) delete mode 100644 frontend/src/uxbox/main/ui/components/error.cljs diff --git a/frontend/deps.edn b/frontend/deps.edn index 9169e295d..cdb51e5ac 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -13,9 +13,7 @@ funcool/lentes {:mvn/version "1.4.0-SNAPSHOT"} funcool/potok {:mvn/version "2.8.0-SNAPSHOT"} funcool/promesa {:mvn/version "5.1.0"} - funcool/rumext {:mvn/version "2020.04.01-3" - :exclusions [cljsjs/react - cljsjs/react-dom]} + funcool/rumext {:mvn/version "2020.04.02-1"} } :aliases {:dev diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index fe4fba293..2d6304b3a 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -20,7 +20,6 @@ [uxbox.main.data.auth :refer [logout]] [uxbox.main.refs :as refs] [uxbox.main.store :as st] - [uxbox.main.ui.components.error :refer [wrap-catch]] [uxbox.main.ui.dashboard :refer [dashboard]] [uxbox.main.ui.login :refer [login-page]] [uxbox.main.ui.profile.recovery :refer [profile-recovery-page]] @@ -86,60 +85,64 @@ :not-found [:& not-found-page {:error data}] [:span "Internal application errror"]))) +(mf/defc app-container + {::mf/wrap [#(mf/catch % {:fallback app-error})]} + [{:keys [route] :as props}] + (case (get-in route [:data :name]) + :login + [:& login-page] + + :profile-register + [:& profile-register-page] + + :profile-recovery-request + [:& profile-recovery-request-page] + + :profile-recovery + [:& profile-recovery-page] + + :viewer + (let [index (d/parse-integer (get-in route [:params :path :index])) + page-id (uuid (get-in route [:params :path :page-id]))] + [:& viewer-page {:page-id page-id + :index index}]) + + (:settings-profile + :settings-password) + [:& settings/settings {:route route}] + + :debug-icons-preview + (when *assert* + [:& i/debug-icons-preview]) + + (:dashboard-search + :dashboard-team + :dashboard-project + :dashboard-library-icons + :dashboard-library-icons-index + :dashboard-library-images + :dashboard-library-images-index + :dashboard-library-palettes + :dashboard-library-palettes-index) + [:& dashboard {:route route}] + + :workspace + (let [project-id (uuid (get-in route [:params :path :project-id])) + file-id (uuid (get-in route [:params :path :file-id])) + page-id (uuid (get-in route [:params :query :page-id]))] + [:& workspace/workspace {:project-id project-id + :file-id file-id + :page-id page-id + :key file-id}]) + + :not-found + [:& not-found-page {}])) + (mf/defc app - {:wrap [#(wrap-catch % {:fallback app-error})]} - [props] + [] (let [route (mf/deref route-iref)] (when route - (case (get-in route [:data :name]) - :login - (mf/element login-page) - - :profile-register - (mf/element profile-register-page) - - :profile-recovery-request - (mf/element profile-recovery-request-page) - - :profile-recovery - (mf/element profile-recovery-page) - - :viewer - (let [index (d/parse-integer (get-in route [:params :path :index])) - page-id (uuid (get-in route [:params :path :page-id]))] - [:& viewer-page {:page-id page-id - :index index}]) - - (:settings-profile - :settings-password) - (mf/element settings/settings #js {:route route}) - - :debug-icons-preview - (when *assert* - (mf/element i/debug-icons-preview)) - - (:dashboard-search - :dashboard-team - :dashboard-project - :dashboard-library-icons - :dashboard-library-icons-index - :dashboard-library-images - :dashboard-library-images-index - :dashboard-library-palettes - :dashboard-library-palettes-index) - (mf/element dashboard #js {:route route}) - - :workspace - (let [project-id (uuid (get-in route [:params :path :project-id])) - file-id (uuid (get-in route [:params :path :file-id])) - page-id (uuid (get-in route [:params :query :page-id]))] - [:& workspace/workspace {:project-id project-id - :file-id file-id - :page-id page-id - :key file-id}]) - - :not-found - [:& not-found-page {}])))) + [:& app-container {:route route :key (get-in route [:data :name])}]))) ;; --- Error Handling diff --git a/frontend/src/uxbox/main/ui/components/error.cljs b/frontend/src/uxbox/main/ui/components/error.cljs deleted file mode 100644 index 9821cafa2..000000000 --- a/frontend/src/uxbox/main/ui/components/error.cljs +++ /dev/null @@ -1,51 +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/. -;; -;; This Source Code Form is "Incompatible With Secondary Licenses", as -;; defined by the Mozilla Public License, v. 2.0. -;; -;; Copyright (c) 2020 UXBOX Labs S.L - -(ns uxbox.main.ui.components.error - "A hight order component for error handling." - (:require - [beicon.core :as rx] - [goog.object :as gobj] - [rumext.alpha :as mf] - [cljsjs.react])) - -(defn wrap-catch - [component {:keys [fallback on-error]}] - (let [constructor - (fn [props] - (this-as this - (unchecked-set this "state" #js {}) - (.call js/React.Component this props))) - - did-catch - (fn [error info] - (when (fn? on-error) - (on-error error info))) - - derive-state - (fn [error] - #js {:error error}) - - render - (fn [] - (this-as this - (let [state (gobj/get this "state") - error (gobj/get state "error")] - (if error - (mf/element fallback #js {:error error}) - (mf/element component #js {}))))) - - _ (goog/inherits constructor js/React.Component) - prototype (unchecked-get constructor "prototype")] - - (unchecked-set constructor "displayName" "ErrorBoundary") - (unchecked-set constructor "getDerivedStateFromError" derive-state) - (unchecked-set prototype "componentDidCatch" did-catch) - (unchecked-set prototype "render" render) - constructor)) From 6ba4531d1862ef31f52450bc18d32a3a42a6fbc0 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 20:51:27 +0200 Subject: [PATCH 11/22] :arrow_up: Update rumext dependency (bugfixing). --- frontend/deps.edn | 2 +- frontend/src/uxbox/main/exports.cljs | 1 - frontend/vendor/cljsjs/react.cljs | 4 ---- frontend/vendor/cljsjs/react_dom.cljs | 4 ---- 4 files changed, 1 insertion(+), 10 deletions(-) delete mode 100644 frontend/vendor/cljsjs/react.cljs delete mode 100644 frontend/vendor/cljsjs/react_dom.cljs diff --git a/frontend/deps.edn b/frontend/deps.edn index cdb51e5ac..9842471ef 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -13,7 +13,7 @@ funcool/lentes {:mvn/version "1.4.0-SNAPSHOT"} funcool/potok {:mvn/version "2.8.0-SNAPSHOT"} funcool/promesa {:mvn/version "5.1.0"} - funcool/rumext {:mvn/version "2020.04.02-1"} + funcool/rumext {:mvn/version "2020.04.02-3"} } :aliases {:dev diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index 092b9d4f6..b5570b92f 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -7,7 +7,6 @@ (ns uxbox.main.exports "The main logic for SVG export functionality." (:require - [cljsjs.react.dom.server] [rumext.alpha :as mf] [uxbox.util.uuid :as uuid] [uxbox.util.math :as mth] diff --git a/frontend/vendor/cljsjs/react.cljs b/frontend/vendor/cljsjs/react.cljs deleted file mode 100644 index be7804c97..000000000 --- a/frontend/vendor/cljsjs/react.cljs +++ /dev/null @@ -1,4 +0,0 @@ -(ns cljsjs.react - (:require ["react" :as react])) - -(goog/exportSymbol "React" react) diff --git a/frontend/vendor/cljsjs/react_dom.cljs b/frontend/vendor/cljsjs/react_dom.cljs deleted file mode 100644 index 623cda542..000000000 --- a/frontend/vendor/cljsjs/react_dom.cljs +++ /dev/null @@ -1,4 +0,0 @@ -(ns cljsjs.react-dom - (:require ["react-dom" :as rdom])) - -(goog/exportSymbol "ReactDOM" rdom) From c907126b6010318bccb3d6798fbc9cd7c283a74e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 23:55:56 +0200 Subject: [PATCH 12/22] :recycle: Replace wrap-memo with memo. --- frontend/src/uxbox/main/ui/dashboard/grid.cljs | 2 +- frontend/src/uxbox/main/ui/viewer/thumbnails.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/grid.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/header.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/rules.cljs | 8 ++++---- frontend/src/uxbox/main/ui/workspace/sidebar.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs | 6 +++--- frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs | 2 +- .../src/uxbox/main/ui/workspace/sidebar/options/page.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/viewport.cljs | 4 ++-- 10 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs index eb9146adf..1fc12d738 100644 --- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/grid.cljs @@ -35,7 +35,7 @@ (str (t locale "ds.updated-at" time)))) (mf/defc grid-item - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [file] :as props}] (let [local (mf/use-state {:menu-open false :edition false}) diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index f17057f2d..bf830a853 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -78,7 +78,7 @@ children]]]))) (mf/defc frame-svg - {::mf/wrap [mf/wrap-memo]} + {::mf/wrap [mf/memo]} [{:keys [objects frame zoom] :or {zoom 1} :as props}] (let [childs (mapv #(get objects %) (:shapes frame)) modifier (-> (gpt/point (:x frame) (:y frame)) diff --git a/frontend/src/uxbox/main/ui/workspace/grid.cljs b/frontend/src/uxbox/main/ui/workspace/grid.cljs index 624014089..5441c0ad8 100644 --- a/frontend/src/uxbox/main/ui/workspace/grid.cljs +++ b/frontend/src/uxbox/main/ui/workspace/grid.cljs @@ -20,7 +20,7 @@ (l/derive refs/workspace-data))) (mf/defc grid - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [props] (prn "grid$render") (let [options (mf/deref options-iref) diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 0979c6ae3..311a04be3 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -29,7 +29,7 @@ ;; --- Zoom Widget (mf/defc zoom-widget - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [props] (let [zoom (mf/deref refs/selected-zoom) show-dropdown? (mf/use-state false) diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs index 3e68885bc..f87106c5c 100644 --- a/frontend/src/uxbox/main/ui/workspace/rules.cljs +++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs @@ -99,7 +99,7 @@ ;; --- Horizontal Rule Ticks (Component) (mf/defc horizontal-rule-ticks - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [zoom]}] (let [path (reduce (partial make-vertical-tick zoom) [] +ticks+)] [:g @@ -110,7 +110,7 @@ ;; --- Vertical Rule Ticks (Component) (mf/defc vertical-rule-ticks - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [zoom]}] (let [path (reduce (partial make-horizontal-tick zoom) [] +ticks+)] [:g @@ -121,7 +121,7 @@ ;; --- Horizontal Rule (Component) (mf/defc horizontal-rule - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [props] (let [scroll (use-rxsub ms/viewport-scroll) zoom (mf/deref refs/selected-zoom) @@ -137,7 +137,7 @@ ;; --- Vertical Rule (Component) (mf/defc vertical-rule - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [props] (let [scroll (use-rxsub ms/viewport-scroll) zoom (or (mf/deref refs/selected-zoom) 1) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs index 6e8d5756c..4245dddd5 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs @@ -22,7 +22,7 @@ ;; --- Left Sidebar (Component) (mf/defc left-sidebar - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [layout page file] :as props}] [:aside.settings-bar.settings-bar-left [:div.settings-bar-inside diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 4ebfe45dd..66adf94ef 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -83,7 +83,7 @@ #(select-keys % [:id :frame :name :type :hidden :blocked])) (mf/defc layer-item - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [index item selected objects] :as props}] (let [selected? (contains? selected (:id item)) local (mf/use-state {:collapsed false}) @@ -187,7 +187,7 @@ :key (:id item)}]))])])) (mf/defc layers-tree - {::mf/wrap [mf/wrap-memo]} + {::mf/wrap [mf/memo]} [props] (let [selected (mf/deref refs/selected-shapes) data (mf/deref refs/workspace-data) @@ -209,7 +209,7 @@ ;; only render visible items instead of all. (mf/defc layers-toolbox - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [page] :as props}] (let [locale (i18n/use-locale) on-click #(st/emit! (dw/toggle-layout-flag :layers))] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index f92de7436..17701a409 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -49,7 +49,7 @@ [:& shape-options {:shape shape}])) (mf/defc options-toolbox - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [page selected] :as props}] (let [close #(st/emit! (udw/toggle-layout-flag :element-options)) selected (mf/deref refs/selected-shapes)] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs index 43e1b8b18..325d43c9b 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs @@ -70,7 +70,7 @@ (l/derive refs/workspace-data))) (mf/defc grid-options - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [props] (let [options (->> (mf/deref options-iref) (merge default-options)) diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index 85b6ebb23..fe1556a0f 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -75,7 +75,7 @@ ;; --- Selection Rect (mf/defc selection-rect - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [data] :as props}] (when data [:rect.selection-rect @@ -119,7 +119,7 @@ [:& frames {:data data}])) (mf/defc frames - {:wrap [mf/wrap-memo]} + {:wrap [mf/memo]} [{:keys [data] :as props}] (let [objects (:objects data) root (get objects uuid/zero) From b563ab445c7f2ad591700e1476ffd6de01d3e21a Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2020 23:56:26 +0200 Subject: [PATCH 13/22] :tada: Add externds (fixes an issue on prod build). --- frontend/externs/main.txt | 5 +++++ frontend/shadow-cljs.edn | 16 ++++++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 frontend/externs/main.txt diff --git a/frontend/externs/main.txt b/frontend/externs/main.txt new file mode 100644 index 000000000..2c23b76be --- /dev/null +++ b/frontend/externs/main.txt @@ -0,0 +1,5 @@ +getBrowserEvent +viewBox +baseVal +width +height diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn index 2bcadb50d..767d12f1f 100644 --- a/frontend/shadow-cljs.edn +++ b/frontend/shadow-cljs.edn @@ -9,9 +9,13 @@ :output-dir "resources/public/js/" :asset-path "/js" :modules {:main {:entries [uxbox.main]}} - :compiler-options {:output-feature-set :es8} - :release {:output-dir "target/dist/js" - :compiler-options {:fn-invoke-direct true - :source-map true - :anon-fn-naming-policy :mapped - :source-map-detail-level :all}}}}} + :compiler-options + {:output-feature-set :es8 + :output-wrapper false} + :release + {:output-dir "target/dist/js" + :compiler-options + {:fn-invoke-direct true + :source-map true + :anon-fn-naming-policy :mapped + :source-map-detail-level :all}}}}} From 0a1d6f1bdbbda214b1a13f5b9c132b0c120fcf33 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2020 11:29:27 +0200 Subject: [PATCH 14/22] :bug: Fix scroll and positioning on viewer. --- frontend/resources/styles/main/partials/viewer.scss | 5 +++++ frontend/src/uxbox/main/ui/viewer/thumbnails.cljs | 9 ++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss index 15f3fd48d..eeac272b2 100644 --- a/frontend/resources/styles/main/partials/viewer.scss +++ b/frontend/resources/styles/main/partials/viewer.scss @@ -17,4 +17,9 @@ display: flex; justify-content: center; align-items: center; + flex-flow: wrap; + + svg { + transform-origin: center; + } } diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index bf830a853..0920919b1 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -86,13 +86,12 @@ (gmt/translate-matrix)) frame (assoc frame :displacement-modifier modifier) - transform (str "scale(" zoom ")")] - + width (* (:width frame) zoom) + height (* (:height frame) zoom)] [:svg {:view-box (str "0 0 " (:width frame 0) " " (:height frame 0)) - :width (:width frame) - :height (:height frame) - :transform transform + :width width + :height height :version "1.1" :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns "http://www.w3.org/2000/svg"} From d589f19be47f901d28839e26ce870c2909f1de8d Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2020 11:30:13 +0200 Subject: [PATCH 15/22] :tada: Add basic zoom shortcuts to viewer. --- frontend/src/uxbox/main/data/viewer.cljs | 9 +++++++++ frontend/src/uxbox/main/ui/viewer.cljs | 6 ++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/frontend/src/uxbox/main/data/viewer.cljs b/frontend/src/uxbox/main/data/viewer.cljs index babee28e4..978424869 100644 --- a/frontend/src/uxbox/main/data/viewer.cljs +++ b/frontend/src/uxbox/main/data/viewer.cljs @@ -14,6 +14,7 @@ [potok.core :as ptk] [uxbox.main.constants :as c] [uxbox.main.repo :as rp] + [uxbox.main.store :as st] [uxbox.common.spec :as us] [uxbox.common.pages :as cp] [uxbox.common.data :as d] @@ -129,3 +130,11 @@ ptk/UpdateEvent (update [_ state] (update-in state [:viewer-local :show-thumbnails] not)))) + + +(def shortcuts + {"+" #(st/emit! increase-zoom) + "-" #(st/emit! decrease-zoom) + "shift+0" #(st/emit! zoom-to-50) + "shift+1" #(st/emit! reset-zoom) + "shift+2" #(st/emit! zoom-to-200)}) diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs index 8b41c4ac7..aeb11d50a 100644 --- a/frontend/src/uxbox/main/ui/viewer.cljs +++ b/frontend/src/uxbox/main/ui/viewer.cljs @@ -19,10 +19,11 @@ [uxbox.common.exceptions :as ex] [uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.components.dropdown :refer [dropdown]] - [uxbox.main.data.viewer :as vd] + [uxbox.main.data.viewer :as dv] [uxbox.main.ui.viewer.header :refer [header]] [uxbox.main.ui.viewer.thumbnails :refer [thumbnails-panel frame-svg]] [uxbox.util.dom :as dom] + [uxbox.main.ui.react-hooks :as hooks] [uxbox.util.data :refer [classnames]] [uxbox.util.i18n :as i18n :refer [t tr]] [uxbox.util.math :as mth] @@ -61,6 +62,7 @@ (events/unlistenByKey key1))))] (mf/use-effect on-mount) + (hooks/use-shortcuts dv/shortcuts) [:div.viewer-layout [:& header {:data data @@ -87,7 +89,7 @@ (mf/defc viewer-page [{:keys [page-id index] :as props}] - (mf/use-effect (mf/deps page-id) #(st/emit! (vd/initialize page-id))) + (mf/use-effect (mf/deps page-id) #(st/emit! (dv/initialize page-id))) (let [data (mf/deref viewer-data-ref) local (mf/deref viewer-local-ref)] (when data From 242eef84273b6c6678b6b286f4cff9d1ff2cf42a Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2020 12:06:22 +0200 Subject: [PATCH 16/22] :tada: Add fullscreen handling to viewer. --- .../resources/styles/main/layouts/viewer.scss | 5 ++++- frontend/src/uxbox/main/data/viewer.cljs | 1 + frontend/src/uxbox/main/ui/react_hooks.cljs | 19 +++++++++++++++++++ frontend/src/uxbox/main/ui/viewer.cljs | 12 ++++++++++-- frontend/src/uxbox/main/ui/viewer/header.cljs | 7 +++++-- frontend/src/uxbox/util/dom.cljs | 4 ++++ frontend/src/uxbox/util/webapi.cljs | 6 ++++++ 7 files changed, 49 insertions(+), 5 deletions(-) diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss index eafd9911f..1b7c73abf 100644 --- a/frontend/resources/styles/main/layouts/viewer.scss +++ b/frontend/resources/styles/main/layouts/viewer.scss @@ -5,7 +5,10 @@ &.fullscreen { .viewer-header { - display: none; + opacity: 0; + &:hover { + opacity: 1; + } } .viewer-content { diff --git a/frontend/src/uxbox/main/data/viewer.cljs b/frontend/src/uxbox/main/data/viewer.cljs index 978424869..aba8ed40e 100644 --- a/frontend/src/uxbox/main/data/viewer.cljs +++ b/frontend/src/uxbox/main/data/viewer.cljs @@ -131,6 +131,7 @@ (update [_ state] (update-in state [:viewer-local :show-thumbnails] not)))) +;; --- Shortcuts (def shortcuts {"+" #(st/emit! increase-zoom) diff --git a/frontend/src/uxbox/main/ui/react_hooks.cljs b/frontend/src/uxbox/main/ui/react_hooks.cljs index 9fcbdcfaa..62ec7632b 100644 --- a/frontend/src/uxbox/main/ui/react_hooks.cljs +++ b/frontend/src/uxbox/main/ui/react_hooks.cljs @@ -15,6 +15,8 @@ [beicon.core :as rx] [goog.events :as events] [rumext.alpha :as mf] + [uxbox.util.dom :as dom] + [uxbox.util.webapi :as wapi] ["mousetrap" :as mousetrap]) (:import goog.events.EventType)) @@ -46,3 +48,20 @@ (fn [] (mousetrap/reset)))) nil) +(defn use-fullscreen + [ref] + (let [state (mf/use-state (dom/fullscreen?)) + change (mf/use-callback #(reset! state (dom/fullscreen?))) + toggle (mf/use-callback (mf/deps @state) + #(let [el (mf/ref-val ref)] + (swap! state not) + (if @state + (wapi/exit-fullscreen) + (wapi/request-fullscreen el))))] + (mf/use-effect + (fn [] + (.addEventListener js/document "fullscreenchange" change) + #(.removeEventListener js/document "fullscreenchange" change))) + + [toggle @state])) + diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs index aeb11d50a..a0cbf4751 100644 --- a/frontend/src/uxbox/main/ui/viewer.cljs +++ b/frontend/src/uxbox/main/ui/viewer.cljs @@ -46,7 +46,11 @@ (mf/defc viewer-content [{:keys [data local index] :as props}] - (let [on-mouse-wheel + (let [container (mf/use-ref) + + [toggle-fullscreen fullscreen?] (hooks/use-fullscreen container) + + on-mouse-wheel (fn [event] (when (kbd/ctrl? event) ;; Disable browser zoom with ctrl+mouse wheel @@ -64,8 +68,12 @@ (mf/use-effect on-mount) (hooks/use-shortcuts dv/shortcuts) - [:div.viewer-layout + [:div.viewer-layout {:class (classnames :fullscreen fullscreen?) + :ref container} + [:& header {:data data + :toggle-fullscreen toggle-fullscreen + :fullscreen? fullscreen? :local local :index index}] [:div.viewer-content diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs index ac9793c11..9cd273cb8 100644 --- a/frontend/src/uxbox/main/ui/viewer/header.cljs +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -56,7 +56,7 @@ [:span.remove-zoom {:on-click increase} "+"]])) (mf/defc header - [{:keys [data index local] :as props}] + [{:keys [data index local fullscreen? toggle-fullscreen] :as props}] (let [{:keys [project file page frames]} data total (count frames) on-click #(st/emit! dv/toggle-thumbnails-panel) @@ -81,5 +81,8 @@ [:div.options-zone [:span.btn-primary {:on-click on-edit} "Edit page"] [:& zoom-widget {:zoom (:zoom local)}] - [:span.btn-fullscreen.tooltip.tooltip-bottom {:alt "Full screen"} i/full-screen]]])) + [:span.btn-fullscreen.tooltip.tooltip-bottom + {:alt "Full screen" + :on-click toggle-fullscreen} + i/full-screen]]])) diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs index 75cf59363..50b71a48e 100644 --- a/frontend/src/uxbox/util/dom.cljs +++ b/frontend/src/uxbox/util/dom.cljs @@ -156,3 +156,7 @@ [event] (let [data-string (-> event .-dataTransfer (.getData "text"))] (ts/decode data-string))) + +(defn fullscreen? + [] + (boolean (.-fullscreenElement js/document))) diff --git a/frontend/src/uxbox/util/webapi.cljs b/frontend/src/uxbox/util/webapi.cljs index 29f605e52..30a82264a 100644 --- a/frontend/src/uxbox/util/webapi.cljs +++ b/frontend/src/uxbox/util/webapi.cljs @@ -82,4 +82,10 @@ (catch :default e nil))))))) +(defn request-fullscreen + [el] + (.requestFullscreen el)) +(defn exit-fullscreen + [] + (.exitFullscreen js/document)) From 861199f8123bd806ef4dc1b0032a760a0f850f96 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2020 12:10:23 +0200 Subject: [PATCH 17/22] :sparkles: Rename react-hooks to hooks. --- frontend/src/uxbox/main/ui/{react_hooks.cljs => hooks.cljs} | 2 +- frontend/src/uxbox/main/ui/viewer.cljs | 2 +- frontend/src/uxbox/main/ui/workspace.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/context_menu.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/rules.cljs | 2 +- frontend/src/uxbox/main/ui/workspace/viewport.cljs | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) rename frontend/src/uxbox/main/ui/{react_hooks.cljs => hooks.cljs} (98%) diff --git a/frontend/src/uxbox/main/ui/react_hooks.cljs b/frontend/src/uxbox/main/ui/hooks.cljs similarity index 98% rename from frontend/src/uxbox/main/ui/react_hooks.cljs rename to frontend/src/uxbox/main/ui/hooks.cljs index 62ec7632b..128ee8a06 100644 --- a/frontend/src/uxbox/main/ui/react_hooks.cljs +++ b/frontend/src/uxbox/main/ui/hooks.cljs @@ -7,7 +7,7 @@ ;; ;; Copyright (c) 2020 UXBOX Labs S.L -(ns uxbox.main.ui.react-hooks +(ns uxbox.main.ui.hooks "A collection of general purpose react hooks." (:require [cljs.spec.alpha :as s] diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs index a0cbf4751..87ac9f540 100644 --- a/frontend/src/uxbox/main/ui/viewer.cljs +++ b/frontend/src/uxbox/main/ui/viewer.cljs @@ -23,7 +23,7 @@ [uxbox.main.ui.viewer.header :refer [header]] [uxbox.main.ui.viewer.thumbnails :refer [thumbnails-panel frame-svg]] [uxbox.util.dom :as dom] - [uxbox.main.ui.react-hooks :as hooks] + [uxbox.main.ui.hooks :as hooks] [uxbox.util.data :refer [classnames]] [uxbox.util.i18n :as i18n :refer [t tr]] [uxbox.util.math :as mth] diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index b8e0c57d0..108a33e0f 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -19,7 +19,7 @@ [uxbox.main.streams :as ms] [uxbox.main.ui.confirm] [uxbox.main.ui.keyboard :as kbd] - [uxbox.main.ui.react-hooks :as hooks] + [uxbox.main.ui.hooks :as hooks] [uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.ui.workspace.viewport :refer [viewport]] [uxbox.main.ui.workspace.colorpalette :refer [colorpalette]] diff --git a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs index 4b703b105..5527e52f1 100644 --- a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs +++ b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs @@ -20,7 +20,7 @@ [uxbox.builtins.icons :as i] [uxbox.util.dom :as dom] [uxbox.main.data.workspace :as dw] - [uxbox.main.ui.react-hooks :refer [use-rxsub]] + [uxbox.main.ui.hooks :refer [use-rxsub]] [uxbox.main.ui.components.dropdown :refer [dropdown]])) (def menu-ref diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs index f87106c5c..d6a782676 100644 --- a/frontend/src/uxbox/main/ui/workspace/rules.cljs +++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs @@ -14,7 +14,7 @@ [uxbox.main.refs :as refs] [uxbox.main.store :as s] [uxbox.main.streams :as ms] - [uxbox.main.ui.react-hooks :refer [use-rxsub]] + [uxbox.main.ui.hooks :refer [use-rxsub]] [uxbox.util.dom :as dom])) ;; --- Constants & Helpers diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index fe1556a0f..e15af804d 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -22,7 +22,7 @@ [uxbox.main.store :as st] [uxbox.main.streams :as ms] [uxbox.main.ui.keyboard :as kbd] - [uxbox.main.ui.react-hooks :refer [use-rxsub]] + [uxbox.main.ui.hooks :refer [use-rxsub]] [uxbox.main.ui.shapes :refer [shape-wrapper frame-wrapper]] [uxbox.main.ui.workspace.drawarea :refer [draw-area]] [uxbox.main.ui.workspace.drawarea :refer [start-drawing]] From bd2ea48969e681dd3438bc2b33b26055d17ef018 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2020 12:16:16 +0200 Subject: [PATCH 18/22] :sparkles: Improve user interactions with thumbnails panel. --- .../src/uxbox/main/ui/viewer/thumbnails.cljs | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index 0920919b1..85c9b823e 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -121,16 +121,28 @@ page-id (get-in data [:page :id]) on-close #(st/emit! dv/toggle-thumbnails-panel) + selected (mf/use-var false) + + on-mouse-leave + (fn [event] + (when @selected + (on-close))) on-item-click (fn [event index] + (compare-and-set! selected false true) (st/emit! (rt/nav :viewer {:page-id page-id - :index index})))] + :index index})) + (when @expanded? + (on-close)))] [:& dropdown' {:on-close on-close :container container :show true} - [:section.viewer-thumbnails {:class (classnames :expanded @expanded?) - :ref container} + [:section.viewer-thumbnails + {:class (classnames :expanded @expanded?) + :ref container + :on-mouse-leave on-mouse-leave} + [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not) :on-close on-close :total (count (:frames data))}] From fc18b39b8911d77c1ad5567ab248df1e469f99c8 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 6 Apr 2020 12:46:13 +0200 Subject: [PATCH 19/22] :lipstick: Fix merge issues. --- frontend/src/uxbox/main/data/workspace.cljs | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 2683d9496..f31135aed 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -2268,10 +2268,8 @@ "ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers)) "+" #(st/emit! increase-zoom) "-" #(st/emit! decrease-zoom) - "ctrl+g" #(st/emit! (create-group)) "ctrl+shift+g" #(st/emit! (remove-group)) - "shift+0" #(st/emit! zoom-to-50) "shift+1" #(st/emit! reset-zoom) "shift+2" #(st/emit! zoom-to-200) @@ -2285,8 +2283,6 @@ "ctrl+t" #(st/emit! (select-for-drawing :text)) "ctrl+c" #(st/emit! copy-selected) "ctrl+v" #(st/emit! paste) - "ctrl+g" #(st/emit! (create-group)) - ;; "ctrl+shift+g" #(st/emit! remove-group) "esc" #(st/emit! :interrupt deselect-all) "delete" #(st/emit! delete-selected) "ctrl+up" #(st/emit! (vertical-order-selected :up)) From a34fb729ea613b24699afa4532030eb74bd163dc Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 6 Apr 2020 14:30:46 +0200 Subject: [PATCH 20/22] :bug: Fix preview and viewer rendering. --- frontend/src/uxbox/main/exports.cljs | 30 ++++++------ frontend/src/uxbox/main/geom.cljs | 13 ++++-- frontend/src/uxbox/main/ui/shapes/frame.cljs | 46 ++++++++++--------- frontend/src/uxbox/main/ui/shapes/shape.cljs | 20 ++++---- .../src/uxbox/main/ui/viewer/thumbnails.cljs | 14 +++--- 5 files changed, 64 insertions(+), 59 deletions(-) diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index b5570b92f..0b169e310 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -52,23 +52,21 @@ (let [children (mapv #(get objects %) (:shapes shape))] [:& group-shape {:shape shape :children children}])) -(declare group-shape) -(declare frame-shape) - (mf/defc shape-wrapper - [{:keys [shape objects] :as props}] + [{:keys [frame shape objects] :as props}] + (prn "shape-wrapper" frame) (when (and shape (not (:hidden shape))) - (case (:type shape) - :frame [:& rect/rect-shape {:shape shape}] - :curve [:& path/path-shape {:shape shape}] - :text [:& text/text-shape {:shape shape}] - :icon [:& icon/icon-shape {:shape shape}] - :rect [:& rect/rect-shape {:shape shape}] - :path [:& path/path-shape {:shape shape}] - :image [:& image/image-shape {:shape shape}] - :circle [:& circle/circle-shape {:shape shape}] - :group [:& group-shape {:shape shape :objects objects}] - nil))) + (let [shape (geom/transform-shape frame shape)] + (case (:type shape) + :curve [:& path/path-shape {:shape shape}] + :text [:& text/text-shape {:shape shape}] + :icon [:& icon/icon-shape {:shape shape}] + :rect [:& rect/rect-shape {:shape shape}] + :path [:& path/path-shape {:shape shape}] + :image [:& image/image-shape {:shape shape}] + :circle [:& circle/circle-shape {:shape shape}] + :group [:& group-wrapper {:shape shape :objects objects}] + nil)))) (def group-shape (group/group-shape shape-wrapper)) (def frame-shape (frame/frame-shape shape-wrapper)) @@ -85,7 +83,7 @@ :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns "http://www.w3.org/2000/svg"} [:& background] - (for [item (reverse shapes)] + (for [item shapes] (if (= (:type item) :frame) [:& frame-wrapper {:shape item :key (:id item) diff --git a/frontend/src/uxbox/main/geom.cljs b/frontend/src/uxbox/main/geom.cljs index c10a4a3db..43d33730b 100644 --- a/frontend/src/uxbox/main/geom.cljs +++ b/frontend/src/uxbox/main/geom.cljs @@ -587,10 +587,13 @@ (< ry1 sy2) (> ry2 sy1)))) -(defn transform-shape [frame shape] +(defn transform-shape + [frame shape] (let [ds-modifier (:displacement-modifier shape) - rz-modifier (:resize-modifier shape)] + rz-modifier (:resize-modifier shape) + ds-modifier' (:displacement-modifier frame)] (cond-> shape - (gmt/matrix? rz-modifier) (transform rz-modifier) - frame (move (gpt/point (- (:x frame)) (- (:y frame)))) - (gmt/matrix? ds-modifier) (transform ds-modifier)))) + (gmt/matrix? ds-modifier') (transform ds-modifier') + (gmt/matrix? rz-modifier) (transform rz-modifier) + frame (move (gpt/point (- (:x frame)) (- (:y frame)))) + (gmt/matrix? ds-modifier) (transform ds-modifier)))) diff --git a/frontend/src/uxbox/main/ui/shapes/frame.cljs b/frontend/src/uxbox/main/ui/shapes/frame.cljs index f0b4b135e..c2a85b36b 100644 --- a/frontend/src/uxbox/main/ui/shapes/frame.cljs +++ b/frontend/src/uxbox/main/ui/shapes/frame.cljs @@ -53,7 +53,8 @@ false))))))))) -(defn frame-wrapper [shape-wrapper] +(defn frame-wrapper + [shape-wrapper] (mf/fnc frame-wrapper {::mf/wrap [wrap-memo-frame]} [{:keys [shape objects] :as props}] @@ -97,28 +98,29 @@ [:& (frame-shape shape-wrapper) {:shape shape :childs childs}]]))))) -(defn frame-shape [shape-wrapper] - (mf/fnc frame-shape - [{:keys [shape childs] :as props}] - (let [rotation (:rotation shape) - ds-modifier (:displacement-modifier shape) - rz-modifier (:resize-modifier shape) - shape (cond-> shape - (gmt/matrix? rz-modifier) (geom/transform rz-modifier) - (gmt/matrix? ds-modifier) (geom/transform ds-modifier)) +(defn frame-shape + [shape-wrapper] + (mf/fnc frame-shape + [{:keys [shape childs] :as props}] + (let [rotation (:rotation shape) + ds-modifier (:displacement-modifier shape) + rz-modifier (:resize-modifier shape) + shape (cond-> shape + (gmt/matrix? rz-modifier) (geom/transform rz-modifier) + (gmt/matrix? ds-modifier) (geom/transform ds-modifier)) - {:keys [id x y width height]} shape + {:keys [id x y width height]} shape - props (-> (attrs/extract-style-attrs shape) - (itr/obj-assign! - #js {:x 0 - :y 0 - :id (str "shape-" id) - :width width - :height height}))] + props (-> (attrs/extract-style-attrs shape) + (itr/obj-assign! + #js {:x 0 + :y 0 + :id (str "shape-" id) + :width width + :height height}))] - [:svg {:x x :y y :width width :height height} - [:> "rect" props] - (for [item childs] - [:& shape-wrapper {:frame shape :shape item :key (:id item)}])]))) + [:svg {:x x :y y :width width :height height} + [:> "rect" props] + (for [item childs] + [:& shape-wrapper {:frame shape :shape item :key (:id item)}])]))) diff --git a/frontend/src/uxbox/main/ui/shapes/shape.cljs b/frontend/src/uxbox/main/ui/shapes/shape.cljs index e83591956..6dd1365d9 100644 --- a/frontend/src/uxbox/main/ui/shapes/shape.cljs +++ b/frontend/src/uxbox/main/ui/shapes/shape.cljs @@ -36,18 +36,18 @@ (mf/defc shape-wrapper {::mf/wrap [wrap-memo-shape]} [{:keys [shape frame] :as props}] - (let [opts {:shape shape :frame frame}] + (let [opts #js {:shape shape :frame frame}] (when (and shape (not (:hidden shape))) (case (:type shape) - :group [:& group-wrapper opts] - :curve [:& path/path-wrapper opts] - :text [:& text/text-wrapper opts] - :icon [:& icon/icon-wrapper opts] - :rect [:& rect/rect-wrapper opts] - :path [:& path/path-wrapper opts] - :image [:& image/image-wrapper opts] - :circle [:& circle/circle-wrapper opts] - :frame [:& frame-wrapper opts] + :group [:> group-wrapper opts] + :curve [:> path/path-wrapper opts] + :text [:> text/text-wrapper opts] + :icon [:> icon/icon-wrapper opts] + :rect [:> rect/rect-wrapper opts] + :path [:> path/path-wrapper opts] + :image [:> image/image-wrapper opts] + :circle [:> circle/circle-wrapper opts] + :frame [:> frame-wrapper opts] nil)))) (def group-wrapper (group/group-wrapper shape-wrapper)) diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index 85c9b823e..b21fea9bc 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -80,22 +80,24 @@ (mf/defc frame-svg {::mf/wrap [mf/memo]} [{:keys [objects frame zoom] :or {zoom 1} :as props}] - (let [childs (mapv #(get objects %) (:shapes frame)) - modifier (-> (gpt/point (:x frame) (:y frame)) + (let [modifier (-> (gpt/point (:x frame) (:y frame)) (gpt/negate) (gmt/translate-matrix)) frame (assoc frame :displacement-modifier modifier) width (* (:width frame) zoom) - height (* (:height frame) zoom)] + height (* (:height frame) zoom) + vbox (str "0 0 " (:width frame 0) " " (:height frame 0))] - [:svg {:view-box (str "0 0 " (:width frame 0) " " (:height frame 0)) + [:svg {:view-box vbox :width width :height height :version "1.1" :xmlnsXlink "http://www.w3.org/1999/xlink" - :xmlns "http://www.w3.org/2000/svg"} - [:& exports/frame-shape {:shape frame :childs childs}]])) + :xmlns "http://www.w3.org/2000/svg"} + [:& exports/frame-wrapper {:shape frame + :objects objects + :view-box vbox}]])) (mf/defc thumbnails-summary [{:keys [on-toggle-expand on-close total] :as props}] From 78d26c06170153720d9fb528c96da32466f5d67e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 6 Apr 2020 14:36:57 +0200 Subject: [PATCH 21/22] :fire: Remove unused line of code on gulpfile. --- frontend/gulpfile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index c9dafa83b..8fad08fdf 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -126,7 +126,6 @@ function templatePipeline(options) { const ts = Math.floor(new Date()); const locales = readLocales(); - // const icons = readSvgSprite(); const config = readConfig(); const tmpl = mustache({ From ecd3906c51bac293a190e1e9ffb20d7d79402acd Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 6 Apr 2020 14:48:16 +0200 Subject: [PATCH 22/22] :fire: Remove prn. --- frontend/src/uxbox/main/exports.cljs | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/uxbox/main/exports.cljs b/frontend/src/uxbox/main/exports.cljs index 0b169e310..fa6432ba5 100644 --- a/frontend/src/uxbox/main/exports.cljs +++ b/frontend/src/uxbox/main/exports.cljs @@ -54,7 +54,6 @@ (mf/defc shape-wrapper [{:keys [frame shape objects] :as props}] - (prn "shape-wrapper" frame) (when (and shape (not (:hidden shape))) (let [shape (geom/transform-shape frame shape)] (case (:type shape)