diff --git a/layout_plugin.module b/layout_plugin.module index b08d54c..6c88fb4 100644 --- a/layout_plugin.module +++ b/layout_plugin.module @@ -5,6 +5,7 @@ * Hook implementations for Layout Plugin module. */ +use \Drupal\Component\Utility\Html; use \Drupal\Core\Routing\RouteMatchInterface; use \Drupal\layout_plugin\Layout; @@ -55,3 +56,94 @@ function _layout_plugin_preprocess_layout(&$variables) { $variables['settings'] = $content['#settings'] ?: []; $variables['layout'] = $content['#layout'] ?: []; } + +/** + * Generates a SVG based on a Layout's icon map. + * + * @param array $icon_map + * A two dimensional array representing the visual output of the layout. + * @param int $width + * The width of the generated SVG. + * @param int $height + * The height of the generated SVG. + * @param string $fill + * The fill color of regions. + * @param string $stroke + * The color of region borders. + * @param int $stroke_width + * The width of region borders. + * @param int $padding + * The padding between regions. Any value above 0 is valid. + * + * @return string + * A render array representing a SVG icon. + */ +function layout_plugin_generate_icon_map_svg($icon_map, $width = 250, $height = 300, $fill = 'lightgray', $stroke = 'black', $stroke_width = 2, $padding = 5) { + $content = []; + + $region_rects = []; + $num_rows = count($icon_map); + foreach ($icon_map as $row => $cols) { + $num_cols = count($cols); + foreach ($cols as $col => $region) { + if (!isset($region_rects[$region])) { + // The first instance of a region is always our starting point. + $x = $col * ($width / $num_cols); + $y = ($row / $num_rows) * $height; + $region_rects[$region] = [ + 'x' => $x, + 'y' => $y, + 'width' => ($width / $num_cols) - $padding, + 'height' => ($height / $num_rows) - $padding, + 'last_col' => $col, + 'last_row' => $row, + ]; + } + else { + if ($region_rects[$region]['last_col'] != $col) { + $region_rects[$region]['width'] += ($width / $num_cols); + } + if ($region_rects[$region]['last_row'] != $row) { + $region_rects[$region]['height'] += ($height / $num_rows); + } + } + } + } + + // Append each polygon to the SVG. + foreach ($region_rects as $region => $points) { + $title = [ + '#type' => 'html_tag', + '#tag' => 'title', + '#value' => $region, + ]; + $rect = [ + '#type' => 'html_tag', + '#tag' => 'rect', + '#attributes' => [ + 'x' => $region_rects[$region]['x'], + 'y' => $region_rects[$region]['y'], + 'width' => $region_rects[$region]['width'], + 'height' => $region_rects[$region]['height'], + 'style' => 'fill:' . $fill . ';stroke:' . $stroke . ';stroke-width:' . $stroke_width, + 'class' => $region, + ], + '#value' => render($title), + ]; + $content[] = [ + '#type' => 'html_tag', + '#tag' => 'g', + '#value' => render($rect), + ]; + } + + return [ + '#type' => 'html_tag', + '#tag' => 'svg', + '#attributes' => [ + 'width' => $width, + 'height' => $height, + ], + '#value' => render($content), + ]; +} diff --git a/modules/layout_plugin_example/layout_plugin_example.layouts.yml b/modules/layout_plugin_example/layout_plugin_example.layouts.yml index be9f51c..c9a4e2a 100644 --- a/modules/layout_plugin_example/layout_plugin_example.layouts.yml +++ b/modules/layout_plugin_example/layout_plugin_example.layouts.yml @@ -3,6 +3,9 @@ layout_example_1col: category: Examples template: templates/layout-example-1col css: css/layout-example-1col.css + icon_map: + - [top] + - [bottom] regions: top: label: Top region @@ -14,8 +17,39 @@ layout_example_2col: category: Examples template: templates/layout-example-2col css: css/layout-example-2col.css + icon_map: + - [left, right] regions: left: label: Left region right: label: Right region + +layout_example_stacked: + label: 2 Column layout + category: Examples + template: templates/layout-example-2col + css: css/layout-example-2col.css + icon_map: + - [sidebar, top, top] + - [sidebar, left, right] + - [sidebar, middle, middle] + - [footer_left, footer_right] + - [footer_full] + regions: + sidebar: + label: Sidebar + top: + label: Top + left_first: + label: Left first + right_first: + label: Right first + middle: + label: middle + footer_left: + label: Footer left + footer_right: + label: Footer right + footer_full: + label: Footer full diff --git a/modules/layout_plugin_example/layout_plugin_example.routing.yml b/modules/layout_plugin_example/layout_plugin_example.routing.yml new file mode 100644 index 0000000..e540fa1 --- /dev/null +++ b/modules/layout_plugin_example/layout_plugin_example.routing.yml @@ -0,0 +1,7 @@ +layout_plugin_example.dynamic_icons: + path: '/admin/layout_plugin_example/layout_map/{layout_id}' + defaults: + _controller: '\Drupal\layout_plugin_example\Controller\LayoutExampleController::renderIconMap' + _title: 'Layout Map Rendering Example' + requirements: + _permission: 'access administration pages' diff --git a/modules/layout_plugin_example/src/Controller/LayoutExampleController.php b/modules/layout_plugin_example/src/Controller/LayoutExampleController.php new file mode 100644 index 0000000..6f0dece --- /dev/null +++ b/modules/layout_plugin_example/src/Controller/LayoutExampleController.php @@ -0,0 +1,64 @@ +layoutPluginManager = $layout_plugin_manager; + } + + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container) { + return new static( + $container->get('plugin.manager.layout_plugin') + ); + } + + public function renderIconMap($layout_id) { + $layout_definition = $this->layoutPluginManager->getDefinition($layout_id); + $build = []; + $build[] = []; + $build[] = [ + '#type' => 'container', + 0 => layout_plugin_generate_icon_map_svg($layout_definition['icon_map']), + '#prefix' => t('

Default Icon

') + ]; + $build[] = [ + '#type' => 'container', + 0 => layout_plugin_generate_icon_map_svg($layout_definition['icon_map'], 200, 250, 'aliceblue', 'darkturquoise', 3, 10), + '#prefix' => t('

Customized icon

') + ]; + $build[] = [ + '#type' => 'container', + 0 => layout_plugin_generate_icon_map_svg($layout_definition['icon_map'], 600, 350, 'firebrick', 'darkred'), + '#prefix' => t('

Strange, non-standard dimensions

') + ]; + return $build; + } + +} diff --git a/src/Annotation/Layout.php b/src/Annotation/Layout.php index d0d5bb0..c8ab727 100644 --- a/src/Annotation/Layout.php +++ b/src/Annotation/Layout.php @@ -140,6 +140,19 @@ class Layout extends Plugin { public $icon; /** + * A two dimensional array representing the visual output of the layout. + * + * Example (in PHP): + * - [sidebar, top] + * - [sidebar, left, right] + * - [sidebar, middle] + * - [footer_left, footer_right] + * + * @var string optional + */ + public $icon_map; + + /** * An associative array of regions in this layout. * * The key of the array is the machine name of the region, and the value is diff --git a/src/Plugin/Layout/LayoutBase.php b/src/Plugin/Layout/LayoutBase.php index ed3c6b8..ff8dd57 100644 --- a/src/Plugin/Layout/LayoutBase.php +++ b/src/Plugin/Layout/LayoutBase.php @@ -76,6 +76,18 @@ abstract class LayoutBase extends PluginBase implements LayoutInterface { } /** + * Get a two dimensional array representing the visual output of the layout. + * + * This can be used to generate dynamic icons or user interfaces. + * + * @return array + * A two dimensional array representing the visual output of the layout. + */ + public function getIconMap() { + return isset($this->pluginDefinition['icon_map']) && $this->pluginDefinition['icon_map'] ? $this->pluginDefinition['icon_map'] : FALSE; + } + + /** * Get the asset library name. * * @return string