| | 1 | | using DCL.UIElements.Structures; |
| | 2 | | using UnityEngine; |
| | 3 | | using UnityEngine.UIElements; |
| | 4 | |
|
| | 5 | | namespace DCL.UIElements.Image |
| | 6 | | { |
| | 7 | | /// <summary> |
| | 8 | | /// Draw an image on a canvas according to the custom logic |
| | 9 | | /// </summary> |
| | 10 | | public class DCLImage : IUITextureConsumer |
| | 11 | | { |
| 1 | 12 | | private static readonly Vertex[] VERTICES = new Vertex[4]; |
| 1 | 13 | | private static readonly ushort[] INDICES = { 0, 1, 2, 2, 3, 0 }; |
| | 14 | |
|
| | 15 | | private DCLImageScaleMode scaleMode; |
| | 16 | | private Texture2D texture2D; |
| | 17 | | private Sprite sprite; |
| | 18 | | private Vector4 slices; |
| | 19 | | private Color color; |
| | 20 | | private DCLUVs uvs; |
| | 21 | |
|
| 23 | 22 | | internal VisualElement canvas { get; private set; } |
| 4 | 23 | | internal bool customMeshGenerationRequired { get; private set; } |
| | 24 | |
|
| | 25 | | public DCLImageScaleMode ScaleMode |
| | 26 | | { |
| 1 | 27 | | get => scaleMode; |
| 1 | 28 | | set => SetScaleMode(value); |
| | 29 | | } |
| | 30 | |
|
| | 31 | | public Texture2D Texture |
| | 32 | | { |
| 0 | 33 | | get => texture2D; |
| 1 | 34 | | set => SetTexture(value); |
| | 35 | | } |
| | 36 | |
|
| | 37 | | /// <summary> |
| | 38 | | /// Border in normalized values |
| | 39 | | /// </summary> |
| | 40 | | public Vector4 Slices |
| | 41 | | { |
| 0 | 42 | | get => slices; |
| 1 | 43 | | set => SetSlices(value); |
| | 44 | | } |
| | 45 | |
|
| | 46 | | public Color Color |
| | 47 | | { |
| 0 | 48 | | get => color; |
| 1 | 49 | | set => SetColor(value); |
| | 50 | | } |
| | 51 | |
|
| | 52 | | public DCLUVs UVs |
| | 53 | | { |
| 0 | 54 | | get => uvs; |
| 1 | 55 | | set => SetUVs(value); |
| | 56 | | } |
| | 57 | |
|
| 13 | 58 | | private IStyle style => canvas.style; |
| | 59 | |
|
| 2 | 60 | | public DCLImage(VisualElement canvas) : this(canvas, null, default, Vector4.zero, new Color(1, 1, 1, 0), default |
| | 61 | |
|
| 1 | 62 | | public DCLImage(VisualElement canvas, Texture2D texture2D, DCLImageScaleMode scaleMode, Vector4 slices, Color co |
| | 63 | | { |
| 1 | 64 | | this.texture2D = texture2D; |
| 1 | 65 | | this.scaleMode = scaleMode; |
| 1 | 66 | | this.slices = slices; |
| 1 | 67 | | this.color = color; |
| 1 | 68 | | this.uvs = uvs; |
| 1 | 69 | | this.canvas = canvas; |
| | 70 | |
|
| 1 | 71 | | canvas.generateVisualContent += OnGenerateVisualContent; |
| 1 | 72 | | } |
| | 73 | |
|
| | 74 | | public void Dispose() |
| | 75 | | { |
| 0 | 76 | | canvas.generateVisualContent -= OnGenerateVisualContent; |
| 0 | 77 | | } |
| | 78 | |
|
| | 79 | | private void SetScaleMode(DCLImageScaleMode scaleMode) |
| | 80 | | { |
| 1 | 81 | | if (this.scaleMode == scaleMode) |
| 1 | 82 | | return; |
| | 83 | |
|
| 0 | 84 | | this.scaleMode = scaleMode; |
| 0 | 85 | | ResolveGenerationWay(); |
| 0 | 86 | | } |
| | 87 | |
|
| | 88 | | private void SetTexture(Texture2D texture) |
| | 89 | | { |
| 1 | 90 | | if (this.texture2D == texture) |
| 0 | 91 | | return; |
| | 92 | |
|
| 1 | 93 | | this.texture2D = texture; |
| 1 | 94 | | ResolveGenerationWay(); |
| 1 | 95 | | } |
| | 96 | |
|
| | 97 | | private void SetSlices(Vector4 slices) |
| | 98 | | { |
| 1 | 99 | | if (this.slices == slices) |
| 0 | 100 | | return; |
| | 101 | |
|
| 1 | 102 | | this.slices = slices; |
| 1 | 103 | | ResolveGenerationWay(); |
| 1 | 104 | | } |
| | 105 | |
|
| | 106 | | private void SetColor(Color color) |
| | 107 | | { |
| 1 | 108 | | if (this.color == color) |
| 0 | 109 | | return; |
| | 110 | |
|
| 1 | 111 | | this.color = color; |
| 1 | 112 | | ResolveGenerationWay(); |
| 1 | 113 | | } |
| | 114 | |
|
| | 115 | | private void SetUVs(DCLUVs uvs) |
| | 116 | | { |
| 1 | 117 | | if (this.uvs.Equals(uvs)) |
| 0 | 118 | | return; |
| | 119 | |
|
| 1 | 120 | | this.uvs = uvs; |
| 1 | 121 | | ResolveGenerationWay(); |
| 1 | 122 | | } |
| | 123 | |
|
| | 124 | | private void ResolveGenerationWay() |
| | 125 | | { |
| 4 | 126 | | if (texture2D != null) |
| | 127 | | { |
| 1 | 128 | | switch (scaleMode) |
| | 129 | | { |
| | 130 | | case DCLImageScaleMode.CENTER: |
| 0 | 131 | | SetCentered(); |
| 0 | 132 | | break; |
| | 133 | | case DCLImageScaleMode.STRETCH: |
| 0 | 134 | | AdjustUVs(); |
| 0 | 135 | | SetStretched(); |
| 0 | 136 | | break; |
| | 137 | | case DCLImageScaleMode.NINE_SLICES: |
| 1 | 138 | | AdjustSlices(); |
| 1 | 139 | | SetSliced(); |
| 1 | 140 | | break; |
| | 141 | | } |
| | 142 | | } |
| 3 | 143 | | else SetSolidColor(); |
| | 144 | |
|
| 4 | 145 | | canvas.MarkDirtyRepaint(); |
| 4 | 146 | | } |
| | 147 | |
|
| | 148 | | private void AdjustUVs() |
| | 149 | | { |
| | 150 | | // check uvs |
| 0 | 151 | | if (uvs.Equals(default)) |
| 0 | 152 | | uvs = DCLUVs.Default; |
| 0 | 153 | | } |
| | 154 | |
|
| | 155 | | private void AdjustSlices() |
| | 156 | | { |
| 1 | 157 | | if (slices[0] + slices[2] > 1f) |
| | 158 | | { |
| 0 | 159 | | slices[0] = Mathf.Min(1f, slices[0]); |
| 0 | 160 | | slices[2] = 1f - slices[0]; |
| | 161 | | } |
| | 162 | |
|
| 1 | 163 | | if (slices[1] + slices[3] > 1f) |
| | 164 | | { |
| 0 | 165 | | slices[1] = Mathf.Min(1f, slices[1]); |
| 0 | 166 | | slices[3] = 1f - slices[1]; |
| | 167 | | } |
| 1 | 168 | | } |
| | 169 | |
|
| | 170 | | private void SetSliced() |
| | 171 | | { |
| | 172 | | // Instead of generating a sliced mesh manually pass it to the existing logic of background |
| 1 | 173 | | style.backgroundImage = Background.FromTexture2D(texture2D); |
| 1 | 174 | | style.unityBackgroundImageTintColor = new StyleColor(color); |
| 1 | 175 | | style.backgroundColor = new StyleColor(StyleKeyword.None); |
| | 176 | |
|
| 1 | 177 | | var texWidth = texture2D.width; |
| 1 | 178 | | var texHeight = texture2D.height; |
| | 179 | |
|
| | 180 | | // convert slices to absolute values |
| 1 | 181 | | style.unitySliceLeft = new StyleInt((int)(slices[0] * texWidth)); |
| 1 | 182 | | style.unitySliceTop = new StyleInt((int)(slices[1] * texHeight)); |
| 1 | 183 | | style.unitySliceRight = new StyleInt((int)(slices[2] * texWidth)); |
| 1 | 184 | | style.unitySliceBottom = new StyleInt((int)(slices[3] * texHeight)); |
| 1 | 185 | | customMeshGenerationRequired = false; |
| 1 | 186 | | } |
| | 187 | |
|
| | 188 | | private void SetCentered() |
| | 189 | | { |
| 0 | 190 | | style.backgroundImage = new StyleBackground(StyleKeyword.Null); |
| 0 | 191 | | style.backgroundColor = new StyleColor(StyleKeyword.None); |
| 0 | 192 | | customMeshGenerationRequired = true; |
| 0 | 193 | | } |
| | 194 | |
|
| | 195 | | private void SetStretched() |
| | 196 | | { |
| 0 | 197 | | style.backgroundImage = new StyleBackground(StyleKeyword.Null); |
| 0 | 198 | | style.backgroundColor = new StyleColor(StyleKeyword.None); |
| 0 | 199 | | customMeshGenerationRequired = true; |
| 0 | 200 | | } |
| | 201 | |
|
| | 202 | | private void SetSolidColor() |
| | 203 | | { |
| 3 | 204 | | style.backgroundImage = new StyleBackground(StyleKeyword.None); |
| 3 | 205 | | style.backgroundColor = new StyleColor(color); |
| 3 | 206 | | customMeshGenerationRequired = false; |
| 3 | 207 | | } |
| | 208 | |
|
| | 209 | | private void OnGenerateVisualContent(MeshGenerationContext mgc) |
| | 210 | | { |
| 0 | 211 | | if (!customMeshGenerationRequired) |
| 0 | 212 | | return; |
| | 213 | |
|
| 0 | 214 | | switch (scaleMode) |
| | 215 | | { |
| | 216 | | case DCLImageScaleMode.CENTER: |
| 0 | 217 | | GenerateCenteredTexture(mgc); |
| 0 | 218 | | break; |
| | 219 | | case DCLImageScaleMode.STRETCH: |
| 0 | 220 | | GenerateStretched(mgc); |
| | 221 | | break; |
| | 222 | | } |
| 0 | 223 | | } |
| | 224 | |
|
| | 225 | | private void GenerateStretched(MeshGenerationContext mgc) |
| | 226 | | { |
| | 227 | | // in local coords |
| 0 | 228 | | var r = canvas.contentRect; |
| | 229 | |
|
| 0 | 230 | | float left = 0; |
| 0 | 231 | | float right = r.width; |
| 0 | 232 | | float top = 0; |
| 0 | 233 | | float bottom = r.height; |
| | 234 | |
|
| 0 | 235 | | VERTICES[0].position = new Vector3(left, bottom, Vertex.nearZ); |
| 0 | 236 | | VERTICES[1].position = new Vector3(left, top, Vertex.nearZ); |
| 0 | 237 | | VERTICES[2].position = new Vector3(right, top, Vertex.nearZ); |
| 0 | 238 | | VERTICES[3].position = new Vector3(right, bottom, Vertex.nearZ); |
| | 239 | |
|
| 0 | 240 | | var mwd = mgc.Allocate(VERTICES.Length, INDICES.Length, texture2D); |
| | 241 | |
|
| | 242 | | // uv Rect [0;1] that was assigned by the Dynamic atlas by UI Toolkit |
| 0 | 243 | | var uvRegion = mwd.uvRegion; |
| | 244 | |
|
| 0 | 245 | | VERTICES[0].uv = uvs.BottomLeft * uvRegion.size + uvRegion.min; |
| 0 | 246 | | VERTICES[1].uv = uvs.TopLeft * uvRegion.size + uvRegion.min; |
| 0 | 247 | | VERTICES[2].uv = uvs.TopRight * uvRegion.size + uvRegion.min; |
| 0 | 248 | | VERTICES[3].uv = uvs.BottomRight * uvRegion.size + uvRegion.min; |
| | 249 | |
|
| 0 | 250 | | ApplyVerticesTint(); |
| | 251 | |
|
| 0 | 252 | | mwd.SetAllVertices(VERTICES); |
| 0 | 253 | | mwd.SetAllIndices(INDICES); |
| 0 | 254 | | } |
| | 255 | |
|
| | 256 | | private void GenerateCenteredTexture(MeshGenerationContext mgc) |
| | 257 | | { |
| | 258 | | // in local coords |
| 0 | 259 | | var r = canvas.contentRect; |
| | 260 | |
|
| 0 | 261 | | var panelScale = canvas.worldTransform.lossyScale; |
| 0 | 262 | | float targetTextureWidth = texture2D.width * panelScale[0]; |
| 0 | 263 | | float targetTextureHeight = texture2D.height * panelScale[1]; |
| | 264 | |
|
| | 265 | | // Remain the original center |
| 0 | 266 | | var center = r.center; |
| | 267 | |
|
| 0 | 268 | | float width = Mathf.Min(r.width, targetTextureWidth); |
| 0 | 269 | | float height = Mathf.Min(r.height, targetTextureHeight); |
| | 270 | |
|
| 0 | 271 | | float left = center.x - (width / 2f); |
| 0 | 272 | | float right = center.x + (width / 2f); |
| 0 | 273 | | float top = center.y - (height / 2f); |
| 0 | 274 | | float bottom = center.y + (height / 2f); |
| | 275 | |
|
| 0 | 276 | | VERTICES[0].position = new Vector3(left, bottom, Vertex.nearZ); |
| 0 | 277 | | VERTICES[1].position = new Vector3(left, top, Vertex.nearZ); |
| 0 | 278 | | VERTICES[2].position = new Vector3(right, top, Vertex.nearZ); |
| 0 | 279 | | VERTICES[3].position = new Vector3(right, bottom, Vertex.nearZ); |
| | 280 | |
|
| 0 | 281 | | var mwd = mgc.Allocate(VERTICES.Length, INDICES.Length, texture2D); |
| | 282 | |
|
| | 283 | | // uv Rect [0;1] that was assigned by the Dynamic atlas by UI Toolkit |
| 0 | 284 | | var uvRegion = mwd.uvRegion; |
| | 285 | |
|
| | 286 | | // the texture should be cut off if it exceeds the parent rect |
| 0 | 287 | | var uvsDisplacementX = (1 - width / targetTextureWidth) / 2f; |
| 0 | 288 | | var uvsDisplacementY = (1 - height / targetTextureHeight) / 2f; |
| | 289 | |
|
| 0 | 290 | | VERTICES[0].uv = new Vector2(uvsDisplacementX, uvsDisplacementY) * uvRegion.size + uvRegion.min; |
| 0 | 291 | | VERTICES[1].uv = new Vector2(uvsDisplacementX, 1 - uvsDisplacementY) * uvRegion.size + uvRegion.min; |
| 0 | 292 | | VERTICES[2].uv = new Vector2(1 - uvsDisplacementX, 1 - uvsDisplacementY) * uvRegion.size + uvRegion.min; |
| 0 | 293 | | VERTICES[3].uv = new Vector2(1 - uvsDisplacementX, uvsDisplacementY) * uvRegion.size + uvRegion.min; |
| | 294 | |
|
| 0 | 295 | | ApplyVerticesTint(); |
| | 296 | |
|
| 0 | 297 | | mwd.SetAllVertices(VERTICES); |
| 0 | 298 | | mwd.SetAllIndices(INDICES); |
| 0 | 299 | | } |
| | 300 | |
|
| | 301 | | private void ApplyVerticesTint() |
| | 302 | | { |
| 0 | 303 | | for (var i = 0; i < VERTICES.Length; i++) |
| 0 | 304 | | VERTICES[i].tint = color; |
| 0 | 305 | | } |
| | 306 | | } |
| | 307 | | } |