ag-common 0.0.482 → 0.0.484

package/dist/ui/components/TreeChart/base.js

@@ -49,6 +49,13 @@ const Node = styled_1.default.div `
   display: flex;
   flex-flow: column;
   height: min-content;
+  overflow: hidden;
+  &[data-leaf='true'] {
+    width: 100%;
+    height: 100%;
+    min-height: 1rem;
+    min-width: 1rem;
+  }
 `;
 const Title = styled_1.default.div `
   color: white;
@@ -60,25 +67,22 @@ const Title = styled_1.default.div `
 `;
 const render = ({ n, depth, head, headDim, tnd, }) => {
     var _a;
-    let width = 0;
-    let height = 0;
     const leaf = n.children.length === 0;
     const sizeMult = n.size / head.size;
-    width = Math.floor(headDim.width * sizeMult) - 6; //6 = padding+margins
-    if (n.children.length === 0) {
-        height = Math.floor(headDim.height * sizeMult);
-    }
+    const biggerDim = Math.max(headDim.width, headDim.height);
+    const nodeSize = Math.floor(biggerDim * sizeMult).toString();
     const title = ((_a = tnd.titleFn) === null || _a === void 0 ? void 0 : _a.call(tnd, {
         path: n.name,
         pathCount: n.size,
         fullCount: head.size,
     })) || `${n.name} (${n.size}/${head.size})`;
-    return (react_1.default.createElement(Node, { "data-treenode": true, style: Object.assign({ backgroundColor: (0, styles_1.getColourWheel)(depth) }, (leaf && {
-            width: width ? width + 'px' : '100%',
-            height: height ? height + 'px' : '100%',
+    return (react_1.default.createElement(Node, { "data-treenode": true, "data-leaf": leaf.toString(), style: Object.assign({ backgroundColor: (0, styles_1.getColourWheel)(depth) }, (leaf &&
+            nodeSize && {
+            width: nodeSize + 'px',
+            height: nodeSize + 'px',
         })), key: n.name, "data-ch": n.children.length, "data-size": n.size, title: title },
         n.name && react_1.default.createElement(Title, null, n.name),
-        react_1.default.createElement(NodeChildren, { "data-type": "nc" }, n.children.map((c) => render({ n: c, depth: depth + 1, head, headDim, tnd })))));
+        n.children.length > 0 && (react_1.default.createElement(NodeChildren, { "data-type": "nc" }, n.children.map((c) => render({ n: c, depth: depth + 1, head, headDim, tnd }))))));
 };
 const TreeChart = (tnd) => {
     const raw = (0, helpers_1.convertToRaw)({ tnd });

package/dist/ui/styles/common.d.ts

@@ -1,26 +1,20 @@
 /// <reference types="react" />
 /** function that returns css that gives a text outline drop shadow.
- * outlinecolour default='white'
- * size default = 1px
+ * @param outlineColour default='white'
+ * @param sizePx default = 1px
  */
-export declare const HardOutline: (outlineColour?: string, size?: number) => import("@emotion/react").SerializedStyles;
+export declare const HardOutline: (outlineColour?: string, sizePx?: number) => import("@emotion/react").SerializedStyles;
+/** disable user text selection */
 export declare const NoTextSelect: import("@emotion/react").SerializedStyles;
+/** enable text overflow
+ * @param lines number of lines before overflow
+ */
 export declare const TextOverflowEllipsis: (lines: number) => import("@emotion/react").SerializedStyles;
-export declare const CssTransparentBlock: import("@emotion/react").SerializedStyles;
-export declare const FadeBottom: ({ height }: {
-    height: string;
-}) => import("@emotion/react").SerializedStyles;
-export declare const Card: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** stop dragging of element */
 export declare const noDrag: {
     draggable: boolean;
     onDragStart: React.DragEventHandler<HTMLDivElement>;
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;
 };
-export declare const FullScreenPage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** apply bounce effect given a condition */
 export declare const bounce: (bounceattr: string) => import("@emotion/react").SerializedStyles;

package/dist/ui/styles/common.js

@@ -1,18 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bounce = exports.FullScreenPage = exports.noDrag = exports.Card = exports.FadeBottom = exports.CssTransparentBlock = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutline = void 0;
+exports.bounce = exports.noDrag = exports.TextOverflowEllipsis = exports.NoTextSelect = exports.HardOutline = void 0;
 const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const colours_1 = require("./colours");
 /** function that returns css that gives a text outline drop shadow.
- * outlinecolour default='white'
- * size default = 1px
+ * @param outlineColour default='white'
+ * @param sizePx default = 1px
  */
-const HardOutline = (outlineColour = 'white', size = 1) => {
-    const px = `${size}px`;
+const HardOutline = (outlineColour = 'white', sizePx = 1) => {
+    const px = `${sizePx}px`;
     return (0, react_1.css) `
     filter: drop-shadow(${px} ${px} 0px ${outlineColour})
       drop-shadow(-${px} ${px} 0px ${outlineColour})
