feat(): Cropping and gradient demos - #218
Merged
Merged
Conversation
Add a demo page for the cropping controls shipped in `fabric/extensions`. - First canvas assigns both control sets side by side, so they are live without any toggling: `createImageCroppingControls()` as a full replacement, and `createImageResizeControlsWithScaleToCover()` merged into the default set as the four side handles. - Second canvas shows `enterCropMode` on double click, which is where the ghost of the full source image comes from. `renderGhostImage` is not exported, so the ghost cannot be enabled for controls you assign yourself. - The page documents what each set contains, how to assign or merge them, and why `padding: 0` matters for the handles that scale the source inside the crop window. Bump fabric to ^7.4.0: the cropping edge-resize helpers (`createImageResizeControlsWithScaleToCover`, `withFlip`) are not present in the previously installed 7.0.0-rc1. Expose `fabric/extensions` to demo snippets as `extensions`, since the editor evals the code and cannot use imports. The helpers are imported by name rather than as a namespace: a namespace object assigned to `window` keeps every export alive and pulled the westures gesture integration into the client bundle. `westures` is added as a devDependency because the extensions barrel imports it unconditionally and fabric declares it nowhere, so module resolution fails without it. Also add AGENTS.md, symlinked as CLAUDE.md, describing the repo layout and the demo authoring conventions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Cut the code down and let the prose carry the explanation. The interactive example hand-rolled a resize-to-cover handler over ~170 lines, because the real helper was not in the installed fabric version. It is now in 7.4.0, so the example is a barebone image plus a single `enterCropMode` registration. Restructure the page around what the extension is: how cropping is really just cropX/cropY/width/height, what each of the two control sets contains, how to assign or merge them, and what `enterCropMode` does for you. Drop the install snippet, the long usage block, and the "testing locally" section that pointed into the submodule, and link to the demo instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Show the helper's own source and walk through it, since the technique is the transferable part: capture the state you are about to overwrite, swap the control set, borrow object events (`moving` for panning, `before:render` for the ghost) instead of subclassing, close over a teardown that mirrors every step, and re-arm the toggle with `once`. Add a section on recomposing the pieces. The individual action handlers (`changeCropX/Y/Width/Height`, the scale-to-cover pair) and the `withFlip` combinator are all exported, so the prepared control sets are a starting point rather than the only option — with an example building a single crop-only control. Also state which internals are still module-private (`cropPanMoveHandler`, `renderGhostImage`), which is why the ghost is only available through `enterCropMode`. Document the docs-vs-demos split in AGENTS.md: demos showcase what the library can do and keep their code minimal; guides explain how and why and are free to go deep, quoting library source when it teaches something. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Point the submodule at the v740 tag so the API reference is generated from the same version the site bundles (package.json is already on ^7.4.0). The previous pointer was one commit past v7.2.0, so the cropping helpers the new docs describe were missing from the generated reference. The current HEAD was an ancestor of v740, so nothing is lost. Also update the version shown by LatestRelease to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Output of the TypeDoc build against the v7.4.0 submodule. Most of the diff is the gitRevision embedded in every "Defined in:" source link moving from 22fda4575 to ce64f450b, alongside the 7.3/7.4 API additions. Adds pages for controlsUtils.changeHeight, changeObjectHeight, changeObjectWidth and the ControlRenderingStyleOverride type alias. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Demo covers one thing: that a gradient's geometry can be manipulated by hand. A rect with a four-stop linear gradient gets the handles from `createLinearGradientControls()` merged into its own controls, so the two axis endpoints and the four colour stops are all draggable. New guide sits below cropping images. It introduces the Gradient object first — that it is a paint handed to fill/stroke, what coords mean for linear (two points) versus radial (two circles with radii), and the pixels/percentage units — with a mini canvas for each type. Then it covers the extension: how to merge the controls in, what each handle writes to (lgp_1/lgp_2 to coords, lgo_N to a stop offset, projected onto the axis and clamped), the Control options argument, and the current limits, namely linear only and no gradientTransform support. Replace both demo thumbnails with rendered illustrations of what each demo does, instead of a copy of the source photo. The cropping one shows the ghost with its dashed real bounds behind the crop window and its handles; the gradient one shows the axis line with endpoint and colour stop handles. The cropping thumbnail also drops from 410kB to 13kB in the built output. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.