Map annotations through cropping and resizing

Share one image and marker transform

Source and viewport sizes determine scale, while alignment determines displacement. Cover fills and can crop; contain fits the whole source and can leave margins. The same scale and offset map the source region into its box, avoiding a separate width-only approximation.

No actual advertising capture is included. Independent shapes reproduce a geometry question found in the source. The module verifies relationships among declared shapes, not current placement inventory or advertising performance.

Distinguish clipping from original extent

Visibility is the intersection of the full mapped box and viewport; a fully cropped region has neither visible marker nor label. Remaining labels are clamped using their declared dimensions. Partial clipping retains full geometry alongside the visible width.

The inverse function uses the same transform and returns no image point for a letterbox margin. Normalized object position is supported with bounds checking. The code does not inspect actual DOM matrices or image loading.

Interact with a synthetic canvas

The demo changes fit, canvas shape and selected region. It embeds the exact core and connects SVG image and marker to the same result. Eighteen combinations per language were executed through actual inline handlers against DOM stubs and compared with pure output.

Font width and long translated labels are not measured. A bounded label box is different from a readable label. Actual mobile, zoom and assistive-technology review remain integration work.

// Independent synthetic geometry. No image capture, network, DOM or font measurement.
function finite(value,min,max){if(typeof value!=='number'||!Number.isFinite(value)||value<min||value>max)throw Error('bounded finite number');return value;}
function size(value){if(!value||Object.keys(value).sort().join(',')!=='height,width')throw Error('size fields');return{width:finite(value.width,1,10000),height:finite(value.height,1,10000)};}
function clamp(n,lo,hi){return Math.min(hi,Math.max(lo,n));}
export function mapRegion({source,viewport,region,fit='contain',position={x:0.5,y:0.5},label={width:120,height:32,gap:8}}){
 source=size(source);viewport=size(viewport);
 if(!['cover','contain'].includes(fit))throw Error('fit');
 if(!position||Object.keys(position).sort().join(',')!=='x,y')throw Error('position');
 const px=finite(position.x,0,1),py=finite(position.y,0,1);
 if(!region||Object.keys(region).sort().join(',')!=='height,width,x,y')throw Error('region');
 const x=finite(region.x,0,source.width),y=finite(region.y,0,source.height),width=finite(region.width,0.001,source.width),height=finite(region.height,0.001,source.height);
 if(x+width>source.width||y+height>source.height)throw Error('source region bounds');
 if(!label||Object.keys(label).sort().join(',')!=='gap,height,width')throw Error('label');
 const lw=finite(label.width,1,viewport.width),lh=finite(label.height,1,viewport.height),gap=finite(label.gap,0,100);
 const scale=(fit==='cover'?Math.max:Math.min)(viewport.width/source.width,viewport.height/source.height);
 const image={x:(viewport.width-source.width*scale)*px,y:(viewport.height-source.height*scale)*py,width:source.width*scale,height:source.height*scale};
 const box={x:image.x+x*scale,y:image.y+y*scale,width:width*scale,height:height*scale};
 const left=Math.max(0,box.x),top=Math.max(0,box.y),right=Math.min(viewport.width,box.x+box.width),bottom=Math.min(viewport.height,box.y+box.height);
 const visible=right>left&&bottom>top?{x:left,y:top,width:right-left,height:bottom-top}:null;
 const mappedLabel=visible?{x:clamp(visible.x,0,viewport.width-lw),y:clamp(visible.y-lh-gap>=0?visible.y-lh-gap:visible.y+visible.height+gap,0,viewport.height-lh),width:lw,height:lh}:null;
 return{source,viewport,fit,scale,image,box,visible,label:mappedLabel,cropped:!visible||visible.width<box.width-1e-9||visible.height<box.height-1e-9};
}
export function viewportToSource(point,model){
 const x=finite(point.x,0,model.viewport.width),y=finite(point.y,0,model.viewport.height);
 const sx=(x-model.image.x)/model.scale,sy=(y-model.image.y)/model.scale;
 return sx<0||sy<0||sx>model.source.width||sy>model.source.height?null:{x:sx,y:sy};
}
export const syntheticSource={width:800,height:600};
export const syntheticRegions={center:{x:300,y:250,width:200,height:100},top:{x:20,y:0,width:120,height:40},edge:{x:700,y:200,width:100,height:200}};
export function exampleModel(fit='cover',shape='wide',region='center'){
 const viewports={wide:{width:640,height:360},square:{width:360,height:360},portrait:{width:300,height:480}};
 if(!viewports[shape]||!syntheticRegions[region])throw Error('example selection');
 return mapRegion({source:syntheticSource,viewport:viewports[shape],region:syntheticRegions[region],fit});
}

Choose a genuinely clipped fixture

In the portrait canvas, a source region starting at x one-fifty maps to minus fifty, leaving one-ten visible out of one-sixty. The central region can remain entirely visible under the same fit. A clipping test therefore needs a genuinely clipped fixture; correcting the assumption preserved the intended assertion.

The counterexample is inspectable through tests and saved execution records. Adoption requires checking input meaning and failure policy before changing labels. A small independent function does not replace an operational application.

Published code and ZIP use the same reviewed files. The central decision can be inspected without importing company records or running another system. Any added integration needs separate observed results; the existing package does not pre-certify its behavior.

Actual execution evidence and its boundary

The source folder and a fresh ZIP extraction each passed 15 tests. Actual example results are saved in records.json, and the published core can be compared with the download. Historical project completion messages and test totals were not reused as evidence of this execution.

The live screen changes synthetic state through its actual inline code, with handlers also executed against DOM stubs. These checks do not establish rendered-browser or physical-device behavior. An integrated service needs its own observed verification rather than inheriting a broader claim from these small tests.

Before adapting the download

The ZIP contains core implementation, tests, runner, saved results and guidance; live examples also include bilingual HTML. This is new synthetic code with permission to modify and reuse, without original customer images, operational records or credentials. It contains no instruction to execute the source business program or transmit its material.

Begin adoption by defining units, input provenance and failure messages for the actual workflow. Passing tests cannot certify all supplied facts or grant operational authority. Authentication, persistence, transmission and rendered-interface review remain outside the small contract. I share both a reusable implementation and the decisions an adopter still needs to make.