UNPKG

@niuee/board

Version:

<h1 align="center"> board </h1> <p align="center"> board supercharges your html canvas element giving it the capabilities to pan, zoom, rotate, and much more. </p> <p align="center"> <a href="https://www.npmjs.com/package/@niuee/board">

3 lines (2 loc) 10.3 kB
import{PointCal}from"point2point";function isValidZoomLevelLimits(zoomLevelLimits){return void 0===zoomLevelLimits||!(void 0!==zoomLevelLimits.min&&void 0!==zoomLevelLimits.max&&zoomLevelLimits.min>zoomLevelLimits.max)}function clampZoomLevel(zoomLevel,zoomLevelLimits){return zoomLevelWithinLimits(zoomLevel,zoomLevelLimits)||void 0===zoomLevelLimits||(zoomLevelLimits.max&&(zoomLevel=Math.min(zoomLevelLimits.max,zoomLevel)),zoomLevelLimits.min&&(zoomLevel=Math.max(zoomLevelLimits.min,zoomLevel))),zoomLevel}function zoomLevelWithinLimits(zoomLevel,zoomLevelLimits){return void 0===zoomLevelLimits||!(zoomLevel<=0||void 0!==zoomLevelLimits&&(void 0!==zoomLevelLimits.max&&zoomLevelLimits.max<zoomLevel||void 0!==zoomLevelLimits.min&&zoomLevelLimits.min>zoomLevel))}function convert2WorldSpaceWRT(targetPosition,interestPoint,viewPortWidth,viewPortHeight,cameraZoomLevel,cameraRotation){let cameraFrameCenter={x:viewPortWidth/2,y:viewPortHeight/2},delta2Point=PointCal.subVector(interestPoint,cameraFrameCenter);return delta2Point=PointCal.multiplyVectorByScalar(delta2Point,1/cameraZoomLevel),delta2Point=PointCal.rotatePoint(delta2Point,cameraRotation),PointCal.addVector(targetPosition,delta2Point)}function convert2WorldSpace(point,viewPortWidth,viewPortHeight,cameraPosition,cameraZoomLevel,cameraRotation){let cameraFrameCenter={x:viewPortWidth/2,y:viewPortHeight/2},delta2Point=PointCal.subVector(point,cameraFrameCenter);return delta2Point=PointCal.multiplyVectorByScalar(delta2Point,1/cameraZoomLevel),delta2Point=PointCal.rotatePoint(delta2Point,cameraRotation),PointCal.addVector(cameraPosition,delta2Point)}function convert2WorldSpaceAnchorAtCenter(point,cameraPosition,cameraZoomLevel,cameraRotation){const scaledBack=PointCal.multiplyVectorByScalar(point,1/cameraZoomLevel),rotatedBack=PointCal.rotatePoint(scaledBack,cameraRotation);return PointCal.addVector(rotatedBack,cameraPosition)}function convert2ViewPortSpaceAnchorAtCenter(point,cameraPosition,cameraZoomLevel,cameraRotation){const withOffset=PointCal.subVector(point,cameraPosition),scaled=PointCal.multiplyVectorByScalar(withOffset,cameraZoomLevel);return PointCal.rotatePoint(scaled,-cameraRotation)}function invertFromWorldSpace(point,viewPortWidth,viewPortHeight,cameraPosition,cameraZoomLevel,cameraRotation){let cameraFrameCenter={x:viewPortWidth/2,y:viewPortHeight/2},delta2Point=PointCal.subVector(point,cameraPosition);return delta2Point=PointCal.rotatePoint(delta2Point,-cameraRotation),delta2Point=PointCal.multiplyVectorByScalar(delta2Point,cameraZoomLevel),PointCal.addVector(cameraFrameCenter,delta2Point)}function pointIsInViewPort(point,viewPortWidth,viewPortHeight,cameraPosition,cameraZoomLevel,cameraRotation){const pointInCameraFrame=invertFromWorldSpace(point,viewPortWidth,viewPortHeight,cameraPosition,cameraZoomLevel,cameraRotation);return!(pointInCameraFrame.x<0||pointInCameraFrame.x>viewPortWidth||pointInCameraFrame.y<0||pointInCameraFrame.y>viewPortHeight)}function convertDeltaInViewPortToWorldSpace(delta,cameraZoomLevel,cameraRotation){return PointCal.multiplyVectorByScalar(PointCal.rotatePoint(delta,cameraRotation),1/cameraZoomLevel)}function convertDeltaInWorldToViewPortSpace(delta,cameraZoomLevel,cameraRotation){return PointCal.multiplyVectorByScalar(PointCal.rotatePoint(delta,-cameraRotation),cameraZoomLevel)}function cameraPositionToGet(pointInWorld,toPointInViewPort,cameraZoomLevel,cameraRotation){const scaled=PointCal.multiplyVectorByScalar(toPointInViewPort,1/cameraZoomLevel),rotated=PointCal.rotatePoint(scaled,cameraRotation);return PointCal.subVector(pointInWorld,rotated)}function withinBoundaries(point,boundaries){if(null==boundaries)return!0;let leftSide=!1,rightSide=!1,topSide=!1,bottomSide=!1;return(null==boundaries.max||null==boundaries.max.x||point.x<=boundaries.max.x)&&(rightSide=!0),(null==boundaries.min||null==boundaries.min.x||point.x>=boundaries.min.x)&&(leftSide=!0),(null==boundaries.max||null==boundaries.max.y||point.y<=boundaries.max.y)&&(topSide=!0),(null==boundaries.min||null==boundaries.min.y||point.y>=boundaries.min.y)&&(bottomSide=!0),leftSide&&rightSide&&topSide&&bottomSide}function isValidBoundaries(boundaries){var _a,_b,_c,_d;if(null==boundaries)return!0;const minX=null===(_a=boundaries.min)||void 0===_a?void 0:_a.x,maxX=null===(_b=boundaries.max)||void 0===_b?void 0:_b.x;if(null!=minX&&null!=maxX&&minX>=maxX)return!1;const minY=null===(_c=boundaries.min)||void 0===_c?void 0:_c.y,maxY=null===(_d=boundaries.max)||void 0===_d?void 0:_d.y;return!(null!=minY&&null!=maxY&&minY>=maxY)}function boundariesFullyDefined(boundaries){return null!=boundaries&&(null!=boundaries.max&&null!=boundaries.min&&(null!=boundaries.max.x&&null!=boundaries.max.y&&null!=boundaries.min.x&&null!=boundaries.min.y))}function clampPoint(point,boundaries){if(withinBoundaries(point,boundaries)||null==boundaries)return point;let manipulatePoint={x:point.x,y:point.y},limit=boundaries.min;return null!=limit&&(null!=limit.x&&(manipulatePoint.x=Math.max(manipulatePoint.x,limit.x)),null!=limit.y&&(manipulatePoint.y=Math.max(manipulatePoint.y,limit.y))),limit=boundaries.max,null!=limit&&(null!=limit.x&&(manipulatePoint.x=Math.min(manipulatePoint.x,limit.x)),null!=limit.y&&(manipulatePoint.y=Math.min(manipulatePoint.y,limit.y))),manipulatePoint}function translationWidthOf(boundaries){if(null!=boundaries&&null!=boundaries.min&&null!=boundaries.max&&null!=boundaries.min.x&&null!=boundaries.max.x)return boundaries.max.x-boundaries.min.x}function halfTranslationWidthOf(boundaries){const translationWidth=translationWidthOf(boundaries);return null!=translationWidth?translationWidth/2:void 0}function translationHeightOf(boundaries){if(null!=boundaries&&null!=boundaries.min&&null!=boundaries.max&&null!=boundaries.min.y&&null!=boundaries.max.y)return boundaries.max.y-boundaries.min.y}function halfTranslationHeightOf(boundaries){const translationHeight=translationHeightOf(boundaries);return null!=translationHeight?translationHeight/2:void 0}function clampPointEntireViewPort(point,viewPortWidth,viewPortHeight,boundaries,cameraZoomLevel,cameraRotation){if(null==boundaries)return point;let topLeftCorner=convert2WorldSpaceWRT(point,{x:0,y:viewPortHeight},viewPortWidth,viewPortHeight,cameraZoomLevel,cameraRotation),bottomLeftCorner=convert2WorldSpaceWRT(point,{x:0,y:0},viewPortWidth,viewPortHeight,cameraZoomLevel,cameraRotation),topRightCorner=convert2WorldSpaceWRT(point,{x:viewPortWidth,y:viewPortHeight},viewPortWidth,viewPortHeight,cameraZoomLevel,cameraRotation),bottomRightCorner=convert2WorldSpaceWRT(point,{x:viewPortWidth,y:0},viewPortWidth,viewPortHeight,cameraZoomLevel,cameraRotation),topLeftCornerClamped=clampPoint(topLeftCorner,boundaries),topRightCornerClamped=clampPoint(topRightCorner,boundaries),bottomLeftCornerClamped=clampPoint(bottomLeftCorner,boundaries),bottomRightCornerClamped=clampPoint(bottomRightCorner,boundaries),diffs=[PointCal.subVector(topLeftCornerClamped,topLeftCorner),PointCal.subVector(topRightCornerClamped,topRightCorner),PointCal.subVector(bottomLeftCornerClamped,bottomLeftCorner),PointCal.subVector(bottomRightCornerClamped,bottomRightCorner)],maxXDiff=Math.abs(diffs[0].x),maxYDiff=Math.abs(diffs[0].y),delta=diffs[0];return diffs.forEach((diff=>{Math.abs(diff.x)>maxXDiff&&(maxXDiff=Math.abs(diff.x),delta.x=diff.x),Math.abs(diff.y)>maxYDiff&&(maxYDiff=Math.abs(diff.y),delta.y=diff.y)})),PointCal.addVector(point,delta)}function clampRotation(rotation,rotationLimits){if(rotationWithinLimits(rotation,rotationLimits)||void 0===rotationLimits)return rotation;rotation=normalizeAngleZero2TwoPI(rotation);const angleSpanFromStart=angleSpan(rotationLimits.start,rotation),angleSpanFromEnd=angleSpan(rotationLimits.end,rotation);if(rotationLimits.ccw&&(angleSpanFromStart<0||angleSpanFromEnd>0)||!rotationLimits.ccw&&(angleSpanFromStart>0||angleSpanFromEnd<0)){if(Math.abs(angleSpanFromStart)===Math.abs(angleSpanFromEnd))return rotationLimits.startAsTieBreaker?rotationLimits.start:rotationLimits.end;return Math.abs(angleSpanFromStart)<Math.abs(angleSpanFromEnd)?rotationLimits.start:rotationLimits.end}return rotation}function rotationWithinLimits(rotation,rotationLimits){if(void 0===rotationLimits)return!0;if(normalizeAngleZero2TwoPI(rotationLimits.start)===normalizeAngleZero2TwoPI(rotationLimits.end))return!0;const normalizedRotation=normalizeAngleZero2TwoPI(rotation),angleSpanFromStart=angleSpan(rotationLimits.start,normalizedRotation),angleSpanFromEnd=angleSpan(rotationLimits.end,normalizedRotation);return!(rotationLimits.ccw&&(angleSpanFromStart<0||angleSpanFromEnd>0)||!rotationLimits.ccw&&(angleSpanFromStart>0||angleSpanFromEnd<0))}function rotationWithinBoundary(rotation,rotationBoundary){let angleFromStart=normalizeAngleZero2TwoPI(rotation)-normalizeAngleZero2TwoPI(rotationBoundary.start);angleFromStart<0&&(angleFromStart+=2*Math.PI),!rotationBoundary.positiveDirection&&angleFromStart>0&&(angleFromStart=2*Math.PI-angleFromStart);let angleRange=normalizeAngleZero2TwoPI(rotationBoundary.end)-normalizeAngleZero2TwoPI(rotationBoundary.start);return angleRange<0&&(angleRange+=2*Math.PI),!rotationBoundary.positiveDirection&&angleRange>0&&(angleRange=2*Math.PI-angleRange),angleRange>=angleFromStart}function normalizeAngleZero2TwoPI(angle){return angle=((angle%=2*Math.PI)+2*Math.PI)%(2*Math.PI)}function angleSpan(from,to){from=normalizeAngleZero2TwoPI(from);let angleDiff=(to=normalizeAngleZero2TwoPI(to))-from;return angleDiff>Math.PI&&(angleDiff=-(2*Math.PI-angleDiff)),angleDiff<-Math.PI&&(angleDiff+=2*Math.PI),angleDiff}function deg2rad(deg){return deg*Math.PI/180}function rad2deg(rad){return 180*rad/Math.PI}export{angleSpan,boundariesFullyDefined,cameraPositionToGet,clampPoint,clampPointEntireViewPort,clampRotation,clampZoomLevel,convert2ViewPortSpaceAnchorAtCenter,convert2WorldSpace,convert2WorldSpaceAnchorAtCenter,convert2WorldSpaceWRT,convertDeltaInViewPortToWorldSpace,convertDeltaInWorldToViewPortSpace,deg2rad,halfTranslationHeightOf,halfTranslationWidthOf,invertFromWorldSpace,isValidBoundaries,isValidZoomLevelLimits,normalizeAngleZero2TwoPI,pointIsInViewPort,rad2deg,rotationWithinBoundary,rotationWithinLimits,translationHeightOf,translationWidthOf,withinBoundaries,zoomLevelWithinLimits}; //# sourceMappingURL=index.js.map