@helpscout/artboard - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/Artboard/Artboard.css.js

@@ -42,5 +42,4 @@ "use strict";
 });
-exports.ArtboardUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n    0 12px 40px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: background 200ms linear, transform 200ms ease;\n  will-change: transform;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n    0 12px 40px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: background 200ms linear, transform 200ms ease;\n  will-change: transform;\n\n  ",
+exports.ArtboardUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n    0 12px 40px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: background 200ms linear, transform 200ms ease;\n  will-change: transform;\n\n  ", ";\n\n  ", ";\n"], ["\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2),\n    0 12px 40px rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  transition: background 200ms linear, transform 200ms ease;\n  will-change: transform;\n\n  ",
     ";\n\n  ",
-    ";\n\n  ",
     ";\n"])), function (_a) {
@@ -54,6 +53,2 @@ var theme = _a.theme;
         "\n    pointer-events: none;\n    user-select: none;\n\n    * {\n      pointer-events: none !important;\n      user-select: none !important;\n    }\n  ";
-}, function (_a) {
-    var isMoving = _a.isMoving;
-    return isMoving &&
-        "\n    transition: none;\n  ";
 });
@@ -60,0 +55,0 @@ exports.ContentUI = fancy_1.default(Base_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n\n  .", " {\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n\n    ", " ", ";\n  }\n"], ["\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n\n  .", " {\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n\n    ",

dist/Artboard/Artboard.css.ts

@@ -80,8 +80,2 @@ import styled from '@helpscout/fancy'
   `};
-
-  ${({isMoving}) =>
-    isMoving &&
-    `
-    transition: none;
-  `};
 `
@@ -88,0 +82,0 @@

dist/Artboard/Artboard.d.ts

@@ -25,3 +25,3 @@ import * as React from 'react';
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: any): void;
+    shouldComponentUpdate(nextProps: any): boolean;
     getArtboardNameFromProps: (props: any) => any;
@@ -28,0 +28,0 @@ saveState: () => void;

dist/Artboard/Artboard.js

@@ -240,6 +240,9 @@ "use strict";
     };
-    Artboard.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps !== this.props) {
+    Artboard.prototype.shouldComponentUpdate = function (nextProps) {
+        if (nextProps !== this.props) {
             this.props.saveLocalState();
         }
+        if (nextProps.darkMode !== this.props.darkMode)
+            return true;
+        return false;
     };
@@ -246,0 +249,0 @@ Artboard.prototype.render = function () {

dist/Artboard/Artboard.KeyboardHints.js

@@ -32,3 +32,3 @@ "use strict";
                 React.createElement("div", null,
-                    React.createElement("strong", null, "Alt+D"),
+                    React.createElement("strong", null, "\u2325+D"),
                     ": Dark Mode"),
@@ -39,3 +39,3 @@ React.createElement("div", null,
                 React.createElement("div", null,
-                    React.createElement("strong", null, "Alt+Z"),
+                    React.createElement("strong", null, "\u2325+Z"),
                     ": Zoom Out"),
@@ -58,3 +58,3 @@ React.createElement("div", null,
                 React.createElement("div", null,
-                    React.createElement("strong", null, "Backspace"),
+                    React.createElement("strong", null, "\u232B"),
                     ": Clear Crosshairs"))));
@@ -65,6 +65,6 @@ };
 exports.KeyboardHints = KeyboardHints;
