ringside - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Change Log
 
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/rylnd/ringside/compare/v0.2.0...v1.0.0) (2018-12-14)
+
+
+
 <a name="0.2.0"></a>
@@ -7,0 +12,0 @@ # [0.2.0](https://github.com/rylnd/ringside/compare/v0.1.1...v0.2.0) (2017-12-20)

dist/index.d.ts

 export { default, default as Ringside } from './ringside';
+export { default as Position } from './position';
+export { default as Grid } from './grid';
+export { fitsInside, fitsOutside } from './fitting';

dist/index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ringside=e():t.ringside=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(1);e.default=n.default,e.Ringside=n.default},function(t,e,i){"use strict";var n=this&&this.__assign||Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++){e=arguments[i];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t};Object.defineProperty(e,"__esModule",{value:!0});var o=i(2),r=function(){function t(t,e,i,n){this.height=i,this.width=n,this.orientations=["top","right","bottom","left"],this.hAlignments=["start","center","end"],this.vAlignments=["top","middle","bottom"],this.innerBounds=o.ClientToDOM(t),this.outerBounds=o.ClientToDOM(e),this.topLane={name:"top",x:this.outerBounds.x,y:this.outerBounds.y,width:this.outerBounds.width,height:this.innerBounds.y-this.outerBounds.y},this.leftLane={name:"left",x:this.outerBounds.x,y:this.outerBounds.y,height:this.outerBounds.height,width:this.innerBounds.x-this.outerBounds.x},this.rightLane={name:"right",x:this.innerBounds.right,y:this.outerBounds.y,height:this.outerBounds.height,width:this.outerBounds.right-this.innerBounds.right},this.bottomLane={name:"bottom",x:this.outerBounds.x,y:this.innerBounds.bottom,height:this.outerBounds.bottom-this.innerBounds.bottom,width:this.outerBounds.width}}return t.prototype.top=function(){return this.positions("top")},t.prototype.bottom=function(){return this.positions("bottom")},t.prototype.right=function(){return this.positions("right")},t.prototype.left=function(){return this.positions("left")},t.prototype.lanes=function(){return[this.topLane,this.rightLane,this.bottomLane,this.leftLane]},t.prototype.positions=function(t){var e=this;return this.hAlignments.reduce(function(i,o){return e.vAlignments.reduce(function(i,r){var s=e.alignedPosition(t,o,r);return n({},i,(h={},h[o]=n({},i[o],(u={},u[r]=s,u)),h[r]=n({},i[r],(d={},d[o]=s,d)),h));var h,u,d},i)},{})},t.prototype.alignedPosition=function(t,e,i){var o=this.boundingBox(t,e),r=this.fitsBounds(o),s=this.alignInBounds(o,t,e,i);return n({},s,{fits:r})},t.prototype.boundingBox=function(t,e){var i=this.relativeLane(t,"center"),o=this.relativeProps(t),r=o.width,s=o.x,h=n({},i);return h[r]=this.boundingWidth(t,e),h[s]=this.boundingX(t,e,h[r]),h},t.prototype.boundingWidth=function(t,e){var i=this.relativeProps(t).width,n=this.relativeLane(t,e),o=this.innerBounds[i]+n[i];if("center"===e){return o-(o-this[i])}return o},t.prototype.boundingX=function(t,e,i){var n=this.relativeProps(t),o=n.width,r=n.x,s=n.xScale;return"start"===e&&s(1)<0||"end"===e&&s(1)>0?this.innerBounds[r]+this.innerBounds[o]-i:"center"===e?this.innerBounds[r]+(this.innerBounds[o]-this[o])/2:this.innerBounds[r]},t.prototype.fitsBounds=function(t){return this.height<=t.height&&this.width<=t.width&&this.outerBounds.left<=t.x&&this.outerBounds.top<=t.y&&this.outerBounds.right>=t.x+t.width&&this.outerBounds.bottom>=t.y+t.height},t.prototype.alignInBounds=function(t,e,i,n){var o=this.relativeProps(e),r=o.x,s=o.y;return h={height:this.height,width:this.width},h[r]=this.alignHorizontal(t,e,i),h[s]=this.alignVertical(t,e,n),h;var h},t.prototype.alignHorizontal=function(t,e,i){var n=this.relativeProps(e),o=n.width,r=n.x,s=n.xScale;return"start"===i&&s(1)<0||"end"===i&&s(1)>0?t[r]+t[o]-this[o]:"center"===i?t[r]+(t[o]-this[o])/2:t[r]},t.prototype.alignVertical=function(t,e,i){var n=this.relativeProps(e),o=n.height,r=n.y,s=n.yScale;return"bottom"===i&&s(1)<0||"top"===i&&s(1)>0?t[r]+t[o]-this[o]:"middle"===i?t[r]+(t[o]-this[o])/2:t[r]},t.prototype.relativeProp=function(t,e,i){return void 0===i&&(i=0),t[(this.lanes().map(function(t){return t.name}).indexOf(e)+t.length+i)%t.length]},t.prototype.relativeProps=function(t){var e=function(t){return t},i=function(t){return-t};return{height:this.relativeProp(["height","width"],t),width:this.relativeProp(["width","height"],t),x:this.relativeProp(["x","y"],t),y:this.relativeProp(["y","x"],t),xScale:this.relativeProp([e,e,i,i],t),yScale:this.relativeProp([i,e,e,i],t)}},t.prototype.relativeLane=function(t,e){var i={start:1,center:0,end:-1}[e];return this.relativeProp(this.lanes(),t,i)},t}();e.default=r},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.rectToDOMRect=function(t,e,i,n){return{x:t,y:e,height:i,width:n,top:e,left:t,bottom:e+i,right:t+n}},e.ClientToDOM=function(t){return e.rectToDOMRect(t.left,t.top,t.height,t.width)}}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3-scale")):"function"==typeof define&&define.amd?define(["d3-scale"],e):"object"==typeof exports?exports.ringside=e(require("d3-scale")):t.ringside=e(t["d3-scale"])}(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});!function(t){t[t.START=0]="START",t[t.CENTER=.5]="CENTER",t[t.END=1]="END"}(e.XAlignment||(e.XAlignment={}));!function(t){t[t.TOP=0]="TOP",t[t.MIDDLE=.5]="MIDDLE",t[t.BOTTOM=1]="BOTTOM"}(e.YAlignment||(e.YAlignment={}));!function(t){t[t.OUTER_LEFT=0]="OUTER_LEFT",t[t.INNER_LEFT=1]="INNER_LEFT",t[t.INNER_RIGHT=2]="INNER_RIGHT",t[t.OUTER_RIGHT=3]="OUTER_RIGHT"}(e.XBasis||(e.XBasis={}));!function(t){t[t.OUTER_TOP=0]="OUTER_TOP",t[t.INNER_TOP=1]="INNER_TOP",t[t.INNER_BOTTOM=2]="INNER_BOTTOM",t[t.OUTER_BOTTOM=3]="OUTER_BOTTOM"}(e.YBasis||(e.YBasis={}))},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.fullRect=function(t){var e=t.left,i=t.top,n=t.height,r=t.width;return{height:n,width:r,top:i,left:e,bottom:i+n,right:e+r}};var n=function(t){return[].concat.apply([],t)};e.product=function(t){return t.reduce(function(t,e){return n(t.map(function(t){return e.map(function(e){return t.concat([e])})}))},[[]])},e.enumValues=function(t){return Object.keys(t).map(function(e){return Number(t[e])}).filter(function(t){return!isNaN(t)})}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(5);e.default=n.default,e.Ringside=n.default;var r=i(6);e.Position=r.default;var o=i(7);e.Grid=o.default;var s=i(3);e.fitsInside=s.fitsInside,e.fitsOutside=s.fitsOutside},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(1);e.fitsInside=function(t,e){var i=n.fullRect(t),r=n.fullRect(e);return i.left>=r.left&&i.top>=r.top&&i.right<=r.right&&i.bottom<=r.bottom},e.fitsOutside=function(t,e){var i=n.fullRect(t),r=n.fullRect(e);return i.left<=r.left&&i.right<=r.left||i.top<=r.top&&i.bottom<=r.top||i.left>=r.right&&i.right>=r.right||i.top>=r.bottom&&i.bottom>=r.bottom}},function(t,e){t.exports=require("d3-scale")},function(t,e,i){"use strict";var n=this&&this.__assign||Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++){e=arguments[i];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t};Object.defineProperty(e,"__esModule",{value:!0});var r=i(2),o=i(0),s=i(1),u=i(3),a=function(){function t(t,e,i,n){this.height=i,this.width=n,this.grid=new r.Grid(t,e),this.innerBounds=s.fullRect(t),this.outerBounds=s.fullRect(e)}return t.prototype.positions=function(){var t=this;return s.product([s.enumValues(o.XBasis),s.enumValues(o.YBasis),s.enumValues(o.XAlignment),s.enumValues(o.YAlignment)]).map(function(e){var i=e[0],o=e[1],s=e[2],u=e[3],a=new r.Position(t.height,t.width,t.grid.xScale(i),t.grid.yScale(o),s,u),f=t.fits(a);return n({xBasis:i,yBasis:o,fits:f},a)})},t.prototype.fits=function(t){return u.fitsOutside(t,this.innerBounds)&&u.fitsInside(t,this.outerBounds)},t}();e.default=a},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(4),r=i(0),o=function(){function t(t,e,i,o,s,u){void 0===t&&(t=0),void 0===e&&(e=0),void 0===i&&(i=0),void 0===o&&(o=0),void 0===s&&(s=r.XAlignment.END),void 0===u&&(u=r.YAlignment.BOTTOM),this.height=t,this.width=e,this.originLeft=i,this.originTop=o,this.xAlign=s,this.yAlign=u,this.xScale=n.scaleLinear().domain([0,1]).range([0,e]),this.yScale=n.scaleLinear().domain([0,1]).range([0,t]),this.left=i-this.xScale(s),this.top=o-this.yScale(u)}return t}();e.default=o},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(4),r=i(0),o=i(1),s=function(){function t(t,e){this.inner=t,this.outer=e;var i=o.fullRect(t),s=o.fullRect(e);this.xScale=n.scaleLinear().domain([r.XBasis.OUTER_LEFT,r.XBasis.INNER_LEFT,r.XBasis.INNER_RIGHT,r.XBasis.OUTER_RIGHT]).range([s.left,i.left,i.right,s.right]),this.yScale=n.scaleLinear().domain([r.YBasis.OUTER_TOP,r.YBasis.INNER_TOP,r.YBasis.INNER_BOTTOM,r.YBasis.OUTER_BOTTOM]).range([s.top,i.top,i.bottom,s.bottom])}return t}();e.default=s}])});

