open-index/open-npm huggingface dataset:
npm package: @hsu-cesium/canvas-renderer
Description: some cesium utils
Author: VitaHsu
Latest version: 0.0.15
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# [Cesium Canvas Renderer](https://github.com/VitaTsui/canvas-renderer)

## 废弃

包名变更为 **@hsu-canvas/renderer**，Github 地址为[https://github.com/VitaTsui/canvas-renderer](https://github.com/VitaTsui/canvas-renderer)

## 前言

`cesium-canvas-renderer` 一些生成 canvas 的渲染器

## 安装

```sh
npm install --save @hsu-cesium/canvas-renderer
# 或
yarn add @hsu-cesium/canvas-renderer
```

## 功能

- `TextGraphics` 文本图形
- `ImageGraphics` 图像图形
- `loadImage` 异步加载图片
npm package: @hsu-react/signature
Description: A React Signature Component
Author: VitaHsu
Latest version: 0.0.3

﻿# [Signature](https://github.com/VitaTsui/signature.git)

## 前言

`Signature` 一个适用于 React 的签字板

## 效果

![竖屏](/image/竖屏.png)
![横屏](/image/横屏.png)

## 安装

```sh
npm install --save @hsu-react/signature
# 或
yarn add @hsu-react/signature
```

## 使用

```react
import Signature from "@hsu-react/signature";

const App:React.FC = () => {
  return (
    <Signature />
  );
}
```

## 参数

| 参数       | 说明         | 类型                                      | 默认值 |
| ---------- | ------------ | ----------------------------------------- | ------ |
| onConfirm  | 点击确认回调 | (src: string, blob: Blob \| null) => void | -      |
| onCancel   | 点击取消回调 | () => void                                | -      |
| horizontal | 是否横屏     | boolean                                   | false  |
| visible    | 是否显示     | boolean                                   | false  |
npm package: @hsuehpe/easy-email-editor
Description: Email editor
Author: hsuehpe
Latest version: 4.12.0-alpha.0

# Easy-email-editor

## Introduction

Email render and preview container.

## usage

```sh
$ npm install --save easy-email-editor
```

or

```sh
$ yarn add easy-email-editor
```

```js
import React from "react";
import { BlockManager } from "easy-email-core";
import { EmailEditor, EmailEditorProvider } from "easy-email-editor";
import "easy-email-editor/lib/style.css";

const initialValues = {
  subject: "Welcome to Easy-email",
  subTitle: "Nice to meet you!",
  content: BlockManager.getBlockByType(BasicType.PAGE).create({}),
};

export function App() {
  return (
    <EmailEditorProvider data={initialValues} height={"calc(100vh - 72px)"}>
      {({ values }) => {
        return <EmailEditor />;
      }}
    </EmailEditorProvider>
  );
}
```

## customize

If you customize the UI yourself,maybe you need to know

- hooks

  - useActiveTab // current tab is edit or preview
  - useBlock // includes addBlock、moveBlock、removeBlock、undo, redo, etc.
  - useHoverIdx // hover block related, dragging status related, dragging direction related
  - useEditorProps // get props from EmailEditorProvider
  - useEditorContext // get form state and initialized status
  - useFocusIdx // focus block related

- utils (These are some very simple methods, it is best to look at the implementation)

  - getBlockNodeByIdx
  - getBlockNodes
  - getShadowRoot
  - scrollBlockEleIntoView

- components
  - BlockAvatarWrapper // allow drag and drop to editor