Have got adjusting processor arguments working

This commit is contained in:
Leon Mika 2026-03-27 21:43:03 +11:00
parent 488942db2e
commit f9a65c8ca9
6 changed files with 151 additions and 14 deletions

View file

@ -24,9 +24,17 @@ const processorUIs = {
"shadow": {
label: "Shadow",
template: Handlebars.compile(`
<div class="mb-3">
<label for="{{id}}_width" class="form-label">Colour</label>
<input name="width" class="form-control" id="{{id}}_{{props.color}}" type="color" value="{{color}}" {{{submit_on id 'change'}}}>
<div class="row mb-3 align-items-center">
<label for="{{id}}_color" class="col-sm col-form-label">Colour</label>
<div class="col-sm">
<input name="color" class="form-control" id="{{id}}_color" type="color" value="{{props.color}}" {{{submit_on id 'change'}}}>
</div>
</div>
<div class="row mb-3">
<label for="{{id}}_offset_y" class="col-sm col-form-label">Offset Y</label>
<div class="col-sm">
<input name="offset_y" class="form-control" id="{{id}}_{{props.color}}" type="number" value="{{props.offset_y}}" {{{submit_on id 'blur'}}}>
</div>
</div>
`),
},
@ -67,10 +75,19 @@ export default class UploadEditController extends Controller {
async removeProcessor(ev) {
ev.preventDefault();
let id = ev.params.id;
console.log(ev.params);
await this._removeProcessor(id);
}
async updateProcessor(ev) {
ev.preventDefault();
let id = ev.params.id;
let paramParentEl = ev.target.closest('[data-role="processor-params"]');
let params = Object.fromEntries(new FormData(paramParentEl).entries());
await this._updateProcessor(id, params);
}
_rebuildProcessList() {
let el = this.processListTarget;
@ -135,6 +152,25 @@ export default class UploadEditController extends Controller {
}
}
async _updateProcessor(processorID, params) {
await this._doReturningState(async () => {
return (await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}`, {
method: 'PATCH',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
processor: {
id: processorID,
props: params,
}
})
})).json();
})
}
async _removeProcessor(processorID) {
await this._doReturningState(async () => {
return (await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}/processors/${processorID}`, {

View file

@ -153,6 +153,7 @@ Starting weiro without any arguments will start the server.
siteGroup.Get("/uploads/:uploadID/edit", uh.Edit)
siteGroup.Post("/imageedit", ieh.Create)
siteGroup.Patch("/imageedit/:sessionID", ieh.PatchSession)
siteGroup.Post("/imageedit/:sessionID/processors", ieh.AddProcessor)
siteGroup.Delete("/imageedit/:sessionID/processors/:processorID", ieh.DeleteProcessor)
siteGroup.Get("/imageedit/:sessionID/preview/:versionID", ieh.Preview)

View file

@ -113,3 +113,32 @@ func (ieh ImageEditHandlers) DeleteProcessor(c fiber.Ctx) error {
PreviewURL: res.PreviewURL(),
})
}
func (ieh ImageEditHandlers) PatchSession(c fiber.Ctx) error {
var req struct {
UpdateProc *imgedit.UpdateProcessorReq `json:"processor"`
}
sessionID := c.Params("sessionID")
if sessionID == "" {
return fiber.ErrBadRequest
}
if err := c.Bind().Body(&req); err != nil {
return err
}
log.Printf("Got request: %v", *req.UpdateProc)
if req.UpdateProc != nil {
res, err := ieh.ImageEditService.UpdateProcessor(c.Context(), sessionID, *req.UpdateProc)
if err != nil {
return err
}
return c.Status(http.StatusOK).JSON(sessionResponse{
Session: res,
PreviewURL: res.PreviewURL(),
})
}
return fiber.ErrBadRequest
}

View file

@ -21,7 +21,7 @@ type imageProcessor struct {
type shadowProcessorArgs struct {
Color string `json:"color"`
OffsetY int `json:"offset_y"`
OffsetY int `json:"offset_y,string"`
}
var processors = map[string]imageProcessor{
@ -35,7 +35,12 @@ var processors = map[string]imageProcessor{
processImage: func(ctx context.Context, srcImg image.Image, params any) (image.Image, error) {
p := params.(*shadowProcessorArgs)
shadow := makeBoxShadow(srcImg, color.Black, 4, 10, p.OffsetY)
shadowColor, err := parseHexColor(p.Color)
if err != nil {
return nil, fmt.Errorf("invalid shadow color: %w", err)
}
shadow := makeBoxShadow(srcImg, shadowColor, 4, 10, p.OffsetY)
composit := imaging.OverlayCenter(shadow, srcImg, 1.0)
return composit, nil
},
@ -135,3 +140,39 @@ type imageImageSource struct {
func (i imageImageSource) image() (image.Image, error) {
return i.img, nil
}
func parseHexColor(s string) (color.Color, error) {
// Remove leading hash if present
if len(s) > 0 && s[0] == '#' {
s = s[1:]
}
// Parse based on length
var r, g, b, a uint8
switch len(s) {
case 6:
// RGB format
var rgb uint32
if _, err := fmt.Sscanf(s, "%06x", &rgb); err != nil {
return nil, fmt.Errorf("invalid hex color format: %w", err)
}
r = uint8((rgb >> 16) & 0xFF)
g = uint8((rgb >> 8) & 0xFF)
b = uint8(rgb & 0xFF)
a = 0xFF
case 8:
// RGBA format
var rgba uint32
if _, err := fmt.Sscanf(s, "%08x", &rgba); err != nil {
return nil, fmt.Errorf("invalid hex color format: %w", err)
}
r = uint8((rgba >> 24) & 0xFF)
g = uint8((rgba >> 16) & 0xFF)
b = uint8((rgba >> 8) & 0xFF)
a = uint8(rgba & 0xFF)
default:
return nil, fmt.Errorf("invalid hex color length: expected 6 or 8 characters, got %d", len(s))
}
return color.RGBA{R: r, G: g, B: b, A: a}, nil
}

View file

@ -146,6 +146,35 @@ func (s *Service) DeleteProcessor(ctx context.Context, sessionID, processorID st
return session, nil
}
type UpdateProcessorReq struct {
ID string `json:"id"`
Props json.RawMessage `json:"props"`
}
func (s *Service) UpdateProcessor(ctx context.Context, sessionID string, req UpdateProcessorReq) (*models.ImageEditSession, error) {
session, err := s.loadAndVerifySession(ctx, sessionID)
if err != nil {
return nil, err
}
for i, p := range session.Processors {
if p.ID == req.ID {
session.Processors[i].Props = req.Props
break
}
}
session.RecalcVersionIDs()
if err := s.sessionStore.save(session); err != nil {
return nil, err
}
if _, err := s.reprocess(ctx, session); err != nil {
return nil, err
}
return session, nil
}
func (s *Service) loadAndVerifySession(ctx context.Context, sessionID string) (*models.ImageEditSession, error) {
site, user, err := s.fetchSiteAndUser(ctx)
if err != nil {

View file

@ -1,12 +1,12 @@
<main class="flex-grow-1 flex-shrink-1">
<div class="flex-grow-1 flex-shrink-1 d-flex flex-column">
<div class="row flex-grow-1 flex-shrink-1 m-0"
<main class="flex-grow-1 flex-shrink-1"
data-controller="edit-upload"
data-edit-upload-site-id-value="{{ .site.ID }}"
data-edit-upload-upload-id-value="{{ .upload.Upload.ID }}"
>
>
<div class="flex-grow-1 flex-shrink-1 d-flex flex-column">
<div class="row flex-grow-1 flex-shrink-1 m-0">
<figure class="col-md-9 p-3">
<img data-edit-upload-target="preview" src="{{ .upload.URL }}" alt="{{ .upload.Upload.Alt }}" class="img-fluid">
<img data-edit-upload-target="preview" src="{{ .upload.URL }}" alt="{{ .upload.Upload.Alt }}" class="img-fluid" style="max-height: 80vw;">
</figure>
<div class="col-md-3 p-3">
<div data-edit-upload-target="processList"></div>
@ -25,6 +25,7 @@
</div>
</div>
<div class="col-md-9">
Actions go here
<button class="btn btn-primary" data-action="edit-upload#saveUpload">Save</button>
<button class="btn btn-secondary" data-action="edit-upload#saveNewUpload">Save as Copy</button>
</div>
</main>