Changing Anchor Point of Component

[omerfcinoglu]

Kayit.2025-03-08.234702.mp4

How can i change the anchor point of this component or any component?

[mosh-tudor]

@l0rdyolo What do you want to change? Styles? Then check:

grapesjs/packages/core/src/styles/scss/_gjs_canvas.scss

Lines 368 to 432 in 4d5107b

	.#{$app-prefix}resizer-h {
	pointer-events: all;
	position: absolute;
	border: 3px solid var(--gjs-color-blue);
	width: 10px;
	height: 10px;
	background-color: #fff;
	margin: var(--gjs-handle-margin);
	}
	.#{$app-prefix}resizer-h-tl {
	top: 0;
	left: 0;
	cursor: nwse-resize;
	}
	.#{$app-prefix}resizer-h-tr {
	top: 0;
	right: 0;
	cursor: nesw-resize;
	}
	.#{$app-prefix}resizer-h-tc {
	top: 0;
	margin: var(--gjs-handle-margin) auto;
	left: 0;
	right: 0;
	cursor: ns-resize;
	}
	.#{$app-prefix}resizer-h-cl {
	left: 0;
	margin: auto var(--gjs-handle-margin);
	top: 0;
	bottom: 0;
	cursor: ew-resize;
	}
	.#{$app-prefix}resizer-h-cr {
	margin: auto var(--gjs-handle-margin);
	top: 0;
	bottom: 0;
	right: 0;
	cursor: ew-resize;
	}
	.#{$app-prefix}resizer-h-bl {
	bottom: 0;
	left: 0;
	cursor: nesw-resize;
	}
	.#{$app-prefix}resizer-h-bc {
	bottom: 0;
	margin: var(--gjs-handle-margin) auto;
	left: 0;
	right: 0;
	cursor: ns-resize;
	}
	.#{$app-prefix}resizer-h-br {
	bottom: 0;
	right: 0;
	cursor: nwse-resize;
	}

IF you need to change the resize logic, check:
https://github.com/GrapesJS/grapesjs/blob/master/src/utils/Resizer.ts

[omerfcinoglu]

I want to set up nine anchor points as shown in the photo. When one of these points is clicked on the selected component, the component should be resized only from that specific point.