dist/ringside.d.ts

@@ -1,34 +0,5 @@
-import { DOMRect, RectProps } from './types';
-export declare type Orientation = 'top' | 'left' | 'bottom' | 'right';
-export declare type HAlignment = 'start' | 'center' | 'end';
-export declare type VAlignment = 'top' | 'middle' | 'bottom';
-export interface Positioned extends Partial<RectProps> {
-    fits: boolean;
-}
-export interface Lane extends Partial<RectProps> {
-    name: Orientation;
-}
-export interface HPositionedSide {
-    start: Positioned;
-    center: Positioned;
-    end: Positioned;
-}
-export interface VPositionedSide {
-    top: Positioned;
-    middle: Positioned;
-    bottom: Positioned;
-}
-export interface PositionedSide {
-    top: HPositionedSide;
-    middle: HPositionedSide;
-    bottom: HPositionedSide;
-    start: VPositionedSide;
-    center: VPositionedSide;
-    end: VPositionedSide;
-}
+import { Grid } from './';
+import { Rectangle, FullRect, XAlignment, YAlignment, FittedPosition } from './types';
 export interface RingsideInterface {
-    top(): PositionedSide;
-    right(): PositionedSide;
-    bottom(): PositionedSide;
-    left(): PositionedSide;
+    positions(): FittedPosition[];
 }
