File size: 5,822 Bytes
e17e97d 1ae09a1 d609302 e17e97d 1ae09a1 e17e97d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | class CustomImageEditor extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 1000;
align-items: center;
justify-content: center;
}
.editor-container {
background-color: white;
border-radius: 1rem;
width: 90%;
max-width: 1000px;
max-height: 90vh;
overflow: auto;
}
.tool-button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
}
.tool-button:hover {
background-color: #f3f4f6;
}
.tool-button.active {
background-color: #e5e7eb;
}
</style>
<div class="editor-container p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Image Editor</h3>
<div class="flex space-x-4">
<button id="close-editor" class="text-gray-500 hover:text-gray-700 flex items-center p-2">
<i data-feather="x" class="mr-2"></i>
Exit Editor
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 bg-gray-100 rounded-lg overflow-hidden">
<canvas id="editor-canvas" class="w-full h-full"></canvas>
</div>
<div>
<h4 class="font-semibold mb-4">Tools</h4>
<div class="grid grid-cols-4 gap-2 mb-6">
<div class="tool-button" data-tool="select">
<i data-feather="move"></i>
</div>
<div class="tool-button" data-tool="crop">
<i data-feather="crop"></i>
</div>
<div class="tool-button" data-tool="brush">
<i data-feather="edit-3"></i>
</div>
<div class="tool-button" data-tool="text">
<i data-feather="type"></i>
</div>
<div class="tool-button" data-tool="filter">
<i data-feather="sliders"></i>
</div>
<div class="tool-button" data-tool="face">
<i data-feather="smile"></i>
</div>
<div class="tool-button" data-tool="undo">
<i data-feather="rotate-ccw"></i>
</div>
<div class="tool-button" data-tool="redo">
<i data-feather="rotate-cw"></i>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">Adjustments</label>
<div class="space-y-4">
<div>
<label class="text-sm text-gray-500">Brightness</label>
<input type="range" class="w-full">
</div>
<div>
<label class="text-sm text-gray-500">Contrast</label>
<input type="range" class="w-full">
</div>
<div>
<label class="text-sm text-gray-500">Saturation</label>
<input type="range" class="w-full">
</div>
</div>
</div>
<button class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
Apply Changes
</button>
</div>
</div>
</div>
`;
// Add event listeners
this.shadowRoot.getElementById('close-editor').addEventListener('click', () => {
this.style.display = 'none';
});
// Tool selection
const toolButtons = this.shadowRoot.querySelectorAll('.tool-button');
toolButtons.forEach(button => {
button.addEventListener('click', () => {
toolButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
// In a real app, this would activate the selected tool
});
});
}
}
customElements.define('custom-image-editor', CustomImageEditor); |