open-index/open-npm huggingface dataset:
npm package: @nextml/far-canvas
Description: Fixes web html5 canvas for big translations (100Mpx)
Author: nextml
Latest version: 0.3.4

# far-canvas

## install

```bash
npm install @nextml/far-canvas
```

## motivation

For example: translated `100'000'000px` away from the center (and a scaling of 1.5) and rendering the objects that far away:

### vanilla canvas exapmle at 0px translation

<img
  src="static/reference-canvas.png"
  alt="vanilla canvas example"
  title="Vanilla Canvas Example"
  style="display: inline-block; margin: 0 auto;">

### vanilla canvas example at 100Mpx translation

<img
  src="static/vanilla-canvas.png"
  alt="vanilla canvas example"
  title="Vanilla Canvas Example"
  style="display: inline-block; margin: 0 auto;">

### far canvas example at 100Mpx translation

<img
  src="static/far-canvas.png"
  alt="far canvas example"
  title="Far Canvas Example"
  style="display: inline-block; margin: 0 auto;">

1. Images, rectangles and lines are all missaligned.
2. `lineWidth=8px` is not rendered correctly.

## usage

### Node

```javascript
const { far } = require("../lib.cjs/index.js");

const farAway = 100000000;
const context = far(canvas, {y: -farAway, scale: 2}).getContext("2d");

context.clearCanvas();
context.fillRect(32, farAway + 16, 128, 128);

context.canvas; // underlying canvas for which the default unit is pixels
context.s; // coordinate system
context.s.inv; // inverse coordinate system

...
```

### Web

```javascript
const canvas = document.getElementById('far');

const farAway = 100000000;
const context = far.far(canvas, {y: -farAway, scale: 2}).getContext("2d");

...
```

## development

### run example

```bash
npm run example
```

### update version

```bash
npm version patch | minor | major
```
npm package: @nextml/lodestar
Description: JavaScript utility library
Latest version: 0.1.2

# Lodestar

JavaScript utility library.

## Installation

```
npm install @nextml/lodestar
```

[API Documentation](https://nextml-code.github.io/lodestar)

## Checklist

1. Tests
2. Docstring
3. Build docs
4. Is exported in `src/index.js`
5. Npm version `npm version patch | minor | major`
npm package: @nextml/lodestar-react
Description: React standard library for nextml react projects
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Lodestar React

React standard library for nextml react projects

```
npm i @nextml/lodestar-react
```

[API Reference](https://nextml-code.github.io/lodestar-react/)
npm package: @nextml/react-file-upload
Description: **NOTE! v0.x.x-beta. Not stable.**
Latest version: 0.8.2

# @nextml/react-file-upload

**NOTE! v0.x.x-beta. Not stable.**

File upload component for React.

## Installation

```
npm install @nextml/react-file-upload
```

## Basic Usage

```javascript
import { FileUpload } from "@nextml/react-file-upload";
```

```jsx
<FileUpload
  // Upload url
  url="https://my.awesome/api/endpoint"
  // The callback function is called each
  // time we get a file upload response.
  onUploadResponse={(fileUploadResponse, file) => {
    // Do something with a file upload response or file
  }}
  // Amount of parallel file uploads.
  // Defaults to 1.
  requestBatchSize={1}
  // Calls this function with the
  // data returned from the upload request
  // of a file
  onRowClick={(fileResponseData) => {
    // Do something with the data from the file upload response
  }}
  // Options for configuring the request made
  // when posting the file to the specified url.
  requestOptions={{
    headers: {},
    body: {
      /* JSON */
    },
  }}
/>
```

## Request options

### JSON

Its possible to set request headers and body through the `requestOptions` parameter.

If a body is set the `content-type` header is set to `application/json` and the file will be converted to a base64 string and passed to the `body.file.data` field i.e.

```javascript
// Request body:
{
  ...requestOptions.body,
  file: {
    ...requestOptions.body.file,
    data: "data:image/jpeg;base64,/9j/4AAQSkZJRgABA...",
  },
}
```

### form-data

Set additional `multipart/form-data` entries through the `requestOptions.form` parameter.

The uploaded file will still be set as the entry `file`.

Example:

```javascript
requestionOptions={{
  form: {
    text: "text",
    value: 3,
  }
}}
```

Does not yet support nested `requestionOptions.form`.

Make sure that the peer dependencies in `package.json` are installed in your application.

## Development

Start storybook with

```
npm start
```

## Contribution

Please let us know if you have any issues. Put an issue here on github and we'll do our best to solve it.