@@ -38,30 +9,21 @@ declare class Ringside implements RingsideInterface {
     readonly width: number;
-    readonly topLane: Lane;
-    readonly rightLane: Lane;
-    readonly bottomLane: Lane;
-    readonly leftLane: Lane;
-    readonly innerBounds: DOMRect;
-    readonly outerBounds: DOMRect;
-    orientations: Orientation[];
-    hAlignments: HAlignment[];
-    vAlignments: VAlignment[];
-    constructor(innerBounds: ClientRect, outerBounds: ClientRect, height: number, width: number);
-    top(): PositionedSide;
-    bottom(): PositionedSide;
-    right(): PositionedSide;
-    left(): PositionedSide;
-    private lanes();
-    private positions(orientation);
-    private alignedPosition(orientation, hAlignment, vAlignment);
-    private boundingBox(orientation, alignment);
-    private boundingWidth(orientation, alignment);
-    private boundingX(orientation, alignment, boundingWidth);
-    private fitsBounds(bounds);
-    private alignInBounds(bounds, orientation, hAlignment, vAlignment);
-    private alignHorizontal(bounds, orientation, alignment);
-    private alignVertical(bounds, orientation, alignment);
-    private relativeProp(props, orientation, offset?);
-    private relativeProps(orientation);
-    private relativeLane(orientation, alignment);
+    readonly innerBounds: FullRect;
+    readonly outerBounds: FullRect;
+    readonly grid: Grid;
+    constructor(innerBounds: Rectangle, outerBounds: Rectangle, height: number, width: number);
+    positions(): {
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+        originLeft: number;
+        originTop: number;
+        xAlign: XAlignment;
+        yAlign: YAlignment;
+        xBasis: number;
+        yBasis: number;
+        fits: boolean;
+    }[];
+    private fits(position);
 }
 export default Ringside;