-var KeyboardHintsUI = fancy_1.default(Base_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  line-height: 1;\n  justify-content: center;\n  flex-direction: column;\n  opacity: 0.3;\n  pointer-events: none;\n  transform: translateZ(0);\n"], ["\n  align-items: center;\n  display: flex;\n  line-height: 1;\n  justify-content: center;\n  flex-direction: column;\n  opacity: 0.3;\n  pointer-events: none;\n  transform: translateZ(0);\n"])));
-var KeyboardHintsActionsUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  font-size: 10px;\n  justify-content: center;\n  margin-bottom: 5px;\n\n  * {\n    margin: 3px 5px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  font-size: 10px;\n  justify-content: center;\n  margin-bottom: 5px;\n\n  * {\n    margin: 3px 5px;\n  }\n"])));
+var KeyboardHintsUI = fancy_1.default(Base_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  line-height: 1;\n  justify-content: center;\n  flex-direction: column;\n  opacity: 0.3;\n  position: absolute;\n  left: 10px;\n  bottom: 0;\n  pointer-events: auto;\n  transform: translateZ(0);\n"], ["\n  align-items: center;\n  display: flex;\n  line-height: 1;\n  justify-content: center;\n  flex-direction: column;\n  opacity: 0.3;\n  position: absolute;\n  left: 10px;\n  bottom: 0;\n  pointer-events: auto;\n  transform: translateZ(0);\n"])));
+var KeyboardHintsActionsUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  font-size: 10px;\n  justify-content: center;\n  margin-bottom: 5px;\n  opacity: 0.5;\n  transition: opacity 200ms linear;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  * {\n    margin: 3px 5px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  font-size: 10px;\n  justify-content: center;\n  margin-bottom: 5px;\n  opacity: 0.5;\n  transition: opacity 200ms linear;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  * {\n    margin: 3px 5px;\n  }\n"])));
 exports.default = KeyboardHints;
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=Artboard.KeyboardHints.js.map

dist/Artboard/components/Artboard.Canvas.d.ts

 import * as React from 'react';
 export declare class Canvas extends React.PureComponent<any> {
-    getStyles: () => {
-        transform: string;
-    };
+    node: HTMLElement;
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: any): boolean;
+    updateNodeStylesFromProps: (nextProps: any) => void;
+    setNodeRef: (node: any) => any;
     render(): JSX.Element;
@@ -7,0 +9,0 @@ }

dist/Artboard/components/Artboard.Canvas.js

@@ -15,22 +15,2 @@ "use strict";
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -41,3 +21,4 @@ var React = require("react");
 var Artboard_CanvasContent_1 = require("./Artboard.CanvasContent");
-var GuideProvider_1 = require("../../GuideProvider");
+var Artboard_Content_1 = require("./Artboard.Content");
+var Artboard_GuideProvider_1 = require("./Artboard.GuideProvider");
 var Artboard_Guides_1 = require("./Artboard.Guides");
@@ -52,17 +33,37 @@ var Artboard_Resizer_1 = require("./Artboard.Resizer");
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getStyles = function () {
-            var _a = _this.props, posX = _a.posX, posY = _a.posY, zoomLevel = _a.zoomLevel;
-            return {
-                transform: "scale(" + zoomLevel + ") translate(" + posX + "px, " + posY + "px)",
-            };
+        _this.updateNodeStylesFromProps = function (nextProps) {
+            var isMoving = nextProps.isMoving, posX = nextProps.posX, posY = nextProps.posY, zoomLevel = nextProps.zoomLevel;
+            if (!_this.node)
+                return;
+            var transition = 'background 200ms linear, transform 200ms ease';
+            if (isMoving) {
+                transition = 'none';
+            }
+            _this.node.style.transform = "scale(" + zoomLevel + ") translate(" + posX + "px, " + posY + "px)";
+            _this.node.style.transition = transition;
         };
+        _this.setNodeRef = function (node) { return (_this.node = node); };
         return _this;
     }
+    Canvas.prototype.componentDidMount = function () {
+        this.updateNodeStylesFromProps(this.props);
+    };
+    Canvas.prototype.shouldComponentUpdate = function (nextProps) {
+        // Performantly re-render the UI
+        this.updateNodeStylesFromProps(nextProps);
+        if (nextProps.isPerformingAction !== this.props.isPerformingAction) {
+            return true;
+        }
+        if (nextProps.children !== this.props.children) {
+            return true;
+        }
+        return false;
+    };
     Canvas.prototype.render = function () {
-        var _a = this.props, children = _a.children, guides = _a.guides, padding = _a.padding, showGuides = _a.showGuides, rest = __rest(_a, ["children", "guides", "padding", "showGuides"]);
-        return (React.createElement(GuideProvider_1.default, { showGuide: showGuides },
-            React.createElement(Artboard_css_1.ArtboardUI, __assign({}, rest, { className: index_1.cx('ArtboardCanvas'), style: this.getStyles() }),
+        var _a = this.props, children = _a.children, isPerformingAction = _a.isPerformingAction;
+        return (React.createElement(Artboard_GuideProvider_1.default, null,
+            React.createElement(Artboard_css_1.ArtboardUI, { className: index_1.cx('ArtboardCanvas'), innerRef: this.setNodeRef, isPerformingAction: isPerformingAction },
                 React.createElement(Artboard_CanvasContent_1.default, null,
                     React.createElement(Artboard_Resizer_1.default, null,
-                        React.createElement(Artboard_css_1.ArtboardContentUI, { padding: padding },
+                        React.createElement(Artboard_Content_1.default, null,
                             React.createElement(Artboard_css_1.ArtboardBodyUI, null,
@@ -77,10 +78,8 @@ React.createElement(Artboard_BoxInspector_1.default, null,
 var mapStateToProps = function (state) {
-    var isPerformingAction = state.isPerformingAction, isMoving = state.isMoving, padding = state.padding, posX = state.posX, posY = state.posY, showGuides = state.showGuides, zoomLevel = state.zoomLevel;
+    var isPerformingAction = state.isPerformingAction, isMoving = state.isMoving, posX = state.posX, posY = state.posY, zoomLevel = state.zoomLevel;
     return {
         isPerformingAction: isPerformingAction,
         isMoving: isMoving,
-        padding: padding,
         posX: posX,
         posY: posY,
-        showGuides: showGuides,
         zoomLevel: zoomLevel,
@@ -87,0 +86,0 @@ };

dist/Artboard/components/Artboard.Guides.js

@@ -40,8 +40,9 @@ "use strict";
         if (Array.isArray(guides)) {
-            guidesMarkup = guides.map(function (Item, index) {
+            guidesMarkup = guides.map(function (item, index) {
                 var key = "guide-" + index;
-                if (React.isValidElement(Item)) {
-                    return React.cloneElement(Item, { key: key });
+                var props = item.props ? item.props : item;
+                if (typeof item === 'object') {
+                    return React.createElement(Guide_1.default, __assign({}, props, { key: key }));
                 }
-                return React.createElement(Guide_1.default, __assign({}, Item, { key: key }));
+                return null;
             });
@@ -48,0 +49,0 @@ }

dist/Crosshair/Crosshair.Line.d.ts

@@ -17,8 +17,12 @@ import * as React from 'react';
     };
+    node: HTMLElement;
+    labelNode: HTMLElement;
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: any): boolean;
     isX: () => boolean;
+    updateNodeStylesFromProps: (props: any) => void;
+    updateLabelValue: (value: any) => void;
     getComponent: () => any;
-    getValue: () => number;
-    getStyles: () => {
-        transform: string;
-    };
+    setNodeRef: (node: any) => any;
+    setLabelNodeRef: (node: any) => any;
     render(): JSX.Element;
@@ -25,0 +29,0 @@ }

dist/Crosshair/Crosshair.Line.js

@@ -40,7 +40,4 @@ "use strict";
         };
-        _this.getComponent = function () {
-            return _this.isX() ? LineXUI : LineYUI;
-        };
-        _this.getValue = function () {
-            var values = exports.getValueFromProps(_this.props);
+        _this.updateNodeStylesFromProps = function (props) {
+            var values = exports.getValueFromProps(props);
             var value;
@@ -53,29 +50,30 @@ if (_this.isX()) {
             }
-            return value;
-        };
-        _this.getStyles = function () {
-            var values = exports.getValueFromProps(_this.props);
-            var value;
-            if (_this.isX()) {
-                value = values.x;
-            }
-            else {
-                value = values.y;
-            }
             var transform = _this.isX()
                 ? "translateY(" + value + "px)"
                 : "translateX(" + value + "px)";
-            return {
-                transform: transform,
-            };
+            _this.node.style.transform = transform;
         };
+        // Disabled for now (For performance reasons)
+        _this.updateLabelValue = function (value) {
+            _this.labelNode.innerHTML = value + "px";
+        };
+        _this.getComponent = function () {
+            return _this.isX() ? LineXUI : LineYUI;
+        };
+        _this.setNodeRef = function (node) { return (_this.node = node); };
+        _this.setLabelNodeRef = function (node) { return (_this.labelNode = node); };
         return _this;
     }
+    Line.prototype.componentDidMount = function () {
+        this.updateNodeStylesFromProps(this.props);
+    };
+    Line.prototype.shouldComponentUpdate = function (nextProps) {
+        this.updateNodeStylesFromProps(nextProps);
+        return false;
+    };
     Line.prototype.render = function () {
         var _a = this.props, className = _a.className, color = _a.color, opacity = _a.opacity;
         var Component = this.getComponent();
-        return (React.createElement(Component, __assign({}, { className: className, color: color, opacity: opacity }, { style: this.getStyles() }),
-            React.createElement(LabelUI, null,
-                this.getValue(),
-                "px")));
+        return (React.createElement(Component, __assign({}, { className: className, color: color, opacity: opacity }, { innerRef: this.setNodeRef }),
+            React.createElement(LabelUI, { innerRef: this.setLabelNodeRef })));
     };
@@ -82,0 +80,0 @@ Line.defaultProps = {

dist/UI/ButtonControl/ButtonControl.js

@@ -68,5 +68,5 @@ "use strict";
 var ButtonWrapperUI = fancy_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 4px;\n"], ["\n  margin-bottom: 4px;\n"])));
-var LabelUI = fancy_1.default('label')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin: 0;\n  padding: 0;\n  text-align: center;\n"], ["\n  display: block;\n  margin: 0;\n  padding: 0;\n  text-align: center;\n"])));
+var LabelUI = fancy_1.default('label')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  line-height: 1;\n  margin: 0;\n  padding: 0;\n  text-align: center;\n"], ["\n  display: block;\n  line-height: 1;\n  margin: 0;\n  padding: 0;\n  text-align: center;\n"])));
 exports.default = ButtonControl;
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=ButtonControl.js.map

package.json

 {
   "name": "@helpscout/artboard",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A tool kit for React UI development and design",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

419153

increased by1.37%

Number of package files

374

increased by2.19%

Lines of code

8675

increased by0.84%

No dependency changes