Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-05 03:21:26 -05:00
Code Issues Activity

Merge pull request #155 from uxbox/20/view-application

Browse source 
View Application (initial version)
This commit is contained in:
Andrey Antukh 2020-04-06 17:51:32 +02:00 • committed by GitHub
commit 5c13b03b3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 1547 additions and 759 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/resources/migrations/0003.projects.sql
View file

@ -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,

2
backend/src/uxbox/services/init.clj
View file

@ -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

20
backend/src/uxbox/services/queries/files.clj
View file

@ -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

40
backend/src/uxbox/services/queries/projects.clj
View file

@ -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))

6
backend/src/uxbox/services/queries/recent_files.clj
View file

@ -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

67
backend/src/uxbox/services/queries/view.clj Normal file
View file

@ -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

4
frontend/deps.edn
View file

@ -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-3"}
}
:aliases
{:dev

5
frontend/externs/main.txt Normal file
View file

@ -0,0 +1,5 @@
getBrowserEvent
viewBox
baseVal
width
height

98
frontend/gulpfile.js
View file

@ -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,10 @@ function templatePipeline(options) {
const ts = Math.floor(new Date());
const locales = readLocales();
const icons = readSvgSprite();
const config = readConfig();
const tmpl = mustache({
ts: ts,
ic: icons,
config: JSON.stringify(config),
translations: JSON.stringify(locales),
});
@ -155,7 +147,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 +155,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 +179,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 +214,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 +229,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"
));

10
frontend/package-lock.json generated
View file

@ -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",
@ -4689,6 +4694,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",

2
frontend/package.json
View file

@ -29,6 +29,8 @@
},
"dependencies": {
"date-fns": "^2.11.1",
"mousetrap": "^1.6.5",
"randomcolor": "^0.5.4",
"react": "^16.13.1",
"react-color": "^2.18.0",
"react-dnd": "^10.0.2",

3
frontend/resources/images/icons/full-screen.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500.00001" width="500" height="500">
<path d="M449.67773 20c-9.59809 3.53351-14.43153 13.472828-22.44921 19.304688-36.68366 35.782049-72.17331 72.786642-109.5879 107.818362-.76612-28.84172-.67096-57.696805-.96874-86.544925h-47.55274V231.42383h170.84375v-47.55664c-28.84878-.29635-57.70268-.19723-86.54492-.97071 41.14084-44.14516 85.49381-85.257142 126.57031-129.404292.3673-8.154531-8.63701-11.847784-12.75195-17.839844-5.42547-5.6539-10.9029-11.427284-17.5586-15.652344zM60.037109 268.57617v47.55664c28.84878.29635 57.702691.19723 86.544921.97071-41.14082 44.14516-85.493811 85.25714-126.570311 129.40429-.3673 8.15453 8.637013 11.84779 12.751953 17.83985 5.42547 5.6539 10.902894 11.42728 17.558594 15.65234 9.59809-3.53351 14.431538-13.47283 22.449218-19.30469 36.683666-35.78205 72.173316-72.78663 109.587896-107.81836.76612 28.84173.67096 57.6968.96874 86.54493h47.55274V268.57617H60.037109z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 966 B

5
frontend/resources/styles/main.scss
View file

@ -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

43
frontend/resources/styles/main/layouts/not-found.scss Normal file
View file

@ -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;
}
}

28
frontend/resources/styles/main/layouts/viewer.scss Normal file
View file

@ -0,0 +1,28 @@
.viewer-layout {
display: grid;
grid-template-rows: 40px auto;
grid-template-columns: 1fr;
&.fullscreen {
.viewer-header {
opacity: 0;
&:hover {
opacity: 1;
}
}
.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;
}
}

224
frontend/resources/styles/main/partials/viewer-header.scss Normal file
View file

@ -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;
}
}
}
}

173
frontend/resources/styles/main/partials/viewer-thumbnails.scss Normal file
View file

@ -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;
}
}
}

25
frontend/resources/styles/main/partials/viewer.scss Normal file
View file

@ -0,0 +1,25 @@
.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;
flex-flow: wrap;
svg {
transform-origin: center;
}
}

25
frontend/resources/styles/main/partials/workspace-bar.scss
View file

@ -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;

45
frontend/resources/styles/view.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// 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';

