Skip to content

feat(extensions): Table extension #10852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mauricekindermann wants to merge 39 commits into
base: master
Choose a base branch
from
Open

feat(extensions): Table extension #10852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
2ddc822
feat(extensions): Add Table extension with layout strategy
mauricekindermann Jan 20, 2026
62e29c9
feat(extensions): Add table border interaction and cell selection
mauricekindermann Jan 20, 2026
11fca95
feat(extensions): Add edge control sizing and README
mauricekindermann Jan 20, 2026
45fe901
feat(extensions): Add custom table controls with consistent 2px stroke
mauricekindermann Jan 20, 2026
8cc95fe
feat(extensions): Add table interaction with cell editing and keyboar…
mauricekindermann Jan 20, 2026
d964e26
feat(extensions): Add angle-aware border cursors
mauricekindermann Jan 20, 2026
79ca6e8
fix(extensions): Render selection overlay behind controls
mauricekindermann Jan 20, 2026
90fd040
fix(extensions): Add actionName to rotation control
mauricekindermann Jan 20, 2026
3ada52a
feat(extensions): Add copy/paste for table cells
mauricekindermann Jan 20, 2026
a1811cf
feat(extensions): Add cut support (Ctrl/Cmd+X)
mauricekindermann Jan 20, 2026
b2c38fb
fix(extensions): Row resize respects text content minimum
mauricekindermann Jan 20, 2026
19f2579
chore(extensions): Use util.capValue and fix E2E test imports
mauricekindermann Jan 20, 2026
b4c0b36
feat(extensions): Add merge shortcuts, fix merge-on-merge, refactor m…
mauricekindermann Jan 20, 2026
487397f
feat(extensions): Add Ctrl+A select all and proportional resize
mauricekindermann Jan 20, 2026
cd405d4
feat(table): add insert indicators for row/column insertion
mauricekindermann Jan 20, 2026
e56be0a
feat(table): add visual feedback when dragging borders at resize limit
mauricekindermann Jan 20, 2026
5b2b67c
fix(table): resolve lint errors and use fabric document utilities
mauricekindermann Jan 20, 2026
276ae97
feat(table): add edge indicators and fix rotation for new cells
mauricekindermann Jan 20, 2026
b5ad92b
fix(table): extend indicator hitbox to include stem area
mauricekindermann Jan 20, 2026
e415299
feat(table): add stem line from indicator to table edge
mauricekindermann Jan 20, 2026
1893528
fix(table): defer editing cleanup to avoid canvas reference error
mauricekindermann Jan 20, 2026
be4a3d1
fix(table): preserve anchor position on layout using originX/originY
mauricekindermann Jan 21, 2026
f126b27
feat(table): add configurable reflow origin for layout anchoring
mauricekindermann Jan 21, 2026
4975020
refactor(table): align API with Fabric conventions
mauricekindermann Jan 21, 2026
cf57908
fix(table): separate indicator hover and click zones
mauricekindermann Jan 21, 2026
d5ede75
feat(table): improve insert UX and indicator visuals
mauricekindermann Jan 21, 2026
76e7520
feat(table): add edgeResizeMode option for proportional resize
mauricekindermann Jan 21, 2026
b6e4a69
fix(table): separate anchor preservation for API vs control actions
mauricekindermann Jan 21, 2026
18cd7d4
fix(table): use relayout() for all interaction-triggered layouts
mauricekindermann Jan 21, 2026
d89077b
fix(table): zoom-independent hit detection and indicator rendering
mauricekindermann Jan 21, 2026
e25d9a1
fix(table): clear interaction state when entering text edit mode
mauricekindermann Jan 21, 2026
c59ce38
fix(table): only allow border drag when table already selected
mauricekindermann Jan 21, 2026
0866546
fix(table): hide cell selection during border drag
mauricekindermann Jan 21, 2026
751559e
fix(table): add required Point args to spec event fires
mauricekindermann Jan 21, 2026
6f48d72
feat(table): add interactive demo UI for testing
mauricekindermann Jan 21, 2026
88db225
feat(table): add delete indicators and configurable options
mauricekindermann Jan 23, 2026
99adee9
fix(table): prevent indicator click from dragging object
mauricekindermann Jan 25, 2026
01d4878
Merge branch 'master' into feat/table-extension
asturur Mar 15, 2026
c90e0eb
update CHANGELOG.md
github-actions[bot] Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 152 additions & 2 deletions .codesandbox/templates/vanilla/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,162 @@
<!doctype html>
<html>
<head>
<title>Parcel Sandbox</title>
<title>FabricJS Table Extension Demo</title>
<meta charset="UTF-8" />
</head>

<body>
<canvas id="canvas"></canvas>
<header>
<div class="header-left">
<button id="addTable">+ Add Table</button>
<span class="subtitle">Table Extension Demo</span>
</div>
<div class="header-right">
<button id="zoomOut">−</button>
<span id="zoomLevel">100%</span>
<button id="zoomIn">+</button>
<button id="zoomReset">1:1</button>
</div>
</header>

