diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js
index 20632db9a..dd8922be6 100644
--- a/frontend/gulpfile.js
+++ b/frontend/gulpfile.js
@@ -131,10 +131,17 @@ gulp.task("scss", function() {
.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")
.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/"));
});
@@ -143,7 +150,7 @@ gulp.task("template:main", templatePipeline({
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() {
return gulp.src(paths.resources + "polyfills/*.js")
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 3861a5d33..581748154 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -130,14 +130,11 @@
grid-template-columns: 20px 1fr;
.viewport {
+ cursor: var(--cursor);
grid-column: 1 / span 2;
grid-row: 1 / span 2;
overflow: hidden;
- &.drawing {
- cursor: cell;
- }
-
rect.selection-rect {
fill: rgba(235, 215, 92, 0.1);
stroke: #000000;
diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache
index 7011dce99..1000cd746 100644
--- a/frontend/resources/templates/index.mustache
+++ b/frontend/resources/templates/index.mustache
@@ -23,7 +23,8 @@
- {{>../public/images/sprites/symbol/svg/sprite.symbol.svg}}
+ {{>../public/images/sprites/symbol/icons.svg}}
+ {{>../public/images/sprites/symbol/cursors.svg}}
{{# manifest}}
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 04c2b48cf..1702a79da 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -617,9 +617,12 @@
@alt? cur/duplicate
: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)
(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)
(hooks/use-stream ms/keyboard-alt #(reset! alt? %))
@@ -650,8 +653,7 @@
:view-box (format-viewbox vbox)
:ref viewport-ref
:class (when drawing-tool "drawing")
- :style {:cursor @cursor
- :background-color (get options :background "#E8E9EA")}
+ :style {:background-color (get options :background "#E8E9EA")}
:on-context-menu on-context-menu
:on-click on-click
:on-double-click on-double-click