@@ -21,6 +16,7 @@ const HardOutline = (outlineColour = 'white', size = 1) => {
   `;
 };
 exports.HardOutline = HardOutline;
+/** disable user text selection */
 exports.NoTextSelect = (0, react_1.css) `
   user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
@@ -28,6 +24,9 @@ exports.NoTextSelect = (0, react_1.css) `
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 `;
+/** enable text overflow
+ * @param lines number of lines before overflow
+ */
 const TextOverflowEllipsis = (lines) => (0, react_1.css) `
   display: -webkit-box;
   -webkit-line-clamp: ${lines};
@@ -36,52 +35,7 @@ const TextOverflowEllipsis = (lines) => (0, react_1.css) `
   text-overflow: ellipsis;
 `;
 exports.TextOverflowEllipsis = TextOverflowEllipsis;
-exports.CssTransparentBlock = (0, react_1.css) `
-  background-color: rgba(150, 150, 150, 0.5);
-  border-radius: 3px;
-  font-weight: 600;
-  color: ${colours_1.colours.mainLight};
-`;
-const FadeBottom = ({ height }) => (0, react_1.css) `
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: ${height};
-    background: -webkit-linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
-    background-image: -moz-linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
-    background-image: -o-linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
-    background-image: linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
-    background-image: -ms-linear-gradient(
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
-  }
-`;
-exports.FadeBottom = FadeBottom;
-exports.Card = styled_1.default.div `
-  background-color: white;
-  margin: 0.5rem;
-
-  position: relative;
-  border-radius: 0.5rem;
-  max-width: 40rem;
-  padding: 1rem;
-  border: solid 2px ${colours_1.colours.lighter};
-`;
+/** stop dragging of element */
 exports.noDrag = {
     draggable: false,
     onDragStart: (e) => {
@@ -93,15 +47,7 @@ exports.noDrag = {
         e.stopPropagation();
     },
 };
-exports.FullScreenPage = styled_1.default.div `
-  display: flex;
-  width: 100%;
-  flex-grow: 1;
-  flex-flow: column;
-  overflow: hidden;
-  align-content: flex-start;
-  align-items: flex-start;
-`;
+/** apply bounce effect given a condition */
 const bounce = (bounceattr) => (0, react_1.css) `
   transition:
     opacity 0.2s ease,

package/dist/ui/styles/media.d.ts

@@ -1,7 +1,11 @@
 export declare const vSmallScreenPx = 500;
 export declare const smallScreenPx = 1024;
 export declare const bigScreenPx = 2000;
+/** use in media query: @ media ${condition} */
 export declare const vSmallScreen: string;
+/** use in media query: @ media ${condition} */
 export declare const smallScreen: string;
+/** use in media query: @ media ${condition} */
 export declare const bigScreen: string;
+/** use in media query: @ media ${condition} */
 export declare const vBigScreen: string;

package/dist/ui/styles/media.js

@@ -4,7 +4,11 @@ exports.vBigScreen = exports.bigScreen = exports.smallScreen = exports.vSmallScr
 exports.vSmallScreenPx = 500;
 exports.smallScreenPx = 1024;
 exports.bigScreenPx = 2000;
+/** use in media query: @ media ${condition} */
 exports.vSmallScreen = `(max-width: ${exports.vSmallScreenPx}px)`;
+/** use in media query: @ media ${condition} */
 exports.smallScreen = `(max-width: ${exports.smallScreenPx}px)`;
+/** use in media query: @ media ${condition} */
 exports.bigScreen = `(min-width: ${exports.smallScreenPx}px)`;
+/** use in media query: @ media ${condition} */
 exports.vBigScreen = `(min-width: ${exports.bigScreenPx}px)`;

package/dist/ui/styles/standaloneStyles.d.ts

@@ -2,9 +2,7 @@
 export declare const SOBase: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SOBR: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/ui/styles/standaloneStyles.js

@@ -5,9 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SOA = exports.SOCenter = exports.SOP = exports.SOB = exports.SOBR = exports.SOBase = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
-const common_1 = require("./common");
 const media_1 = require("./media");
-exports.SOBase = (0, styled_1.default)(common_1.FullScreenPage) `
+exports.SOBase = styled_1.default.div `
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  flex-flow: column;
+  overflow: hidden;
+  align-content: flex-start;
+  align-items: flex-start;
+
   > h1,
   h2,
   > p {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.482",
+  "version": "0.0.484",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",