Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 00:10:11 -05:00
Code Issues Activity

✨ Improvements over cursor rendering

Browse source
This commit is contained in:
alonso.torres 2021-01-27 12:25:27 +01:00
parent 00ca9755be
commit 385c7274a3
4 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/gulpfile.js
View file

@ -131,10 +131,17 @@ gulp.task("scss", function() {
.pipe(gulp.dest(paths.output + "css/")); .pipe(gulp.dest(paths.output + "css/"));
}); });
gulp.task("svg:sprite", function() { gulp.task("svg:sprite:icons", function() {
return gulp.src(paths.resources + "images/icons/*.svg") return gulp.src(paths.resources + "images/icons/*.svg")
.pipe(gulpRename({prefix: "icon-"})) .pipe(gulpRename({prefix: "icon-"}))
.pipe(svgSprite({mode:{symbol: {inline: true}}})) .pipe(svgSprite({mode:{symbol: {inline: true, sprite: "icons.svg"}}}))
.pipe(gulp.dest(paths.output + "images/sprites/"));
});
gulp.task("svg:sprite:cursors", function() {
return gulp.src(paths.resources + "images/cursors/*.svg")
.pipe(gulpRename({prefix: "cursor-"}))
.pipe(svgSprite({mode:{symbol: {inline: true, sprite: "cursors.svg"}}}))
.pipe(gulp.dest(paths.output + "images/sprites/")); .pipe(gulp.dest(paths.output + "images/sprites/"));
}); });
@ -143,7 +150,7 @@ gulp.task("template:main", templatePipeline({
output: paths.output output: paths.output
})); }));
gulp.task("templates", gulp.series("svg:sprite", "template:main")); gulp.task("templates", gulp.series("svg:sprite:icons", "svg:sprite:cursors", "template:main"));
gulp.task("polyfills", function() { gulp.task("polyfills", function() {
return gulp.src(paths.resources + "polyfills/*.js") return gulp.src(paths.resources + "polyfills/*.js")

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

@ -130,14 +130,11 @@
grid-template-columns: 20px 1fr; grid-template-columns: 20px 1fr;
.viewport { .viewport {
cursor: var(--cursor);
grid-column: 1 / span 2; grid-column: 1 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
overflow: hidden; overflow: hidden;
&.drawing {
cursor: cell;
}
rect.selection-rect { rect.selection-rect {
fill: rgba(235, 215, 92, 0.1); fill: rgba(235, 215, 92, 0.1);
stroke: #000000; stroke: #000000;

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

@ -23,7 +23,8 @@
</head> </head>
<body> <body>
{{>../public/images/sprites/symbol/svg/sprite.symbol.svg}} {{>../public/images/sprites/symbol/icons.svg}}
{{>../public/images/sprites/symbol/cursors.svg}}
<section id="app" tabindex="1"></section> <section id="app" tabindex="1"></section>
<section id="modal"></section> <section id="modal"></section>
{{# manifest}} {{# manifest}}

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

@ -617,9 +617,12 @@
@alt? cur/duplicate @alt? cur/duplicate
:else cur/pointer-inner)] :else cur/pointer-inner)]
;; Chrome BUG: https://bugs.chromium.org/p/chromium/issues/detail?id=664066
;; Right now this is a performance concern but cannot find a better alternative
(when (not= @cursor new-cursor) (when (not= @cursor new-cursor)
(timers/raf (timers/raf
#(reset! cursor new-cursor)))))) #(dom/set-css-property (dom/get-root) "--cursor" new-cursor))
(reset! cursor new-cursor)))))
(mf/use-layout-effect (mf/deps layout) on-resize) (mf/use-layout-effect (mf/deps layout) on-resize)
(hooks/use-stream ms/keyboard-alt #(reset! alt? %)) (hooks/use-stream ms/keyboard-alt #(reset! alt? %))
@ -650,8 +653,7 @@
:view-box (format-viewbox vbox) :view-box (format-viewbox vbox)
:ref viewport-ref :ref viewport-ref
:class (when drawing-tool "drawing") :class (when drawing-tool "drawing")
:style {:cursor @cursor :style {:background-color (get options :background "#E8E9EA")}
:background-color (get options :background "#E8E9EA")}
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-click on-click :on-click on-click
:on-double-click on-double-click :on-double-click on-double-click