// 
// このコードは、DioDocs for Imaging のサンプルの一部として提供されています。
// © MESCIUS inc. All rights reserved.
// 
using System;
using System.IO;
using System.Drawing;
using System.Collections.Generic;
using System.Linq;
using System.Numerics;
using GrapeCity.Documents.Drawing;
using GrapeCity.Documents.Text;
using GrapeCity.Documents.Imaging;
using GrapeCity.Documents.Svg;
using DsImagingWeb.Demos.Common;
using System.Xml;

namespace DsImagingWeb.Demos
{
    // このサンプルでは、SVG 要素を組み合わせてクリッピングパスを作成し、
    // 幾何学図形を効果的に結合する方法を示します。
    // 画像の一部は SVG の title 要素に関連付けられており、
    // SVG をブラウザーで表示した場合にツールチップとして表示されます。
    public class SvgMergedShapes
    {
        public string DefaultMime { get => Common.Util.MimeTypes.SVG; }

        public Stream GenerateImageStream(string targetMime, Size pixelSize, float dpi, bool opaque, string[] sampleParams = null)
        {
            if (targetMime != Common.Util.MimeTypes.SVG)
                throw new Exception("This sample only supports SVG output format.");

            using var svgDoc = new GcSvgDocument();
            var svg = svgDoc.RootSvg;
            var items = svg.Children;

            var width = new SvgLength(pixelSize.Width);
            var height = new SvgLength(pixelSize.Height);

            svg.Width = width;
            svg.Height = height;

            // ルートのタイトル
            var title = new SvgTitleElement();
            items.Add(title);
            title.Children.Add(new SvgContentElement(XmlNodeType.Text)
            {
                Content = "Root SVG Title"
            });
            // ルートの境界
            var bounds = new SvgRectElement()
            {
                X = new SvgLength(0),
                Y = new SvgLength(0),
                Width = width,
                Height = height,
                Stroke = new SvgPaint(new SvgColor(Color.DarkBlue)),
                Fill = new SvgPaint(new SvgColor(Color.DarkSeaGreen)),
            };
            items.Add(bounds);

            // ジオメトリ
            float
                centerX = 200,
                centerY = 200,
                radius = 190,
                polyWidth = 180,
                polyHeight = 320,
                polyD = 30,
                pad = 10;

            // 他のすべての要素を保持するための外部グループを追加します。
            // これにより、全体の境界内での位置合わせが容易になります。
            var outerGroup = new SvgGroupElement();
            items.Add(outerGroup);
            items = outerGroup.Children;
            // グループを中央に配置します。
            var outerGroupTranslateX = new SvgLength(pixelSize.Width / 2 - centerX);
            var outerGroupTranslateY = new SvgLength(pixelSize.Height / 2 - centerY - polyHeight / 2);
            outerGroup.Transform = new List<SvgTransform>()
            {
                new SvgTranslateTransform() { TranslateX = outerGroupTranslateX, TranslateY = outerGroupTranslateY },
            };

            // 複雑なクリッピングパスを提供するために、さまざまな幾何図形を
            // 結合するために使用される clipPath 要素を含む 'defs' 要素を追加します。
            var defs = new SvgDefsElement();
            items.Add(defs);

            // 円と、逆キーストーン（要石）に似た多角形を追加して、外部クリップを作成します。
            // これら2つの図形の結合は、鍵穴のような形になります。
            var clipPathOuter = new SvgClipPathElement() { ID = "outerClip" };
            defs.Children.Add(clipPathOuter);
            clipPathOuter.Children.Add(new SvgCircleElement()
            {
                CenterX = new SvgLength(centerX),
                CenterY = new SvgLength(centerY),
                Radius = new SvgLength(radius)
            });
            clipPathOuter.Children.Add(new SvgPolygonElement()
            {
                Points = new List<SvgPoint>()
                {
                    new SvgPoint(new SvgLength(centerX - polyWidth / 2), new SvgLength(centerY + radius * 0.8f)),
                    new SvgPoint(new SvgLength(centerX - polyWidth / 2 - polyD), new SvgLength(centerY + radius + polyHeight)),
                    new SvgPoint(new SvgLength(centerX + polyWidth / 2 + polyD), new SvgLength(centerY + radius + polyHeight)),
                    new SvgPoint(new SvgLength(centerX + polyWidth / 2), new SvgLength(centerY + radius * 0.8f)),
                }
            });

            // 小さな円と、キーストーン多角形よりも小さな長方形を追加して、
            // 内部クリップを作成します。
            var clipPathInner = new SvgClipPathElement() { ID = "innerClip" };
            defs.Children.Add(clipPathInner);
            clipPathInner.Children.Add(new SvgCircleElement()
            {
                CenterX = new SvgLength(centerX),
                CenterY = new SvgLength(centerY),
                Radius = new SvgLength(radius - pad)
            });
            clipPathInner.Children.Add(new SvgRectElement()
            {
                X = new SvgLength(centerX - polyWidth / 2 + pad),
                Y = new SvgLength(centerY + radius * 0.8f),
                Width = new SvgLength(polyWidth - pad * 2),
                Height = new SvgLength(polyHeight - pad * 2)
            });

            // SVG領域全体（100%x100%）を占める塗りつぶされた長方形ですが、
            // "outerClip" 図形によってクリップされます。
            var rcOuter = new SvgRectElement()
            {
                Width = new SvgLength(width.Value - outerGroupTranslateX.Value),
                Height = new SvgLength(height.Value - outerGroupTranslateY.Value),
                Fill = new SvgPaint(Color.DarkBlue),
                ClipPath = new SvgReference("outerClip")
            };
            items.Add(rcOuter);
            var descR = new SvgTitleElement();
            descR.Children.Add(new SvgContentElement(XmlNodeType.Text)
            {
                Content = "Title of the dark blue rectangle"
            });
            rcOuter.Children.Add(descR);

            // "innerClip" によってクリップされたグループ。これには
            // 黄色の塗りつぶしと、回転された半透明のラスタ画像が含まれます。
            var group = new SvgGroupElement()
            {
                ClipPath = new SvgReference("innerClip")
            };
            items.Add(group);

            // "innerClip" によってクリップされたグループに、
            // 領域全体（100%x100%）を占める塗りつぶされた長方形を追加します。
            var rcInner = new SvgRectElement()
            {
                Width = new SvgLength(width.Value - outerGroupTranslateX.Value),
                Height = new SvgLength(height.Value - outerGroupTranslateY.Value),
                Fill = new SvgPaint(Color.DarkOrange),
            };
            group.Children.Add(rcInner);

            var desc = new SvgTitleElement();
            rcInner.Children.Add(desc);
            desc.Children.Add(new SvgContentElement(XmlNodeType.Text)
            {
                Content = "Title of the dark orange rectangle"
            });

            // グループには、回転させて半透明で描画されるサンプル画像も追加します。
            var imagePath = Path.Combine("Resources", "Images", "colosseum-resized.jpg");
            var bmp = new GcBitmap(imagePath);

            var imgTranslateX = new SvgLength(188);
            var imgTranslateY = new SvgLength(-55);

            var img = new SvgImageElement()
            {
                Href = new SvgReference(bmp, true) { InJpegFormat = true },
                Width = new SvgLength(400),
                Height = new SvgLength(525),
                Transform = new List<SvgTransform>()
                {
                    new SvgTranslateTransform() { TranslateX = imgTranslateX, TranslateY = imgTranslateY },
                    new SvgRotateTransform() { Angle = new SvgAngle(30) }
                },
                Opacity = 0.8f,
            };
            group.Children.Add(img);

            var descImg = new SvgTitleElement();
            img.Children.Add(descImg);
            descImg.Children.Add(new SvgContentElement(XmlNodeType.Text)
            {
                Content = "Title of the image"
            });

            // 出力ストリームにSVGを保存します。
            var ms = new MemoryStream();
            svgDoc.Save(ms, new XmlWriterSettings() { Indent = true });
            ms.Seek(0, SeekOrigin.Begin);
            return ms;
        }
    }
}