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