画像

import { IImageIoService, LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsDrawingPlugin } from '@univerjs/docs-drawing'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIJaJP from '@univerjs/drawing-ui/locale/ja-JP'import { UniverSheetsDrawingPlugin } from '@univerjs/sheets-drawing'import { UniverSheetsDrawingUIPlugin } from '@univerjs/sheets-drawing-ui'import SheetsDrawingUIJaJP from '@univerjs/sheets-drawing-ui/locale/ja-JP'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/sheets-drawing-ui/lib/index.css'import '@univerjs/sheets-drawing/facade'import '@univerjs/sheets-drawing-ui/facade'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      DrawingUIJaJP,       SheetsDrawingUIJaJP,     ),  },})univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverSheetsDrawingPlugin)univer.registerPlugin(UniverSheetsDrawingUIPlugin)

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingJaJP from '@univerjs/preset-sheets-drawing/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      UniverPresetSheetsDrawingJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsDrawingPreset(),   ],})

const fWorksheet = univerAPI.getActiveWorkbook().getActiveSheet()// コンポーネントは適切なタイミングで登録してください（例: Univer が読み込まれたとき）// これは React コンポーネントです。Vue3 コンポーネントの場合、3 番目の引数は `{ framework: 'vue3' }` にしてくださいuniverAPI.registerComponent(  'myFloatDom',  ({ data }) => (    <div style={{ width: '100%', height: '100%', background: '#fff', border: '1px solid #ccc', boxSizing: 'border-box' }}>      ポップアップ内容:      {' '}      {data?.label}    </div>  ),)// 浮動 DOM を追加します// disposable が null の場合、浮動 DOM の追加に失敗していますconst disposable = fWorksheet.addFloatDomToPosition({  componentKey: 'myFloatDom',  initPosition: {    startX: 100,    endX: 300,    startY: 100,    endY: 200,  },  // コンポーネントのデータ  data: {    label: 'hahah',  },})// 2 秒後に浮動 DOM を削除しますsetTimeout(() => {  disposable?.dispose()}, 2000)

const fWorksheet = univerAPI.getActiveWorkbook().getActiveSheet()// 範囲ロード用コンポーネントを登録しますfunction RangeLoading() {  const divStyle = {    width: '100%',    height: '100%',    backgroundColor: '#fff',    border: '1px solid #ccc',    boxSizing: 'border-box' as const,    display: 'flex',    justifyContent: 'center',    alignItems: 'center',    textAlign: 'center' as const,    transformOrigin: 'top left',  }  return (    <div style={divStyle}>      読み込み中...    </div>  )}univerAPI.registerComponent('RangeLoading', RangeLoading)// 範囲 A1:C3 を覆う範囲ロードコンポーネントを追加しますconst fRange = fWorksheet.getRange('A1:C3')const disposable = fWorksheet.addFloatDomToRange(fRange, { componentKey: 'RangeLoading' }, {}, 'myRangeLoading')// 2 秒後に浮動 DOM を削除しますsetTimeout(() => {  disposable?.dispose()}, 2000)// 別の例 -------------------// フロートボタンコンポーネントを登録しますfunction FloatButton() {  const divStyle = {    width: '100px',    height: '30px',    backgroundColor: '#fff',    border: '1px solid #ccc',    boxSizing: 'border-box' as const,    display: 'flex',    justifyContent: 'center',    alignItems: 'center',    textAlign: 'center' as const,    cursor: 'pointer',  }  const clickHandler = () => {    console.warn('click')  }  return (    <div style={divStyle} onClick={clickHandler}>      フロートボタン    </div>  )}univerAPI.registerComponent('FloatButton', FloatButton)// フロートボタンを範囲 A5:C7 に追加します。配置は A5 セルから開始、幅 100px、高さ 30px、マージンは範囲幅 / 高さ の 100% ですconst fRange2 = fWorksheet.getRange('A5:C7')const disposable2 = fWorksheet.addFloatDomToRange(  fRange2,  {    componentKey: 'FloatButton',  },  {    width: 100,    height: 30,    marginX: '100%', // 範囲幅に対するマージンの割合、またはピクセル指定    marginY: '100%',  },  'myFloatButton',)

const fWorksheet = univerAPI.getActiveWorkbook().getActiveSheet()// フロートボタンコンポーネントを登録しますfunction FloatButton() {  const divStyle = {    width: '100px',    height: '30px',    backgroundColor: '#fff',    border: '1px solid #ccc',    boxSizing: 'border-box' as const,    display: 'flex',    justifyContent: 'center',    alignItems: 'center',    textAlign: 'center' as const,    cursor: 'pointer',  }  const clickHandler = () => {    console.warn('click')  }  return (    <div style={divStyle} onClick={clickHandler}>      フロートボタン    </div>  )}univerAPI.registerComponent('FloatButton', FloatButton)// 列 D の見出しにフロートボタンを追加します。配置は右寄せ、幅 100px、高さ 30px、マージンは 0const disposable = fWorksheet.addFloatDomToColumnHeader(  3,  {    componentKey: 'FloatButton',    allowTransform: false,  },  {    width: 100,    height: 30,    marginX: 0,    marginY: 0,    horizonOffsetAlign: 'right',  },  'myFloatButton',)// 2 秒後にフロートボタンを削除しますsetTimeout(() => {  disposable?.dispose()}, 2000)