open-index/open-npm huggingface dataset:
npm package: @hc-master/renderer
Description: 基于pixiJS的渲染引擎，处理智能设计项目的渲染数据JSON Schema，以数据驱动的形式渲染图形图像的React渲染组件
Latest version: 1.2.18

# 智能设计渲染组件
基于pixiJS的渲染引擎，处理智能设计项目的渲染数据JSON Schema，以数据驱动的形式渲染图形图像的React渲染组件

### Install
从npm获取 @hc-master/renderer
```bash
npm install @hc-master/renderer
```

### Usage
在你的react项目中引入
```javascript
import { Renderer } from '@hc-master/renderer'
// resDataJson为智能设计项目数据
function App() {
  const [index] = useState(0);
  const curData = useMemo(() => resDataJson.pagesData[index], [index]);
  const onMount = function(app) {
    console.log('==>>>::: 监听组件挂载');
  }
  const onCompleted = function(app) {
    console.log('==>>>::: 监听组件资源加载并渲染完成');
  }
  const onUnmount = function(app) {
    console.log('==>>>::: 监听组件卸载');
  }
  const handlePrev = function() {
    let v = indexRef.current-1;
    indexRef.current = v < 0 ? 0 : v
    setCurData(resDataJson.pagesData[indexRef.current])
  }
  const handleNext = function() {
    const count = resDataJson.pagesData.length-1;
    let v = indexRef.current+1;
    indexRef.current = v > count ? count : v;
    setCurData(resDataJson.pagesData[indexRef.current])
  }
  const handleChange = function() {
    const id = '9f6c1d44-d61c-4ad9-8f85-1d981f4548ce';
    const index = curData.stageJson.findIndex(item => item.id === id);
    // 找到指定数据
    const item = curData.stageJson[index] as FrameType;
    if (!item.photo) return
    // 改变数据内容
    item.photo = {
      ...item.photo,
      image: 'http://sts-test.gdoss.xstore.ctyun.cn/simooapp/debug/user_data/urqtj013qcgc0oct/photos/2023/08/14/1692008690_20230814_102450_159D15C9.jpg?x-amz-process=image/resize,m_fill,w_400,h_0',
      origHeight: 1501,
      origWidth: 1994,
      width: 400,
      height: 554,
      scale: {
        x: 4.98,
        y: 4.98
      },
      x: 0,
      y: 0
    };
    // 更新数据（Immutable Data）
    curData.stageJson[index] = {...item}
    setCurData({...curData})
  }
  return (
    <div className='App'>
      <Button onClick={handlePrev}>上页</Button>
      <Button onClick={handleNext}>下页</Button>
      <Button onClick={handleChange}>替换页内容</Button>
      <Renderer
         data={curData}
         designWidth={resDataJson.designWidth}
         designHeight={resDataJson.designHeight}
         onMount={onMount}
         onCompleted={onCompleted}
      />
    </div>
  )
}
```
### Renderer组件文档
以下为组件的props详细
#### data
需要传入的解析的JSON，从智能设计服务获取
#### designWidth
渲染的画布尺寸宽度
#### designHeight
渲染的画布尺寸高度
#### pageNo 可选
标记当前页码（多页渲染时使用）
#### onMount
渲染组件挂载时的事件监听
#### onUnmount
渲染组件卸载时的事件监听
#### onCompleted
渲染组件完成渲染时的事件监听
#### onGetFontUrl
获取字体文件URL事件
npm package: @hc-master/white-ink
Description: A processor that generates printed white ink for png and svg files
Author: rat1991
Latest version: 0.1.6

# 定制酒包装白墨处理

根据svg和png图片，生成对应白墨颜色的数据；

## 使用
### Installation
```bash
npm i @hc-master/white-ink
```

### Quick start
```js
import { whiteInkForSvg, whiteInkForPng } from '@hc-master/white-ink';
// 模块默认导出两个方法，分别处理svg与png的白墨生成
function App() {
  const handleInk = async function(type:'svg'|'png') {
    switch (type) {
      case 'svg':
        // whiteInkForSvg生成的数据为svg内容的字符串
        const svgStr = await whiteInkForSvg(demoSvg)
        break;
      case 'png':
        // whiteInkForPng生成的数据为图片base64的字符串
        const base64 = await whiteInkForPng(demPng, {
          // 输出格式（默认png）
          suffix: 'png',
          // 填充像素值时的执行回调，须返回一个rgba对象值
          // @param v - 当前像素的rgb对象值
          change(v) {
            return { r:0,g:0,b:0,a:1 }
          }
        })
        break;
    }
  }
  return (
    <>
      <div className="card">
        <button onClick={() => handleInk('svg')}>生产svg白墨</button>
        <button onClick={() => handleInk('png')}>生产png白墨</button>
      </div>
    </>
  )
}
```