jQuery(function ($) {
// --- Google & eBay search buttons ---
if (typeof CLIPON_VARS !== 'undefined' && (CLIPON_VARS.searchBrand || CLIPON_VARS.searchModel)) {
var searchTerm = (CLIPON_VARS.searchBrand + ' ' + CLIPON_VARS.searchModel).trim();
var googleUrl = 'https://www.google.com/search?q=' + encodeURIComponent(searchTerm);
var ebayUrl = 'https://www.ebay.com/sch/i.html?_nkw=' + encodeURIComponent(searchTerm);
var $googleBtn = $('', {
href: googleUrl,
target: '_blank',
class: 'clipon-search-btn clipon-search-btn-google',
html: ' ', {
href: ebayUrl,
target: '_blank',
class: 'clipon-search-btn clipon-search-btn-ebay',
html: 'e b a y ' + searchTerm + ' '
});
var $wrap = $('');
$wrap.append($googleBtn).append($ebayBtn);
$('.wrap h1.wp-heading-inline').after($wrap);
}
const MIRROR_SWITCH_ID = 'clipon_mirror_toggle';
const BASE_COLOR = '#cccccc';
function isColorSwatchSelected() {
return $('select.postform').val() === 'color';
}
function insertMirrorSwitch() {
if ($(`#${MIRROR_SWITCH_ID}`).length) return;
const html = `
`;
$('select.postform').closest('td, .form-field').append(html);
$(`#${MIRROR_SWITCH_ID}`).on('change', function () {
if (this.checked) {
addMirrorPreview();
} else {
$('#mirror-preview-canvas, #mirrored_preview, .mirror-preview-image').remove();
}
});
}
function getMirrorColor() {
const $input = $('.woo-color');
return $input.length && $input.val().startsWith('#') ? $input.val() : '#666666';
}
function addMirrorPreview() {
const $originalPicker = $('.colorSelector').last().closest('.form-field');
if ($('#mirror-preview-canvas').length) return;
const html = `
`;
$originalPicker.after(html);
bindColorChange();
updateMirrorPreview();
}
function bindColorChange() {
// Listen to standard change events
$('.woo-color')
.off('.clipon')
.on('change.clipon input.clipon blur.clipon keyup.clipon', updateMirrorPreview);
// Also monitor DOM changes in case the plugin updates the value silently
const input = document.querySelector('.woo-color');
if (input) {
const observer = new MutationObserver(updateMirrorPreview);
observer.observe(input, { attributes: true, attributeFilter: ['value'] });
}
}
function updateMirrorPreview() {
const mirrorColor = getMirrorColor();
const canvas = document.getElementById('mirror-preview-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
const grad = ctx.createRadialGradient(27, 27, 10, 45, 45, 90);
grad.addColorStop(0, '#cccccc');
grad.addColorStop(1, mirrorColor);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/png');
$('#mirrored_preview').val(dataURL);
$('.mirror-preview-image').html(`{ d += (idx===0 ? `M ${p.x},${p.y}` : ` L ${p.x},${p.y}`); });
$path.attr('d', d);
}
showMaskForPlaced(sizeKey);
persistTrace();
$svg.css({ display:'block', pointerEvents:'auto' });
return;
}
// edit
$path.attr('d', buildPathD(ts.points, ts.handles));
const n = ts.points.length;
for (let i=0;i=midX && clientY>=midY) return 'br';
if (clientX< midX && clientY>=midY) return 'bl';
if (clientX< midX && clientY< midY) return 'tl';
return 'tr';
}
// place points only in revealed quarter
$wrap.on('click', function(e){
if (!$tabTrace.hasClass('is-active')) return;
const key = (activeSize||'_single');
let ts = traceBySize.get(key);
if (!ts || ts.mode!=='placing') return;
const want = QUADS[ts.points.length];
const q = whichQuarter(e.clientX, e.clientY);
if (q !== want) return;
const pt = pointerXY(e);
ts.points.push(pt);
drawTrace(key); persistTrace();
if (ts.points.length>=4) {
ts.mode='edit';
ts.handles = catmullHandles(ts.points);
hideMask(); $traceMsg.hide();
drawTrace(key); persistTrace();
$download.show();
}
});
// Generate scaled paths and images for all sizes based on the base size
function generatePathsForAllSizes(baseSizeKey) {
const baseTs = traceBySize.get(baseSizeKey);
if (!baseTs || !baseTs.points || baseTs.points.length < 4) return;
// Get base size A value
const baseLabel = baseSizeKey === '_single' ? activeSize : baseSizeKey;
const baseAB = parseAB(baseLabel);
const baseA = baseAB.a || baseAOnUpload || parseFloat($frame.A.val()) || 0;
if (baseA <= 0) return;
const centerX = $wrap.width() / 2;
const centerY = $wrap.height() / 2;
// Get base data from sizeMap
const baseData = sizeMap[baseSizeKey] || {
transform: { tx: state.tx, ty: state.ty, scale: state.scale, sx: state.sx, sy: state.sy, rot: state.rot },
frame: {
a: parseFloat($frame.A.val()) || 0,
b: parseFloat($frame.B.val()) || 0,
bridge: parseFloat($frame.Br.val()) || 0,
h: parseFloat($frame.H.val()) || 0,
material: $frame.Mat.val() || 'plastic',
dpi: getDpi(),
color: $frame.Col.val() || '#008000'
},
points: baseTs.points,
handles: baseTs.handles,
drill: baseTs.drillData || {},
attributes: readAttributes()
};
// Loop through all size tabs
$sizeTabs.each(function() {
const targetLabel = $(this).data('size');
if (targetLabel === baseLabel) return; // Skip the base size itself
// Get target A value from size label
const targetAB = parseAB(targetLabel);
const targetA = targetAB.a || 0;
if (targetA <= 0) return;
// Calculate scale factor (works for both larger AND smaller sizes)
const k = targetA / baseA;
// Scale transform
const scaledTransform = Object.assign({}, baseData.transform || {});
scaledTransform.scale = +((scaledTransform.scale || 1) * k).toFixed(6);
// Scale points
const scaledPoints = baseTs.points.map(p => ({
x: centerX + (p.x - centerX) * k,
y: centerY + (p.y - centerY) * k
}));
// Scale handles
const scaledHandles = baseTs.handles.map(h => ({
hin: {
x: centerX + (h.hin.x - centerX) * k,
y: centerY + (h.hin.y - centerY) * k
},
hout: {
x: centerX + (h.hout.x - centerX) * k,
y: centerY + (h.hout.y - centerY) * k
}
}));
// Generate scaled path
const scaledPath = buildPathD(scaledPoints, scaledHandles);
// Create frame data for this size
const scaledFrame = Object.assign({}, baseData.frame || {}, {
a: targetA,
bridge: targetAB.bridge
});
// Store in sizeMap
sizeMap[targetLabel] = {
transform: scaledTransform,
frame: scaledFrame,
path: scaledPath,
points: scaledPoints,
handles: scaledHandles,
drill: baseData.drill || {},
attributes: baseData.attributes || {}
};
// Also create in traceBySize for immediate use
traceBySize.set(targetLabel, {
mode: 'edit',
points: scaledPoints,
handles: scaledHandles,
drillOpen: baseTs.drillOpen || false,
magMode: baseTs.magMode || 'spring',
springBackup: null,
drillData: baseTs.drillData || {
mode: 'spring',
leftTopX: 20,
leftBottomX: 20,
bridge: 10,
factorSpring: 44,
factorMag: 2.25
}
});
});
// Persist the updated sizeMap
$hid.sizesMap.val(JSON.stringify(sizeMap));
console.log('✓ Generated scaled paths for all sizes based on:', baseLabel);
// Now generate and upload scaled images for all sizes
generateAndUploadSizeImages(baseSizeKey);
}
// Generate scaled images for all sizes and upload to media library
function generateAndUploadSizeImages(baseSizeKey) {
console.log('Generating scaled images for all sizes...');
const $sizeImagesInput = $hidden.find('input[name="_clipon_size_images"]');
const existingSizeImages = readJSON($sizeImagesInput.val(), {});
const sizeImages = Object.assign({}, existingSizeImages);
// Get all size buttons
const $sizeTabs = $root.find('.clipon-size-tab');
const sizes = [];
$sizeTabs.each(function() {
sizes.push($(this).data('size'));
});
if (sizes.length === 0) return;
// Get base size dimensions
const baseLabel = baseSizeKey === '_single' ? activeSize : baseSizeKey;
const baseAB = parseAB(baseLabel);
const baseA = baseAB.a || baseAOnUpload || parseFloat($frame.A.val()) || 0;
if (baseA <= 0) {
console.log('Cannot generate sized images: base A value is 0');
return;
}
// Get current transformed/calibrated image
const currentImg = $img[0];
if (!currentImg || !currentImg.src || currentImg.src.includes('data:image')) {
console.log('Using current displayed image for size generation');
}
// Create a canvas with the current view
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas size to match wrapper
const wrapWidth = $wrap.width();
const wrapHeight = $wrap.height();
canvas.width = wrapWidth;
canvas.height = wrapHeight;
// Fill with white background for JPEG
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, wrapWidth, wrapHeight);
// Draw the current state (image with transformations)
const t = readTransform();
ctx.save();
ctx.translate(wrapWidth / 2, wrapHeight / 2);
ctx.rotate((t.rotation || 0) * Math.PI / 180);
ctx.scale(t.scaleX || 1, t.scaleY || 1);
ctx.scale(t.scale || 1, t.scale || 1);
ctx.translate(t.tx || 0, t.ty || 0);
ctx.translate(-wrapWidth / 2, -wrapHeight / 2);
ctx.drawImage(currentImg, 0, 0, wrapWidth, wrapHeight);
ctx.restore();
// Now create scaled versions for each size
const uploadPromises = [];
sizes.forEach(sizeLabel => {
const targetAB = parseAB(sizeLabel);
const targetA = targetAB.a;
if (!targetA || targetA <= 0) return;
// Calculate scale factor
const scaleFactor = targetA / baseA;
// Create scaled canvas
const scaledCanvas = document.createElement('canvas');
const scaledCtx = scaledCanvas.getContext('2d');
scaledCanvas.width = wrapWidth;
scaledCanvas.height = wrapHeight;
// Fill with white background for JPEG
scaledCtx.fillStyle = '#FFFFFF';
scaledCtx.fillRect(0, 0, wrapWidth, wrapHeight);
// Draw scaled image
scaledCtx.save();
scaledCtx.translate(wrapWidth / 2, wrapHeight / 2);
scaledCtx.scale(scaleFactor, scaleFactor);
scaledCtx.translate(-wrapWidth / 2, -wrapHeight / 2);
scaledCtx.drawImage(canvas, 0, 0);
scaledCtx.restore();
// Convert to blob and upload
scaledCanvas.toBlob(function(blob) {
if (!blob) return;
// Convert blob to base64
const reader = new FileReader();
reader.onloadend = function() {
const base64data = reader.result;
// Upload to media library
uploadPromises.push(
uploadImageToMediaLibrary(sizeLabel, base64data).then(function(result) {
if (result.success && result.data && result.data.url) {
sizeImages[sizeLabel] = result.data.url;
console.log('✓ Uploaded image for size:', sizeLabel, '→', result.data.url);
}
}).catch(function(err) {
console.error('Failed to upload image for size:', sizeLabel, err);
})
);
};
reader.readAsDataURL(blob);
}, 'image/jpeg', 0.85);
});
// Wait for all uploads to complete and save
Promise.all(uploadPromises).then(function() {
$sizeImagesInput.val(JSON.stringify(sizeImages));
console.log('✓ All size images uploaded and saved');
});
}
// Upload image to WordPress media library via AJAX
function uploadImageToMediaLibrary(size, imageData) {
return new Promise(function(resolve, reject) {
$.ajax({
url: CLIPON_VARS.ajaxUrl,
type: 'POST',
data: {
action: 'clipon_upload_size_image',
nonce: CLIPON_VARS.uploadNonce,
post_id: CLIPON_VARS.postId,
size: size,
image_data: imageData
},
success: function(response) {
resolve(response);
},
error: function(xhr, status, error) {
reject(error);
}
});
});
}
function enableDragging(sizeKey){
const ts = traceBySize.get(sizeKey); if (!ts) return;
let drag = null;
let lastClickTime = 0;
let lastClickIndex = null;
// Start drag (or detect double-click)
$svg.off('.dragAnch').on('pointerdown.dragAnch', '.anchor, .cp', function (e) {
const idx = +this.getAttribute('data-index');
const kind = this.classList.contains('anchor') ? 'anchor' : this.getAttribute('data-kind'); // 'hin'|'hout'
// Double-click detection for anchor points
if (kind === 'anchor') {
const now = Date.now();
const timeSinceLastClick = now - lastClickTime;
// If same anchor clicked within 300ms, it's a double-click
if (idx === lastClickIndex && timeSinceLastClick < 300) {
e.preventDefault();
e.stopPropagation();
// Don't allow removing the first 4 points
if (idx >= 4) {
removePointFromPath(idx, sizeKey);
}
// Reset click tracking
lastClickTime = 0;
lastClickIndex = null;
return;
}
// Track this click
lastClickTime = now;
lastClickIndex = idx;
}
// Normal drag behavior
drag = { kind, idx };
e.preventDefault();
});
// Dragging
$(window).off('.dragAnch').on('pointermove.dragAnch', function (e) {
if (!drag) return;
const i = drag.idx;
const pt = pointerXY(e);
if (drag.kind === 'anchor') {
let newX = pt.x;
let newY = pt.y;
// TR in Magnetic: X locked to v1X(), Y free
var trIdx = findTRIndex(ts);
if (ts.magMode === 'magnetic' && i === trIdx) {
newX = v1X();
}
const old = ts.points[i];
const dx = newX - old.x;
const dy = newY - old.y;
ts.points[i] = { x: newX, y: newY };
ts.handles[i].hin = { x: ts.handles[i].hin.x + dx, y: ts.handles[i].hin.y + dy };
ts.handles[i].hout = { x: ts.handles[i].hout.x + dx, y: ts.handles[i].hout.y + dy };
} else {
// dragging a control point
let x = pt.x, y = pt.y;
// In Magnetic mode, keep TR outgoing control ('hout') on v1 vertical
var trIdx = findTRIndex(ts);
const isTRMagneticHout = (ts.magMode === 'magnetic' && i === trIdx && drag.kind === 'hout');
const isTRMagnetic = (ts.magMode === 'magnetic' && i === trIdx);
if (isTRMagneticHout) {
x = v1X();
}
// Update the dragged handle
ts.handles[i][drag.kind] = { x, y };
// CONSTRAINT: Keep handles collinear (on the same line through anchor)
// Exception: Skip for TR point in magnetic mode (both handles should be free)
if (!isTRMagnetic) {
const anchor = ts.points[i];
const oppositeKind = drag.kind === 'hin' ? 'hout' : 'hin';
const oppositeHandle = ts.handles[i][oppositeKind];
// Calculate vector from anchor to dragged handle
const dx = x - anchor.x;
const dy = y - anchor.y;
const dragDist = Math.sqrt(dx * dx + dy * dy);
// Calculate original distance of opposite handle from anchor
const oppDx = oppositeHandle.x - anchor.x;
const oppDy = oppositeHandle.y - anchor.y;
const oppDist = Math.sqrt(oppDx * oppDx + oppDy * oppDy);
// Mirror the direction: opposite handle stays on same line but opposite side
if (dragDist > 0) {
ts.handles[i][oppositeKind] = {
x: anchor.x - (dx / dragDist) * oppDist,
y: anchor.y - (dy / dragDist) * oppDist
};
}
}
}
// Redraw path + handles
$path.attr('d', buildPathD(ts.points, ts.handles));
svgClear($gLines); svgClear($gCtrl); svgClear($gAnch);
const n = ts.points.length;
for (let k=0;kRemove Point' +
'';
$('body').append(menuHtml);
console.log('Context menu created');
}
var $contextMenu = $('#clipon-context-menu');
var contextMenuIndex = null;
var contextMenuSizeKey = null;
// Right-click on anchor points to show context menu
$svg.on('contextmenu', '.anchor', function(e) {
console.log('Right-click detected on anchor');
e.preventDefault();
e.stopPropagation();
var idx = +$(this).attr('data-index');
console.log('Anchor index:', idx);
// Don't show menu for the first 4 core points
if (idx < 4) {
console.log('Skipping - core point');
return;
}
contextMenuIndex = idx;
contextMenuSizeKey = activeSize || '_single';
// Position menu at click location
console.log('Showing menu at:', e.clientX, e.clientY);
$contextMenu.css({
left: e.clientX + 'px',
top: e.clientY + 'px',
display: 'block'
});
});
// Click on Remove Point button
$('#clipon-remove-point').on('click', function(e) {
console.log('Remove clicked');
e.preventDefault();
e.stopPropagation();
if (contextMenuIndex !== null && contextMenuSizeKey !== null) {
removePointFromPath(contextMenuIndex, contextMenuSizeKey);
}
$contextMenu.hide();
contextMenuIndex = null;
contextMenuSizeKey = null;
});
// Hide context menu when clicking elsewhere
$(document).on('click', function(e) {
if (!$(e.target).closest('#clipon-context-menu').length) {
$contextMenu.hide();
}
});
// Also hide when scrolling
$(window).on('scroll', function() {
$contextMenu.hide();
});
function addPointToPath(x, y, sizeKey) {
const ts = traceBySize.get(sizeKey);
if (!ts || !ts.points || ts.points.length < 4) return;
// Find the closest point ON the curve (not clicked position)
const pathEl = document.getElementById('clipon-trace-path');
const closestInfo = findClosestPointOnCurve(pathEl, x, y);
if (!closestInfo) return;
// Use the exact point on the curve
const exactPoint = closestInfo.point;
const insertIdx = closestInfo.segmentIndex + 1;
// Get tangent at this point to calculate handles
const tangent = tangentUnitAt(pathEl, closestInfo.lengthOnPath);
// Calculate handle length based on neighboring points
const prevIdx = closestInfo.segmentIndex;
const nextIdx = (insertIdx) % ts.points.length;
const prevPoint = ts.points[prevIdx];
const nextPoint = ts.points[nextIdx];
// Average distance to neighbors
const distToPrev = Math.hypot(exactPoint.x - prevPoint.x, exactPoint.y - prevPoint.y);
const distToNext = Math.hypot(exactPoint.x - nextPoint.x, exactPoint.y - nextPoint.y);
const avgDist = (distToPrev + distToNext) / 2;
// Handle length proportional to distance (typically 1/3 to 1/2)
const handleLength = avgDist * 0.35;
// Create handles along the tangent
const newHandles = {
hin: {
x: exactPoint.x - tangent.x * handleLength,
y: exactPoint.y - tangent.y * handleLength
},
hout: {
x: exactPoint.x + tangent.x * handleLength,
y: exactPoint.y + tangent.y * handleLength
}
};
// Insert the new point
ts.points.splice(insertIdx, 0, exactPoint);
ts.handles.splice(insertIdx, 0, newHandles);
// Update both spring and magnetic paths if they exist
if (ts.springPath) {
ts.springPath.points = JSON.parse(JSON.stringify(ts.points));
ts.springPath.handles = JSON.parse(JSON.stringify(ts.handles));
}
if (ts.magneticPath) {
ts.magneticPath.points = JSON.parse(JSON.stringify(ts.points));
ts.magneticPath.handles = JSON.parse(JSON.stringify(ts.handles));
}
// Redraw
drawTrace(sizeKey);
}
function removePointFromPath(index, sizeKey) {
const ts = traceBySize.get(sizeKey);
if (!ts || !ts.points || index < 4 || index >= ts.points.length) return;
// Remove the point and its handles
ts.points.splice(index, 1);
ts.handles.splice(index, 1);
// Only regenerate handles for neighboring points to minimize curve change
// Regenerate for the previous point (now at index-1) and next point (now at index, which was index+1)
const numPoints = ts.points.length;
if (numPoints >= 4) {
// Use catmullHandles to regenerate just the affected handles
const allHandles = catmullHandles(ts.points);
// Update only the affected handles (previous and next points)
const prevIdx = (index - 1 + numPoints) % numPoints;
const currIdx = index % numPoints; // This is the point that was after the removed one
ts.handles[prevIdx] = allHandles[prevIdx];
if (currIdx < ts.handles.length) {
ts.handles[currIdx] = allHandles[currIdx];
}
}
// Update both spring and magnetic paths if they exist
if (ts.springPath) {
ts.springPath.points = JSON.parse(JSON.stringify(ts.points));
ts.springPath.handles = JSON.parse(JSON.stringify(ts.handles));
}
if (ts.magneticPath) {
ts.magneticPath.points = JSON.parse(JSON.stringify(ts.points));
ts.magneticPath.handles = JSON.parse(JSON.stringify(ts.handles));
}
// Redraw
drawTrace(sizeKey);
}
function findClosestPointOnCurve(pathEl, x, y) {
if (!pathEl) return null;
const totalLength = pathEl.getTotalLength();
const samples = 200;
let minDist = Infinity;
let bestLength = 0;
// Sample the path to find closest point
for (let i = 0; i <= samples; i++) {
const len = (totalLength * i) / samples;
const pt = pathEl.getPointAtLength(len);
const dist = Math.hypot(pt.x - x, pt.y - y);
if (dist < minDist) {
minDist = dist;
bestLength = len;
}
}
// Get the exact point on the curve at this length
const exactPoint = pathEl.getPointAtLength(bestLength);
// Find which segment this corresponds to
const ts = traceBySize.get(activeSize || '_single');
if (!ts || !ts.points) return null;
const numPoints = ts.points.length;
const segmentIndex = Math.floor((bestLength / totalLength) * numPoints) % numPoints;
return {
point: exactPoint,
lengthOnPath: bestLength,
segmentIndex: segmentIndex,
distance: minDist
};
}
// ---------- Drill maths + drawing ----------
function tangentUnitAt(pathEl, s){
const L = pathEl.getTotalLength();
const h = Math.max(0.5, L/2000);
const s1 = Math.max(0, s - h);
const s2 = Math.min(L, s + h);
const p1 = pathEl.getPointAtLength(s1);
const p2 = pathEl.getPointAtLength(s2);
let tx = p2.x - p1.x, ty = p2.y - p1.y;
const len = Math.hypot(tx, ty) || 1e-6;
return { x: tx/len, y: ty/len };
}
function inwardNormalUnitAt(pathEl, s, centerX, centerY){
const t = tangentUnitAt(pathEl, s);
const n1 = { x: -t.y, y: t.x };
const n2 = { x: t.y, y: -t.x };
const p = pathEl.getPointAtLength(s);
const toC= { x: centerX - p.x, y: centerY - p.y };
const dot1 = n1.x*toC.x + n1.y*toC.y;
const dot2 = n2.x*toC.x + n2.y*toC.y;
return (dot1 >= dot2) ? n1 : n2;
}
function samplePathForTargetXY(pathEl, target, axis, sign, centerX, centerY){
const N = 2000, L = pathEl.getTotalLength();
let best = null, bestErr = Infinity;
for(let i=0;i<=N;i++){
const s = (L*i)/N;
const pt = pathEl.getPointAtLength(s);
const v = (axis==='x') ? pt.x : pt.y;
const otherRel = (axis==='x') ? (pt.y - centerY) : (pt.x - centerX);
if (sign && Math.sign(otherRel) !== sign) continue;
const err = Math.abs(v - target);
if (err < bestErr){ bestErr = err; best = { x:pt.x, y:pt.y, s }; }
}
return best;
}
// Step 1–4: compute drills only when visible
function drillsVisible(ts){
const hasPath = !!($path.attr('d') || '').trim();
const isTracePanel = $tabTrace.hasClass('is-active');
return hasPath && (ts.drillOpen || !isTracePanel);
}
function drawDrills(){
const ts = traceBySize.get(activeSize||'_single');
svgClear($gDrills);
if (!ts || !drillsVisible(ts)) return;
const d = ($path.attr('d')||'').trim();
if (!d) return;
const pathEl = $path[0];
const bbox = pathEl.getBBox();
if (!bbox || !bbox.width || !bbox.height) return;
const centerX = bbox.x + bbox.width/2;
const centerY = bbox.y + bbox.height/2;
const dpi = getDpi();
const pxPerMm = dpi / 25.4;
const leftTopXmm = parseFloat($drLeftTop.val()) || 20;
const leftBottomXmm = parseFloat($drLeftBottom.val()) || 20;
const bridgeMm = parseFloat($drBridge.val()) || 10;
const isMag = (ts.magMode === 'magnetic');
// LEFT slots (top & bottom) — draw 1.0mm inward along normal at independent X positions
const targetTopXpx = centerX - (leftTopXmm * pxPerMm);
const targetBotXpx = centerX - (leftBottomXmm * pxPerMm);
const topPt = samplePathForTargetXY(pathEl, targetTopXpx, 'x', -1, centerX, centerY);
const botPt = samplePathForTargetXY(pathEl, targetBotXpx, 'x', +1, centerX, centerY);
function drawNormalSlotAt(sample, mmLen){
if(!sample) return;
const n = inwardNormalUnitAt(pathEl, sample.s, centerX, centerY);
const dx = n.x * (mmLen * pxPerMm);
const dy = n.y * (mmLen * pxPerMm);
svgAppend($gDrills, svgEl('line', { x1:sample.x, y1:sample.y, x2:sample.x+dx, y2:sample.y+dy, stroke:HOLE_COLOR, 'stroke-width':2 }));
}
drawNormalSlotAt(topPt, 1.0);
drawNormalSlotAt(botPt, 1.0);
// RIGHT
if (isMag) {
// Magnetic → horizontal slot at y = centerY - bridgeMm, ending at v1X()
const y = centerY - (bridgeMm * pxPerMm);
const x = v1X();
const lenPx = 2.0 * pxPerMm;
svgAppend($gDrills, svgEl('line', { x1:x - lenPx, y1:y, x2:x, y2:y, stroke:HOLE_COLOR, 'stroke-width':2 }));
} else {
// Spring → short slot + small hole near right
const rightEdgePx = bbox.x + bbox.width;
const startXpx = rightEdgePx - (10.5 * pxPerMm);
const startPt = samplePathForTargetXY(pathEl, startXpx, 'x', -1, centerX, centerY);
if (startPt){
const ex = startPt.x - (0.2 * pxPerMm);
const ey = startPt.y + (0.2 * pxPerMm);
svgAppend($gDrills, svgEl('line', { x1:startPt.x, y1:startPt.y, x2:ex, y2:ey, stroke:HOLE_COLOR, 'stroke-width':2 }));
const hx = ex - (0.5 * pxPerMm);
const hy = ey + (2.5 * pxPerMm);
svgAppend($gDrills, svgEl('circle', { cx:hx, cy:hy, r:(1.3/2) * pxPerMm, fill:'#fff', stroke:HOLE_COLOR, 'stroke-width':2 }));
}
}
}
// ---------- Drill toggle / mode ----------
// (Step 1–4 wired correctly, namespaced, no accidental nesting)
$drillToggle.off('.clipon').on('click.clipon', function(){
const key = (activeSize||'_single');
const ts = traceBySize.get(key); if (!ts || ts.mode!=='edit') return;
ts.drillOpen = !ts.drillOpen;
$drillPanel.toggle(ts.drillOpen);
$drillToggle.text(ts.drillOpen ? 'Edit Path' : 'Drill');
if (ts.drillOpen) {
if (drillsVisible(ts)) { drawDrills(); svgShow($gDrills); }
} else {
svgClear($gDrills); svgHide($gDrills);
}
updateTraceVisibility();
});
$drLeftTop.add($drLeftBottom).add($drBridge).add($drFactorSpring).add($drFactorMag).off('.clipon').on('input.clipon change.clipon', function(){
const key = (activeSize||'_single');
const ts = traceBySize.get(key); if (!ts) return;
// Bridge change in Magnetic → re-position TR & redraw path
if ($(this).is($drBridge) && ts.magMode==='magnetic') {
applyMagnetics(ts);
drawTrace(key); // re-renders anchors/handles; persist inside drawTrace
}
// Factor Mag change in Magnetic → re-position TR & redraw path
if ($(this).is($drFactorMag) && ts.magMode==='magnetic') {
applyMagnetics(ts);
drawTrace(key); // re-renders anchors/handles; persist inside drawTrace
}
// Factor Spring change in Spring mode → redraw drills
if ($(this).is($drFactorSpring) && ts.magMode==='spring') {
console.log('Spring factor changed to:', $drFactorSpring.val());
// Persist first to update drillData, then redraw
persistDrill();
console.log('After persist, ts.drillData:', ts.drillData);
if (drillsVisible(ts)) {
drawDrills();
svgShow($gDrills);
}
return; // Exit early since we already called persistDrill
}
persistDrill();
if (drillsVisible(ts)) { drawDrills(); svgShow($gDrills); }
else { svgHide($gDrills); }
updateTraceVisibility();
});
$modeSwitch
.off('.clipon')
.on('click.clipon', function(){
const key = (activeSize||'_single');
const ts = traceBySize.get(key); if (!ts) return;
const nowMag = !(ts.magMode==='magnetic');
setMode(ts, nowMag ? 'magnetic' : 'spring');
})
.on('keydown.clipon', function(e){ if (e.key==='Enter' || e.key===' ') { e.preventDefault(); $(this).trigger('click'); } });
function setMode(ts, mode){
ts.magMode = mode;
const isMag = (mode==='magnetic');
$modeSwitch.toggleClass('is-on', isMag).attr('aria-checked', isMag ? 'true' : 'false');
$magOnly.toggle(isMag);
$springOnly.toggle(!isMag);
if (isMag) applyMagnetics(ts); else restoreSpring(ts);
const key = (activeSize||'_single');
drawTrace(key); // redraw path + handles (+persistTrace inside)
persistDrill();
if (drillsVisible(ts)) { drawDrills(); svgShow($gDrills); }
else { svgHide($gDrills); }
updateTraceVisibility();
}
function applyMagnetics(ts){
var trIdx = findTRIndex(ts);
if (!ts.springBackup) {
ts.springBackup = {
anchor: { ...ts.points[trIdx] },
hin: { ...ts.handles[trIdx].hin },
hout: { ...ts.handles[trIdx].hout }
};
}
// factorMag mm above bridge line, x at v1
const factorMag = (ts.drillData && ts.drillData.factorMag) ? ts.drillData.factorMag : 2.25;
const yLine = $box.innerHeight()/2 - mmToPx(parseFloat($drBridge.val()) || 10);
const newY = yLine - mmToPx(factorMag);
const newX = v1X();
const old = ts.points[trIdx];
const dx = newX - old.x;
const dy = newY - old.y;
ts.points[trIdx] = { x:newX, y:newY };
ts.handles[trIdx].hin = {
x: ts.handles[trIdx].hin.x + dx,
y: ts.handles[trIdx].hin.y + dy
};
const L = Math.hypot(
ts.handles[trIdx].hout.x - old.x,
ts.handles[trIdx].hout.y - old.y
);
ts.handles[trIdx].hout = { x:newX, y:newY + L };
}
function restoreSpring(ts){
if (!ts.springBackup) return;
var trIdx = findTRIndex(ts);
ts.points[trIdx] = { ...ts.springBackup.anchor };
ts.handles[trIdx] = { hin:{ ...ts.springBackup.hin }, hout:{ ...ts.springBackup.hout } };
ts.springBackup = null;
}
// ---------- Visibility helpers ----------
function updateTraceVisibility(){
const ts = traceBySize.get(activeSize||'_single'); if (!ts) return;
const isTraceActive = $tabTrace.hasClass('is-active');
const hasPath = !!($path.attr('d')||'').trim();
const showHoles = drillsVisible(ts);
const hideEdit = (ts.drillOpen && isTraceActive) || !isTraceActive;
(hideEdit || !hasPath) ? svgHide($gAnch) : svgShow($gAnch);
(hideEdit || !hasPath) ? svgHide($gCtrl) : svgShow($gCtrl);
(hideEdit || !hasPath) ? svgHide($gLines): svgShow($gLines);
// Only show/hide drills; drawDrills() is called elsewhere when needed
showHoles ? svgShow($gDrills) : svgHide($gDrills);
$path.toggle(hasPath);
$download.toggle(hasPath && (!ts.mode || ts.mode==='edit'));
$virtualBtn.toggle(hasPath && (!ts.mode || ts.mode==='edit'));
$drillToggle.text(ts.drillOpen ? 'Edit Path' : 'Drill');
}
function showIdleView(){
const ts = traceBySize.get(activeSize || '_single');
const hasPath = !!($path.attr('d')||'').trim();
if (hasPath) {
$svg.css({ display:'block', pointerEvents:'none' });
svgHide($gAnch); svgHide($gCtrl); svgHide($gLines);
if (ts && drillsVisible(ts)) { drawDrills(); svgShow($gDrills); } else { svgHide($gDrills); }
$download.show();
} else {
svgHide($gDrills); svgHide($gAnch); svgHide($gCtrl); svgHide($gLines);
$svg.css('display','none'); $download.hide();
}
}
// ---------- Persist ----------
function persistTransform() {
$hid.transform.val(JSON.stringify({ tx:state.tx, ty:state.ty, scale:state.scale, sx:state.sx, sy:state.sy, rot:state.rot }));
}
function persistFrame(){
$hid.frame.val(JSON.stringify({
a:parseFloat($frame.A.val())||0, b:parseFloat($frame.B.val())||0, bridge:parseFloat($frame.Br.val())||0,
h:parseFloat($frame.H.val())||0, material:($frame.Mat.val()||'plastic'), dpi:getDpi(), color:$frame.Col.val()||'#008000'
}));
}
function persistTrace(){
$hid.path.val($path.attr('d') || '');
const key = (activeSize||'_single');
const ts = traceBySize.get(key);
$hid.points.val(JSON.stringify(ts ? (ts.points||[]) : []));
$hid.handles.val(JSON.stringify(ts ? (ts.handles||[]) : [])); // per-anchor {hin,hout}
}
function persistDrill(){
const key = (activeSize||'_single');
const ts = traceBySize.get(key);
if (!ts) return;
// Store drill data in the traceBySize object (size-specific)
ts.drillData = {
mode: ts.magMode,
leftTopX: parseFloat($drLeftTop.val()) || 20,
leftBottomX: parseFloat($drLeftBottom.val()) || 20,
bridge: parseFloat($drBridge.val()) || 10,
factorSpring: parseFloat($drFactorSpring.val()) || 41,
factorMag: parseFloat($drFactorMag.val()) || 2.25
};
// Also persist to hidden field for database storage
$hid.drill.val(JSON.stringify(ts.drillData));
}
// Persist on post submit
$('#post').on('submit', function(){ persistAll(); });
// ---------- Download Functions ----------
// Build and download OMA file
function buildAndDownloadOMA($section, mode) {
const key = (activeSize || '_single');
const ts = traceBySize.get(key);
if (!ts) {
alert('No trace data found for current size');
return;
}
const pathEl = document.getElementById('clipon-trace-path');
if(!pathEl){
alert('No trace path found. Click "Trace" and place/edit your path first.');
return;
}
const pathData = pathEl.getAttribute('d');
if (!pathData || !pathData.trim()) {
alert('No trace path data found. Please create a trace first.');
return;
}
const bbox = pathEl.getBBox();
if (!bbox || !bbox.width || !bbox.height) {
alert('Path bounds invalid. Adjust your path.');
return;
}
const centerX = bbox.x + bbox.width/2;
const centerY = bbox.y + bbox.height/2;
// Get DPI from the frame inputs
const frameData = readFrameInputs($section);
const dpi = frameData.dpi;
const pxPerMm = pxPerMmFromDpi(dpi);
const omaPerPx = 2540 / dpi;
// Build radii array for TRCFMT
const totalSamples = 4000;
const radii = new Array(400).fill(0);
const angleStep = 2*Math.PI/400;
const totalLen = pathEl.getTotalLength();
for (let i = 0; i < totalSamples; i++) {
const len = (totalLen * i) / totalSamples;
const pt = pathEl.getPointAtLength(len);
const x = (pt.x - centerX) * omaPerPx;
const y = -(pt.y - centerY) * omaPerPx;
const angle = (Math.atan2(y, x) + 2 * Math.PI) % (2 * Math.PI);
const idx = Math.floor(angle / angleStep) % 400;
const dist = Math.hypot(x, y);
radii[idx] = Math.max(radii[idx], Math.round(dist));
}
// Build OMA file content
const lines = ['TRCFMT=1;400;E;R;F'];
for (let i = 0; i < 400; i += 10) {
lines.push('R=' + radii.slice(i, i + 10).join(';'));
}
lines.push('ZFMT=0');
// Add DRILLE records (drill holes)
const leftTopX = parseFloat($section.find('.clipon-drill-left-top').val()) || 20;
const leftBottomX = parseFloat($section.find('.clipon-drill-left-bottom').val()) || 20;
const bridgeMm = parseFloat($section.find('.clipon-drill-bridge').val()) || 10;
const material = frameData.material;
const matFactor = materialFactorForSpring(material);
// Left-side drill holes (top and bottom at independent X positions)
const targetTopXpx = centerX - (leftTopX * pxPerMm);
const targetBotXpx = centerX - (leftBottomX * pxPerMm);
const topPt = samplePathForTargetXY(pathEl, targetTopXpx, 'x', -1, centerX, centerY);
const botPt = samplePathForTargetXY(pathEl, targetBotXpx, 'x', +1, centerX, centerY);
function normalSlotMM(sample){
if (!sample) return null;
const n = inwardNormalUnitAt(pathEl, sample.s, centerX, centerY);
const A = pxToMmPoint(sample.x, sample.y, centerX, centerY, dpi);
const B = pxToMmPoint(sample.x + n.x*(1.0*pxPerMm), sample.y + n.y*(1.0*pxPerMm), centerX, centerY, dpi);
return { A: {X:fmt1(A.X), Y:fmt1(A.Y)}, B: {X:fmt1(B.X), Y:fmt1(B.Y)} };
}
if(topPt){
const {A,B} = normalSlotMM(topPt);
// lines.push(`DRILLE=B;C;${A.X};${A.Y};1.0;${B.X};${B.Y};;2;`);
lines.push(`DRILLE=B;C;${A.X};${A.Y};1.0;`);
}
if(botPt){
const {A,B} = normalSlotMM(botPt);
// lines.push(`DRILLE=B;C;${A.X};${A.Y};1.0;${B.X};${B.Y};;2;`);
lines.push(`DRILLE=B;C;${A.X};${A.Y};1.0;`);
}
if (mode === 'magnetic') {
// Right slot: horizontal 2.0 mm to the left at Y = bridgeMm
const targetYpx = centerY - (bridgeMm * pxPerMm);
const rightPx = samplePathForTargetXY(pathEl, targetYpx, 'y', +1, centerX, centerY);
if (rightPx){
const A = pxToMmPoint(rightPx.x, rightPx.y, centerX, centerY, dpi);
const B = pxToMmPoint(rightPx.x - (2.0*pxPerMm), rightPx.y, centerX, centerY, dpi);
const Af = {X:fmt1(A.X), Y:fmt1(A.Y)};
const Bf = {X:fmt1(B.X), Y:fmt1(B.Y)};
// enforce same Y (horizontal)
Bf.Y = Af.Y;
lines.push(`DRILLE=B;C;${Af.X};${Af.Y};1.0;${Bf.X};${Bf.Y};;2;`);
}
} else {
// Spring: short slot + hole
const factorSpring = (ts.drillData && ts.drillData.factorSpring) ? ts.drillData.factorSpring : 44;
console.log('drawDrills spring mode - factorSpring:', factorSpring, 'from ts.drillData:', ts.drillData);
const deltaMm = (factorSpring - (frameData.bridge - matFactor)) / 2;
console.log('deltaMm calculated:', deltaMm, 'bridge:', frameData.bridge, 'matFactor:', matFactor);
const rightEdgePx = bbox.x + bbox.width;
const startXpx = rightEdgePx - (deltaMm * pxPerMm);
const startPx = samplePathForTargetXY(pathEl, startXpx, 'x', -1, centerX, centerY);
if(startPx){
// slot: 0.2 mm left & 0.2 mm down
const A = pxToMmPoint(startPx.x, startPx.y, centerX, centerY, dpi);
const B = pxToMmPoint(startPx.x - (0.2*pxPerMm), startPx.y + (0.2*pxPerMm), centerX, centerY, dpi);
const Af = {X:fmt1(A.X), Y:fmt1(A.Y)};
const Bf = {X:fmt1(B.X), Y:fmt1(B.Y)};
lines.push(`DRILLE=B;C;${Af.X};${Af.Y};2;${Bf.X};${Bf.Y};;2;`);
// hole: 0.6 mm left & 2.5 mm below end, dia 1.4 mm
const HpxX = (startPx.x - (0.2*pxPerMm)) - (0.6*pxPerMm);
const HpxY = (startPx.y + (0.2*pxPerMm)) + (2.5*pxPerMm);
const H = pxToMmPoint(HpxX, HpxY, centerX, centerY, dpi);
const Hf = {X:fmt1(H.X), Y:fmt1(H.Y)};
lines.push(`DRILLE=B;C;${Hf.X};${Hf.Y};${fmt1(1.4)};`);
}
}
// Generate filename
const brand = cliponGetBrandFromCategories();
const model = cliponGetModelFromAttributes(false);
const fb = cliponGetEyeAndBridge();
const suffix = (mode === 'magnetic') ? 'M' : 'S';
const clean = s => (s || '')
.toString()
.replace(/×/g,'')
.replace(/\(\d+\)\s*$/,'')
.replace(/\s+/g,' ')
.trim()
.replace(/[\s_\-]+/g,'')
.replace(/[^A-Za-z0-9]/g,'');
const base = (clean(brand) + clean(model) + clean(fb.eyeA) + clean(fb.bridge)) || 'CliponTrace';
const filename = base.replace(/maketermprimary/gi, '') + suffix + '.oma';
// Create and download file
const blob = new Blob([lines.join('\n')], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 0);
}
// ---------- Download dropdown wiring ----------
// Grab the existing download UI from your PHP markup
const $dlWrap = $root.find('.clipon-download');
const $dlMain = $dlWrap.find('.clipon-download-main');
const $dlMenu = $dlWrap.find('.clipon-download-menu');
const $dlMag = $dlWrap.find('.clipon-download-mag'); // Magnetic
const $dlSpr = $dlWrap.find('.clipon-download-spr'); // Spring
// Helper: do we have a path?
function cliponHasPath() {
const d = ($path.attr('d') || '').trim();
return !!d;
}
// Toggle menu on main button click
$dlMain.off('click.clipon').on('click.clipon', function (e) {
e.preventDefault();
e.stopPropagation();
if (!cliponHasPath()) {
alert('No trace path found. Click "Trace" and place/edit your path first.');
return;
}
$dlMenu.toggle(); // simple show/hide
});
// Close the menu when clicking outside
$(document).off('click.cliponCloseMenu').on('click.cliponCloseMenu', function () {
$dlMenu.hide();
});
// Keep clicks inside the menu from closing it immediately
$dlMenu.off('click.stopClose').on('click.stopClose', function (e) {
e.stopPropagation();
});
// Wire the two options to the working builders
$dlMag.off('click.clipon').on('click.clipon', function (e) {
e.preventDefault();
if (!cliponHasPath()) return;
try {
buildAndDownloadOMA($root, 'magnetic');
} finally {
$dlMenu.hide();
}
});
$dlSpr.off('click.clipon').on('click.clipon', function (e) {
e.preventDefault();
if (!cliponHasPath()) return;
try {
buildAndDownloadOMA($root, 'spring');
} finally {
$dlMenu.hide();
}
});
// Optional: keyboard support
$dlMain.attr('aria-haspopup', 'true').attr('aria-expanded', 'false');
$dlMain.on('click.cliponA11y', function(){
$dlMain.attr('aria-expanded', $dlMenu.is(':visible') ? 'true' : 'false');
});
$dlMain.on('keydown.cliponA11y', function(e){
if (e.key === 'ArrowDown' && $dlMenu.is(':hidden') && cliponHasPath()) {
e.preventDefault();
$dlMenu.show();
$dlMag.trigger('focus');
}
});
function setMaterialFromTags() {
setTimeout(function() {
try {
var tagElements = document.querySelectorAll('.tagchecklist li');
console.log('setMaterialFromTags: Found', tagElements.length, 'tag elements');
if (tagElements.length === 0) {
console.log('setMaterialFromTags: No tags found yet, retrying in 2 seconds...');
setTimeout(setMaterialFromTags, 2000);
return;
}
var tags = [];
for (var i = 0; i < tagElements.length; i++) {
var rawText = tagElements[i].textContent;
// Extract the actual tag name from "Remove term: TagName TagName"
var match = rawText.match(/Remove term:\s*([\w-]+)/);
if (match) {
var tagText = match[1].toLowerCase().trim();
if (tagText && tags.indexOf(tagText) === -1) {
tags.push(tagText);
}
}
}
console.log('setMaterialFromTags: Extracted tags:', tags);
// Material options to match against
var materialOptions = ['plastic', 'metal', 'semi-rimless'];
var foundMaterial = null;
// Check if any tag matches a material option
for (var j = 0; j < materialOptions.length; j++) {
if (tags.indexOf(materialOptions[j]) !== -1) {
foundMaterial = materialOptions[j];
break;
}
}
if (foundMaterial) {
console.log('setMaterialFromTags: Found material:', foundMaterial);
// Set the material dropdown
$frame.Mat.val(foundMaterial);
// Update all size maps with the selected material
Object.keys(sizeMap).forEach(function(sizeKey) {
if (sizeMap[sizeKey] && sizeMap[sizeKey].frame) {
sizeMap[sizeKey].frame.material = foundMaterial;
}
});
// Persist the changes
persistFrame();
$hid.sizesMap.val(JSON.stringify(sizeMap));
// Disable the dropdown
$frame.Mat.prop('disabled', true).css('opacity', '0.6');
// Update guides
updateGuides();
console.log('setMaterialFromTags: Material set and dropdown disabled');
} else {
console.log('setMaterialFromTags: No material tag found in tags:', tags);
}
} catch(e) {
console.error('setMaterialFromTags error:', e);
}
}, 3000); // Increased to 3 seconds
}
// ---------- Double section ----------
const $dblList = $('.clipon-double-list');
// Boot: Load saved double images from database
const savedDoubleImages = readJSON($hid.doubleImgs.val(), []);
savedDoubleImages.forEach(img => {
const $B = $(`
Remove
`);
$dblList.append($B);
});
$('.clipon-upload-double').on('click', function(){
const frame = wp.media({ title:'Add Images', multiple:true, library:{type:'image'} });
frame.on('select', function(){
const out = [];
frame.state().get('selection').each(a => {
const j = a.toJSON(); out.push({ id:j.id, url:j.url });
const $B = $(`
Remove
`);
$dblList.append($B);
});
const curr = readJSON($hid.doubleImgs.val(), []);
$hid.doubleImgs.val(JSON.stringify(curr.concat(out)));
});
frame.open();
});
$dblList.on('click', '.clipon-reset[data-scope="double"]', function(){
const id = parseInt($(this).data('attachment-id'), 10);
const list = readJSON($hid.doubleImgs.val(), []).filter(it => parseInt(it.id,10)!==id);
$hid.doubleImgs.val(JSON.stringify(list));
$(this).closest('.clipon-double-box').remove();
});
// ---------- Utilities ----------
function readJSON(s, fb){ try{ return JSON.parse(s||''); } catch(_){ return fb; } }
function clamp(v, lo, hi){ return Math.max(lo, Math.min(hi, v)); }
// ---------- Boot ----------
// FORCE ENABLE: Enable size tabs aggressively at multiple points
function forceEnableSizeTabs() {
if (!$sizeTabs || !$sizeTabs.length) return;
$sizeTabs.each(function() {
this.disabled = false;
this.removeAttribute('disabled');
$(this).prop('disabled', false)
.removeAttr('disabled')
.css({
'pointer-events': 'auto',
'cursor': 'pointer',
'opacity': '1'
});
});
console.log('✓ Force enabled', $sizeTabs.length, 'size tabs');
}
// Enable immediately
if ($sizeTabs.length) {
forceEnableSizeTabs();
}
if (imageUploaded) {
$wrap.show(); $img.show();
try {
const t = readJSON($hid.transform.val(), null); if (t) Object.assign(state, t);
applyTransform();
const f = readJSON($hid.frame.val(), null);
if (f) {
$frame.A.val(f.a||''); $frame.B.val(f.b||''); $frame.Br.val(f.bridge||''); $frame.H.val(f.h||'');
$frame.Mat.val(f.material||'plastic'); $frame.DPI.val(f.dpi||350); $frame.Col.val(f.color||'#008000');
}
const map = readJSON($hid.sizesMap.val(), {});
Object.keys(map||{}).forEach(k=>{
const r = map[k]||{};
const points = r.points||[];
const handles = normalizeControls(r.handles, points);
const drill = r.drill || {};
if (points.length && handles) {
traceBySize.set(k, {
mode:'edit',
points,
handles,
drillOpen:false,
magMode: drill.mode || 'spring',
springBackup:null,
drillData: drill
});
}
});
if (activeSize) loadSize(activeSize);
updateGuides(); showIdleView();
// Call material detection after everything is loaded
setTimeout(setMaterialFromTags, 100);
} catch(e){}
} else {
$wrap.hide();
// Initialize frame fields from active size tab when no image is uploaded
if ($sizeTabs.length) {
const $activeTab = $sizeTabs.filter('.is-active');
if ($activeTab.length) {
const sizeLabel = $activeTab.data('size') || $activeTab.text().trim();
console.log('Active size label:', sizeLabel); // Debug log
const ab = parseAB(sizeLabel);
console.log('Parsed AB values:', ab); // Debug log
if (ab && ab.a > 0) {
$frame.A.val(ab.a);
$frame.Br.val(ab.bridge);
console.log('Set A:', ab.a, 'Bridge:', ab.bridge); // Debug log
updateGuides();
}
}
}
// Call material detection after DOM is ready
setTimeout(setMaterialFromTags, 100);
}
if ($resetBtn.length) $resetBtn.on('click', fullReset);
if ($resetTabBtn.length) $resetTabBtn.on('click', fullReset);
// Re-enable size tabs after everything is initialized
forceEnableSizeTabs();
setTimeout(forceEnableSizeTabs, 100);
setTimeout(forceEnableSizeTabs, 500);
// ---- size loader ----
function loadSize(label){
activeSize = label;
const rec = sizeMap[label];
let use = rec;
if (!use && imageUploaded && baseCalibrated && baseSizeOnUpload && label !== baseSizeOnUpload) {
const base = sizeMap[baseSizeOnUpload];
const targetAB = parseAB(label);
const baseAB = parseAB(baseSizeOnUpload);
const baseA = baseAB.a || baseAOnUpload || 0;
const targetA = targetAB.a || 0;
if (base && baseA>0 && targetA>0) {
const k = targetA / baseA;
const t = Object.assign({}, base.transform || {});
t.scale = +( (t.scale||1) * k ).toFixed(6);
// Scale the trace path if it exists
let scaledPoints = [];
let scaledHandles = [];
let scaledPath = '';
if (base.points && base.points.length > 0) {
// Get the center of the image wrapper for scaling reference
const centerX = $wrap.width() / 2;
const centerY = $wrap.height() / 2;
// Scale points around the center
scaledPoints = base.points.map(p => ({
x: centerX + (p.x - centerX) * k,
y: centerY + (p.y - centerY) * k
}));
// Scale handles around the center
if (base.handles && base.handles.length > 0) {
scaledHandles = base.handles.map(h => ({
hin: {
x: centerX + (h.hin.x - centerX) * k,
y: centerY + (h.hin.y - centerY) * k
},
hout: {
x: centerX + (h.hout.x - centerX) * k,
y: centerY + (h.hout.y - centerY) * k
}
}));
}
// Generate scaled path
scaledPath = buildPathD(scaledPoints, scaledHandles);
}
use = {
transform: t,
frame: Object.assign({}, base.frame || {}, { a: targetA, bridge: targetAB.bridge }),
path: scaledPath,
points: scaledPoints,
handles: scaledHandles,
drill: base.drill || {}
};
sizeMap[label] = use;
}
}
if (use) {
$hid.transform.val(JSON.stringify(use.transform||{}));
$hid.frame.val(JSON.stringify(use.frame||{}));
$hid.path.val(use.path||'');
$hid.points.val(JSON.stringify(use.points||[]));
$hid.handles.val(JSON.stringify(use.handles||[]));
$hid.drill.val(JSON.stringify(use.drill||{}));
Object.assign(state, use.transform||{}); applyTransform();
const f = use.frame||{};
$frame.A.val(f.a||''); $frame.B.val(f.b||''); $frame.Br.val(f.bridge||''); $frame.H.val(f.h||'');
$frame.Mat.val(f.material||'plastic'); $frame.DPI.val(f.dpi||350); $frame.Col.val(f.color||'#008000');
updateGuides();
const key = (label||'_single');
const points = use.points||[];
const handles = normalizeControls(use.handles, points);
const drill = use.drill || {};
// Load drill data into input fields
$drLeftTop.val(drill.leftTopX || 20);
$drLeftBottom.val(drill.leftBottomX || 20);
$drBridge.val(drill.bridge || 10);
$drFactorSpring.val(drill.factorSpring || 44);
$drFactorMag.val(drill.factorMag || 2.25);
// Load attributes for this size
if (use.attributes) {
applyAttributes(use.attributes);
}
if (points.length && handles) {
const ts = {
mode: 'edit',
points,
handles,
drillOpen: false,
magMode: drill.mode || 'spring',
springBackup: null,
drillData: drill
};
traceBySize.set(key, ts);
// Set the mode UI to match loaded drill data
setMode(ts, ts.magMode);
drawTrace(label);
} else {
clearPathAndMask();
}
} else {
const ab = parseAB(label);
$frame.A.val(ab.a||''); $frame.Br.val(ab.bridge||''); $frame.DPI.val($frame.DPI.val()||350);
resetTransform(); applyTransform(); updateGuides(); clearPathAndMask();
// Reset attributes
$('.clipon-position-select').val('');
$('.clipon-bridge-select').val('');
}
// Load size-specific image if available
loadSizeImage(label);
showIdleView();
}
// Load size-specific image from uploaded media library URLs
function loadSizeImage(sizeLabel) {
const $sizeImagesInput = $hidden.find('input[name="_clipon_size_images"]');
const sizeImages = readJSON($sizeImagesInput.val(), {});
if (sizeImages[sizeLabel]) {
const imageUrl = sizeImages[sizeLabel];
console.log('✓ Loading size-specific image for', sizeLabel);
$img.attr('src', imageUrl);
$hid.url.val(imageUrl);
$wrap.show();
imageUploaded = true;
} else {
console.log('No size-specific image for', sizeLabel);
}
}
function clearPathAndMask(){ $path.attr('d',''); svgClear($gAnch); svgClear($gCtrl); svgClear($gLines); hideMask(); }
// ---------- Reset ----------
function fullReset(){
$img.attr('src','').hide();
$wrap.hide();
imageUploaded = false;
baseCalibrated = false;
baseSizeOnUpload = '';
baseAOnUpload = 0;
resetTransform(); applyTransform();
$traceBtn.prop('disabled', true);
clearPathAndMask(); svgClear($gDrills); $download.hide();
$hid.id.val(''); $hid.url.val('');
$hid.transform.val(''); $hid.frame.val('');
$hid.path.val(''); $hid.points.val(''); $hid.handles.val('');
$hid.drill.val('');
}
// ---------- Page Load: Enable Trace tab if data exists ----------
(function initializeTraceTab() {
// Check if we have an image (either from single_image_url or size_images)
const hasSingleImage = !!$hid.url.val();
const $sizeImagesInput = $hidden.find('input[name="_clipon_size_images"]');
const sizeImages = readJSON($sizeImagesInput.val(), {});
const hasSizeImages = Object.keys(sizeImages).length > 0;
const hasImage = hasSingleImage || hasSizeImages;
// Check if we have path data
const sizesMap = readJSON($hid.sizesMap.val(), {});
const hasPathData = Object.keys(sizesMap).length > 0 && Object.values(sizesMap).some(function(sizeData) {
return sizeData && (sizeData.path || (sizeData.points && sizeData.points.length > 0));
});
// Enable Trace tab if both conditions are met
if (hasImage && hasPathData) {
$tabTrace.removeClass('disabled').prop('disabled', false);
console.log('✓ Trace tab enabled on page load (image + path data found)');
} else {
console.log('Trace tab disabled on page load:', { hasImage, hasPathData });
}
})();
});
// Final failsafe: Force enable size tabs after everything loads
jQuery(document).ready(function($) {
setTimeout(function() {
$('.clipon-size-tab').each(function() {
this.disabled = false;
this.removeAttribute('disabled');
$(this).prop('disabled', false)
.removeAttr('disabled')
.css({
'pointer-events': 'auto',
'cursor': 'pointer'
});
});
console.log('✓ Final failsafe: Size tabs forcibly enabled');
}, 1000);
});
// On WordPress update, ensure attributes are saved
jQuery(function($) {
$('form#post').on('submit', function(e) {
const $hidden = $('#clipon-hidden');
const $sizesMapInput = $hidden.find('input[name="_clipon_sizes_map"]');
const activeSize = $hidden.find('input[name="_clipon_active_size"]').val() || '_single';
// Parse current sizeMap
let sizeMap;
try {
sizeMap = JSON.parse($sizesMapInput.val() || '{}') || {};
} catch(err) {
sizeMap = {};
}
// Get current attributes from UI
const attrs = {};
$('.clipon-position-field').each(function() {
const $field = $(this);
const pos = $field.data('position');
if (!pos) return;
const $select = $field.find('.clipon-position-select');
if ($select.length) {
const val = $select.val();
if (val) attrs[pos] = val;
} else {
const $valueDiv = $field.find('.clipon-position-value');
if ($valueDiv.length) {
const val = $valueDiv.text().trim();
if (val && val !== '—') attrs[pos] = val;
}
}
});
const $bridgeField = $('.clipon-bridge-field');
const $bridgeSelect = $bridgeField.find('.clipon-bridge-select');
if ($bridgeSelect.length) {
const val = $bridgeSelect.val();
if (val) attrs['magnetic-bridge'] = val;
} else {
const $bridgeValue = $bridgeField.find('.clipon-position-value');
if ($bridgeValue.length) {
const val = $bridgeValue.text().trim();
if (val && val !== '—') attrs['magnetic-bridge'] = val;
}
}
// Save attributes to the active size
if (sizeMap[activeSize]) {
sizeMap[activeSize].attributes = attrs;
} else {
// Create minimal entry for active size
sizeMap[activeSize] = { attributes: attrs };
}
// Save back to hidden input
$sizesMapInput.val(JSON.stringify(sizeMap));
console.log('Pre-submit: Saved attributes for', activeSize, attrs);
});
}); // end jQuery wrapper — form#post submit
// Product Navigation Buttons
jQuery(document).ready(function($) {
if (typeof cliponNavData !== 'undefined') {
var $buttons = $('
');
if (cliponNavData.prevUrl) {
$buttons.append('← Prev ');
}
if (cliponNavData.nextUrl) {
$buttons.append('Next → ');
}
$('.wrap h1').first().css('position', 'relative').append($buttons);
}
});
// ── Admin Lightbox ── (Order pages)
jQuery(function ($) {
if (!$('#order_line_items, .woocommerce_order_items, #woocommerce-order-items').length) return;
if (!$('.clipon-admin-lightbox-overlay').length) {
$('body').append(
'' +
'
' +
'
× ' +
'
‹ ' +
'
' +
'
› ' +
'
1 / 1
' +
'
' +
'
Remove ');
}
});
mediaUploader.open();
});
$(document).on('click', '.addon-remove-image', function (e) {
e.preventDefault();
var $field = $(this).closest('.addon-image-field');
$field.find('.addon-image-url').val('');
$field.find('.addon-image-preview').html('No image set ');
$(this).remove();
});
});
// ── Category Prefix Field Mover ── (product_cat taxonomy pages)
jQuery(function ($) {
if (!window.location.href.includes('taxonomy=product_cat')) return;
var $prefixRow = $('input#category_prefix').closest('tr, .form-field');
var $nameRow = $('.form-field.term-name-wrap').closest('tr, .form-field');
if ($prefixRow.length && $nameRow.length) {
$prefixRow.insertAfter($nameRow);
}
});
// ── Bulk Discounts Table ── (WooCommerce settings page)
jQuery(function ($) {
if (!$('#bulk-discount-table').length) return;
$('#btn-add-rule').on('click', function () {
var row =
'' +
'\u2715 ';
$('#bulk-discount-tbody').append(row);
});
$(document).on('click', '.btn-remove-rule', function () {
if ($('.bulk-discount-row').length > 1) {
$(this).closest('tr').remove();
}
});
});
https://cliponexpress.com/post-sitemap.xml
2023-02-06T22:36:37+00:00
https://cliponexpress.com/page-sitemap.xml
2026-04-06T12:36:21+00:00
https://cliponexpress.com/product-sitemap.xml
2026-06-27T01:12:10+00:00
https://cliponexpress.com/category-sitemap.xml
2023-02-06T22:36:37+00:00
https://cliponexpress.com/product_cat-sitemap.xml
2026-06-27T01:12:10+00:00