open-index/open-npm huggingface dataset:
npm package: @studysync/react-svg-text
Description: **Note: Merged into [vx](https://github.com/hshoff/vx) and is now [@vx/text](https://github.com/hshoff/vx/tree/master/packages/vx-text)**
Latest version: 2.0.3

# Better SVG text component for React

**Note: Merged into [vx](https://github.com/hshoff/vx) and is now [@vx/text](https://github.com/hshoff/vx/tree/master/packages/vx-text)**

## Features
- Word-wrapping (when `width` prop is defined)
- Vertical alignment (`verticalAnchor` prop)
- Rotation (`angle` prop)
- Scale-to-fit text (`scaleToFit` prop)

## Example
Simple demo to show off a useful feature.  Since svg `<text>` itself does not support `verticalAnchor`, normally text rendered at `0,0` would be outside the viewport and not visible.  By using `<Text>` with `verticalAnchor="start"` prop, the text will now be visible as you'd expect.
```jsx
import React from 'react';
import { render } from 'react-dom';
import Text from 'react-svg-text';

const App = () => (
  <svg>
    <Text verticalAnchor="start">Hello world</Text>
  </svg>
);

render(<App />, document.getElementById('root'));
```

See [demo](https://techniq.github.io/react-svg-text/) to see additional props and how they work

### Props
Property | Type | Default | Description
-------- | ---- | ------- | -----------
`x` | number | | x coordinate to use as a basis for positioning the text element
`y` | number | | y coordinate to use as a basis for positioning the text element
`dx` | number | | Horizontal shift from the x coordinate
`dy` | number | | Vertical shift from the y coordinate
`width` | number | | Width of text container.  Used to implement word wrapping and for context when `scaleToFit` is true
`scaleToFit` | bool | false | Resize text to fit container width
`angle` | number | | Rotate text around origin (defined by `textAnchor` and `verticalAnchor`)
`textAnchor` | string | start | How the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`, and `inherit`.
`verticalAnchor` | string | end | How text is vertically positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`
`lineHeight` | string | 1em | How much space a single line of text should take up
`capHeight` | string | 0.71em (Magic number from d3) | Defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at y, and (b) has no notion of line height. This prop should be given as a number of ems
additional props | | | Additional props are passed down to underlying `<text>` component, including `style` and `className`

## TODO
- Fix tests (jsdom does not support `getComputedTextLength()` or `getBoundingClientRect()`) and setup CI
  - Consider using [jest-electron-runner](https://github.com/d4rkr00t/jest-electron-runner), although it currently hangs.  Seems to be a [known issue](https://github.com/d4rkr00t/jest-electron-runner/issues/5)
npm package: @studysync/svg-draw
Description: SVG image editor with customizable shapes and controls
Author: Sergey Koloney
Latest version: 0.2.16

# SvgDraw

This project in fact is a lightweight version of great [tldraw](https://tldraw.com) application
with stripped down functionality and different choice of UI and state management libraries.

So if you need a full-fleshed svg editor in your browser - TlDraw will do an incredible job for you;
this one is made as a simpler and lighter module which dependencies are more likely to hit the choice of UI and state managements libs in the main app. 

Differences are:
 - MobX and zustand replaced with immer and simple custom stores implementation
 - radix-ui and stitches substituted with material-ui and emotion
 - minimal tools set: shapes, image, text, grid 
 - ~60Kb minified (not including deps)

## Usage
```
const initPicture = {
  id: 'page',
  shapes: {
    rect1: {
      id: 'rect1',
      type: 'rect',
      parentId: 'page',
      childIndex: 1,
      rotation: 0,
      styles: {
        color: '#1c7ed6',
        fill: '#d2e4f4',
      },
      point: [100, 100],
      size: [100, 100],
    },
    line1: {
      id: 'line1',
      type: 'line',
      parentId: 'page',
      childIndex: 2,
      rotation: 0,
      styles: {
        color: '#36b24d',
      },
      point: [300, 100],
      handles: {
        start: {
          id: 'start',
          index: 1,
          point: [0, 0],
        },
        end: {
          id: 'end',
          index: 2,
          point: [50, 50],
        },
      },
    },
  },
}

<SvgDraw data={initPicture} />
```

## License
This project is licensed under MIT.