dist/types.d.ts

@@ -1,10 +0,41 @@
-export interface DOMRect extends ClientRect {
-    x: number;
-    y: number;
-}
-export interface RectProps {
+export interface Rectangle {
     height: number;
     width: number;
-    x: number;
-    y: number;
+    left: number;
+    top: number;
 }
+export interface FullRect extends Rectangle {
+    bottom: number;
+    right: number;
+}
+export declare enum XAlignment {
+    START = 0,
+    CENTER = 0.5,
+    END = 1,
+}
+export declare enum YAlignment {
+    TOP = 0,
+    MIDDLE = 0.5,
+    BOTTOM = 1,
+}
+export declare enum XBasis {
+    OUTER_LEFT = 0,
+    INNER_LEFT = 1,
+    INNER_RIGHT = 2,
+    OUTER_RIGHT = 3,
+}
+export declare enum YBasis {
+    OUTER_TOP = 0,
+    INNER_TOP = 1,
+    INNER_BOTTOM = 2,
+    OUTER_BOTTOM = 3,
+}
+export interface Position extends Rectangle {
+    xAlign: XAlignment;
+    yAlign: YAlignment;
+}
+export interface FittedPosition extends Position {
+    fits: boolean;
+    xBasis: XBasis;
+    yBasis: YBasis;
+}

dist/utils.d.ts

@@ -1,3 +0,5 @@
-import { DOMRect } from './types';
-export declare const rectToDOMRect: (x: number, y: number, height: number, width: number) => DOMRect;
-export declare const ClientToDOM: (rect: ClientRect) => DOMRect;
+import { Rectangle, FullRect } from './types';
+export declare const fullRect: (rectangle: Rectangle) => FullRect;
+export declare type ProductFn = <T>(vectors: T[][]) => T[][];
+export declare const product: ProductFn;
+export declare const enumValues: (e: any) => number[];

package.json

 {
   "name": "ringside",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Positions a rectangle between inner and outer bounds",
@@ -40,2 +40,3 @@ "main": "dist/index.js",
     "browserify": "^14.4.0",
+    "d3-scale-chromatic": "^1.3.0",
     "delete-empty": "^1.0.1",
@@ -47,3 +48,3 @@ "dts-bundle": "^0.7.3",
     "react-dom": "^16.2.0",
-    "standard-version": "^4.2.0",
+    "standard-version": "^4.4.0",
     "ts-jest": "^20.0.10",
@@ -60,3 +61,4 @@ "ts-loader": "^2.3.3",
   "dependencies": {
-    "d3-scale": "^1.0.7"
+    "@types/d3-scale": "^2.0.1",
+    "d3-scale": "^2.1.0"
   },
@@ -63,0 +65,0 @@ "repository": {

README.md

 # ringside
 
-Determines fit and positioning of a rectangle within inner and outer bounds.
+A library that determines the fit and positioning of a rectangle relative to inner and outer bounds.
+
+## Installation
+
+```bash
+npm install ringside
+```
+
+## Usage
+
+Here's how you might generate the positioning for a tooltip:
+
+```jsx
+import Ringside from 'ringside';
+
+// define our target tooltip size
+const tooltipSize = {
+  height: 100,
+  width: 200
+};
+
+// grab our target element and its container
+const container = document.querySelector('.container');
+const target = container.querySelector('.target');
+
+const ringside = new Ringside(
+  target.getBoundingClientRect(),     // target bounds
+  container.getBoundingClientRect(),  // container bounds
+  tooltipSize.height,
+  tooltipSize.width
+);
+
+// select all positions that will fit
+const possiblePositions = ringside
+  .positions()
+  .filter(position => position.fits);
+
+// select a position from those that fit
+const [position] = possiblePositions;
+
+// and use it!
+const tooltipPosition = {
+  top: position.top,
+  left: position.left,
+  height: tooltipSize.height,
+  width: tooltipSize.width
+};
+```
+
+## Development
+
+```bash
+# install packages
+npm install
+
+# run the storybook server
+npm run storybook
+
+# run tests
+npm test
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135312

increased by657.58%

Number of package files

13

increased by30%

Lines of code

3712

increased by3435.24%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

64

increased by1500%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

22

increased by4.76%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/d3-scale@^2.0.1

• + Added@types/d3-scale@2.2.10(transitive)

• + Added@types/d3-time@1.1.4(transitive)

• + Addedd3-scale@2.2.2(transitive)

• - Removedd3-scale@1.0.7(transitive)

• Updatedd3-scale@^2.1.0