<main>
<div class="canvas-area">
<canvas id="canvas"></canvas>
</div>

<aside id="sidebar">
<section id="tablePanel" class="panel hidden">
<div class="panel-header">
<span>Table</span>
<button id="deleteTable" class="danger-text">Delete</button>
</div>

<div class="section-label">Structure</div>
<div class="button-row">
<button id="removeRow" class="danger" title="Delete selected row">− Row</button>
<button id="removeCol" class="danger" title="Delete selected column">− Col</button>
</div>
<div class="hint">Hover edges to insert/delete</div>

<div class="section-label">Resize Mode</div>
<div class="button-row">
<button id="resizeSingle" class="toggle">Single</button>
<button id="resizeProportional" class="toggle active">Proportional</button>
</div>

<div class="section-label">Column Insert</div>
<div class="button-row">
<button id="insertRedistribute" class="toggle active">Redistribute</button>
<button id="insertExpand" class="toggle">Expand</button>
</div>

<div class="section-label">Indicators</div>
<div class="control-group">
<label class="checkbox-label">
<input type="checkbox" id="showInsert" checked>
<span>Insert (+)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="showDelete" checked>
<span>Delete (−)</span>
</label>
</div>

<div class="section-label">Reflow Origin</div>
<div class="origin-grid">
<button data-ox="left" data-oy="top" class="origin-btn active">↖</button>
<button data-ox="center" data-oy="top" class="origin-btn">↑</button>
<button data-ox="right" data-oy="top" class="origin-btn">↗</button>
<button data-ox="left" data-oy="center" class="origin-btn">←</button>
<button data-ox="center" data-oy="center" class="origin-btn">•</button>
<button data-ox="right" data-oy="center" class="origin-btn">→</button>
<button data-ox="left" data-oy="bottom" class="origin-btn">↙</button>
<button data-ox="center" data-oy="bottom" class="origin-btn">↓</button>
<button data-ox="right" data-oy="bottom" class="origin-btn">↘</button>
</div>
<div class="hint">Anchor point when adding rows/columns</div>

<div class="section-label">Style</div>
<div class="control-group">
<label>
<span>Padding</span>
<input type="range" id="cellPadding" min="0" max="20" value="8">
<span id="cellPaddingVal">8</span>
</label>
<label>
<span>Spacing</span>
<input type="range" id="cellSpacing" min="0" max="10" value="0">
<span id="cellSpacingVal">0</span>
</label>
<label>
<span>Border</span>
<input type="range" id="borderWidth" min="0" max="4" value="1">
<span id="borderWidthVal">1</span>
</label>
<label>
<span>Fill</span>
<input type="color" id="tableCellFill" value="#ffffff">
</label>
<label>
<span>Stroke</span>
<input type="color" id="tableCellStroke" value="#e0e0e0">
</label>
</div>
</section>

<section id="cellPanel" class="panel hidden">
<div class="panel-header">
<span>Cell</span>
<span id="cellInfo" class="info">—</span>
</div>
<div id="mergeControls" class="button-row hidden">
<button id="mergeBtn">Merge</button>
<button id="unmergeBtn" class="hidden">Unmerge</button>
</div>
<div class="control-group">
<label>
<span>Fill</span>
<input type="color" id="cellFill" value="#ffffff">
</label>
<label>
<span>Text</span>
<input type="color" id="textColor" value="#333333">
</label>
<label>
<span>Size</span>
<input type="range" id="fontSize" min="10" max="24" value="14">
<span id="fontSizeVal">14</span>
</label>
<label>
<span>Align</span>
<div class="button-group">
<button id="alignLeft">L</button>
<button id="alignCenter">C</button>
<button id="alignRight">R</button>
</div>
</label>
<label>
<span>Style</span>
<div class="button-group">
<button id="toggleBold"><b>B</b></button>
<button id="toggleItalic"><i>I</i></button>
</div>
</label>
</div>
</section>

<div id="emptyState">Click "+ Add Table" to start</div>
</aside>
</main>

<footer>
<span><kbd>Enter</kbd> edit</span>
<span><kbd>↑↓←→</kbd> navigate</span>
<span><kbd>Shift</kbd>+click range</span>
<span><kbd>⌘M</kbd> merge</span>
<span><kbd>Esc</kbd> back out</span>
</footer>

<div id="svgout"></div>
<script src="./src/index.ts" type="module"></script>
</body>
Expand Down
7 changes: 4 additions & 3 deletions .codesandbox/templates/vanilla/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import * as fabric from 'fabric';
import './styles.css';
import { testCase } from './testcases/linearGradientControls';
import { testCase } from './testcases/table';

const el = document.getElementById('canvas');
const canvas = (window.canvas = new fabric.Canvas(el, {
width: 500,
height: 500,
width: 800,
height: 600,
backgroundColor: '#f5f5f5',
preserveObjectStacking: true,
allowTouchScrolling: true,
enablePointerEvents: true,
Expand Down
Loading