diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..a8fab684 Binary files /dev/null and b/.DS_Store differ diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 00000000..6ae54770 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,32 @@ +name: Build + +on: + push: + branches: + - master + pull_request: + branches: + - master + +jobs: + build: + name: Install and type check + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Install dependencies + run: npm install + + - name: Verify types + run: | + test -f index.d.ts || (echo "index.d.ts missing" && exit 1) + echo "Types verified" diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 00000000..c4c15d15 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,69 @@ +name: Publish to npm + +on: + push: + branches: + - master + paths: + - 'package.json' + +jobs: + publish: + name: Publish + runs-on: ubuntu-latest + permissions: + contents: write + id-token: write + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Upgrade npm + run: npm install -g npm@latest + + - name: Install dependencies + run: npm install + + - name: Check if version changed + id: version_check + run: | + CURRENT_VERSION=$(node -p "require('./package.json').version") + PUBLISHED_VERSION=$(npm view $(node -p "require('./package.json').name") version 2>/dev/null || echo "0.0.0") + echo "current=$CURRENT_VERSION" >> $GITHUB_OUTPUT + echo "published=$PUBLISHED_VERSION" >> $GITHUB_OUTPUT + if [ "$CURRENT_VERSION" != "$PUBLISHED_VERSION" ]; then + echo "changed=true" >> $GITHUB_OUTPUT + else + echo "changed=false" >> $GITHUB_OUTPUT + fi + + - name: Publish to npm + if: steps.version_check.outputs.changed == 'true' + run: | + echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc + npm publish --provenance --access public + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + + - name: Create GitHub release + if: steps.version_check.outputs.changed == 'true' + uses: softprops/action-gh-release@v2 + with: + tag_name: v${{ steps.version_check.outputs.current }} + name: v${{ steps.version_check.outputs.current }} + body: | + ## @oguzhnatly/react-native-custom-qr-codes v${{ steps.version_check.outputs.current }} + + Published to npm: https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes + generate_release_notes: true + make_latest: true + + - name: Skip (version unchanged) + if: steps.version_check.outputs.changed == 'false' + run: echo "Version ${{ steps.version_check.outputs.current }} is already published. Bump package.json version to trigger a new release." diff --git a/README.md b/README.md index 51c2da61..39028ab7 100644 --- a/README.md +++ b/README.md @@ -1,105 +1,181 @@ +# 🔲 react-native-custom-qr-codes -# react-native-custom-qr-codes +Fully customizable QR code component for React Native with TypeScript support and RTL layout compatibility. Style the code pieces, eye shapes, colors, gradients, logos, and background images however you need. -

- example-qr-code-1 - example-qr-code-1 - example-qr-code-3 -

- -

-

