{"record":{"id":"7dec54f7d5fdd99a","repo":"toeverything/AFFiNE","slug":"errorcode-gfxblockelementerror","errorCode":"ErrorCode.GfxBlockElementError","errorMessage":"Error on rendering '${this.model.flavour}': Gfx block's model should have 'xywh' property.","messagePattern":"Error on rendering '(.+?)': Gfx block's model should have 'xywh' property\\.","errorType":"exception","errorClass":"BlockSuiteError","httpStatus":null,"severity":"error","filePath":"blocksuite/framework/std/src/view/element/gfx-block-component.ts","lineNumber":162,"sourceCode":"\n  getCSSTransform() {\n    const viewport = this.gfx.viewport;\n    const { translateX, translateY, zoom, viewScale } = viewport;\n    const bound = Bound.deserialize(this.model.xywh);\n\n    const scaledX = (bound.x * zoom) / viewScale;\n    const scaledY = (bound.y * zoom) / viewScale;\n    const deltaX = scaledX - bound.x;\n    const deltaY = scaledY - bound.y;\n\n    return `translate(${translateX / viewScale + deltaX}px, ${translateY / viewScale + deltaY}px) scale(${this.getCSSScaleVal()})`;\n  }\n\n  getRenderingRect() {\n    const { xywh$ } = this.model;\n\n    if (!xywh$) {\n      throw new BlockSuiteError(\n        ErrorCode.GfxBlockElementError,\n        `Error on rendering '${this.model.flavour}': Gfx block's model should have 'xywh' property.`\n      );\n    }\n\n    const [x, y, w, h] = JSON.parse(xywh$.value);\n\n    return { x, y, w, h, zIndex: this.toZIndex() };\n  }\n\n  override renderBlock() {\n    const { x, y, w, h, zIndex } = this.getRenderingRect();\n\n    if (this.style.left !== `${x}px`) this.style.left = `${x}px`;\n    if (this.style.top !== `${y}px`) this.style.top = `${y}px`;\n    if (this.style.width !== `${w}px`) this.style.width = `${w}px`;\n    if (this.style.height !== `${h}px`) this.style.height = `${h}px`;\n    if (this.style.zIndex !== zIndex) this.style.zIndex = zIndex;","sourceCodeStart":144,"sourceCodeEnd":180,"githubUrl":"https://github.com/toeverything/AFFiNE/blob/26c515e050211269e911f7d9cfe162a26c83ed98/blocksuite/framework/std/src/view/element/gfx-block-component.ts#L144-L180","documentation":"Thrown by `GfxBlockComponent.getRenderingRect` when `this.model.xywh$` is undefined. Gfx (surface/edgeless) blocks must declare a reactive `xywh` property in their model schema; the rendering rect (position + size + z-index) cannot be computed without it. Thrown during `renderBlock()` on every paint of the gfx block.","triggerScenarios":"A block model is registered/toasted as a gfx block (`GfxBlockElementModel`) but its schema's `props()` does not define `xywh: f.flatserialize(...)`, or a plain `BlockModel` was used where a `GfxBlockElementModel` was expected.","commonSituations":"Converting a doc-mode block to a gfx block without adding `xywh` to the schema; custom block flavour whose define method omits the geometry prop; deserializing a snapshot whose model lacked `xywh`.","solutions":["Add `xywh` to the block's schema props: `xywh: f.rect(0, 0, 100, 100)` (or the project's rect serializer).","Ensure the model extends `GfxBlockElementModel` and is registered with the surface schema.","Run a migration that backfills `xywh` on existing blocks of this flavour."],"exampleFix":"// before: schema missing xywh\ndefineBlockSchema({\n  flavour: 'my:gfx',\n  toModel: () => new GfxBlockElementModel(),\n  props: () => ({ color: f.string('red') }),\n})\n\n// after: declare xywh so getRenderingRect can read it\ndefineBlockSchema({\n  flavour: 'my:gfx',\n  toModel: () => new GfxBlockElementModel(),\n  props: () => ({\n    color: f.string('red'),\n    xywh: f.rect(0, 0, 100, 100),\n  }),\n})","handlingStrategy":"validation","validationCode":"// verify the model declares xywh before rendering the gfx block\nfunction hasXywh(model: BlockModel): boolean {\n  return !!(model as any).xywh$;\n}\n\nif (hasXywh(model)) render(/* gfx block */);\nelse console.warn('Cannot render gfx block without xywh');","typeGuard":"import type { GfxBlockElementModel } from '@blocksuite/std/gfx';\n\nfunction isGfxModelWithXywh(m: BlockModel): m is GfxBlockElementModel {\n  return 'xywh$' in m && !!(m as GfxBlockElementModel).xywh$;\n}","tryCatchPattern":"try {\n  block.getRenderingRect();\n} catch (e) {\n  if (e instanceof BlockSuiteError && e.code === ErrorCode.GfxBlockElementError) {\n    console.error('Gfx block missing xywh:', e.message);\n  }\n}","preventionTips":["Always declare xywh in the gfx block's schema props.","Extend GfxBlockElementModel for gfx blocks.","Ship migrations to backfill xywh on legacy blocks."],"tags":["gfx","block-schema","xywh","rendering"],"backgroundTag":null,"analyzedSha":"26c515e050211269e911f7d9cfe162a26c83ed98","analyzedAt":"2026-08-12T13:15:16.447Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}