250
frontend/resources/styles/view/layouts/main-layout.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}

7
frontend/resources/templates/index.mustache
View file

@ -4,11 +4,12 @@
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>UXBOX - The Open-Source prototyping tool</title>
<link href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link href="/css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/favicon.png" />
<!-- <link rel="preload" as="image" type="image/svg+xml" -->
<!-- href="/images/svg-sprite/symbol/svg/sprite.symbol.svg" /> -->
</head>
<body>
{{& ic }}
<section id="app" tabindex="1"></section>
<section id="loader"></section>
<section id="modal"></section>
@ -16,7 +17,7 @@
window.uxboxConfig = JSON.parse({{& config }});
window.uxboxTranslations = JSON.parse({{& translations }});
</script>
<script src="js/main.js?ts={{& ts}}"></script>
<script src="/js/main.js?ts={{& ts}}"></script>
<script>uxbox.main.init()</script>
</body>
</html>

22
frontend/resources/templates/view.mustache Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>UXBOX View</title>
<link href="/css/view.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link rel="icon" href="/images/favicon.png" />
</head>
<body>
<section id="app" tabindex="1"></section>
<section id="loader"></section>
<section id="modal"></section>
<script>
window.uxboxConfig = JSON.parse({{& config }});
window.uxboxTranslations = JSON.parse({{& translations }});
</script>
<script src="/js/shared.js?ts={{& ts}}"></script>
<script src="/js/view.js?ts={{& ts}}"></script>
<script>uxbox.view.init()</script>
</body>
</html>

16
frontend/shadow-cljs.edn
View file

@ -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}}}}}

5
frontend/src/uxbox/builtins/icons.clj
View file

@ -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 <niwi@niwi.nz>
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; 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}]])))

1
frontend/src/uxbox/builtins/icons.cljs
View file

@ -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))

2
frontend/src/uxbox/main.cljs
View file

@ -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)))))

141
frontend/src/uxbox/main/data/viewer.cljs Normal file
View file

@ -0,0 +1,141 @@
;; 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.main.store :as st]
[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))))
;; --- Shortcuts
(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)})

100
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -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)))))
@ -2263,63 +2263,37 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(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))})
(def initialize-shortcuts
(letfn [(initialize [sink]
(let [handler (KeyboardShortcutHandler. js/document)]
;; 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)))))))
{"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)
"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)
"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)
"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))})

41
frontend/src/uxbox/main/exports.cljs
View file

@ -7,11 +7,12 @@
(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]
[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]
@ -52,19 +53,19 @@
[:& group-shape {:shape shape :children children}]))
(mf/defc shape-wrapper
[{:keys [shape objects] :as props}]
[{:keys [frame shape objects] :as props}]
(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/group-shape shape-wrapper) {:shape shape :shape-wrapper shape-wrapper :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))
@ -81,7 +82,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)
@ -90,15 +91,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)))

13
frontend/src/uxbox/main/geom.cljs
View file

@ -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))))

4
frontend/src/uxbox/main/refs.cljs
View file

@ -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)))

3
frontend/src/uxbox/main/store.cljs
View file

@ -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)

112
frontend/src/uxbox/main/ui.cljs
View file

@ -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 <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui
(:require
@ -17,21 +16,22 @@
[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]
[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]]
[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
@ -50,6 +50,9 @@
["/profile" :settings-profile]
["/password" :settings-password]]
["/view/:page-id/:index" :viewer]
["/not-found" :not-found]
(when *assert*
["/debug/icons-preview" :debug-icons-preview])
@ -79,54 +82,67 @@
[{: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-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)]
(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)
(: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}])
nil)))
(when route
[:& app-container {:route route :key (get-in route [:data :name])}])))
;; --- Error Handling

4
frontend/src/uxbox/main/ui/components/context_menu.cljs
View file

@ -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

13
frontend/src/uxbox/main/ui/components/dropdown.cljs
View file

@ -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)))

51
frontend/src/uxbox/main/ui/components/error.cljs
View file

@ -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))

2
frontend/src/uxbox/main/ui/dashboard/grid.cljs
View file

@ -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})

67
frontend/src/uxbox/main/ui/hooks.cljs Normal file
View file