+[![npm version](https://img.shields.io/npm/v/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes) +[![npm downloads](https://img.shields.io/npm/dw/@oguzhnatly/react-native-custom-qr-codes.svg)](https://www.npmjs.com/package/@oguzhnatly/react-native-custom-qr-codes) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) +[![platforms](https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey.svg)](https://github.com/oguzhnatly/react-native-custom-qr-codes)

- Customisable QR Codes for React Native. + QR Code Example 1 + QR Code Example 2 + QR Code Example 3

+--- + +## Features + +- ✅ Full TypeScript support with typed props +- ✅ RTL layout support +- ✅ Multiple code piece styles: square, circle, dot, diamond, sharp, ninja +- ✅ Independent eye shape control (outer and inner separately) +- ✅ Linear gradient foreground colors +- ✅ Logo overlay in the center of the QR code +- ✅ Background image fill for code pieces +- ✅ Configurable error correction level +- ✅ iOS and Android + +--- + ## Installation -`npm install react-native-custom-qr-codes` +```sh +npm install @oguzhnatly/react-native-custom-qr-codes +``` + +```sh +yarn add @oguzhnatly/react-native-custom-qr-codes +``` -If you are not using Expo, you will also have to manually link the [react-native-svg library](https://github.com/react-native-community/react-native-svg). -Follow [the instructions here](https://github.com/react-native-community/react-native-svg#manual) to do this. +This package depends on `react-native-svg`. If you are not using Expo, install and link it manually: -## Usage +```sh +npm install react-native-svg +cd ios && pod install +``` + +For manual linking instructions see the [react-native-svg documentation](https://github.com/software-mansion/react-native-svg#installation). + +--- +## Usage -```jsx -import { QRCode } from 'react-native-custom-qr-codes'; +```tsx +import { QRCode } from '@oguzhnatly/react-native-custom-qr-codes'; - + ``` -### Properties - -| Prop | Description | Default | -|---|---|---| -|**`content`**|The String to be encoded in the QR code. |`'No Content'`| -|**`codeStyle`**|The style of the centre QR Code pieces. |`square`| -|**`outerEyeStyle`**|The style of the outside of the QR Code's eyes. |`square`| -|**`innerEyeStyle`**|The style of the inside of the QR Code's eyes. |`square`| -|**`size`**|The width & height of the component. |`250`| -|**`color`**|The color of the QR Code. |`black`| -|**`backgroundColor`**|The background color of the component. |`white`| -|**`padding`**|The padding between the edge of the component and the QR Code itself (In terms of QR code piece sizes). |`1`| -|**`logo`**|The image to be put in the centre of the QR Code.
**Must use a higher `ecl` for QR Code to work with a logo.
(L->M->Q->H)** |none| -|**`logoSize`**|The size of the logo in the QR Code. |none| -|**`linearGradient`**|The two colors to be used for the linear gradient for the foreground. |none| -|**`gradientDirection`**|The numbers that [define the orientation of the linear gradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients). |`[0,0,170,0]`| -|**`backgroundImage`**|The image to be used as the filling of the QR Code pieces.
**The Eyes can not be styled if a background image is used.**|none| -|**`ecl`**|The [error correction level](http://www.qrcode.com/en/about/error_correction.html) of the QR Code. |`L`| +--- + +## Props + +| Prop | Type | Default | Description | +|---|---|---|---| +| `content` | `string` | `'No Content'` | The string to encode in the QR code | +| `size` | `number` | `250` | Width and height of the component in pixels | +| `padding` | `number` | `1` | Padding between the edge and the QR code in piece units | +| `color` | `string` | `'black'` | Foreground color of the QR code | +| `backgroundColor` | `string` | `'white'` | Background color of the component | +| `codeStyle` | `string` | `'square'` | Style of the centre QR code pieces. See values below | +| `outerEyeStyle` | `string` | `'square'` | Style of the outer frame of the QR code eyes | +| `innerEyeStyle` | `string` | `'square'` | Style of the inner dot of the QR code eyes | +| `ecl` | `string` | `'L'` | Error correction level. Higher levels allow logo overlays. `L` `M` `Q` `H` | +| `logo` | `ImageSource` | none | Image source to display in the center of the QR code. Requires a higher `ecl` | +| `logoSize` | `number` | none | Size of the logo overlay in pixels | +| `linearGradient` | `ColorValue[]` | none | Two colors used for a linear gradient on the foreground | +| `gradientDirection` | `number[]` | `[0,0,170,0]` | Numbers defining the [gradient orientation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) | +| `backgroundImage` | `ImageSource` | none | Image used as the fill pattern for QR code pieces. Eye styling is disabled when this is used | +| `isRTL` | `boolean` | `false` | Enables right-to-left layout rendering | + +### `codeStyle` values + +`square` `circle` `dot` `diamond` `sharp` `ninja` + +### `outerEyeStyle` values + +`square` `circle` `circles` `diamond` `rounded` + +### `innerEyeStyle` values + +`square` `circle` `circles` `diamond` `rounded` + +--- ## Examples -### `codeStyle` -```jsx - - - - - -``` - +### Code styles -### `outerEyeStyle` -```jsx - - - +```tsx + + + + + ``` - -### `innerEyeStyle` -```jsx - - - + + +### Eye styles + +```tsx + + + ``` - -### logo -```jsx - + + + +### Logo overlay + +Use `ecl="H"` to ensure the QR code remains scannable with a logo covering the center: + +```tsx + ``` - -### linearGradient -```jsx - - + + +### Linear gradient + +```tsx + + + ``` - -### backgroundImage -```jsx - + + +### Background image + +Eye styling is not available when using `backgroundImage`: + +```tsx + ``` - -## Contributing + + +### RTL support + +```tsx + +``` -Take a look at [CONTRIBUTING.md](./CONTRIBUTING.md) 😁 +--- ## License -[MIT License](http://opensource.org/licenses/mit-license.html). © Geoffrey Natin 2017 +MIT © [Oguzhan Atalay](https://github.com/oguzhnatly) diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 00000000..9c370faf --- /dev/null +++ b/index.d.ts @@ -0,0 +1,32 @@ +import { ColorValue, ImageProps } from "react-native"; + +export function QRCode({ + content, + size, + padding, + color, + gradientDirection, + backgroundColor, + codeStyle, + outerEyeStyle, + innerEyeStyle, + logoSize, + ecl, +}: { + content?: string; + size?: number; + padding?: number; + color?: string; + linearGradient?: Array; + gradientDirection?: Array; + backgroundColor?: string; + innerEyeStyle?: "circle" | "circles" | "diamond" | "rounded" | "square"; + outerEyeStyle?: "circle" | "circles" | "diamond" | "rounded" | "square"; + codeStyle?: "circle" | "diamond" | "dot" | "ninja" | "sharp" | "square"; + logo?: ImageProps["source"] | string; + backgroundImage?: ImageProps["source"]; + logoSize?: number; + ecl?: "L" | "M" | "Q" | "H"; + svg?: any; + isRTL?: boolean; +}); diff --git a/lib/QRCode.js b/lib/QRCode.js index 27d2159e..73c4bf13 100644 --- a/lib/QRCode.js +++ b/lib/QRCode.js @@ -8,19 +8,25 @@ This is a Customisable QR Code Component for React Native Applications. */ - +import { Image, View } from "react-native"; //-----------------------------Imports----------------------------------- -import React, { PureComponent } from 'react'; -import { View, Image, Text, Button } from 'react-native'; -import PropTypes from 'prop-types'; -import { generateQRCode } from './QRCodeGenerator.js'; -import { drawPiece } from './styles'; -import Svg, { Rect, Circle, Polygon, G, Path, Defs, ClipPath, LinearGradient, Stop } from 'react-native-svg'; +import React, { PureComponent } from "react"; +import Svg, { + ClipPath, + Defs, + LinearGradient, + Rect, + Stop, +} from "react-native-svg"; + +import PropTypes from "prop-types"; +import { drawPiece } from "./styles"; +import { generateQRCode } from "./QRCodeGenerator.js"; +import styled from "../../styled-components"; //-----------------------------Component--------------------------------- export default class QRCode extends PureComponent { - -//-----------------------Properties--------------------- + //-----------------------Properties--------------------- static propTypes = { content: PropTypes.string, size: PropTypes.number, @@ -29,217 +35,495 @@ export default class QRCode extends PureComponent { linearGradient: PropTypes.arrayOf(PropTypes.string), gradientDirection: PropTypes.arrayOf(PropTypes.number), backgroundColor: PropTypes.string, - innerEyeStyle: PropTypes.oneOf(['square', 'circle','diamond']), - outerEyeStyle: PropTypes.oneOf(['square', 'circle','diamond']), - codeStyle: PropTypes.oneOf(['square', 'circle','diamond','dot','ninja','sharp']), - logo: Image.propTypes.source, + innerEyeStyle: PropTypes.oneOf([ + "circle", + "circles", + "diamond", + "rounded", + "square", + ]), + outerEyeStyle: PropTypes.oneOf([ + "circle", + "circles", + "diamond", + "rounded", + "square", + ]), + codeStyle: PropTypes.oneOf([ + "circle", + "diamond", + "dot", + "ninja", + "sharp", + "square", + ]), + logo: PropTypes.oneOfType([Image.propTypes.source, PropTypes.string]), backgroundImage: Image.propTypes.source, logoSize: PropTypes.number, - ecl: PropTypes.oneOf(['L', 'M', 'Q', 'H']) + ecl: PropTypes.oneOf(["L", "M", "Q", "H"]), + svg: PropTypes.any, + isRTL: PropTypes.bool, }; static defaultProps = { content: "No Content", size: 250, - padding: 1, - color: 'black', - gradientDirection:[0,0,170,0], - backgroundColor: 'white', - codeStyle: 'square', - outerEyeStyle: 'square', - innerEyeStyle: 'square', + padding: 0, + color: "black", + gradientDirection: [0, 0, 170, 0], + backgroundColor: "transparent", + codeStyle: "square", + outerEyeStyle: "square", + innerEyeStyle: "square", logoSize: 100, - ecl: 'H' + ecl: "H", + isRTL: false, }; -//-----------------------Methods----------------------- + //-----------------------Methods----------------------- //Returns an array of SVG Elements that represent the pieces of the QR Code - getPieces(){ - var qr = generateQRCode(this.props); - - var modules = qr.qrcode.modules; - - var size = this.props.size; - var length = modules.length; - var xsize = size / (length + 2 * this.props.padding); - var ysize = size / (length + 2 * this.props.padding); - var logoX = ((this.props.size/2)-(this.props.logoSize/2)); - var logoY = ((this.props.size/2)-(this.props.logoSize/2)); - var logoSize = this.props.logoSize; - - var pieces = []; - var nonPieces = []; - - //Add the SVG element of each piece in the body of the QR Code - for (var y = 0; y < length; y++) { - for (var x = 0; x < length; x++) { - var module = modules[x][y]; - var px = (x * xsize + this.props.padding * xsize); - var py = (y * ysize + this.props.padding * ysize); - - //TODO: Add function to compute if pieces overlap with circular logos (more complex. Must see if tl or br is inside the radius from the centre of the circle (pythagoras theorem?)) - var overlapsWithLogo = ( - - px>logoX && px<(logoX+logoSize) && py>logoY && py<(logoY+logoSize) ||//Piece's top left is inside the logo area - (px+xsize)>logoX && (px+xsize)<(logoX+logoSize) && (py+ysize)>logoY && (py+ysize)<(logoY+logoSize)//Piece's bottom right is inside the logo area - - ); - - if(!this.props.logo || (this.props.logo && !overlapsWithLogo)){ - - if (module) { - pieces.push(this.getPiece(x,y,modules)); - } - else{ - nonPieces.push(this.getPiece(x,y,modules)); - } - } - } - } - - if(this.props.backgroundImage){ - return ( - - - {this.displayLogo()} - - - - {nonPieces} - - - - - - ); - } - else if(this.props.linearGradient){ - return ( - - + getPieces() { + var qr = generateQRCode(this.props); + + var modules = qr.qrcode.modules; + + var size = this.props.size; + var length = modules.length; + var xsize = size / length; + var ysize = size / length; + var logoX = this.props.size / 2 - this.props.logoSize / 2; + var logoY = this.props.size / 2 - this.props.logoSize / 2; + var logoSize = this.props.logoSize; + + var pieces = []; + var nonPieces = []; + + this.length = length; + this.ratio = xsize; + + //Add the SVG element of each piece in the body of the QR Code + for (var y = 0; y < length; y++) { + for (var x = 0; x < length; x++) { + var module = modules[x][y]; + var px = x * xsize; + var py = y * ysize; + + //TODO: Add function to compute if pieces overlap with circular logos (more complex. Must see if tl or br is inside the radius from the centre of the circle (pythagoras theorem?)) + var overlapsWithLogo = + (px > logoX && + px < logoX + logoSize && + py > logoY && + py < logoY + logoSize) || //Piece's top left is inside the logo area + (px + xsize > logoX && + px + xsize < logoX + logoSize && + py + ysize > logoY && + py + ysize < logoY + logoSize); //Piece's bottom right is inside the logo area + + if (!this.props.logo || (this.props.logo && !overlapsWithLogo)) { + if (module) { + pieces.push(this.getPiece(x, y, modules)); + } else { + nonPieces.push(this.getPiece(x, y, modules)); + } + } + } + } + + if (this.props.backgroundImage) { + return ( + + + {this.displayLogo()} + - - {pieces} - - - - + {nonPieces} + + + + + ); + } else if (this.props.linearGradient) { + return ( + + + + {pieces} + + + - - - {this.displayLogo()} - - ); - } - else{ - return ( - - + + + {this.displayLogo()} + + ); + } else { + return ( + + - - {pieces} - + {pieces} - - - {this.displayLogo()} - - ); - } - } - - //Renders the logo on top of the QR Code if there is one - displayLogo(){ - if(this.props.logo){ - return( - - ); - } - else{ - return (); - } - } - - //Returns an SVG Element that represents the piece of the QR code at modules[x][y] - getPiece(x,y,modules){ - - //Find out which piece type it is - var pieceProps = this.getPieceProperties(x,y,modules); - return drawPiece(x,y,modules,pieceProps,this.props); - - } - - //Returns an object with orientation and pieceType representation of the piece type. (See https://github.com/mpaolino/qrlib/tree/master/qrlib/static) - getPieceProperties(x,y,modules){ - var mod_matrix = {}; - mod_matrix.topLeft = (x!=0 && y!=0 && modules[x-1][y-1]); - mod_matrix.top = (y!=0 && modules[x][y-1]); - mod_matrix.topRight = (x!=modules.length-1 && y!=0 && modules[x+1][y-1]); - mod_matrix.left = (x!=0 && modules[x-1][y]); - mod_matrix.right = (x!=modules.length-1 && modules[x+1][y]); - mod_matrix.bottomLeft = (x!=0 && y!=modules.length-1 && modules[x-1][y+1]); - mod_matrix.bottom = (y!=modules.length-1 && modules[x][y+1]); - mod_matrix.bottomRight = (x!=modules.length-1 && y!=modules.length-1 && modules[x+1][y+1]); - - // (surroundingCount holds the number of pieces above or to the side of this piece) - var surroundingCount = 0; - if(mod_matrix.top){surroundingCount++;} - if(mod_matrix.left){surroundingCount++;} - if(mod_matrix.right){surroundingCount++;} - if(mod_matrix.bottom){surroundingCount++;} - - var pieceProperties = {}; - var orientation = 0; - - //Determine what the piece properties are from its surrounding pieces. - // (surroundingCount holds the number of pieces above or to the side of this piece) - // (See https://github.com/mpaolino/qrlib/tree/master/qrlib/static) - switch(surroundingCount){ - case 0: - pieceProperties.pieceType = '1a'; - if(mod_matrix.right){orientation=90;} - else if(mod_matrix.bottom){orientation=180;} - else if(mod_matrix.left){orientation=270;} + + + {this.displayLogo()} + + ); + } + } + + //Renders the logo on top of the QR Code if there is one + displayLogo() { + if (this.props.logo && !this.props.svg) { + return ( + + ); + } else { + return ; + } + } + + //Returns an SVG Element that represents the piece of the QR code at modules[x][y] + getPiece(x, y, modules) { + //Find out which piece type it is + var pieceProps = this.getPieceProperties(x, y, modules); + return drawPiece(x, y, modules, pieceProps, this.props); + } + + //Returns an object with orientation and pieceType representation of the piece type. (See https://github.com/mpaolino/qrlib/tree/master/qrlib/static) + getPieceProperties(x, y, modules) { + var mod_matrix = {}; + mod_matrix.topLeft = x != 0 && y != 0 && modules[x - 1][y - 1]; + mod_matrix.top = y != 0 && modules[x][y - 1]; + mod_matrix.topRight = + x != modules.length - 1 && y != 0 && modules[x + 1][y - 1]; + mod_matrix.left = x != 0 && modules[x - 1][y]; + mod_matrix.right = x != modules.length - 1 && modules[x + 1][y]; + mod_matrix.bottomLeft = + x != 0 && y != modules.length - 1 && modules[x - 1][y + 1]; + mod_matrix.bottom = y != modules.length - 1 && modules[x][y + 1]; + mod_matrix.bottomRight = + x != modules.length - 1 && + y != modules.length - 1 && + modules[x + 1][y + 1]; + + // (surroundingCount holds the number of pieces above or to the side of this piece) + var surroundingCount = 0; + if (mod_matrix.top) { + surroundingCount++; + } + if (mod_matrix.left) { + surroundingCount++; + } + if (mod_matrix.right) { + surroundingCount++; + } + if (mod_matrix.bottom) { + surroundingCount++; + } + + var pieceProperties = {}; + var orientation = 0; + + //Determine what the piece properties are from its surrounding pieces. + // (surroundingCount holds the number of pieces above or to the side of this piece) + // (See https://github.com/mpaolino/qrlib/tree/master/qrlib/static) + switch (surroundingCount) { + case 0: + pieceProperties.pieceType = "1a"; + if (mod_matrix.right) { + orientation = 90; + } else if (mod_matrix.bottom) { + orientation = 180; + } else if (mod_matrix.left) { + orientation = 270; + } + pieceProperties.orientation = orientation; + return pieceProperties; + case 1: + pieceProperties.pieceType = "2b"; + pieceProperties.orientation = 0; + return pieceProperties; + case 2: + if ( + (mod_matrix.top && mod_matrix.bottom) || + (mod_matrix.left && mod_matrix.right) + ) { + var orientation = mod_matrix.top && mod_matrix.bottom ? 0 : 90; + pieceProperties.pieceType = "1b3b"; pieceProperties.orientation = orientation; return pieceProperties; - case 1: - pieceProperties.pieceType = '2b'; - pieceProperties.orientation = 0; - return pieceProperties; - case 2: - if( (mod_matrix.top && mod_matrix.bottom) || (mod_matrix.left && mod_matrix.right) ){ - var orientation = (mod_matrix.top && mod_matrix.bottom) ? 0 : 90; - pieceProperties.pieceType = '1b3b'; - pieceProperties.orientation = orientation; + } else { + var orientation = 0; + if (mod_matrix.top && mod_matrix.right) { + pieceProperties.orientation = 90; + pieceProperties.pieceType = mod_matrix.topRight ? "2a1b1a" : "2a1b"; + return pieceProperties; + } else if (mod_matrix.right && mod_matrix.bottom) { + pieceProperties.orientation = 180; + pieceProperties.pieceType = mod_matrix.bottomRight + ? "2a1b1a" + : "2a1b"; + return pieceProperties; + } else if (mod_matrix.left && mod_matrix.bottom) { + pieceProperties.orientation = 270; + pieceProperties.pieceType = mod_matrix.bottomLeft + ? "2a1b1a" + : "2a1b"; + return pieceProperties; + } else { + pieceProperties.pieceType = mod_matrix.topLeft ? "2a1b1a" : "2a1b"; return pieceProperties; } - else{ - var orientation = 0; - if(mod_matrix.top && mod_matrix.right){pieceProperties.orientation=90; pieceProperties.pieceType = mod_matrix.topRight ? '2a1b1a' : '2a1b'; return pieceProperties;} - else if(mod_matrix.right && mod_matrix.bottom){pieceProperties.orientation=180; pieceProperties.pieceType = mod_matrix.bottomRight ? '2a1b1a' : '2a1b'; return pieceProperties;} - else if(mod_matrix.left && mod_matrix.bottom){pieceProperties.orientation=270; pieceProperties.pieceType = mod_matrix.bottomLeft ? '2a1b1a' : '2a1b'; return pieceProperties;} - else{ pieceProperties.pieceType = mod_matrix.topLeft ? '2a1b1a' : '2a1b'; return pieceProperties;} - } - case 3: - pieceProperties.pieceType = '2a1b2c'; - var orientation = 0; - if(mod_matrix.top && mod_matrix.right && mod_matrix.bottom){orientation=90;} - else if(mod_matrix.right && mod_matrix.bottom && mod_matrix.left){orientation=180;} - else if(mod_matrix.bottom && mod_matrix.left && mod_matrix.top){orientation=270;} - pieceProperties.orientation = orientation; - return pieceProperties; - case 4: - pieceProperties.pieceType = '2a1b2c3b'; - pieceProperties.orientation = 0; - return pieceProperties; - } + } + case 3: + pieceProperties.pieceType = "2a1b2c"; + var orientation = 0; + if (mod_matrix.top && mod_matrix.right && mod_matrix.bottom) { + orientation = 90; + } else if (mod_matrix.right && mod_matrix.bottom && mod_matrix.left) { + orientation = 180; + } else if (mod_matrix.bottom && mod_matrix.left && mod_matrix.top) { + orientation = 270; + } + pieceProperties.orientation = orientation; + return pieceProperties; + case 4: + pieceProperties.pieceType = "2a1b2c3b"; + pieceProperties.orientation = 0; + return pieceProperties; } + } //---------------------Rendering----------------------- - render () { - return this.getPieces(); + render() { + let pieces = this.getPieces(); + let eyeSize = 7 * this.ratio; + let eyeCoords = [ + [0, 0], // top left + [0, this.props.size - eyeSize], // bottom left + [this.props.size - eyeSize, 0], // top right + ]; + + return ( + + + {pieces} + {eyeCoords.map((eyeCoord, index) => ( + + ))} + + + + {this.props.svg} + + + ); + } +} + +class Eyes extends React.Component { + constructor(props) { + super(props); + this.size = this.props.size; + this.ratio = this.props.ratio; + + /* XY coordinates (right-to-bottom) */ + this.x = this.props.x; + this.y = this.props.y; + + this.outerEyeStyle = this.drawEyeStyle(this.props.outerEyeStyle, "outer"); + this.innerEyeStyle = this.drawEyeStyle(this.props.innerEyeStyle, "inner"); + + this.color = this.props.color; + + /* innerEye variables */ + this.inSize = 3 * this.ratio; + this.inX = this.ratio; + this.inY = this.ratio; + } + + drawEyeStyle(style, type) { + if (type === "outer") { + return ["diamond", "circles"].includes(style) ? null : style; } + return ["diamond", "circles"].includes(style) ? null : style; + } + + render() { + return ( + + + + + + ); + } } + +const EyeShape = styled.View` + height: ${(props) => props.size}px; + width: ${(props) => props.size}px; + background-color: ${(props) => + props.border || !props.type ? "transparent" : props.color}; + top: ${(props) => props.leftCornerY}px; + left: ${(props) => props.leftCornerX}px; + border-radius: ${(props) => { + switch (props.type) { + case "circle": + return props.size; + case "rounded": + return props.size / 5; + default: + return 0; + } + }}px; + border-color: ${(props) => + props.border && props.type ? props.color : "transparent"}; + border-width: ${(props) => { + if (!props.border) { + return 0; + } + return props.borderWidth; + }}px; +`; + +const Container = styled.View` + position: absolute; + height: ${(props) => props.size}px; + width: ${(props) => props.size}px; +`; + +const QRView = styled.View` + position: relative; + height: ${(props) => props.size}px; + width: ${(props) => props.size}px; +`; diff --git a/lib/QRCodeGenerator.js b/lib/QRCodeGenerator.js index 6e25d1c5..cc7c1a55 100644 --- a/lib/QRCodeGenerator.js +++ b/lib/QRCodeGenerator.js @@ -29,7 +29,7 @@ //--------------------------------------------------------------------- //Returns an SVG of a QR Code created using the properties object -export function generateQRCode(props){ +export function generateQRCode(props) { var myQRCode = new QRCode(props); return myQRCode; } @@ -45,17 +45,17 @@ function QR8bitByte(data) { var code = this.data.charCodeAt(i); if (code > 0x10000) { - byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18); - byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12); - byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6); - byteArray[3] = 0x80 | (code & 0x3F); + byteArray[0] = 0xf0 | ((code & 0x1c0000) >>> 18); + byteArray[1] = 0x80 | ((code & 0x3f000) >>> 12); + byteArray[2] = 0x80 | ((code & 0xfc0) >>> 6); + byteArray[3] = 0x80 | (code & 0x3f); } else if (code > 0x800) { - byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12); - byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6); - byteArray[2] = 0x80 | (code & 0x3F); + byteArray[0] = 0xe0 | ((code & 0xf000) >>> 12); + byteArray[1] = 0x80 | ((code & 0xfc0) >>> 6); + byteArray[2] = 0x80 | (code & 0x3f); } else if (code > 0x80) { - byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6); - byteArray[1] = 0x80 | (code & 0x3F); + byteArray[0] = 0xc0 | ((code & 0x7c0) >>> 6); + byteArray[1] = 0x80 | (code & 0x3f); } else { byteArray[0] = code; } @@ -80,7 +80,7 @@ QR8bitByte.prototype = { for (var i = 0, l = this.parsedData.length; i < l; i++) { buffer.put(this.parsedData[i], 8); } - } + }, }; function QRCodeModel(typeNumber, errorCorrectLevel) { @@ -92,73 +92,909 @@ function QRCodeModel(typeNumber, errorCorrectLevel) { this.dataList = []; } -QRCodeModel.prototype={addData:function(data){var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){throw new Error(row+","+col);} -return this.modules[row][col];},getModuleCount:function(){return this.moduleCount;},make:function(){this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row=7){this.setupTypeNumber(test);} -if(this.dataCache==null){this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);} -this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){for(var r=-1;r<=7;r++){if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}} -return pattern;},createMovieClip:function(target_mc,instance_name,depth){var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;} -for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<6){this.modules[i][8]=mod;}else if(i<8){this.modules[i+1][8]=mod;}else{this.modules[this.moduleCount-15+i][8]=mod;}} -for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<8){this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){this.modules[8][15-i-1+1]=mod;}else{this.modules[8][15-i-1]=mod;}} -this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){if(col==6)col--;while(true){for(var c=0;c<2;c++){if(this.modules[row][col-c]==null){var dark=false;if(byteIndex>>bitIndex)&1)==1);} -var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){dark=!dark;} -this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){byteIndex++;bitIndex=7;}}} -row+=inc;if(row<0||this.moduleCount<=row){row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;itotalDataCount*8){throw new Error("code length overflow. (" -+buffer.getLengthInBits() -+">" -+totalDataCount*8 -+")");} -if(buffer.getLengthInBits()+4<=totalDataCount*8){buffer.put(0,4);} -while(buffer.getLengthInBits()%8!=0){buffer.putBit(false);} -while(true){if(buffer.getLengthInBits()>=totalDataCount*8){break;} -buffer.put(QRCodeModel.PAD0,8);if(buffer.getLengthInBits()>=totalDataCount*8){break;} -buffer.put(QRCodeModel.PAD1,8);} -return QRCodeModel.createBytes(buffer,rsBlocks);};QRCodeModel.createBytes=function(buffer,rsBlocks){var offset=0;var maxDcCount=0;var maxEcCount=0;var dcdata=new Array(rsBlocks.length);var ecdata=new Array(rsBlocks.length);for(var r=0;r=0)?modPoly.get(modIndex):0;}} -var totalCodeCount=0;for(var i=0;i=0){d^=(QRUtil.G15<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)));} -return((data<<10)|d)^QRUtil.G15_MASK;},getBCHTypeNumber:function(data){var d=data<<12;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)>=0){d^=(QRUtil.G18<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)));} -return(data<<12)|d;},getBCHDigit:function(data){var digit=0;while(data!=0){digit++;data>>>=1;} -return digit;},getPatternPosition:function(typeNumber){return QRUtil.PATTERN_POSITION_TABLE[typeNumber-1];},getMask:function(maskPattern,i,j){switch(maskPattern){case QRMaskPattern.PATTERN000:return(i+j)%2==0;case QRMaskPattern.PATTERN001:return i%2==0;case QRMaskPattern.PATTERN010:return j%3==0;case QRMaskPattern.PATTERN011:return(i+j)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(i/2)+Math.floor(j/3))%2==0;case QRMaskPattern.PATTERN101:return(i*j)%2+(i*j)%3==0;case QRMaskPattern.PATTERN110:return((i*j)%2+(i*j)%3)%2==0;case QRMaskPattern.PATTERN111:return((i*j)%3+(i+j)%2)%2==0;default:throw new Error("bad maskPattern:"+maskPattern);}},getErrorCorrectPolynomial:function(errorCorrectLength){var a=new QRPolynomial([1],0);for(var i=0;i5){lostPoint+=(3+sameCount-5);}}} -for(var row=0;row=256){n-=255;} -return QRMath.EXP_TABLE[n];},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)};for(var i=0;i<8;i++){QRMath.EXP_TABLE[i]=1<>>(7-index%8))&1)==1;},put:function(num,length){for(var i=0;i>>(length-i-1))&1)==1);}},getLengthInBits:function(){return this.length;},putBit:function(bit){var bufIndex=Math.floor(this.length/8);if(this.buffer.length<=bufIndex){this.buffer.push(0);} -if(bit){this.buffer[bufIndex]|=(0x80>>>(this.length%8));} -this.length++;}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]]; - +QRCodeModel.prototype = { + addData: function (data) { + var newData = new QR8bitByte(data); + this.dataList.push(newData); + this.dataCache = null; + }, + isDark: function (row, col) { + if ( + row < 0 || + this.moduleCount <= row || + col < 0 || + this.moduleCount <= col + ) { + throw new Error(row + "," + col); + } + return this.modules[row][col]; + }, + getModuleCount: function () { + return this.moduleCount; + }, + make: function () { + this.makeImpl(false, this.getBestMaskPattern()); + }, + makeImpl: function (test, maskPattern) { + this.moduleCount = this.typeNumber * 4 + 17; + this.modules = new Array(this.moduleCount); + for (var row = 0; row < this.moduleCount; row++) { + this.modules[row] = new Array(this.moduleCount); + for (var col = 0; col < this.moduleCount; col++) { + this.modules[row][col] = null; + } + } + this.setupPositionProbePattern(0, 0); + this.setupPositionProbePattern(this.moduleCount - 7, 0); + this.setupPositionProbePattern(0, this.moduleCount - 7); + this.setupPositionAdjustPattern(); + this.setupTimingPattern(); + this.setupTypeInfo(test, maskPattern); + if (this.typeNumber >= 7) { + this.setupTypeNumber(test); + } + if (this.dataCache == null) { + this.dataCache = QRCodeModel.createData( + this.typeNumber, + this.errorCorrectLevel, + this.dataList + ); + } + this.mapData(this.dataCache, maskPattern); + }, + setupPositionProbePattern: function (row, col) { + for (var r = -1; r <= 7; r++) { + if (row + r <= -1 || this.moduleCount <= row + r) continue; + for (var c = -1; c <= 7; c++) { + if (col + c <= -1 || this.moduleCount <= col + c) continue; + if ( + (0 <= r && r <= 6 && (c == 0 || c == 6)) || + (0 <= c && c <= 6 && (r == 0 || r == 6)) || + (2 <= r && r <= 4 && 2 <= c && c <= 4) + ) { + this.modules[row + r][col + c] = true; + } else { + this.modules[row + r][col + c] = false; + } + } + } + }, + getBestMaskPattern: function () { + var minLostPoint = 0; + var pattern = 0; + for (var i = 0; i < 8; i++) { + this.makeImpl(true, i); + var lostPoint = QRUtil.getLostPoint(this); + if (i == 0 || minLostPoint > lostPoint) { + minLostPoint = lostPoint; + pattern = i; + } + } + return pattern; + }, + createMovieClip: function (target_mc, instance_name, depth) { + var qr_mc = target_mc.createEmptyMovieClip(instance_name, depth); + var cs = 1; + this.make(); + for (var row = 0; row < this.modules.length; row++) { + var y = row * cs; + for (var col = 0; col < this.modules[row].length; col++) { + var x = col * cs; + var dark = this.modules[row][col]; + if (dark) { + qr_mc.beginFill(0, 100); + qr_mc.moveTo(x, y); + qr_mc.lineTo(x + cs, y); + qr_mc.lineTo(x + cs, y + cs); + qr_mc.lineTo(x, y + cs); + qr_mc.endFill(); + } + } + } + return qr_mc; + }, + setupTimingPattern: function () { + for (var r = 8; r < this.moduleCount - 8; r++) { + if (this.modules[r][6] != null) { + continue; + } + this.modules[r][6] = r % 2 == 0; + } + for (var c = 8; c < this.moduleCount - 8; c++) { + if (this.modules[6][c] != null) { + continue; + } + this.modules[6][c] = c % 2 == 0; + } + }, + setupPositionAdjustPattern: function () { + var pos = QRUtil.getPatternPosition(this.typeNumber); + for (var i = 0; i < pos.length; i++) { + for (var j = 0; j < pos.length; j++) { + var row = pos[i]; + var col = pos[j]; + if (this.modules[row][col] != null) { + continue; + } + for (var r = -2; r <= 2; r++) { + for (var c = -2; c <= 2; c++) { + if (r == -2 || r == 2 || c == -2 || c == 2 || (r == 0 && c == 0)) { + this.modules[row + r][col + c] = true; + } else { + this.modules[row + r][col + c] = false; + } + } + } + } + } + }, + setupTypeNumber: function (test) { + var bits = QRUtil.getBCHTypeNumber(this.typeNumber); + for (var i = 0; i < 18; i++) { + var mod = !test && ((bits >> i) & 1) == 1; + this.modules[Math.floor(i / 3)][(i % 3) + this.moduleCount - 8 - 3] = mod; + } + for (var i = 0; i < 18; i++) { + var mod = !test && ((bits >> i) & 1) == 1; + this.modules[(i % 3) + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod; + } + }, + setupTypeInfo: function (test, maskPattern) { + var data = (this.errorCorrectLevel << 3) | maskPattern; + var bits = QRUtil.getBCHTypeInfo(data); + for (var i = 0; i < 15; i++) { + var mod = !test && ((bits >> i) & 1) == 1; + if (i < 6) { + this.modules[i][8] = mod; + } else if (i < 8) { + this.modules[i + 1][8] = mod; + } else { + this.modules[this.moduleCount - 15 + i][8] = mod; + } + } + for (var i = 0; i < 15; i++) { + var mod = !test && ((bits >> i) & 1) == 1; + if (i < 8) { + this.modules[8][this.moduleCount - i - 1] = mod; + } else if (i < 9) { + this.modules[8][15 - i - 1 + 1] = mod; + } else { + this.modules[8][15 - i - 1] = mod; + } + } + this.modules[this.moduleCount - 8][8] = !test; + }, + mapData: function (data, maskPattern) { + var inc = -1; + var row = this.moduleCount - 1; + var bitIndex = 7; + var byteIndex = 0; + for (var col = this.moduleCount - 1; col > 0; col -= 2) { + if (col == 6) col--; + while (true) { + for (var c = 0; c < 2; c++) { + if (this.modules[row][col - c] == null) { + var dark = false; + if (byteIndex < data.length) { + dark = ((data[byteIndex] >>> bitIndex) & 1) == 1; + } + var mask = QRUtil.getMask(maskPattern, row, col - c); + if (mask) { + dark = !dark; + } + this.modules[row][col - c] = dark; + bitIndex--; + if (bitIndex == -1) { + byteIndex++; + bitIndex = 7; + } + } + } + row += inc; + if (row < 0 || this.moduleCount <= row) { + row -= inc; + inc = -inc; + break; + } + } + } + }, +}; +QRCodeModel.PAD0 = 0xec; +QRCodeModel.PAD1 = 0x11; +QRCodeModel.createData = function (typeNumber, errorCorrectLevel, dataList) { + var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, errorCorrectLevel); + var buffer = new QRBitBuffer(); + for (var i = 0; i < dataList.length; i++) { + var data = dataList[i]; + buffer.put(data.mode, 4); + buffer.put(data.getLength(), QRUtil.getLengthInBits(data.mode, typeNumber)); + data.write(buffer); + } + var totalDataCount = 0; + for (var i = 0; i < rsBlocks.length; i++) { + totalDataCount += rsBlocks[i].dataCount; + } + if (buffer.getLengthInBits() > totalDataCount * 8) { + throw new Error( + "code length overflow. (" + + buffer.getLengthInBits() + + ">" + + totalDataCount * 8 + + ")" + ); + } + if (buffer.getLengthInBits() + 4 <= totalDataCount * 8) { + buffer.put(0, 4); + } + while (buffer.getLengthInBits() % 8 != 0) { + buffer.putBit(false); + } + while (true) { + if (buffer.getLengthInBits() >= totalDataCount * 8) { + break; + } + buffer.put(QRCodeModel.PAD0, 8); + if (buffer.getLengthInBits() >= totalDataCount * 8) { + break; + } + buffer.put(QRCodeModel.PAD1, 8); + } + return QRCodeModel.createBytes(buffer, rsBlocks); +}; +QRCodeModel.createBytes = function (buffer, rsBlocks) { + var offset = 0; + var maxDcCount = 0; + var maxEcCount = 0; + var dcdata = new Array(rsBlocks.length); + var ecdata = new Array(rsBlocks.length); + for (var r = 0; r < rsBlocks.length; r++) { + var dcCount = rsBlocks[r].dataCount; + var ecCount = rsBlocks[r].totalCount - dcCount; + maxDcCount = Math.max(maxDcCount, dcCount); + maxEcCount = Math.max(maxEcCount, ecCount); + dcdata[r] = new Array(dcCount); + for (var i = 0; i < dcdata[r].length; i++) { + dcdata[r][i] = 0xff & buffer.buffer[i + offset]; + } + offset += dcCount; + var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount); + var rawPoly = new QRPolynomial(dcdata[r], rsPoly.getLength() - 1); + var modPoly = rawPoly.mod(rsPoly); + ecdata[r] = new Array(rsPoly.getLength() - 1); + for (var i = 0; i < ecdata[r].length; i++) { + var modIndex = i + modPoly.getLength() - ecdata[r].length; + ecdata[r][i] = modIndex >= 0 ? modPoly.get(modIndex) : 0; + } + } + var totalCodeCount = 0; + for (var i = 0; i < rsBlocks.length; i++) { + totalCodeCount += rsBlocks[i].totalCount; + } + var data = new Array(totalCodeCount); + var index = 0; + for (var i = 0; i < maxDcCount; i++) { + for (var r = 0; r < rsBlocks.length; r++) { + if (i < dcdata[r].length) { + data[index++] = dcdata[r][i]; + } + } + } + for (var i = 0; i < maxEcCount; i++) { + for (var r = 0; r < rsBlocks.length; r++) { + if (i < ecdata[r].length) { + data[index++] = ecdata[r][i]; + } + } + } + return data; +}; +var QRMode = { + MODE_NUMBER: 1 << 0, + MODE_ALPHA_NUM: 1 << 1, + MODE_8BIT_BYTE: 1 << 2, + MODE_KANJI: 1 << 3, +}; +var QRErrorCorrectLevel = { L: 1, M: 0, Q: 3, H: 2 }; +var QRMaskPattern = { + PATTERN000: 0, + PATTERN001: 1, + PATTERN010: 2, + PATTERN011: 3, + PATTERN100: 4, + PATTERN101: 5, + PATTERN110: 6, + PATTERN111: 7, +}; +var QRUtil = { + PATTERN_POSITION_TABLE: [ + [], + [6, 18], + [6, 22], + [6, 26], + [6, 30], + [6, 34], + [6, 22, 38], + [6, 24, 42], + [6, 26, 46], + [6, 28, 50], + [6, 30, 54], + [6, 32, 58], + [6, 34, 62], + [6, 26, 46, 66], + [6, 26, 48, 70], + [6, 26, 50, 74], + [6, 30, 54, 78], + [6, 30, 56, 82], + [6, 30, 58, 86], + [6, 34, 62, 90], + [6, 28, 50, 72, 94], + [6, 26, 50, 74, 98], + [6, 30, 54, 78, 102], + [6, 28, 54, 80, 106], + [6, 32, 58, 84, 110], + [6, 30, 58, 86, 114], + [6, 34, 62, 90, 118], + [6, 26, 50, 74, 98, 122], + [6, 30, 54, 78, 102, 126], + [6, 26, 52, 78, 104, 130], + [6, 30, 56, 82, 108, 134], + [6, 34, 60, 86, 112, 138], + [6, 30, 58, 86, 114, 142], + [6, 34, 62, 90, 118, 146], + [6, 30, 54, 78, 102, 126, 150], + [6, 24, 50, 76, 102, 128, 154], + [6, 28, 54, 80, 106, 132, 158], + [6, 32, 58, 84, 110, 136, 162], + [6, 26, 54, 82, 110, 138, 166], + [6, 30, 58, 86, 114, 142, 170], + ], + G15: + (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0), + G18: + (1 << 12) | + (1 << 11) | + (1 << 10) | + (1 << 9) | + (1 << 8) | + (1 << 5) | + (1 << 2) | + (1 << 0), + G15_MASK: (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1), + getBCHTypeInfo: function (data) { + var d = data << 10; + while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15) >= 0) { + d ^= + QRUtil.G15 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15)); + } + return ((data << 10) | d) ^ QRUtil.G15_MASK; + }, + getBCHTypeNumber: function (data) { + var d = data << 12; + while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18) >= 0) { + d ^= + QRUtil.G18 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18)); + } + return (data << 12) | d; + }, + getBCHDigit: function (data) { + var digit = 0; + while (data != 0) { + digit++; + data >>>= 1; + } + return digit; + }, + getPatternPosition: function (typeNumber) { + return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1]; + }, + getMask: function (maskPattern, i, j) { + switch (maskPattern) { + case QRMaskPattern.PATTERN000: + return (i + j) % 2 == 0; + case QRMaskPattern.PATTERN001: + return i % 2 == 0; + case QRMaskPattern.PATTERN010: + return j % 3 == 0; + case QRMaskPattern.PATTERN011: + return (i + j) % 3 == 0; + case QRMaskPattern.PATTERN100: + return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0; + case QRMaskPattern.PATTERN101: + return ((i * j) % 2) + ((i * j) % 3) == 0; + case QRMaskPattern.PATTERN110: + return (((i * j) % 2) + ((i * j) % 3)) % 2 == 0; + case QRMaskPattern.PATTERN111: + return (((i * j) % 3) + ((i + j) % 2)) % 2 == 0; + default: + throw new Error("bad maskPattern:" + maskPattern); + } + }, + getErrorCorrectPolynomial: function (errorCorrectLength) { + var a = new QRPolynomial([1], 0); + for (var i = 0; i < errorCorrectLength; i++) { + a = a.multiply(new QRPolynomial([1, QRMath.gexp(i)], 0)); + } + return a; + }, + getLengthInBits: function (mode, type) { + if (1 <= type && type < 10) { + switch (mode) { + case QRMode.MODE_NUMBER: + return 10; + case QRMode.MODE_ALPHA_NUM: + return 9; + case QRMode.MODE_8BIT_BYTE: + return 8; + case QRMode.MODE_KANJI: + return 8; + default: + throw new Error("mode:" + mode); + } + } else if (type < 27) { + switch (mode) { + case QRMode.MODE_NUMBER: + return 12; + case QRMode.MODE_ALPHA_NUM: + return 11; + case QRMode.MODE_8BIT_BYTE: + return 16; + case QRMode.MODE_KANJI: + return 10; + default: + throw new Error("mode:" + mode); + } + } else if (type < 41) { + switch (mode) { + case QRMode.MODE_NUMBER: + return 14; + case QRMode.MODE_ALPHA_NUM: + return 13; + case QRMode.MODE_8BIT_BYTE: + return 16; + case QRMode.MODE_KANJI: + return 12; + default: + throw new Error("mode:" + mode); + } + } else { + throw new Error("type:" + type); + } + }, + getLostPoint: function (qrCode) { + var moduleCount = qrCode.getModuleCount(); + var lostPoint = 0; + for (var row = 0; row < moduleCount; row++) { + for (var col = 0; col < moduleCount; col++) { + var sameCount = 0; + var dark = qrCode.isDark(row, col); + for (var r = -1; r <= 1; r++) { + if (row + r < 0 || moduleCount <= row + r) { + continue; + } + for (var c = -1; c <= 1; c++) { + if (col + c < 0 || moduleCount <= col + c) { + continue; + } + if (r == 0 && c == 0) { + continue; + } + if (dark == qrCode.isDark(row + r, col + c)) { + sameCount++; + } + } + } + if (sameCount > 5) { + lostPoint += 3 + sameCount - 5; + } + } + } + for (var row = 0; row < moduleCount - 1; row++) { + for (var col = 0; col < moduleCount - 1; col++) { + var count = 0; + if (qrCode.isDark(row, col)) count++; + if (qrCode.isDark(row + 1, col)) count++; + if (qrCode.isDark(row, col + 1)) count++; + if (qrCode.isDark(row + 1, col + 1)) count++; + if (count == 0 || count == 4) { + lostPoint += 3; + } + } + } + for (var row = 0; row < moduleCount; row++) { + for (var col = 0; col < moduleCount - 6; col++) { + if ( + qrCode.isDark(row, col) && + !qrCode.isDark(row, col + 1) && + qrCode.isDark(row, col + 2) && + qrCode.isDark(row, col + 3) && + qrCode.isDark(row, col + 4) && + !qrCode.isDark(row, col + 5) && + qrCode.isDark(row, col + 6) + ) { + lostPoint += 40; + } + } + } + for (var col = 0; col < moduleCount; col++) { + for (var row = 0; row < moduleCount - 6; row++) { + if ( + qrCode.isDark(row, col) && + !qrCode.isDark(row + 1, col) && + qrCode.isDark(row + 2, col) && + qrCode.isDark(row + 3, col) && + qrCode.isDark(row + 4, col) && + !qrCode.isDark(row + 5, col) && + qrCode.isDark(row + 6, col) + ) { + lostPoint += 40; + } + } + } + var darkCount = 0; + for (var col = 0; col < moduleCount; col++) { + for (var row = 0; row < moduleCount; row++) { + if (qrCode.isDark(row, col)) { + darkCount++; + } + } + } + var ratio = + Math.abs((100 * darkCount) / moduleCount / moduleCount - 50) / 5; + lostPoint += ratio * 10; + return lostPoint; + }, +}; +var QRMath = { + glog: function (n) { + if (n < 1) { + throw new Error("glog(" + n + ")"); + } + return QRMath.LOG_TABLE[n]; + }, + gexp: function (n) { + while (n < 0) { + n += 255; + } + while (n >= 256) { + n -= 255; + } + return QRMath.EXP_TABLE[n]; + }, + EXP_TABLE: new Array(256), + LOG_TABLE: new Array(256), +}; +for (var i = 0; i < 8; i++) { + QRMath.EXP_TABLE[i] = 1 << i; +} +for (var i = 8; i < 256; i++) { + QRMath.EXP_TABLE[i] = + QRMath.EXP_TABLE[i - 4] ^ + QRMath.EXP_TABLE[i - 5] ^ + QRMath.EXP_TABLE[i - 6] ^ + QRMath.EXP_TABLE[i - 8]; +} +for (var i = 0; i < 255; i++) { + QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i; +} +function QRPolynomial(num, shift) { + if (num.length == undefined) { + throw new Error(num.length + "/" + shift); + } + var offset = 0; + while (offset < num.length && num[offset] == 0) { + offset++; + } + this.num = new Array(num.length - offset + shift); + for (var i = 0; i < num.length - offset; i++) { + this.num[i] = num[i + offset]; + } +} +QRPolynomial.prototype = { + get: function (index) { + return this.num[index]; + }, + getLength: function () { + return this.num.length; + }, + multiply: function (e) { + var num = new Array(this.getLength() + e.getLength() - 1); + for (var i = 0; i < this.getLength(); i++) { + for (var j = 0; j < e.getLength(); j++) { + num[i + j] ^= QRMath.gexp( + QRMath.glog(this.get(i)) + QRMath.glog(e.get(j)) + ); + } + } + return new QRPolynomial(num, 0); + }, + mod: function (e) { + if (this.getLength() - e.getLength() < 0) { + return this; + } + var ratio = QRMath.glog(this.get(0)) - QRMath.glog(e.get(0)); + var num = new Array(this.getLength()); + for (var i = 0; i < this.getLength(); i++) { + num[i] = this.get(i); + } + for (var i = 0; i < e.getLength(); i++) { + num[i] ^= QRMath.gexp(QRMath.glog(e.get(i)) + ratio); + } + return new QRPolynomial(num, 0).mod(e); + }, +}; +function QRRSBlock(totalCount, dataCount) { + this.totalCount = totalCount; + this.dataCount = dataCount; +} +QRRSBlock.RS_BLOCK_TABLE = [ + [1, 26, 19], + [1, 26, 16], + [1, 26, 13], + [1, 26, 9], + [1, 44, 34], + [1, 44, 28], + [1, 44, 22], + [1, 44, 16], + [1, 70, 55], + [1, 70, 44], + [2, 35, 17], + [2, 35, 13], + [1, 100, 80], + [2, 50, 32], + [2, 50, 24], + [4, 25, 9], + [1, 134, 108], + [2, 67, 43], + [2, 33, 15, 2, 34, 16], + [2, 33, 11, 2, 34, 12], + [2, 86, 68], + [4, 43, 27], + [4, 43, 19], + [4, 43, 15], + [2, 98, 78], + [4, 49, 31], + [2, 32, 14, 4, 33, 15], + [4, 39, 13, 1, 40, 14], + [2, 121, 97], + [2, 60, 38, 2, 61, 39], + [4, 40, 18, 2, 41, 19], + [4, 40, 14, 2, 41, 15], + [2, 146, 116], + [3, 58, 36, 2, 59, 37], + [4, 36, 16, 4, 37, 17], + [4, 36, 12, 4, 37, 13], + [2, 86, 68, 2, 87, 69], + [4, 69, 43, 1, 70, 44], + [6, 43, 19, 2, 44, 20], + [6, 43, 15, 2, 44, 16], + [4, 101, 81], + [1, 80, 50, 4, 81, 51], + [4, 50, 22, 4, 51, 23], + [3, 36, 12, 8, 37, 13], + [2, 116, 92, 2, 117, 93], + [6, 58, 36, 2, 59, 37], + [4, 46, 20, 6, 47, 21], + [7, 42, 14, 4, 43, 15], + [4, 133, 107], + [8, 59, 37, 1, 60, 38], + [8, 44, 20, 4, 45, 21], + [12, 33, 11, 4, 34, 12], + [3, 145, 115, 1, 146, 116], + [4, 64, 40, 5, 65, 41], + [11, 36, 16, 5, 37, 17], + [11, 36, 12, 5, 37, 13], + [5, 109, 87, 1, 110, 88], + [5, 65, 41, 5, 66, 42], + [5, 54, 24, 7, 55, 25], + [11, 36, 12], + [5, 122, 98, 1, 123, 99], + [7, 73, 45, 3, 74, 46], + [15, 43, 19, 2, 44, 20], + [3, 45, 15, 13, 46, 16], + [1, 135, 107, 5, 136, 108], + [10, 74, 46, 1, 75, 47], + [1, 50, 22, 15, 51, 23], + [2, 42, 14, 17, 43, 15], + [5, 150, 120, 1, 151, 121], + [9, 69, 43, 4, 70, 44], + [17, 50, 22, 1, 51, 23], + [2, 42, 14, 19, 43, 15], + [3, 141, 113, 4, 142, 114], + [3, 70, 44, 11, 71, 45], + [17, 47, 21, 4, 48, 22], + [9, 39, 13, 16, 40, 14], + [3, 135, 107, 5, 136, 108], + [3, 67, 41, 13, 68, 42], + [15, 54, 24, 5, 55, 25], + [15, 43, 15, 10, 44, 16], + [4, 144, 116, 4, 145, 117], + [17, 68, 42], + [17, 50, 22, 6, 51, 23], + [19, 46, 16, 6, 47, 17], + [2, 139, 111, 7, 140, 112], + [17, 74, 46], + [7, 54, 24, 16, 55, 25], + [34, 37, 13], + [4, 151, 121, 5, 152, 122], + [4, 75, 47, 14, 76, 48], + [11, 54, 24, 14, 55, 25], + [16, 45, 15, 14, 46, 16], + [6, 147, 117, 4, 148, 118], + [6, 73, 45, 14, 74, 46], + [11, 54, 24, 16, 55, 25], + [30, 46, 16, 2, 47, 17], + [8, 132, 106, 4, 133, 107], + [8, 75, 47, 13, 76, 48], + [7, 54, 24, 22, 55, 25], + [22, 45, 15, 13, 46, 16], + [10, 142, 114, 2, 143, 115], + [19, 74, 46, 4, 75, 47], + [28, 50, 22, 6, 51, 23], + [33, 46, 16, 4, 47, 17], + [8, 152, 122, 4, 153, 123], + [22, 73, 45, 3, 74, 46], + [8, 53, 23, 26, 54, 24], + [12, 45, 15, 28, 46, 16], + [3, 147, 117, 10, 148, 118], + [3, 73, 45, 23, 74, 46], + [4, 54, 24, 31, 55, 25], + [11, 45, 15, 31, 46, 16], + [7, 146, 116, 7, 147, 117], + [21, 73, 45, 7, 74, 46], + [1, 53, 23, 37, 54, 24], + [19, 45, 15, 26, 46, 16], + [5, 145, 115, 10, 146, 116], + [19, 75, 47, 10, 76, 48], + [15, 54, 24, 25, 55, 25], + [23, 45, 15, 25, 46, 16], + [13, 145, 115, 3, 146, 116], + [2, 74, 46, 29, 75, 47], + [42, 54, 24, 1, 55, 25], + [23, 45, 15, 28, 46, 16], + [17, 145, 115], + [10, 74, 46, 23, 75, 47], + [10, 54, 24, 35, 55, 25], + [19, 45, 15, 35, 46, 16], + [17, 145, 115, 1, 146, 116], + [14, 74, 46, 21, 75, 47], + [29, 54, 24, 19, 55, 25], + [11, 45, 15, 46, 46, 16], + [13, 145, 115, 6, 146, 116], + [14, 74, 46, 23, 75, 47], + [44, 54, 24, 7, 55, 25], + [59, 46, 16, 1, 47, 17], + [12, 151, 121, 7, 152, 122], + [12, 75, 47, 26, 76, 48], + [39, 54, 24, 14, 55, 25], + [22, 45, 15, 41, 46, 16], + [6, 151, 121, 14, 152, 122], + [6, 75, 47, 34, 76, 48], + [46, 54, 24, 10, 55, 25], + [2, 45, 15, 64, 46, 16], + [17, 152, 122, 4, 153, 123], + [29, 74, 46, 14, 75, 47], + [49, 54, 24, 10, 55, 25], + [24, 45, 15, 46, 46, 16], + [4, 152, 122, 18, 153, 123], + [13, 74, 46, 32, 75, 47], + [48, 54, 24, 14, 55, 25], + [42, 45, 15, 32, 46, 16], + [20, 147, 117, 4, 148, 118], + [40, 75, 47, 7, 76, 48], + [43, 54, 24, 22, 55, 25], + [10, 45, 15, 67, 46, 16], + [19, 148, 118, 6, 149, 119], + [18, 75, 47, 31, 76, 48], + [34, 54, 24, 34, 55, 25], + [20, 45, 15, 61, 46, 16], +]; +QRRSBlock.getRSBlocks = function (typeNumber, errorCorrectLevel) { + var rsBlock = QRRSBlock.getRsBlockTable(typeNumber, errorCorrectLevel); + if (rsBlock == undefined) { + throw new Error( + "bad rs block @ typeNumber:" + + typeNumber + + "/errorCorrectLevel:" + + errorCorrectLevel + ); + } + var length = rsBlock.length / 3; + var list = []; + for (var i = 0; i < length; i++) { + var count = rsBlock[i * 3 + 0]; + var totalCount = rsBlock[i * 3 + 1]; + var dataCount = rsBlock[i * 3 + 2]; + for (var j = 0; j < count; j++) { + list.push(new QRRSBlock(totalCount, dataCount)); + } + } + return list; +}; +QRRSBlock.getRsBlockTable = function (typeNumber, errorCorrectLevel) { + switch (errorCorrectLevel) { + case QRErrorCorrectLevel.L: + return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 0]; + case QRErrorCorrectLevel.M: + return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 1]; + case QRErrorCorrectLevel.Q: + return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 2]; + case QRErrorCorrectLevel.H: + return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 3]; + default: + return undefined; + } +}; +function QRBitBuffer() { + this.buffer = []; + this.length = 0; +} +QRBitBuffer.prototype = { + get: function (index) { + var bufIndex = Math.floor(index / 8); + return ((this.buffer[bufIndex] >>> (7 - (index % 8))) & 1) == 1; + }, + put: function (num, length) { + for (var i = 0; i < length; i++) { + this.putBit(((num >>> (length - i - 1)) & 1) == 1); + } + }, + getLengthInBits: function () { + return this.length; + }, + putBit: function (bit) { + var bufIndex = Math.floor(this.length / 8); + if (this.buffer.length <= bufIndex) { + this.buffer.push(0); + } + if (bit) { + this.buffer[bufIndex] |= 0x80 >>> this.length % 8; + } + this.length++; + }, +}; +var QRCodeLimitLength = [ + [17, 14, 11, 7], + [32, 26, 20, 14], + [53, 42, 32, 24], + [78, 62, 46, 34], + [106, 84, 60, 44], + [134, 106, 74, 58], + [154, 122, 86, 64], + [192, 152, 108, 84], + [230, 180, 130, 98], + [271, 213, 151, 119], + [321, 251, 177, 137], + [367, 287, 203, 155], + [425, 331, 241, 177], + [458, 362, 258, 194], + [520, 412, 292, 220], + [586, 450, 322, 250], + [644, 504, 364, 280], + [718, 560, 394, 310], + [792, 624, 442, 338], + [858, 666, 482, 382], + [929, 711, 509, 403], + [1003, 779, 565, 439], + [1091, 857, 611, 461], + [1171, 911, 661, 511], + [1273, 997, 715, 535], + [1367, 1059, 751, 593], + [1465, 1125, 805, 625], + [1528, 1190, 868, 658], + [1628, 1264, 908, 698], + [1732, 1370, 982, 742], + [1840, 1452, 1030, 790], + [1952, 1538, 1112, 842], + [2068, 1628, 1168, 898], + [2188, 1722, 1228, 958], + [2303, 1809, 1283, 983], + [2431, 1911, 1351, 1051], + [2563, 1989, 1423, 1093], + [2699, 2099, 1499, 1139], + [2809, 2213, 1579, 1219], + [2953, 2331, 1663, 1273], +]; //---------------------------------------------------------------QR Code Object----------------------------------------------------------------- @@ -168,19 +1004,19 @@ function QRCode(options) { //Default options this.options = { - padding: 4, + padding: 0, width: 256, height: 256, typeNumber: 4, color: "#000000", background: "#ffffff", - ecl: "H" + ecl: "H", }; //In case the options is string - if (typeof options === 'string') { + if (typeof options === "string") { options = { - content: options + content: options, }; } @@ -191,11 +1027,14 @@ function QRCode(options) { } } - if (typeof this.options.content !== 'string') { + if (typeof this.options.content !== "string") { throw new Error("Expected 'content' as string!"); } - if (this.options.content.length === 0 /* || this.options.content.length > 7089 */) { + if ( + this.options.content.length === + 0 /* || this.options.content.length > 7089 */ + ) { throw new Error("Expected 'content' to be non-empty!"); } @@ -204,27 +1043,29 @@ function QRCode(options) { } if (!(this.options.width > 0) || !(this.options.height > 0)) { - throw new Error("Expected 'width' or 'height' value to be higher than zero!"); + throw new Error( + "Expected 'width' or 'height' value to be higher than zero!" + ); } //Gets the error correction level function _getErrorCorrectLevel(ecl) { switch (ecl) { - case "L": - return QRErrorCorrectLevel.L; + case "L": + return QRErrorCorrectLevel.L; - case "M": - return QRErrorCorrectLevel.M; + case "M": + return QRErrorCorrectLevel.M; - case "Q": - return QRErrorCorrectLevel.Q; + case "Q": + return QRErrorCorrectLevel.Q; - case "H": - return QRErrorCorrectLevel.H; + case "H": + return QRErrorCorrectLevel.H; - default: - throw new Error("Unknown error correction level: " + ecl); - } + default: + throw new Error("Unknown error correction level: " + ecl); + } } //Get type number @@ -236,7 +1077,9 @@ function QRCode(options) { for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) { var table = QRCodeLimitLength[i]; if (!table) { - throw new Error("Content too long: expected " + limit + " but got " + length); + throw new Error( + "Content too long: expected " + limit + " but got " + length + ); } switch (ecl) { @@ -276,7 +1119,9 @@ function QRCode(options) { //Gets text length function _getUTF8Length(content) { - var result = encodeURI(content).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a'); + var result = encodeURI(content) + .toString() + .replace(/\%[0-9a-fA-F]{2}/g, "a"); return result.length + (result.length != content ? 3 : 0); } @@ -292,7 +1137,7 @@ function QRCode(options) { //----------------------------------------------------Drawing out the QR Code as an SVG image------------------------------------------------------------ /** Generates QR Code as SVG image */ -QRCode.prototype.svg = function(opt) { +QRCode.prototype.svg = function (opt) { if (typeof opt == "undefined") { opt = { container: "svg" }; } @@ -300,15 +1145,23 @@ QRCode.prototype.svg = function(opt) { var options = this.options; var modules = this.qrcode.modules; - var EOL = '\r\n'; + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - - var rect = '' + EOL; + var xsize = width / length; + var ysize = height / length; + + var rect = + '' + + EOL; //Add the SVG element of each square in the body of the QR Code for (var y = 0; y < length; y++) { @@ -317,7 +1170,7 @@ QRCode.prototype.svg = function(opt) { if (module) { //rect += '' + EOL; //options.style = 'sharp-edge'; - rect += getShape(x,y,modules,options); + rect += getShape(x, y, modules, options); //rect += '' + EOL; } } @@ -330,15 +1183,23 @@ QRCode.prototype.svg = function(opt) { switch (opt.container) { case "svg": // !!!! The following line of code may need access to the internet to run... - svg += '' + EOL + '' + EOL; + svg += + '' + + EOL + + '' + + EOL; svg += rect; - svg += ''; + svg += ""; break; case "g": svg += '' + EOL; svg += rect; - svg += ''; + svg += ""; break; default: @@ -350,211 +1211,649 @@ QRCode.prototype.svg = function(opt) { }; /*Returns an svg element in the right shape determined by the surrounding modules and the qr code style*/ -function getShape(x,y,modules,options){ - +function getShape(x, y, modules, options) { //Get the surrounding modules matrix var mod_matrix = {}; - mod_matrix.topLeft = (x!=0 && y!=0 && modules[x-1][y-1]); - mod_matrix.top = (y!=0 && modules[x][y-1]); - mod_matrix.topRight = (x!=modules.length-1 && y!=0 && modules[x+1][y-1]); - mod_matrix.left = (x!=0 && modules[x-1][y]); - mod_matrix.right = (x!=modules.length-1 && modules[x+1][y]); - mod_matrix.bottomLeft = (x!=0 && y!=modules.length-1 && modules[x-1][y+1]); - mod_matrix.bottom = (y!=modules.length-1 && modules[x][y+1]); - mod_matrix.bottomRight = (x!=modules.length-1 && y!=modules.length-1 && modules[x+1][y+1]); + mod_matrix.topLeft = x != 0 && y != 0 && modules[x - 1][y - 1]; + mod_matrix.top = y != 0 && modules[x][y - 1]; + mod_matrix.topRight = + x != modules.length - 1 && y != 0 && modules[x + 1][y - 1]; + mod_matrix.left = x != 0 && modules[x - 1][y]; + mod_matrix.right = x != modules.length - 1 && modules[x + 1][y]; + mod_matrix.bottomLeft = + x != 0 && y != modules.length - 1 && modules[x - 1][y + 1]; + mod_matrix.bottom = y != modules.length - 1 && modules[x][y + 1]; + mod_matrix.bottomRight = + x != modules.length - 1 && y != modules.length - 1 && modules[x + 1][y + 1]; var surroundingCount = 0; - if(mod_matrix.top){surroundingCount++;} - if(mod_matrix.left){surroundingCount++;} - if(mod_matrix.right){surroundingCount++;} - if(mod_matrix.bottom){surroundingCount++;} + if (mod_matrix.top) { + surroundingCount++; + } + if (mod_matrix.left) { + surroundingCount++; + } + if (mod_matrix.right) { + surroundingCount++; + } + if (mod_matrix.bottom) { + surroundingCount++; + } //Find out box shape from surroundingCount and the orientation of those surrounding modules - switch(surroundingCount){ + switch (surroundingCount) { case 0: - return getShapeZero(x,y,options,modules); + return getShapeZero(x, y, options, modules); case 1: - return getShapeOne(x,y,options,modules,mod_matrix); + return getShapeOne(x, y, options, modules, mod_matrix); case 2: - return getShapeTwo(x,y,options,modules,mod_matrix); + return getShapeTwo(x, y, options, modules, mod_matrix); case 3: - return getShapeThree(x,y,options,modules,mod_matrix); + return getShapeThree(x, y, options, modules, mod_matrix); case 4: - return getShapeFour(x,y,options,modules,mod_matrix); + return getShapeFour(x, y, options, modules, mod_matrix); default: - return getShapeZero(x,y,options,modules); + return getShapeZero(x, y, options, modules); } - //This function checks that arrays a1 and a2 are the same: - /* a1.length==a2.length && a1.every(function(v,i) { return v === a2[i]}) */ - + //This function checks that arrays a1 and a2 are the same: + /* a1.length==a2.length && a1.every(function(v,i) { return v === a2[i]}) */ } //Returns an SVG element for a box with no surrounding boxes -function getShapeZero(x,y,options,modules){ - - var EOL = '\r\n'; +function getShapeZero(x, y, options, modules) { + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - var px = (x * xsize + options.padding * xsize); - var py = (y * ysize + options.padding * ysize); - - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; - case 'ninja': - return '' + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); + case "ninja": + return ( + '' + ); } } //Returns an SVG element for a box with one surrounding box -function getShapeOne(x,y,options,modules,mod_matrix){ - - var EOL = '\r\n'; +function getShapeOne(x, y, options, modules, mod_matrix) { + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - var px = (x * xsize + options.padding * xsize); - var py = (y * ysize + options.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; var orientation = 0; - if(mod_matrix.right){orientation=90;} - else if(mod_matrix.bottom){orientation=180;} - else if(mod_matrix.left){orientation=270;} + if (mod_matrix.right) { + orientation = 90; + } else if (mod_matrix.bottom) { + orientation = 180; + } else if (mod_matrix.left) { + orientation = 270; + } //Returning a 1b - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } //Returns an SVG element for a box with two surrounding boxes -function getShapeTwo(x,y,options,modules,mod_matrix){ - - var EOL = '\r\n'; +function getShapeTwo(x, y, options, modules, mod_matrix) { + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - var px = (x * xsize + options.padding * xsize); - var py = (y * ysize + options.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; //If in the middle of a straight line, return a 1b3b - if( (mod_matrix.top && mod_matrix.bottom) || (mod_matrix.left && mod_matrix.right) ){ - var orientation = (mod_matrix.top && mod_matrix.bottom) ? 0 : 90; - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + if ( + (mod_matrix.top && mod_matrix.bottom) || + (mod_matrix.left && mod_matrix.right) + ) { + var orientation = mod_matrix.top && mod_matrix.bottom ? 0 : 90; + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } //If a diagonal is in between the two surrounding (module is on a corner), return a 2a1b1a - if(mod_matrix.topLeft || mod_matrix.topRight || mod_matrix.bottomLeft || mod_matrix.bottomRight){ - + if ( + mod_matrix.topLeft || + mod_matrix.topRight || + mod_matrix.bottomLeft || + mod_matrix.bottomRight + ) { var orientation = 0; - if(mod_matrix.top && mod_matrix.topRight && mod_matrix.right){orientation=90;} - else if(mod_matrix.right && mod_matrix.bottomRight && mod_matrix.bottom){orientation=180;} - else if(mod_matrix.left && mod_matrix.bottomLeft && mod_matrix.bottom){orientation=270;} + if (mod_matrix.top && mod_matrix.topRight && mod_matrix.right) { + orientation = 90; + } else if ( + mod_matrix.right && + mod_matrix.bottomRight && + mod_matrix.bottom + ) { + orientation = 180; + } else if (mod_matrix.left && mod_matrix.bottomLeft && mod_matrix.bottom) { + orientation = 270; + } - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } //Else in the center of a right angle var orientation = 0; - if(mod_matrix.top && mod_matrix.right){orientation=90;} - else if(mod_matrix.right && mod_matrix.bottom){orientation=180;} - else if(mod_matrix.bottom && mod_matrix.left){orientation=270;} - - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + if (mod_matrix.top && mod_matrix.right) { + orientation = 90; + } else if (mod_matrix.right && mod_matrix.bottom) { + orientation = 180; + } else if (mod_matrix.bottom && mod_matrix.left) { + orientation = 270; + } + + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } //Returns an SVG element for a box with one surrounding box -function getShapeThree(x,y,options,modules,mod_matrix){ - - var EOL = '\r\n'; +function getShapeThree(x, y, options, modules, mod_matrix) { + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - var px = (x * xsize + options.padding * xsize); - var py = (y * ysize + options.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; //in two supplementary right angle var orientation = 0; - if(mod_matrix.top && mod_matrix.right && mod_matrix.bottom){orientation=90;} - else if(mod_matrix.right && mod_matrix.bottom && mod_matrix.left){orientation=180;} - else if(mod_matrix.bottom && mod_matrix.left && mod_matrix.top){orientation=270;} - - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + if (mod_matrix.top && mod_matrix.right && mod_matrix.bottom) { + orientation = 90; + } else if (mod_matrix.right && mod_matrix.bottom && mod_matrix.left) { + orientation = 180; + } else if (mod_matrix.bottom && mod_matrix.left && mod_matrix.top) { + orientation = 270; + } + + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } //Returns an SVG element for a box with one surrounding box -function getShapeFour(x,y,options,modules,mod_matrix){ - - var EOL = '\r\n'; +function getShapeFour(x, y, options, modules, mod_matrix) { + var EOL = "\r\n"; var width = options.width; var height = options.height; var length = modules.length; var style = options.style; - var xsize = width / (length + 2 * options.padding); - var ysize = height / (length + 2 * options.padding); - var px = (x * xsize + options.padding * xsize); - var py = (y * ysize + options.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; //Else in the center of a horizontal-vertical cross var orientation = 0; - switch(options.style){ - case 'square': - return '' + EOL; - case 'circle': - return '' + EOL; - case 'sharp-edge': - return '' + EOL; + switch (options.style) { + case "square": + return ( + '' + + EOL + ); + case "circle": + return ( + '' + + EOL + ); + case "sharp-edge": + return ( + '' + + EOL + ); } } diff --git a/lib/styles/codeStyles/circle.js b/lib/styles/codeStyles/circle.js index 51f4bac7..505910d9 100644 --- a/lib/styles/codeStyles/circle.js +++ b/lib/styles/codeStyles/circle.js @@ -7,17 +7,25 @@ This file exports a function for drawing a circle centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Circle } from 'react-native-svg'; +import React from "react"; +import { Circle } from "react-native-svg"; //Returns an SVG Element for a piece of the 'circle' codeStyle -export function drawCirclePiece(x,y,modules,pieceProperties,props){ +export function drawCirclePiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize)+xsize/2; - var py = (y * ysize + props.padding * ysize)+ysize/2; - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize + xsize / 2; + var py = y * ysize + ysize / 2; + return ( + + ); } diff --git a/lib/styles/codeStyles/diamond.js b/lib/styles/codeStyles/diamond.js index 653fb8f6..9b732165 100644 --- a/lib/styles/codeStyles/diamond.js +++ b/lib/styles/codeStyles/diamond.js @@ -7,17 +7,29 @@ This file exports a function for drawing a diamond centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect, G } from 'react-native-svg'; +import React from "react"; +import { G, Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'diamond' codeStyle -export function drawDiamondPiece(x,y,modules,pieceProperties,props){ +export function drawDiamondPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + + + ); } diff --git a/lib/styles/codeStyles/dot.js b/lib/styles/codeStyles/dot.js index 9c741709..9ce97c79 100644 --- a/lib/styles/codeStyles/dot.js +++ b/lib/styles/codeStyles/dot.js @@ -7,17 +7,25 @@ This file exports a function for drawing a dot centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Circle } from 'react-native-svg'; +import React from "react"; +import { Circle } from "react-native-svg"; //Returns an SVG Element for a piece of the 'dot' codeStyle -export function drawDotPiece(x,y,modules,pieceProperties,props){ +export function drawDotPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize)+xsize/2; - var py = (y * ysize + props.padding * ysize)+ysize/2; - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize + xsize / 2; + var py = y * ysize + ysize / 2; + return ( + + ); } diff --git a/lib/styles/codeStyles/ninja.js b/lib/styles/codeStyles/ninja.js index dd5ea9d8..35133ae1 100644 --- a/lib/styles/codeStyles/ninja.js +++ b/lib/styles/codeStyles/ninja.js @@ -7,39 +7,126 @@ This file exports a function for drawing a ninja centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect } from 'react-native-svg'; +import React from "react"; +import { Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'ninja' codeStyle -export function drawNinjaPiece(x,y,modules,pieceProperties,props){ - +export function drawNinjaPiece(x, y, modules, pieceProperties, props) { var orientation = pieceProperties.orientation; var pieceType = pieceProperties.pieceType; var width = props.size; var height = props.size; var length = modules.length; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; // !!!! These aren't the proper paths yet - switch(pieceType){ - case '2b': - return (); - case '1b': - return (); - case '1b3b': - return (); - case '2a1b': - return (); - case '2a1b1a': - return (); - case '2a1b2c': - return (); - case '2a1b2c3b': - return (); + switch (pieceType) { + case "2b": + return ( + + ); + case "1b": + return ( + + ); + case "1b3b": + return ( + + ); + case "2a1b": + return ( + + ); + case "2a1b1a": + return ( + + ); + case "2a1b2c": + return ( + + ); + case "2a1b2c3b": + return ( + + ); default: - return (); + return ( + + ); } } diff --git a/lib/styles/codeStyles/sharp.js b/lib/styles/codeStyles/sharp.js index f7e45cce..478ed434 100644 --- a/lib/styles/codeStyles/sharp.js +++ b/lib/styles/codeStyles/sharp.js @@ -7,42 +7,112 @@ This file exports a function for drawing a sharp centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect, Circle } from 'react-native-svg'; +import React from "react"; +import { Circle, Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'sharp' codeStyle -export function drawSharpPiece(x,y,modules,pieceProperties,props){ - +export function drawSharpPiece(x, y, modules, pieceProperties, props) { var orientation = pieceProperties.orientation; var pieceType = pieceProperties.pieceType; var width = props.size; var height = props.size; var length = modules.length; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; // !!!! These aren't the proper paths yet - var str = (xsize)+','+0+' '+(xsize)+','+(ysize)+' '+0+','+(ysize); - var rotationStr = orientation+', '+(xsize/2)+', '+(ysize/2); + var str = xsize + "," + 0 + " " + xsize + "," + ysize + " " + 0 + "," + ysize; + var rotationStr = orientation + ", " + xsize / 2 + ", " + ysize / 2; - switch(pieceType){ - case '1a': - return (); - case '2b': - return (); - case '1b3b': - return (); - case '2a1b': - return (); - case '2a1b1a': - return (); - case '2a1b2c': - return (); - case '2a1b2c3b': - return (); + switch (pieceType) { + case "1a": + return ( + + ); + case "2b": + return ( + + ); + case "1b3b": + return ( + + ); + case "2a1b": + return ( + + ); + case "2a1b1a": + return ( + + ); + case "2a1b2c": + return ( + + ); + case "2a1b2c3b": + return ( + + ); default: - return (); + return ( + + ); } } diff --git a/lib/styles/codeStyles/square.js b/lib/styles/codeStyles/square.js index 5dc0965e..ab137e84 100644 --- a/lib/styles/codeStyles/square.js +++ b/lib/styles/codeStyles/square.js @@ -7,17 +7,26 @@ This file exports a function for drawing a square centre piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect } from 'react-native-svg'; +import React from "react"; +import { Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'square' codeStyle -export function drawSquarePiece(x,y,modules,pieceProperties,props){ +export function drawSquarePiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + ); } diff --git a/lib/styles/innerEyeStyles/circle.js b/lib/styles/innerEyeStyles/circle.js index 2140940f..a1061406 100644 --- a/lib/styles/innerEyeStyles/circle.js +++ b/lib/styles/innerEyeStyles/circle.js @@ -7,17 +7,25 @@ This file exports a function for drawing a circle outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Circle } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { Circle } from "react-native-svg"; //Returns an SVG Element for a piece of the 'circle' outerEyeStyle -export function drawCirclePiece(x,y,modules,pieceProperties,props){ +export function drawCirclesPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize)+xsize/2; - var py = (y * ysize + props.padding * ysize)+ysize/2; - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize + xsize / 2; + var py = y * ysize + ysize / 2; + return ( + + ); } diff --git a/lib/styles/innerEyeStyles/diamond.js b/lib/styles/innerEyeStyles/diamond.js index 8d5084ea..b621aab2 100644 --- a/lib/styles/innerEyeStyles/diamond.js +++ b/lib/styles/innerEyeStyles/diamond.js @@ -7,17 +7,29 @@ This file exports a function for drawing a diamond outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect, G } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { G, Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'diamond' outerEyeStyle -export function drawDiamondPiece(x,y,modules,pieceProperties,props){ +export function drawDiamondPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + + + ); } diff --git a/lib/styles/innerEyeStyles/index.js b/lib/styles/innerEyeStyles/index.js index be52cf06..79d8834c 100644 --- a/lib/styles/innerEyeStyles/index.js +++ b/lib/styles/innerEyeStyles/index.js @@ -8,20 +8,24 @@ This file exports a function for drawing the inner eye pieces of a QRCode */ -import { drawSquarePiece } from './square'; -import { drawCirclePiece } from './circle'; -import { drawDiamondPiece } from './diamond'; +import { drawCirclesPiece } from "./circle"; +import { drawDiamondPiece } from "./diamond"; +import { drawNone } from "./none"; +import { drawSquarePiece } from "./square"; //Returns an SVG Element for an outer eye piece in the style of the innerEyeStyle -export function drawInnerEyePiece(x,y,modules,pieceProperties,props){ - switch(props.innerEyeStyle){ - case 'square': - return drawSquarePiece(x,y,modules,pieceProperties,props); - case 'circle': - return drawCirclePiece(x,y,modules,pieceProperties,props); - case 'diamond': - return drawDiamondPiece(x,y,modules,pieceProperties,props); - default: - return drawSquarePiece(x,y,modules,pieceProperties,props); - } +export function drawInnerEyePiece(x, y, modules, pieceProperties, props) { + switch (props.innerEyeStyle) { + case "square": + return drawSquarePiece(x, y, modules, pieceProperties, props); + case "circles": + return drawCirclesPiece(x, y, modules, pieceProperties, props); + case "diamond": + return drawDiamondPiece(x, y, modules, pieceProperties, props); + case "circle": + case "rounded": + return drawNone(x, y, modules, pieceProperties, props); + default: + return drawSquarePiece(x, y, modules, pieceProperties, props); + } } diff --git a/lib/styles/innerEyeStyles/none.js b/lib/styles/innerEyeStyles/none.js new file mode 100644 index 00000000..1ca70265 --- /dev/null +++ b/lib/styles/innerEyeStyles/none.js @@ -0,0 +1,8 @@ +import * as React from "react"; + +import { View } from "react-native"; + +//Returns an SVG Element for a piece of the 'circle' outerEyeStyle +export function drawNone(x, y, modules, pieceProperties, props) { + return ; +} diff --git a/lib/styles/innerEyeStyles/square.js b/lib/styles/innerEyeStyles/square.js index 85918e98..d8e2a23d 100644 --- a/lib/styles/innerEyeStyles/square.js +++ b/lib/styles/innerEyeStyles/square.js @@ -7,17 +7,26 @@ This file exports a function for drawing a square outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'square' outerEyeStyle -export function drawSquarePiece(x,y,modules,pieceProperties,props){ +export function drawSquarePiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + ); } diff --git a/lib/styles/outerEyeStyles/circle.js b/lib/styles/outerEyeStyles/circle.js index 2140940f..a1061406 100644 --- a/lib/styles/outerEyeStyles/circle.js +++ b/lib/styles/outerEyeStyles/circle.js @@ -7,17 +7,25 @@ This file exports a function for drawing a circle outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Circle } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { Circle } from "react-native-svg"; //Returns an SVG Element for a piece of the 'circle' outerEyeStyle -export function drawCirclePiece(x,y,modules,pieceProperties,props){ +export function drawCirclesPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize)+xsize/2; - var py = (y * ysize + props.padding * ysize)+ysize/2; - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize + xsize / 2; + var py = y * ysize + ysize / 2; + return ( + + ); } diff --git a/lib/styles/outerEyeStyles/diamond.js b/lib/styles/outerEyeStyles/diamond.js index 8d5084ea..b621aab2 100644 --- a/lib/styles/outerEyeStyles/diamond.js +++ b/lib/styles/outerEyeStyles/diamond.js @@ -7,17 +7,29 @@ This file exports a function for drawing a diamond outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect, G } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { G, Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'diamond' outerEyeStyle -export function drawDiamondPiece(x,y,modules,pieceProperties,props){ +export function drawDiamondPiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + + + ); } diff --git a/lib/styles/outerEyeStyles/index.js b/lib/styles/outerEyeStyles/index.js index a079dda1..d29fbc66 100644 --- a/lib/styles/outerEyeStyles/index.js +++ b/lib/styles/outerEyeStyles/index.js @@ -7,21 +7,24 @@ This file exports a function for drawing the outer eye pieces of a QRCode --Geoff Natin 11/1/18 17:41 */ - -import { drawSquarePiece } from './square'; -import { drawCirclePiece } from './circle'; -import { drawDiamondPiece } from './diamond'; +import { drawCirclesPiece } from "./circle"; +import { drawDiamondPiece } from "./diamond"; +import { drawNone } from "./none"; +import { drawSquarePiece } from "./square"; //Returns an SVG Element for an outer eye piece in the style of the outerEyeStyle -export function drawOuterEyePiece(x,y,modules,pieceProperties,props){ - switch(props.outerEyeStyle){ - case 'square': - return drawSquarePiece(x,y,modules,pieceProperties,props); - case 'circle': - return drawCirclePiece(x,y,modules,pieceProperties,props); - case 'diamond': - return drawDiamondPiece(x,y,modules,pieceProperties,props); - default: - return drawSquarePiece(x,y,modules,pieceProperties,props); - } +export function drawOuterEyePiece(x, y, modules, pieceProperties, props) { + switch (props.outerEyeStyle) { + case "square": + return drawSquarePiece(x, y, modules, pieceProperties, props); + case "circles": + return drawCirclesPiece(x, y, modules, pieceProperties, props); + case "diamond": + return drawDiamondPiece(x, y, modules, pieceProperties, props); + case "circle": + case "rounded": + return drawNone(x, y, modules, pieceProperties, props); + default: + return drawSquarePiece(x, y, modules, pieceProperties, props); + } } diff --git a/lib/styles/outerEyeStyles/none.js b/lib/styles/outerEyeStyles/none.js new file mode 100644 index 00000000..1ca70265 --- /dev/null +++ b/lib/styles/outerEyeStyles/none.js @@ -0,0 +1,8 @@ +import * as React from "react"; + +import { View } from "react-native"; + +//Returns an SVG Element for a piece of the 'circle' outerEyeStyle +export function drawNone(x, y, modules, pieceProperties, props) { + return ; +} diff --git a/lib/styles/outerEyeStyles/square.js b/lib/styles/outerEyeStyles/square.js index 85918e98..d8e2a23d 100644 --- a/lib/styles/outerEyeStyles/square.js +++ b/lib/styles/outerEyeStyles/square.js @@ -7,17 +7,26 @@ This file exports a function for drawing a square outer eye piece for a QRCode --Geoff Natin 11/1/18 17:41 */ -import React, { Component } from 'react'; -import Svg, { Rect } from 'react-native-svg'; +import React, { Component } from "react"; +import Svg, { Rect } from "react-native-svg"; //Returns an SVG Element for a piece of the 'square' outerEyeStyle -export function drawSquarePiece(x,y,modules,pieceProperties,props){ +export function drawSquarePiece(x, y, modules, pieceProperties, props) { var length = modules.length; var width = props.size; var height = props.size; - var xsize = width / (length + 2 * props.padding); - var ysize = height / (length + 2 * props.padding); - var px = (x * xsize + props.padding * xsize); - var py = (y * ysize + props.padding * ysize); - return (); + var xsize = width / length; + var ysize = height / length; + var px = x * xsize; + var py = y * ysize; + return ( + + ); } diff --git a/package-lock.json b/package-lock.json index 853137dd..a582a7a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,16 +4,283 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/code-frame": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", + "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", + "requires": { + "@babel/highlight": "^7.16.7" + } + }, + "@babel/generator": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz", + "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==", + "requires": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-annotate-as-pure": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz", + "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==", + "requires": { + "@babel/types": "^7.16.7" + } + }, + "@babel/helper-environment-visitor": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz", + "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==", + "requires": { + "@babel/types": "^7.16.7" + } + }, + "@babel/helper-function-name": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz", + "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==", + "requires": { + "@babel/template": "^7.16.7", + "@babel/types": "^7.17.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz", + "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==", + "requires": { + "@babel/types": "^7.16.7" + } + }, + "@babel/helper-module-imports": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", + "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", + "requires": { + "@babel/types": "^7.16.7" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz", + "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==", + "requires": { + "@babel/types": "^7.16.7" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", + "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==" + }, + "@babel/highlight": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz", + "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==", + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "dependencies": { + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + } + } + }, + "@babel/parser": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz", + "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==" + }, + "@babel/template": { + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", + "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==", + "requires": { + "@babel/code-frame": "^7.16.7", + "@babel/parser": "^7.16.7", + "@babel/types": "^7.16.7" + } + }, + "@babel/traverse": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz", + "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==", + "requires": { + "@babel/code-frame": "^7.16.7", + "@babel/generator": "^7.17.9", + "@babel/helper-environment-visitor": "^7.16.7", + "@babel/helper-function-name": "^7.17.9", + "@babel/helper-hoist-variables": "^7.16.7", + "@babel/helper-split-export-declaration": "^7.16.7", + "@babel/parser": "^7.17.9", + "@babel/types": "^7.17.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + } + }, + "@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true + }, + "@types/react": { + "version": "18.0.6", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.6.tgz", + "integrity": "sha512-bPqwzJRzKtfI0mVYr5R+1o9BOE8UEXefwc1LwcBtfnaAn6OoqMhLa/91VA8aeWfDPJt1kHvYKI8RHcQybZLHHA==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-native": { + "version": "0.67.5", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.5.tgz", + "integrity": "sha512-x/rAJSH4N/ZT4plkRHgWgEJ4Y2x8y+ssC5EwEgSEOZagS6lQcyjOsC7dID+xTwJke07fSYCl6DL833QbLOxWIg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "^1.9.0" + } + }, "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, "core-js": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", + "dev": true + }, + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, "encoding": { "version": "0.1.12", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", @@ -22,6 +289,11 @@ "iconv-lite": "~0.4.13" } }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + }, "fbjs": { "version": "0.8.16", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", @@ -36,6 +308,24 @@ "ua-parser-js": "^0.7.9" } }, + "globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "iconv-lite": { "version": "0.4.19", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", @@ -60,6 +350,16 @@ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, + "jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "loose-envify": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", @@ -68,6 +368,11 @@ "js-tokens": "^3.0.0" } }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -82,6 +387,16 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -100,11 +415,56 @@ "object-assign": "^4.1.1" } }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + }, + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" + }, "ua-parser-js": { "version": "0.7.17", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", diff --git a/package.json b/package.json index 7752eb55..0e4c20e8 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "react-native-custom-qr-codes", - "version": "2.0.0", + "name": "@oguzhnatly/react-native-custom-qr-codes", + "version": "2.0.4", "main": "index.js", - "description": "A customisable QR code component for React Native applications.", + "description": "Customizable QR codes for React Native with TypeScript and RTL support", "keywords": [ "react-native", "react-native-component", @@ -14,23 +14,26 @@ "custom-qr-code" ], "author": { - "name": "Geoffrey Natin", - "email": "nating@tcd.ie", - "url": "https://github.com/nating" + "name": "Oguzhan Atalay", + "url": "https://github.com/oguzhnatly" }, - "homepage": "https://github.com/nating/react-native-custom-qr-codes", + "homepage": "https://github.com/oguzhnatly/react-native-custom-qr-codes", "repository": { "type": "git", - "url": "git://github.com/nating/react-native-custom-qr-codes.git" + "url": "https://github.com/oguzhnatly/react-native-custom-qr-codes" }, "bugs": { - "url": "https://github.com/nating/react-native-custom-qr-codes/issues" + "url": "https://github.com/oguzhnatly/react-native-custom-qr-codes/issues" }, "license": "MIT", "dependencies": { - "prop-types": "^15.5.10" + "prop-types": "^15.5.10", + "styled-components": "^5.3.5" }, "peerDependencies": { "react-native-svg": "^6.2.0" + }, + "devDependencies": { + "@types/react-native": "^0.67.5" } }