図形
Univer Sheets の図形（Shapes）を使うと、ワークシート上でフローチャート、注釈、コールアウト、視覚的なガイドを作成できます。
Plugin モード
インストール
pnpm add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uinpm install @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uiyarn add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-uibun add @univerjs-pro/engine-formula @univerjs/drawing @univerjs/drawing-ui @univerjs/sheets-drawing @univerjs/sheets-drawing-ui @univerjs-pro/sheets-shape @univerjs-pro/sheets-shape-ui図形には @univerjs-pro/engine-formula の UniverProFormulaEnginePlugin も必要です。基本の初期化コードで、既存の UniverFormulaEnginePlugin のインポートと登録をこのプラグインに置き換えてください。両方の数式エンジンを登録すると、図形の挿入時に依存関係が未登録というエラーが発生する場合があります。
図形プラグインは描画プラグインに依存しています。図形プラグインを登録する前に、UniverDrawingPlugin、UniverSheetsDrawingPlugin、UniverDrawingUIPlugin、および UniverSheetsDrawingUIPlugin を先に登録する必要があります。
使い方
import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverSheetsShapePlugin } from '@univerjs-pro/sheets-shape'import { UniverSheetsShapeUIPlugin } from '@univerjs-pro/sheets-shape-ui'import SheetsShapeUIJaJP from '@univerjs-pro/sheets-shape-ui/locale/ja-JP'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'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-pro/sheets-shape/facade'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs/sheets-drawing-ui/lib/index.css'import '@univerjs-pro/sheets-shape-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( DrawingUIJaJP, SheetsDrawingUIJaJP, SheetsShapeUIJaJP, ), },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDrawingPlugin)univer.registerPlugin(UniverDrawingUIPlugin)univer.registerPlugin(UniverSheetsDrawingPlugin)univer.registerPlugin(UniverSheetsDrawingUIPlugin)univer.registerPlugin(UniverSheetsShapePlugin)univer.registerPlugin(UniverSheetsShapeUIPlugin)Univer の商用ライセンスをお持ちの場合は、クライアントでのライセンス利用 を参照して設定してください。
モバイル対応
まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。
| パッケージ | デスクトップの登録 | モバイルの登録 |
|---|---|---|
@univerjs/drawing-ui | UniverDrawingUIPlugin | UniverDrawingMobileUIPlugin |
@univerjs/sheets-drawing-ui | UniverSheetsDrawingUIPlugin | UniverSheetsDrawingMobileUIPlugin |
@univerjs-pro/sheets-shape-ui | UniverSheetsShapeUIPlugin | UniverSheetsShapeMobileUIPlugin |
Preset モード
Shapes 機能は @univerjs/preset-sheets-advanced プリセットに含まれています。このプリセットは UniverProFormulaEnginePlugin を登録するため、数式エンジンを手動で置き換える必要はありません。
インストール
@univerjs/preset-sheets-advanced の UniverSheetsAdvancedPreset は、実行時に UniverSheetsDrawingPreset に依存します。先に @univerjs/preset-sheets-drawing をインストールしてください。
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancednpm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedyarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedbun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced使い方
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedJaJP from '@univerjs/preset-sheets-advanced/locales/ja-JP'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'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( UniverPresetSheetsCoreJaJP, UniverPresetSheetsDrawingJaJP, UniverPresetSheetsAdvancedJaJP, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset(), ],})Univer の商用ライセンスをお持ちの場合は、クライアントでのライセンス利用 を参照して設定してください。
Facade API
完全な Facade API の型定義は FacadeAPI を参照してください。
インポート
Plugin モードの注意
Facade パッケージの手動インポートが必要なのは Plugin モードのみです。Preset モードでは対応する Facade がすでに含まれているため、追加インポートは不要です。
import '@univerjs-pro/sheets-shape/facade'基本図形の挿入
共通の図形作成データを FWorksheet.insertShape に渡します。戻り値はライブ Facade ハンドルです。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rectShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.Rect, transform: { left: 120, top: 80, width: 240, height: 120 }, shapeData: { fill: { fillType: univerAPI.Enum.ShapeFillEnum.SolidFill, color: '#e6f4ff', }, stroke: { lineStrokeType: univerAPI.Enum.ShapeLineTypeEnum.SolidLine, color: '#1677ff', width: 2, }, },})if (!rectShape) throw new Error('Shape could not be inserted.')図形のテキストを編集する
以下または前の例で insertShape() が返す図形を使用します。getText() はライブの FShapeText オブジェクトを返します。getPlainText() でテキストを読み取り、setText() で全文を置き換え、フォント、色、配置を設定できます。
if (!rectShape) throw new Error('Shape is not available')const shapeText = rectShape.getText()console.log(shapeText.getPlainText())shapeText .setText('Quarterly review') .setFontSize(18) .setColor('#2563eb') .setBold(true) .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER) .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)setText() は既存のテキストを置き換えます。複数の書式を使う場合は setRichText() を使用してください。既存のリッチテキストを編集するには getRichText()?.copy() でビルダーを取得し、編集後に setRichText() に渡します。ビルダーの変更だけでは反映されません。文字スタイルとテキストボックスの余白・レイアウトも参照してください。
const richText = univerAPI.newRichText() .text('Quarterly ') .bold('review')shapeText.setRichText(richText)コネクタ図形の挿入と接続
FWorksheet.insertShape でコネクタを挿入し、返された FConnectorShape Facade から両端を接続します。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const leftShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect, transform: { left: 80, top: 80, width: 180, height: 100 },})const rightShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.Ellipse, transform: { left: 420, top: 200, width: 180, height: 100 },})const connectorShape = fWorksheet.insertShape({ shapeType: univerAPI.Enum.ShapeTypeEnum.BentConnector3, transform: { left: 240, top: 130, width: 240, height: 120 },})if (!leftShape || !rightShape || !connectorShape) { throw new Error('Shapes could not be inserted.')}const startSite = leftShape.getConnectionSites()[0]const rightSites = rightShape.getConnectionSites()const endSite = rightSites[2] ?? rightSites[0]if (!startSite || !endSite) throw new Error('Connection site not found.')connectorShape .bindStart(leftShape.getId(), startSite.index) .bindEnd(rightShape.getId(), endSite.index) .setEndArrow(univerAPI.Enum.ShapeArrowTypeEnum.Arrow)図形の更新と削除
図形の更新と削除は、ライブ Facade ハンドルから直接行います。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const firstShape = fWorksheet.getShapes().find(shape => !shape.isConnectorShape())if (firstShape) { firstShape .setStrokeColor('#ff4d4f') .setStrokeWidth(3) .setSolidFill('#fff1f0') // 必要に応じて更新後に削除 const removed = firstShape.remove() console.log(removed)}図形の書式コピー
元の図形を選択し、書式コピーを有効にして対象の図形を選びます。塗りつぶし、線、効果、対応する文字書式をコピーし、対象の ID、形状、文字内容、数式の関連付けは保持します。書式のクリアは挿入時の既定値に戻します。SmartArt は対象外です。対応する図形 UI プラグインが自動登録します。
このガイドはいかがですか？