@ -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 S.L
(ns uxbox.main.ui.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]
[uxbox.util.dom :as dom]
[uxbox.util.webapi :as wapi]
["mousetrap" :as mousetrap])
(:import goog.events.EventType))
(defn use-rxsub
[ob]
(let [[state reset-state!] (mf/useState @ob)]
(mf/useEffect
(fn []
(let [sub (rx/subscribe ob #(reset-state! %))]
#(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)
(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]))

24
frontend/src/uxbox/main/ui/not_found.cljs Normal file
View file

@ -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"]]]])

25
frontend/src/uxbox/main/ui/react_hooks.cljs
View file

@ -1,25 +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.react-hooks
"A collection of general purpose react hooks."
(:require
[beicon.core :as rx]
[rumext.alpha :as mf]))
(defn use-rxsub
[ob]
(let [[state reset-state!] (mf/useState @ob)]
(mf/useEffect
(fn []
(let [sub (rx/subscribe ob #(reset-state! %))]
#(rx/cancel! sub)))
#js [ob])
state))

46
frontend/src/uxbox/main/ui/shapes/frame.cljs
View file

@ -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)}])])))

20
frontend/src/uxbox/main/ui/shapes/shape.cljs
View file

@ -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))

106
frontend/src/uxbox/main/ui/viewer.cljs Normal file
View file

@ -0,0 +1,106 @@
;; 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 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.hooks :as hooks]
[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 [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
(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)
(hooks/use-shortcuts dv/shortcuts)
[: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
(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! (dv/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}])))

88
frontend/src/uxbox/main/ui/viewer/header.cljs Normal file
View file

@ -0,0 +1,88 @@
;; 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 fullscreen? toggle-fullscreen] :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"
:on-click toggle-fullscreen}
i/full-screen]]]))

159
frontend/src/uxbox/main/ui/viewer/thumbnails.cljs Normal file
View file

@ -0,0 +1,159 @@
;; 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/memo]}
[{:keys [objects frame zoom] :or {zoom 1} :as props}]
(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)
vbox (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-wrapper {:shape frame
:objects objects
:view-box vbox}]]))
(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)
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}))
(when @expanded?
(on-close)))]
[:& dropdown' {:on-close on-close
:container container
:show true}
[: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))}]
[:& 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)}])]]]))

9
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -19,6 +19,7 @@
[uxbox.main.streams :as ms]
[uxbox.main.ui.confirm]
[uxbox.main.ui.keyboard :as kbd]
[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]]
@ -111,21 +112,19 @@
(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))
(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

2
frontend/src/uxbox/main/ui/workspace/context_menu.cljs
View file

@ -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

2
frontend/src/uxbox/main/ui/workspace/grid.cljs
View file

@ -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)

74
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -22,13 +22,14 @@
[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]))
;; --- 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)
@ -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]]))

10
frontend/src/uxbox/main/ui/workspace/rules.cljs
View file

@ -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
@ -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)

2
frontend/src/uxbox/main/ui/workspace/sidebar.cljs
View file

@ -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

6
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -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))]

2
frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs
View file

@ -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)]

2
frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
View file

@ -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))

6
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -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)))

6
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -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]]
@ -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)

3
frontend/src/uxbox/util/dom.cljs
View file

@ -157,3 +157,6 @@
(let [data-string (-> event .-dataTransfer (.getData "text"))]
(ts/decode data-string)))
(defn fullscreen?
[]
(boolean (.-fullscreenElement js/document)))

19
frontend/src/uxbox/util/router.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
(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

6
frontend/src/uxbox/util/webapi.cljs
View file

@ -82,4 +82,10 @@
(catch :default e
nil)))))))
(defn request-fullscreen
[el]
(.requestFullscreen el))
(defn exit-fullscreen
[]
(.exitFullscreen js/document))

4
frontend/vendor/cljsjs/react.cljs vendored
View file

@ -1,4 +0,0 @@
(ns cljsjs.react
(:require ["react" :as react]))
(goog/exportSymbol "React" react)

4
frontend/vendor/cljsjs/react_dom.cljs vendored
View file

@ -1,4 +0,0 @@
(ns cljsjs.react-dom
(:require ["react-dom" :as rdom]))
(goog/exportSymbol "ReactDOM" rdom)