元に戻す/やり直し

UndoStackクラスを使用すると、ページ、フォーム、任意の要素で元に戻す/やり直しを行うことができます。

通常のHTML入力要素やほとんどのWijmoコントロールへの変更を追跡し、元に戻す/やり直しのショートカットキーを自動的に処理し、元に戻す/やり直しの操作をプログラムで実行するためのコマンドを提供します。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { UndoStack } from '@grapecity/wijmo.undo'; import { ComboBox, InputNumber, InputDate, AutoComplete, MultiSelect, MultiAutoComplete } from '@grapecity/wijmo.input'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { RadialGauge, NeedleLength, NeedleShape, ShowText } from '@grapecity/wijmo.gauge'; import { CellRangeEventArgs } from '@grapecity/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create controls new ComboBox('#country', { itemsSource: getCountries(), isRequired: false, selectedIndex: -1 }); new InputNumber('#amount', { format: 'c2', min: 0, step: 10, isRequired: false, value: null }); new InputDate('#date', { isRequired: false, value: null }); new ComboBox('#color', { itemsSource: getColors(), isRequired: false, selectedIndex: -1 }); new AutoComplete('#ac', { itemsSource: getColors(), selectedIndex: -1 }); new MultiSelect('#colors', { itemsSource: getColors() }); new MultiAutoComplete('#mac', { itemsSource: getColors(), selectedIndex: -1 }); new RadialGauge('#gauge', { thickness: .2, min: 0, max: 100, value: 50, isReadOnly: false, tickSpacing: 10, showTicks: true, showText: ShowText.Value, needleShape: NeedleShape.Outer, needleLength: NeedleLength.Inner }); // add a grid let g = new FlexGrid('#grid', { anchorCursor: true, frozenColumns: 2, allowAddNew: true, allowDelete: true, itemsSource: getData(), columns: [ { binding: 'id', header: 'ID', width: 80 }, { binding: 'name', header: '名前' }, { binding: 'country', header: '国' }, { binding: 'active', header: '有効' }, { binding: 'downloads', header: 'DL数', width: 80 }, { binding: 'sales', header: '売上', width: 80 }, ], }); // add some data maps let col = g.getColumn('name'); col.dataMap = getNames(); col.dataMap.isEditable = true; col = g.getColumn('country'); col.dataMap = getCountries(); // add/delete grid rows in code document.getElementById('add-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; let newItem = view.addNew(); newItem.id = -1; newItem.name = '新しい項目'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form }); document.getElementById('del-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form }); document.getElementById('nr-top').addEventListener('click', (e) => { g.newRowAtTop = e.target.checked; }); // create undo/redo buttons let btnUndo = document.getElementById('undo'); let btnRedo = document.getElementById('redo'); let btnClear = document.getElementById('clear'); let cnt = document.getElementById('undo-cnt'); // create undo stack let undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: (s) => { btnUndo.disabled = !s.canUndo; btnRedo.disabled = !s.canRedo; btnClear.disabled = !s.actionCount; cnt.textContent = s.actionCount.toString(); }, }); // hook up undo/redo/clear buttons btnUndo.addEventListener('click', () => { undoStack.undo(); }); btnRedo.addEventListener('click', () => { undoStack.redo(); }); btnClear.addEventListener('click', () => { undoStack.clear(); }); // create some data function getColors() { return '黒,白,赤,緑,青,黄,茶,オレンジ'.split(','); } function getCountries() { return 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','); } function getNames() { return '成宮 真紀,山本 雅治,加藤 泰江,川村 匡'.split(','); } function getData() { let countries = getCountries(), names = getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity UndoStack</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- undo/redo toolbar --> <div class="toolbar"> <button id="undo" class="btn btn-primary" disabled> <span class="arrow">&#x21B6;</span> 元に戻す (Ctrl+Z) </button> <button id="redo" class="btn btn-primary" disabled> <span class="arrow">&#x21B7;</span> やり直し (Ctrl+Y) </button> <button class="btn" disabled> アクション回数: <span id="undo-cnt">0</span> </button> <button id="clear" class="btn btn-default" disabled> リセット </button> </div> <!-- undo/redo form --> <form id="undoable-form"> <div class="row"> <!-- HTML input elements --> <div class="col-md-5"> <h3>HTML入力要素</h3> <div class="form-group"> <label for="firstName">名字</label> <input id="firstName" class="form-control" placeholder="名字" /> </div> <div class="form-group"> <label for="lastName">名前</label> <input id="lastName" class="form-control" placeholder="名前"/> </div> <div class="form-group"> <label for="select">選択</label> <select id="select" class="form-control"> <option value="value1">リンゴ</option> <option value="value2" selected>オレンジ</option> <option value="value3">ブドウ</option> </select> </div> <div class="form-group"> <label for="area">複数行テキスト</label> <textarea id="area" class="form-control" placeholder="複数行テキスト"></textarea> </div> <div class="form-group label-indent"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 赤 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 緑 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 青 </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> あたたかい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> つめたい </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 常温 </label> </div> </div> <!-- Wijmo controls --> <div class="col-md-7"> <h3>Wijmoコントロール</h3> <div class="form-group"> <label for="country">国</label> <div id="country" placeholder="国"></div> </div> <div class="form-group"> <label for="amount">金額</label> <div id="amount" placeholder="金額"></div> </div> <div class="form-group"> <label for="date">日付</label> <div id="date" placeholder="日付"></div> </div> <div class="form-group"> <label for="color" title="ComboBox">コンボボックス</label> <div id="color"></div> </div> <div class="form-group"> <label for="ac" title="AutoComplete">オートコンプリート</label> <div id="ac"></div> </div> <div class="form-group"> <label for="colors" title="MultiSelect">複数選択</label> <div id="colors"></div> </div> <div class="form-group"> <label for="mac" title="MultiAutoComplete">タグ入力</label> <div id="mac"></div> </div> <div class="form-group"> <label for="gauge">ゲージ</label> <div id="gauge"></div> </div> <div class="form-group"> <label for="grid">グリッド</label> <div id="grid"></div> <button id="add-row" class="btn btn-primary"> コードで行を追加 </button> <button id="del-row" class="btn btn-primary"> コードで行を削除 </button> <label> 新しい行を先頭に表示 <input id="nr-top" class="wj-no-undo" type="checkbox"> </label> </div> </div> </div> </form> </div> </body> </html>
.toolbar { position: sticky; top: 0; z-index: 10; padding: 12px; margin-left: -12px; background: #eee; } .arrow { display: inline-block; transform: scale(2); margin-right: 8px; } .form-group label { min-width: 100px; text-align: right; margin-right: 12px; } .label-indent { margin-left: 100px; } .label-indent label { min-width: 0; } .form-control { display: inline-block; width: auto; } .btn { outline: none !important; } .wj-dropdown, .wj-inputnumber { width: 200px; } .wj-multi-autocomplete { width: 300px; } .wj-flexgrid { height: 250px; } .wj-radialgauge { display: inline-block; width: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);